emojipicker.js 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. if(typeof jQuery !== 'undefined'){
  2. (function ($, win) {
  3. 'use strict';
  4. var emoji = lsxEmojiData;
  5. var settings = {};
  6. $.fn.lsxEmojiPicker = function(options) {
  7. if(options == "destroy") {
  8. $(this).off("click");
  9. $(this).children(".lsx-emojipicker-appender").remove();
  10. }
  11. else {
  12. settings = $.extend({
  13. width: 280,
  14. height: 200,
  15. twemoji: false,
  16. closeOnSelect: true,
  17. customEmojis: true,
  18. onSelect: function(em){},
  19. onClose: function(){}
  20. }, options);
  21. var appender = $('<div></div>')
  22. .addClass('lsx-emojipicker-appender');
  23. var container = $('<div></div>')
  24. .addClass('lsx-emojipicker-container')
  25. var wrapper = $('<div></div>')
  26. .addClass('lsx-emojipicker-wrapper');
  27. var spinnerContainer = $('<div></div>')
  28. .addClass('spinner-container');
  29. var spinner = $('<div></div>')
  30. .addClass('loader');
  31. spinnerContainer.append(spinner);
  32. var customemojis = JSON.parse(localStorage.current_custom_emojis);
  33. var addhide = "";
  34. if(customemojis.length > 0 && settings.customEmojis) {
  35. addhide = " hidden";
  36. var emojiCustomContainer = $('<div></div>')
  37. .addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-custom')
  38. .css({'width': settings.width, 'height': settings.height});
  39. }
  40. var emojiPeopleContainer = $('<div></div>')
  41. .addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-people'+addhide)
  42. .css({'width': settings.width, 'height': settings.height});
  43. var emojiNatureContainer = $('<div></div>')
  44. .addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-nature hidden')
  45. .css({'width': settings.width, 'height': settings.height});
  46. var emojiFoodsContainer = $('<div></div>')
  47. .addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-foods hidden')
  48. .css({'width': settings.width, 'height': settings.height});
  49. var emojiActivityContainer = $('<div></div>')
  50. .addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-activity hidden')
  51. .css({'width': settings.width, 'height': settings.height});
  52. var emojiPlacesContainer = $('<div></div>')
  53. .addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-places hidden')
  54. .css({'width': settings.width, 'height': settings.height});
  55. var emojiObjectsContainer = $('<div></div>')
  56. .addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-objects hidden')
  57. .css({'width': settings.width, 'height': settings.height});
  58. var emojiSymbolsContainer = $('<div></div>')
  59. .addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-symbols hidden')
  60. .css({'width': settings.width, 'height': settings.height});
  61. var emojiFlagsContainer = $('<div></div>')
  62. .addClass('lsx-emojipicker-emoji lsx-emoji-tab lsx-emoji-flags hidden')
  63. .css({'width': settings.width, 'height': settings.height});
  64. var tabs = $('<ul></ul>')
  65. .addClass('lsx-emojipicker-tabs');
  66. if(customemojis.length > 0 && settings.customEmojis) {
  67. var customEmoji = $('<li></li>')
  68. .addClass('selected')
  69. .html("&#x2A;&#x20E3")
  70. .click(function(e){
  71. e.preventDefault();
  72. $('ul.lsx-emojipicker-tabs li').removeClass('selected');
  73. $(this).addClass('selected');
  74. $('.lsx-emoji-tab').addClass('hidden');
  75. emojiCustomContainer.removeClass('hidden');
  76. });
  77. }
  78. var peopleEmoji = $('<li></li>')
  79. .html("😀")
  80. .click(function(e){
  81. e.preventDefault();
  82. $('ul.lsx-emojipicker-tabs li').removeClass('selected');
  83. $(this).addClass('selected');
  84. $('.lsx-emoji-tab').addClass('hidden');
  85. emojiPeopleContainer.removeClass('hidden');
  86. });
  87. if(customemojis.length == 0 || !settings.customEmojis) {
  88. peopleEmoji.addClass("selected");
  89. }
  90. var natureEmoji = $('<li></li>')
  91. .html("🐶")
  92. .click(function(e){
  93. e.preventDefault();
  94. $('ul.lsx-emojipicker-tabs li').removeClass('selected');
  95. $(this).addClass('selected');
  96. $('.lsx-emoji-tab').addClass('hidden');
  97. emojiNatureContainer.removeClass('hidden');
  98. });
  99. var foodsEmoji = $('<li></li>')
  100. .html("🍏")
  101. .click(function(e){
  102. e.preventDefault();
  103. $('ul.lsx-emojipicker-tabs li').removeClass('selected');
  104. $(this).addClass('selected');
  105. $('.lsx-emoji-tab').addClass('hidden');
  106. emojiFoodsContainer.removeClass('hidden');
  107. });
  108. var activityEmoji = $('<li></li>')
  109. .html("⚽")
  110. .click(function(e){
  111. e.preventDefault();
  112. $('ul.lsx-emojipicker-tabs li').removeClass('selected');
  113. $(this).addClass('selected');
  114. $('.lsx-emoji-tab').addClass('hidden');
  115. emojiActivityContainer.removeClass('hidden');
  116. });
  117. var placesEmoji = $('<li></li>')
  118. .html("🚗")
  119. .click(function(e){
  120. e.preventDefault();
  121. $('ul.lsx-emojipicker-tabs li').removeClass('selected');
  122. $(this).addClass('selected');
  123. $('.lsx-emoji-tab').addClass('hidden');
  124. emojiPlacesContainer.removeClass('hidden');
  125. });
  126. var objectsEmoji = $('<li></li>')
  127. .html("⌚")
  128. .click(function(e){
  129. e.preventDefault();
  130. $('ul.lsx-emojipicker-tabs li').removeClass('selected');
  131. $(this).addClass('selected');
  132. $('.lsx-emoji-tab').addClass('hidden');
  133. emojiObjectsContainer.removeClass('hidden');
  134. });
  135. var symbolsEmoji = $('<li></li>')
  136. .html("💯")
  137. .click(function(e){
  138. e.preventDefault();
  139. $('ul.lsx-emojipicker-tabs li').removeClass('selected');
  140. $(this).addClass('selected');
  141. $('.lsx-emoji-tab').addClass('hidden');
  142. emojiSymbolsContainer.removeClass('hidden');
  143. });
  144. var flagsEmoji = $('<li></li>')
  145. .html("🇦🇫")
  146. .click(function(e){
  147. e.preventDefault();
  148. $('ul.lsx-emojipicker-tabs li').removeClass('selected');
  149. $(this).addClass('selected');
  150. $('.lsx-emoji-tab').addClass('hidden');
  151. emojiFlagsContainer.removeClass('hidden');
  152. });
  153. if(customemojis.length > 0 && settings.customEmojis) {
  154. tabs.append(customEmoji);
  155. }
  156. tabs.append(peopleEmoji)
  157. .append(natureEmoji)
  158. .append(placesEmoji)
  159. .append(foodsEmoji)
  160. .append(activityEmoji)
  161. .append(objectsEmoji)
  162. .append(symbolsEmoji)
  163. .append(flagsEmoji);
  164. if(customemojis.length > 0 && settings.customEmojis) {
  165. createCustomEmojiTab(emojiCustomContainer,container);
  166. }
  167. createEmojiTab('people',emojiPeopleContainer,container);
  168. createEmojiTab('nature',emojiNatureContainer,container);
  169. createEmojiTab('foods',emojiFoodsContainer,container);
  170. createEmojiTab('activity',emojiActivityContainer,container);
  171. createEmojiTab('places',emojiPlacesContainer,container);
  172. createEmojiTab('objects',emojiObjectsContainer,container);
  173. createEmojiTab('symbols',emojiSymbolsContainer,container);
  174. createEmojiTab('flags',emojiFlagsContainer,container);
  175. //wrapper.append(spinnerContainer);
  176. wrapper.append(tabs);
  177. if(customemojis.length > 0 && settings.customEmojis) {
  178. wrapper.append(emojiCustomContainer);
  179. }
  180. wrapper.append(emojiPeopleContainer)
  181. .append(emojiNatureContainer)
  182. .append(emojiFoodsContainer)
  183. .append(emojiActivityContainer)
  184. .append(emojiPlacesContainer)
  185. .append(emojiObjectsContainer)
  186. .append(emojiSymbolsContainer)
  187. .append(emojiFlagsContainer);
  188. container.append(wrapper);
  189. appender.append(container);
  190. this.append(appender);
  191. if(settings.twemoji){
  192. twemoji.parse(emojiPeopleContainer[0],{base:"https://"+current_instance,ext:".svg",folder:"/emoji"});
  193. twemoji.parse(emojiNatureContainer[0],{base:"https://"+current_instance,ext:".svg",folder:"/emoji"});
  194. twemoji.parse(emojiFoodsContainer[0],{base:"https://"+current_instance,ext:".svg",folder:"/emoji"});
  195. twemoji.parse(emojiActivityContainer[0],{base:"https://"+current_instance,ext:".svg",folder:"/emoji"});
  196. twemoji.parse(emojiPlacesContainer[0],{base:"https://"+current_instance,ext:".svg",folder:"/emoji"});
  197. twemoji.parse(emojiObjectsContainer[0],{base:"https://"+current_instance,ext:".svg",folder:"/emoji"});
  198. twemoji.parse(emojiSymbolsContainer[0],{base:"https://"+current_instance,ext:".svg",folder:"/emoji"});
  199. twemoji.parse(emojiFlagsContainer[0],{base:"https://"+current_instance,ext:".svg",folder:"/emoji"});
  200. twemoji.parse(tabs[0],{base:"https://"+current_instance,ext:".svg",folder:"/emoji"});
  201. }
  202. this.click(function(e){
  203. e.preventDefault();
  204. if(!$(e.target).parent().hasClass('lsx-emojipicker-tabs')
  205. && !$(e.target).parent().parent().hasClass('lsx-emojipicker-tabs')
  206. && !$(e.target).parent().hasClass('lsx-emoji-tab')
  207. && !$(e.target).parent().parent().hasClass('lsx-emoji-tab')){
  208. if(container.is(':visible')){
  209. container.hide();
  210. settings.onClose();
  211. } else {
  212. container.show();
  213. }
  214. }
  215. });
  216. return this;
  217. }
  218. }
  219. function createEmojiTab(type,container,wrapper) {
  220. for(var i = 0;i < emoji[type].length;i++){
  221. var selectedEmoji = emoji[type][i];
  222. var emoticon = $('<span></span>')
  223. .data('value',selectedEmoji.value)
  224. .attr('title',selectedEmoji.name)
  225. .html(selectedEmoji.value);
  226. emoticon.click(function(e){
  227. e.preventDefault();
  228. settings.onSelect({
  229. 'name':$(this).attr('title'),
  230. 'value':$(this).data('value')
  231. });
  232. if(settings.closeOnSelect){
  233. wrapper.hide();
  234. settings.onClose();
  235. }
  236. });
  237. container.append(emoticon);
  238. }
  239. }
  240. function createCustomEmojiTab(container,wrapper) {
  241. var customemojis = JSON.parse(localStorage.current_custom_emojis);
  242. var sortedemojis = new Object();
  243. for(var i = 0;i < customemojis.length;i++) {
  244. if(!customemojis[i].category) customemojis[i].category = __("General");
  245. if(!sortedemojis[customemojis[i].category]) sortedemojis[customemojis[i].category] = new Array();
  246. sortedemojis[customemojis[i].category].push(customemojis[i]);
  247. }
  248. for(var category in sortedemojis) {
  249. if(sortedemojis.hasOwnProperty(category)) {
  250. if(Object.keys(sortedemojis).length != 1 || !sortedemojis.hasOwnProperty(__("General"))) container.append($("<p>").text(category));
  251. for(var i=0;i < sortedemojis[category].length;i++) {
  252. var selectedEmoji = sortedemojis[category][i];
  253. var emoticon = $('<span></span>')
  254. .attr('title',selectedEmoji.code)
  255. .html($("<img>").addClass("emoji").attr("src",selectedEmoji.url));
  256. emoticon.click(function(e){
  257. e.preventDefault();
  258. settings.onSelect({
  259. 'name':$(this).attr('title'),
  260. 'value':$(this).attr('title')
  261. });
  262. if(settings.closeOnSelect){
  263. wrapper.hide();
  264. settings.onClose();
  265. }
  266. });
  267. container.append(emoticon);
  268. }
  269. }
  270. }
  271. }
  272. }(jQuery, window));
  273. }