Breadcrumb widget operations for layout and column, remove operation for columns

Author: myovchev

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

@@ -76,28 +76,34 @@
             />
           </li>
         </ol>
-        <!-- FIXME Bring widget controls data from the widget config -->
         <ol
+          v-if="widgetBreadcrumbActions.length > 0"
           class="apos-area-widget__breadcrumbs apos-area-widget__breadcrumbs--switch"
           style="margin-left: 10px;"
         >
           <li class="apos-area-widget__breadcrumb">
-            <AposBreadcrumbSwitch
-              :choices="[
-                { label: 'Content', value: 'content' },
-                { label: 'Layout', value: 'layout' }
-              ]"
-              name="switch"
-              value="layout"
-              @update="foo"
+            <component
+              :is="operation.component"
+              v-for="operation in widgetBreadcrumbActions"
+              :key="operation.key"
+              v-bind="operation.props"
+              v-on="operation.listeners"
+            />
+          </li>
+        </ol>
+        <ol
+          v-if="widgetBreadcrumbInfos.length > 0"
+          class="apos-area-widget__breadcrumbs apos-area-widget__breadcrumbs--info"
+        >
+          <li>
+            <component
+              :is="operation.component"
+              v-for="operation in widgetBreadcrumbInfos"
+              :key="`info-${operation.key}`"
+              v-bind="operation.props"
+              v-on="operation.listeners"
             />
           </li>
-          <AposIndicator
-            icon="information-outline-icon"
-            fill-color="var(--a-primary)"
-            tooltip="Use Content mode to edit your widgets and Layout mode to modify your columns"
-            class="apos-area-widget__breadcrumbs-switch__info"
-          />
         </ol>
       </div>
       <div
