Merge pull request #16 from integer-net/14/category_selection

#14 minor improvements in scripts and styles related to category_selection

Author: jissereitsma

view/adminhtml/templates/form/field_type/category_selection/crumbs.phtml

@@ -6,6 +6,11 @@ use Magento\Framework\View\Element\Template;
 /** @var Escaper $escaper */
 /** @var Template $block */
 ?>
+<style>
+    .admin__action-multiselect-crumb + .admin__action-multiselect-crumb {
+        margin-left: 1rem;
+    }
+</style>
 <template x-for="categoryId in selectedCategoryIds" :key="categoryId">
     <span class="admin__action-multiselect-crumb"
           x-data="CategorySelectionCrumb"
@@ -18,8 +23,7 @@ use Magento\Framework\View\Element\Template;
             data-action="remove-selected-item"
             tabindex="-1"
             @click="removeSelected"
-            data-bind="click: $parent.removeSelected.bind($parent, value)
-        ">
+        >
             <span class="action-close-text">
                 <?= $escaper->escapeHtml(__('Close')) ?>
             </span>
@@ -38,15 +42,13 @@ use Magento\Framework\View\Element\Template;
                 this.$nextTick(() => {
                     this.crumbId = parseFloat(this.root.dataset.id);
                 });
-
             },
             crumbLabel() {
-                return this.items[this.crumbId]?.label || '';
+                return this.itemLabel(this.crumbId);
             },
             removeSelected() {
                 this.$event.stopPropagation();
                 this.unselectCategoryId(this.crumbId);
-                console.log(this.selectedCategoryIds, this.crumbId);
             },
         };
     }

view/adminhtml/templates/form/field_type/category_selection/main_js.phtml

