@@ -37,7 +37,21 @@
},
data() {
return {
- open: false
+ open: false,
+ animating: false,
+ timeout: null
+ }
+ },
+ watch: {
+ async open(open) {
+ this.animating = true;
+ const contents = this.$refs.contents;
+ contents.style.marginTop = 0 - contents.offsetHeight + 'px';
+ if (this.timeout) clearTimeout(this.timeout);
+ this.timeout = setTimeout(() => {
+ contents.style.marginTop = null;
+ this.animating = false;
+ }, 200);
}
}
}
diff --git a/client/src/ui/modals.js b/client/src/ui/modals.js
index 3c6f16cd..64702d9a 100644
--- a/client/src/ui/modals.js
+++ b/client/src/ui/modals.js
@@ -85,22 +85,31 @@ export default class {
return this.add({ event }, ErrorModal);
}
- static showContentManagerErrors() {
+ static showContentManagerErrors(clear = true) {
// Get any errors from PluginManager and ThemeManager
const errors = ([]).concat(PluginManager.errors).concat(ThemeManager.errors);
- if (errors.length) return this.error({
- header:
- (PluginManager.errors.length && ThemeManager.errors.length ? '' :
- (PluginManager.errors.length ? PluginManager.moduleName : ThemeManager.moduleName) + ' - ') +
- (PluginManager.errors.length ? `${PluginManager.errors.length} ${PluginManager.contentType}${PluginManager.errors.length !== 1 ? 's' : ''}` : '') +
- (PluginManager.errors.length && ThemeManager.errors.length ? ' and ' : '') +
- (ThemeManager.errors.length ? `${ThemeManager.errors.length} ${ThemeManager.contentType}${ThemeManager.errors.length !== 1 ? 's' : ''}` : '') +
- ' failed to load',
- module: (PluginManager.errors.length && ThemeManager.errors.length ? 'Content Manager' :
- (PluginManager.errors.length ? PluginManager.moduleName : ThemeManager.moduleName)),
- type: 'err',
- content: errors
- });
+ if (errors.length) {
+ const modal = this.error({
+ header:
+ (PluginManager.errors.length && ThemeManager.errors.length ? '' :
+ (PluginManager.errors.length ? PluginManager.moduleName : ThemeManager.moduleName) + ' - ') +
+ (PluginManager.errors.length ? `${PluginManager.errors.length} ${PluginManager.contentType}${PluginManager.errors.length !== 1 ? 's' : ''}` : '') +
+ (PluginManager.errors.length && ThemeManager.errors.length ? ' and ' : '') +
+ (ThemeManager.errors.length ? `${ThemeManager.errors.length} ${ThemeManager.contentType}${ThemeManager.errors.length !== 1 ? 's' : ''}` : '') +
+ ' failed to load',
+ module: (PluginManager.errors.length && ThemeManager.errors.length ? 'Content Manager' :
+ (PluginManager.errors.length ? PluginManager.moduleName : ThemeManager.moduleName)),
+ type: 'err',
+ content: errors
+ });
+
+ if (clear) {
+ PluginManager._errors = [];
+ ThemeManager._errors = [];
+ }
+
+ return modal;
+ }
}
static settings(headertext, settings, schemes, settingsUpdated, settingUpdated, saveSettings) {
diff --git a/tests/plugins/Example/component.js b/tests/plugins/Example/component.js
new file mode 100644
index 00000000..c82c1359
--- /dev/null
+++ b/tests/plugins/Example/component.js
@@ -0,0 +1,4 @@
+module.exports.default = {
+ template: "
Test custom setting {{ setting.id }}. This is from component.js in the plugin/theme's directory. (It can use functions.)
",
+ props: ['setting', 'change']
+};
diff --git a/tests/plugins/Example/config.json b/tests/plugins/Example/config.json
index 25ca74e5..b32022b0 100644
--- a/tests/plugins/Example/config.json
+++ b/tests/plugins/Example/config.json
@@ -194,6 +194,51 @@
}
]
},
+ {
+ "category": "custom-settings",
+ "category_name": "Custom settings",
+ "type": "drawer",
+ "settings": [
+ {
+ "id": "custom-1",
+ "type": "custom",
+ "value": false,
+ "component": {
+ "template": "
Test custom setting {{ setting.id }}. This is included inline with the plugin/theme's config. (Which means it can't use any functions, but can still bind functions to events.) Set value to 1 Set value to 2
",
+ "props": [
+ "setting",
+ "change"
+ ]
+ },
+ "debug": true
+ },
+ {
+ "id": "custom-2",
+ "type": "custom",
+ "value": false,
+ "file": "component.js"
+ },
+ {
+ "id": "custom-3",
+ "type": "custom",
+ "value": false,
+ "component": "settingscomponent"
+ },
+ {
+ "id": "custom-4",
+ "type": "custom",
+ "value": false,
+ "function": "getSettingsComponent"
+ },
+ {
+ "id": "custom-5",
+ "type": "custom",
+ "value": false,
+ "function": "getSettingsComponentHTMLElement",
+ "debug": true
+ }
+ ]
+ },
{
"category_header_comment": "Setting a category other than default has a header with category name as the text",
"category": "test-category",
diff --git a/tests/plugins/Example/index.js b/tests/plugins/Example/index.js
index 74042970..739e0086 100644
--- a/tests/plugins/Example/index.js
+++ b/tests/plugins/Example/index.js
@@ -33,6 +33,11 @@ module.exports = (Plugin, Api, Vendor, Dependencies) => {
return true;
}
+ onUnload(reload) {
+ Logger.log('Unloading plugin');
+ delete require.cache[require.resolve('./component')];
+ }
+
eventTest(e) {
Logger.log(e);
}
@@ -56,6 +61,44 @@ module.exports = (Plugin, Api, Vendor, Dependencies) => {
if (!this.enabled) return;
Logger.log([ 'Settings updated', settings ]);
}
+
+ get settingscomponent() {
+ const plugin = this;
+ return this._settingscomponent ? this._settingscomponent : this._settingscomponent = {
+ template: "
Test custom setting {{ setting.id }}. This is from Plugin.settingscomponent.
",
+ props: ['setting', 'change'],
+ data() { return { plugin }; }
+ };
+ }
+
+ getSettingsComponent(setting, change) {
+ return this._settingscomponent2 ? this._settingscomponent2 : this.settingscomponent2 = {
+ template: "
Test custom setting {{ setting.id }}. This is from Plugin.getSettingsComponent().
",
+ props: ['setting', 'change']
+ };
+ }
+
+ getSettingsComponentHTMLElement(setting, change) {
+ const el = document.createElement('div');
+ el.setAttribute('style', 'margin-bottom: 15px; background-color: rgba(0, 0, 0, 0.2); border: 1px dashed rgba(255, 255, 255, 0.2); padding: 10px; color: #f6f6f7; font-weight: 500; font-size: 15px;');
+ el.textContent = `Test custom setting ${setting.id}. This is from Plugin.getSettingsComponentHTMLElement(). Current value: ${setting.value}.`;
+
+ const button1 = document.createElement('button');
+ button1.setAttribute('class', 'bd-button bd-button-primary');
+ button1.setAttribute('style', 'display: inline-block; margin-left: 10px;');
+ button1.addEventListener('click', () => change(1));
+ button1.textContent = 'Set value to 1';
+ el.appendChild(button1);
+
+ const button2 = document.createElement('button');
+ button2.setAttribute('class', 'bd-button bd-button-primary');
+ button2.setAttribute('style', 'display: inline-block; margin-left: 10px;');
+ button2.addEventListener('click', () => change(2));
+ button2.textContent = 'Set value to 2';
+ el.appendChild(button2);
+
+ return el;
+ }
}
}