From f602efea65c2a816c7e29be546d2eb412fe538cc Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Fri, 3 Mar 2017 11:56:02 -0600 Subject: [PATCH] Fix wrong image src with cached gl-emoji and relative root --- app/assets/javascripts/behaviors/gl_emoji.js | 17 ++++++++++++++--- lib/gitlab/emoji.rb | 6 +++--- lib/gitlab/gon_helper.rb | 1 + spec/helpers/gitlab_markdown_helper_spec.rb | 2 +- spec/lib/banzai/filter/emoji_filter_spec.rb | 19 ------------------- spec/support/matchers/markdown_matchers.rb | 3 ++- 6 files changed, 21 insertions(+), 27 deletions(-) diff --git a/app/assets/javascripts/behaviors/gl_emoji.js b/app/assets/javascripts/behaviors/gl_emoji.js index 34e0544afeb..d1d98c3919f 100644 --- a/app/assets/javascripts/behaviors/gl_emoji.js +++ b/app/assets/javascripts/behaviors/gl_emoji.js @@ -10,6 +10,14 @@ function emojiImageTag(name, src) { return `:${name}:`; } +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); } } }; diff --git a/lib/gitlab/emoji.rb b/lib/gitlab/emoji.rb index 35712c214fc..3ef92abd3cf 100644 --- a/lib/gitlab/emoji.rb +++ b/lib/gitlab/emoji.rb @@ -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}" - "#{force_fallback && sprite === false ? emoji_image_tag(emoji_name, emoji_fallback_image_source) : emoji_info['moji']}" + "#{force_fallback && sprite === false ? emoji_image_tag(emoji_name, emoji_fallback_image_source) : emoji_info['moji']}" end end end diff --git a/lib/gitlab/gon_helper.rb b/lib/gitlab/gon_helper.rb index 57fc4eb7c18..1cfede5460f 100644 --- a/lib/gitlab/gon_helper.rb +++ b/lib/gitlab/gon_helper.rb @@ -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 diff --git a/spec/helpers/gitlab_markdown_helper_spec.rb b/spec/helpers/gitlab_markdown_helper_spec.rb index c201d37971a..9ffd4b9371c 100644 --- a/spec/helpers/gitlab_markdown_helper_spec.rb +++ b/spec/helpers/gitlab_markdown_helper_spec.rb @@ -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 '📖Book' + to eq '📖Book' end end diff --git a/spec/lib/banzai/filter/emoji_filter_spec.rb b/spec/lib/banzai/filter/emoji_filter_spec.rb index f365949f5bf..707212e07fd 100644 --- a/spec/lib/banzai/filter/emoji_filter_spec.rb +++ b/spec/lib/banzai/filter/emoji_filter_spec.rb @@ -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 , 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 diff --git a/spec/support/matchers/markdown_matchers.rb b/spec/support/matchers/markdown_matchers.rb index 13fc619d647..bbbbaf4c5e8 100644 --- a/spec/support/matchers/markdown_matchers.rb +++ b/spec/support/matchers/markdown_matchers.rb @@ -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