<img>
using a CDN to load the images.Code: Select all
if ("undefined" == typeof jQuery) throw new Error("jEmoji requires jQuery");
! function(e) {
var a = function(a, o) {
function i(a, o) {
return function() {
if ("ontouchstart" in document.documentElement) {
var i = e(this),
n = null;
if (/input/i.test(i.prop("tagName")) ? n = i : e("input", i).size() > 0 && (n = e(e("input", i).get(0))), n) {
var t = n.val(),
r = null;
n.focus(function(e) {
clearInterval(r), r = setInterval(function() {
if (n.val() != t) {
var e = jQuery.Event(o);
t = n.val(), e.which = e.keyCode = t && t.length > 0 ? t.charCodeAt(t.length - 1) : "", n.trigger(e)
}
}, 30)
}), n.blur(function() {
clearInterval(r)
})
}
}
return a.apply(this, arguments)
}
}
var n = this;
this._icons = ["smiley", "grinning", "smile", "grin", "grimacing", "satisfied", "laughing", "sweat_smile", "joy", "wink", "stuck_out_tongue", "stuck_out_tongue_closed_eyes", "stuck_out_tongue_winking_eye", "heart_eyes", "innocent", "kissing", "kissing_closed_eyes", "kissing_face", "kissing_heart", "kissing_smiling_eyes", "blush", "relaxed", "relieved", "sunglasses", "yum", "flushed", "angry", "rage", "anguished", "astonished", "cold_sweat", "confounded", "confused", "cry", "disappointed", "disappointed_relieved", "dizzy_face", "expressionless", "frowning", "hushed", "neutral_face", "pensive", "persevere", "sob", "sweat", "tired_face", "triumph", "unamused", "weary", "smirk", "sob", "sweat", "tired_face", "worried", "no_mouth", "open_mouth", "fearful", "scream", "mask", "sleepy", "sleeping", "smiling_imp", "imp", "see_no_evil","speak_no_evil", "+1", "-1", "birthday", "cake", "coffee","wave", "zzz", "turtle", "heart", "blue_heart", "purple_heart","green_heart", "broken_heart"], this._language = {
es: {
arrow: "← / → para navegar",
select: "↵ para seleccionar",
esc: "esc para cerrar",
close: "Cerrar"
},
en: {
arrow: "← / → to navigate",
select: "↵ to select",
esc: "esc to dismiss",
close: "Close"
}
}, this._defaults = {
icons: void 0,
extension: "png",
folder: "images/emojis/",
container: void 0,
btn: void 0,
navigation: !0,
language: "en",
theme: "blue",
resize: void 0
}, this._options = e.extend(!0, {}, this._defaults, o), "undefined" != typeof this._options.icons && (this._icons = this._options.icons), this.options = function(a) {
return a ? e.extend(!0, this._options, a) : this._options
}, this.isOpen = function() {
return e(r).is(":visible")
}, this.open = function() {
e(r).show();
var o = e(r).find(".jemoji-icons");
if ("" === o.html()) {
var i = this._defaults.folder;
this._options.folder && (i = this._options.folder);
for (var t = o[0], s = "", l = this._options.extension, c = 0, _ = 75; _ > c; c++) {
var h = n._icons[c],
d = "";
"" === s && (d = 'class="active"'), s += "<div " + d + '><img src="' + i + h + "." + l + '" alt="' + h + '" /><span>:' + h + ":</span></div>"
}
t.innerHTML = s, a.data("jemojiclick").call();
var u = 0;
o.on("scroll", function() {
if (e(this).scrollTop() + e(this).innerHeight() >= e(this)[0].scrollHeight && 100 * ++u < n._icons.length) {
for (var o = "", r = 100 * u, s = 100 + 100 * u; s > r; r++) {
var c = n._icons[r];
c && (o += '<div><img src="' + i + c + "." + l + '" alt="' + c + '" /><span>:' + c + ":</span></div>")
}
t.innerHTML += o, a.data("jemojiclick").call()
}
})
}
}, this.close = function() {
e(r).hide()
};
var t = function() {
if (0 === a.length) return 0;
var e = a[0],
o = e.value.length;
try {
if (e.createTextRange) {
var i = document.selection.createRange().duplicate();
i.moveEnd("character", e.value.length), "" === i.text && (o = e.value.length), o = e.value.lastIndexOf(i.text)
} else "undefined" != typeof e.selectionStart && (o = e.selectionStart)
} catch (n) {}
return o
};
e.fn.jemojiKeyup = i(e.fn.keyup, "keyup"), e.fn.jemojiKeydown = i(e.fn.keydown, "keydown"), e.fn.jemojiKeypress = i(e.fn.keypress, "keypress"), a.data("jemojiclick", function() {
e(l).find("div").off("click").on("click", function() {
var o = e(this).find("img").attr("alt"),
i = t(),
r = a.val();
r = r.slice(0, r.lastIndexOf(":", i)) + ":" + o + ": " + r.slice(i), a.val(r), a.focus(), b = !1, y = "", n.close()
})
});
var r = document.createElement("div"),
s = e(r);
this._options.theme ? r.className = "jemoji-menu " + this._options.theme : r.className = "jemoji-menu " + this._defaults.theme;
var l = document.createElement("div");
l.className = "jemoji-icons", a.after(e(l));
var c = document.createElement("div");
c.className = "jemoji-menu-arrow up", e(l).before(e(c)), s.append(e(l));
var _ = document.createElement("div");
_.className = "jemoji-info";
var h = this._language[this._options.language];
"undefined" == typeof h && (h = this._language[this._defaults.language]);
var d = "undefined" != typeof this._options.navigation ? this._options.navigation : this._defaults.navigation;
if (d) {
h = jQuery.map(h, function(e) {
return e
}), _.innerHTML = "";
for (var u = 0, p = h.length - 1; p > u; u++) _.innerHTML += "<div>" + h[u] + "</div>";
_.innerHTML += '<div class="jemoji-close">' + h[h.length - 1] + "</div>"
} else _.innerHTML = '<div class="jemoji-close">' + h.close + "</div>";
s.prepend(e(_)), e(_).css("width", a.css("width")), e(_).find(".jemoji-close").on("click", function() {
n.close()
}), s.prepend(e(c)), s.css("width", a.css("width")), e(l).css("width", a.css("width"));
var m = "undefined" != typeof this._options.container ? this._options.container : this._defaults.container;
m ? (m instanceof jQuery || (m = e(m)), m.append(s)) : a.after(s);
var g, f, b = !1,
w = !1,
v = "undefined" != typeof this._options.btn ? this._options.btn : this._defaults.btn;
v && (v instanceof jQuery || (v = e(v)), v.on("click", function() {
n.isOpen() ? n.close() : n.open(), a.focus()
})), e(window).on("resize", function() {
if (n.resize) n.resize();
else {
var o = a.css("width");
e(l).css("width", o), e(r).css("width", o), e(_).css("width", o)
}
});
var k, y = "",
j = function() {
if (y.length >= 2) {
var o = new RegExp("^([a-zA-Z0-9]|_?)*" + y.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") + "([a-zA-Z0-9]|_?)*"),
i = e(l),
t = i[0],
r = n._defaults.folder;
n._options.folder && (r = n._options.folder);
for (var s = "", c = n._options.extension, _ = 0, h = n._icons.length; h > _; _++)
if (k = n._icons[_], o.test(k)) {
var d = "";
"" === s && (d = 'class="active"'), s += "<div " + d + '><img src="' + r + k + "." + c + '" alt="' + k + '" /><span>:' + k + ":</span></div>"
}
t.innerHTML = s, a.data("jemojiContainer", i.closest(".jemoji-menu")[0]), 0 === t.innerHTML.length ? (n.close(), y = "", b = !1) : (a.data("jemojiclick").call(), n.open())
}
};
a.jemojiKeydown(function(o) {
if (27 === o.which && n.isOpen()) return n.close(), void(g = f = -1);
if (b) {
var i = a.val(),
r = e(l).find("div"),
s = r.index(e(l).find("div.active"));
if (n.isOpen()) {
if (37 === o.which || 38 === o.which) return void(d && (r.removeClass("active"), s > 0 ? e(r.get(s - 1)).addClass("active") : e(r.get(r.length - 1)).addClass("active"), k = e(l).find("div.active img").attr("alt"), -1 === g && (g = t()), -1 === f && (f = t()), i = i.slice(0, i.lastIndexOf(":", g)) + ":" + k + ": " + i.slice(f), a.val(i), f = i.indexOf(":", g) + 2, w = !0, y = "", o.preventDefault()));
if (39 === o.which || 40 === o.which || 9 === o.which) return void(d && (r.removeClass("active"), s < r.length - 1 ? e(r.get(s + 1)).addClass("active") : e(r.get(0)).addClass("active"), k = e(l).find("div.active img").attr("alt"), -1 === g && (g = t()), -1 === f && (f = t()), i = i.slice(0, i.lastIndexOf(":", g)) + ":" + k + ": " + i.slice(f), a.val(i), f = i.indexOf(":", g) + 2, w = !0, y = "", o.preventDefault()))
}
if (8 === o.which) {
y = y.slice(0, -1);
var i = a.val(),
r = e(l).find("div"),
s = r.index(e(l).find("div.active"));
8 === o.which && (y = y.slice(0, -1), j())
}
}
}), a.jemojiKeypress(function(o) {
if (13 === o.which && n.isOpen()) return a.focus(), n.close(), b = !1, y = "", g = f = -1, w || (k = e(l).find("div.active img").attr("alt"), -1 === g && (g = t()), -1 === f && (f = t()), i = a.val(), i = i.slice(0, i.lastIndexOf(":", g)) + ":" + k + ": " + i.slice(f), a.val(i)), e(r).find(".jemoji-icons").html(""), void o.preventDefault();
if (58 === o.which) return void(b || (b = !0, y = "", g = f = -1));
if (b) {
var i = a.val(),
s = e(l).find("div");
s.index(e(l).find("div.active"));
y += String.fromCharCode(o.which).toLowerCase(), j()
}
})
};
e.fn.jemoji = function(o) {
function i() {
var a = e(this),
o = a.data("jemoji");
s.push(o)
}
function n(e) {
var a = s[e];
if (!a) return console.warn("$.jemoji not instantiated yet"), console.info(this), void c.push(void 0);
if ("function" == typeof a[r]) {
var o = a[r].apply(a, l);
c.push(o)
} else console.warn("Method '" + r + "' not defined in $.jemoji")
}
function t() {
var o = e(this),
i = new a(o, _);
o.data("jemoji", i)
}
var r = "string" == typeof o ? o : void 0;
if (r) {
var s = [];
this.each(i);
var l = arguments.length > 1 ? Array.prototype.slice.call(arguments, 1) : void 0,
c = [];
return this.each(n), c.length > 1 ? c : c[0]
}
var _ = "object" == typeof o ? o : void 0;
return this.each(t)
}
}(jQuery);