Coming Soon
@@ -93,8 +93,10 @@
console.error(err);
}
},
- showSettings(plugin) {
- return Modals.contentSettings(plugin);
+ showSettings(plugin, dont_clone) {
+ return Modals.contentSettings(plugin, null, {
+ dont_clone
+ });
}
}
}
diff --git a/client/src/ui/components/bd/ThemeCard.vue b/client/src/ui/components/bd/ThemeCard.vue
index 5776f4a0..2cb29f9d 100644
--- a/client/src/ui/components/bd/ThemeCard.vue
+++ b/client/src/ui/components/bd/ThemeCard.vue
@@ -12,10 +12,10 @@
-
-
+
+
-
+
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 2a7b2f46..8f0b6023 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -23,7 +23,7 @@
-
+
Coming Soon
@@ -94,27 +94,11 @@
console.error(err);
}
},
- showSettings(theme) {
- return Modals.contentSettings(theme);
+ showSettings(theme, dont_clone) {
+ return Modals.contentSettings(theme, null, {
+ dont_clone
+ });
}
}
}
-
-
diff --git a/client/src/ui/components/bd/setting/Array.vue b/client/src/ui/components/bd/setting/Array.vue
index d4f2c80f..3386f203 100644
--- a/client/src/ui/components/bd/setting/Array.vue
+++ b/client/src/ui/components/bd/setting/Array.vue
@@ -48,26 +48,14 @@
MiSettings, MiOpenInNew, MiMinus
},
methods: {
- addItem(openModal) {
+ async addItem(openModal) {
if (this.setting.disabled || this.setting.max && this.setting.items.length >= this.setting.max) return;
- const item = this.setting.addItem();
- if (openModal) this.showModal(item, this.setting.items.length);
+ const item = await this.setting.addItem();
+ if (openModal) this.showModal(item, this.setting.items.length - 1);
},
- removeItem(item) {
+ async removeItem(item) {
if (this.setting.disabled || this.setting.min && this.setting.items.length <= this.setting.min) return;
- this.setting.removeItem(item);
- },
- changeInItem(item, category_id, setting_id, value) {
- console.log('Setting', item, category_id, setting_id, 'to', value);
-
- const category = item.settings.find(c => c.category === category_id);
- if (!category) return;
-
- const setting = category.settings.find(s => s.id === setting_id);
- if (!setting || Utils.compare(setting.value, value)) return;
-
- setting.value = value;
- setting.changed = !Utils.compare(setting.value, setting.old_value);
+ await this.setting.removeItem(item);
},
showModal(item, index) {
Modals.settings(item, this.setting.headertext ? this.setting.headertext.replace(/%n/, index + 1) : this.setting.text + ` #${index + 1}`);
diff --git a/client/src/ui/components/bd/setting/Multiline.vue b/client/src/ui/components/bd/setting/Multiline.vue
index a103e61a..567a3ff5 100644
--- a/client/src/ui/components/bd/setting/Multiline.vue
+++ b/client/src/ui/components/bd/setting/Multiline.vue
@@ -16,18 +16,22 @@
{{ setting.hint }}
-
+
diff --git a/client/src/ui/modals.js b/client/src/ui/modals.js
index c3800cb7..6ebbaa0c 100644
--- a/client/src/ui/modals.js
+++ b/client/src/ui/modals.js
@@ -8,69 +8,142 @@
* LICENSE file in the root directory of this source tree.
*/
-import { Utils, FileUtils } from 'common';
+import { Utils, FileUtils, ClientLogger as Logger, AsyncEventEmitter } from 'common';
import { Settings, Events, PluginManager, ThemeManager } from 'modules';
+import BaseModal from './components/common/Modal.vue';
import BasicModal from './components/bd/modals/BasicModal.vue';
import ConfirmModal from './components/bd/modals/ConfirmModal.vue';
import ErrorModal from './components/bd/modals/ErrorModal.vue';
import SettingsModal from './components/bd/modals/SettingsModal.vue';
import PermissionModal from './components/bd/modals/PermissionModal.vue';
-export default class {
+class Modal extends AsyncEventEmitter {
+ constructor(_modal, component) {
+ super();
- static add(modal, component) {
- modal.component = modal.component || {
+ for (let key in _modal)
+ this[key] = _modal[key];
+
+ const modal = this;
+ this.component = this.component || {
template: '
',
components: { 'custom-modal': component },
data() { return { modal }; },
- created() {
+ mounted() {
modal.vueInstance = this;
modal.vue = this.$children[0];
}
};
- modal.closing = false;
- modal.close = force => this.close(modal, force);
- modal.id = Date.now();
+
+ this.closing = false;
+ this.id = Date.now();
+ this.vueInstance = undefined;
+ this.vue = undefined;
+
+ this.close = this.close.bind(this);
+ this.closed = this.once('closed');
+ }
+
+ /**
+ * Closes the modal and removes it from the stack.
+ * @param {Boolean} force If not true throwing an error in the close hook will stop the modal being closed
+ * @return {Promise}
+ */
+ close(force) {
+ return Modals.close(this, force);
+ }
+}
+
+export default class Modals {
+
+ /**
+ * Adds a modal to the open stack.
+ * @param {Object} modal A Modal object or options used to create a Modal object
+ * @param {Object} component A Vue component that will be used to render the modal (optional if modal is a Modal object or it contains a component property)
+ * @return {Modal} The Modal object that was passed or created using the passed options
+ */
+ static add(_modal, component) {
+ const modal = _modal instanceof Modal ? _modal : new Modal(_modal, component);
this.stack.push(modal);
Events.emit('bd-refresh-modals');
return modal;
}
- static close(modal, force) {
- return new Promise(async (resolve, reject) => {
+ /**
+ * Closes a modal and removes it from the stack.
+ * @param {Modal} modal The modal to close
+ * @param {Boolean} force If not true throwing an error in the close hook will stop the modal being closed
+ * @return {Promise}
+ */
+ static async close(modal, force) {
+ try {
if (modal.beforeClose) {
- try {
- const beforeCloseResult = await modal.beforeClose(force);
- if (beforeCloseResult && !force) return reject(beforeCloseResult);
- } catch (err) {
- if (!force) return reject(err);
- }
+ const beforeCloseResult = await modal.beforeClose(force);
+ if (beforeCloseResult) throw beforeCloseResult;
}
+ await modal.emit('close', force);
+ } catch (err) {
+ Logger.err('Modals', ['Error thrown in modal close event:', err]);
+ if (!force) throw err;
+ }
- modal.closing = true;
- setTimeout(() => {
- this._stack = this.stack.filter(m => m !== modal);
- Events.emit('bd-refresh-modals');
- resolve();
- }, 200);
- });
+ modal.closing = true;
+ await new Promise(resolve => setTimeout(resolve, 200));
+
+ let index;
+ while ((index = this.stack.findIndex(m => m === modal)) > -1)
+ this.stack.splice(index, 1);
+
+ Events.emit('bd-refresh-modals');
+
+ try {
+ await modal.emit('closed', force);
+ } catch (err) {
+ Logger.err('Modals', ['Error thrown in modal closed event:', err]);
+ if (!force) throw err;
+ }
}
- static closeAll() {
+ /**
+ * Closes all open modals and removes them from the stack.
+ * @param {Boolean} force If not true throwing an error in the close hook will stop that modal and any modals higher in the stack from being closed
+ * @return {Promise}
+ */
+ static closeAll(force) {
+ const promises = [];
for (let modal of this.stack)
- modal.close();
+ promises.push(modal.close(force));
+ return Promise.all(promises);
}
- static closeLast() {
- if (!this.stack.length) return;
- this.stack[this.stack.length - 1].close();
+ /**
+ * Closes highest modal in the stack and removes it from the stack.
+ * @param {Boolean} force If not true throwing an error in the close hook will stop the modal being closed
+ * @return {Promise}
+ */
+ static closeLast(force) {
+ if (!this.stack.length) return Promise.resolve();
+ return this.stack[this.stack.length - 1].close(force);
}
+ /**
+ * Creates a new basic modal and adds it to the open stack.
+ * @param {String} title A string that will be displayed in the modal header
+ * @param {String} text A string that will be displayed in the modal body
+ * @return {Modal}
+ */
static basic(title, text) {
return this.add({ title, text }, BasicModal);
}
+ /**
+ * Creates a new confirm modal and adds it to the open stack.
+ * The modal will have a promise property that will be set to a Promise object that is resolved or rejected if the user clicks the confirm button or closes the modal.
+ * @param {String} title A string that will be displayed in the modal header
+ * @param {String} text A string that will be displayed in the modal body
+ * @return {Modal}
+ */
static confirm(title, text) {
const modal = { title, text };
modal.promise = new Promise((resolve, reject) => {
@@ -81,6 +154,14 @@ export default class {
return modal;
}
+ /**
+ * Creates a new permissions modal and adds it to the open stack.
+ * The modal will have a promise property that will be set to a Promise object that is resolved or rejected if the user accepts the permissions or closes the modal.
+ * @param {String} title A string that will be displayed in the modal header
+ * @param {String} name The requesting plugin's name
+ * @param {Array} perms The permissions the plugin is requesting
+ * @return {Modal}
+ */
static permissions(title, name, perms) {
const modal = { title, name, perms };
modal.promise = new Promise((resolve, reject) => {
@@ -91,10 +172,20 @@ export default class {
return modal;
}
+ /**
+ * Creates a new error modal and adds it to the open stack.
+ * @param {Object} event An object containing details about the error[s] to display
+ * @return {Modal}
+ */
static error(event) {
return this.add({ event }, ErrorModal);
}
+ /**
+ * Creates a new error modal with errors from PluginManager and ThemeManager and adds it to the open stack.
+ * @param {Boolean} clear Whether to clear the errors array after opening the modal
+ * @return {Modal}
+ */
static showContentManagerErrors(clear = true) {
// Get any errors from PluginManager and ThemeManager
const errors = ([]).concat(PluginManager.errors).concat(ThemeManager.errors);
@@ -122,6 +213,13 @@ export default class {
}
}
+ /**
+ * Creates a new settings modal and adds it to the open stack.
+ * @param {SettingsSet} settingsset The SettingsSet object to [clone and] display in the modal
+ * @param {String} headertext A string that will be displayed in the modal header
+ * @param {Object} options Additional options that will be passed to the modal
+ * @return {Modal}
+ */
static settings(settingsset, headertext, options) {
return this.add(Object.assign({
headertext: headertext ? headertext : settingsset.headertext,
@@ -130,18 +228,40 @@ export default class {
}, options), SettingsModal);
}
- static internalSettings(set_id) {
+ /**
+ * Creates a new settings modal with one of BetterDiscord's settings sets and adds it to the open stack.
+ * @param {SettingsSet} set_id The ID of the SettingsSet object to [clone and] display in the modal
+ * @param {String} headertext A string that will be displayed in the modal header
+ * @return {Modal}
+ */
+ static internalSettings(set_id, headertext) {
const set = Settings.getSet(set_id);
if (!set) return;
- return this.settings(set, set.headertext);
+ return this.settings(set, headertext);
}
- static contentSettings(content) {
- return this.settings(content.settings, content.name + ' Settings');
+ /**
+ * Creates a new settings modal with a plugin/theme's settings set and adds it to the open stack.
+ * @param {SettingsSet} content The plugin/theme whose settings set is to be [cloned and] displayed in the modal
+ * @param {String} headertext A string that will be displayed in the modal header
+ * @return {Modal}
+ */
+ static contentSettings(content, headertext, options) {
+ return this.settings(content.settings, headertext ? headertext : content.name + ' Settings', options);
}
+ /**
+ * An array of open modals.
+ */
static get stack() {
- return this._stack ? this._stack : (this._stack = []);
+ return this._stack || (this._stack = []);
+ }
+
+ /**
+ * A base Vue component for modals to use.
+ */
+ static get baseComponent() {
+ return BaseModal;
}
}
diff --git a/common/modules/async-eventemitter.js b/common/modules/async-eventemitter.js
index ba801fcd..170f4dd9 100644
--- a/common/modules/async-eventemitter.js
+++ b/common/modules/async-eventemitter.js
@@ -10,32 +10,51 @@
import EventEmitter from 'events';
+/**
+ * Extends Node.js' EventEmitter to trigger event listeners asyncronously.
+ */
export default class AsyncEventEmitter extends EventEmitter {
- emit(event, ...data) {
- return new Promise(async (resolve, reject) => {
- let listeners = this._events[event] || [];
- listeners = Array.isArray(listeners) ? listeners : [listeners];
+ /**
+ * Emits an event.
+ * @param {String} event The event to emit
+ * @param {Any} ...data Data to be passed to event listeners
+ * @return {Promise}
+ */
+ async emit(event, ...data) {
+ let listeners = this._events[event] || [];
+ listeners = Array.isArray(listeners) ? listeners : [listeners];
- // Special treatment of internal newListener and removeListener events
- if(event === 'newListener' || event === 'removeListener') {
- data = [{
- event: data,
- fn: err => {
- if (err) throw err;
- }
- }];
- }
-
- for (let listener of listeners) {
- try {
- await listener.call(this, ...data);
- } catch (err) {
- return reject(err);
+ // Special treatment of internal newListener and removeListener events
+ if(event === 'newListener' || event === 'removeListener') {
+ data = [{
+ event: data,
+ fn: err => {
+ if (err) throw err;
}
- }
+ }];
+ }
- resolve();
+ for (let listener of listeners) {
+ await listener.apply(this, data);
+ }
+ }
+
+ /**
+ * Adds an event listener that will be removed when it is called and therefore only be called once.
+ * If a callback is not specified a promise that is resolved once the event is triggered is returned.
+ */
+ once(event, callback) {
+ if (callback) {
+ // If a callback was specified add this event as normal
+ return EventEmitter.prototype.once.apply(this, arguments);
+ }
+
+ // Otherwise return a promise that is resolved once this event is triggered
+ return new Promise((resolve, reject) => {
+ EventEmitter.prototype.once.call(this, event, data => {
+ return resolve(data);
+ });
});
}
diff --git a/tests/plugins/Example 4/config.json b/tests/plugins/Example 4/config.json
new file mode 100644
index 00000000..c38da573
--- /dev/null
+++ b/tests/plugins/Example 4/config.json
@@ -0,0 +1,84 @@
+{
+ "info": {
+ "id": "example-plugin-4",
+ "name": "Example Plugin 4",
+ "authors": [
+ "Samuel Elliott"
+ ],
+ "version": 1.0,
+ "description": "Plugin for testing array setting events as the first example plugin has a lot of stuff in it now."
+ },
+ "main": "index.js",
+ "type": "plugin",
+ "defaultConfig": [
+ {
+ "category": "default",
+ "settings": [
+ {
+ "id": "array-1",
+ "type": "array",
+ "text": "Test settings array",
+ "settings": [
+ {
+ "category": "default",
+ "settings": [
+ {
+ "id": "default-0",
+ "type": "bool",
+ "value": false,
+ "text": "Bool Test Setting 3",
+ "hint": "Bool Test Setting Hint 3"
+ },
+ {
+ "id": "default-1",
+ "type": "text",
+ "value": "defaultValue",
+ "text": "Text Test Setting",
+ "hint": "Text Test Setting Hint"
+ }
+ ]
+ }
+ ],
+ "schemes": [
+ {
+ "id": "scheme-1",
+ "name": "Test scheme",
+ "icon_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
+ "settings": [
+ {
+ "category": "default",
+ "settings": [
+ {
+ "id": "default-0",
+ "value": true
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "id": "scheme-2",
+ "name": "Another test scheme",
+ "icon_url": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
+ "settings": [
+ {
+ "category": "default",
+ "settings": [
+ {
+ "id": "default-0",
+ "value": false
+ },
+ {
+ "id": "default-1",
+ "value": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+}
diff --git a/tests/plugins/Example 4/index.js b/tests/plugins/Example 4/index.js
new file mode 100644
index 00000000..a42c60ed
--- /dev/null
+++ b/tests/plugins/Example 4/index.js
@@ -0,0 +1,38 @@
+module.exports = (Plugin, { Logger, Settings }) => class extends Plugin {
+ async onstart() {
+ // Some array event examples
+ const arraySetting = this.settings.getSetting('default', 'array-1');
+ Logger.log('Array setting', arraySetting);
+ arraySetting.on('item-added', event => Logger.log('Item', event.item, 'was added to the array setting'));
+ arraySetting.on('item-updated', event => Logger.log('Item', event.item, 'of the array setting was updated', event));
+ arraySetting.on('item-removed', event => Logger.log('Item', event.item, 'removed from the array setting'));
+
+ // Create a new settings set and show it in a modal
+ const set = Settings.createSet({});
+ const category = await set.addCategory({ id: 'default' });
+
+ const setting = await category.addSetting({
+ id: 'test',
+ type: 'text',
+ text: 'Enter some text',
+ multiline: true // Works better now
+ });
+
+ setting.on('setting-updated', event => Logger.log('Setting was changed to', event.value));
+
+ const scheme = await set.addScheme({
+ id: 'scheme-1',
+ name: 'Test scheme',
+ icon_url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg',
+ settings: [{ category: 'default', settings: [{ id: 'test', value: 'Some\npresent\n\nmultiline\n\ntext' }] }]
+ });
+
+ set.on('settings-updated', async updatedSettings => {
+ Logger.log('Updated settings', updatedSettings);
+ await new Promise(resolve => setTimeout(resolve, 500));
+ set.setSaved();
+ })
+
+ set.showModal('Custom settings panel');
+ }
+};
diff --git a/tests/plugins/Example/index.js b/tests/plugins/Example/index.js
index d94f12f3..38583eba 100644
--- a/tests/plugins/Example/index.js
+++ b/tests/plugins/Example/index.js
@@ -14,7 +14,7 @@ module.exports = (Plugin, Api, Vendor, Dependencies) => {
Events.subscribe('TEST_EVENT', this.eventTest);
Logger.log('onStart');
- Logger.log(`Plugin setting "default-0" value: ${this.getSetting('default-0')}`);
+ Logger.log(`Plugin setting "default-0" value: ${this.settings.get('default-0')}`);
this.events.on('setting-updated', event => {
console.log('Received plugin setting update:', event);
});
@@ -92,14 +92,14 @@ module.exports = (Plugin, Api, Vendor, Dependencies) => {
test1() { return 'It works!'; }
test2() { return 'This works too!'; }
- settingChanged(category, setting_id, value) {
+ settingChanged(event) {
if (!this.enabled) return;
- Logger.log(`${category}/${setting_id} changed to ${value}`);
+ Logger.log(`${event.category_id}/${event.setting_id} changed to ${event.value}`);
}
- settingsChanged(settings) {
+ settingsChanged(event) {
if (!this.enabled) return;
- Logger.log([ 'Settings updated', settings ]);
+ Logger.log([ 'Settings updated', event.updatedSettings ]);
}
get settingscomponent() {