make widget operations dynamic to add custom ones

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBarMenu.vue

@@ -13,7 +13,7 @@
         class="apos-admin-bar__btn"
         :modifiers="['no-motion']"
         role="menuitem"
-        @click="emitEvent('@apostrophecms/page:manager')"
+        @click="emitEvent({ action: '@apostrophecms/page:manager' })"
       />
     </li>
     <li
@@ -42,7 +42,7 @@
         :modifiers="['no-motion']"
         class="apos-admin-bar__btn"
         role="menuitem"
-        @click="emitEvent(item.action)"
+        @click="emitEvent(item)"
       />
     </li>
     <li
@@ -85,7 +85,7 @@
           :label="item.label"
           :action="item.action"
           :state="trayItemState[item.name] ? [ 'active' ] : []"
-          @click="emitEvent(item.action)"
+          @click="emitEvent(item)"
         />
       </template>
     </li>
@@ -122,10 +122,9 @@ export default {
     }
   },
   async mounted() {
-    apos.bus.$on('admin-menu-click', this.onAdminMenuClick);
-
     const itemsSet = klona(this.items);
-    this.menuItems = itemsSet.filter(item => !(item.options && item.options.contextUtility))
+    this.menuItems = itemsSet
+      .filter(item => !(item.options && item.options.contextUtility))
       .map(item => {
         if (item.items) {
           item.items.forEach(subitem => {
@@ -148,12 +147,26 @@ export default {
     });
   },
   methods: {
-    emitEvent(name) {
-      apos.bus.$emit('admin-menu-click', name);
+    emitEvent(item) {
+      apos.bus.$emit('admin-menu-click', item.action);
+
+      // Maintain a knowledge of which tray item toggles are active
+      const trayItem = this.trayItems.find(trayItem => trayItem.name === item.action);
+
+      if (trayItem && trayItem.options.toggle) {
+        this.trayItemState = {
+          ...this.trayItemState,
+          [item.action]: !this.trayItemState[item.action]
+        };
+      }
     },
     trayItemTooltip(item) {
       if (item.options.toggle) {
-        if (this.trayItemState[item.name] && item.options.tooltip && item.options.tooltip.deactivate) {
+        if (
+          this.trayItemState[item.name] &&
+            item.options.tooltip &&
+            item.options.tooltip.deactivate
+        ) {
           return {
             content: item.options.tooltip.deactivate,
             placement: 'bottom'
@@ -169,17 +182,6 @@ export default {
       } else {
         return item.options.tooltip;
       }
-    },
-    // Maintain a knowledge of which tray item toggles are active
-    onAdminMenuClick(e) {
-      const name = e.itemName || e;
-      const trayItem = this.trayItems.find(item => item.name === name);
-      if (trayItem && trayItem.options.toggle) {
-        this.trayItemState = {
-          ...this.trayItemState,
-          [name]: !this.trayItemState[name]
-        };
-      }
     }
   }
 };

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBarUser.vue

@@ -43,8 +43,8 @@ export default {
     }
   },
   methods: {
-    emitEvent(name) {
-      apos.bus.$emit('admin-menu-click', name);
+    emitEvent(item) {
+      apos.bus.$emit('admin-menu-click', item.action);
     }
   }
 };

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBreakpointPreviewMode.vue

@@ -255,10 +255,10 @@ export default {
       }
       return 'cellphone-icon';
     },
-    selectBreakpoint(selected) {
+    selectBreakpoint(item) {
       const {
         name, label, width, height
-      } = this.breakpoints.find(({ name }) => name === selected);
+      } = this.breakpoints.find(({ name }) => name === item.action);
       this.toggleBreakpointPreviewMode({
         mode: name,
         label,

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextModeAndSettings.vue

@@ -6,7 +6,8 @@
   >
     <!--
       TODO: Each div at this level serves as a discrete context menu state
-      Modules should be able to provide their own menus here to complete tasks specific to them.
+      Modules should be able to provide their own menus here to complete
+      tasks specific to them.
       It might also be worth breaking up the core menus into their own vue components to
       further illustrate this concept.
     -->
@@ -107,7 +108,11 @@ export default {
       if (this.canPublish) {
         if (this.context.lastPublishedAt) {
           // Document went from unpublished to published and has nothing staged
-          if (this.hasBeenPublishedThisPageload && !this.readyToPublish && this.hasBeenPublishedButNotUpdated) {
+          if (
+            this.hasBeenPublishedThisPageload &&
+            !this.readyToPublish &&
+            this.hasBeenPublishedButNotUpdated
+          ) {
             return 'apostrophe:published';
           // Document *has* had changes published this page load, but nothing staged now
           } else if (this.hasBeenPublishedThisPageload && !this.readyToPublish) {
@@ -135,7 +140,11 @@ export default {
       }
     },
     publishTooltip() {
-      if (this.canPublish && this.context.lastPublishedAt && !this.hasBeenPublishedThisPageload) {
+      if (
+        this.canPublish &&
+        this.context.lastPublishedAt &&
+        !this.hasBeenPublishedThisPageload
+      ) {
         return {
           content: 'apostrophe:updateTooltip',
           placement: 'bottom'
@@ -145,10 +154,13 @@ export default {
       return false;
     },
     isAutopublished() {
-      return this.context._aposAutopublish ?? (window.apos.modules[this.context.type].autopublish || false);
+      return this.context._aposAutopublish ??
+        (window.apos.modules[this.context.type].autopublish || false);
     },
     hasBeenPublishedThisPageload() {
-      return (this.context.lastPublishedAt > this.mountedAt) || ((this.context.submitted && this.context.submitted.at) > this.mountedAt);
+      return (
+        this.context.lastPublishedAt > this.mountedAt) ||
+        ((this.context.submitted && this.context.submitted.at) > this.mountedAt);
     },
     canSwitchToEditMode() {
       return !this.editMode;
@@ -188,9 +200,6 @@ export default {
         this.hasBeenPublishedButNotUpdated = false;
       }
       this.$emit('publish');
-    },
-    emitEvent(name) {
-      apos.bus.$emit('admin-menu-click', name);
     }
   }
 };

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextTitle.vue

@@ -124,7 +124,8 @@ export default {
       return window.apos.adminBar;
     },
     isAutopublished() {
-      return this.context._aposAutopublish ?? (window.apos.modules[this.context.type].autopublish || false);
+      return this.context._aposAutopublish ??
+        (window.apos.modules[this.context.type].autopublish || false);
     }
   },
   mounted() {
@@ -137,11 +138,11 @@ export default {
     togglePublishDraftMode() {
       if (this.canTogglePublishDraftMode) {
         const mode = this.draftMode === 'draft' ? 'published' : 'draft';
-        this.switchDraftMode(mode);
+        this.$emit('switch-draft-mode', mode);
       }
     },
-    switchDraftMode(mode) {
-      this.$emit('switch-draft-mode', mode);
+    switchDraftMode(item) {
+      this.$emit('switch-draft-mode', item.action);
     }
   }
 };