Modifying emoji-extended help!

jdk1811

Hi, I am new to nodebb and been trying to modify emoji-extended plugin, but I am kinda stuck.

I am trying to:

Make bunch of new icons (successful)
Show icons with it's original width / height (Help! If this is not possible, could anyone help me how to change the size of icon?)
When I hover over to icon, it currently shows a zoomed size of the icon, but is it possible to show a different icon(or image)?
When I type : and try to find icons, it automatically shows the available icon to write, is it possible to restrict some icons to not show up in the list?

For 2nd part, I tried modifying emoji-textcomplete.coffee, changing the value of emojSize, changing width and height, but failed.

emojiSize = 20
style = """
    <style type="text/css">
      .emoji {
        width: 20px;
        height: 20px;
        transition: z-index,margin,margin-right,width,height;
        transition-timing-function: ease-in-out;
        transition-duration: 0.2s;
        transition-delay: 0.2s;
        z-index: 0;
      }
"""

For 3rd part, I am assuming I have to change emoji-textcomplete.coffe file again:

     .emoji:hover {
        width: #{zoom}px;
        height: #{zoom}px;
        margin: #{-(zoom-emojiSize)/2}px;
        z-index: #{zoom};
      }

But not sure how to do so..

Any tips or advice are welcomed! Thanks in advance..

frissdiegurke

Hey and welcome

you'd either need to remove width and height from emoji-textcomplete.coffee and styles/style.less or set it to inherit within the former.
it would require you to write custom javascript (or coffeescript) in order to replace the src attribute onmouseover and recover it onmouseleave (for example with jQuery.hover(...)) since the zoom is achieved with CSS only currently.
If you want to remove them entirely, remove them from the emoji/!index.list file and occurrences within emoji-textcomplete.coffee. If you only want to remove them from the textcomplete, you can remove them from data.list before this line.
Sample code:

excludes = ["mushroom", "pouting_cat"]
for e in excludes
  idx = data.list.indexOf e
  data.list.splice idx, 1 if ~idx

Anyways a rework (including port to plain javascript) of emoji-extended is in progress (estimation: <=2 weeks to go)... you might rather want to wait for it with further changes.

jdk1811

@frissdiegurke Thank you for a quick reply! Absolutely love your work, and really glad you replied here!

Will the rework include 3rd part? I am assuming it wont, but I can't wait!
I'll probably working on this today, the 3rd part seems a bit challenge for me but hopefully I'll figure it out, it's a good learning experience.

bitspook

@frissdiegurke said:

Anyways a rework (including port to plain javascript) of emoji-extended is in progress (estimation: <=2 weeks to go)... you might rather want to wait for it with further changes.

+1

frissdiegurke

@jdk1811 said:

Will the rework include 3rd part?

No, this is too use-case specific for being added into main plugin.
But the 3rd point could also be achieved by a separate plugin so you don't have to fork/modify the emoji-extended anymore (which would cause trouble while updating).

The other points (customizable width/height and excluded emoji - probably also additions) are going to be implemented, although additions might come a bit later...

Thanks for appreciation

jdk1811

@frissdiegurke said:

But the 3rd point could also be achieved by a separate plugin so you don't have to fork/modify the emoji-extended anymore (which would cause trouble while updating).

I am actually trying to make it popup with different image instead of changing the image directly,
Is it still possible with serparate plugin? If so, could you give me which plugins can to do this?

I tried modifying the emoji-extended to do this, but really lost where to start haha..

frissdiegurke

I didn't meant there already is a plugin that does what you want, but rather that you could write a separated plugin.

All emoji are ensured to have the class emoji for example. So you would just need to write some client-side code like

$(document).on("click", ".emoji", function (evt) {
  var $element = $(evt.target);
  var restore = $element.data("restore-url");
  if (restore == null) {
    $element.data("restore-url", $element.attr("src"));
  } else {
    $element.removeData("restore-url");
  }
  $element.attr("src", restore != null ? restore : "https://raw.githubusercontent.com/NodeBB-Community/nbb3p-assets/master/logo-proposals/fit-in/nbb-3rd-party.png");
});

To do whatever you want with emoji images (The above toggles them with a static image on click).

jdk1811

@frissdiegurke Thank you so much! i'll play around with it

jdk1811

@frissdiegurke Thanks again! everything went well

Can I ask one more thing though,? Is it possible to delete alt on emoticons? I thought it was on parse.js, so I deleted

alt:function(match){return match},

this line, but it just broke the whole plugin

frissdiegurke

@jdk1811 said:

@frissdiegurke Thanks again! everything went well

Can I ask one more thing though,? Is it possible to delete alt on emoticons? I thought it was on parse.js, so I deleted

alt:function(match){return match},

this line, but it just broke the whole plugin

Great to hear

if you delete this line instead it should work.
The line you mention I suppose is the one within emoji-parser module (default options), not within emoji-extended plugin.