Skip to content

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

Some of refactoring to avoid code duplication and jQuery

parent 292a75d3
Show whitespace changes
Inline Side-by-side
Showing with 107 additions and 78 deletions
spec/bookmarks.js
View file @ 85bea600
...@@ -32,14 +32,14 @@ ...@@ -32,14 +32,14 @@
var jid = 'theplay@conference.shakespeare.lit'; var jid = 'theplay@conference.shakespeare.lit';
var view = _converse.chatboxviews.get(jid); var view = _converse.chatboxviews.get(jid);
spyOn(view, 'renderBookmarkForm').and.callThrough(); spyOn(view, 'renderBookmarkForm').and.callThrough();
spyOn(view, 'cancelConfiguration').and.callThrough(); spyOn(view, 'closeForm').and.callThrough();
var $bookmark = view.$el.find('.icon-pushpin'); var $bookmark = view.$el.find('.icon-pushpin');
$bookmark.click(); $bookmark.click();
expect(view.renderBookmarkForm).toHaveBeenCalled(); expect(view.renderBookmarkForm).toHaveBeenCalled();
view.$el.find('.button-cancel').click(); view.$el.find('.button-cancel').click();
expect(view.cancelConfiguration).toHaveBeenCalled(); expect(view.closeForm).toHaveBeenCalled();
expect($bookmark.hasClass('on-button'), false); expect($bookmark.hasClass('on-button'), false);
$bookmark.click(); $bookmark.click();
......
src/converse-bookmarks.js
View file @ 85bea600
...@@ -132,10 +132,8 @@ ...@@ -132,10 +132,8 @@
child.classList.add('hidden'); child.classList.add('hidden');
}); });
// Remove any existing forms // Remove any existing forms
let form = body.querySelector('form.chatroom-form'); _.each(body.querySelectorAll('.chatroom-form-container'), utils.removeElement);
if (!_.isNull(form)) {
form.parentNode.removeChild(form);
}
body.insertAdjacentHTML( body.insertAdjacentHTML(
'beforeend', 'beforeend',
tpl_chatroom_bookmark_form({ tpl_chatroom_bookmark_form({
...@@ -148,14 +146,14 @@ ...@@ -148,14 +146,14 @@
label_cancel: __('Cancel') label_cancel: __('Cancel')
}) })
); );
form = body.querySelector('form.chatroom-form'); const form = body.querySelector('form.chatroom-form');
form.addEventListener( form.addEventListener(
'submit', 'submit',
this.onBookmarkFormSubmitted.bind(this) this.onBookmarkFormSubmitted.bind(this)
); );
form.querySelector('.button-cancel').addEventListener( form.querySelector('.button-cancel').addEventListener(
'click', 'click',
this.cancelConfiguration.bind(this) this.closeForm.bind(this)
); );
}, },
......
src/converse-muc.js
View file @ 85bea600
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
], factory); ], factory);
}(this, function ( }(this, function (
$, $,
utils, u,
converse, converse,
fp, fp,
tpl_chatarea, tpl_chatarea,
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
_tearDown () { _tearDown () {
const rooms = this.chatboxes.where({'type': CHATROOMS_TYPE}); const rooms = this.chatboxes.where({'type': CHATROOMS_TYPE});
_.each(rooms, function (room) { _.each(rooms, function (room) {
utils.safeSave(room, {'connection_status': converse.ROOMSTATUS.DISCONNECTED}); u.safeSave(room, {'connection_status': converse.ROOMSTATUS.DISCONNECTED});
}); });
this.__super__._tearDown.call(this, arguments); this.__super__._tearDown.call(this, arguments);
}, },
...@@ -213,7 +213,7 @@ ...@@ -213,7 +213,7 @@
} }
// XXX: Inside plugins, all calls to the translation machinery // XXX: Inside plugins, all calls to the translation machinery
// (e.g. utils.__) should only be done in the initialize function. // (e.g. u.__) should only be done in the initialize function.
// If called before, we won't know what language the user wants, // If called before, we won't know what language the user wants,
// and it'll fall back to English. // and it'll fall back to English.
...@@ -310,7 +310,7 @@ ...@@ -310,7 +310,7 @@
function openRoom (jid) { function openRoom (jid) {
if (!utils.isValidJID(jid)) { if (!u.isValidJID(jid)) {
return converse.log( return converse.log(
`Invalid JID "${jid}" provided in URL fragment`, `Invalid JID "${jid}" provided in URL fragment`,
Strophe.LogLevel.WARN Strophe.LogLevel.WARN
...@@ -390,7 +390,7 @@ ...@@ -390,7 +390,7 @@
if (_.isNull(body)) { if (_.isNull(body)) {
return; // The message has no text return; // The message has no text
} }
if (utils.isNewMessage(stanza) && this.newMessageWillBeHidden()) { if (u.isNewMessage(stanza) && this.newMessageWillBeHidden()) {
this.save({'num_unread_general': this.get('num_unread_general') + 1}); this.save({'num_unread_general': this.get('num_unread_general') + 1});
if (this.isUserMentioned(body.textContent)) { if (this.isUserMentioned(body.textContent)) {
this.save({'num_unread': this.get('num_unread') + 1}); this.save({'num_unread': this.get('num_unread') + 1});
...@@ -400,7 +400,7 @@ ...@@ -400,7 +400,7 @@
}, },
clearUnreadMsgCounter() { clearUnreadMsgCounter() {
utils.safeSave(this, { u.safeSave(this, {
'num_unread': 0, 'num_unread': 0,
'num_unread_general': 0 'num_unread_general': 0
}); });
...@@ -465,7 +465,7 @@ ...@@ -465,7 +465,7 @@
if (this.model.get('connection_status') !== converse.ROOMSTATUS.ENTERED) { if (this.model.get('connection_status') !== converse.ROOMSTATUS.ENTERED) {
this.showSpinner(); this.showSpinner();
} }
utils.refreshWebkit(); u.refreshWebkit();
return this; return this;
}, },
...@@ -478,21 +478,21 @@ ...@@ -478,21 +478,21 @@
/* Render the UI container in which chat room messages will /* Render the UI container in which chat room messages will
* appear. * appear.
*/ */
if (!this.$('.chat-area').length) { if (_.isNull(this.el.querySelector('.chat-area'))) {
this.$('.chatroom-body').empty() const container_el = this.el.querySelector('.chatroom-body');
.append(tpl_chatarea({ container_el.innerHTML = tpl_chatarea({
'label_message': __('Message'), 'label_message': __('Message'),
'label_send': __('Send'), 'label_send': __('Send'),
'show_send_button': _converse.show_send_button, 'show_send_button': _converse.show_send_button,
'show_toolbar': _converse.show_toolbar, 'show_toolbar': _converse.show_toolbar,
'unread_msgs': __('You have unread messages') 'unread_msgs': __('You have unread messages')
})) });
.append(this.occupantsview.$el); container_el.insertAdjacentElement('beforeend', this.occupantsview.el);
this.renderToolbar(tpl_chatroom_toolbar); this.renderToolbar(tpl_chatroom_toolbar);
this.content = this.el.querySelector('.chat-content'); this.content = this.el.querySelector('.chat-content');
this.$content = $(this.content); this.$content = $(this.content);
}
this.toggleOccupants(null, true); this.toggleOccupants(null, true);
}
return this; return this;
}, },
...@@ -587,17 +587,22 @@ ...@@ -587,17 +587,22 @@
} }
if (!this.model.get('hidden_occupants')) { if (!this.model.get('hidden_occupants')) {
this.model.save({hidden_occupants: true}); this.model.save({hidden_occupants: true});
this.$('.icon-hide-users').removeClass('icon-hide-users').addClass('icon-show-users'); const icon_el = this.el.querySelector('.icon-hide-users');
this.$('.occupants').addClass('hidden'); icon_el.classList.remove('icon-hide-users');
this.$('.chat-area').addClass('full'); icon_el.classList.add('icon-show-users');
this.scrollDown(); this.el.querySelector('.chat-area').classList.add('full');
u.hideElement(this.el.querySelector('.occupants'));
} else { } else {
this.model.save({hidden_occupants: false}); this.model.save({hidden_occupants: false});
this.$('.icon-show-users').removeClass('icon-show-users').addClass('icon-hide-users'); const icon_el = this.el.querySelector('.icon-show-users');
this.$('.chat-area').removeClass('full'); if (!_.isNull(icon_el)) {
this.$('div.occupants').removeClass('hidden'); icon_el.classList.remove('icon-show-users');
this.scrollDown(); icon_el.classList.add('icon-hide-users');
}
this.el.querySelector('.chat-area').classList.remove('full');
this.el.querySelector('.occupants').classList.remove('hidden');
} }
this.scrollDown();
}, },
onOccupantClicked (ev) { onOccupantClicked (ev) {
...@@ -1228,7 +1233,7 @@ ...@@ -1228,7 +1233,7 @@
if (_converse.connection.connected) { if (_converse.connection.connected) {
this.sendUnavailablePresence(exit_msg); this.sendUnavailablePresence(exit_msg);
} }
utils.safeSave( u.safeSave(
this.model, this.model,
{'connection_status': converse.ROOMSTATUS.DISCONNECTED} {'connection_status': converse.ROOMSTATUS.DISCONNECTED}
); );
...@@ -1247,13 +1252,12 @@ ...@@ -1247,13 +1252,12 @@
* (XMLElement) stanza: The IQ stanza containing the room * (XMLElement) stanza: The IQ stanza containing the room
* config. * config.
*/ */
const $body = this.$('.chatroom-body'); const container_el = this.el.querySelector('.chatroom-body');
$body.children().addClass('hidden'); _.each(container_el.querySelectorAll('.chatroom-form-container'), u.removeElement);
// Remove any existing forms _.each(container_el.children, u.hideElement);
$body.find('form.chatroom-form').remove(); container_el.insertAdjacentHTML('beforeend', tpl_chatroom_form());
$body.append(tpl_chatroom_form());
const $form = $body.find('form.chatroom-form'); const $form = $(container_el).find('form.chatroom-form');
let $fieldset = $form.children('fieldset:first'); let $fieldset = $form.children('fieldset:first');
const $stanza = $(stanza), const $stanza = $(stanza),
$fields = $stanza.find('field'), $fields = $stanza.find('field'),
...@@ -1265,7 +1269,7 @@ ...@@ -1265,7 +1269,7 @@
$fieldset.append($('<p class="instructions">').text(instructions)); $fieldset.append($('<p class="instructions">').text(instructions));
} }
_.each($fields, function (field) { _.each($fields, function (field) {
$fieldset.append(utils.xForm2webForm(field, stanza)); $fieldset.append(u.xForm2webForm(field, stanza));
}); });
$form.append('<fieldset></fieldset>'); $form.append('<fieldset></fieldset>');
$fieldset = $form.children('fieldset:last'); $fieldset = $form.children('fieldset:last');
...@@ -1273,7 +1277,7 @@ ...@@ -1273,7 +1277,7 @@
$fieldset.append(`<input type="button" class="pure-button button-cancel" value="${__('Cancel')}"/>`); $fieldset.append(`<input type="button" class="pure-button button-cancel" value="${__('Cancel')}"/>`);
$fieldset.find('input[type=button]').on('click', (ev) => { $fieldset.find('input[type=button]').on('click', (ev) => {
ev.preventDefault(); ev.preventDefault();
this.cancelConfiguration(); this.closeForm();
}); });
$form.on('submit', (ev) => { $form.on('submit', (ev) => {
ev.preventDefault(); ev.preventDefault();
...@@ -1320,13 +1324,10 @@ ...@@ -1320,13 +1324,10 @@
const $inputs = $(form).find(':input:not([type=button]):not([type=submit])'), const $inputs = $(form).find(':input:not([type=button]):not([type=submit])'),
configArray = []; configArray = [];
$inputs.each(function () { $inputs.each(function () {
configArray.push(utils.webForm2xForm(this)); configArray.push(u.webForm2xForm(this));
}); });
this.sendConfiguration(configArray, resolve, reject); this.sendConfiguration(configArray, resolve, reject);
this.$el.find('div.chatroom-form-container').hide((el) => { this.closeForm();
$(el).remove();
this.renderAfterTransition();
});
}); });
}, },
...@@ -1376,15 +1377,12 @@ ...@@ -1376,15 +1377,12 @@
}); });
}, },
cancelConfiguration () { closeForm () {
/* Remove the configuration form without submitting and /* Remove the configuration form without submitting and
* return to the chat view. * return to the chat view.
*/ */
this.$el.find('div.chatroom-form-container').hide( u.removeElement(this.el.querySelector('.chatroom-form-container'));
(el) => {
$(el).remove();
this.renderAfterTransition(); this.renderAfterTransition();
});
}, },
fetchRoomConfiguration (handler) { fetchRoomConfiguration (handler) {
...@@ -1499,8 +1497,7 @@ ...@@ -1499,8 +1497,7 @@
else { else {
nick_el.classList.remove('error'); nick_el.classList.remove('error');
} }
this.$el.find('.chatroom-form-container') this.el.querySelector('.chatroom-form-container').outerHTML = tpl_spinner();
.replaceWith(tpl_spinner);
this.join(nick); this.join(nick);
}, },
...@@ -1591,16 +1588,25 @@ ...@@ -1591,16 +1588,25 @@
} }
}, },
hideChatRoomContents () {
const container_el = this.el.querySelector('.chatroom-body');
if (!_.isNull(container_el)) {
_.each(container_el.children, (child) => { child.classList.add('hidden'); });
}
},
renderNicknameForm (message) { renderNicknameForm (message) {
/* Render a form which allows the user to choose their /* Render a form which allows the user to choose their
* nickname. * nickname.
*/ */
this.$('.chatroom-body').children().addClass('hidden'); this.hideChatRoomContents();
this.$('span.centered.spinner').remove(); _.each(this.el.querySelectorAll('span.centered.spinner'), u.removeElement);
if (!_.isString(message)) { if (!_.isString(message)) {
message = ''; message = '';
} }
this.$('.chatroom-body').append( const container_el = this.el.querySelector('.chatroom-body');
container_el.insertAdjacentHTML(
'beforeend',
tpl_chatroom_nickname_form({ tpl_chatroom_nickname_form({
heading: __('Please choose your nickname'), heading: __('Please choose your nickname'),
label_nickname: __('Nickname'), label_nickname: __('Nickname'),
...@@ -1608,36 +1614,44 @@ ...@@ -1608,36 +1614,44 @@
validation_message: message validation_message: message
})); }));
this.model.save('connection_status', converse.ROOMSTATUS.NICKNAME_REQUIRED); this.model.save('connection_status', converse.ROOMSTATUS.NICKNAME_REQUIRED);
this.$('.chatroom-form').on('submit', this.submitNickname.bind(this));
const form_el = this.el.querySelector('.chatroom-form');
form_el.addEventListener('submit', this.submitNickname.bind(this));
}, },
submitPassword (ev) { submitPassword (ev) {
ev.preventDefault(); ev.preventDefault();
const password = this.$el.find('.chatroom-form').find('input[type=password]').val(); const password = this.$el.find('.chatroom-form').find('input[type=password]').val();
this.$el.find('.chatroom-form-container').replaceWith(tpl_spinner); this.el.querySelector('.chatroom-form-container').outerHTML = tpl_spinner();
this.join(this.model.get('nick'), password); this.join(this.model.get('nick'), password);
}, },
renderPasswordForm () { renderPasswordForm () {
this.$('.chatroom-body').children().addClass('hidden'); const container_el = this.el.querySelector('.chatroom-body');
this.$('span.centered.spinner').remove(); _.each(container_el.children, u.hideElement);
this.$('.chatroom-body').append( _.each(this.el.querySelectorAll('.spinner'), u.removeElement);
container_el.insertAdjacentHTML('beforeend',
tpl_chatroom_password_form({ tpl_chatroom_password_form({
heading: __('This chatroom requires a password'), heading: __('This chatroom requires a password'),
label_password: __('Password: '), label_password: __('Password: '),
label_submit: __('Submit') label_submit: __('Submit')
})); }));
this.model.save('connection_status', converse.ROOMSTATUS.PASSWORD_REQUIRED); this.model.save('connection_status', converse.ROOMSTATUS.PASSWORD_REQUIRED);
this.$('.chatroom-form').on('submit', this.submitPassword.bind(this)); this.el.querySelector('.chatroom-form').addEventListener('submit', this.submitPassword.bind(this));
}, },
showDisconnectMessage (msg) { showDisconnectMessage (msg) {
this.$('.chat-area').addClass('hidden'); u.hideElement(this.el.querySelector('.chat-area'));
this.$('.occupants').addClass('hidden'); u.hideElement(this.el.querySelector('.occupants'));
this.$('span.centered.spinner').remove(); _.each(this.el.querySelectorAll('.spinner'), u.removeElement);
this.$('.chatroom-body').append(tpl_chatroom_disconnect({ this.el.querySelector('.chatroom-body').insertAdjacentHTML(
'beforeend',
tpl_chatroom_disconnect({
'disconnect_message': msg 'disconnect_message': msg
})); })
);
}, },
getMessageFromStatus (stat, stanza, is_self) { getMessageFromStatus (stat, stanza, is_self) {
...@@ -1856,8 +1870,13 @@ ...@@ -1856,8 +1870,13 @@
}, },
showSpinner () { showSpinner () {
this.$('.chatroom-body').children().addClass('hidden'); u.removeElement(this.el.querySelector('.spinner'));
this.$el.find('.chatroom-body').prepend(tpl_spinner);
const container_el = this.el.querySelector('.chatroom-body');
const children = Array.prototype.slice.call(container_el.children, 0);
container_el.insertAdjacentHTML('afterbegin', tpl_spinner());
_.each(children, u.hideElement);
}, },
hideSpinner () { hideSpinner () {
...@@ -1867,7 +1886,7 @@ ...@@ -1867,7 +1886,7 @@
*/ */
const spinner = this.el.querySelector('.spinner'); const spinner = this.el.querySelector('.spinner');
if (!_.isNull(spinner)) { if (!_.isNull(spinner)) {
spinner.parentNode.removeChild(spinner); u.removeElement(spinner);
this.renderAfterTransition(); this.renderAfterTransition();
} }
return this; return this;
...@@ -2448,13 +2467,13 @@ ...@@ -2448,13 +2467,13 @@
renderTab () { renderTab () {
const controlbox = _converse.chatboxes.get('controlbox'); const controlbox = _converse.chatboxes.get('controlbox');
const chatrooms = fp.filter( const chatrooms = fp.filter(
_.partial(utils.isOfType, CHATROOMS_TYPE), _.partial(u.isOfType, CHATROOMS_TYPE),
_converse.chatboxes.models _converse.chatboxes.models
); );
this.tab_el.innerHTML = tpl_chatrooms_tab({ this.tab_el.innerHTML = tpl_chatrooms_tab({
'label_rooms': __('Rooms'), 'label_rooms': __('Rooms'),
'is_current': controlbox.get('active-panel') === ROOMS_PANEL_ID, 'is_current': controlbox.get('active-panel') === ROOMS_PANEL_ID,
'num_unread': fp.sum(fp.map(fp.curry(utils.getAttribute)('num_unread'), chatrooms)) 'num_unread': fp.sum(fp.map(fp.curry(u.getAttribute)('num_unread'), chatrooms))
}); });
}, },
......
src/templates/chatarea.html
View file @ 85bea600
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<ul class="chat-toolbar no-text-select"></ul> <ul class="chat-toolbar no-text-select"></ul>
{[ } ]} {[ } ]}
<textarea type="text" class="chat-textarea {[ if (o.show_send_button) { ]}chat-textarea-send-button{[ } ]}" <textarea type="text" class="chat-textarea {[ if (o.show_send_button) { ]}chat-textarea-send-button{[ } ]}"
placeholder="{{{o.label_message}}}"/> placeholder="{{{o.label_message}}}"></textarea>
{[ if (o.show_send_button) { ]} {[ if (o.show_send_button) { ]}
<button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button> <button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button>
{[ } ]} {[ } ]}
......
src/templates/chatroom.html
View file @ 85bea600
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom"></div> <div class="chat-head chat-head-chatroom"></div>
<div class="chat-body chatroom-body"><span class="spinner centered"/></div> <div class="chat-body chatroom-body"></div>
</div> </div>
src/utils.js
View file @ 85bea600
...@@ -104,6 +104,18 @@ ...@@ -104,6 +104,18 @@
var u = {}; var u = {};
u.removeElement = function (el) {
if (!_.isNil(el) && !_.isNil(el.parentNode)) {
el.parentNode.removeChild(el);
}
}
u.hideElement = function (el) {
if (!_.isNil(el)) {
el.classList.add('hidden');
}
}
u.addHyperlinks = function (text) { u.addHyperlinks = function (text) {
const list = text.match(URL_REGEX) || []; const list = text.match(URL_REGEX) || [];
var links = []; var links = [];
......
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