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 {
text-align: left;
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 {
padding: 2px; }
#conversejs #controlbox .xmpp-status-menu li a {

2
css/inverse.css
View File

@ -2356,6 +2356,8 @@ body {
#conversejs #controlbox .xmpp-status-menu {
text-align: left;
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 {
padding: 2px; }
#conversejs #controlbox .xmpp-status-menu li a {

3
sass/_controlbox.scss
View File

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

85
src/converse-profile.js
View File

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