Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Remove Awesomeplete in favor of _converse.AutoComplete

Browse Source
This commit is contained in:
JC Brand 2019-03-28 12:35:40 +01:00
parent 8d385487c9
commit b726a2353c
12 changed files with 232 additions and 782 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGES.md
View File

@ -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)

85
css/converse.css
View File

@ -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; }

792
dist/converse.js vendored
View File

File diff suppressed because it is too large Load Diff

6
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

31
sass/_awesomplete.scss → sass/_autocomplete.scss
View File

@ -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;
}

11
sass/_chatrooms.scss
View File

@ -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%;

2
sass/converse.scss
View File

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

7
spec/autocomplete.js
View File

@ -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();
}));

4
spec/muc.js
View File

@ -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

52
src/converse-muc-views.js
View File

@ -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);`
);
}
});

18
src/templates/chatroom_invite.html
View File

@ -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>