Merge pull request #33 from Mindroute/master

Exposed options, Custom CDN support, SVG support, Recent emojis category and setFocus

Author: mervick

dist/emojionearea.css

@@ -14,7 +14,7 @@ $sprite: 'sprite.png';
 
 $picker-border-radius: 5px !default;
 $picker-bg: #fff !default;
-$picker-width: 284px;
+$picker-width: (9 * 32px + 28px);
 $picker-height: 236px;
 
 $filters-bg: #F5F7F9 !default;

dist/emojionearea.css.map

@@ -1,20 +1,24 @@
 define([
-    'jquery',
-    'prototype/var/EmojioneArea',
-    'prototype/on',
-    'prototype/off',
-    'prototype/trigger',
-    'prototype/setText',
-    'prototype/getText',
-    'prototype/showPicker',
-    'prototype/hidePicker'
+	'jquery',
+	'prototype/var/EmojioneArea',
+	'var/getDefaultOptions',
+	'prototype/on',
+	'prototype/off',
+	'prototype/trigger',
+	'prototype/setFocus',
+	'prototype/setText',
+	'prototype/getText',
+	'prototype/showPicker',
+	'prototype/hidePicker'
 ],
-function($, EmojioneArea) {
-    $.fn.emojioneArea = function(options) {
-        return this.each(function() {
-            if (!!this.emojioneArea) return this.emojioneArea;
-            $.data(this, 'emojioneArea', this.emojioneArea = new EmojioneArea($(this), options));
-            return this.emojioneArea;
-        });
-    };
+function($, EmojioneArea, getDefaultOptions) {
+	$.fn.emojioneArea = function(options) {
+		return this.each(function() {
+			if (!!this.emojioneArea) return this.emojioneArea;
+			$.data(this, 'emojioneArea', this.emojioneArea = new EmojioneArea($(this), options));
+			return this.emojioneArea;
+		});
+	};
+
+	$.fn.emojioneArea.defaults = getDefaultOptions();
 });

dist/emojionearea.js

@@ -1,11 +1,12 @@
 define([
     'jquery',
-    'var/default_options',
+    'var/getDefaultOptions',
     'function/isObject'
 ],
-function($, default_options, isObject) {
-    return function(options) {
-        if (options['filters']) {
+function($, getDefaultOptions, isObject) {
+	return function(options) {
+        var default_options = getDefaultOptions();
+        if (options && options['filters']) {
             var filters = default_options.filters;
             $.each(options['filters'], function(filter, data) {
                 if (!isObject(data) || $.isEmptyObject(data)) {
@@ -19,5 +20,5 @@ function($, default_options, isObject) {
             options['filters'] = filters;
         }
         return $.extend({}, default_options, options);
-    }
+    };
 });

dist/emojionearea.min.css

@@ -0,0 +1,5 @@
+define([], function() {
+   return function () {
+        return localStorage.getItem("recent_emojis") || "";
+    }
+});

dist/emojionearea.min.js

@@ -1,13 +1,19 @@
 define([
-    'var/emojione',
-    'var/emojioneSupportMode'
+	'var/emojione',
+	'var/emojioneSupportMode'
 ],
 function(emojione, emojioneSupportMode) {
-    return function(template, unicode, shortname) {
-        return template
-            .replace('{name}', shortname || '')
-            .replace('{img}', emojione.imagePathPNG + (emojioneSupportMode < 2 ? unicode.toUpperCase() : unicode) + '.png')
-            .replace('{uni}', unicode)
-            .replace('{alt}', emojione.convert(unicode));
-    }
+	return function(template, unicode, shortname) {
+		var imageType = emojione.imageType, imagePath;
+		if (imageType=='svg'){
+			imagePath = emojione.imagePathSVG;
+		} else {
+			imagePath = emojione.imagePathPNG;
+		}
+		return template
+			.replace('{name}', shortname || '')
+			.replace('{img}', imagePath + (emojioneSupportMode < 2 ? unicode.toUpperCase() : unicode) + '.' + imageType)
+			.replace('{uni}', unicode)
+			.replace('{alt}', emojione.convert(unicode));
+	};
 });

dist/emojionearea.min.map

@@ -19,11 +19,13 @@ define([
     'function/lazyLoading',
     'function/selector',
     'function/div',
+	'function/getRecent',
+	'function/setRecent'
     //'function/calcElapsedTime', // debug only
 ],
 function($, emojione, blankImg, slice, css_class, emojioneSupportMode, trigger, attach, shortnameTo,
          pasteHtmlAtCaret, getOptions, saveSelection, restoreSelection, htmlFromText, textFromHtml, isObject,
-         calcButtonPosition, lazyLoading, selector, div)
+         calcButtonPosition, lazyLoading, selector, div, getRecent, setRecent)
 {
     return function(self, source, options) {
         //calcElapsedTime('init', function() {
@@ -105,6 +107,11 @@ function($, emojione, blankImg, slice, css_class, emojioneSupportMode, trigger,
                     category.hide();
                     items = items.split('|').join('_tone' + skin + '|') + '_tone' + skin;
                 }
+
+                if (filter === 'recent') {
+                    items = getRecent();
+                }
+
                 items = shortnameTo(items,
                     self.sprite ?
                     '<i class="emojibtn" role="button" data-name="{name}"><i class="emojione-{uni}"></i></i>' :
@@ -207,7 +214,10 @@ function($, emojione, blankImg, slice, css_class, emojioneSupportMode, trigger,
             });
         })
 
-        .on("@picker.show", lazyLoading)
+        .on("@picker.show", function() {
+			updateRecent(self, app, editor);
+			lazyLoading.call(this);
+		})
 
         .on("@tone.click", function(tone) {
             tones.children().removeClass("active");
@@ -277,6 +287,8 @@ function($, emojione, blankImg, slice, css_class, emojioneSupportMode, trigger,
                 saveSelection(editor[0]);
                 pasteHtmlAtCaret(shortnameTo(emojibtn.data("name"), self.emojiTemplate));
             }
+
+			setRecent(self, emojibtn.data("name"), app, editor);
         })
 
         .on("@!resize @keyup @emojibtn.click", calcButtonPosition)

img/sprite.png renamed to images/sprite.png

@@ -0,0 +1,77 @@
+define([
+	'var/emojione',
+	'var/uniRegexp',
+	'var/emojioneVersion',
+	'var/readyCallbacks',
+	'var/emojioneSupportMode',
+	'var/cdn',
+	'function/emojioneReady',
+	'function/isObject'
+],
+function(emojione, uniRegexp, emojioneVersion, readyCallbacks, emojioneSupportMode, cdn, emojioneReady, isObject) {
+	return function(options) {
+
+		function detectVersion(emojione) {
+			var version = emojione.cacheBustParam;
+			if (!isObject(emojione['jsEscapeMap'])) return '1.5.2';
+			if (version === "?v=1.2.4") return '2.0.0';
+			if (version === "?v=2.0.1") return '2.1.0'; // v2.0.1 || v2.1.0
+			if (version === "?v=2.1.1") return '2.1.1';
+			if (version === "?v=2.1.2") return '2.1.2';
+			if (version === "?v=2.1.3") return '2.1.3';
+			if (version === "?v=2.1.4") return '2.1.4';
+			return '2.1.4';
+		}
+
+		function getSupportMode(version) {
+			switch (version) {
+				case '1.5.2': return 0;
+				case '2.0.0': return 1;
+				case '2.1.0':
+				case '2.1.1': return 2;
+				case '2.1.2': return 3;
+				case '2.1.3':
+				case '2.1.4':
+				default: return 4;
+			}
+		}
+		options = getOptions(options);
+
+		if (!cdn.isLoading) {
+			if (!emojione || getSupportMode(detectVersion(emojione)) < 2) {
+				cdn.isLoading = true;
+				$.getScript(cdn.defaultBase + emojioneVersion + "/lib/js/emojione.min.js", function () {
+					emojione = window.emojione;
+					emojioneVersion = detectVersion(emojione);
+					emojioneSupportMode = getSupportMode(emojioneVersion);
+					cdn.base = cdn.defaultBase + emojioneVersion + "/assets";
+					var sprite = cdn.base +"/sprites/emojione.sprites.css";
+					if (document.createStyleSheet) {
+						document.createStyleSheet(sprite);
+					} else {
+						$('<link/>', {rel: 'stylesheet', href: sprite}).appendTo('head');
+					}
+					while (readyCallbacks.length) {
+						readyCallbacks.shift().call();
+					}
+					cdn.isLoading = false;
+				});
+			} else {
+				emojioneVersion = detectVersion(emojione);
+				emojioneSupportMode = getSupportMode(emojioneVersion);
+				cdn.base = cdn.defaultBase + emojioneVersion + "/assets";
+			}
+		}
+
+		emojioneReady(function() {
+			if (options.useInternalCDN) {
+				emojione.imagePathPNG = cdn.base + "/png/";
+				emojione.imagePathSVG = cdn.base + "/svg/";
+				emojione.imagePathSVGSprites = cdn.base + "/sprites/emojione.sprites.svg";
+				emojione.imageType = options.imageType;
+			}
+
+			uniRegexp = new RegExp("<object[^>]*>.*?<\/object>|<span[^>]*>.*?<\/span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|(" + emojione.unicodeRegexp + ")", "gi");
+		});
+	};
+});

scss/_variables.scss

@@ -0,0 +1,23 @@
+define([
+	'function/updateRecent',
+	'function/getRecent'
+],
+function(updateRecent, getRecent) {
+	return function(self, emoji, app, editor) {
+
+		var recent = getRecent();
+		var emojis = recent.split("|");
+
+		if (emojis.indexOf(emoji) === -1) {
+			emojis.unshift(emoji);
+		}
+
+		if (emojis.length > 9) {
+			emojis.pop();
+		}
+
+		localStorage.setItem("recent_emojis", emojis.join("|"));
+
+		updateRecent(self, app, editor);
+	};
+});

src/block/loadEmojione.js

@@ -2,8 +2,7 @@ define([
     'var/emojione',
     'var/uniRegexp',
     'var/emojioneSupportMode',
-    'function/getTemplate',
-    'block/loadEmojione'
+    'function/getTemplate'
 ],
 function(emojione, uniRegexp, emojioneSupportMode, getTemplate) {
     return function(str, template) {