Use bootstrap dropdown to render the emoji picker

css/converse.css

@@ -5227,12 +5227,14 @@ body.reset {
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
           background-color: #fff;
-          bottom: 100%;
+          bottom: 2rem;
           box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
-          font-size: 12px;
-          margin: 0;
+          margin-bottom: 0;
+          min-width: 20rem;
           position: absolute;
-          right: 0; }
+          right: 0;
+          top: auto;
+          z-index: 1000; }
           #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
             color: #578EA9; }
@@ -5244,7 +5246,7 @@ body.reset {
           #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
             /* offset-x | offset-y | blur-radius | spread-radius | color */
-            box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
+            box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); }
           #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
             overflow: hidden;
@@ -5275,6 +5277,11 @@ body.reset {
             #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
             #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
               color: #8f2831; }
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between; }
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,

css/inverse.css

@@ -5277,12 +5277,14 @@ body {
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
           background-color: #fff;
-          bottom: 100%;
+          bottom: 2rem;
           box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
-          font-size: 12px;
-          margin: 0;
+          margin-bottom: 0;
+          min-width: 20rem;
           position: absolute;
-          right: 0; }
+          right: 0;
+          top: auto;
+          z-index: 1000; }
           #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
             color: #578EA9; }
@@ -5294,7 +5296,7 @@ body {
           #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
             /* offset-x | offset-y | blur-radius | spread-radius | color */
-            box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
+            box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); }
           #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
             overflow: hidden;
@@ -5325,6 +5327,11 @@ body {
             #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
             #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
               color: #8f2831; }
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between; }
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
         #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,

sass/_chatbox.scss

