Typeahead now has actual queried suggestions. updates #215

This commit is contained in:
JC Brand 2014-08-27 18:57:03 +02:00
parent 84c2242c91
commit 172d18fa0a
3 changed files with 43 additions and 10 deletions

View File

@ -50,6 +50,12 @@
return this; return this;
}; };
var predicate = function (attr, query) {
return function (item) {
return item.get(attr).toLowerCase().indexOf(query) === -1;
};
};
$.fn.addEmoticons = function() { $.fn.addEmoticons = function() {
if (converse.visible_toolbar_buttons.emoticons) { if (converse.visible_toolbar_buttons.emoticons) {
if (this.length > 0) { if (this.length > 0) {
@ -2005,8 +2011,12 @@
highlight: true highlight: true
}, { }, {
name: 'contacts-dataset', name: 'contacts-dataset',
source: function (query, cb) { source: function (q, cb) {
cb([{ val: 'dog' }, { val: 'pig' }, { val: 'moose' }]); var results = [];
_.each(converse.roster.filter(predicate('fullname', q)), function (n) {
results.push({value: n.get('fullname')});
});
cb(results);
} }
}); });
return this; return this;
@ -3351,9 +3361,6 @@
* group must be filtered out as well. * group must be filtered out as well.
*/ */
var matches, rejects; var matches, rejects;
var predicate = function (item) {
return item.get('fullname').toLowerCase().indexOf(q) === -1;
};
if (q.length === 0) { if (q.length === 0) {
if (this.model.get('state') === OPENED) { if (this.model.get('state') === OPENED) {
this.model.contacts.each($.proxy(function (item) { this.model.contacts.each($.proxy(function (item) {
@ -3365,14 +3372,14 @@
this.showIfInvisible(); this.showIfInvisible();
} else { } else {
q = q.toLowerCase(); q = q.toLowerCase();
matches = this.model.contacts.filter(predicate); matches = this.model.contacts.filter(predicate('fullname', q));
if (matches.length === this.model.contacts.length) { // hide the whole group if (matches.length === this.model.contacts.length) { // hide the whole group
this.hide(); this.hide();
} else { } else {
_.each(matches, $.proxy(function (item) { _.each(matches, $.proxy(function (item) {
this.get(item.get('id')).$el.hide(); this.get(item.get('id')).$el.hide();
}, this)); }, this));
_.each(this.model.contacts.reject(predicate), $.proxy(function (item) { _.each(this.model.contacts.reject(predicate('fullname', q)), $.proxy(function (item) {
this.get(item.get('id')).$el.show(); this.get(item.get('id')).$el.show();
}, this)); }, this));
this.showIfInvisible(); this.showIfInvisible();

View File

@ -2,7 +2,7 @@
* Converse.js (Web-based XMPP instant messaging client) * Converse.js (Web-based XMPP instant messaging client)
* http://conversejs.org * http://conversejs.org
* *
* Copyright (c) 2012-2014, Jan-Carel Brand <jc@opkode.com> * Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
* Licensed under the Mozilla Public License * Licensed under the Mozilla Public License
*/ */
@font-face { @font-face {
@ -574,14 +574,26 @@ span.spinner.hor_centered {
#conversejs .tt-highlight { #conversejs .tt-highlight {
background-color: #00230F; background-color: #00230F;
} }
#conversejs div.tt-suggestion p:hover .tt-highlight {
background-color: #00230F;
background: #27774A;
}
#conversejs div.tt-suggestion p:hover {
background-color: #00230F;
}
#conversejs div.tt-suggestion p { #conversejs div.tt-suggestion p {
color: white; color: white;
text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0; text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
cursor: pointer; cursor: pointer;
font-size: 11px;
} }
#conversejs .tt-dropdown-menu { #conversejs .tt-dropdown-menu {
margin: 0 1px 0 1px; margin: 0 1px 0 1px;
min-width: 96px; width: 96px;
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
text-overflow: ellipsis;
background: #27774A; background: #27774A;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;

View File

@ -618,15 +618,29 @@ span.spinner.hor_centered {
background-color: #00230F; background-color: #00230F;
} }
#conversejs div.tt-suggestion p:hover .tt-highlight {
background-color: #00230F;
background: #27774A;
}
#conversejs div.tt-suggestion p:hover {
background-color: #00230F;
}
#conversejs div.tt-suggestion p { #conversejs div.tt-suggestion p {
color: white; color: white;
text-shadow: rgba(0,0,0,0.51) 0 -1px 0; text-shadow: rgba(0,0,0,0.51) 0 -1px 0;
cursor: pointer; cursor: pointer;
font-size: 11px;
} }
#conversejs .tt-dropdown-menu { #conversejs .tt-dropdown-menu {
margin: 0 1px 0 1px; margin: 0 1px 0 1px;
min-width: 96px; width: 96px;
max-height: 250px;
overflow-x: hidden;
overflow-y: auto;
text-overflow: ellipsis;
background: #27774A; background: #27774A;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;