Move the xmpp status (e.g. profile) view into separate plugin
This commit is contained in:
parent
d395387861
commit
9d1c6236ac
@ -72,6 +72,7 @@ require.config({
|
|||||||
"converse-notification": "src/converse-notification",
|
"converse-notification": "src/converse-notification",
|
||||||
"converse-otr": "src/converse-otr",
|
"converse-otr": "src/converse-otr",
|
||||||
"converse-ping": "src/converse-ping",
|
"converse-ping": "src/converse-ping",
|
||||||
|
"converse-profile": "src/converse-profile",
|
||||||
"converse-register": "src/converse-register",
|
"converse-register": "src/converse-register",
|
||||||
"converse-roomslist": "src/converse-roomslist",
|
"converse-roomslist": "src/converse-roomslist",
|
||||||
"converse-rosterview": "src/converse-rosterview",
|
"converse-rosterview": "src/converse-rosterview",
|
||||||
|
@ -10,44 +10,33 @@
|
|||||||
define(["jquery.noconflict",
|
define(["jquery.noconflict",
|
||||||
"converse-core",
|
"converse-core",
|
||||||
"lodash.fp",
|
"lodash.fp",
|
||||||
"virtual-dom",
|
|
||||||
"vdom-parser",
|
|
||||||
"tpl!add_contact_dropdown",
|
"tpl!add_contact_dropdown",
|
||||||
"tpl!add_contact_form",
|
"tpl!add_contact_form",
|
||||||
"tpl!converse_brand_heading",
|
"tpl!converse_brand_heading",
|
||||||
"tpl!change_status_message",
|
|
||||||
"tpl!chat_status",
|
|
||||||
"tpl!choose_status",
|
|
||||||
"tpl!contacts_panel",
|
"tpl!contacts_panel",
|
||||||
"tpl!contacts_tab",
|
"tpl!contacts_tab",
|
||||||
"tpl!controlbox",
|
"tpl!controlbox",
|
||||||
"tpl!controlbox_toggle",
|
"tpl!controlbox_toggle",
|
||||||
"tpl!login_panel",
|
"tpl!login_panel",
|
||||||
"tpl!search_contact",
|
"tpl!search_contact",
|
||||||
"tpl!status_option",
|
|
||||||
"tpl!spinner",
|
"tpl!spinner",
|
||||||
"converse-chatview",
|
"converse-chatview",
|
||||||
"converse-rosterview"
|
"converse-rosterview",
|
||||||
|
"converse-profile"
|
||||||
], factory);
|
], factory);
|
||||||
}(this, function (
|
}(this, function (
|
||||||
$,
|
$,
|
||||||
converse,
|
converse,
|
||||||
fp,
|
fp,
|
||||||
vdom,
|
|
||||||
vdom_parser,
|
|
||||||
tpl_add_contact_dropdown,
|
tpl_add_contact_dropdown,
|
||||||
tpl_add_contact_form,
|
tpl_add_contact_form,
|
||||||
tpl_brand_heading,
|
tpl_brand_heading,
|
||||||
tpl_change_status_message,
|
|
||||||
tpl_chat_status,
|
|
||||||
tpl_choose_status,
|
|
||||||
tpl_contacts_panel,
|
tpl_contacts_panel,
|
||||||
tpl_contacts_tab,
|
tpl_contacts_tab,
|
||||||
tpl_controlbox,
|
tpl_controlbox,
|
||||||
tpl_controlbox_toggle,
|
tpl_controlbox_toggle,
|
||||||
tpl_login_panel,
|
tpl_login_panel,
|
||||||
tpl_search_contact,
|
tpl_search_contact,
|
||||||
tpl_status_option,
|
|
||||||
tpl_spinner
|
tpl_spinner
|
||||||
) {
|
) {
|
||||||
"use strict";
|
"use strict";
|
||||||
@ -552,120 +541,6 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
_converse.XMPPStatusView = Backbone.View.extend({
|
|
||||||
el: "form#set-xmpp-status",
|
|
||||||
events: {
|
|
||||||
"click a.choose-xmpp-status": "toggleOptions",
|
|
||||||
"click #fancy-xmpp-status-select a.change-xmpp-status-message": "renderStatusChangeForm",
|
|
||||||
"submit": "setStatusMessage",
|
|
||||||
"click .dropdown dd ul li a": "setStatus"
|
|
||||||
},
|
|
||||||
|
|
||||||
initialize () {
|
|
||||||
this.model.on("change:status", this.updateStatusUI, this);
|
|
||||||
this.model.on("change:status_message", this.updateStatusUI, this);
|
|
||||||
this.model.on("update-status-ui", this.updateStatusUI, this);
|
|
||||||
},
|
|
||||||
|
|
||||||
render () {
|
|
||||||
// Replace the default dropdown with something nicer
|
|
||||||
const $select = this.$el.find('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')
|
|
||||||
}));
|
|
||||||
// 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();
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
|
|
||||||
toggleOptions (ev) {
|
|
||||||
ev.preventDefault();
|
|
||||||
utils.slideInAllElements(
|
|
||||||
document.querySelectorAll('#conversejs .contact-form-container')
|
|
||||||
);
|
|
||||||
$(ev.target).parent().parent().siblings('dd').find('ul').toggle('fast');
|
|
||||||
},
|
|
||||||
|
|
||||||
renderStatusChangeForm (ev) {
|
|
||||||
ev.preventDefault();
|
|
||||||
const status_message = _converse.xmppstatus.get('status_message') || '';
|
|
||||||
const input = tpl_change_status_message({
|
|
||||||
'status_message': 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();
|
|
||||||
},
|
|
||||||
|
|
||||||
setStatusMessage (ev) {
|
|
||||||
ev.preventDefault();
|
|
||||||
this.model.setStatusMessage($(ev.target).find('input').val());
|
|
||||||
},
|
|
||||||
|
|
||||||
setStatus (ev) {
|
|
||||||
ev.preventDefault();
|
|
||||||
const $el = $(ev.currentTarget),
|
|
||||||
value = $el.attr('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();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
getPrettyStatus (stat) {
|
|
||||||
if (stat === 'chat') {
|
|
||||||
return __('online');
|
|
||||||
} else if (stat === 'dnd') {
|
|
||||||
return __('busy');
|
|
||||||
} else if (stat === 'xa') {
|
|
||||||
return __('away for long');
|
|
||||||
} else if (stat === 'away') {
|
|
||||||
return __('away');
|
|
||||||
} else if (stat === 'offline') {
|
|
||||||
return __('offline');
|
|
||||||
} else {
|
|
||||||
return __(stat) || __('online');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
updateStatusUI (model) {
|
|
||||||
const stat = model.get('status');
|
|
||||||
// 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')
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
_converse.ContactsPanel = Backbone.View.extend({
|
_converse.ContactsPanel = Backbone.View.extend({
|
||||||
tagName: 'div',
|
tagName: 'div',
|
||||||
className: 'controlbox-pane',
|
className: 'controlbox-pane',
|
||||||
|
@ -78,6 +78,7 @@
|
|||||||
'converse-notification',
|
'converse-notification',
|
||||||
'converse-otr',
|
'converse-otr',
|
||||||
'converse-ping',
|
'converse-ping',
|
||||||
|
'converse-profile',
|
||||||
'converse-register',
|
'converse-register',
|
||||||
'converse-roomslist',
|
'converse-roomslist',
|
||||||
'converse-rosterview',
|
'converse-rosterview',
|
||||||
|
154
src/converse-profile.js
Normal file
154
src/converse-profile.js
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
// Converse.js (A browser based XMPP chat client)
|
||||||
|
// http://conversejs.org
|
||||||
|
//
|
||||||
|
// Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
|
||||||
|
// Licensed under the Mozilla Public License (MPLv2)
|
||||||
|
//
|
||||||
|
/*global define */
|
||||||
|
|
||||||
|
(function (root, factory) {
|
||||||
|
define(["jquery.noconflict",
|
||||||
|
"converse-core",
|
||||||
|
"tpl!change_status_message",
|
||||||
|
"tpl!chat_status",
|
||||||
|
"tpl!choose_status",
|
||||||
|
"tpl!status_option",
|
||||||
|
"converse-vcard"
|
||||||
|
], factory);
|
||||||
|
}(this, function (
|
||||||
|
$,
|
||||||
|
converse,
|
||||||
|
tpl_change_status_message,
|
||||||
|
tpl_chat_status,
|
||||||
|
tpl_choose_status,
|
||||||
|
tpl_status_option
|
||||||
|
) {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const { Strophe, Backbone, Promise, utils, _, moment } = converse.env;
|
||||||
|
|
||||||
|
|
||||||
|
converse.plugins.add('converse-profile', {
|
||||||
|
|
||||||
|
initialize () {
|
||||||
|
/* The initialize function gets called as soon as the plugin is
|
||||||
|
* loaded by converse.js's plugin machinery.
|
||||||
|
*/
|
||||||
|
const { _converse } = this,
|
||||||
|
{ __ } = _converse;
|
||||||
|
|
||||||
|
_converse.XMPPStatusView = Backbone.View.extend({
|
||||||
|
el: "form#set-xmpp-status",
|
||||||
|
events: {
|
||||||
|
"click a.choose-xmpp-status": "toggleOptions",
|
||||||
|
"click #fancy-xmpp-status-select a.change-xmpp-status-message": "renderStatusChangeForm",
|
||||||
|
"submit": "setStatusMessage",
|
||||||
|
"click .dropdown dd ul li a": "setStatus"
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize () {
|
||||||
|
this.model.on("change:status", this.updateStatusUI, this);
|
||||||
|
this.model.on("change:status_message", this.updateStatusUI, this);
|
||||||
|
this.model.on("update-status-ui", this.updateStatusUI, this);
|
||||||
|
},
|
||||||
|
|
||||||
|
render () {
|
||||||
|
// Replace the default dropdown with something nicer
|
||||||
|
const $select = this.$el.find('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')
|
||||||
|
}));
|
||||||
|
// 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();
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleOptions (ev) {
|
||||||
|
ev.preventDefault();
|
||||||
|
utils.slideInAllElements(
|
||||||
|
document.querySelectorAll('#conversejs .contact-form-container')
|
||||||
|
);
|
||||||
|
$(ev.target).parent().parent().siblings('dd').find('ul').toggle('fast');
|
||||||
|
},
|
||||||
|
|
||||||
|
renderStatusChangeForm (ev) {
|
||||||
|
ev.preventDefault();
|
||||||
|
const status_message = _converse.xmppstatus.get('status_message') || '';
|
||||||
|
const input = tpl_change_status_message({
|
||||||
|
'status_message': 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();
|
||||||
|
},
|
||||||
|
|
||||||
|
setStatusMessage (ev) {
|
||||||
|
ev.preventDefault();
|
||||||
|
this.model.setStatusMessage($(ev.target).find('input').val());
|
||||||
|
},
|
||||||
|
|
||||||
|
setStatus (ev) {
|
||||||
|
ev.preventDefault();
|
||||||
|
const $el = $(ev.currentTarget),
|
||||||
|
value = $el.attr('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();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getPrettyStatus (stat) {
|
||||||
|
if (stat === 'chat') {
|
||||||
|
return __('online');
|
||||||
|
} else if (stat === 'dnd') {
|
||||||
|
return __('busy');
|
||||||
|
} else if (stat === 'xa') {
|
||||||
|
return __('away for long');
|
||||||
|
} else if (stat === 'away') {
|
||||||
|
return __('away');
|
||||||
|
} else if (stat === 'offline') {
|
||||||
|
return __('offline');
|
||||||
|
} else {
|
||||||
|
return __(stat) || __('online');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
updateStatusUI (model) {
|
||||||
|
const stat = model.get('status');
|
||||||
|
// 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')
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}));
|
Loading…
Reference in New Issue
Block a user