emoji-dialog.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. /*!
  2. * Emoji dialog plugin for Editor.md
  3. *
  4. * @file emoji-dialog.js
  5. * @author pandao
  6. * @version 1.2.0
  7. * @updateTime 2015-03-08
  8. * {@link https://github.com/pandao/editor.md}
  9. * @license MIT
  10. */
  11. (function() {
  12. var factory = function (exports) {
  13. var $ = jQuery;
  14. var pluginName = "emoji-dialog";
  15. var emojiTabIndex = 0;
  16. var emojiData = [];
  17. var selecteds = [];
  18. var logoPrefix = "editormd-logo";
  19. var logos = [
  20. logoPrefix,
  21. logoPrefix + "-1x",
  22. logoPrefix + "-2x",
  23. logoPrefix + "-3x",
  24. logoPrefix + "-4x",
  25. logoPrefix + "-5x",
  26. logoPrefix + "-6x",
  27. logoPrefix + "-7x",
  28. logoPrefix + "-8x"
  29. ];
  30. var langs = {
  31. "zh-cn" : {
  32. toolbar : {
  33. emoji : "Emoji 表情"
  34. },
  35. dialog : {
  36. emoji : {
  37. title : "Emoji 表情"
  38. }
  39. }
  40. },
  41. "zh-tw" : {
  42. toolbar : {
  43. emoji : "Emoji 表情"
  44. },
  45. dialog : {
  46. emoji : {
  47. title : "Emoji 表情"
  48. }
  49. }
  50. },
  51. "en" : {
  52. toolbar : {
  53. emoji : "Emoji"
  54. },
  55. dialog : {
  56. emoji : {
  57. title : "Emoji"
  58. }
  59. }
  60. }
  61. };
  62. exports.fn.emojiDialog = function() {
  63. var _this = this;
  64. var cm = this.cm;
  65. var settings = _this.settings;
  66. if (!settings.emoji)
  67. {
  68. alert("settings.emoji == false");
  69. return ;
  70. }
  71. var path = settings.pluginPath + pluginName + "/";
  72. var editor = this.editor;
  73. var cursor = cm.getCursor();
  74. var selection = cm.getSelection();
  75. var classPrefix = this.classPrefix;
  76. $.extend(true, this.lang, langs[this.lang.name]);
  77. this.setToolbar();
  78. var lang = this.lang;
  79. var dialogName = classPrefix + pluginName, dialog;
  80. var dialogLang = lang.dialog.emoji;
  81. var dialogContent = [
  82. "<div class=\"" + classPrefix + "emoji-dialog-box\" style=\"width: 760px;height: 334px;margin-bottom: 8px;overflow: hidden;\">",
  83. "<div class=\"" + classPrefix + "tab\"></div>",
  84. "</div>",
  85. ].join("\n");
  86. cm.focus();
  87. if (editor.find("." + dialogName).length > 0)
  88. {
  89. dialog = editor.find("." + dialogName);
  90. selecteds = [];
  91. dialog.find("a").removeClass("selected");
  92. this.dialogShowMask(dialog);
  93. this.dialogLockScreen();
  94. dialog.show();
  95. }
  96. else
  97. {
  98. dialog = this.createDialog({
  99. name : dialogName,
  100. title : dialogLang.title,
  101. width : 800,
  102. height : 475,
  103. mask : settings.dialogShowMask,
  104. drag : settings.dialogDraggable,
  105. content : dialogContent,
  106. lockScreen : settings.dialogLockScreen,
  107. maskStyle : {
  108. opacity : settings.dialogMaskOpacity,
  109. backgroundColor : settings.dialogMaskBgColor
  110. },
  111. buttons : {
  112. enter : [lang.buttons.enter, function() {
  113. cm.replaceSelection(selecteds.join(" "));
  114. this.hide().lockScreen(false).hideMask();
  115. return false;
  116. }],
  117. cancel : [lang.buttons.cancel, function() {
  118. this.hide().lockScreen(false).hideMask();
  119. return false;
  120. }]
  121. }
  122. });
  123. }
  124. var category = ["Github emoji", "Twemoji", "Font awesome", "Editor.md logo"];
  125. var tab = dialog.find("." + classPrefix + "tab");
  126. if (tab.html() === "")
  127. {
  128. var head = "<ul class=\"" + classPrefix + "tab-head\">";
  129. for (var i = 0; i<4; i++) {
  130. var active = (i === 0) ? " class=\"active\"" : "";
  131. head += "<li" + active + "><a href=\"javascript:;\">" + category[i] + "</a></li>";
  132. }
  133. head += "</ul>";
  134. tab.append(head);
  135. var container = "<div class=\"" + classPrefix + "tab-container\">";
  136. for (var x = 0; x < 4; x++)
  137. {
  138. var display = (x === 0) ? "" : "display:none;";
  139. container += "<div class=\"" + classPrefix + "tab-box\" style=\"height: 260px;overflow: hidden;overflow-y: auto;" + display + "\"></div>";
  140. }
  141. container += "</div>";
  142. tab.append(container);
  143. }
  144. var tabBoxs = tab.find("." + classPrefix + "tab-box");
  145. var emojiCategories = ["github-emoji", "twemoji", "font-awesome", logoPrefix];
  146. var drawTable = function() {
  147. var cname = emojiCategories[emojiTabIndex];
  148. var $data = emojiData[cname];
  149. var $tab = tabBoxs.eq(emojiTabIndex);
  150. if ($tab.html() !== "") {
  151. //console.log("break =>", cname);
  152. return ;
  153. }
  154. var pagination = function(data, type) {
  155. var rowNumber = (type === "editormd-logo") ? "5" : 20;
  156. var pageTotal = Math.ceil(data.length / rowNumber);
  157. var table = "<div class=\"" + classPrefix + "grid-table\">";
  158. for (var i = 0; i < pageTotal; i++)
  159. {
  160. var row = "<div class=\"" + classPrefix + "grid-table-row\">";
  161. for (var x = 0; x < rowNumber; x++)
  162. {
  163. var emoji = $.trim(data[(i * rowNumber) + x]);
  164. if (typeof emoji !== "undefined" && emoji !== "")
  165. {
  166. var img = "", icon = "";
  167. if (type === "github-emoji")
  168. {
  169. var src = (emoji === "+1") ? "plus1" : emoji;
  170. src = (src === "black_large_square") ? "black_square" : src;
  171. src = (src === "moon") ? "waxing_gibbous_moon" : src;
  172. src = exports.emoji.path + src + exports.emoji.ext;
  173. img = "<img src=\"" + src + "\" width=\"24\" class=\"emoji\" title=\"&#58;" + emoji + "&#58;\" alt=\"&#58;" + emoji + "&#58;\" />";
  174. row += "<a href=\"javascript:;\" value=\":" + emoji + ":\" title=\":" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + img + "</a>";
  175. }
  176. else if (type === "twemoji")
  177. {
  178. var twemojiSrc = exports.twemoji.path + emoji + exports.twemoji.ext;
  179. img = "<img src=\"" + twemojiSrc + "\" width=\"24\" title=\"twemoji-" + emoji + "\" alt=\"twemoji-" + emoji + "\" class=\"emoji twemoji\" />";
  180. row += "<a href=\"javascript:;\" value=\":tw-" + emoji + ":\" title=\":tw-" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + img + "</a>";
  181. }
  182. else if (type === "font-awesome")
  183. {
  184. icon = "<i class=\"fa fa-" + emoji + " fa-emoji\" title=\"" + emoji + "\"></i>";
  185. row += "<a href=\"javascript:;\" value=\":fa-" + emoji + ":\" title=\":fa-" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + icon + "</a>";
  186. }
  187. else if (type === "editormd-logo")
  188. {
  189. icon = "<i class=\"" + emoji + "\" title=\"Editor.md logo (" + emoji + ")\"></i>";
  190. row += "<a href=\"javascript:;\" value=\":" + emoji + ":\" title=\":" + emoji + ":\" style=\"width:20%;\" class=\"" + classPrefix + "emoji-btn\">" + icon + "</a>";
  191. }
  192. }
  193. else
  194. {
  195. row += "<a href=\"javascript:;\" value=\"\"></a>";
  196. }
  197. }
  198. row += "</div>";
  199. table += row;
  200. }
  201. table += "</div>";
  202. return table;
  203. };
  204. if (emojiTabIndex === 0)
  205. {
  206. for (var i = 0, len = $data.length; i < len; i++)
  207. {
  208. var h4Style = (i === 0) ? " style=\"margin: 0 0 10px;\"" : " style=\"margin: 10px 0;\"";
  209. $tab.append("<h4" + h4Style + ">" + $data[i].category + "</h4>");
  210. $tab.append(pagination($data[i].list, cname));
  211. }
  212. }
  213. else
  214. {
  215. $tab.append(pagination($data, cname));
  216. }
  217. $tab.find("." + classPrefix + "emoji-btn").bind(exports.mouseOrTouch("click", "touchend"), function() {
  218. $(this).toggleClass("selected");
  219. if ($(this).hasClass("selected"))
  220. {
  221. selecteds.push($(this).attr("value"));
  222. }
  223. });
  224. };
  225. if (emojiData.length < 1)
  226. {
  227. if (typeof dialog.loading === "function") {
  228. dialog.loading(true);
  229. }
  230. $.getJSON(path + "emoji.json?temp=" + Math.random(), function(json) {
  231. if (typeof dialog.loading === "function") {
  232. dialog.loading(false);
  233. }
  234. emojiData = json;
  235. emojiData[logoPrefix] = logos;
  236. drawTable();
  237. });
  238. }
  239. else
  240. {
  241. drawTable();
  242. }
  243. tab.find("li").bind(exports.mouseOrTouch("click", "touchend"), function() {
  244. var $this = $(this);
  245. emojiTabIndex = $this.index();
  246. $this.addClass("active").siblings().removeClass("active");
  247. tabBoxs.eq(emojiTabIndex).show().siblings().hide();
  248. drawTable();
  249. });
  250. };
  251. };
  252. // CommonJS/Node.js
  253. if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
  254. {
  255. module.exports = factory;
  256. }
  257. else if (typeof define === "function") // AMD/CMD/Sea.js
  258. {
  259. if (define.amd) { // for Require.js
  260. define(["editormd"], function(editormd) {
  261. factory(editormd);
  262. });
  263. } else { // for Sea.js
  264. define(function(require) {
  265. var editormd = require("./../../editormd");
  266. factory(editormd);
  267. });
  268. }
  269. }
  270. else
  271. {
  272. factory(window.editormd);
  273. }
  274. })();