From b3409fd01b38e3d11e4a92dc12a7b56e1d775e4a Mon Sep 17 00:00:00 2001 From: JC Brand Date: Thu, 22 Feb 2018 18:41:01 +0100 Subject: [PATCH] Move common modal view code into a base class --- src/config.js | 9 ++++--- src/converse-controlbox.js | 8 ++++++ src/converse-core.js | 1 + src/converse-modal.js | 49 +++++++++++++++++++++++++++++++++++ src/converse-muc-views.js | 52 ++++++++------------------------------ src/converse-profile.js | 2 +- 6 files changed, 75 insertions(+), 46 deletions(-) create mode 100644 src/converse-modal.js diff --git a/src/config.js b/src/config.js index 786fb9968..e91f5a9a8 100644 --- a/src/config.js +++ b/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'}, diff --git a/src/converse-controlbox.js b/src/converse-controlbox.js index 59505ddf5..c1725d9ed 100644 --- a/src/converse-controlbox.js +++ b/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', diff --git a/src/converse-core.js b/src/converse-core.js index 108d09e11..1b1cdc8a0 100644 --- a/src/converse-core.js +++ b/src/converse-core.js @@ -78,6 +78,7 @@ 'converse-headline', 'converse-mam', 'converse-minimize', + 'converse-modal', 'converse-muc', 'converse-muc-embedded', 'converse-muc-views', diff --git a/src/converse-modal.js b/src/converse-modal.js new file mode 100644 index 000000000..04a3127e0 --- /dev/null +++ b/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(); + } + }); + } + }); +})); diff --git a/src/converse-muc-views.js b/src/converse-muc-views.js index 7c777b252..ea05cfb24 100644 --- a/src/converse-muc-views.js +++ b/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 +// Copyright (c) 2012-2018, Jan-Carel Brand // 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); } }); diff --git a/src/converse-profile.js b/src/converse-profile.js index 63c55d95e..ee1bad58d 100644 --- a/src/converse-profile.js +++ b/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",