make widget operations dynamic to add custom ones

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## UNRELEASED
 
+### Adds
+
+* The new `apos.area.addWidgetOperation` method can be used to display custom operations for widgets.
+A wrapper is available in the `@apostrophecms/widget-type` module to register operations only for widgets that match the type of the module where the wrapper is invoked.
+For example, calling `self.addWidgetOperation` in the ``@apostrophecms/image-widget`` module will apply the operation exclusively to image widgets.
+A `secondaryLevel: true` option is available to add operations to the widget's controls context menu.
+
 ### Fixes
 
 * Fixes all eslint warnings.

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,8 +122,6 @@ 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))
@@ -149,8 +147,18 @@ 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) {
@@ -173,17 +181,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

@@ -256,10 +256,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,9 +6,10 @@
   >
     <!--
       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. It might also be worth breaking up the core menus into their own vue
-      components to further illustrate this concept.
+      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.
     -->
     <div
       v-if="!editMode"
@@ -200,9 +201,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

@@ -137,12 +137,13 @@ export default {
   methods: {
     togglePublishDraftMode() {
       if (this.canTogglePublishDraftMode) {
-        const mode = this.draftMode === 'draft' ? 'published' : 'draft';
-        this.switchDraftMode(mode);
+        this.switchDraftMode({
+          action: this.draftMode === 'draft' ? 'published' : 'draft'
+        });
       }
     },
-    switchDraftMode(mode) {
-      this.$emit('switch-draft-mode', mode);
+    switchDraftMode(item) {
+      this.$emit('switch-draft-mode', item.action);
     }
   }
 };
@@ -178,7 +179,7 @@ export default {
   &__document {
     margin-top: 3.5px;
 
-    :deep(.apos-context-menu__pane) {
+    :deep(.apos-context-menu__items) {
       min-width: 150px;
     }
   }

modules/@apostrophecms/area/index.js

@@ -23,9 +23,10 @@ module.exports = {
       'rank',
       'level'
     ];
-    self.widgetManagers = {};
     self.richTextWidgetTypes = [];
     self.widgetManagers = {};
+    self.widgetOperations = [];
+
     self.enableBrowserData();
     self.addDeduplicateWidgetIdsMigration();
   },
@@ -658,6 +659,21 @@ module.exports = {
           }
         });
       },
+      addWidgetOperation(operation) {
+        if (!operation.name || !operation.label || !operation.modal) {
+          throw self.apos.error('invalid', 'addWidgetOperation requires name, label and modal properties.');
+        }
+
+        if (operation.secondaryLevel !== true && !operation.icon) {
+          throw self.apos.error('invalid', 'addWidgetOperation requires the icon property at primary level.');
+        }
+
+        self.widgetOperations = self.widgetOperations.filter(
+          ({ name }) => name !== operation.name
+        );
+
+        self.widgetOperations.push(operation);
+      },
       getBrowserData(req) {
         const widgets = {};
         const widgetEditors = {};
@@ -682,6 +698,13 @@ module.exports = {
           contextualWidgetDefaultData[name] = manager.options.defaultData || {};
         });
 
+        const widgetOperations = self.widgetOperations.filter(({ permission }) => {
+          if (permission?.action && permission?.type) {
+            return self.apos.permission.can(req, permission.action, permission.type, permission.mode || 'draft');
+          }
+          return true;
+        });
+
         return {
           components: {
             editor: 'AposAreaEditor',
@@ -694,7 +717,8 @@ module.exports = {
           widgetPreview,
           contextualWidgetDefaultData,
           widgetManagers,
-          action: self.action
+          action: self.action,
+          widgetOperations
         };
       },
       async addDeduplicateWidgetIdsMigration() {

modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue

@@ -108,17 +108,19 @@
           :first="i === 0"
           :last="i === next.length - 1"
           :options="{ contextual: isContextual }"
-          :foreign="foreign"
           :disabled="disabled"
           :max-reached="maxReached"
           :tabbable="isFocused"
+          :model-value="widget"
+          :area-field="field"
           @up="$emit('up', i);"
           @remove="$emit('remove', i);"
           @edit="$emit('edit', i);"
           @cut="$emit('cut', i);"
           @copy="$emit('copy', i);"
           @clone="$emit('clone', i);"
           @down="$emit('down', i);"
+          @update="$emit('update')"
         />
       </div>
       <!-- Still used for contextual editing components -->