Move common modal view code into a base class
This commit is contained in:
parent
7e6cc86c94
commit
b3409fd01b
@ -25,7 +25,7 @@ require.config({
|
|||||||
"backbone.orderedlistview": "node_modules/backbone.overview/dist/backbone.orderedlistview",
|
"backbone.orderedlistview": "node_modules/backbone.overview/dist/backbone.orderedlistview",
|
||||||
"backbone.overview": "node_modules/backbone.overview/dist/backbone.overview",
|
"backbone.overview": "node_modules/backbone.overview/dist/backbone.overview",
|
||||||
"backbone.vdomview": "node_modules/backbone.vdomview/dist/backbone.vdomview",
|
"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",
|
"emojione": "node_modules/emojione/lib/js/emojione",
|
||||||
"es6-promise": "node_modules/es6-promise/dist/es6-promise.auto",
|
"es6-promise": "node_modules/es6-promise/dist/es6-promise.auto",
|
||||||
"eventemitter": "node_modules/otr/build/dep/eventemitter",
|
"eventemitter": "node_modules/otr/build/dep/eventemitter",
|
||||||
@ -71,13 +71,14 @@ require.config({
|
|||||||
"converse-core": "src/converse-core",
|
"converse-core": "src/converse-core",
|
||||||
"converse-disco": "src/converse-disco",
|
"converse-disco": "src/converse-disco",
|
||||||
"converse-dragresize": "src/converse-dragresize",
|
"converse-dragresize": "src/converse-dragresize",
|
||||||
"converse-headline": "src/converse-headline",
|
|
||||||
"converse-fullscreen": "src/converse-fullscreen",
|
"converse-fullscreen": "src/converse-fullscreen",
|
||||||
|
"converse-headline": "src/converse-headline",
|
||||||
"converse-mam": "src/converse-mam",
|
"converse-mam": "src/converse-mam",
|
||||||
"converse-minimize": "src/converse-minimize",
|
"converse-minimize": "src/converse-minimize",
|
||||||
|
"converse-modal": "src/converse-modal",
|
||||||
"converse-muc": "src/converse-muc",
|
"converse-muc": "src/converse-muc",
|
||||||
"converse-muc-views": "src/converse-muc-views",
|
|
||||||
"converse-muc-embedded": "src/converse-muc-embedded",
|
"converse-muc-embedded": "src/converse-muc-embedded",
|
||||||
|
"converse-muc-views": "src/converse-muc-views",
|
||||||
"converse-notification": "src/converse-notification",
|
"converse-notification": "src/converse-notification",
|
||||||
"converse-otr": "src/converse-otr",
|
"converse-otr": "src/converse-otr",
|
||||||
"converse-ping": "src/converse-ping",
|
"converse-ping": "src/converse-ping",
|
||||||
@ -135,8 +136,8 @@ require.config({
|
|||||||
|
|
||||||
// define module dependencies for modules not using define
|
// define module dependencies for modules not using define
|
||||||
shim: {
|
shim: {
|
||||||
'backbone.overview': { deps: ['backbone.nativeview'] },
|
|
||||||
'backbone.orderedlistview': { deps: ['backbone.nativeview'] },
|
'backbone.orderedlistview': { deps: ['backbone.nativeview'] },
|
||||||
|
'backbone.overview': { deps: ['backbone.nativeview'] },
|
||||||
'backbone.vdomview': { deps: ['backbone.nativeview'] },
|
'backbone.vdomview': { deps: ['backbone.nativeview'] },
|
||||||
'awesomplete': { exports: 'Awesomplete'},
|
'awesomplete': { exports: 'Awesomplete'},
|
||||||
'emojione': { exports: 'emojione'},
|
'emojione': { exports: 'emojione'},
|
||||||
|
@ -229,6 +229,14 @@
|
|||||||
closed: !_converse.show_controlbox_by_default
|
closed: !_converse.show_controlbox_by_default
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
_converse.AddContactModal = Backbone.VDOMView.extend({
|
||||||
|
events: {
|
||||||
|
'submit form': 'addContact'
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
_converse.ControlBoxView = _converse.ChatBoxView.extend({
|
_converse.ControlBoxView = _converse.ChatBoxView.extend({
|
||||||
tagName: 'div',
|
tagName: 'div',
|
||||||
className: 'chatbox',
|
className: 'chatbox',
|
||||||
|
@ -78,6 +78,7 @@
|
|||||||
'converse-headline',
|
'converse-headline',
|
||||||
'converse-mam',
|
'converse-mam',
|
||||||
'converse-minimize',
|
'converse-minimize',
|
||||||
|
'converse-modal',
|
||||||
'converse-muc',
|
'converse-muc',
|
||||||
'converse-muc-embedded',
|
'converse-muc-embedded',
|
||||||
'converse-muc-views',
|
'converse-muc-views',
|
||||||
|
49
src/converse-modal.js
Normal file
49
src/converse-modal.js
Normal file
@ -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();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}));
|
@ -1,10 +1,9 @@
|
|||||||
// Converse.js (A browser based XMPP chat client)
|
// Converse.js (A browser based XMPP chat client)
|
||||||
// http://conversejs.org
|
// 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)
|
// Licensed under the Mozilla Public License (MPLv2)
|
||||||
//
|
//
|
||||||
/*global define */
|
|
||||||
|
|
||||||
/* This is a Converse.js plugin which add support for multi-user chat rooms, as
|
/* This is a Converse.js plugin which add support for multi-user chat rooms, as
|
||||||
* specified in XEP-0045 Multi-user chat.
|
* specified in XEP-0045 Multi-user chat.
|
||||||
@ -12,7 +11,7 @@
|
|||||||
(function (root, factory) {
|
(function (root, factory) {
|
||||||
define([
|
define([
|
||||||
"converse-core",
|
"converse-core",
|
||||||
"bootstrap.native",
|
"bootstrap",
|
||||||
"tpl!add_chatroom_modal",
|
"tpl!add_chatroom_modal",
|
||||||
"tpl!chatarea",
|
"tpl!chatarea",
|
||||||
"tpl!chatroom",
|
"tpl!chatroom",
|
||||||
@ -34,6 +33,7 @@
|
|||||||
"tpl!rooms_results",
|
"tpl!rooms_results",
|
||||||
"tpl!spinner",
|
"tpl!spinner",
|
||||||
"awesomplete",
|
"awesomplete",
|
||||||
|
"converse-modal"
|
||||||
], factory);
|
], factory);
|
||||||
}(this, function (
|
}(this, function (
|
||||||
converse,
|
converse,
|
||||||
@ -93,7 +93,7 @@
|
|||||||
* If the setting "strict_plugin_dependencies" is set to true,
|
* If the setting "strict_plugin_dependencies" is set to true,
|
||||||
* an error will be raised if the plugin is not found.
|
* an error will be raised if the plugin is not found.
|
||||||
*/
|
*/
|
||||||
dependencies: ["converse-controlbox"],
|
dependencies: ["converse-modal", "converse-controlbox"],
|
||||||
|
|
||||||
overrides: {
|
overrides: {
|
||||||
|
|
||||||
@ -216,7 +216,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
_converse.ListChatRoomsModal = Backbone.VDOMView.extend({
|
_converse.ListChatRoomsModal = _converse.BootstrapModal.extend({
|
||||||
|
|
||||||
events: {
|
events: {
|
||||||
'submit form': 'showRooms',
|
'submit form': 'showRooms',
|
||||||
'click a.room-info': 'toggleRoomInfo',
|
'click a.room-info': 'toggleRoomInfo',
|
||||||
@ -226,11 +227,7 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
initialize () {
|
initialize () {
|
||||||
this.render().insertIntoDOM();
|
_converse.BootstrapModal.prototype.initialize.apply(this, arguments);
|
||||||
this.modal = new bootstrap.Modal(this.el, {
|
|
||||||
backdrop: 'static',
|
|
||||||
keyboard: true
|
|
||||||
});
|
|
||||||
this.model.on('change:muc_domain', this.onDomainChange, this);
|
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) {
|
openRoom (ev) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
const jid = ev.target.getAttribute('data-room-jid');
|
const jid = ev.target.getAttribute('data-room-jid');
|
||||||
@ -357,19 +344,12 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
_converse.AddChatRoomModal = Backbone.VDOMView.extend({
|
_converse.AddChatRoomModal = _converse.BootstrapModal.extend({
|
||||||
|
|
||||||
events: {
|
events: {
|
||||||
'submit form.add-chatroom': 'openChatRoom'
|
'submit form.add-chatroom': 'openChatRoom'
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize () {
|
|
||||||
this.render().insertIntoDOM();
|
|
||||||
this.modal = new bootstrap.Modal(this.el, {
|
|
||||||
backdrop: 'static',
|
|
||||||
keyboard: true
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
toHTML () {
|
toHTML () {
|
||||||
return tpl_add_chatroom_modal(_.extend(this.model.toJSON(), {
|
return tpl_add_chatroom_modal(_.extend(this.model.toJSON(), {
|
||||||
'heading_new_chatroom': __('Enter a new Chatroom'),
|
'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) {
|
parseRoomDataFromEvent (form) {
|
||||||
const data = new FormData(form);
|
const data = new FormData(form);
|
||||||
const jid = data.get('chatroom');
|
const jid = data.get('chatroom');
|
||||||
@ -2235,12 +2205,12 @@
|
|||||||
|
|
||||||
showAddRoomModal (ev) {
|
showAddRoomModal (ev) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
this.add_room_modal.show();
|
this.add_room_modal.show(ev);
|
||||||
},
|
},
|
||||||
|
|
||||||
showListRoomsModal(ev) {
|
showListRoomsModal(ev) {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
this.list_rooms_modal.show();
|
this.list_rooms_modal.show(ev);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
(function (root, factory) {
|
(function (root, factory) {
|
||||||
define(["converse-core",
|
define(["converse-core",
|
||||||
"bootstrap.native",
|
"bootstrap",
|
||||||
"tpl!chat_status_modal",
|
"tpl!chat_status_modal",
|
||||||
"tpl!profile_view",
|
"tpl!profile_view",
|
||||||
"tpl!status_option",
|
"tpl!status_option",
|
||||||
|
Loading…
Reference in New Issue
Block a user