[3.2][BETA] Emojis

A place for Extension Authors to post and receive feedback on Extensions still in development. No Extensions within this forum should be used within a live environment!
Suggested Hosts
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

IMPORTANT: Extensions Development rules

IMPORTANT FOR NEEDED EVENTS!!!
If you need an event for your extension please read this for the steps to follow to request the event(s)
User avatar
potku
Registered User
Posts: 800
Joined: Wed Dec 22, 2004 10:26 pm
Location: Tampere, Finland
Contact:

Re: [3.2][BETA] Emojis

Post by potku » Sun Mar 18, 2018 1:16 pm

This EXT makes using emojis even easier. Thanks, posey. :)

If anyone is looking for the codes for these emojis, there is one here: https://gist.github.com/rxaviers/7360908
Potku.net

"Before I speak, I have something important to say."

- Groucho Marx

User avatar
AbaddonOrmuz
Registered User
Posts: 378
Joined: Wed Dec 25, 2013 9:06 pm
Location: /dev/null
Name: Alfredo Ramos
Contact:

Re: [3.2][BETA] Emojis

Post by AbaddonOrmuz » Mon Mar 26, 2018 6:14 pm

Mmm... I though you could add new emojis as you said in a previous post, but the extension only adds a (very handy) menu to select an emoji, it does not load the PNG images from the path, in fact it's the Emoji plugin of TextFormatter that generates the <img> using a CDN to load the images.

I noticed this when trying to add new images, they're shown in the menu but they're not replaced in the post.
A proudly user of Arch Linux :: /r/sddm_themes

tbehrens
Registered User
Posts: 3
Joined: Tue Jun 19, 2018 1:45 pm

Re: [3.2][BETA] Emojis

Post by tbehrens » Tue Jun 19, 2018 1:49 pm

Brilliant! It works well and does not conflict with simple mentions.

I have a change / enhancement request. Right now, the list of emojis is below the edit window. On a 1080p monitor, it's thus just off the edge, and won't be seen by the user immediately.

Request: Have the list of emojis display just below the current line, or maybe two below, similar to the way that simple mentions displays usernames.

Raheem
Registered User
Posts: 81
Joined: Thu Feb 09, 2017 7:02 pm
Location: Egypt
Contact:

Re: [3.2][BETA] Emojis

Post by Raheem » Sun Jul 15, 2018 10:22 pm

Good extension but there is many emojis, i was only need smilies and faces. I customize it for only 75 emoje, if someone may find this helping:

Edit the jemoji.js to:

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: "&#8592; / &#8594; para navegar",
                select: "&#8629; para seleccionar",
                esc: "esc para cerrar",
                close: "Cerrar"
            },
            en: {
                arrow: "&#8592; / &#8594; to navigate",
                select: "&#8629; 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);

User avatar
Galixte de EzCom
Registered User
Posts: 944
Joined: Mon Oct 04, 2004 11:14 pm
Location: France
Name: Raphaël M.
Contact:

FRENCH translation for the phpBB Emojis extension

Post by Galixte de EzCom » Fri Aug 03, 2018 2:45 pm

Hi,

I have opened an issue on GitHub about the compatibility with the extension Advanced BBCode Box 3: https://www.phpbb.com/customise/db/exte ... bcode_box/.
Communau EzCom
📖 « Traductions d’extensions & styles pour phpBB 3.1.x & 3.2.x ».
📋 Lists of all extensions identified for phpBB 3.1.x & 3.2.x.
📋 Lists of all styles identified for phpBB 3.1.x & 3.2.x.

Image Tu as un forum et tu veux aussi un site web ? Regarde par ici.

User avatar
Galixte de EzCom
Registered User
Posts: 944
Joined: Mon Oct 04, 2004 11:14 pm
Location: France
Name: Raphaël M.
Contact:

FRENCH translation for the phpBB Emojis extension

Post by Galixte de EzCom » Fri Aug 03, 2018 2:52 pm

Hi,

this is the FRENCH translation for the phpBB Emojis extension, available on GitHub and on the EzCom Community.
Communau EzCom
📖 « Traductions d’extensions & styles pour phpBB 3.1.x & 3.2.x ».
📋 Lists of all extensions identified for phpBB 3.1.x & 3.2.x.
📋 Lists of all styles identified for phpBB 3.1.x & 3.2.x.

Image Tu as un forum et tu veux aussi un site web ? Regarde par ici.

Post Reply

Return to “Extensions in Development”

Who is online

Users browsing this forum: Mohammed AlSarsawi, nextgen, wads24 and 23 guests