|
|
@@ -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')
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+}));
|
JC Brand