/*!
* 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);
}
})();