Skip to content

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

Remove jquery from converse-controlbox

parent 29b5c3e3
Show whitespace changes
Inline Side-by-side
Showing with 78 additions and 76 deletions
src/converse-controlbox.js
View file @ ccb97eb7
...@@ -7,8 +7,7 @@ ...@@ -7,8 +7,7 @@
/*global define */ /*global define */
(function (root, factory) { (function (root, factory) {
define(["jquery.noconflict", define(["converse-core",
"converse-core",
"lodash.fp", "lodash.fp",
"tpl!add_contact_dropdown", "tpl!add_contact_dropdown",
"tpl!add_contact_form", "tpl!add_contact_form",
...@@ -24,7 +23,6 @@ ...@@ -24,7 +23,6 @@
"converse-profile" "converse-profile"
], factory); ], factory);
}(this, function ( }(this, function (
$,
converse, converse,
fp, fp,
tpl_add_contact_dropdown, tpl_add_contact_dropdown,
...@@ -41,7 +39,8 @@ ...@@ -41,7 +39,8 @@
const USERS_PANEL_ID = 'users'; const USERS_PANEL_ID = 'users';
const CHATBOX_TYPE = 'chatbox'; const CHATBOX_TYPE = 'chatbox';
const { Strophe, Backbone, Promise, utils, _, moment } = converse.env; const { Strophe, Backbone, Promise, _, moment } = converse.env;
const u = converse.env.utils;
const CONNECTION_STATUS_CSS_CLASS = { const CONNECTION_STATUS_CSS_CLASS = {
'Error': 'error', 'Error': 'error',
...@@ -166,10 +165,10 @@ ...@@ -166,10 +165,10 @@
/* We return the width of the controlbox or its toggle, /* We return the width of the controlbox or its toggle,
* depending on which is visible. * depending on which is visible.
*/ */
if (!controlbox || !controlbox.$el.is(':visible')) { if (!controlbox || !u.isVisible(controlbox.el)) {
return _converse.controlboxtoggle.$el.outerWidth(true); return u.getOuterWidth(_converse.controlboxtoggle.el, true);
} else { } else {
return controlbox.$el.outerWidth(true); return u.getOuterWidth(controlbox.el, true);
} }
} else { } else {
return this.__super__.getChatBoxWidth.apply(this, arguments); return this.__super__.getChatBoxWidth.apply(this, arguments);
...@@ -242,7 +241,7 @@ ...@@ -242,7 +241,7 @@
initialize () { initialize () {
if (_.isUndefined(_converse.controlboxtoggle)) { if (_.isUndefined(_converse.controlboxtoggle)) {
_converse.controlboxtoggle = new _converse.ControlBoxToggle(); _converse.controlboxtoggle = new _converse.ControlBoxToggle();
this.$el.insertAfter(_converse.controlboxtoggle.$el); _converse.controlboxtoggle.el.insertAdjacentElement('afterend', this.el);
} }
this.model.on('change:connected', this.onConnected, this); this.model.on('change:connected', this.onConnected, this);
this.model.on('destroy', this.hide, this); this.model.on('destroy', this.hide, this);
...@@ -279,7 +278,7 @@ ...@@ -279,7 +278,7 @@
_converse.connection.disconnecting) { _converse.connection.disconnecting) {
this.renderLoginPanel(); this.renderLoginPanel();
} else if (this.model.get('connected') && } else if (this.model.get('connected') &&
(!this.contactspanel || !this.contactspanel.$el.is(':visible'))) { (!this.contactspanel || !u.isVisible(this.contactspanel.el))) {
this.renderContactsPanel(); this.renderContactsPanel();
} }
return this; return this;
...@@ -350,7 +349,7 @@ ...@@ -350,7 +349,7 @@
this.model.save({'active-panel': USERS_PANEL_ID}); this.model.save({'active-panel': USERS_PANEL_ID});
} }
this.contactspanel = new _converse.ContactsPanel({ this.contactspanel = new _converse.ContactsPanel({
'$parent': this.$el.find('.controlbox-panes') 'parent_el': this.el.querySelector('.controlbox-panes')
}); });
this.contactspanel.insertIntoDOM(); this.contactspanel.insertIntoDOM();
...@@ -386,8 +385,8 @@ ...@@ -386,8 +385,8 @@
if (_converse.sticky_controlbox) { if (_converse.sticky_controlbox) {
return; return;
} }
this.$el.addClass('hidden'); u.addClass('hidden', this.el);
utils.refreshWebkit(); u.refreshWebkit();
_converse.emit('chatBoxClosed', this); _converse.emit('chatBoxClosed', this);
if (!_converse.connection.connected) { if (!_converse.connection.connected) {
_converse.controlboxtoggle.render(); _converse.controlboxtoggle.render();
...@@ -397,8 +396,7 @@ ...@@ -397,8 +396,7 @@
}, },
onControlBoxToggleHidden () { onControlBoxToggleHidden () {
_converse.controlboxtoggle.updateOnlineCount(); u.refreshWebkit();
utils.refreshWebkit();
this.model.set('closed', false); this.model.set('closed', false);
this.el.classList.remove('hidden'); this.el.classList.remove('hidden');
_converse.emit('controlBoxOpened', this); _converse.emit('controlBoxOpened', this);
...@@ -412,17 +410,19 @@ ...@@ -412,17 +410,19 @@
}, },
switchTab (ev) { switchTab (ev) {
// TODO: automatically focus the relevant input
if (ev && ev.preventDefault) { ev.preventDefault(); } if (ev && ev.preventDefault) { ev.preventDefault(); }
const $tab = $(ev.target), const tab = ev.target,
$sibling = $tab.parent().siblings('li').children('a'), sibling_li = tab.parentNode.nextElementSibling || tab.parentNode.previousElementSibling,
$tab_panel = $($tab.attr('href')); sibling = sibling_li.firstChild,
$($sibling.attr('href')).addClass('hidden'); sibling_panel = document.querySelector(sibling.getAttribute('href')),
$sibling.removeClass('current'); tab_panel = document.querySelector(tab.getAttribute('href'));
$tab.addClass('current');
$tab_panel.removeClass('hidden'); u.hideElement(sibling_panel);
u.removeClass('current', sibling);
u.addClass('current', tab);
u.removeClass('hidden', tab_panel);
if (!_.isUndefined(_converse.chatboxes.browserStorage)) { if (!_.isUndefined(_converse.chatboxes.browserStorage)) {
this.model.save({'active-panel': $tab.data('id')}); this.model.save({'active-panel': tab.getAttribute('data-id')});
} }
return this; return this;
}, },
...@@ -490,7 +490,7 @@ ...@@ -490,7 +490,7 @@
if (jid_element.value && if (jid_element.value &&
!_converse.locked_domain && !_converse.locked_domain &&
!_converse.default_domain && !_converse.default_domain &&
!utils.isValidJID(jid_element.value)) { !u.isValidJID(jid_element.value)) {
jid_element.setCustomValidity(__('Please enter a valid XMPP address')); jid_element.setCustomValidity(__('Please enter a valid XMPP address'));
return false; return false;
} }
...@@ -551,7 +551,7 @@ ...@@ -551,7 +551,7 @@
}, },
initialize (cfg) { initialize (cfg) {
this.parent_el = cfg.$parent[0]; this.parent_el = cfg.parent_el;
this.tab_el = document.createElement('li'); this.tab_el = document.createElement('li');
_converse.chatboxes.on('change:num_unread', this.renderTab, this); _converse.chatboxes.on('change:num_unread', this.renderTab, this);
_converse.chatboxes.on('add', _.debounce(this.renderTab, 100), this); _converse.chatboxes.on('add', _.debounce(this.renderTab, 100), this);
...@@ -585,11 +585,11 @@ ...@@ -585,11 +585,11 @@
renderTab () { renderTab () {
const controlbox = _converse.chatboxes.get('controlbox'); const controlbox = _converse.chatboxes.get('controlbox');
const chats = fp.filter(_.partial(utils.isOfType, CHATBOX_TYPE), _converse.chatboxes.models); const chats = fp.filter(_.partial(u.isOfType, CHATBOX_TYPE), _converse.chatboxes.models);
this.tab_el.innerHTML = tpl_contacts_tab({ this.tab_el.innerHTML = tpl_contacts_tab({
'label_contacts': LABEL_CONTACTS, 'label_contacts': LABEL_CONTACTS,
'is_current': controlbox.get('active-panel') === USERS_PANEL_ID, 'is_current': controlbox.get('active-panel') === USERS_PANEL_ID,
'num_unread': fp.sum(fp.map(fp.curry(utils.getAttribute)('num_unread'), chats)) 'num_unread': fp.sum(fp.map(fp.curry(u.getAttribute)('num_unread'), chats))
}); });
}, },
...@@ -620,8 +620,8 @@ ...@@ -620,8 +620,8 @@
ev.preventDefault(); ev.preventDefault();
this.el.querySelector('.search-xmpp div').innerHTML = this.generateAddContactHTML(); this.el.querySelector('.search-xmpp div').innerHTML = this.generateAddContactHTML();
var dropdown = this.el.querySelector('.contact-form-container'); var dropdown = this.el.querySelector('.contact-form-container');
utils.slideToggleElement(dropdown).then(() => { u.slideToggleElement(dropdown).then(() => {
if (utils.isVisible(dropdown)) { if (u.isVisible(dropdown)) {
dropdown.querySelector('input.username').focus(); dropdown.querySelector('input.username').focus();
} }
}); });
...@@ -629,26 +629,44 @@ ...@@ -629,26 +629,44 @@
searchContacts (ev) { searchContacts (ev) {
ev.preventDefault(); ev.preventDefault();
$.getJSON(_converse.xhr_user_search_url+ "?q=" + $(ev.target).find('input.username').val(), function (data) { const search_query= ev.target.querySelector('input.username').value,
const title_subscribe = __('Click to add as a chat contact'); url = _converse.xhr_user_search_url+ "?q=" + search_query,
const no_users_text = __('No users found'); xhr = new XMLHttpRequest();
const $ul= $('.search-xmpp ul');
$ul.find('li.found-user').remove(); xhr.open('GET', url, true);
$ul.find('li.chat-info').remove(); xhr.setRequestHeader('Accept', "application/json, text/javascript");
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 400) {
const data = JSON.parse(xhr.responseText),
ul = document.querySelector('.search-xmpp ul');
u.removeElement(ul.querySelector('li.found-user'));
u.removeElement(ul.querySelector('li.chat-info'));
if (!data.length) { if (!data.length) {
$ul.append(`<li class="chat-info">${no_users_text}</li>`); const no_users_text = __('No users found');
} ul.insertAdjacentHTML('beforeEnd', `<li class="chat-info">${no_users_text}</li>`);
$(data).each(function (idx, obj) { }
$ul.append( else {
$('<li class="found-user"></li>') const title_subscribe = __('Click to add as a chat contact');
.append( _.each(data, function (obj) {
$(`<a class="subscribe-to-user" href="#" title="${title_subscribe}"></a>`) const li = u.stringToElement('<li class="found-user"></li>'),
.attr('data-recipient', Strophe.getNodeFromJid(obj.id)+"@"+Strophe.getDomainFromJid(obj.id)) a = u.stringToElement(`<a class="subscribe-to-user" href="#" title="${title_subscribe}"></a>`),
.text(obj.fullname) jid = Strophe.getNodeFromJid(obj.id)+"@"+Strophe.getDomainFromJid(obj.id);
)
); a.setAttribute('data-recipient', jid);
}); a.textContent = obj.fullname;
li.appendChild(a);
u.appendChild(li)
}); });
}
} else {
xhr.onerror();
}
};
xhr.onerror = function () {
_converse.log('Could not fetch contacts via XHR', Strophe.LogLevel.ERROR);
};
xhr.send();
}, },
addContactFromForm (ev) { addContactFromForm (ev) {
...@@ -666,7 +684,7 @@ ...@@ -666,7 +684,7 @@
return; return;
} }
_converse.roster.addAndSubscribe(jid); _converse.roster.addAndSubscribe(jid);
utils.slideIn(this.el.querySelector('.contact-form-container')); u.slideIn(this.el.querySelector('.contact-form-container'));
}, },
addContactFromList (ev) { addContactFromList (ev) {
...@@ -676,7 +694,7 @@ ...@@ -676,7 +694,7 @@
_converse.roster.addAndSubscribe(jid, name); _converse.roster.addAndSubscribe(jid, name);
const parent = ev.target.parentNode; const parent = ev.target.parentNode;
parent.parentNode.removeChild(parent); parent.parentNode.removeChild(parent);
utils.slideIn(this.el.querySelector('.contact-form-container')); u.slideIn(this.el.querySelector('.contact-form-container'));
} }
}); });
...@@ -693,15 +711,10 @@ ...@@ -693,15 +711,10 @@
}, },
initialize () { initialize () {
_converse.chatboxviews.$el.prepend(this.render().el); _converse.chatboxviews.el.insertAdjacentElement('afterBegin', this.render().el);
this.updateOnlineCount();
const that = this; const that = this;
_converse.api.waitUntil('initialized').then(() => { _converse.api.waitUntil('initialized').then(() => {
this.render(); this.render();
_converse.roster.on("add", that.updateOnlineCount, that);
_converse.roster.on('change', that.updateOnlineCount, that);
_converse.roster.on("destroy", that.updateOnlineCount, that);
_converse.roster.on("remove", that.updateOnlineCount, that);
}).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL)); }).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
}, },
...@@ -716,24 +729,13 @@ ...@@ -716,24 +729,13 @@
return this; return this;
}, },
updateOnlineCount: _.debounce(function () {
if (_.isUndefined(_converse.roster)) {
return;
}
const $count = this.$('#online-count');
$count.text(`(${_converse.roster.getNumOnlineContacts()})`);
if (!$count.is(':visible')) {
$count.show();
}
}, _converse.animate ? 100 : 0),
hide (callback) { hide (callback) {
this.el.classList.add('hidden'); u.hideElement(this.el);
callback(); callback();
}, },
show (callback) { show (callback) {
utils.fadeIn(this.el, callback); u.fadeIn(this.el, callback);
}, },
showControlBox () { showControlBox () {
...@@ -750,7 +752,7 @@ ...@@ -750,7 +752,7 @@
onClick (e) { onClick (e) {
e.preventDefault(); e.preventDefault();
if (utils.isVisible(document.querySelector("#controlbox"))) { if (u.isVisible(document.querySelector("#controlbox"))) {
const controlbox = _converse.chatboxes.get('controlbox'); const controlbox = _converse.chatboxes.get('controlbox');
if (_converse.connection.connected) { if (_converse.connection.connected) {
controlbox.save({closed: true}); controlbox.save({closed: true});
...@@ -777,7 +779,7 @@ ...@@ -777,7 +779,7 @@
*/ */
const view = _converse.chatboxviews.get('controlbox'); const view = _converse.chatboxviews.get('controlbox');
view.model.set({connected:false}); view.model.set({connected:false});
view.$('#controlbox-tabs').empty(); view.el.querySelector('#controlbox-tabs').innerHTML = '';
view.renderLoginPanel(); view.renderLoginPanel();
}; };
_converse.on('disconnected', disconnect); _converse.on('disconnected', disconnect);
......
src/converse-minimize.js
View file @ ccb97eb7
...@@ -349,10 +349,10 @@ ...@@ -349,10 +349,10 @@
); );
if (this.model.get('type') === 'chatroom') { if (this.model.get('type') === 'chatroom') {
data.title = this.model.get('name'); data.title = this.model.get('name');
u.addClass(this.el, 'chat-head-chatroom'); u.addClass('chat-head-chatroom', this.el);
} else { } else {
data.title = this.model.get('fullname'); data.title = this.model.get('fullname');
u.addClass(this.el, 'chat-head-chatbox'); u.addClass('chat-head-chatbox', this.el);
} }
this.el.innerHTML = tpl_trimmed_chat(data); this.el.innerHTML = tpl_trimmed_chat(data);
return this.el; return this.el;
......
src/utils.js
View file @ ccb97eb7
...@@ -87,15 +87,15 @@ ...@@ -87,15 +87,15 @@
var u = {}; var u = {};
u.addClass = function (el, className) { u.addClass = function (className, el) {
if (el instanceof Element) { if (el instanceof Element) {
el.classList.add(className); el.classList.add(className);
} }
} }
u.removeClass = function (klass, el) { u.removeClass = function (className, el) {
if (el instanceof Element) { if (el instanceof Element) {
el.classList.remove(klass); el.classList.remove(className);
} }
return el; return el;
} }
......
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