-
Notifications
You must be signed in to change notification settings - Fork 0
/
plugin.min.js
1 lines (1 loc) · 4.98 KB
/
plugin.min.js
1
(function(domGlobals){"use strict";var TinymceResource=tinymce.util.Tools.resolve("tinymce.Resource");var TinymcePromise=tinymce.util.Tools.resolve("tinymce.util.Promise");var TinymceDelay=tinymce.util.Tools.resolve("tinymce.util.Delay");var DATA_BASE_FOLDER="/js/twemoji-database.min.js";var IMG_FOLDER="/assets/72x72";var CSSES=["/assets/css/activity.min.css","/assets/css/animals-nature.min.css","/assets/css/flags.min.css","/assets/css/food-drink.min.css","/assets/css/objects.min.css","/assets/css/smileys-people.min.css","/assets/css/symbols.min.css","/assets/css/travel-places.min.css"];var patternInputName="pattern";var currentCategory="Smileys & People";function throttle(fn,wait){var lastTime=Date.now();return function(){var nowTime=Date.now();if(nowTime-lastTime>=wait){lastTime=nowTime;return fn.apply(null,Array.prototype.slice.call(arguments))}}}function getEmojiImg(infoStr,pluginUrl){var infoArr=infoStr.split(",");var codePoint=infoArr[0];var name=infoArr[1];var char=infoArr[2];var url=pluginUrl+IMG_FOLDER+"/"+codePoint+".png";return'<img style="width:20px;height:20px;vertical-align:middle;" draggable="false" title="'+name+'" alt="'+char+'" src="'+url+'"/>'}function getEmojiBtn(infoStr){var infoArr=infoStr.split(",");var codePoint=infoArr[0];var name=infoArr[1];var char=infoArr[2];return'<div draggable="false" style="width:20px;height:20px;" id="twemoji-'+codePoint+'" title="'+name+'" alt="'+char+'"></div>'}function insertEmoticon(editor,value,pluginUrl){editor.insertContent(getEmojiImg(value,pluginUrl))}function getEmojisByCategory(categories,category){category=category||currentCategory;var category=categories.find(function(item){return item.name===currentCategory});return category&&category.emojis}function filterEmojis(emojis,pattern){pattern=new RegExp(pattern,"i");return emojis.filter(function(emoji){return emoji.name.match(pattern)})}function initDatabase(editor,pluginUrl){var state={hasLoaded:false,categories:[]};var DEFAULT_ID="tinymce.plugins.twemoji";var DEFAULT_URL=pluginUrl+DATA_BASE_FOLDER;var databaseId=editor.getParam("twemoji_database_id",DEFAULT_ID,"string");var databaseUrl=editor.getParam("twemoji_database_url",DEFAULT_URL);editor.on("init",function(){TinymceResource.load(databaseId,databaseUrl).then(function(categories){state.categories=categories.map(function(category){return Object.assign({},category,{emojis:category.emojis.map(function(emoji){var infoStr=emoji.codePoint+","+emoji.name+","+emoji.char;var icon=getEmojiBtn(infoStr,pluginUrl);return Object.assign({},emoji,{text:emoji.name,icon:icon,value:infoStr})})})});state.hasLoaded=true},function(err){domGlobals.console.log("Failed to load twemoji: "+err)})});state.waitForLoad=function(){if(state.hasLoaded){return TinymcePromise.resolve(true)}else{return new TinymcePromise(function(resolve,reject){var numRetries=15;var interval=TinymceDelay.setInterval(function(){if(state.hasLoaded){TinymceDelay.clearInterval(interval);resolve(true)}else{numRetries--;if(numRetries<0){domGlobals.console.log("Could not load twemoji from url: "+databaseUrl);TinymceDelay.clearInterval(interval);reject(false)}}},100)})}};return state}tinymce.PluginManager.add("twemoji",function(editor,pluginUrl){CSSES.forEach(function(cssFolder){tinymce.DOM.loadCSS(pluginUrl+cssFolder)});var database=initDatabase(editor,pluginUrl);var handleFilter=throttle(function(dialogApi){var dialogData=dialogApi.getData();dialogApi.setData({results:filterEmojis(getEmojisByCategory(database.categories),dialogData[patternInputName])})},200);var getDialogConfig=function(){var body={type:"tabpanel",tabs:database.categories.map(function(cat){return{title:cat.name,name:cat.name,items:[{label:"Search",type:"input",name:patternInputName},{type:"collection",name:"results"}]}})};return{title:"twemoji",size:"normal",body:body,initialData:{pattern:"",results:getEmojisByCategory(database.categories)},onTabChange:function(dialogApi,details){currentCategory=details.newTabName;handleFilter(dialogApi)},onChange:handleFilter,onAction:function(dialogApi,actionData){if(actionData.name==="results"){insertEmoticon(editor,actionData.value,pluginUrl);dialogApi.close()}},buttons:[{type:"cancel",text:"Close",primary:true}]}};var openDialog=function(editor,database){var dialogApi=editor.windowManager.open(getDialogConfig());if(!database.hasLoaded){dialogApi.block("Loading emoticons...");database.waitForLoad().then(function(){dialogApi.redial(getDialogConfig());handleFilter(dialogApi);dialogApi.focus(patternInputName)}).catch(function(err){dialogApi.redial({title:"twemoji",body:{type:"panel",items:[{type:"alertbanner",level:"error",icon:"warning",text:"<p>Could not load twemoji</p>"}]},buttons:[{type:"cancel",text:"Close",primary:true}],initialData:{pattern:"",results:[]}});dialogApi.focus(patternInputName);dialogApi.showTab(currentCategory);dialogApi.unblock()})}else{dialogApi.showTab(currentCategory);dialogApi.focus(patternInputName)}};editor.ui.registry.addButton("twemoji",{icon:"emoji",tooltip:"twemoji",onAction:function(){openDialog(editor,database)}});return{getMetadata:function(){}}})})(window);