From fdb597b4d3744adb7ce29cd10cf07b4ad563a597 Mon Sep 17 00:00:00 2001 From: acrefoot Date: Mon, 1 Jul 2013 18:40:57 -0400 Subject: [PATCH] v1 Emoji autocomplete (imported from commit 0b0d4b004936ce4abc37f44317aec414451f3a8e) --- humbug/settings.py | 3 +- tools/jslint/check-all.js | 2 +- zephyr/static/js/composebox_typeahead.js | 40 +++++++++++++++++++++--- zephyr/static/js/emoji.js | 14 +++++++++ zephyr/static/js/typeahead_helper.js | 16 +++++++++- 5 files changed, 67 insertions(+), 8 deletions(-) create mode 100644 zephyr/static/js/emoji.js diff --git a/humbug/settings.py b/humbug/settings.py index 47e5592bcc..91564fa2f3 100644 --- a/humbug/settings.py +++ b/humbug/settings.py @@ -371,7 +371,8 @@ PIPELINE_JS = { 'js/templates.js', 'js/settings.js', 'js/tab_bar.js', - 'js/metrics.js' + 'js/metrics.js', + 'js/emoji.js' ], 'output_filename': 'min/app.js' }, diff --git a/tools/jslint/check-all.js b/tools/jslint/check-all.js index 3138bd0a3f..a2460fc3b3 100644 --- a/tools/jslint/check-all.js +++ b/tools/jslint/check-all.js @@ -21,7 +21,7 @@ var globals = + ' compose rows hotkeys narrow reload notifications_bar search subs' + ' composebox_typeahead typeahead_helper notifications hashchange' + ' invite ui util activity timerender MessageList blueslip unread stream_list' - + ' onboarding message_edit tab_bar' + + ' onboarding message_edit tab_bar emoji' // colorspace.js + ' colorspace' diff --git a/zephyr/static/js/composebox_typeahead.js b/zephyr/static/js/composebox_typeahead.js index a4d8b237b0..7cfcfeb3ae 100644 --- a/zephyr/static/js/composebox_typeahead.js +++ b/zephyr/static/js/composebox_typeahead.js @@ -46,6 +46,10 @@ function query_matches_person (query, person) { } +function query_matches_emoji (query, emoji) { + return (emoji.emoji_name.indexOf(query.toLowerCase()) !== -1); +} + // nextFocus is set on a keydown event to indicate where we should focus on keyup. // We can't focus at the time of keydown because we need to wait for typeahead. // And we can't compute where to focus at the time of keyup because only the keydown @@ -246,9 +250,19 @@ exports.initialize = function () { }); $( "#new_message_content" ).typeahead({ - source: page_params.people_list, + source: function (query, process) { + var q = exports.split_at_cursor(query)[0]; + + if (q.lastIndexOf(":") > q.lastIndexOf("@")) { + return emoji.emojis; + } + return page_params.people_list; + }, items: 5, highlighter: function (item) { + if (item.emoji_name !== undefined) { + return " " + item.emoji_name; + } var item_formatted = typeahead_helper.render_person(item); return typeahead_helper.highlight_with_escaping(this.query, item_formatted); }, @@ -260,12 +274,19 @@ exports.initialize = function () { if (strings.length < 1) { return false; } - var current_recipient = strings[strings.length-1]; - if (current_recipient.length < 2 || current_recipient.charAt(0) !== "@") { + var current_token = strings[strings.length-1]; + + if ((current_token.indexOf(":") === -1 && current_token.indexOf("@") === -1) || + (current_token.indexOf("@") === current_token.length-1) || + (current_token.indexOf(":") === current_token.length-1)) { return false; } - return query_matches_person(current_recipient.substring(1), item); + if (current_token.lastIndexOf(":") > current_token.lastIndexOf("@")) { + return query_matches_emoji(current_token.substring(current_token.indexOf(":")+1), item); + } else { + return query_matches_person(current_token.substring(current_token.indexOf("@")+1), item); + } }, sorter: typeahead_helper.sort_textbox_typeahead, updater: function (item) { @@ -273,7 +294,16 @@ exports.initialize = function () { var beginning = pieces[0]; var rest = pieces[1]; - beginning = beginning.replace(/@\S+$/, "") + "@**" + item.full_name + "**"; + if (item.full_name !== undefined) { + beginning = beginning.replace(/@\S+$/, "") + "@**" + item.full_name + "** "; + } else { + //leading and trailing spaces are required for emoji, except if it begins a message. + if (beginning.lastIndexOf(":") === 0 || beginning.charAt(beginning.lastIndexOf(":") - 1) === " ") { + beginning = beginning.replace(/:\S+$/, "") + ":" + item.emoji_name + ": "; + } else { + beginning = beginning.replace(/:\S+$/, "") + " :" + item.emoji_name + ": "; + } + } // Keep the cursor after the newly inserted name, as Bootstrap will call textbox.change() to overwrite the text // in the textbox. setTimeout(function () { diff --git a/zephyr/static/js/emoji.js b/zephyr/static/js/emoji.js new file mode 100644 index 0000000000..d7f5ebc1a3 --- /dev/null +++ b/zephyr/static/js/emoji.js @@ -0,0 +1,14 @@ +var emoji = (function () { + +var exports = {}; + +exports.emojis = []; + +var emoji_names = ["bowtie", "smile", "laughing", "blush", "smiley", "relaxed", "smirk", "heart_eyes", "kissing_heart", "kissing_closed_eyes", "flushed", "relieved", "satisfied", "grin", "wink", "stuck_out_tongue_winking_eye", "stuck_out_tongue_closed_eyes", "grinning", "kissing", "kissing_smiling_eyes", "stuck_out_tongue", "sleeping", "worried", "frowning", "anguished", "open_mouth", "grimacing", "confused", "hushed", "expressionless", "unamused", "sweat_smile", "sweat", "disappointed_relieved", "weary", "pensive", "disappointed", "confounded", "fearful", "cold_sweat", "persevere", "cry", "sob", "joy", "astonished", "scream", "neckbeard", "tired_face", "angry", "rage", "triumph", "sleepy", "yum", "mask", "sunglasses", "dizzy_face", "imp", "smiling_imp", "neutral_face", "no_mouth", "innocent", "alien", "yellow_heart", "blue_heart", "purple_heart", "heart", "green_heart", "broken_heart", "heartbeat", "heartpulse", "two_hearts", "revolving_hearts", "cupid", "sparkling_heart", "sparkles", "star", "star2", "dizzy", "boom", "collision", "anger", "exclamation", "question", "grey_exclamation", "grey_question", "zzz", "dash", "sweat_drops", "notes", "musical_note", "fire", "hankey", "poop", "shit", "+1", "thumbsup", "-1", "thumbsdown", "ok_hand", "punch", "facepunch", "fist", "v", "wave", "hand", "raised_hand", "open_hands", "point_up", "point_down", "point_left", "point_right", "raised_hands", "pray", "point_up_2", "clap", "muscle", "metal", "fu", "walking", "runner", "running", "couple", "family", "two_men_holding_hands", "two_women_holding_hands", "dancer", "dancers", "ok_woman", "no_good", "information_desk_person", "raising_hand", "bride_with_veil", "person_with_pouting_face", "person_frowning", "bow", "couplekiss", "couple_with_heart", "massage", "haircut", "nail_care", "boy", "girl", "woman", "man", "baby", "older_woman", "older_man", "person_with_blond_hair", "man_with_gua_pi_mao", "man_with_turban", "construction_worker", "cop", "angel", "princess", "smiley_cat", "smile_cat", "heart_eyes_cat", "kissing_cat", "smirk_cat", "scream_cat", "crying_cat_face", "joy_cat", "pouting_cat", "japanese_ogre", "japanese_goblin", "see_no_evil", "hear_no_evil", "speak_no_evil", "guardsman", "skull", "feet", "lips", "kiss", "droplet", "ear", "eyes", "nose", "tongue", "love_letter", "bust_in_silhouette", "busts_in_silhouette", "speech_balloon", "thought_balloon", "feelsgood", "finnadie", "goberserk", "godmode", "hurtrealbad", "rage1", "rage2", "rage3", "rage4", "suspect", "trollface", "sunny", "umbrella", "cloud", "snowflake", "snowman", "zap", "cyclone", "foggy", "ocean", "cat", "dog", "mouse", "hamster", "rabbit", "wolf", "frog", "tiger", "koala", "bear", "pig", "pig_nose", "cow", "boar", "monkey_face", "monkey", "horse", "racehorse", "camel", "sheep", "elephant", "panda_face", "snake", "bird", "baby_chick", "hatched_chick", "hatching_chick", "chicken", "penguin", "turtle", "bug", "honeybee", "ant", "beetle", "snail", "octopus", "tropical_fish", "fish", "whale", "whale2", "dolphin", "cow2", "ram", "rat", "water_buffalo", "tiger2", "rabbit2", "dragon", "goat", "rooster", "dog2", "pig2", "mouse2", "ox", "dragon_face", "blowfish", "crocodile", "dromedary_camel", "leopard", "cat2", "poodle", "paw_prints", "bouquet", "cherry_blossom", "tulip", "four_leaf_clover", "rose", "sunflower", "hibiscus", "maple_leaf", "leaves", "fallen_leaf", "herb", "mushroom", "cactus", "palm_tree", "evergreen_tree", "deciduous_tree", "chestnut", "seedling", "blossom", "ear_of_rice", "shell", "globe_with_meridians", "sun_with_face", "full_moon_with_face", "new_moon_with_face", "new_moon", "waxing_crescent_moon", "first_quarter_moon", "waxing_gibbous_moon", "full_moon", "waning_gibbous_moon", "last_quarter_moon", "waning_crescent_moon", "last_quarter_moon_with_face", "first_quarter_moon_with_face", "moon", "earth_africa", "earth_americas", "earth_asia", "volcano", "milky_way", "partly_sunny", "octocat", "squirrel", "bamboo", "gift_heart", "dolls", "school_satchel", "mortar_board", "flags", "fireworks", "sparkler", "wind_chime", "rice_scene", "jack_o_lantern", "ghost", "santa", "christmas_tree", "gift", "bell", "no_bell", "tanabata_tree", "tada", "confetti_ball", "balloon", "crystal_ball", "cd", "dvd", "floppy_disk", "camera", "video_camera", "movie_camera", "computer", "tv", "iphone", "phone", "telephone", "telephone_receiver", "pager", "fax", "minidisc", "vhs", "sound", "speaker", "mute", "loudspeaker", "mega", "hourglass", "hourglass_flowing_sand", "alarm_clock", "watch", "radio", "satellite", "loop", "mag", "mag_right", "unlock", "lock", "lock_with_ink_pen", "closed_lock_with_key", "key", "bulb", "flashlight", "high_brightness", "low_brightness", "electric_plug", "battery", "calling", "email", "mailbox", "postbox", "bath", "bathtub", "shower", "toilet", "wrench", "nut_and_bolt", "hammer", "seat", "moneybag", "yen", "dollar", "pound", "euro", "credit_card", "money_with_wings", "e-mail", "inbox_tray", "outbox_tray", "envelope", "incoming_envelope", "postal_horn", "mailbox_closed", "mailbox_with_mail", "mailbox_with_no_mail", "door", "smoking", "bomb", "gun", "hocho", "pill", "syringe", "page_facing_up", "page_with_curl", "bookmark_tabs", "bar_chart", "chart_with_upwards_trend", "chart_with_downwards_trend", "scroll", "clipboard", "calendar", "date", "card_index", "file_folder", "open_file_folder", "scissors", "pushpin", "paperclip", "black_nib", "pencil2", "straight_ruler", "triangular_ruler", "closed_book", "green_book", "blue_book", "orange_book", "notebook", "notebook_with_decorative_cover", "ledger", "books", "bookmark", "name_badge", "microscope", "telescope", "newspaper", "football", "basketball", "soccer", "baseball", "tennis", "8ball", "rugby_football", "bowling", "golf", "mountain_bicyclist", "bicyclist", "horse_racing", "snowboarder", "swimmer", "surfer", "ski", "spades", "hearts", "clubs", "diamonds", "gem", "ring", "trophy", "musical_score", "musical_keyboard", "violin", "space_invader", "video_game", "black_joker", "flower_playing_cards", "game_die", "dart", "mahjong", "clapper", "memo", "pencil", "book", "art", "microphone", "headphones", "trumpet", "saxophone", "guitar", "shoe", "sandal", "high_heel", "lipstick", "boot", "shirt", "tshirt", "necktie", "womans_clothes", "dress", "running_shirt_with_sash", "jeans", "kimono", "bikini", "ribbon", "tophat", "crown", "womans_hat", "mans_shoe", "closed_umbrella", "briefcase", "handbag", "pouch", "purse", "eyeglasses", "fishing_pole_and_fish", "coffee", "tea", "sake", "baby_bottle", "beer", "beers", "cocktail", "tropical_drink", "wine_glass", "fork_and_knife", "pizza", "hamburger", "fries", "poultry_leg", "meat_on_bone", "spaghetti", "curry", "fried_shrimp", "bento", "sushi", "fish_cake", "rice_ball", "rice_cracker", "rice", "ramen", "stew", "oden", "dango", "egg", "bread", "doughnut", "custard", "icecream", "ice_cream", "shaved_ice", "birthday", "cake", "cookie", "chocolate_bar", "candy", "lollipop", "honey_pot", "apple", "green_apple", "tangerine", "lemon", "cherries", "grapes", "watermelon", "strawberry", "peach", "melon", "banana", "pear", "pineapple", "sweet_potato", "eggplant", "tomato", "corn", "house", "house_with_garden", "school", "office", "post_office", "hospital", "bank", "convenience_store", "love_hotel", "hotel", "wedding", "church", "department_store", "european_post_office", "city_sunrise", "city_sunset", "japanese_castle", "european_castle", "tent", "factory", "tokyo_tower", "japan", "mount_fuji", "sunrise_over_mountains", "sunrise", "stars", "statue_of_liberty", "bridge_at_night", "carousel_horse", "rainbow", "ferris_wheel", "fountain", "roller_coaster", "ship", "speedboat", "boat", "sailboat", "rowboat", "anchor", "rocket", "airplane", "helicopter", "steam_locomotive", "tram", "mountain_railway", "bike", "aerial_tramway", "suspension_railway", "mountain_cableway", "tractor", "blue_car", "oncoming_automobile", "car", "red_car", "taxi", "oncoming_taxi", "articulated_lorry", "bus", "oncoming_bus", "rotating_light", "police_car", "oncoming_police_car", "fire_engine", "ambulance", "minibus", "truck", "train", "station", "train2", "bullettrain_front", "bullettrain_side", "light_rail", "monorail", "railway_car", "trolleybus", "ticket", "fuelpump", "vertical_traffic_light", "traffic_light", "warning", "construction", "beginner", "atm", "slot_machine", "busstop", "barber", "hotsprings", "checkered_flag", "crossed_flags", "izakaya_lantern", "moyai", "circus_tent", "performing_arts", "round_pushpin", "triangular_flag_on_post", "jp", "kr", "cn", "us", "fr", "es", "it", "ru", "gb", "uk", "de", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "keycap_ten", "1234", "zero", "hash", "symbols", "arrow_backward", "arrow_down", "arrow_forward", "arrow_left", "capital_abcd", "abcd", "abc", "arrow_lower_left", "arrow_lower_right", "arrow_right", "arrow_up", "arrow_upper_left", "arrow_upper_right", "arrow_double_down", "arrow_double_up", "arrow_down_small", "arrow_heading_down", "arrow_heading_up", "leftwards_arrow_with_hook", "arrow_right_hook", "left_right_arrow", "arrow_up_down", "arrow_up_small", "arrows_clockwise", "arrows_counterclockwise", "rewind", "fast_forward", "information_source", "ok", "twisted_rightwards_arrows", "repeat", "repeat_one", "new", "top", "up", "cool", "free", "ng", "cinema", "koko", "signal_strength", "u5272", "u5408", "u55b6", "u6307", "u6708", "u6709", "u6e80", "u7121", "u7533", "u7a7a", "u7981", "sa", "restroom", "mens", "womens", "baby_symbol", "no_smoking", "parking", "wheelchair", "metro", "baggage_claim", "accept", "wc", "potable_water", "put_litter_in_its_place", "secret", "congratulations", "m", "passport_control", "left_luggage", "customs", "ideograph_advantage", "cl", "sos", "id", "no_entry_sign", "underage", "no_mobile_phones", "do_not_litter", "non-potable_water", "no_bicycles", "no_pedestrians", "children_crossing", "no_entry", "eight_spoked_asterisk", "eight_pointed_black_star", "heart_decoration", "vs", "vibration_mode", "mobile_phone_off", "chart", "currency_exchange", "aries", "taurus", "gemini", "cancer", "leo", "virgo", "libra", "scorpius", "sagittarius", "capricorn", "aquarius", "pisces", "ophiuchus", "six_pointed_star", "negative_squared_cross_mark", "a", "b", "ab", "o2", "diamond_shape_with_a_dot_inside", "recycle", "end", "on", "soon", "clock1", "clock130", "clock10", "clock1030", "clock11", "clock1130", "clock12", "clock1230", "clock2", "clock230", "clock3", "clock330", "clock4", "clock430", "clock5", "clock530", "clock6", "clock630", "clock7", "clock730", "clock8", "clock830", "clock9", "clock930", "heavy_dollar_sign", "copyright", "registered", "tm", "x", "heavy_exclamation_mark", "bangbang", "interrobang", "o", "heavy_multiplication_x", "heavy_plus_sign", "heavy_minus_sign", "heavy_division_sign", "white_flower", "100", "heavy_check_mark", "ballot_box_with_check", "radio_button", "link", "curly_loop", "wavy_dash", "part_alternation_mark", "trident", "black_square", "white_square", "white_check_mark", "black_square_button", "white_square_button", "black_circle", "white_circle", "red_circle", "large_blue_circle", "large_blue_diamond", "large_orange_diamond", "small_blue_diamond", "small_orange_diamond", "small_red_triangle", "small_red_triangle_down", "shipit"]; + +$.each(emoji_names, function (index, value) { + exports.emojis.push({emoji_name: value, emoji_url: "static/third/gemoji/images/emoji/" + value + ".png"}); +}); + +return exports; +}()); diff --git a/zephyr/static/js/typeahead_helper.js b/zephyr/static/js/typeahead_helper.js index 01d107035d..ed5e651ada 100644 --- a/zephyr/static/js/typeahead_helper.js +++ b/zephyr/static/js/typeahead_helper.js @@ -183,11 +183,25 @@ exports.sort_recipients = function (matches, query) { return matches_sorted_by_pms.concat(rest_sorted_by_pms); }; +exports.sort_emojis = function (matches, query) { + //TODO: sort by category in v2 + var results = prefix_sort(query, matches, function (x) { return x.emoji_name; }); + return results.matches.concat(results.rest); +}; + exports.sort_textbox_typeahead = function (matches) { // input may be free text ending in @ for autocomplete var query = composebox_typeahead.split_at_cursor(this.query)[0]; + var parts; + + if (query.lastIndexOf(":") > query.lastIndexOf("@")) { + parts = query.split(':'); + query = parts[parts.length - 1]; + return exports.sort_emojis(matches, query); + } + if (query.indexOf('@') > -1) { - var parts = query.split('@'); + parts = query.split('@'); query = parts[parts.length - 1]; } return exports.sort_recipients(matches, query);