Add menu items to the plugin API

client/src/modules/pluginapi.js

@@ -16,7 +16,7 @@ import ThemeManager from './thememanager';
 import Events from './events';
 import WebpackModules from './webpackmodules';
 import { SettingsSet, SettingsCategory, Setting, SettingsScheme } from 'structs';
-import { Modals, DOM } from 'ui';
+import { BdMenuItems, Modals, DOM } from 'ui';
 import SettingsModal from '../ui/components/bd/modals/SettingsModal.vue';
 
 class EventsWrapper {
@@ -153,6 +153,54 @@ export default class PluginApi {
         };
     }
 
+    /**
+     * BdMenu
+     */
+
+    get BdMenu() {
+        return {
+            BdMenuItems: this.BdMenuItems
+        };
+    }
+
+    /**
+     * BdMenuItems
+     */
+
+    get menuItems() {
+        return this._menuItems || (this._menuItems = []);
+    }
+    addMenuItem(item) {
+        return BdMenuItems.add(item);
+    }
+    addMenuSettingsSet(category, set, text) {
+        const item = BdMenuItems.addSettingsSet(category, set, text);
+        return this.menuItems.push(item);
+    }
+    addMenuVueComponent(category, text, component) {
+        const item = BdMenuItems.addVueComponent(category, text, component);
+        return this.menuItems.push(item);
+    }
+    removeMenuItem(item) {
+        BdMenuItems.remove(item);
+        Utils.removeFromArray(this.menuItems, item);
+    }
+    removeAllMenuItems() {
+        for (let item of this.menuItems)
+            BdMenuItems.remove(item);
+    }
+    get BdMenuItems() {
+        return Object.defineProperty({
+            add: this.addMenuItem.bind(this),
+            addSettingsSet: this.addMenuSettingsSet.bind(this),
+            addVueComponent: this.addMenuVueComponent.bind(this),
+            remove: this.removeMenuItem.bind(this),
+            removeAll: this.removeAllMenuItems.bind(this)
+        }, 'items', {
+            get: () => this.menuItems
+        });
+    }
+
     /**
      * CssUtils
      */

tests/plugins/Example 4/index.js

@@ -1,4 +1,4 @@
-module.exports = (Plugin, { Logger, Settings }) => class extends Plugin {
+module.exports = (Plugin, { Logger, Settings, BdMenu: { BdMenuItems }, Api }) => class extends Plugin {
 	async onstart() {
 		// Some array event examples
 		const arraySetting = this.settings.getSetting('default', 'array-1');
@@ -7,8 +7,10 @@ module.exports = (Plugin, { Logger, Settings }) => class extends Plugin {
 		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({});
+        // Create a new settings set and add it to the menu
+        const set = Settings.createSet({
+            text: this.name
+        });
         const category = await set.addCategory({ id: 'default' });
 
         const setting = await category.addSetting({
@@ -33,6 +35,29 @@ module.exports = (Plugin, { Logger, Settings }) => class extends Plugin {
             set.setSaved();
         })
 
-        set.showModal('Custom settings panel');
+        const setting2 = await category.addSetting({
+            id: 'setting-2',
+            type: 'text',
+            text: 'Enter some text',
+            fullwidth: true
+        });
+
+        setting2.on('setting-updated', event => Logger.log('Setting 2 was changed to', event.value));
+
+        this.menuItem = BdMenuItems.addSettingsSet('Plugins', set, 'Plugin 4');
+
+        this.menuItem2 = BdMenuItems.addVueComponent('Plugins', 'Also Plugin 4', {
+            template: `<component :is="SettingsWrapper" :headertext="plugin.name + ' custom menu panel'">
+                <p style="margin-top: 0; color: #f6f6f7;">Test</p>
+            </component>`,
+            props: ['SettingsWrapper'],
+            data() { return {
+                Api, plugin: Api.plugin
+            }; }
+        });
+	}
+
+	onstop() {
+        BdMenuItems.removeAll();
 	}
 };