Move common modal view code into a base class

src/config.js

@@ -25,7 +25,7 @@ require.config({
         "backbone.orderedlistview": "node_modules/backbone.overview/dist/backbone.orderedlistview",
         "backbone.overview":        "node_modules/backbone.overview/dist/backbone.overview",
         "backbone.vdomview":        "node_modules/backbone.vdomview/dist/backbone.vdomview",
-        "bootstrap.native":         "node_modules/bootstrap.native/dist/bootstrap-native-v4",
+        "bootstrap":                "node_modules/bootstrap.native/dist/bootstrap-native-v4",
         "emojione":                 "node_modules/emojione/lib/js/emojione",
         "es6-promise":              "node_modules/es6-promise/dist/es6-promise.auto",
         "eventemitter":             "node_modules/otr/build/dep/eventemitter",
@@ -71,13 +71,14 @@ require.config({
         "converse-core":            "src/converse-core",
         "converse-disco":           "src/converse-disco",
         "converse-dragresize":      "src/converse-dragresize",
-        "converse-headline":        "src/converse-headline",
         "converse-fullscreen":      "src/converse-fullscreen",
+        "converse-headline":        "src/converse-headline",
         "converse-mam":             "src/converse-mam",
         "converse-minimize":        "src/converse-minimize",
+        "converse-modal":           "src/converse-modal",
         "converse-muc":             "src/converse-muc",
-        "converse-muc-views":       "src/converse-muc-views",
         "converse-muc-embedded":    "src/converse-muc-embedded",
+        "converse-muc-views":       "src/converse-muc-views",
         "converse-notification":    "src/converse-notification",
         "converse-otr":             "src/converse-otr",
         "converse-ping":            "src/converse-ping",
@@ -135,8 +136,8 @@ require.config({
 
     // define module dependencies for modules not using define
     shim: {
-        'backbone.overview':        { deps: ['backbone.nativeview'] },
         'backbone.orderedlistview': { deps: ['backbone.nativeview'] },
+        'backbone.overview':        { deps: ['backbone.nativeview'] },
         'backbone.vdomview':        { deps: ['backbone.nativeview'] },
         'awesomplete':              { exports: 'Awesomplete'},
         'emojione':                 { exports: 'emojione'},

src/converse-controlbox.js

@@ -229,6 +229,14 @@
                     closed: !_converse.show_controlbox_by_default
                 })
 
+
+            _converse.AddContactModal = Backbone.VDOMView.extend({
+                events: {
+                    'submit form': 'addContact'
+                },
+            });
+
+
             _converse.ControlBoxView = _converse.ChatBoxView.extend({
                 tagName: 'div',
                 className: 'chatbox',

src/converse-core.js

@@ -78,6 +78,7 @@
         'converse-headline',
         'converse-mam',
         'converse-minimize',
+        'converse-modal',
         'converse-muc',
         'converse-muc-embedded',
         'converse-muc-views',

src/converse-modal.js

@@ -0,0 +1,49 @@
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define([
+            "converse-core",
+            "bootstrap",
+            "underscore",
+            "backbone",
+            "backbone.vdomview"
+        ], factory);
+   }
+}(this, function (converse, bootstrap, _, Backbone) {
+    "use strict";
+
+
+    converse.plugins.add('converse-modal', {
+
+        initialize () {
+            const { _converse } = this;
+
+            _converse.BootstrapModal = Backbone.VDOMView.extend({
+
+                initialize () {
+                    this.render().insertIntoDOM();
+                    this.modal = new bootstrap.Modal(this.el, {
+                        backdrop: 'static',
+                        keyboard: true
+                    });
+                    this.el.addEventListener('hide.bs.modal', (event) => {
+                        if (!_.isNil(this.trigger_el)) {
+                            this.trigger_el.classList.remove('selected');
+                        }
+                    }, false);
+                },
+
+                insertIntoDOM () {
+                    const container_el = _converse.chatboxviews.el.querySelector("#converse-modals");
+                    container_el.insertAdjacentElement('beforeEnd', this.el);
+                },
+
+                show (ev) {
+                    this.trigger_el = ev.target;
+                    this.trigger_el.classList.add('selected');
+                    this.render();
+                    this.modal.show();
+                }
+            });
+        }
+    });
+}));

src/converse-muc-views.js

@@ -1,10 +1,9 @@
 // Converse.js (A browser based XMPP chat client)
 // http://conversejs.org
 //
-// Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
+// Copyright (c) 2012-2018, Jan-Carel Brand <jc@opkode.com>
 // Licensed under the Mozilla Public License (MPLv2)
 //
-/*global define */
 
 /* This is a Converse.js plugin which add support for multi-user chat rooms, as
  * specified in XEP-0045 Multi-user chat.
@@ -12,7 +11,7 @@
 (function (root, factory) {
     define([
         "converse-core",
-        "bootstrap.native",
+        "bootstrap",
         "tpl!add_chatroom_modal",
         "tpl!chatarea",
         "tpl!chatroom",
@@ -34,6 +33,7 @@
         "tpl!rooms_results",
         "tpl!spinner",
         "awesomplete",
+        "converse-modal"
     ], factory);
 }(this, function (
     converse,
@@ -93,7 +93,7 @@
          * If the setting "strict_plugin_dependencies" is set to true,
          * an error will be raised if the plugin is not found.
          */
-        dependencies: ["converse-controlbox"],
+        dependencies: ["converse-modal", "converse-controlbox"],
 
         overrides: {
 
@@ -216,7 +216,8 @@
             }
 
             
-            _converse.ListChatRoomsModal = Backbone.VDOMView.extend({
+            _converse.ListChatRoomsModal = _converse.BootstrapModal.extend({
+
                 events: {
                     'submit form': 'showRooms',
                     'click a.room-info': 'toggleRoomInfo',
@@ -226,11 +227,7 @@
                 },
 
                 initialize () {
-                    this.render().insertIntoDOM();
-                    this.modal = new bootstrap.Modal(this.el, {
-                        backdrop: 'static',
-                        keyboard: true
-                    });
+                    _converse.BootstrapModal.prototype.initialize.apply(this, arguments);
                     this.model.on('change:muc_domain', this.onDomainChange, this);
                 },
 
@@ -243,16 +240,6 @@
                     }));
                 },
 
-                insertIntoDOM () {
-                    const container_el = _converse.chatboxviews.el.querySelector('#converse-modals');
-                    container_el.insertAdjacentElement('beforeEnd', this.el);
-                },
-
-                show () {
-                    this.render();
-                    this.modal.show();
-                },
-
                 openRoom (ev) {
                     ev.preventDefault();
                     const jid = ev.target.getAttribute('data-room-jid');
@@ -357,19 +344,12 @@
             });
 
 
-            _converse.AddChatRoomModal = Backbone.VDOMView.extend({
+            _converse.AddChatRoomModal = _converse.BootstrapModal.extend({
+
                 events: {
                     'submit form.add-chatroom': 'openChatRoom'
                 },
 
-                initialize () {
-                    this.render().insertIntoDOM();
-                    this.modal = new bootstrap.Modal(this.el, {
-                        backdrop: 'static',
-                        keyboard: true
-                    });
-                },
-
                 toHTML () {
                     return tpl_add_chatroom_modal(_.extend(this.model.toJSON(), {
                         'heading_new_chatroom': __('Enter a new Chatroom'),
@@ -380,16 +360,6 @@
                     }));
                 },
 
-                insertIntoDOM () {
-                    const container_el = _converse.chatboxviews.el.querySelector('#converse-modals');
-                    container_el.insertAdjacentElement('beforeEnd', this.el);
-                },
-
-                show () {
-                    this.render();
-                    this.modal.show();
-                },
-
                 parseRoomDataFromEvent (form) {
                     const data = new FormData(form);
                     const jid = data.get('chatroom');
@@ -2235,12 +2205,12 @@
 
                 showAddRoomModal (ev) {
                     ev.preventDefault();
-                    this.add_room_modal.show();
+                    this.add_room_modal.show(ev);
                 },
 
                 showListRoomsModal(ev) {
                     ev.preventDefault();
-                    this.list_rooms_modal.show();
+                    this.list_rooms_modal.show(ev);
                 }
             });
 

src/converse-profile.js

@@ -8,7 +8,7 @@
 
 (function (root, factory) {
     define(["converse-core",
-            "bootstrap.native",
+            "bootstrap",
             "tpl!chat_status_modal",
             "tpl!profile_view",
             "tpl!status_option",