emoji-picker.coffee 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. class @EmojiPicker
  2. # Options:
  3. # spriteSheetPath: Path to each category's sprite sheet. Use '!' as a placeholder for the number (see default).
  4. # iconSize: The size of each Emoji icon in the picker.
  5. # textareaId: The ID to select the textarea that will be converted to a WYSIWYG.
  6. # popupElementId: The ID of the element that, when clicked, will display the popup menu.
  7. constructor: (options = {}) ->
  8. $.emojiarea.iconSize = options.iconSize ? 25;
  9. $.emojiarea.assetsPath = options.assetsPath ? '';
  10. @generateEmojiIconSets(options)
  11. options.emojiable_selector = '[data-emojiable=true]' if !options.emojiable_selector
  12. this.options = options;
  13. discover: ->
  14. isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  15. if (isiOS)
  16. return;
  17. # Convert every emojiable field to an emoji area
  18. $(this.options.emojiable_selector).emojiarea($.extend({
  19. emojiPopup: this,
  20. norealTime: true,
  21. }, this.options));
  22. generateEmojiIconSets:(options) ->
  23. icons = {}
  24. reverseIcons = {}
  25. i = undefined
  26. j = undefined
  27. hex = undefined
  28. name = undefined
  29. dataItem = undefined
  30. row = undefined
  31. column = undefined
  32. totalColumns = undefined
  33. j = 0
  34. while j < Config.EmojiCategories.length
  35. totalColumns = Config.EmojiCategorySpritesheetDimens[j][1]
  36. i = 0
  37. while i < Config.EmojiCategories[j].length
  38. dataItem = Config.Emoji[Config.EmojiCategories[j][i]]
  39. name = dataItem[1][0]
  40. row = Math.floor(i / totalColumns)
  41. column = i % totalColumns
  42. icons[':' + name + ':'] = [j, row, column, ':' + name + ':'];
  43. reverseIcons[name] = dataItem[0]
  44. i++
  45. j++
  46. $.emojiarea.icons = icons;
  47. $.emojiarea.reverseIcons = reverseIcons;
  48. colonToUnicode:(input) ->
  49. if !input
  50. return ''
  51. if !Config.rx_colons
  52. Config.init_unified()
  53. input.replace Config.rx_colons, (m) ->
  54. val = Config.mapcolon[m]
  55. if val
  56. val
  57. else
  58. ''
  59. appendUnicodeAsImageToElement:(element, input) ->
  60. if !input
  61. return ''
  62. if !Config.rx_codes
  63. Config.init_unified()
  64. split_on_unicode = input.split(Config.rx_codes)
  65. for text in split_on_unicode
  66. val = ''
  67. if Config.rx_codes.test(text)
  68. val = Config.reversemap[text]
  69. if val
  70. val = ':' + val + ':'
  71. val = $.emojiarea.createIcon($.emojiarea.icons[val])
  72. else
  73. val = document.createTextNode(text)
  74. element.append(val)
  75. input.replace Config.rx_codes, (m) ->
  76. val = Config.reversemap[m]
  77. if val
  78. val = ':' + val + ':'
  79. $img = $.emojiarea.createIcon($.emojiarea.icons[val])
  80. $img
  81. else
  82. ''
  83. colonToImage:(input) ->
  84. if !input
  85. return ''
  86. if !Config.rx_colons
  87. Config.init_unified()
  88. input.replace Config.rx_colons, (m) ->
  89. if m
  90. $img = $.emojiarea.createIcon($.emojiarea.icons[m])
  91. $img
  92. else
  93. ''