From 9aefd2739f0b26d8b37b725933af385aa237e837 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Fri, 17 Nov 2017 14:14:42 +0100
Subject: [PATCH] Remove jquery as dependency for converse-profile.js

---
 css/converse.css        |  2 +
 css/inverse.css         |  2 +
 sass/_controlbox.scss   |  3 ++
 src/converse-profile.js | 85 ++++++++++++++++++++---------------------
 4 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/css/converse.css b/css/converse.css
index 28257032c..8f8e7ac08 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -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 {
diff --git a/css/inverse.css b/css/inverse.css
index a5fb1e75b..d50d78b2a 100644
--- a/css/inverse.css
+++ b/css/inverse.css
@@ -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 {
diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss
index 1ae77c76d..d4f4a5ce2 100644
--- a/sass/_controlbox.scss
+++ b/sass/_controlbox.scss
@@ -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 {
diff --git a/src/converse-profile.js b/src/converse-profile.js
index 0b21e641f..3b7d1fd0a 100644
--- a/src/converse-profile.js
+++ b/src/converse-profile.js
@@ -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')
+                    });
                 }
             });
         }