Skip to content

C
converse.js
Commit b726a235 authored by JC Brand's avatar JC Brand
Browse files
Options

Remove Awesomeplete in favor of _converse.AutoComplete

parent 8d385487
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 232 additions and 782 deletions
CHANGES.md
View file @ b726a235
...@@ -4,8 +4,9 @@ ...@@ -4,8 +4,9 @@
- Updated translation: lt - Updated translation: lt
- Upgrade to Backbone 1.4.0, Strophe 1.3.2 and Jasmine 2.99.2 - 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. - Remove dependency on (our fork of) Awesomplete
- Fix handling of CAPTCHAs offered by ejabberd. - 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 - Don't send out receipts or markers for MAM messages
- Allow setting of debug mode via URL with `/#converse?debug=true` - 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) - New config setting [locked_muc_domain](https://conversejs.org/docs/html/configuration.html#locked-muc-domain)
......
css/converse.css
View file @ b726a235
...@@ -11578,15 +11578,15 @@ body.converse-fullscreen { ...@@ -11578,15 +11578,15 @@ body.converse-fullscreen {
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features { #conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
display: var(--occupants-features-display); } display: var(--occupants-features-display); }
#conversejs.converse-embedded .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 .awesomplete ul { #conversejs .chatroom .box-flyout .chatroom-body .occupants .suggestion-box ul {
padding: 0; } padding: 0; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .suggestion-box ul li,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li { #conversejs .chatroom .box-flyout .chatroom-body .occupants .suggestion-box ul li {
padding: .5em; } padding: 0.5em; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul,
#conversejs .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; margin-bottom: 0.5em;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
...@@ -11680,6 +11680,9 @@ body.converse-fullscreen { ...@@ -11680,6 +11680,9 @@ body.converse-fullscreen {
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
#conversejs .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); } 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.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar,
#conversejs .chatroom .sendXMPPMessage .chat-toolbar { #conversejs .chatroom .sendXMPPMessage .chat-toolbar {
background-color: white; background-color: white;
...@@ -11708,14 +11711,11 @@ body.converse-fullscreen { ...@@ -11708,14 +11711,11 @@ body.converse-fullscreen {
#conversejs.converse-embedded .chatroom .sendXMPPMessage .send-button, #conversejs.converse-embedded .chatroom .sendXMPPMessage .send-button,
#conversejs .chatroom .sendXMPPMessage .send-button { #conversejs .chatroom .sendXMPPMessage .send-button {
background-color: var(--message-input-color); } background-color: var(--message-input-color); }
#conversejs.converse-embedded .chatroom .room-invite, #conversejs.converse-embedded .chatroom .room-invite .invited-contact,
#conversejs .chatroom .room-invite { #conversejs .chatroom .room-invite .invited-contact {
padding-bottom: 1em; } margin: -1px 0 0 -1px;
#conversejs.converse-embedded .chatroom .room-invite .invited-contact, width: 100%;
#conversejs .chatroom .room-invite .invited-contact { border: 1px solid #999; }
margin: -1px 0 0 -1px;
width: 100%;
border: 1px solid #999; }
/* ******************* Overlay styles *************************** */ /* ******************* Overlay styles *************************** */
#conversejs.converse-overlayed .chatbox.chatroom { #conversejs.converse-overlayed .chatbox.chatroom {
...@@ -12131,23 +12131,17 @@ body.converse-fullscreen { ...@@ -12131,23 +12131,17 @@ body.converse-fullscreen {
position: absolute; position: absolute;
clip: rect(0, 0, 0, 0); } clip: rect(0, 0, 0, 0); }
#conversejs .form-group .suggestion-box, #conversejs .form-group .suggestion-box {
#conversejs .form-group .awesomplete {
width: 100%; } width: 100%; }
#conversejs .suggestion-box, #conversejs .suggestion-box {
#conversejs .awesomplete {
position: relative; } position: relative; }
#conversejs .suggestion-box mark, #conversejs .suggestion-box mark {
#conversejs .awesomplete mark {
background: var(--completion-light-color); } background: var(--completion-light-color); }
#conversejs .suggestion-box > input, #conversejs .suggestion-box > input {
#conversejs .awesomplete > input {
display: block; } display: block; }
#conversejs .suggestion-box .suggestion-box__results, #conversejs .suggestion-box .suggestion-box__results,
#conversejs .suggestion-box > ul, #conversejs .suggestion-box > ul {
#conversejs .awesomplete .suggestion-box__results,
#conversejs .awesomplete > ul {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
...@@ -12164,9 +12158,7 @@ body.converse-fullscreen { ...@@ -12164,9 +12158,7 @@ body.converse-fullscreen {
box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.1); box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.1);
text-shadow: none; } text-shadow: none; }
#conversejs .suggestion-box .suggestion-box__results:before, #conversejs .suggestion-box .suggestion-box__results:before,
#conversejs .suggestion-box > ul:before, #conversejs .suggestion-box > ul:before {
#conversejs .awesomplete .suggestion-box__results:before,
#conversejs .awesomplete > ul:before {
content: ""; content: "";
position: absolute; position: absolute;
top: -.43em; top: -.43em;
...@@ -12180,24 +12172,21 @@ body.converse-fullscreen { ...@@ -12180,24 +12172,21 @@ body.converse-fullscreen {
border-bottom: 0; border-bottom: 0;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
z-index: 1; } z-index: -1; }
#conversejs .suggestion-box .suggestion-box__results > li, #conversejs .suggestion-box .suggestion-box__results > li,
#conversejs .suggestion-box > ul > li, #conversejs .suggestion-box > ul > li {
#conversejs .awesomplete .suggestion-box__results > li,
#conversejs .awesomplete > ul > li {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
padding: 1em; } padding: 1em; }
#conversejs .suggestion-box .suggestion-box__results--above, #conversejs .suggestion-box .suggestion-box__results--below {
#conversejs .awesomplete .suggestion-box__results--above { top: 2em; }
#conversejs .suggestion-box .suggestion-box__results--above {
bottom: 4.5em; } bottom: 4.5em; }
#conversejs .suggestion-box .suggestion-box__results--above:before, #conversejs .suggestion-box .suggestion-box__results--above:before {
#conversejs .awesomplete .suggestion-box__results--above:before {
display: none; } display: none; }
#conversejs .suggestion-box .suggestion-box__results--above:after, #conversejs .suggestion-box .suggestion-box__results--above:after {
#conversejs .awesomplete .suggestion-box__results--above:after {
z-index: -1; z-index: -1;
content: ""; content: "";
position: absolute; position: absolute;
...@@ -12214,37 +12203,29 @@ body.converse-fullscreen { ...@@ -12214,37 +12203,29 @@ body.converse-fullscreen {
transform: rotate(45deg); } transform: rotate(45deg); }
#conversejs .suggestion-box > ul[hidden], #conversejs .suggestion-box > ul[hidden],
#conversejs .suggestion-box > ul:empty, #conversejs .suggestion-box > ul:empty {
#conversejs div.awesomplete > ul[hidden],
#conversejs div.awesomplete > ul:empty {
display: none; } display: none; }
@supports (transform: scale(0)) { @supports (transform: scale(0)) {
#conversejs .suggestion-box > ul, #conversejs .suggestion-box > ul {
#conversejs div.awesomplete > ul {
transition: 0.3s cubic-bezier(0.4, 0.2, 0.5, 1.4); transition: 0.3s cubic-bezier(0.4, 0.2, 0.5, 1.4);
transform-origin: 1.43em -.43em; } transform-origin: 1.43em -.43em; }
#conversejs .suggestion-box > ul[hidden], #conversejs .suggestion-box > ul[hidden],
#conversejs .suggestion-box > ul:empty, #conversejs .suggestion-box > ul:empty {
#conversejs div.awesomplete > ul[hidden],
#conversejs div.awesomplete > ul:empty {
opacity: 0; opacity: 0;
transform: scale(0); transform: scale(0);
display: block; display: block;
transition-timing-function: ease; } } transition-timing-function: ease; } }
#conversejs .suggestion-box > ul > li[aria-selected="true"], #conversejs .suggestion-box > ul > li[aria-selected="true"] {
#conversejs div.awesomplete > ul > li[aria-selected="true"] {
background: var(--completion-dark-color); background: var(--completion-dark-color);
color: var(--inverse-link-color); } color: var(--inverse-link-color); }
#conversejs .suggestion-box li:hover mark, #conversejs .suggestion-box li:hover mark {
#conversejs div.awesomplete li:hover mark {
background: var(--completion-light-color); background: var(--completion-light-color);
color: var(--inverse-link-color); } color: var(--inverse-link-color); }
#conversejs .suggestion-box li[aria-selected="true"] mark, #conversejs .suggestion-box li[aria-selected="true"] mark {
#conversejs div.awesomplete li[aria-selected="true"] mark {
background: var(--completion-normal-color); background: var(--completion-normal-color);
color: inherit; } color: inherit; }
......
dist/converse.js
View file @ b726a235
This diff is collapsed.
package-lock.json
View file @ b726a235
...@@ -2514,12 +2514,6 @@ ...@@ -2514,12 +2514,6 @@
"integrity": "sha1-ri1acpR38onWDdf5amMUoi3Wwio=", "integrity": "sha1-ri1acpR38onWDdf5amMUoi3Wwio=",
"dev": true "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": { "aws-sign2": {
"version": "0.7.0", "version": "0.7.0",
"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz", "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
......
sass/_awesomplete.scss → sass/_autocomplete.scss
View file @ b726a235
...@@ -7,14 +7,12 @@ ...@@ -7,14 +7,12 @@
} }
.form-group { .form-group {
.suggestion-box, .suggestion-box {
.awesomplete {
width: 100%; width: 100%;
} }
} }
.suggestion-box, .suggestion-box {
.awesomplete {
position: relative; position: relative;
mark { mark {
background: var(--completion-light-color); background: var(--completion-light-color);
...@@ -39,7 +37,7 @@ ...@@ -39,7 +37,7 @@
border-bottom: 0; border-bottom: 0;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
z-index: 1; z-index: -1;
} }
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -65,6 +63,9 @@ ...@@ -65,6 +63,9 @@
padding: 1em; padding: 1em;
} }
} }
.suggestion-box__results--below {
top: 2em;
}
.suggestion-box__results--above { .suggestion-box__results--above {
bottom: 4.5em; bottom: 4.5em;
&:before { &:before {
...@@ -90,23 +91,18 @@ ...@@ -90,23 +91,18 @@
} }
.suggestion-box > ul[hidden], .suggestion-box > ul[hidden],
.suggestion-box > ul:empty, .suggestion-box > ul:empty {
div.awesomplete > ul[hidden],
div.awesomplete > ul:empty {
display: none; display: none;
} }
@supports (transform: scale(0)) { @supports (transform: scale(0)) {
.suggestion-box > ul, .suggestion-box > ul {
div.awesomplete > ul {
transition: .3s cubic-bezier(.4,.2,.5,1.4); transition: .3s cubic-bezier(.4,.2,.5,1.4);
transform-origin: 1.43em -.43em; transform-origin: 1.43em -.43em;
} }
.suggestion-box > ul[hidden], .suggestion-box > ul[hidden],
.suggestion-box > ul:empty, .suggestion-box > ul:empty {
div.awesomplete > ul[hidden],
div.awesomplete > ul:empty {
opacity: 0; opacity: 0;
transform: scale(0); transform: scale(0);
display: block; display: block;
...@@ -114,20 +110,17 @@ ...@@ -114,20 +110,17 @@
} }
} }
.suggestion-box > ul > li[aria-selected="true"], .suggestion-box > ul > li[aria-selected="true"] {
div.awesomplete > ul > li[aria-selected="true"] {
background: var(--completion-dark-color); background: var(--completion-dark-color);
color: var(--inverse-link-color); color: var(--inverse-link-color);
} }
.suggestion-box li:hover mark, .suggestion-box li:hover mark {
div.awesomplete li:hover mark {
background: var(--completion-light-color); background: var(--completion-light-color);
color: var(--inverse-link-color); color: var(--inverse-link-color);
} }
.suggestion-box li[aria-selected="true"] mark, .suggestion-box li[aria-selected="true"] mark {
div.awesomplete li[aria-selected="true"] mark {
background: var(--completion-normal-color); background: var(--completion-normal-color);
color: inherit; color: inherit;
} }
......
sass/_chatrooms.scss
View file @ b726a235
...@@ -191,16 +191,16 @@ ...@@ -191,16 +191,16 @@
.chatroom-features { .chatroom-features {
display: var(--occupants-features-display); display: var(--occupants-features-display);
} }
.awesomplete { .suggestion-box{
ul { ul {
padding: 0; padding: 0;
li { li {
padding: .5em; padding: 0.5em;
} }
} }
} }
ul { ul {
padding: 0.5em 0 0 0; padding: 0;
margin-bottom: 0.5em; margin-bottom: 0.5em;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
...@@ -307,6 +307,10 @@ ...@@ -307,6 +307,10 @@
} }
.sendXMPPMessage { .sendXMPPMessage {
.suggestion-box__results--above {
bottom: 4.5em;
}
.chat-toolbar { .chat-toolbar {
background-color: white; background-color: white;
border-top: var(--message-input-border-top); border-top: var(--message-input-border-top);
...@@ -332,7 +336,6 @@ ...@@ -332,7 +336,6 @@
} }
.room-invite { .room-invite {
padding-bottom: 1em;
.invited-contact { .invited-contact {
margin: -1px 0 0 -1px; margin: -1px 0 0 -1px;
width: 100%; width: 100%;
......
sass/converse.scss
View file @ b726a235
...@@ -53,5 +53,5 @@ ...@@ -53,5 +53,5 @@
@import "messages"; @import "messages";
@import "minimized_chats"; @import "minimized_chats";
@import "bookmarks"; @import "bookmarks";
@import "awesomplete"; @import "autocomplete";
@import "embedded"; @import "embedded";
spec/autocomplete.js
View file @ b726a235
...@@ -51,10 +51,9 @@ ...@@ -51,10 +51,9 @@
view.keyUp(at_event); view.keyUp(at_event);
expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(3); 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('dick');
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('harry');
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('tom');
expect(view.el.querySelector('.suggestion-box__results li:nth-child(3)').textContent).toBe('harry');
done(); done();
})); }));
......
spec/muc.js
View file @ b726a235
...@@ -1756,10 +1756,10 @@ ...@@ -1756,10 +1756,10 @@
spyOn(_converse.connection, 'send').and.callFake(function (stanza) { spyOn(_converse.connection, 'send').and.callFake(function (stanza) {
sent_stanza = 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(input.value).toBe('Felix');
expect(hint.textContent).toBe('Felix Amsel'); expect(hint.textContent).toBe('Felix Amsel');
expect(input.nextSibling.childNodes.length).toBe(1);
evt = new Event('mousedown', {'bubbles': true}); evt = new Event('mousedown', {'bubbles': true});
evt.button = 0; // For some reason awesomplete wants this evt.button = 0; // For some reason awesomplete wants this
......
src/converse-muc-views.js
View file @ b726a235
...@@ -10,7 +10,6 @@ import "converse-modal"; ...@@ -10,7 +10,6 @@ import "converse-modal";
import "backbone.overview/backbone.orderedlistview"; import "backbone.overview/backbone.orderedlistview";
import "backbone.overview/backbone.overview"; import "backbone.overview/backbone.overview";
import "backbone.vdomview"; import "backbone.vdomview";
import Awesomplete from "awesomplete";
import _FormData from "formdata-polyfill"; import _FormData from "formdata-polyfill";
import converse from "@converse/headless/converse-core"; import converse from "@converse/headless/converse-core";
import muc_utils from "@converse/headless/utils/muc"; import muc_utils from "@converse/headless/utils/muc";
...@@ -599,7 +598,7 @@ converse.plugins.add('converse-muc-views', { ...@@ -599,7 +598,7 @@ converse.plugins.add('converse-muc-views', {
}, },
initMentionAutoComplete () { initMentionAutoComplete () {
this.auto_complete = new _converse.AutoComplete(this.el, { this.mention_auto_complete = new _converse.AutoComplete(this.el, {
'auto_first': true, 'auto_first': true,
'auto_evaluate': false, 'auto_evaluate': false,
'min_chars': 1, 'min_chars': 1,
...@@ -609,18 +608,18 @@ converse.plugins.add('converse-muc-views', { ...@@ -609,18 +608,18 @@ converse.plugins.add('converse-muc-views', {
'ac_triggers': ["Tab", "@"], 'ac_triggers': ["Tab", "@"],
'include_triggers': [] '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) { keyPressed (ev) {
if (this.auto_complete.keyPressed(ev)) { if (this.mention_auto_complete.keyPressed(ev)) {
return; return;
} }
return _converse.ChatBoxView.prototype.keyPressed.apply(this, arguments); return _converse.ChatBoxView.prototype.keyPressed.apply(this, arguments);
}, },
keyUp (ev) { keyUp (ev) {
this.auto_complete.evaluate(ev); this.mention_auto_complete.evaluate(ev);
}, },
showRoomDetailsModal (ev) { showRoomDetailsModal (ev) {
...@@ -1905,17 +1904,15 @@ converse.plugins.add('converse-muc-views', { ...@@ -1905,17 +1904,15 @@ converse.plugins.add('converse-muc-views', {
}) })
); );
if (_converse.allow_muc_invitations) { if (_converse.allow_muc_invitations) {
_converse.api.waitUntil('rosterContactsFetched').then( _converse.api.waitUntil('rosterContactsFetched').then(() => this.renderInviteWidget());
this.renderInviteWidget.bind(this)
);
} }
return this.renderRoomFeatures(); return this.renderRoomFeatures();
}, },
renderInviteWidget () { renderInviteWidget () {
const form = this.el.querySelector('form.room-invite'); const widget = this.el.querySelector('.room-invite');
if (this.shouldInviteWidgetBeShown()) { if (this.shouldInviteWidgetBeShown()) {
if (_.isNull(form)) { if (_.isNull(widget)) {
const heading = this.el.querySelector('.occupants-heading'); const heading = this.el.querySelector('.occupants-heading');
heading.insertAdjacentHTML( heading.insertAdjacentHTML(
'afterend', 'afterend',
...@@ -1926,8 +1923,8 @@ converse.plugins.add('converse-muc-views', { ...@@ -1926,8 +1923,8 @@ converse.plugins.add('converse-muc-views', {
); );
this.initInviteWidget(); this.initInviteWidget();
} }
} else if (!_.isNull(form)) { } else if (!_.isNull(widget)) {
form.remove(); widget.remove();
} }
return this; return this;
}, },
...@@ -1964,12 +1961,13 @@ converse.plugins.add('converse-muc-views', { ...@@ -1964,12 +1961,13 @@ converse.plugins.add('converse-muc-views', {
if (reason !== null) { if (reason !== null) {
this.chatroomview.model.directInvite(suggestion.text.value, reason); this.chatroomview.model.directInvite(suggestion.text.value, reason);
} }
const form = suggestion.target.form, const form = this.el.querySelector('.room-invite form'),
error = form.querySelector('.pure-form-message.error'); input = form.querySelector('.invited-contact'),
error = form.querySelector('.error');
if (!_.isNull(error)) { if (!_.isNull(error)) {
error.parentNode.removeChild(error); error.parentNode.removeChild(error);
} }
suggestion.target.value = ''; input.value = '';
}, },
inviteFormSubmitted (evt) { inviteFormSubmitted (evt) {
...@@ -2000,22 +1998,26 @@ converse.plugins.add('converse-muc-views', { ...@@ -2000,22 +1998,26 @@ converse.plugins.add('converse-muc-views', {
}, },
initInviteWidget () { initInviteWidget () {
const form = this.el.querySelector('form.room-invite'); const form = this.el.querySelector('.room-invite form');
if (_.isNull(form)) { if (_.isNull(form)) {
return; return;
} }
form.addEventListener('submit', this.inviteFormSubmitted.bind(this), false); form.addEventListener('submit', this.inviteFormSubmitted.bind(this), false);
const el = this.el.querySelector('input.invited-contact'); const list = _converse.roster.map(i => ({'label': i.get('fullname') || i.get('jid'), 'value': i.get('jid')}));
const list = _converse.roster.map(function (item) { const el = this.el.querySelector('.suggestion-box').parentElement;
const label = item.get('fullname') || item.get('jid');
return {'label': label, 'value':item.get('jid')}; if (this.invite_auto_complete) {
}); this.invite_auto_complete.destroy();
const awesomplete = new Awesomplete(el, { }
'minChars': 1, this.invite_auto_complete = new _converse.AutoComplete(el, {
'min_chars': 1,
'list': list 'list': list
}); });
el.addEventListener('awesomplete-selectcomplete', this.invite_auto_complete.on('suggestion-box-selectcomplete', ev => this.promptForInvite(ev));
this.promptForInvite.bind(this)); this.invite_auto_complete.ul.setAttribute(
'style',
`max-height: calc(${this.el.offsetHeight}px - 80px);`
);
} }
}); });
......
src/templates/chatroom_invite.html
View file @ b726a235
<form class="room-invite"> <div class="suggestion-box room-invite">
{[ if (o.error_message) { ]} <form>
<span class="error">{{{o.error_message}}}</span> {[ if (o.error_message) { ]} <span class="error">{{{o.error_message}}}</span> {[ } ]}
{[ } ]} <div class="form-group">
<input class="form-control invited-contact" placeholder="{{{o.label_invitation}}}" type="text"/> <input class="form-control invited-contact suggestion-box__input"
</form> 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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7