Emoji picker: better alias handling

app/assets/javascripts/awards_handler.coffee

@@ -76,7 +76,7 @@ class @AwardsHandler
 
     nodes = []
     nodes.push("<div class='award active' title='me'>")
-    nodes.push("<div class='icon emoji-icon " + emojiCssClass + "' data-emoji='" + emoji + "'></div>")
+    nodes.push("<div class='icon emoji-icon #{emojiCssClass}' data-emoji='#{emoji}'></div>")
     nodes.push("<div class='counter'>1</div>")
     nodes.push("</div>")
 
@@ -85,13 +85,19 @@ class @AwardsHandler
     $(".award").tooltip()
 
   resolveNameToCssClass: (emoji) ->
-    unicodeName = $(".emoji-menu-content [data-emoji='?']".replace("?", emoji)).data("unicode-name")
+    emoji_icon = $(".emoji-menu-content [data-emoji='#{emoji}']")
 
-    "emoji-" + unicodeName
+    if emoji_icon.length > 0
+      unicodeName = emoji_icon.data("unicode-name")
+    else
+      # Find by alias
+      unicodeName = $(".emoji-menu-content [data-aliases*=':#{emoji}:']").data("unicode-name")
+
+    "emoji-#{unicodeName}"
 
   postEmoji: (emoji, callback) ->
     $.post @post_emoji_url, { note: {
-      note: ":" + emoji + ":"
+      note: ":#{emoji}:"
       noteable_type: @noteable_type
       noteable_id: @noteable_id
     }},(data) ->
@@ -99,7 +105,7 @@ class @AwardsHandler
         callback.call()
 
   findEmojiIcon: (emoji) ->
