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

Remove jquery as dependency for converse-profile.js

Browse Source
This commit is contained in:
JC Brand 2017-11-17 14:14:42 +01:00
parent 9d1c6236ac
commit 9aefd2739f
4 changed files with 49 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/converse.css
View File

@ -2270,6 +2270,8 @@
#conversejs #controlbox .xmpp-status-menu { #conversejs #controlbox .xmpp-status-menu {
text-align: left; text-align: left;
box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); } box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
#conversejs #controlbox .xmpp-status-menu.collapsed {
box-shadow: none; }
#conversejs #controlbox .xmpp-status-menu li { #conversejs #controlbox .xmpp-status-menu li {
padding: 2px; } padding: 2px; }
#conversejs #controlbox .xmpp-status-menu li a { #conversejs #controlbox .xmpp-status-menu li a {

2
css/inverse.css
View File

@ -2356,6 +2356,8 @@ body {
#conversejs #controlbox .xmpp-status-menu { #conversejs #controlbox .xmpp-status-menu {
text-align: left; text-align: left;
box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); } box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); }
#conversejs #controlbox .xmpp-status-menu.collapsed {
box-shadow: none; }
#conversejs #controlbox .xmpp-status-menu li { #conversejs #controlbox .xmpp-status-menu li {
padding: 2px; } padding: 2px; }
#conversejs #controlbox .xmpp-status-menu li a { #conversejs #controlbox .xmpp-status-menu li a {

3
sass/_controlbox.scss
View File

@ -506,6 +506,9 @@
.xmpp-status-menu { .xmpp-status-menu {
text-align: left; text-align: left;
box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4); box-shadow: 1px 4px 10px 1px rgba(0, 0, 0, 0.4);
&.collapsed {
box-shadow: none;
}
li { li {
padding: 2px; padding: 2px;
a { a {

85
src/converse-profile.js
View File

@ -7,8 +7,7 @@
/*global define */ /*global define */
(function (root, factory) { (function (root, factory) {
define(["jquery.noconflict", define(["converse-core",
"converse-core",
"tpl!change_status_message", "tpl!change_status_message",
"tpl!chat_status", "tpl!chat_status",
"tpl!choose_status", "tpl!choose_status",
@ -16,7 +15,6 @@
"converse-vcard" "converse-vcard"
], factory); ], factory);
}(this, function ( }(this, function (
$,
converse, converse,
tpl_change_status_message, tpl_change_status_message,
tpl_chat_status, tpl_chat_status,
@ -54,28 +52,32 @@
render () { render () {
// Replace the default dropdown with something nicer // Replace the default dropdown with something nicer
const $select = this.$el.find('select#select-xmpp-status'); const select = this.el.querySelector('select#select-xmpp-status')
const chat_status = this.model.get('status') || 'offline'; const chat_status = this.model.get('status') || 'offline';
const options = $('option', $select); this.el.innerHTML = tpl_choose_status();
const options_list = [];
this.$el.html(tpl_choose_status()); this.el.querySelector('#fancy-xmpp-status-select')
this.$el.find('#fancy-xmpp-status-select') .innerHTML = tpl_chat_status({
.html(tpl_chat_status({ 'status_message': this.model.get('status_message') ||
'status_message': this.model.get('status_message') || __("I am %1$s", this.getPrettyStatus(chat_status)), __("I am %1$s", this.getPrettyStatus(chat_status)),
'chat_status': chat_status, 'chat_status': chat_status,
'desc_custom_status': __('Click here to write a custom status message'), 'desc_custom_status': __('Click here to write a custom status message'),
'desc_change_status': __('Click to change your chat status') 'desc_change_status': __('Click to change your chat status')
})); });
// iterate through all the <option> elements and add option values // iterate through all the <option> elements and add option values
options.each(function () { const options_list = _.map(
options_list.push(tpl_status_option({ select.querySelectorAll('option'),
'value': $(this).val(), function (el) {
'text': this.text return tpl_status_option({
})); 'value': el.value,
}); 'text': el.text
const $options_target = this.$el.find("#target dd ul").hide(); });
$options_target.append(options_list.join('')); }
$select.remove(); );
const options_target = this.el.querySelector("#target dd ul");
options_target.classList.add('collapsed');
options_target.innerHTML = options_list.join('');
return this; return this;
}, },
@ -84,39 +86,35 @@
utils.slideInAllElements( utils.slideInAllElements(
document.querySelectorAll('#conversejs .contact-form-container') document.querySelectorAll('#conversejs .contact-form-container')
); );
$(ev.target).parent().parent().siblings('dd').find('ul').toggle('fast'); utils.slideToggleElement(this.el.querySelector("#target dd ul"));
}, },
renderStatusChangeForm (ev) { renderStatusChangeForm (ev) {
ev.preventDefault(); ev.preventDefault();
const status_message = _converse.xmppstatus.get('status_message') || ''; const xmppstatus = this.el.querySelector('.xmpp-status');
const input = tpl_change_status_message({ xmppstatus.parentNode.classList.add('no-border');
'status_message': status_message, xmppstatus.outerHTML = tpl_change_status_message({
'status_message': _converse.xmppstatus.get('status_message') || '',
'label_custom_status': __('Custom status'), 'label_custom_status': __('Custom status'),
'label_save': __('Save') 'label_save': __('Save')
}); });
const $xmppstatus = this.$el.find('.xmpp-status'); this.el.querySelector('.custom-xmpp-status').focus();
$xmppstatus.parent().addClass('no-border');
$xmppstatus.replaceWith(input);
this.$el.find('.custom-xmpp-status').focus().focus();
}, },
setStatusMessage (ev) { setStatusMessage (ev) {
ev.preventDefault(); ev.preventDefault();
this.model.setStatusMessage($(ev.target).find('input').val()); this.model.setStatusMessage(ev.target.querySelector('input').value);
}, },
setStatus (ev) { setStatus (ev) {
ev.preventDefault(); ev.preventDefault();
const $el = $(ev.currentTarget), const value = ev.currentTarget.getAttribute('data-value');
value = $el.attr('data-value');
if (value === 'logout') { if (value === 'logout') {
this.$el.find(".dropdown dd ul").hide();
_converse.logOut(); _converse.logOut();
} else { } else {
this.model.setStatus(value); this.model.setStatus(value);
this.$el.find(".dropdown dd ul").hide();
} }
utils.slideIn(this.el.querySelector("#target dd ul"));
}, },
getPrettyStatus (stat) { getPrettyStatus (stat) {
@ -140,13 +138,14 @@
// For translators: the %1$s part gets replaced with the status // For translators: the %1$s part gets replaced with the status
// Example, I am online // Example, I am online
const status_message = model.get('status_message') || __("I am %1$s", this.getPrettyStatus(stat)); const status_message = model.get('status_message') || __("I am %1$s", this.getPrettyStatus(stat));
this.$el.find('#fancy-xmpp-status-select').removeClass('no-border').html( const fancy_select = this.el.querySelector('#fancy-xmpp-status-select');
tpl_chat_status({ fancy_select.classList.remove('no-border');
'chat_status': stat, fancy_select.innerHTML = tpl_chat_status({
'status_message': status_message, 'chat_status': stat,
'desc_custom_status': __('Click here to write a custom status message'), 'status_message': status_message,
'desc_change_status': __('Click to change your chat status') 'desc_custom_status': __('Click here to write a custom status message'),
})); 'desc_change_status': __('Click to change your chat status')
});
} }
}); });
} }