twemoji.js

(function($){
	$.Redactor.prototype.twemoji = function(){
		return {
			pluginName: 'twemoji',
			opts: {
				emojiset: {
					'people': ['😁', '😂', '😃', '😄', '😅', '😆', '😇', '😈', '😉', '😊', '😋', '😌', '😍', '😎', '😏', '😐', '😑', '😒', '😓', '😔', '😕', '😖', '😗', '😘', '😙', '😚', '😛', '😜', '😝', '😞', '😟', '😠', '😡', '😢', '😣', '😤', '😥', '😦', '😧', '😨', '😩', '😪', '😫', '😬', '😭', '😮', '😯', '😰', '😱', '😲', '😳', '😴', '😵', '😶', '😷', '😸', '😹', '😺', '😻', '😼', '😽', '😾', '😿', '🙀'],
					'Animal': ['🐀', '🐁', '🐂', '🐃', '🐄', '🐅', '🐆', '🐇', '🐈', '🐉', '🐊', '🐋', '🐌', '🐍', '🐎', '🐏', '🐐', '🐑', '🐒', '🐓', '🐔', '🐕', '🐖', '🐗', '🐘', '🐙', '🐚', '🐛', '🐜', '🐝', '🐞', '🐟', '🐠', '🐡', '🐢', '🐣', '🐤', '🐥', '🐦', '🐧', '🐨', '🐩', '🐪', '🐫', '🐬', '🐭', '🐮', '🐯', '🐰', '🐱', '🐲', '🐳', '🐴', '🐵', '🐶', '🐷', '🐸', '🐹', '🐺', '🐻', '🐼']
				},
				twemojiurl: 'https://twemoji.maxcdn.com/twemoji.min.js',
				twemojiconfig: {ext: '.png', size: 36}
			},
			langs: {
				'en':{
					'twemoji': 'Twemoji'
				}
			},
			init: function(){
				var _this = this;

				/* merge settings */
				this.opts = $.extend({}, this.twemoji.opts, this.opts);
				this.opts.langs.en = $.extend({}, this.twemoji.langs.en, this.opts.langs.en);

				/* refresh language */
				this.lang.load('en');

				/* load twemoji library */
				_this.twemoji.getScript();
				/* add button */
				_this.twemoji.addButton();
			},
			getScript: function(){
				var _this = this, s = document.createElement('script'), x;
		        s.type = 'text/javascript';
		        s.async = true;
		        s.src = _this.opts.twemojiurl;
		        x = document.getElementsByTagName('script')[0];
		        x.parentNode.insertBefore(s, x);
			},
			getTemplate: function(){
				return [
					'<section id="redactor-twemoji-section">',
						'<div id="redactor-twemoji-container"></div>',
					'</section>',
				].join('');
			},
			parseEmoji: function(emoji){
				if(twemoji){
					emoji = jQuery('<span>'+emoji+'</span>').text();
					return twemoji.parse(emoji, this.opts.twemojiconfig);
				}
				return emoji;
			},
			show: function(){
				var _this = this,$twemojiSection, setIndex = 0;

				_this.modal.addTemplate('twemoji', _this.twemoji.getTemplate());
				_this.modal.load('twemoji', _this.lang.get('twemoji'), 700);
				_this.modal.show();

				$twemojiSection = $('#redactor-twemoji-section');

				_this.modal.createTabber($twemojiSection);

				for(setName in _this.opts.emojiset){
					var twemojiSet = _this.opts.emojiset[setName];
					if(twemojiSet.length){
						setIndex++;
						var $setTab = $('<div id="redactor-image-manager-box" style="overflow: auto; height: 300px;" class="redactor-tab redactor-tab' + setIndex + '">');
						if(setIndex == 1){
							_this.modal.addTab(setIndex, setName, 'active');
						}else{
							_this.modal.addTab(setIndex, setName);
							$setTab.hide();
						}
						$twemojiSection.append($setTab);
						for(var i=0,j=twemojiSet.length;i<j;i++){
							$setTab.append(_this.twemoji.parseEmoji(twemojiSet[i]));
						}
					}
				}
				$twemojiSection.find('.emoji').on('click', $.proxy(_this.twemoji.insert, _this));
			},
			addButton: function(){
				var _this  = this, button = _this.button.add(_this.twemoji.pluginName, _this.lang.get('twemoji'));

				button.text(_this.lang.get('twemoji'));
				button.removeClass('redactor-btn-image');
				button.addClass('re-button');

				_this.button.addCallback(button, _this.twemoji.show);
			},
			insert: function(e){
				var _this = this, emoji = $(e.target).clone() || "";

				e.preventDefault();
				if(emoji !== ''){
					_this.selection.restore();
					_this.modal.close();
					var current = _this.selection.getBlock() || _this.selection.getCurrent();

					if (current){
						$(current).after(emoji);
					}else{
						_this.insert.html(emoji);
					}

					_this.code.sync();
				}
			}
		};
	};
})(jQuery);