Adding a "See All" option to Emoji dropdown in Advanced Editor

demifugue

Hi all,

I've created my own emoji set using the Emoji Extender plugin, and have made a custom set to be seen from the dropdown.

Is there also a way to add a "see all" button that will open all of the available emojis in the set for people to choose from?

Any suggestions would be greatly appreciated!

R_J

There always is a solution but in some times it is harder than in others. In this case I could think of one solution, but it would require you to do some extra work with JavaScript. You would have to write a plugin which inserts you JS code.

This is the html generated by the advanced editor:

<div class="editor-dropdown editor-dropdown-default editor-action-emoji">
    <span class="editor-action icon icon-smile editor-dd-emoji" title="Emoji" data-editor="{&quot;action&quot;:&quot;emoji&quot;,&quot;value&quot;:&quot;&quot;}">
        <span class="icon icon-caret-down"></span>
    </span>
    <div class="editor-insert-dialog Flyout MenuItems">
        <span class="editor-action emoji-smile editor-dialog-fire-close emoji-wrap" data-wysihtml5-command="insertHTML" data-wysihtml5-command-value=" :) " title=":)" data-editor="{&quot;action&quot;:&quot;emoji&quot;,&quot;value&quot;:&quot;:)&quot;}">
            <img class="emoji" src="/plugins/EmojiExtender/emoji/little/smile.png" title=":)" alt=":)" srcset="/plugins/EmojiExtender/emoji/little/smile@2x.png 2x" />
        </span>
...
        <span class="editor-action emoji-naughty editor-dialog-fire-close emoji-wrap" data-wysihtml5-command="insertHTML" data-wysihtml5-command-value=" &gt;:) " title="&gt;:)" data-editor="{&quot;action&quot;:&quot;emoji&quot;,&quot;value&quot;:&quot;&gt;:)&quot;}">
            <img class="emoji" src="/plugins/EmojiExtender/emoji/little/naughty.png" title=">:)" alt=">:)" srcset="/plugins/EmojiExtender/emoji/little/naughty@2x.png 2x" />
        </span>
    </div>
</div>

You would have to create a html node with an onClick element and the "show all" text. That element must be inserted after the last child of the above div.editor-action-emoji > div.editor-insert-dialog.

The action taken when clicking that element must be either a substitution of the "show all" element by all other emojis or replacing "show all" with "show less" and appending the rest of the emojis below the "show less" button.

I can think of following difficulties here:

• css: the "show all" button might not be included into the emoji dropdown
• css: the button might be included, but destroy the layout of the dropdwon
• js: maybe the usable emojis need to exist on page load and appended emojis will not be recognized
• css: appending the emojis might destroy the styling of the dropdown

Probably you would have to go the other way around and load all emojis (by adding them to the editor array in the manifest), insert that "show all" button after the nth element and hide the rest of the emojis.

---

If you manage to do it, it would be great if you could make your plugin reusable: with the Emoji class you should be able to get all emojis and the emojis which are shown in the plugin. The diff of both results are the emojis which should be shown in the "show all" list.
In the php part of your plugin, you can pass that diff array as a variable for your JavaScript and your JavaScript can pick that array to add the emojis to the dropdown.

I don't think I could be of much help when it comes to JS or CSS, but if you have questions to the php part of the above, I could happily provide you with the required code.

R_J

I must confess that I found it an awesome idea to have something like that and I already started working on it...

R_J

Great suggestion, @demifugue. It has been fun!

If you know some JavaScript and know what could be done in order to attach that functionality also for editor windows which get attached dynamically, let me know or even better: do a PR

demifugue

Amazing, @R_J!! I am learning JavaScript now so I'm looking forward to being able to understand your code!