From 9d1c6236acdf99e16b07b648a0c968ad3c7a431c Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Fri, 17 Nov 2017 13:32:03 +0100
Subject: [PATCH] Move the xmpp status (e.g. profile) view into separate plugin

---
 src/config.js              |   1 +
 src/converse-controlbox.js | 129 +------------------------------
 src/converse-core.js       |   1 +
 src/converse-profile.js    | 154 +++++++++++++++++++++++++++++++++++++
 4 files changed, 158 insertions(+), 127 deletions(-)
 create mode 100644 src/converse-profile.js

diff --git a/src/config.js b/src/config.js
index 30630ea5c..4aed56dd4 100644
--- a/src/config.js
+++ b/src/config.js
@@ -72,6 +72,7 @@ require.config({
         "converse-notification":    "src/converse-notification",
         "converse-otr":             "src/converse-otr",
         "converse-ping":            "src/converse-ping",
+        "converse-profile":         "src/converse-profile",
         "converse-register":        "src/converse-register",
         "converse-roomslist":       "src/converse-roomslist",
         "converse-rosterview":      "src/converse-rosterview",
diff --git a/src/converse-controlbox.js b/src/converse-controlbox.js
index 369f85b83..14bf82450 100644
--- a/src/converse-controlbox.js
+++ b/src/converse-controlbox.js
@@ -10,44 +10,33 @@
     define(["jquery.noconflict",
             "converse-core",
             "lodash.fp",
-            "virtual-dom",
-            "vdom-parser",
             "tpl!add_contact_dropdown",
             "tpl!add_contact_form",
             "tpl!converse_brand_heading",
-            "tpl!change_status_message",
-            "tpl!chat_status",
-            "tpl!choose_status",
             "tpl!contacts_panel",
             "tpl!contacts_tab",
             "tpl!controlbox",
             "tpl!controlbox_toggle",
             "tpl!login_panel",
             "tpl!search_contact",
-            "tpl!status_option",
             "tpl!spinner",
             "converse-chatview",
-            "converse-rosterview"
+            "converse-rosterview",
+            "converse-profile"
     ], factory);
 }(this, function (
             $,
             converse,
             fp,
-            vdom,
-            vdom_parser,
             tpl_add_contact_dropdown,
             tpl_add_contact_form,
             tpl_brand_heading,
-            tpl_change_status_message,
-            tpl_chat_status,
-            tpl_choose_status,
             tpl_contacts_panel,
             tpl_contacts_tab,
             tpl_controlbox,
             tpl_controlbox_toggle,
             tpl_login_panel,
             tpl_search_contact,
-            tpl_status_option,
             tpl_spinner
         ) {
     "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({
                 tagName: 'div',
                 className: 'controlbox-pane',
diff --git a/src/converse-core.js b/src/converse-core.js
index d93669d52..56450548d 100755
--- a/src/converse-core.js
+++ b/src/converse-core.js
@@ -78,6 +78,7 @@
         'converse-notification',
         'converse-otr',
         'converse-ping',
+        'converse-profile',
         'converse-register',
         'converse-roomslist',
         'converse-rosterview',
diff --git a/src/converse-profile.js b/src/converse-profile.js
new file mode 100644
index 000000000..0b21e641f
--- /dev/null
+++ b/src/converse-profile.js
@@ -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')
+                        }));
+                }
+            });
+        }
+    });
+}));