You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
328 lines
10 KiB
JavaScript
328 lines
10 KiB
JavaScript
3 years ago
|
/*!
|
||
|
|
* Emoji dialog plugin for Editor.md
|
||
|
|
*
|
||
|
|
* @file emoji-dialog.js
|
||
|
|
* @author pandao
|
||
|
|
* @version 1.2.0
|
||
|
|
* @updateTime 2015-03-08
|
||
|
|
* {@link https://github.com/pandao/editor.md}
|
||
|
|
* @license MIT
|
||
|
|
*/
|
||
|
|
|
||
|
|
(function() {
|
||
|
|
|
||
|
|
var factory = function (exports) {
|
||
|
|
|
||
|
|
var $ = jQuery;
|
||
|
|
var pluginName = "emoji-dialog";
|
||
|
|
var emojiTabIndex = 0;
|
||
|
|
var emojiData = [];
|
||
|
|
var selecteds = [];
|
||
|
|
|
||
|
|
var logoPrefix = "editormd-logo";
|
||
|
|
var logos = [
|
||
|
|
logoPrefix,
|
||
|
|
logoPrefix + "-1x",
|
||
|
|
logoPrefix + "-2x",
|
||
|
|
logoPrefix + "-3x",
|
||
|
|
logoPrefix + "-4x",
|
||
|
|
logoPrefix + "-5x",
|
||
|
|
logoPrefix + "-6x",
|
||
|
|
logoPrefix + "-7x",
|
||
|
|
logoPrefix + "-8x"
|
||
|
|
];
|
||
|
|
|
||
|
|
var langs = {
|
||
|
|
"zh-cn" : {
|
||
|
|
toolbar : {
|
||
|
|
emoji : "Emoji 表情"
|
||
|
|
},
|
||
|
|
dialog : {
|
||
|
|
emoji : {
|
||
|
|
title : "Emoji 表情"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"zh-tw" : {
|
||
|
|
toolbar : {
|
||
|
|
emoji : "Emoji 表情"
|
||
|
|
},
|
||
|
|
dialog : {
|
||
|
|
emoji : {
|
||
|
|
title : "Emoji 表情"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"en" : {
|
||
|
|
toolbar : {
|
||
|
|
emoji : "Emoji"
|
||
|
|
},
|
||
|
|
dialog : {
|
||
|
|
emoji : {
|
||
|
|
title : "Emoji"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
exports.fn.emojiDialog = function() {
|
||
|
|
var _this = this;
|
||
|
|
var cm = this.cm;
|
||
|
|
var settings = _this.settings;
|
||
|
|
|
||
|
|
if (!settings.emoji)
|
||
|
|
{
|
||
|
|
alert("settings.emoji == false");
|
||
|
|
return ;
|
||
|
|
}
|
||
|
|
|
||
|
|
var path = settings.pluginPath + pluginName + "/";
|
||
|
|
var editor = this.editor;
|
||
|
|
var cursor = cm.getCursor();
|
||
|
|
var selection = cm.getSelection();
|
||
|
|
var classPrefix = this.classPrefix;
|
||
|
|
|
||
|
|
$.extend(true, this.lang, langs[this.lang.name]);
|
||
|
|
this.setToolbar();
|
||
|
|
|
||
|
|
var lang = this.lang;
|
||
|
|
var dialogName = classPrefix + pluginName, dialog;
|
||
|
|
var dialogLang = lang.dialog.emoji;
|
||
|
|
|
||
|
|
var dialogContent = [
|
||
|
|
"<div class=\"" + classPrefix + "emoji-dialog-box\" style=\"width: 760px;height: 334px;margin-bottom: 8px;overflow: hidden;\">",
|
||
|
|
"<div class=\"" + classPrefix + "tab\"></div>",
|
||
|
|
"</div>",
|
||
|
|
].join("\n");
|
||
|
|
|
||
|
|
cm.focus();
|
||
|
|
|
||
|
|
if (editor.find("." + dialogName).length > 0)
|
||
|
|
{
|
||
|
|
dialog = editor.find("." + dialogName);
|
||
|
|
|
||
|
|
selecteds = [];
|
||
|
|
dialog.find("a").removeClass("selected");
|
||
|
|
|
||
|
|
this.dialogShowMask(dialog);
|
||
|
|
this.dialogLockScreen();
|
||
|
|
dialog.show();
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
dialog = this.createDialog({
|
||
|
|
name : dialogName,
|
||
|
|
title : dialogLang.title,
|
||
|
|
width : 800,
|
||
|
|
height : 475,
|
||
|
|
mask : settings.dialogShowMask,
|
||
|
|
drag : settings.dialogDraggable,
|
||
|
|
content : dialogContent,
|
||
|
|
lockScreen : settings.dialogLockScreen,
|
||
|
|
maskStyle : {
|
||
|
|
opacity : settings.dialogMaskOpacity,
|
||
|
|
backgroundColor : settings.dialogMaskBgColor
|
||
|
|
},
|
||
|
|
buttons : {
|
||
|
|
enter : [lang.buttons.enter, function() {
|
||
|
|
cm.replaceSelection(selecteds.join(" "));
|
||
|
|
this.hide().lockScreen(false).hideMask();
|
||
|
|
|
||
|
|
return false;
|
||
|
|
}],
|
||
|
|
cancel : [lang.buttons.cancel, function() {
|
||
|
|
this.hide().lockScreen(false).hideMask();
|
||
|
|
|
||
|
|
return false;
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var category = ["Github emoji", "Twemoji", "Font awesome", "Editor.md logo"];
|
||
|
|
var tab = dialog.find("." + classPrefix + "tab");
|
||
|
|
|
||
|
|
if (tab.html() === "")
|
||
|
|
{
|
||
|
|
var head = "<ul class=\"" + classPrefix + "tab-head\">";
|
||
|
|
|
||
|
|
for (var i = 0; i<4; i++) {
|
||
|
|
var active = (i === 0) ? " class=\"active\"" : "";
|
||
|
|
head += "<li" + active + "><a href=\"javascript:;\">" + category[i] + "</a></li>";
|
||
|
|
}
|
||
|
|
|
||
|
|
head += "</ul>";
|
||
|
|
|
||
|
|
tab.append(head);
|
||
|
|
|
||
|
|
var container = "<div class=\"" + classPrefix + "tab-container\">";
|
||
|
|
|
||
|
|
for (var x = 0; x < 4; x++)
|
||
|
|
{
|
||
|
|
var display = (x === 0) ? "" : "display:none;";
|
||
|
|
container += "<div class=\"" + classPrefix + "tab-box\" style=\"height: 260px;overflow: hidden;overflow-y: auto;" + display + "\"></div>";
|
||
|
|
}
|
||
|
|
|
||
|
|
container += "</div>";
|
||
|
|
|
||
|
|
tab.append(container);
|
||
|
|
}
|
||
|
|
|
||
|
|
var tabBoxs = tab.find("." + classPrefix + "tab-box");
|
||
|
|
var emojiCategories = ["github-emoji", "twemoji", "font-awesome", logoPrefix];
|
||
|
|
|
||
|
|
var drawTable = function() {
|
||
|
|
var cname = emojiCategories[emojiTabIndex];
|
||
|
|
var $data = emojiData[cname];
|
||
|
|
var $tab = tabBoxs.eq(emojiTabIndex);
|
||
|
|
|
||
|
|
if ($tab.html() !== "") {
|
||
|
|
//console.log("break =>", cname);
|
||
|
|
return ;
|
||
|
|
}
|
||
|
|
|
||
|
|
var pagination = function(data, type) {
|
||
|
|
var rowNumber = (type === "editormd-logo") ? "5" : 20;
|
||
|
|
var pageTotal = Math.ceil(data.length / rowNumber);
|
||
|
|
var table = "<div class=\"" + classPrefix + "grid-table\">";
|
||
|
|
|
||
|
|
for (var i = 0; i < pageTotal; i++)
|
||
|
|
{
|
||
|
|
var row = "<div class=\"" + classPrefix + "grid-table-row\">";
|
||
|
|
|
||
|
|
for (var x = 0; x < rowNumber; x++)
|
||
|
|
{
|
||
|
|
var emoji = $.trim(data[(i * rowNumber) + x]);
|
||
|
|
|
||
|
|
if (typeof emoji !== "undefined" && emoji !== "")
|
||
|
|
{
|
||
|
|
var img = "", icon = "";
|
||
|
|
|
||
|
|
if (type === "github-emoji")
|
||
|
|
{
|
||
|
|
var src = (emoji === "+1") ? "plus1" : emoji;
|
||
|
|
src = (src === "black_large_square") ? "black_square" : src;
|
||
|
|
src = (src === "moon") ? "waxing_gibbous_moon" : src;
|
||
|
|
|
||
|
|
src = exports.emoji.path + src + exports.emoji.ext;
|
||
|
|
img = "<img src=\"" + src + "\" width=\"24\" class=\"emoji\" title=\":" + emoji + ":\" alt=\":" + emoji + ":\" />";
|
||
|
|
row += "<a href=\"javascript:;\" value=\":" + emoji + ":\" title=\":" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + img + "</a>";
|
||
|
|
}
|
||
|
|
else if (type === "twemoji")
|
||
|
|
{
|
||
|
|
var twemojiSrc = exports.twemoji.path + emoji + exports.twemoji.ext;
|
||
|
|
img = "<img src=\"" + twemojiSrc + "\" width=\"24\" title=\"twemoji-" + emoji + "\" alt=\"twemoji-" + emoji + "\" class=\"emoji twemoji\" />";
|
||
|
|
row += "<a href=\"javascript:;\" value=\":tw-" + emoji + ":\" title=\":tw-" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + img + "</a>";
|
||
|
|
}
|
||
|
|
else if (type === "font-awesome")
|
||
|
|
{
|
||
|
|
icon = "<i class=\"fa fa-" + emoji + " fa-emoji\" title=\"" + emoji + "\"></i>";
|
||
|
|
row += "<a href=\"javascript:;\" value=\":fa-" + emoji + ":\" title=\":fa-" + emoji + ":\" class=\"" + classPrefix + "emoji-btn\">" + icon + "</a>";
|
||
|
|
}
|
||
|
|
else if (type === "editormd-logo")
|
||
|
|
{
|
||
|
|
icon = "<i class=\"" + emoji + "\" title=\"Editor.md logo (" + emoji + ")\"></i>";
|
||
|
|
row += "<a href=\"javascript:;\" value=\":" + emoji + ":\" title=\":" + emoji + ":\" style=\"width:20%;\" class=\"" + classPrefix + "emoji-btn\">" + icon + "</a>";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
row += "<a href=\"javascript:;\" value=\"\"></a>";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
row += "</div>";
|
||
|
|
|
||
|
|
table += row;
|
||
|
|
}
|
||
|
|
|
||
|
|
table += "</div>";
|
||
|
|
|
||
|
|
return table;
|
||
|
|
};
|
||
|
|
|
||
|
|
if (emojiTabIndex === 0)
|
||
|
|
{
|
||
|
|
for (var i = 0, len = $data.length; i < len; i++)
|
||
|
|
{
|
||
|
|
var h4Style = (i === 0) ? " style=\"margin: 0 0 10px;\"" : " style=\"margin: 10px 0;\"";
|
||
|
|
$tab.append("<h4" + h4Style + ">" + $data[i].category + "</h4>");
|
||
|
|
$tab.append(pagination($data[i].list, cname));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
$tab.append(pagination($data, cname));
|
||
|
|
}
|
||
|
|
|
||
|
|
$tab.find("." + classPrefix + "emoji-btn").bind(exports.mouseOrTouch("click", "touchend"), function() {
|
||
|
|
$(this).toggleClass("selected");
|
||
|
|
|
||
|
|
if ($(this).hasClass("selected"))
|
||
|
|
{
|
||
|
|
selecteds.push($(this).attr("value"));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
if (emojiData.length < 1)
|
||
|
|
{
|
||
|
|
if (typeof dialog.loading === "function") {
|
||
|
|
dialog.loading(true);
|
||
|
|
}
|
||
|
|
|
||
|
|
$.getJSON(path + "emoji.json?temp=" + Math.random(), function(json) {
|
||
|
|
|
||
|
|
if (typeof dialog.loading === "function") {
|
||
|
|
dialog.loading(false);
|
||
|
|
}
|
||
|
|
|
||
|
|
emojiData = json;
|
||
|
|
emojiData[logoPrefix] = logos;
|
||
|
|
drawTable();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
drawTable();
|
||
|
|
}
|
||
|
|
|
||
|
|
tab.find("li").bind(exports.mouseOrTouch("click", "touchend"), function() {
|
||
|
|
var $this = $(this);
|
||
|
|
emojiTabIndex = $this.index();
|
||
|
|
|
||
|
|
$this.addClass("active").siblings().removeClass("active");
|
||
|
|
tabBoxs.eq(emojiTabIndex).show().siblings().hide();
|
||
|
|
drawTable();
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
// CommonJS/Node.js
|
||
|
|
if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
|
||
|
|
{
|
||
|
|
module.exports = factory;
|
||
|
|
}
|
||
|
|
else if (typeof define === "function") // AMD/CMD/Sea.js
|
||
|
|
{
|
||
|
|
if (define.amd) { // for Require.js
|
||
|
|
|
||
|
|
define(["editormd"], function(editormd) {
|
||
|
|
factory(editormd);
|
||
|
|
});
|
||
|
|
|
||
|
|
} else { // for Sea.js
|
||
|
|
define(function(require) {
|
||
|
|
var editormd = require("./../../editormd");
|
||
|
|
factory(editormd);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
factory(window.editormd);
|
||
|
|
}
|
||
|
|
|
||
|
|
})();
|