@@ -345,6 +351,18 @@ export default {
     };
   },
   computed: {
+    operationButtonDefault() {
+      return {
+        iconOnly: true,
+        icon: 'plus-icon',
+        type: 'group',
+        modifiers: [ 'small', 'inline' ],
+        role: 'menuitem',
+        class: 'apos-area-modify-controls__button',
+        iconSize: 16,
+        disableFocus: !this.isFocused
+      };
+    },
     // Passed only to the preview layer (custom preview components).
     followingValuesWithParent() {
       return Object.entries(this.followingValues || {})
@@ -383,12 +401,32 @@ export default {
     moduleOptions() {
       return window.apos.area;
     },
+    widgetModuleOptions() {
+      return apos.modules[this.moduleOptions?.widgetManagers[this.widget?.type]] ?? {};
+    },
+    widgetBreadcrumbOperations() {
+      return (this.widgetModuleOptions.widgetBreadcrumbOperations || [])
+        .map((operation) => ({
+          component: this.getOperationComponent(operation),
+          props: this.getOperationProps(operation),
+          listeners: this.getOperationListeners(operation),
+          key: operation.action || operation.name,
+          type: operation.type
+        }));
+    },
+    widgetBreadcrumbActions() {
+      return this.widgetBreadcrumbOperations.filter(op => op.type !== 'info');
+    },
+    widgetBreadcrumbInfos() {
+      return this.widgetBreadcrumbOperations.filter(op => op.type === 'info');
+    },
     isFocused() {
       if (this.isSuppressed) {
         return false;
       }
 
       const isWidgetFocused = this.widgetFocused === this.widget._id;
+      // FIXME: move to the watcher?
       if (isWidgetFocused) {
         document.addEventListener('click', this.unfocus);
       }
@@ -481,8 +519,86 @@ export default {
     apos.bus.$off('widget-focus-parent', this.focusParent);
   },
   methods: {
-    foo(update) {
-      console.log(`name: ${update.name}, value: ${update.value}`);
+    getOperationComponent(operation) {
+      if (operation.type === 'info') {
+        return 'AposIndicator';
+      }
+      if (operation.type === 'switch') {
+        return 'AposBreadcrumbSwitch';
+      }
+      return 'AposButton';
+    },
+    getOperationProps(operation) {
+      if (operation.type === 'info') {
+        return {
+          // class: 'apos-area-widget__breadcrumbs-switch__info',
+          fillColor: 'var(--a-primary)',
+          icon: operation.icon,
+          tooltip: operation.tooltip
+        };
+      }
+
+      if (operation.type === 'switch') {
+        return {
+          name: operation.name,
+          choices: operation.choices,
+          value: operation.def,
+          class: 'apos-area-modify-controls__button--switch'
+        };
+      }
+
+      // Button by default
+      return {
+        ...this.operationButtonDefault,
+        icon: operation.icon,
+        action: operation.action,
+        tooltip: operation.tooltip || null
+      };
+    },
+    getOperationListeners(operation) {
+      const listeners = {};
+      if (operation.type === 'info') {
+        return listeners;
+      }
+      if (operation.type === 'switch') {
+        listeners.update = (payload) => {
+          this.emitOperation(operation, payload);
+        };
+      } else {
+        listeners.click = () => {
+          this.handleOperationClick(operation);
+        };
+      }
+      return listeners;
+    },
+    async handleOperationClick(operation) {
+      const { modal } = operation;
+      if (modal) {
+        const result = await apos.modal.execute(modal, {
+          widget: this.widget,
+          widgetSchema: this.widgetModuleOptions.schema
+        });
+        if (result) {
+          // TODO: make sure the update method from
+          // modules/@apostrophecms/area/ui/apos/components/AposAreaEditor.vue
+          // does the job and does not mess with the widget type and _id:
+          this.$emit('update', result);
+        }
+        return;
+      }
+
+      this.emitOperation(operation);
+    },
+    emitOperation(operation, payload = {}) {
+      if (operation.action) {
+        this.$emit(operation.action, this.i);
+      } else {
+        apos.bus.$emit('widget-breadcrumb-operation', {
+          ...payload,
+          ...operation,
+          _id: this.widget._id
+        });
+      }
     },
     getFocusForMenu({ menuId, isOpen }) {
       if (
@@ -639,12 +755,28 @@ export default {
     padding: 0;
   }
 
+  > li {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+
+  }
 }
 
-.apos-area-widget__breadcrumbs-switch__info {
-  position: absolute;
-  transform: translateX(50%);
-  right: -10px;
+.apos-area-widget__breadcrumbs.apos-area-widget__breadcrumbs--info {
+  display: flex;
+  border: none;
+  background-color: transparent;
+
+  > li {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    margin: 0;
+    padding: 0;
+
+  }
 }
 
 @mixin showButton() {
@@ -901,13 +1033,13 @@ export default {
 
     & {
       display: flex;
-      height: 32px;
       box-sizing: border-box;
       align-items: center;
+      height: 32px;
       margin: 0 0 8px;
       padding: 4px 6px;
-      background-color: var(--a-background-primary);
       border: 1px solid var(--a-primary-transparent-50);
+      background-color: var(--a-background-primary);
       border-radius: 8px;
     }
   }

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

@@ -4,7 +4,6 @@
       <label
         v-for="choice in choices"
         :key="choice.value"
-        :for="choice.value"
       >
         <input
           :id="choice.value"
@@ -54,9 +53,10 @@ export default {
   methods: {
     update(event) {
       this.next = event.target.value;
+      const payload = this.choices.find(choice => choice.value === this.next);
       this.$emit('update', {
-        name: this.name,
-        value: this.next
+        ...payload,
+        name: this.name
       });
     }
   }
@@ -66,8 +66,8 @@ export default {
 <style lang="scss" scoped>
 .apos-breadcrumb-switch {
   position: relative;
-  padding: 0;
   margin: 0;
+  padding: 0;
   border: none;
 
   :focus {
@@ -79,26 +79,29 @@ export default {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+
     label:first-child span {
       left: -1px;
     }
+
     label:last-child span {
       right: -1px;
     }
   }
 
   input[type="radio"] {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
     clip: rect(0 0 0 0);
     clip-path: inset(100%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
     white-space: nowrap;
-    width: 1px;
+
     &:checked + span {
       box-shadow: 0 0 0 1px var(--a-primary-dark-15);
       background-color: var(--a-primary-transparent-90);
-      z-index: 1;
+      z-index: $z-index-default;
       color: var(--a-text-inverted);
     }
   }
@@ -112,19 +115,19 @@ export default {
     }
 
     span {
-      height: 100%;
+      position: relative;
       display: inline-flex;
+      box-sizing: border-box;
       align-items: center;
-      cursor: pointer;
-      position: relative;
-      margin-left: .0625em;
-      letter-spacing: 0.5px;
+      height: 100%;
+      margin-left: .063em;
+      padding: 0 8px;
       color: var(--a-base-1);
       text-align: center;
-      transition: background-color .5s ease;
-      box-sizing: border-box;
+      transition: background-color 500ms ease;
+      cursor: pointer;
+      letter-spacing: 0.5px;
       border-radius: 4px;
-      padding: 0 8px;
     }
   }
 }

modules/@apostrophecms/layout-column-widget/index.js

@@ -51,15 +51,22 @@ module.exports = {
     label: 'apostrophe:layoutColumn',
     operationsInBreadcrumb: true
   },
-  // widgetOperations: {
-  //   add: {
-  //     move: {
-  //       icon: 'move',
-  //       tooltip: 'Move',
-  //       rawEvents: [ 'pointerdown', 'pointermove', 'pointerup' ]
-  //     }
-  //   }
-  // },
+  widgetOperations(self, options) {
+    return {
+      add: {
+        layoutColConfig: {
+          placement: 'breadcrumb',
+          icon: 'cog-icon',
+          tooltip: 'Use Content mode to edit your widgets and Layout mode to modify your columns'
+        },
+        layoutColDelete: {
+          placement: 'breadcrumb',
+          icon: 'delete-icon',
+          tooltip: 'Use Content mode to edit your widgets and Layout mode to modify your columns'
+        }
+      }
+    };
+  },
   fields: {
     add: {
       desktop: {

modules/@apostrophecms/layout-widget/index.js

@@ -17,6 +17,33 @@ module.exports = {
     defaultCellHorizontalAlignment: null,
     defaultCellVerticalAlignment: null
   },
+  widgetOperations(self, options) {
+    return {
+      add: {
+        layout: {
+          placement: 'breadcrumb',
+          type: 'switch',
+          choices: [
+            {
+              label: 'Content',
+              value: 'content'
+            },
+            {
+              label: 'Layout',
+              value: 'layout'
+            }
+          ],
+          def: 'content'
+        },
+        layoutHelp: {
+          placement: 'breadcrumb',
+          type: 'info',
+          icon: 'information-outline-icon',
+          tooltip: 'Use Content mode to edit your widgets and Layout mode to modify your columns'
+        }
+      }
+    };
+  },
   fields(self, options) {
     return {
       add: {