Remove Awesomeplete in favor of _converse.AutoComplete

CHANGES.md

@@ -4,8 +4,9 @@
 
 - Updated translation: lt
 - Upgrade to Backbone 1.4.0, Strophe 1.3.2 and Jasmine 2.99.2
-- Fix "flashing" of roster filter when you have less than 5 roster contacts.
-- Fix handling of CAPTCHAs offered by ejabberd.
+- Remove dependency on (our fork of) Awesomplete
+- Fix "flashing" of roster filter when you have less than 5 roster contacts
+- Fix handling of CAPTCHAs offered by ejabberd
 - Don't send out receipts or markers for MAM messages
 - Allow setting of debug mode via URL with `/#converse?debug=true`
 - New config setting [locked_muc_domain](https://conversejs.org/docs/html/configuration.html#locked-muc-domain)

css/converse.css

@@ -11578,15 +11578,15 @@ body.converse-fullscreen {
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
           display: var(--occupants-features-display); }
-        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
-        #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .suggestion-box ul,
+        #conversejs .chatroom .box-flyout .chatroom-body .occupants .suggestion-box ul {
           padding: 0; }
-          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li,
-          #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li {
-            padding: .5em; }
+          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .suggestion-box ul li,
+          #conversejs .chatroom .box-flyout .chatroom-body .occupants .suggestion-box ul li {
+            padding: 0.5em; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants ul {
-          padding: 0.5em 0 0 0;
+          padding: 0;
           margin-bottom: 0.5em;
           overflow-x: hidden;
           overflow-y: auto;
@@ -11680,6 +11680,9 @@ body.converse-fullscreen {
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary {
           background-color: var(--chatroom-head-button-color); }
+  #conversejs.converse-embedded .chatroom .sendXMPPMessage .suggestion-box__results--above,
+  #conversejs .chatroom .sendXMPPMessage .suggestion-box__results--above {
+    bottom: 4.5em; }
   #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar,
   #conversejs .chatroom .sendXMPPMessage .chat-toolbar {
     background-color: white;
@@ -11708,14 +11711,11 @@ body.converse-fullscreen {
   #conversejs.converse-embedded .chatroom .sendXMPPMessage .send-button,
   #conversejs .chatroom .sendXMPPMessage .send-button {
     background-color: var(--message-input-color); }
-  #conversejs.converse-embedded .chatroom .room-invite,
-  #conversejs .chatroom .room-invite {
-    padding-bottom: 1em; }
-    #conversejs.converse-embedded .chatroom .room-invite .invited-contact,
-    #conversejs .chatroom .room-invite .invited-contact {
-      margin: -1px 0 0 -1px;
-      width: 100%;
-      border: 1px solid #999; }
+  #conversejs.converse-embedded .chatroom .room-invite .invited-contact,
+  #conversejs .chatroom .room-invite .invited-contact {
+    margin: -1px 0 0 -1px;
+    width: 100%;
+    border: 1px solid #999; }
 
 /* ******************* Overlay  styles *************************** */
 #conversejs.converse-overlayed .chatbox.chatroom {
@@ -12131,23 +12131,17 @@ body.converse-fullscreen {
   position: absolute;
   clip: rect(0, 0, 0, 0); }
 
-#conversejs .form-group .suggestion-box,
-#conversejs .form-group .awesomplete {
+#conversejs .form-group .suggestion-box {
   width: 100%; }
 
-#conversejs .suggestion-box,
-#conversejs .awesomplete {
+#conversejs .suggestion-box {
   position: relative; }
-  #conversejs .suggestion-box mark,
-  #conversejs .awesomplete mark {
+  #conversejs .suggestion-box mark {
     background: var(--completion-light-color); }
-  #conversejs .suggestion-box > input,
-  #conversejs .awesomplete > input {
+  #conversejs .suggestion-box > input {
     display: block; }
   #conversejs .suggestion-box .suggestion-box__results,
-  #conversejs .suggestion-box > ul,
-  #conversejs .awesomplete .suggestion-box__results,
-  #conversejs .awesomplete > ul {
+  #conversejs .suggestion-box > ul {
     position: absolute;
     left: 0;
     right: 0;