@@ -32,35 +32,12 @@ $maxTreeLevel = $fieldType->getMaxCategoryLevel($fieldType->getCategoryTree());
     };
 
     const CategorySelectionHover = {
-        hoverOnFirstItem() {
-            const firstHoverItemId = this.hoverSequence[0];
-            if (firstHoverItemId) {
-                this.items[firstHoverItemId].hovered = true;
-            }
-        },
-        getHoverSequenceByEventKey(key) {
-            const currentHoveredItem = this.getCurrentHoverItem();
-            const sequenceStartIndex = this.hoverSequence.findIndex((seq) => seq === currentHoveredItem.id);
-
-            if (sequenceStartIndex === -1) {
-                return [];
-            }
-
-            if (key === 'ArrowDown') {
-                return this.hoverSequence.slice(sequenceStartIndex + 1);
-            }
-            if (key === 'ArrowUp') {
-                return this.hoverSequence.slice(0, sequenceStartIndex).reverse();
+        isItemHovered(id) {
+            if (!this.items[id]) {
+                return false;
             }
 
-            return [];
-        },
-        getCurrentHoverItem() {
-            const currentHoveredItemId = Object.keys(this.items).find((itemId) => {
-                return this.items[itemId].hovered;
-            });
-
-            return this.items[currentHoveredItemId];
+            return this.items[id].hovered;
         },
         keydownSwitcher() {
             this.$event.stopPropagation();
@@ -72,15 +49,15 @@ $maxTreeLevel = $fieldType->getMaxCategoryLevel($fieldType->getCategoryTree());
             this.$nextTick(() => {
                 this.$el.focus();
             });
-            const currentHoveredItem = this.getCurrentHoverItem();
+            const currentHoveredItem = this._getCurrentHoverItem();
 
             if (!currentHoveredItem) {
-                return this.hoverOnFirstItem();
+                return this._hoverOnFirstItem();
             }
 
             let sequenceItemUsed = false;
 
-            for (const seqId of this.getHoverSequenceByEventKey(this.$event.key)) {
+            for (const seqId of this._getHoverSequenceByEventKey(this.$event.key)) {
                 const item = this.items[seqId];
                 if (!item) {
                     continue;
@@ -101,7 +78,7 @@ $maxTreeLevel = $fieldType->getMaxCategoryLevel($fieldType->getCategoryTree());
             }
             currentHoveredItem.hovered = false;
             if (!sequenceItemUsed) {
-                this.hoverOnFirstItem();
+                this._hoverOnFirstItem();
             }
         },
         updateItemHovered(id, hoverValue) {
@@ -111,12 +88,35 @@ $maxTreeLevel = $fieldType->getMaxCategoryLevel($fieldType->getCategoryTree());
 
             this.items[id].hovered = hoverValue;
         },
-        isItemHovered(id) {
-            if (!this.items[id]) {
-                return false;
+        _getHoverSequenceByEventKey(key) {
+            const currentHoveredItem = this._getCurrentHoverItem();
+            const sequenceStartIndex = this.hoverSequence.findIndex((seq) => seq === currentHoveredItem.id);
+
+            if (sequenceStartIndex === -1) {
+                return [];
             }
 
-            return this.items[id].hovered;
+            if (key === 'ArrowDown') {
+                return this.hoverSequence.slice(sequenceStartIndex + 1);
+            }
+            if (key === 'ArrowUp') {
+                return this.hoverSequence.slice(0, sequenceStartIndex).reverse();
+            }
+
+            return [];
+        },
+        _getCurrentHoverItem() {
+            const currentHoveredItemId = Object.keys(this.items).find((itemId) => {
+                return this.items[itemId].hovered;
+            });
+
+            return this.items[currentHoveredItemId];
+        },
+        _hoverOnFirstItem() {
+            const firstHoverItemId = this.hoverSequence[0];
+            if (firstHoverItemId) {
+                this.items[firstHoverItemId].hovered = true;
+            }
         },
     };
 
@@ -147,8 +147,8 @@ $maxTreeLevel = $fieldType->getMaxCategoryLevel($fieldType->getCategoryTree());
             classActionMenu() {
                 return { _active: this.listVisible };
             },
-            toggleListVisible() {
-                this.listVisible = !this.listVisible;
+            itemLabel(id) {
+                return this.items[id]?.label || '';
             },
             isTree() {
                 return true;
@@ -166,6 +166,9 @@ $maxTreeLevel = $fieldType->getMaxCategoryLevel($fieldType->getCategoryTree());
 
                 return this.items[id].expanded;
             },
+            toggleListVisible() {
+                this.listVisible = !this.listVisible;
+            },
             toggleItemExpansion(id) {
                 if (!this.items[id]) {
                     return;
@@ -195,19 +198,6 @@ $maxTreeLevel = $fieldType->getMaxCategoryLevel($fieldType->getCategoryTree());
     function CategorySelectItemCommon() {
         return {
             data: null,
-            toggleSelection() {
-                if (!this.data) {
-                    return;
-                }
-                this.$event.stopPropagation();
-                this.toggleItemSelection(this.data.id);
-            },
-            isSelected() {
-                if (!this.data) {
-                    return false;
-                }
-                return this.isItemSelected(this.data.id);
-            },
             classActionMenuItem() {
                 if (!this.data) {
                     return {};
@@ -221,6 +211,19 @@ $maxTreeLevel = $fieldType->getMaxCategoryLevel($fieldType->getCategoryTree());
                     '_with-checkbox': true,
                 };
             },
+            isSelected() {
+                if (!this.data) {
+                    return false;
+                }
+                return this.isItemSelected(this.data.id);
+            },
+            toggleSelection() {
+                if (!this.data) {
+                    return;
+                }
+                this.$event.stopPropagation();
+                this.toggleItemSelection(this.data.id);
+            },
         }
     }
 
@@ -239,12 +242,12 @@ $maxTreeLevel = $fieldType->getMaxCategoryLevel($fieldType->getCategoryTree());
             get itemId() {
                 return this.data?.id;
             },
-            classInnerItem() {
-                return { _parent: this.data.hasChildren };
-            },
             itemLevel() {
                 return this.data.level;
             },
+            classInnerItem() {
+                return { _parent: this.data.hasChildren };
+            },
             dataExpanded() {
                 return this.isItemExpanded(this.itemId) ? 'true' : 'false';
             },