Fix wrong image src with cached gl-emoji and relative root
This commit is contained in:
parent
2d6492561c
commit
f602efea65
|
@ -10,6 +10,14 @@ function emojiImageTag(name, src) {
|
|||
return `<img class="emoji" title=":${name}:" alt=":${name}:" src="${src}" width="20" height="20" align="absmiddle" />`;
|
||||
}
|
||||
|
||||
function assembleFallbackImageSrc(inputName) {
|
||||
const name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
|
||||
emojiAliases[inputName] : inputName;
|
||||
const emojiInfo = emojiMap[name];
|
||||
const fallbackImageSrc = `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/emoji/${name}-${emojiInfo.digest}.png`;
|
||||
|
||||
return fallbackImageSrc;
|
||||
}
|
||||
const glEmojiTagDefaults = {
|
||||
sprite: false,
|
||||
forceFallback: false,
|
||||
|
@ -19,7 +27,7 @@ function glEmojiTag(inputName, options) {
|
|||
const name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
|
||||
emojiAliases[inputName] : inputName;
|
||||
const emojiInfo = emojiMap[name];
|
||||
const fallbackImageSrc = `${gon.relative_url_root || ''}/assets/emoji/${name}-${emojiInfo.digest}.png`;
|
||||
const fallbackImageSrc = assembleFallbackImageSrc(name);
|
||||
const fallbackSpriteClass = `emoji-${name}`;
|
||||
|
||||
const classList = [];
|
||||
|
@ -162,6 +170,7 @@ const GlEmojiElementProto = Object.create(HTMLElement.prototype);
|
|||
GlEmojiElementProto.createdCallback = function createdCallback() {
|
||||
const emojiUnicode = this.textContent.trim();
|
||||
const {
|
||||
name,
|
||||
unicodeVersion,
|
||||
fallbackSrc,
|
||||
fallbackSpriteClass,
|
||||
|
@ -184,8 +193,10 @@ GlEmojiElementProto.createdCallback = function createdCallback() {
|
|||
this.classList.add('emoji-icon');
|
||||
this.classList.add(fallbackSpriteClass);
|
||||
} else if (hasImageFallback) {
|
||||
const emojiName = this.dataset.name;
|
||||
this.innerHTML = emojiImageTag(emojiName, fallbackSrc);
|
||||
this.innerHTML = emojiImageTag(name, fallbackSrc);
|
||||
} else {
|
||||
const src = assembleFallbackImageSrc(name);
|
||||
this.innerHTML = emojiImageTag(name, src);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -41,12 +41,12 @@ module Gitlab
|
|||
end
|
||||
|
||||
# CSS sprite fallback takes precedence over image fallback
|
||||
def gl_emoji_tag(name, sprite: false, force_fallback: false)
|
||||
def gl_emoji_tag(name, image: false, sprite: false, force_fallback: false)
|
||||
emoji_name = emojis_aliases[name] || name
|
||||
emoji_info = emojis[emoji_name]
|
||||
emoji_fallback_image_source = ActionController::Base.helpers.asset_url("emoji/#{emoji_info['name']}.png")
|
||||
emoji_fallback_image_source = ActionController::Base.helpers.url_to_image("emoji/#{emoji_info['name']}.png")
|
||||
emoji_fallback_sprite_class = "emoji-#{emoji_name}"
|
||||
"<gl-emoji #{force_fallback && sprite ? "class='emoji-icon #{emoji_fallback_sprite_class}'" : ""} data-name='#{emoji_name}' data-fallback-src='#{emoji_fallback_image_source}' #{sprite ? "data-fallback-sprite-class='#{emoji_fallback_sprite_class}'" : ""} data-unicode-version='#{emoji_unicode_version(emoji_name)}'>#{force_fallback && sprite === false ? emoji_image_tag(emoji_name, emoji_fallback_image_source) : emoji_info['moji']}</gl-emoji>"
|
||||
"<gl-emoji #{force_fallback && sprite ? "class='emoji-icon #{emoji_fallback_sprite_class}'" : ""} data-name='#{emoji_name}' #{image ? "data-fallback-src='#{emoji_fallback_image_source}'" : ""} #{sprite ? "data-fallback-sprite-class='#{emoji_fallback_sprite_class}'" : ""} data-unicode-version='#{emoji_unicode_version(emoji_name)}'>#{force_fallback && sprite === false ? emoji_image_tag(emoji_name, emoji_fallback_image_source) : emoji_info['moji']}</gl-emoji>"
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
@ -4,6 +4,7 @@ module Gitlab
|
|||
gon.api_version = 'v3' # v4 Is not officially released yet, therefore can't be considered as "frozen"
|
||||
gon.default_avatar_url = URI.join(Gitlab.config.gitlab.url, ActionController::Base.helpers.image_path('no_avatar.png')).to_s
|
||||
gon.max_file_size = current_application_settings.max_attachment_size
|
||||
gon.asset_host = ActionController::Base.asset_host
|
||||
gon.relative_url_root = Gitlab.config.gitlab.relative_url_root
|
||||
gon.shortcuts_path = help_page_path('shortcuts')
|
||||
gon.user_color_scheme = Gitlab::ColorSchemes.for_user(current_user).css_class
|
||||
|
|
|
@ -113,7 +113,7 @@ describe GitlabMarkdownHelper do
|
|||
it 'replaces commit message with emoji to link' do
|
||||
actual = link_to_gfm(':book:Book', '/foo')
|
||||
expect(actual).
|
||||
to eq '<gl-emoji data-name="book" data-fallback-src="/assets/emoji/book.png" data-unicode-version="6.0">📖</gl-emoji><a href="/foo">Book</a>'
|
||||
to eq '<gl-emoji data-name="book" data-unicode-version="6.0">📖</gl-emoji><a href="/foo">Book</a>'
|
||||
end
|
||||
end
|
||||
|
||||
|
|
|
@ -88,11 +88,6 @@ describe Banzai::Filter::EmojiFilter, lib: true do
|
|||
expect(doc.css('gl-emoji').first.attr('data-name')).to eq 'thumbsdown'
|
||||
end
|
||||
|
||||
it 'has a data-fallback-src attribute' do
|
||||
doc = filter(':-1:')
|
||||
expect(doc.css('gl-emoji').first.attr('data-fallback-src')).to end_with '.png'
|
||||
end
|
||||
|
||||
it 'has a data-unicode-version attribute' do
|
||||
doc = filter(':-1:')
|
||||
expect(doc.css('gl-emoji').first.attr('data-unicode-version')).to eq '6.0'
|
||||
|
@ -109,18 +104,4 @@ describe Banzai::Filter::EmojiFilter, lib: true do
|
|||
|
||||
expect(doc.to_html).to match(/^This deserves a <gl-emoji.+>, big time\.\z/)
|
||||
end
|
||||
|
||||
it 'uses a custom asset_host context' do
|
||||
ActionController::Base.asset_host = 'https://cdn.example.com'
|
||||
|
||||
doc = filter(':frowning:', asset_host: 'https://this-is-ignored-i-guess?')
|
||||
expect(doc.css('gl-emoji').first.attr('data-fallback-src')).to start_with('https://cdn.example.com')
|
||||
end
|
||||
|
||||
it 'uses a custom asset_host context' do
|
||||
ActionController::Base.asset_host = 'https://cdn.example.com'
|
||||
|
||||
doc = filter("'🎱'", asset_host: 'https://this-is-ignored-i-guess?')
|
||||
expect(doc.css('gl-emoji').first.attr('data-fallback-src')).to start_with('https://cdn.example.com')
|
||||
end
|
||||
end
|
||||
|
|
|
@ -29,7 +29,8 @@ module MarkdownMatchers
|
|||
expect(actual).to have_selector('gl-emoji', count: 10)
|
||||
|
||||
emoji_element = actual.at_css('gl-emoji')
|
||||
expect(emoji_element['data-fallback-src'].to_s).to start_with('/assets')
|
||||
expect(emoji_element['data-name'].to_s).not_to be_empty
|
||||
expect(emoji_element['data-unicode-version'].to_s).not_to be_empty
|
||||
end
|
||||
end
|
||||
|
||||
|
|
Loading…
Reference in New Issue