@@ -12164,9 +12158,7 @@ body.converse-fullscreen {
     box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.1);
     text-shadow: none; }
     #conversejs .suggestion-box .suggestion-box__results:before,
-    #conversejs .suggestion-box > ul:before,
-    #conversejs .awesomplete .suggestion-box__results:before,
-    #conversejs .awesomplete > ul:before {
+    #conversejs .suggestion-box > ul:before {
       content: "";
       position: absolute;
       top: -.43em;
@@ -12180,24 +12172,21 @@ body.converse-fullscreen {
       border-bottom: 0;
       -webkit-transform: rotate(45deg);
       transform: rotate(45deg);
-      z-index: 1; }
+      z-index: -1; }
     #conversejs .suggestion-box .suggestion-box__results > li,
-    #conversejs .suggestion-box > ul > li,
-    #conversejs .awesomplete .suggestion-box__results > li,
-    #conversejs .awesomplete > ul > li {
+    #conversejs .suggestion-box > ul > li {
       text-overflow: ellipsis;
       overflow-x: hidden;
       position: relative;
       cursor: pointer;
       padding: 1em; }
-  #conversejs .suggestion-box .suggestion-box__results--above,
-  #conversejs .awesomplete .suggestion-box__results--above {
+  #conversejs .suggestion-box .suggestion-box__results--below {
+    top: 2em; }
+  #conversejs .suggestion-box .suggestion-box__results--above {
     bottom: 4.5em; }
-    #conversejs .suggestion-box .suggestion-box__results--above:before,
-    #conversejs .awesomplete .suggestion-box__results--above:before {
+    #conversejs .suggestion-box .suggestion-box__results--above:before {
       display: none; }
-    #conversejs .suggestion-box .suggestion-box__results--above:after,
-    #conversejs .awesomplete .suggestion-box__results--above:after {
+    #conversejs .suggestion-box .suggestion-box__results--above:after {
       z-index: -1;
       content: "";
       position: absolute;
@@ -12214,37 +12203,29 @@ body.converse-fullscreen {
       transform: rotate(45deg); }
 
 #conversejs .suggestion-box > ul[hidden],
-#conversejs .suggestion-box > ul:empty,
-#conversejs div.awesomplete > ul[hidden],
-#conversejs div.awesomplete > ul:empty {
+#conversejs .suggestion-box > ul:empty {
   display: none; }
 
 @supports (transform: scale(0)) {
-  #conversejs .suggestion-box > ul,
-  #conversejs div.awesomplete > ul {
+  #conversejs .suggestion-box > ul {
     transition: 0.3s cubic-bezier(0.4, 0.2, 0.5, 1.4);
     transform-origin: 1.43em -.43em; }
   #conversejs .suggestion-box > ul[hidden],
-  #conversejs .suggestion-box > ul:empty,
-  #conversejs div.awesomplete > ul[hidden],
-  #conversejs div.awesomplete > ul:empty {
+  #conversejs .suggestion-box > ul:empty {
     opacity: 0;
     transform: scale(0);
     display: block;
     transition-timing-function: ease; } }
 
-#conversejs .suggestion-box > ul > li[aria-selected="true"],
-#conversejs div.awesomplete > ul > li[aria-selected="true"] {
+#conversejs .suggestion-box > ul > li[aria-selected="true"] {
   background: var(--completion-dark-color);
   color: var(--inverse-link-color); }
 
-#conversejs .suggestion-box li:hover mark,
-#conversejs div.awesomplete li:hover mark {
+#conversejs .suggestion-box li:hover mark {
   background: var(--completion-light-color);
   color: var(--inverse-link-color); }
 
-#conversejs .suggestion-box li[aria-selected="true"] mark,
-#conversejs div.awesomplete li[aria-selected="true"] mark {
+#conversejs .suggestion-box li[aria-selected="true"] mark {
   background: var(--completion-normal-color);
   color: inherit; }
 

package-lock.json

