|
@@ -3,12 +3,12 @@
|
|
|
* @copyright 2020, the Converse.js contributors
|
|
|
* @license Mozilla Public License (MPLv2)
|
|
|
*/
|
|
|
-import "backbone.vdomview";
|
|
|
import "@converse/headless/converse-chatboxes";
|
|
|
import "@converse/headless/converse-roster";
|
|
|
import "converse-modal";
|
|
|
import "formdata-polyfill";
|
|
|
import { compact, debounce, has, isString, uniq, without } from "lodash";
|
|
|
+import { HTMLView } from 'skeletor.js/src/htmlview.js';
|
|
|
import { Model } from 'skeletor.js/src/model.js';
|
|
|
import { OrderedListView } from "skeletor.js/src/overview";
|
|
|
import SHA1 from 'strophe.js/src/sha1';
|
|
@@ -19,10 +19,10 @@ import tpl_group_header from "templates/group_header.html";
|
|
|
import tpl_pending_contact from "templates/pending_contact.html";
|
|
|
import tpl_requesting_contact from "templates/requesting_contact.html";
|
|
|
import tpl_roster from "templates/roster.html";
|
|
|
-import tpl_roster_filter from "templates/roster_filter.html";
|
|
|
+import tpl_roster_filter from "templates/roster_filter.js";
|
|
|
import tpl_roster_item from "templates/roster_item.html";
|
|
|
|
|
|
-const { Backbone, Strophe } = converse.env;
|
|
|
+const { Strophe } = converse.env;
|
|
|
const u = converse.env.utils;
|
|
|
|
|
|
|
|
@@ -201,16 +201,8 @@ converse.plugins.add('converse-rosterview', {
|
|
|
},
|
|
|
});
|
|
|
|
|
|
- _converse.RosterFilterView = Backbone.VDOMView.extend({
|
|
|
- tagName: 'form',
|
|
|
- className: 'roster-filter-form',
|
|
|
- events: {
|
|
|
- "keydown .roster-filter": "liveFilter",
|
|
|
- "submit": "submitFilter",
|
|
|
- "click .clear-input": "clearFilter",
|
|
|
- "click .filter-by span": "changeTypeFilter",
|
|
|
- "change .state-type": "changeChatStateFilter"
|
|
|
- },
|
|
|
+ _converse.RosterFilterView = HTMLView.extend({
|
|
|
+ tagName: 'span',
|
|
|
|
|
|
initialize () {
|
|
|
this.listenTo(this.model, 'change:filter_type', this.render);
|
|
@@ -232,17 +224,22 @@ converse.plugins.add('converse-rosterview', {
|
|
|
label_busy: __('Busy'),
|
|
|
label_away: __('Away'),
|
|
|
label_xa: __('Extended Away'),
|
|
|
- label_offline: __('Offline')
|
|
|
+ label_offline: __('Offline'),
|
|
|
+ changeChatStateFilter: ev => this.changeChatStateFilter(ev),
|
|
|
+ changeTypeFilter: ev => this.changeTypeFilter(ev),
|
|
|
+ clearFilter: ev => this.clearFilter(ev),
|
|
|
+ liveFilter: ev => this.liveFilter(ev),
|
|
|
+ submitFilter: ev => this.submitFilter(ev),
|
|
|
}));
|
|
|
},
|
|
|
|
|
|
changeChatStateFilter (ev) {
|
|
|
- if (ev && ev.preventDefault) { ev.preventDefault(); }
|
|
|
+ ev && ev.preventDefault();
|
|
|
this.model.save({'chat_state': this.el.querySelector('.state-type').value});
|
|
|
},
|
|
|
|
|
|
changeTypeFilter (ev) {
|
|
|
- if (ev && ev.preventDefault) { ev.preventDefault(); }
|
|
|
+ ev && ev.preventDefault();
|
|
|
const type = ev.target.dataset.type;
|
|
|
if (type === 'state') {
|
|
|
this.model.save({
|
|
@@ -258,64 +255,30 @@ converse.plugins.add('converse-rosterview', {
|
|
|
},
|
|
|
|
|
|
liveFilter: debounce(function () {
|
|
|
- this.model.save({
|
|
|
- 'filter_text': this.el.querySelector('.roster-filter').value
|
|
|
- });
|
|
|
+ this.model.save({'filter_text': this.el.querySelector('.roster-filter').value});
|
|
|
}, 250),
|
|
|
|
|
|
submitFilter (ev) {
|
|
|
- if (ev && ev.preventDefault) { ev.preventDefault(); }
|
|
|
+ ev && ev.preventDefault();
|
|
|
this.liveFilter();
|
|
|
- this.render();
|
|
|
},
|
|
|
|
|
|
+ /**
|
|
|
+ * Returns true if the filter is enabled (i.e. if the user
|
|
|
+ * has added values to the filter).
|
|
|
+ * @private
|
|
|
+ * @method _converse.RosterFilterView#isActive
|
|
|
+ */
|
|
|
isActive () {
|
|
|
- /* Returns true if the filter is enabled (i.e. if the user
|
|
|
- * has added values to the filter).
|
|
|
- */
|
|
|
- if (this.model.get('filter_type') === 'state' ||
|
|
|
- this.model.get('filter_text')) {
|
|
|
- return true;
|
|
|
- }
|
|
|
- return false;
|
|
|
+ return (this.model.get('filter_type') === 'state' || this.model.get('filter_text'));
|
|
|
},
|
|
|
|
|
|
shouldBeVisible () {
|
|
|
return _converse.roster && _converse.roster.length >= 5 || this.isActive();
|
|
|
},
|
|
|
|
|
|
- showOrHide () {
|
|
|
- if (this.shouldBeVisible()) {
|
|
|
- this.show();
|
|
|
- } else {
|
|
|
- this.hide();
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- show () {
|
|
|
- if (u.isVisible(this.el)) { return this; }
|
|
|
- this.el.classList.add('fade-in');
|
|
|
- this.el.classList.remove('hidden');
|
|
|
- return this;
|
|
|
- },
|
|
|
-
|
|
|
- hide () {
|
|
|
- if (!u.isVisible(this.el)) { return this; }
|
|
|
- this.model.save({
|
|
|
- 'filter_text': '',
|
|
|
- 'chat_state': 'online'
|
|
|
- });
|
|
|
- this.el.classList.add('hidden');
|
|
|
- return this;
|
|
|
- },
|
|
|
-
|
|
|
clearFilter (ev) {
|
|
|
- if (ev && ev.preventDefault) {
|
|
|
- ev.preventDefault();
|
|
|
- u.hideElement(this.el.querySelector('.clear-input'));
|
|
|
- }
|
|
|
- const roster_filter = this.el.querySelector('.roster-filter');
|
|
|
- roster_filter.value = '';
|
|
|
+ ev && ev.preventDefault();
|
|
|
this.model.save({'filter_text': ''});
|
|
|
}
|
|
|
});
|
|
@@ -819,7 +782,7 @@ converse.plugins.add('converse-rosterview', {
|
|
|
const model = new _converse.RosterFilter();
|
|
|
model.id = `_converse.rosterfilter-${_converse.bare_jid}`;
|
|
|
model.browserStorage = _converse.createStore(model.id);
|
|
|
- this.filter_view = new _converse.RosterFilterView({'model': model});
|
|
|
+ this.filter_view = new _converse.RosterFilterView({model});
|
|
|
this.listenTo(this.filter_view.model, 'change', this.updateFilter);
|
|
|
this.filter_view.model.fetch();
|
|
|
},
|
|
@@ -844,7 +807,7 @@ converse.plugins.add('converse-rosterview', {
|
|
|
if (!u.isVisible(this.roster_el)) {
|
|
|
u.showElement(this.roster_el);
|
|
|
}
|
|
|
- this.filter_view.showOrHide();
|
|
|
+ this.filter_view.render();
|
|
|
return this;
|
|
|
},
|
|
|
|