Fixed #1543: Emojis support on tags

app-loader/app-loader.coffee

@@ -70,10 +70,14 @@ promise.fail () ->
     console.error "Your conf.json file is not a valid json file, please review it."
 
 promise.always ->
+    emojisPromise = $.getJSON("/#{window._version}/emojis/emojis-data.json").then (emojis) ->
+        window.emojis = emojis
     if window.taigaConfig.contribPlugins.length > 0
         loadPlugins(window.taigaConfig.contribPlugins).then () ->
             ljs.load "/#{window._version}/js/app.js", ->
+                emojisPromise.then ->
                     angular.bootstrap(document, ['taiga'])
     else
         ljs.load "/#{window._version}/js/app.js", ->
+            emojisPromise.then ->
                 angular.bootstrap(document, ['taiga'])

app/coffee/app.coffee

@@ -23,6 +23,7 @@
 ###
 
 @taiga = taiga = {}
+taiga.emojis = window.emojis
 @.taigaContribPlugins = @.taigaContribPlugins or window.taigaContribPlugins or []
 
 # Generic function for generate hash from a arbitrary length

app/coffee/modules/common/emojis.coffee

@@ -0,0 +1,84 @@
+###
+# Copyright (C) 2014-2017 Andrey Antukh <niwi@niwi.nz>
+# Copyright (C) 2014-2017 Jesús Espino Garcia <jespinog@gmail.com>
+# Copyright (C) 2014-2017 David Barragán Merino <bameda@dbarragan.com>
+# Copyright (C) 2014-2017 Alejandro Alonso <alejandro.alonso@kaleidos.net>
+# Copyright (C) 2014-2017 Juan Francisco Alcántara <juanfran.alcantara@kaleidos.net>
+# Copyright (C) 2014-2017 Xavi Julian <xavier.julian@kaleidos.net>
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program. If not, see <http://www.gnu.org/licenses/>.
+#
+# File: modules/common/analytics.coffee
+###
+
+taiga = @.taiga
+module = angular.module("taigaCommon")
+
+
+class EmojisService extends taiga.Service
+    @.$inject = []
+
+    constructor: () ->
+        @.emojis = _.map taiga.emojis, (it) ->
+            it.image = "/#{window._version}/emojis/" + it.image
+
+            return it
+        @.emojisById = _.keyBy(@.emojis, 'id')
+        @.emojisByName = _.keyBy(@.emojis, 'name')
+
+
+    searchByName: (name) =>
+        return _.filter @.emojis, (it) -> it.name.indexOf(name) != -1
+
+    getEmojiById: (id) =>
+        return @.emojisById[id]
+
+    getEmojiByName: (name) =>
+        return @.emojisByName[name]
+
+    replaceImgsByEmojiName: (html) =>
+        emojiIds = taiga.getMatches(html, /emojis\/([^"]+).png"/gi)
+
+        for emojiId in emojiIds
+            regexImgs = new RegExp('<img(.*)' + emojiId + '[^>]+\>', 'g')
+            emoji = @.getEmojiById(emojiId)
+            html = html.replace(regexImgs, ':' + emoji.name + ':')
+
+        return html
+
+    replaceEmojiNameByImgs: (text) =>
+        emojiIds = taiga.getMatches(text, /:([\w +-]*):/g)
+
+        for emojiId in emojiIds
+            regexImgs = new RegExp(':' + emojiId + ':', 'g')
+            emoji = @.getEmojiByName(emojiId)
+
+            if emoji
+                text = text.replace(regexImgs, '![alt](' + emoji.image + ')')
+
+        return text
+
+    replaceEmojiNameByHtmlImgs: (text) =>
+        emojiIds = taiga.getMatches(text, /:([\w +-]*):/g)
+
+        for emojiId in emojiIds
+            regexImgs = new RegExp(':' + _.escapeRegExp(emojiId) + ':', 'g')
+            emoji = @.getEmojiByName(emojiId)
+
+            if emoji
+                text = text.replace(regexImgs, '<img src="' + emoji.image + '" />')
+
+        return text
+
+module.service("$tgEmojis", EmojisService)

app/coffee/modules/common/filters.coffee

@@ -143,3 +143,12 @@ inArray = ($filter) ->
             return filter list, (listItem) ->
                 return arrayFilter.indexOf(listItem[element]) != -1
 module.filter("inArray", ["$filter", inArray])
+
+emojify = ($emojis) ->
+    return (input) ->
+        if input
+            return $emojis.replaceEmojiNameByHtmlImgs(_.escape(input))
+
+        return ""
+
+module.filter("emojify", ["$tgEmojis", emojify])

app/coffee/modules/common/tags.coffee

@@ -58,14 +58,14 @@ TagsDirective = ->
 module.directive("tgTags", TagsDirective)
 
 
-ColorizeTagsBacklogDirective = ->
+ColorizeTagsBacklogDirective = ($emojis) ->
     template = _.template("""
         <% _.each(tags, function(tag) { %>
             <% if (tag[1] !== null) { %>
             <span class="tag"
                   style="border-left: 5px solid <%- tag[1] %>"
                   title="<%- tag[0] %>">
-                  <%- tag[0] %>
+                  <%= emojify(tag[0]) %>
             </span>
             <% } %>
         <% }) %>
@@ -73,7 +73,7 @@ ColorizeTagsBacklogDirective = ->
             <% if (tag[1] === null) { %>
             <span class="tag"
                   title="<%- tag[0] %>">
-                  <%- tag[0] %>
+                  <%= emojify(tag[0]) %>
             </span>
             <% } %>
         <% }) %>
@@ -81,7 +81,7 @@ ColorizeTagsBacklogDirective = ->
 
     link = ($scope, $el, $attrs, $ctrl) ->
         render = (tags) ->
-            html = template({tags: tags})
+            html = template({tags: tags, emojify: (text) -> $emojis.replaceEmojiNameByHtmlImgs(_.escape(text))})
             $el.html(html)
 
         $scope.$watch $attrs.tgColorizeBacklogTags, (tags) ->
@@ -92,7 +92,7 @@ ColorizeTagsBacklogDirective = ->
 
     return {link: link}
 
-module.directive("tgColorizeBacklogTags", ColorizeTagsBacklogDirective)
+module.directive("tgColorizeBacklogTags", ["$tgEmojis", ColorizeTagsBacklogDirective])
 
 
 #############################################################################

app/modules/components/filter/filter.jade

@@ -18,7 +18,15 @@ form(name="vm.filtersForm")
 .filters-step-cat
     .filters-applied
         .single-filter.ng-animate-disabled(ng-repeat="it in vm.selectedFilters track by it.key")
-            span.name(ng-attr-style="{{it.color ? 'border-left: 3px solid ' + it.color: ''}}") {{it.name}}
+            span.name(
+                ng-attr-style="{{it.color ? 'border-left: 3px solid ' + it.color: ''}}"
+                ng-if="it.dataType === 'tags'"
+                ng-bind-html="it.name | emojify"
+            )
+            span.name(
+                ng-if="it.dataType !== 'tags'"
+                ng-attr-style="{{it.color ? 'border-left: 3px solid ' + it.color: ''}}"
+            ) {{it.name}}
             a.remove-filter.e2e-remove-filter(
                ng-click="vm.unselectFilter(it)"
                href=""
@@ -77,7 +85,15 @@ form(name="vm.filtersForm")
                         ng-if="!vm.isFilterSelected(filter, it) && !(it.count == 0 && filter.hideEmpty)"
                         ng-click="vm.selectFilter(filter, it)"
                     )
-                        span.name(ng-attr-style="{{it.color ? 'border-left: 3px solid ' + it.color: ''}}") {{it.name}}
+                        span.name(
+                            ng-if="filter.dataType === 'tags'",
+                            ng-attr-style="{{it.color ? 'border-left: 3px solid ' + it.color: ''}}"
+                            ng-bind-html="it.name | emojify"
+                        )
+                        span.name(
+                            ng-if="filter.dataType !== 'tags'",
+                            ng-attr-style="{{it.color ? 'border-left: 3px solid ' + it.color: ''}}"
+                        ) {{it.name}}
                         span.number.e2e-filter-count(ng-if="it.count > 0") {{it.count}}
 
             li.custom-filters.e2e-custom-filters(

app/modules/components/filter/filter.scss

@@ -128,6 +128,9 @@ tg-filter {
         @include ellipsis(100%);
         display: block;
         width: 100%;
+        img {
+            vertical-align: middle;
+        }
     }
     .number {
         background: darken($whitish, 20%); // Fallback

app/modules/components/tags/tag/tag.jade

@@ -1,4 +1,4 @@
-span {{ tag[0] }}
+span(ng-bind-html="tag[0] | emojify")
 tg-svg.icon-close.e2e-delete-tag(
     ng-if="hasPermissions"
     svg-icon="icon-close"

app/modules/components/tags/tag/tag.scss

@@ -19,4 +19,7 @@
         height: 1rem;
         width: 1rem;
     }
+    img {
+        vertical-align: middle;
+    }
 }

app/modules/components/wysiwyg/wysiwyg.directive.coffee

@@ -208,8 +208,6 @@ Medium = ($translate, $confirm, $storage, wysiwygService, animationFrame, tgLoad
         $scope.codeEditorVisible = false
         $scope.codeLans = []
 
-        wysiwygService.loadEmojis()
-
         wysiwygCodeHightlighterService.getLanguages().then (codeLans) ->
             $scope.codeLans = codeLans
 

app/modules/components/wysiwyg/wysiwyg.service.coffee

@@ -26,49 +26,13 @@ class WysiwygService
     @.$inject = [
         "tgWysiwygCodeHightlighterService",
         "tgProjectService",
-        "$tgNavUrls"
+        "$tgNavUrls",
+        "$tgEmojis"
     ]
-    constructor: (@wysiwygCodeHightlighterService, @projectService, @navurls) ->
+    constructor: (@wysiwygCodeHightlighterService, @projectService, @navurls, @emojis) ->
 
     searchEmojiByName: (name) ->
-        return _.filter @.emojis, (it) -> it.name.indexOf(name) != -1
+        return @emojis.searchByName(name)
-
-    setEmojiImagePath: (emojis) ->
-        @.emojis = _.map emojis, (it) ->
-            it.image = "/#{window._version}/emojis/" + it.image
-
-            return it
-
-    loadEmojis: () ->
-        $.getJSON("/#{window._version}/emojis/emojis-data.json").then(@.setEmojiImagePath.bind(this))
-
-    getEmojiById: (id) ->
-        return _.find  @.emojis, (it) -> it.id == id
-
-    getEmojiByName: (name) ->
-        return _.find @.emojis, (it) -> it.name == name
-
-    replaceImgsByEmojiName: (html) ->
-        emojiIds = taiga.getMatches(html, /emojis\/([^"]+).png"/gi)
-
-        for emojiId in emojiIds
-            regexImgs = new RegExp('<img(.*)' + emojiId + '[^>]+\>', 'g')
-            emoji = @.getEmojiById(emojiId)
-            html = html.replace(regexImgs, ':' + emoji.name + ':')
-
-        return html
-
-    replaceEmojiNameByImgs: (text) ->
-        emojiIds = taiga.getMatches(text, /:([\w ]*):/g)
-
-        for emojiId in emojiIds
-            regexImgs = new RegExp(':' + emojiId + ':', 'g')
-            emoji = @.getEmojiByName(emojiId)
-
-            if emoji
-                text = text.replace(regexImgs, '![alt](' + emoji.image + ')')
-
-        return text
 
     pipeLinks: (text) ->
         return text.replace /\[\[(.*?)\]\]/g, (match, p1, offset, str) ->
@@ -134,7 +98,7 @@ class WysiwygService
          }
 
         html = html.replace(/&nbsp;(<\/.*>)/g, "$1")
-        html = @.replaceImgsByEmojiName(html)
+        html = @emojis.replaceImgsByEmojiName(html)
         html = @.replaceUrls(html)
         html = @.removeTrailingListBr(html)
 
@@ -211,7 +175,7 @@ class WysiwygService
             breaks: true
         }
 
-        text = @.replaceEmojiNameByImgs(text)
+        text = @emojis.replaceEmojiNameByImgs(text)
         text = @.pipeLinks(text)
 
         md = window.markdownit({