@@ -2514,12 +2514,6 @@
       "integrity": "sha1-ri1acpR38onWDdf5amMUoi3Wwio=",
       "dev": true
     },
-    "awesomplete-avoid-xss": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/awesomplete-avoid-xss/-/awesomplete-avoid-xss-1.1.2.tgz",
-      "integrity": "sha1-+f4vrzmNZNniQYMlC3xKMTGcfGQ=",
-      "dev": true
-    },
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",

package.json

@@ -37,7 +37,6 @@
     "@babel/preset-env": "^7.2.3",
     "@converse/headless": "^4.0.2",
     "@fortawesome/fontawesome-free": "5.3.1",
-    "awesomplete-avoid-xss": "^1.1.2",
     "babel-loader": "^8.0.4",
     "backbone.nativeview": "conversejs/Backbone.NativeView#5997c8197ca594e6b8469447f28310c78bd1d95e",
     "backbone.overview": "^1.0.2",

sass/_awesomplete.scss → sass/_autocomplete.scss

@@ -7,14 +7,12 @@
     }
 
     .form-group {
-        .suggestion-box,
-        .awesomplete {
+        .suggestion-box {
             width: 100%;
         }
     }
 
-    .suggestion-box,
-    .awesomplete {
+    .suggestion-box {
         position: relative;
         mark {
             background: var(--completion-light-color);
@@ -39,7 +37,7 @@
                 border-bottom: 0;
                 -webkit-transform: rotate(45deg);
                 transform: rotate(45deg);
-                z-index: 1;
+                z-index: -1;
             }
             position: absolute;
             left: 0;
@@ -65,6 +63,9 @@
                 padding: 1em;
             }
         }
+        .suggestion-box__results--below {
+            top: 2em;
+        }
         .suggestion-box__results--above {
             bottom: 4.5em;
             &:before {
@@ -90,23 +91,18 @@
     }
 
     .suggestion-box > ul[hidden],
-    .suggestion-box > ul:empty,
-    div.awesomplete > ul[hidden],
-    div.awesomplete > ul:empty {
+    .suggestion-box > ul:empty {
         display: none;
     }
 
     @supports (transform: scale(0)) {
-        .suggestion-box > ul,
-        div.awesomplete > ul {
+        .suggestion-box > ul {
             transition: .3s cubic-bezier(.4,.2,.5,1.4);
             transform-origin: 1.43em -.43em;
         }
         
         .suggestion-box > ul[hidden],
-        .suggestion-box > ul:empty,
-        div.awesomplete > ul[hidden],
-        div.awesomplete > ul:empty {
+        .suggestion-box > ul:empty {
             opacity: 0;
             transform: scale(0);
             display: block;
@@ -114,20 +110,17 @@
         }
     }
     
-    .suggestion-box > ul > li[aria-selected="true"],
-    div.awesomplete > ul > li[aria-selected="true"] {
+    .suggestion-box > ul > li[aria-selected="true"] {
         background: var(--completion-dark-color);
         color: var(--inverse-link-color);
     }
     
-    .suggestion-box li:hover mark,
-    div.awesomplete li:hover mark {
+    .suggestion-box li:hover mark {
         background: var(--completion-light-color);
         color: var(--inverse-link-color);
     }
     
-    .suggestion-box li[aria-selected="true"] mark,
-    div.awesomplete li[aria-selected="true"] mark {
+    .suggestion-box li[aria-selected="true"] mark {
         background: var(--completion-normal-color);
         color: inherit;
     }

sass/_chatrooms.scss

@@ -191,16 +191,16 @@
                     .chatroom-features {
                         display: var(--occupants-features-display);
                     }
-                    .awesomplete {
+                    .suggestion-box{
                         ul {
                             padding: 0;
                             li {
-                                padding: .5em;
+                                padding: 0.5em;
                             }
                         }
                     }
                     ul {
-                        padding: 0.5em 0 0 0;
+                        padding: 0;
                         margin-bottom: 0.5em;
                         overflow-x: hidden;
                         overflow-y: auto;
@@ -307,6 +307,10 @@
         }
 
         .sendXMPPMessage {
+
+            .suggestion-box__results--above {
+                bottom: 4.5em;
+            }
             .chat-toolbar {
                 background-color: white;
                 border-top: var(--message-input-border-top);
@@ -332,7 +336,6 @@
         }
 
         .room-invite {
-            padding-bottom: 1em;
             .invited-contact {
                 margin: -1px 0 0 -1px;
                 width: 100%;

sass/converse.scss

@@ -53,5 +53,5 @@
 @import "messages";
 @import "minimized_chats";
 @import "bookmarks";
-@import "awesomplete";
+@import "autocomplete";
 @import "embedded";

spec/autocomplete.js

@@ -51,10 +51,9 @@
             view.keyUp(at_event);
 
             expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(3);
-            expect(view.el.querySelector('.suggestion-box__results li[aria-selected="true"]').textContent).toBe('tom');
-            expect(view.el.querySelector('.suggestion-box__results li:first-child').textContent).toBe('tom');
-            expect(view.el.querySelector('.suggestion-box__results li:nth-child(2)').textContent).toBe('dick');
-            expect(view.el.querySelector('.suggestion-box__results li:nth-child(3)').textContent).toBe('harry');
+            expect(view.el.querySelector('.suggestion-box__results li:first-child').textContent).toBe('dick');
+            expect(view.el.querySelector('.suggestion-box__results li:nth-child(2)').textContent).toBe('harry');
+            expect(view.el.querySelector('.suggestion-box__results li:nth-child(3)').textContent).toBe('tom');
             done();
         }));
 

spec/muc.js

@@ -1756,10 +1756,10 @@
                 spyOn(_converse.connection, 'send').and.callFake(function (stanza) {
                     sent_stanza = stanza;
                 });
-                const hint = input.nextSibling.firstElementChild;
+                const results_el =  view.occupantsview.el.querySelector('.suggestion-box__results');
+                const hint = results_el.firstElementChild;
                 expect(input.value).toBe('Felix');
                 expect(hint.textContent).toBe('Felix Amsel');
-                expect(input.nextSibling.childNodes.length).toBe(1);
 
                 evt = new Event('mousedown', {'bubbles': true});
                 evt.button = 0; // For some reason awesomplete wants this

src/converse-muc-views.js

@@ -10,7 +10,6 @@ import "converse-modal";
 import "backbone.overview/backbone.orderedlistview";
 import "backbone.overview/backbone.overview";
 import "backbone.vdomview";
-import Awesomplete from "awesomplete";
 import _FormData from "formdata-polyfill";
 import converse from "@converse/headless/converse-core";
 import muc_utils from "@converse/headless/utils/muc";
@@ -599,7 +598,7 @@ converse.plugins.add('converse-muc-views', {
             },
 
             initMentionAutoComplete () {
-                this.auto_complete = new _converse.AutoComplete(this.el, {
+                this.mention_auto_complete = new _converse.AutoComplete(this.el, {
                     'auto_first': true,
                     'auto_evaluate': false,
                     'min_chars': 1,
@@ -609,18 +608,18 @@ converse.plugins.add('converse-muc-views', {
                     'ac_triggers': ["Tab", "@"],
                     'include_triggers': []
                 });
-                this.auto_complete.on('suggestion-box-selectcomplete', () => (this.auto_completing = false));
+                this.mention_auto_complete.on('suggestion-box-selectcomplete', () => (this.auto_completing = false));
             },
 
             keyPressed (ev) {
-                if (this.auto_complete.keyPressed(ev)) {
+                if (this.mention_auto_complete.keyPressed(ev)) {
                     return;
                 }
                 return _converse.ChatBoxView.prototype.keyPressed.apply(this, arguments);
             },
 
             keyUp (ev) {
-                this.auto_complete.evaluate(ev);
+                this.mention_auto_complete.evaluate(ev);
             },
 
             showRoomDetailsModal (ev) {
@@ -1905,17 +1904,15 @@ converse.plugins.add('converse-muc-views', {
                     })
                 );
                 if (_converse.allow_muc_invitations) {
-                    _converse.api.waitUntil('rosterContactsFetched').then(
-                        this.renderInviteWidget.bind(this)
-                    );
+                    _converse.api.waitUntil('rosterContactsFetched').then(() => this.renderInviteWidget());
                 }
                 return this.renderRoomFeatures();
             },
 
             renderInviteWidget () {
-                const form = this.el.querySelector('form.room-invite');
+                const widget = this.el.querySelector('.room-invite');
                 if (this.shouldInviteWidgetBeShown()) {
-                    if (_.isNull(form)) {
+                    if (_.isNull(widget)) {
                         const heading = this.el.querySelector('.occupants-heading');
                         heading.insertAdjacentHTML(
                             'afterend',
@@ -1926,8 +1923,8 @@ converse.plugins.add('converse-muc-views', {
                         );
                         this.initInviteWidget();
                     }
-                } else if (!_.isNull(form)) {
-                    form.remove();
+                } else if (!_.isNull(widget)) {
+                    widget.remove();
                 }
                 return this;
             },
@@ -1964,12 +1961,13 @@ converse.plugins.add('converse-muc-views', {
                 if (reason !== null) {
                     this.chatroomview.model.directInvite(suggestion.text.value, reason);
                 }
-                const form = suggestion.target.form,
-                      error = form.querySelector('.pure-form-message.error');
+                const form = this.el.querySelector('.room-invite form'),
+                      input = form.querySelector('.invited-contact'),
+                      error = form.querySelector('.error');
                 if (!_.isNull(error)) {
                     error.parentNode.removeChild(error);
                 }
-                suggestion.target.value = '';
+                input.value = '';
             },
 
             inviteFormSubmitted (evt) {
@@ -2000,22 +1998,26 @@ converse.plugins.add('converse-muc-views', {
             },
 
             initInviteWidget () {
-                const form = this.el.querySelector('form.room-invite');
+                const form = this.el.querySelector('.room-invite form');
                 if (_.isNull(form)) {
                     return;
                 }
                 form.addEventListener('submit', this.inviteFormSubmitted.bind(this), false);
-                const el = this.el.querySelector('input.invited-contact');
-                const list = _converse.roster.map(function (item) {
-                        const label = item.get('fullname') || item.get('jid');
-                        return {'label': label, 'value':item.get('jid')};
-                    });
-                const awesomplete = new Awesomplete(el, {
-                    'minChars': 1,
+                const list = _converse.roster.map(i => ({'label': i.get('fullname') || i.get('jid'), 'value': i.get('jid')}));
+                const el = this.el.querySelector('.suggestion-box').parentElement;
+
+                if (this.invite_auto_complete) {
+                    this.invite_auto_complete.destroy();
+                }
+                this.invite_auto_complete = new _converse.AutoComplete(el, {
+                    'min_chars': 1,
                     'list': list
                 });
-                el.addEventListener('awesomplete-selectcomplete',
-                    this.promptForInvite.bind(this));
+                this.invite_auto_complete.on('suggestion-box-selectcomplete', ev => this.promptForInvite(ev));
+                this.invite_auto_complete.ul.setAttribute(
+                    'style',
+                    `max-height: calc(${this.el.offsetHeight}px - 80px);`
+                );
             }
         });
 

src/templates/chatroom_invite.html

@@ -1,6 +1,12 @@
-<form class="room-invite">
-    {[ if (o.error_message) { ]}
-        <span class="error">{{{o.error_message}}}</span>
-    {[ } ]}
-    <input class="form-control invited-contact" placeholder="{{{o.label_invitation}}}" type="text"/>
-</form>
+<div class="suggestion-box room-invite">
+    <form>
+        {[ if (o.error_message) { ]} <span class="error">{{{o.error_message}}}</span> {[ } ]}
+        <div class="form-group">
+            <input class="form-control invited-contact suggestion-box__input"
+                   placeholder="{{{o.label_invitation}}}"
+                   type="text"/>
+            <span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
+        </div>
+    </form>
+    <ul class="suggestion-box__results suggestion-box__results--below" hidden=""></ul>
+</div>