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

Remove jquery from converse-controlbox

Browse Source
This commit is contained in:
JC Brand 2018-01-03 16:49:08 +00:00
parent 29b5c3e3c3
commit ccb97eb7fd
3 changed files with 78 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
src/converse-controlbox.js
View File

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

4
src/converse-minimize.js
View File

@ -349,10 +349,10 @@
);
if (this.model.get('type') === 'chatroom') {
data.title = this.model.get('name');
u.addClass(this.el, 'chat-head-chatroom');
u.addClass('chat-head-chatroom', this.el);
} else {
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);
return this.el;

6
src/utils.js
View File

@ -87,15 +87,15 @@
var u = {};
u.addClass = function (el, className) {
u.addClass = function (className, el) {
if (el instanceof Element) {
el.classList.add(className);
}
}
u.removeClass = function (klass, el) {
u.removeClass = function (className, el) {
if (el instanceof Element) {
el.classList.remove(klass);
el.classList.remove(className);
}
return el;
}