@@ -375,12 +375,15 @@
                     }
                     .toolbar-menu {
                         background-color: #fff;
-                        bottom: 100%;
+                        bottom: 2rem;
                         box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
-                        font-size: 12px;
-                        margin: 0;
+                        margin-bottom: 0;
+                        min-width: 20rem;
                         position: absolute;
                         right: 0;
+                        top: auto;
+                        z-index: $zindex-dropdown;
+
                         a {
                             color: $link-color;
                         }
@@ -392,7 +395,7 @@
                             }
                             &.emoji-toolbar {
                                 /* offset-x | offset-y | blur-radius | spread-radius | color */
-                                box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4);
+                                box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4);
                             }
                             &.emoji-toolbar {
                                 overflow: hidden;
@@ -430,6 +433,14 @@
                     }
                     &.toggle-smiley {
                         .emoji-toolbar {
+                            .emoji-category-picker {
+                                ul {
+                                    display: flex;
+                                    flex-direction: row;
+                                    justify-content: space-between;
+                                }
+                            }
+
                             .emoji-category-picker,
                             .emoji-skintone-picker {
                                 li:hover {

src/converse-chatview.js

@@ -9,7 +9,6 @@
 (function (root, factory) {
     define([
             "converse-core",
-            "converse-chatboxes",
             "bootstrap",
             "emojione",
             "xss",
@@ -25,11 +24,11 @@
             "tpl!spinner",
             "tpl!spoiler_button",
             "tpl!spoiler_message",
-            "tpl!toolbar"
+            "tpl!toolbar",
+            "converse-chatboxes"
     ], factory);
 }(this, function (
             converse,
-            dummy,
             bootstrap,
             emojione,
             xss,
@@ -66,7 +65,7 @@
          *
          * NB: These plugins need to have already been loaded via require.js.
          */
-        dependencies: ["converse-chatboxes", "converse-disco"],
+        dependencies: ["converse-chatboxes", "converse-disco", "converse-dropdown"],
 
         overrides: {
             // Overrides mentioned here will be picked up by converse.js's
@@ -80,6 +79,8 @@
                 this.__super__.registerGlobalEventHandlers();
                 _converse.root.addEventListener(
                     'click', function (ev) {
+                        // FIXME
+                        return;
                         if (_.includes(ev.target.classList, 'toggle-toolbar-menu') ||
                             _.includes(ev.target.classList, 'insert-emoji')) {
                             return;
@@ -151,7 +152,7 @@
                 }
             });
 
-            _converse.EmojiPickerView = Backbone.NativeView.extend({
+            _converse.EmojiPickerView = Backbone.VDOMView.extend({
                 className: 'emoji-picker-container',
                 events: {
                     'click .emoji-category-picker li.emoji-category': 'chooseCategory',
@@ -161,11 +162,10 @@
                 initialize () {
                     this.model.on('change:current_skintone', this.render, this);
                     this.model.on('change:current_category', this.render, this);
-                    this.setScrollPosition = _.debounce(this.setScrollPosition, 50);
                 },
 
-                render () {
-                    var emojis_html = tpl_emojis(
+                toHTML () {
+                    return tpl_emojis(
                         _.extend(
                             this.model.toJSON(), {
                                 'transform': _converse.use_emojione ? emojione.shortnameToImage : emojione.shortnameToUnicode,
@@ -175,12 +175,6 @@
                                 'shouldBeHidden': this.shouldBeHidden
                             }
                         ));
-                    this.el.innerHTML = emojis_html;
-                    _.forEach(this.el.querySelectorAll('.emoji-picker'), (el) => {
-                        el.addEventListener('scroll', this.setScrollPosition.bind(this));
-                    });
-                    this.restoreScrollPosition();
-                    return this;
                 },
 
                 shouldBeHidden (shortname, current_skintone, toned_emojis) {
@@ -200,20 +194,6 @@
                     return false;
                 },
 
-                restoreScrollPosition () {
-                    const current_picker = _.difference(
-                        this.el.querySelectorAll('.emoji-picker'),
-                        this.el.querySelectorAll('.emoji-picker.hidden')
-                    );
-                    if (current_picker.length === 1 && this.model.get('scroll_position')) {
-                        current_picker[0].scrollTop = this.model.get('scroll_position');
-                    }
-                },
-
-                setScrollPosition (ev) {
-                    this.model.save('scroll_position', this.content);
-                },
-
                 chooseSkinTone (ev) {
                     ev.preventDefault();
                     ev.stopPropagation();
@@ -1005,32 +985,12 @@
                 },
 
                 toggleEmojiMenu (ev) {
+                    if (_.isUndefined(this.dropdown)) {
+                        this.renderEmojiPicker();
                         const dropdown_el = this.el.querySelector('.toggle-smiley.dropup');
-                    const dropdown = new bootstrap.Dropdown(dropdown_el, true);
-                    dropdown.toggle();
-                    return;
-
-
-                    if (u.hasClass('insert-emoji', ev.target)) {
-                        return;
-                    }
-                    if (!_.isUndefined(ev)) {
-                        ev.stopPropagation();
-                        if (ev.target.classList.contains('emoji-category-picker') ||
-                            ev.target.classList.contains('emoji-skintone-picker') ||
-                                ev.target.classList.contains('emoji-category')) {
-                            return;
-                        }
+                        this.dropdown = new bootstrap.Dropdown(dropdown_el, true);
+                        this.dropdown.toggle();
                     }
-                    const elements = _.difference(
-                        _converse.root.querySelectorAll('.toolbar-menu'),
-                        [this.emoji_picker_view.el]
-                    );
-                    u.slideInAllElements(elements)
-                        .then(_.partial(
-                                u.slideToggleElement,
-                                this.emoji_picker_view.el))
-                        .then(this.focus.bind(this));
                 },
 
                 toggleCall (ev) {
@@ -1139,7 +1099,6 @@
                     }
                     this.setChatState(_converse.ACTIVE);
                     this.scrollDown();
-                    this.renderEmojiPicker();
                     if (focus) {
                         this.focus();
                     }

src/converse-core.js

@@ -74,6 +74,7 @@
         'converse-core',
         'converse-disco',
         'converse-dragresize',
+        'converse-dropdown',
         'converse-fullscreen',
         'converse-headline',
         'converse-mam',

src/templates/chatroom_toolbar.html

 {[ if (o.use_emoji)  { ]}
-<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o dropdown dropup">
-    <a class="btn dropdown-toggle" title="{{{o.label_insert_smiley}}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a> 
-    <div class="emoji-picker dropdown-menu"
-         style="top: auto; bottom: 2em; height: 10em; overflow-y: scroll"
-        
-        ></div>
+<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o dropup">
+    <div class="emoji-picker dropdown-menu toolbar-menu"></div>
 </li>
 {[ } ]}
 {[ if (o.show_call_button)  { ]}

src/templates/emojis.html

+<div class="emoji-picker-container">
 {[ _.forEach(o.emojis_by_category, function (obj, category) { ]}
     <ul class="emoji-picker emoji-picker-{{{category}}} {[ if (o.current_category !== category) { ]} hidden {[ } ]}">
         {[ _.forEach(o.emojis_by_category[category], function (emoji) { ]}
@@ -28,3 +29,4 @@
         </ul>
     </li>
 </ul>
+</div>

src/templates/toolbar.html

 {[ if (o.use_emoji)  { ]}
-<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o dropdown">
-    <a class="btn dropdown-toggle" title="{{{o.label_insert_smiley}}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a> 
-    <span class="emoji-picker dropdown-menu"></a>
+<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o dropup">
+    <div class="emoji-picker dropdown-menu toolbar-menu"></div>
 </li>
 {[ } ]}
 {[ if (o.show_call_button)  { ]}

src/utils.js

@@ -321,6 +321,7 @@
                  steps = duration/17; // We assume 17ms per animation which is ~60FPS
             let height = original_height;
 
+            debugger;
             el.style.overflow = 'hidden';
 
             function draw () {