Skip to content

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

Replace typeahead with awesomplete. 

Much smaller library.
No dependence on jQuery.

Updates #779
parent 994c961d
Hide whitespace changes
Inline Side-by-side
Showing with 248 additions and 106 deletions
bower.json
View file @ d2227c8d
......@@ -7,8 +7,7 @@
"bootstrap": "~3.2.0",
"bourbon": "~4.2.6",
"crypto-js-evanvosberg": "https://github.com/evanvosberg/crypto-js.git#release-3.1.2-5",
"fontawesome": "~4.1.0",
"typeahead.js": "https://raw.githubusercontent.com/jcbrand/typeahead.js/eedfb10505dd3a20123d1fafc07c1352d83f0ab3/dist/typeahead.jquery.js"
"fontawesome": "~4.1.0"
},
"dependencies": {},
"exportsOverride": {},
......
config.js
View file @ d2227c8d
......@@ -15,6 +15,7 @@ require.config({
baseUrl: '.',
paths: {
"almond": "node_modules/almond/almond",
"awesomplete": "node_modules/awesomplete/awesomplete",
"backbone": "node_modules/backbone/backbone",
"backbone.browserStorage": "node_modules/backbone.browserStorage/backbone.browserStorage",
"backbone.overview": "node_modules/backbone.overview/backbone.overview",
......@@ -213,6 +214,7 @@ require.config({
// define module dependencies for modules not using define
shim: {
'awesomplete': { exports: 'Awesomplete' },
'backbone': { deps: ['underscore'] },
'bigint': { deps: ['crypto'] },
'crypto.aes': { deps: ['crypto.cipher-core'] },
......
css/converse.css
View file @ d2227c8d
......@@ -2384,38 +2384,6 @@
margin: -1px 0 0 -1px;
width: 100%;
border: 1px solid #999; }
#converse-embedded-chat .chatroom .room-invite .invited-contact.tt-input,
#conversejs .chatroom .room-invite .invited-contact.tt-input {
width: 100%;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; }
#converse-embedded-chat .chatroom .room-invite .invited-contact.tt-input:focus,
#conversejs .chatroom .room-invite .invited-contact.tt-input:focus {
border-color: #E76F51; }
#converse-embedded-chat .chatroom .room-invite .invited-contact.tt-hint,
#conversejs .chatroom .room-invite .invited-contact.tt-hint {
color: transparent;
background-color: white; }
#converse-embedded-chat .chatroom .room-invite .tt-dropdown-menu,
#conversejs .chatroom .room-invite .tt-dropdown-menu {
width: 96%;
max-height: 250px;
background: #E76F51;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
overflow-y: auto; }
#converse-embedded-chat .chatroom .room-invite .tt-dropdown-menu .tt-suggestion p,
#conversejs .chatroom .room-invite .tt-dropdown-menu .tt-suggestion p {
color: white;
cursor: pointer;
font-size: 11px;
text-overflow: ellipsis;
overflow-x: hidden; }
#converse-embedded-chat .chatroom .room-invite .tt-dropdown-menu .tt-suggestion p:hover,
#conversejs .chatroom .room-invite .tt-dropdown-menu .tt-suggestion p:hover {
background-color: #FF977C; }
#converse-embedded-chat .chatroom .room-invite .tt-dropdown-menu .tt-suggestion .tt-highlight,
#conversejs .chatroom .room-invite .tt-dropdown-menu .tt-suggestion .tt-highlight {
background-color: #D24E2B; }
#conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
background-color: #2A9D8F; }
......@@ -2482,4 +2450,97 @@
#conversejs #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom .remove-bookmark {
float: right; }
#converse-embedded-chat,
#conversejs {
/* Pointer */ }
#converse-embedded-chat [hidden],
#conversejs [hidden] {
display: none; }
#converse-embedded-chat .visually-hidden,
#conversejs .visually-hidden {
position: absolute;
clip: rect(0, 0, 0, 0); }
#converse-embedded-chat div.awesomplete,
#conversejs div.awesomplete {
display: inline-block;
position: relative; }
#converse-embedded-chat div.awesomplete > input,
#conversejs div.awesomplete > input {
display: block; }
#converse-embedded-chat div.awesomplete > ul,
#conversejs div.awesomplete > ul {
position: absolute;
left: 0;
right: 0;
z-index: 1;
min-width: 100%;
box-sizing: border-box;
list-style: none;
padding: 0;
border-radius: .3em;
margin: .2em 0 0;
background: rgba(255, 255, 255, 0.9);
background: linear-gradient(to bottom right, white, rgba(255, 255, 255, 0.8));
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2);
text-shadow: none; }
#converse-embedded-chat div.awesomplete > ul[hidden],
#converse-embedded-chat div.awesomplete > ul:empty,
#conversejs div.awesomplete > ul[hidden],
#conversejs div.awesomplete > ul:empty {
display: none; }
@supports (transform: scale(0)) {
#converse-embedded-chat div.awesomplete > ul,
#conversejs div.awesomplete > ul {
transition: 0.3s cubic-bezier(0.4, 0.2, 0.5, 1.4);
transform-origin: 1.43em -.43em; }
#converse-embedded-chat div.awesomplete > ul[hidden],
#converse-embedded-chat div.awesomplete > ul:empty,
#conversejs div.awesomplete > ul[hidden],
#conversejs div.awesomplete > ul:empty {
opacity: 0;
transform: scale(0);
display: block;
transition-timing-function: ease; } }
#converse-embedded-chat div.awesomplete > ul:before,
#conversejs div.awesomplete > ul:before {
content: "";
position: absolute;
top: -.43em;
left: 1em;
width: 0;
height: 0;
padding: .4em;
background: white;
border: inherit;
border-right: 0;
border-bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
#converse-embedded-chat div.awesomplete > ul > li,
#conversejs div.awesomplete > ul > li {
text-overflow: ellipsis;
overflow-x: hidden;
position: relative;
padding: .2em .5em;
cursor: pointer; }
#converse-embedded-chat div.awesomplete > ul > li:hover,
#conversejs div.awesomplete > ul > li:hover {
background: #b8d3e0;
color: black; }
#converse-embedded-chat div.awesomplete > ul > li[aria-selected="true"],
#conversejs div.awesomplete > ul > li[aria-selected="true"] {
background: #3d6d8f;
color: white; }
#converse-embedded-chat div.awesomplete mark,
#conversejs div.awesomplete mark {
background: #eaff00; }
#converse-embedded-chat div.awesomplete li:hover mark,
#conversejs div.awesomplete li:hover mark {
background: #b5d100; }
#converse-embedded-chat div.awesomplete li[aria-selected="true"] mark,
#conversejs div.awesomplete li[aria-selected="true"] mark {
background: #3d6b00;
color: inherit; }
/*# sourceMappingURL=converse.css.map */
sass/_awesomplete.scss 0 → 100644
View file @ d2227c8d
#converse-embedded-chat,
#conversejs {
[hidden] { display: none; }
.visually-hidden {
position: absolute;
clip: rect(0, 0, 0, 0);
}
div.awesomplete {
display: inline-block;
position: relative;
}
div.awesomplete > input {
display: block;
}
div.awesomplete > ul {
position: absolute;
left: 0;
right: 0;
z-index: 1;
min-width: 100%;
box-sizing: border-box;
list-style: none;
padding: 0;
border-radius: .3em;
margin: .2em 0 0;
background: hsla(0,0%,100%,.9);
background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
border: 1px solid rgba(0,0,0,.3);
box-shadow: .05em .2em .6em rgba(0,0,0,.2);
text-shadow: none;
}
div.awesomplete > ul[hidden],
div.awesomplete > ul:empty {
display: none;
}
@supports (transform: scale(0)) {
div.awesomplete > ul {
transition: .3s cubic-bezier(.4,.2,.5,1.4);
transform-origin: 1.43em -.43em;
}
div.awesomplete > ul[hidden],
div.awesomplete > ul:empty {
opacity: 0;
transform: scale(0);
display: block;
transition-timing-function: ease;
}
}
/* Pointer */
div.awesomplete > ul:before {
content: "";
position: absolute;
top: -.43em;
left: 1em;
width: 0; height: 0;
padding: .4em;
background: white;
border: inherit;
border-right: 0;
border-bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
div.awesomplete > ul > li {
text-overflow: ellipsis;
overflow-x: hidden;
position: relative;
padding: .2em .5em;
cursor: pointer;
}
div.awesomplete > ul > li:hover {
background: hsl(200, 40%, 80%);
color: black;
}
div.awesomplete > ul > li[aria-selected="true"] {
background: hsl(205, 40%, 40%);
color: white;
}
div.awesomplete mark {
background: hsl(65, 100%, 50%);
}
div.awesomplete li:hover mark {
background: hsl(68, 100%, 41%);
}
div.awesomplete li[aria-selected="true"] mark {
background: hsl(86, 100%, 21%);
color: inherit;
}
}
sass/_chatrooms.scss
View file @ d2227c8d
......@@ -166,40 +166,6 @@
margin: -1px 0 0 -1px;
width: 100%;
border: 1px solid #999;
&.tt-input {
width: 100%;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center;
&:focus {
border-color: $chatroom-head-color;
}
}
&.tt-hint {
color: transparent;
background-color: white;
}
}
.tt-dropdown-menu {
width: 96%;
max-height: 250px;
background: $chatroom-head-color;
border-bottom-right-radius: $chatbox-border-radius;
border-bottom-left-radius: $chatbox-border-radius;
overflow-y: auto;
.tt-suggestion {
p {
color: white;
cursor: pointer;
font-size: 11px;
text-overflow: ellipsis;
overflow-x: hidden;
&:hover {
background-color: $chatroom-color-light;
}
}
.tt-highlight {
background-color: $chatroom-color-dark;
}
}
}
}
}
......
sass/converse.scss
View file @ d2227c8d
......@@ -18,3 +18,4 @@
@import "headline";
@import "minimized_chats";
@import "bookmarks";
@import "awesomplete"
spec/chatroom.js
View file @ d2227c8d
......@@ -646,30 +646,48 @@
it("allows the user to invite their roster contacts to enter the chat room", mock.initConverse(function (_converse) {
test_utils.openChatRoom(_converse, 'lounge', 'localhost', 'dummy');
test_utils.createContacts(_converse, 'current'); // We need roster contacts, so that we have someone to invite
// Since we don't actually fetch roster contacts, we need to
// cheat here and emit the event.
_converse.emit('rosterContactsFetched');
spyOn(_converse, 'emit');
spyOn(window, 'prompt').andCallFake(function () {
return null;
return "Please join!";
});
var $input;
var view = _converse.chatboxviews.get('lounge@localhost');
spyOn(view, 'directInvite').andCallThrough();
var $input;
view.$el.find('.chat-area').remove();
test_utils.createContacts(_converse, 'current'); // We need roster contacts, so that we have someone to invite
$input = view.$el.find('input.invited-contact.tt-input');
var $hint = view.$el.find('input.invited-contact.tt-hint');
$input = view.$el.find('input.invited-contact');
runs (function () {
expect($input.length).toBe(1);
expect($input.attr('placeholder')).toBe('Invite');
$input.val("Felix");
$input.trigger('input');
$input[0].dispatchEvent(new Event('input'));
});
waits(350); // Needed, due to debounce
runs (function () {
var sent_stanza;
spyOn(_converse.connection, 'send').andCallFake(function (stanza) {
sent_stanza = stanza;
});
var $hint = $input.siblings('ul').children('li');
expect($input.val()).toBe('Felix');
expect($hint.val()).toBe('Felix Amsel');
var $sugg = view.$el.find('[data-jid="felix.amsel@localhost"]');
expect($sugg.length).toBe(1);
$sugg.trigger('click');
expect($hint[0].textContent).toBe('Felix Amsel');
expect($hint.length).toBe(1);
var evt = new Event('mousedown', {'bubbles': true});
evt.button = 0; // For some reason awesomplete wants this
$hint[0].dispatchEvent(evt);
expect(window.prompt).toHaveBeenCalled();
expect(view.directInvite).toHaveBeenCalled();
expect(sent_stanza.toLocaleString()).toBe(
"<message from='dummy@localhost/resource' to='felix.amsel@localhost' id='" +
sent_stanza.nodeTree.getAttribute('id') +
"' xmlns='jabber:client'>"+
"<x xmlns='jabber:x:conference' jid='lounge@localhost' reason='Please join!'/>"+
"</message>"
);
});
}));
......
src/converse-api.js
View file @ d2227c8d
......@@ -6,8 +6,7 @@
//
/*global define */
(function (root, factory) {
define([
"jquery",
define(["jquery",
"lodash",
"moment_with_locales",
"strophe",
......
src/converse-muc.js
View file @ d2227c8d
......@@ -26,7 +26,7 @@
"tpl!room_description",
"tpl!room_item",
"tpl!room_panel",
"typeahead",
"awesomplete",
"converse-chatview"
], factory);
}(this, function (
......@@ -44,7 +44,8 @@
tpl_occupant,
tpl_room_description,
tpl_room_item,
tpl_room_panel
tpl_room_panel,
Awesomplete
) {
"use strict";
var ROOMS_PANEL_ID = 'chatrooms';
......@@ -1936,7 +1937,7 @@
})
);
if (_converse.allow_muc_invitations) {
return this.initInviteWidget();
_converse.api.waitUntil('rosterContactsFetched').then(this.initInviteWidget.bind(this));
}
return this;
},
......@@ -2037,33 +2038,24 @@
},
initInviteWidget: function () {
var $el = this.$('input.invited-contact');
$el.typeahead({
minLength: 1,
highlight: true
}, {
name: 'contacts-dataset',
source: function (q, cb) {
cb(_.map(
_converse.roster.filter(utils.contains(['fullname', 'jid'], q)),
function (n) {
return {value: n.get('fullname'), jid: n.get('jid')};
}
));
},
templates: {
suggestion: _.template('<p data-jid="{{jid}}">{{value}}</p>')
}
var el = this.el.querySelector('input.invited-contact');
var list = _converse.roster.map(function (item) {
var label = item.get('fullname') || item.get('jid');
return {'label': label, 'value':item.get('jid')};
});
var awesomplete = new Awesomplete(el, {
'minChars': 1,
'list': list
});
$el.on('typeahead:selected', function (ev, suggestion, dname) {
el.addEventListener('awesomplete-selectcomplete', function (suggestion) {
var reason = prompt(
__(___('You are about to invite %1$s to the chat room "%2$s". '), suggestion.value, this.model.get('id')) +
__(___('You are about to invite %1$s to the chat room "%2$s". '), suggestion.text.label, this.model.get('id')) +
__("You may optionally include a message, explaining the reason for the invitation.")
);
if (reason !== null) {
this.chatroomview.directInvite(suggestion.jid, reason);
this.chatroomview.directInvite(suggestion.text.value, reason);
}
$(ev.target).typeahead('val', '');
el.value = '';
}.bind(this));
return this;
}
......
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