-    $(".award [data-emoji='" + emoji + "']")
+    $(".award [data-emoji='#{emoji}']")
 
   scrollToAwards: ->
     $('body, html').animate({

app/helpers/issues_helper.rb

@@ -94,12 +94,13 @@ module IssuesHelper
     end.sort.to_sentence(last_word_connector: ', or ')
   end
 
-  def emoji_icon(name, unicode = nil)
+  def emoji_icon(name, unicode = nil, aliases = [])
     unicode ||= Emoji.emoji_filename(name)
 
     content_tag :div, "",
       class: "icon emoji-icon emoji-#{unicode}",
       "data-emoji" => name,
+      "data-aliases" => aliases.join(" "),
       "data-unicode-name" => unicode
   end
 

app/views/votes/_votes_block.html.haml

@@ -16,14 +16,14 @@
             %ul
               - emojis.each do |emoji|
                 %li
-                  = emoji_icon(emoji["name"], emoji["unicode"])
+                  = emoji_icon(emoji["name"], emoji["unicode"], emoji["aliases"])
 
 - if current_user
   :coffeescript
     post_emoji_url = "#{award_toggle_namespace_project_notes_path(@project.namespace, @project)}"
     noteable_type = "#{votable.class.name.underscore}"
     noteable_id = "#{votable.id}"
-    aliases = #{AwardEmoji::ALIASES.to_json}
+    aliases = #{AwardEmoji.aliases.to_json}
 
     window.awards_handler = new AwardsHandler(
       post_emoji_url,

db/migrate/20151224123230_rename_emojis.rb

+# Migration type: online without errors (works on previous version and new one)
+class RenameEmojis < ActiveRecord::Migration
+  def up
+    # Renames aliases to main names
+    execute("UPDATE notes SET note ='thumbsup' WHERE is_award = true AND note = '+1'")
+    execute("UPDATE notes SET note ='thumbsdown' WHERE is_award = true AND note = '-1'")
+    execute("UPDATE notes SET note ='poop' WHERE is_award = true AND note = 'shit'")
+  end
+
+  def down
+    execute("UPDATE notes SET note ='+1' WHERE is_award = true AND note = 'thumbsup'")
+    execute("UPDATE notes SET note ='-1' WHERE is_award = true AND note = 'thumbsdown'")
+    execute("UPDATE notes SET note ='shit' WHERE is_award = true AND note = 'poop'")
+  end
+end

db/schema.rb

@@ -11,7 +11,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20151210125932) do
+ActiveRecord::Schema.define(version: 20151224123230) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"

fixtures/emojis/aliases.json

+{  
+   "northeast_pointing_airplane":"airplane_northeast",
+   "small_airplane":"airplane_small",
+   "up_pointing_small_airplane":"airplane_small_up",
+   "up_pointing_airplane":"airplane_up",
+   "left_anger_bubble":"anger_left",
+   "right_anger_bubble":"anger_right",
+   "ballot_box_with_ballot":"ballot_box",
+   "ballot_box_with_bold_check":"ballot_box_check",
+   "ballot_box_with_script_x":"ballot_box_x",
+   "ballot_script_x":"ballot_x",
+   "beach_with_umbrella":"beach",
+   "bellhop_bell":"bellhop",
+   "bouquet_of_flowers":"bouquet2",
+   "bullhorn_with_sound_waves":"bullhorn_waves",
+   "pocket calculator":"calculator",
+   "spiral_calendar_pad":"calendar_spiral",
+   "card_file_box":"card_box",
+   "tape_cartridge":"cartridge",
+   "city_sunrise":"city_sunset",
+   "mantlepiece_clock":"clock",
+   "clockwise_right_and_left_semicircle_arrows":"clockwise_arrows",
+   "cloud_with_lightning":"cloud_lightning",
+   "cloud_with_rain":"cloud_rain",
+   "cloud_with_snow":"cloud_snow",
+   "cloud_with_tornado":"cloud_tornado",
+   "old_personal_computer":"computer_old",
+   "building_construction":"contruction_site",
+   "couch_and_lamp":"couch",
+   "couple_with_heart_mm":"couple_mm",
+   "couple_with_heart_ww":"couple_ww",
+   "lower_left_crayon":"crayon",
+   "heavy_latin_cross":"cross_heavy",
+   "white_latin_cross":"cross_white",
+   "black_skull_and_crossbones":"crossbones",
+   "passenger_ship":"cruise_ship",
+   "dagger_knife":"dagger",
+   "desktop_computer":"desktop",
+   "card_index_dividers":"dividers",
+   "document_with_text":"document_text",
+   "dove_of_peace":"dove",
+   "email":"e-mail",
+   "back_of_envelope":"envelope_back",
+   "flying_envelope":"envelope_flying",
+   "stamped_envelope":"envelope_stamped",
+   "pen_over_stamped_envelope":"envelope_stamped_pen",
+   "white_down_pointing_left_hand_index":"finger_pointing_down",
+   "sideways_white_down_pointing_index":"finger_pointing_down2",
+   "sideways_white_left_pointing_index":"finger_pointing_left",
+   "sideways_white_right_pointing_index":"finger_pointing_right",
+   "sideways_white_up_pointing_index":"finger_pointing_up",
+   "flame":"fire",
+   "oncoming_fire_engine":"fire_engine_oncoming",
+   "ac":"flag_ac",
+   "ad":"flag_ad",
+   "ae":"flag_ae",
+   "af":"flag_af",
+   "ag":"flag_ag",
+   "ai":"flag_ai",
+   "al":"flag_al",
+   "am":"flag_am",
+   "ao":"flag_ao",
+   "ar":"flag_ar",
+   "at":"flag_at",
+   "au":"flag_au",
+   "aw":"flag_aw",
+   "az":"flag_az",
+   "ba":"flag_ba",
+   "bb":"flag_bb",
+   "bd":"flag_bd",
+   "be":"flag_be",
+   "bf":"flag_bf",
+   "bg":"flag_bg",
+   "bh":"flag_bh",
+   "bi":"flag_bi",
+   "bj":"flag_bj",
+   "waving_black_flag":"flag_black",
+   "bm":"flag_bm",
+   "bn":"flag_bn",
+   "bo":"flag_bo",
+   "br":"flag_br",
+   "bs":"flag_bs",
+   "bt":"flag_bt",
+   "bw":"flag_bw",
+   "by":"flag_by",
+   "bz":"flag_bz",
+   "ca":"flag_ca",
+   "congo":"flag_cd",
+   "cf":"flag_cf",
+   "cg":"flag_cg",
+   "ch":"flag_ch",
+   "ci":"flag_ci",
+   "chile":"flag_cl",
+   "cm":"flag_cm",
+   "cn":"flag_cn",
+   "co":"flag_co",
+   "cr":"flag_cr",
+   "cu":"flag_cu",
+   "cv":"flag_cv",
+   "cy":"flag_cy",
+   "cz":"flag_cz",
+   "de":"flag_de",
+   "dj":"flag_dj",
+   "dk":"flag_dk",
+   "dm":"flag_dm",
+   "do":"flag_do",
+   "dz":"flag_dz",
+   "ec":"flag_ec",
+   "ee":"flag_ee",
+   "eg":"flag_eg",
+   "eh":"flag_eh",
+   "er":"flag_er",
+   "es":"flag_es",
+   "et":"flag_et",
+   "fi":"flag_fi",
+   "fj":"flag_fj",
+   "fk":"flag_fk",
+   "fm":"flag_fm",
+   "fo":"flag_fo",
+   "fr":"flag_fr",
+   "ga":"flag_ga",
+   "gb":"flag_gb",
+   "gd":"flag_gd",
+   "ge":"flag_ge",
+   "gh":"flag_gh",
+   "gi":"flag_gi",
+   "gl":"flag_gl",
+   "gm":"flag_gm",
+   "gn":"flag_gn",
+   "gq":"flag_gq",
+   "gr":"flag_gr",
+   "gt":"flag_gt",
+   "gu":"flag_gu",
+   "gw":"flag_gw",
+   "gy":"flag_gy",
+   "hk":"flag_hk",
+   "hn":"flag_hn",
+   "hr":"flag_hr",
+   "ht":"flag_ht",
+   "hu":"flag_hu",
+   "indonesia":"flag_id",
+   "ie":"flag_ie",
+   "il":"flag_il",
+   "in":"flag_in",
+   "iq":"flag_iq",
+   "ir":"flag_ir",
+   "is":"flag_is",
+   "it":"flag_it",
+   "je":"flag_je",
+   "jm":"flag_jm",
+   "jo":"flag_jo",
+   "jp":"flag_jp",
+   "ke":"flag_ke",
+   "kg":"flag_kg",
+   "kh":"flag_kh",
+   "ki":"flag_ki",
+   "km":"flag_km",
+   "kn":"flag_kn",
+   "kp":"flag_kp",
+   "kr":"flag_kr",
+   "kw":"flag_kw",
+   "ky":"flag_ky",
+   "kz":"flag_kz",
+   "la":"flag_la",
+   "lb":"flag_lb",
+   "lc":"flag_lc",
+   "li":"flag_li",
+   "lk":"flag_lk",
+   "lr":"flag_lr",
+   "ls":"flag_ls",
+   "lt":"flag_lt",
+   "lu":"flag_lu",
+   "lv":"flag_lv",
+   "ly":"flag_ly",
+   "ma":"flag_ma",
+   "mc":"flag_mc",
+   "md":"flag_md",
+   "me":"flag_me",
+   "mg":"flag_mg",
+   "mh":"flag_mh",
+   "mk":"flag_mk",
+   "ml":"flag_ml",
+   "mm":"flag_mm",
+   "mn":"flag_mn",
+   "mo":"flag_mo",
+   "mr":"flag_mr",
+   "ms":"flag_ms",
+   "mt":"flag_mt",
+   "mu":"flag_mu",
+   "mv":"flag_mv",
+   "mw":"flag_mw",
+   "mx":"flag_mx",
+   "my":"flag_my",
+   "mz":"flag_mz",
+   "na":"flag_na",
+   "nc":"flag_nc",
+   "ne":"flag_ne",
+   "nigeria":"flag_ng",
+   "ni":"flag_ni",
+   "nl":"flag_nl",
+   "no":"flag_no",
+   "np":"flag_np",
+   "nr":"flag_nr",
+   "nu":"flag_nu",
+   "nz":"flag_nz",
+   "om":"flag_om",
+   "pa":"flag_pa",
+   "pe":"flag_pe",
+   "pf":"flag_pf",
+   "pg":"flag_pg",
+   "ph":"flag_ph",
+   "pk":"flag_pk",
+   "pl":"flag_pl",
+   "pr":"flag_pr",
+   "ps":"flag_ps",
+   "pt":"flag_pt",
+   "pw":"flag_pw",
+   "py":"flag_py",
+   "qa":"flag_qa",
+   "ro":"flag_ro",
+   "rs":"flag_rs",
+   "ru":"flag_ru",
+   "rw":"flag_rw",
+   "saudiarabia":"flag_sa",
+   "saudi":"flag_sa",
+   "sb":"flag_sb",
+   "sc":"flag_sc",
+   "sd":"flag_sd",
+   "se":"flag_se",
+   "sg":"flag_sg",
+   "sh":"flag_sh",
+   "si":"flag_si",
+   "sk":"flag_sk",
+   "sl":"flag_sl",
+   "sm":"flag_sm",
+   "sn":"flag_sn",
+   "so":"flag_so",
+   "sr":"flag_sr",
+   "st":"flag_st",
+   "sv":"flag_sv",
+   "sy":"flag_sy",
+   "sz":"flag_sz",
+   "td":"flag_td",
+   "tg":"flag_tg",
+   "th":"flag_th",
+   "tj":"flag_tj",
+   "tl":"flag_tl",
+   "turkmenistan":"flag_tm",
+   "tn":"flag_tn",
+   "to":"flag_to",
+   "tr":"flag_tr",
+   "tt":"flag_tt",
+   "tuvalu":"flag_tv",
+   "tw":"flag_tw",
+   "tz":"flag_tz",
+   "ua":"flag_ua",
+   "ug":"flag_ug",
+   "us":"flag_us",
+   "uy":"flag_uy",
+   "uz":"flag_uz",
+   "va":"flag_va",
+   "vc":"flag_vc",
+   "ve":"flag_ve",
+   "vi":"flag_vi",
+   "vn":"flag_vn",
+   "vu":"flag_vu",
+   "wf":"flag_wf",
+   "waving_white_flag":"flag_white",
+   "ws":"flag_ws",
+   "xk":"flag_xk",
+   "ye":"flag_ye",
+   "za":"flag_za",
+   "zm":"flag_zm",
+   "zw":"flag_zw",
+   "clamshell_mobile_phone":"flip_phone",
+   "black_hard_shell_floppy_disk":"floppy_black",
+   "white_hard_shell_floppy_disk":"floppy_white",
+   "open_folder":"folder_open",
+   "fork_and_knife_with_plate":"fork_knife_plate",
+   "frame_with_picture":"frame_photo",
+   "frame_with_tiles":"frame_tiles",
+   "frame_with_an_x":"frame_x",
+   "anguished":"frowning",
+   "raised_hand_with_fingers_splayed":"hand_splayed",
+   "reversed_raised_hand_with_fingers_splayed":"hand_splayed_reverse",
+   "reversed_victory_hand":"hand_victory",
+   "heart_with_tip_on_the_left":"heart_tip",
+   "house_buildings":"homes",
+   "derelict_house_building":"house_abandoned",
+   "circled_information_source":"info",
+   "desert_island":"island",
+   "up_pointing_military_airplane":"jet_up",
+   "old_key":"key2",
+   "wired_keyboard":"keyboard",
+   "keyboard_and_mouse":"keyboard_mouse",
+   "musical_keyboard_with_jacks":"keyboard_with_jacks",
+   "couplekiss_mm":"kiss_mm",
+   "couplekiss_ww":"kiss_ww",
+   "satisfied":"laughing",
+   "left_hand_telephone_receiver":"left_receiver",
+   "man_in_business_suit_levitating":"levitate",
+   "weight_lifter":"lifter",
+   "light_mark":"light_check_mark",
+   "world_map":"map",
+   "sports_medal":"medal",
+   "studio_microphone":"microphone2",
+   "reversed_hand_with_middle_finger_extended":"middle_finger",
+   "lightning_mood_bubble":"mood_bubble_lightning",
+   "lightning_mood":"mood_lightning",
+   "racing_motorcycle":"motorcycle",
+   "snow_capped_mountain":"mountain_snow",
+   "one_button_mouse":"mouse_one",
+   "three_networked_computers":"network",
+   "rolled_up_newspaper":"newspaper2",
+   "note_page":"note",
+   "empty_note_page":"note_empty",
+   "note_pad":"notepad",
+   "empty_note_pad":"notepad_empty",
+   "spiral_note_pad":"notepad_spiral",
+   "oil_drum":"oil",
+   "grandma":"older_woman",
+   "optical_disc_icon":"optical_disk",
+   "lower_left_paintbrush":"paintbrush",
+   "linked_paperclips":"paperclips",
+   "national_park":"park",
+   "lower_left_ballpoint_pen":"pen_ballpoint",
+   "lower_left_fountain_pen":"pen_fountain",
+   "memo":"pencil",
+   "lower_left_pencil":"pencil3",
+   "black_pennant":"pennant_black",
+   "white_pennant":"pennant_white",
+   "no_piracy":"piracy",
+   "shit":"poop",
+   "hankey":"poop",
+   "poo":"poop",
+   "prohibited_sign":"prohibited",
+   "film_projector":"projector",
+   "racing_car":"race_car",
+   "railroad_track":"railway_track",
+   "right_speaker_with_one_sound_wave":"right_speaker_one",
+   "right_speaker_with_three_sound_waves":"right_speaker_three",
+   "skeleton":"skull",
+   "slightly_frowning_face":"slight_frown",
+   "slightly_smiling_face":"slight_smile",
+   "speaking_head_in_silhouette":"speaking_head",
+   "left_speech_bubble":"speech_left",
+   "right_speech_bubble":"speech_right",
+   "three_speech_bubbles":"speech_three",
+   "two_speech_bubbles":"speech_two",
+   "sleuth_or_spy":"spy",
+   "portable_stereo":"stereo",
+   "black_touchtone_telephone":"telephone_black",
+   "white_touchtone_telephone":"telephone_white",
+   "left_thought_bubble":"thought_left",
+   "right_thought_bubble":"thought_right",
+   "reversed_thumbs_down_sign":"thumbs_down_reverse",
+   "reversed_thumbs_up_sign":"thumbs_up_reverse",
+   "-1":"thumbsdown",
+   "+1":"thumbsup",
+   "admission_tickets":"tickets",
+   "hammer_and_wrench":"tools",
+   "diesel_locomotive":"train_diesel",
+   "triangle_with_rounded_corners":"triangle_round",
+   "turned_ok_hand_sign":"turned_ok_hand",
+   "raised_hand_with_part_between_middle_and_ring_fingers":"vulcan",
+   "left_writing_hand":"writing_hand"
+}
\ No newline at end of file

lib/award_emoji.rb

 class AwardEmoji
-  ALIASES = {
-    pout: "rage",
-    satisfied: "laughing",
-    hankey: "shit",
-    poop: "shit",
-    collision: "boom",
-    thumbsup: "+1",
-    thumbsdown: "-1",
-    punch: "facepunch",
-    raised_hand: "hand",
-    running: "runner",
-    ng_woman: "no_good",
-    shoe: "mans_shoe",
-    tshirt: "shirt",
-    honeybee: "bee",
-    flipper: "dolphin",
-    paw_prints: "feet",
-    waxing_gibbous_moon: "moon",
-    telephone: "phone",
-    knife: "hocho",
-    envelope: "email",
-    pencil: "memo",
-    open_book: "book",
-    sailboat: "boat",
-    red_car: "car",
-    lantern: "izakaya_lantern",
-    uk: "gb",
-    heavy_exclamation_mark: "exclamation",
-    squirrel: "shipit"
-  }.with_indifferent_access
-
   CATEGORIES = {
     other: "Other",
     objects: "Objects",
@@ -46,17 +15,15 @@ class AwardEmoji
   }.with_indifferent_access
 
   def self.normilize_emoji_name(name)
-    ALIASES[name] || name
+    aliases[name] || name
   end
 
   def self.emoji_by_category
     unless @emoji_by_category
       @emoji_by_category = {}
-      emojis_added = []
 
-      Emoji.emojis.each do |emoji_name, data|
-        next if emojis_added.include?(data["name"])
-        emojis_added << data["name"]
+      emojis.each do |emoji_name, data|
+        data["name"] = emoji_name
 
         @emoji_by_category[data["category"]] ||= []
         @emoji_by_category[data["category"]] << data
@@ -67,4 +34,18 @@ class AwardEmoji
 
     @emoji_by_category
   end
+
+  def self.emojis
+    @emojis ||= begin
+      json_path = File.join(Rails.root, 'fixtures', 'emojis', 'index.json' )
+      JSON.parse(File.read(json_path))
+    end
+  end
+
+  def self.aliases
+    @aliases ||= begin
+      json_path = File.join(Rails.root, 'fixtures', 'emojis', 'aliases.json' )
+      JSON.parse(File.read(json_path))
+    end
+  end
 end