after CR

Author: tischsoic

src/bundle/Resources/public/js/scripts/admin.context.menu.js

@@ -1,27 +1,27 @@
 (function (global, doc, ibexa) {
-    const adapatItemsContainer = doc.querySelector('.ibexa-context-menu');
+    const adaptedItemsContainer = doc.querySelector('.ibexa-context-menu');
 
-    if (!adapatItemsContainer) {
+    if (!adaptedItemsContainer) {
         return;
     }
 
     const menuButtons = [
-        ...adapatItemsContainer.querySelectorAll(
+        ...adaptedItemsContainer.querySelectorAll(
             '.ibexa-context-menu__item > .ibexa-btn:not(.ibexa-btn--more), .ibexa-context-menu__item > .ibexa-split-btn',
         ),
     ];
-    const popupMenuElement = adapatItemsContainer.querySelector('.ibexa-context-menu__item--more .ibexa-multilevel-popup-menu');
-    const showPopupButton = adapatItemsContainer.querySelector('.ibexa-btn--more');
+    const popupMenuElement = adaptedItemsContainer.querySelector('.ibexa-context-menu__item--more .ibexa-multilevel-popup-menu');
+    const showPopupButton = adaptedItemsContainer.querySelector('.ibexa-btn--more');
 
     if (!showPopupButton) {
         return;
     }
 
     const adaptiveItems = new ibexa.core.AdaptiveItems({
         itemHiddenClass: 'ibexa-context-menu__item--hidden',
-        container: adapatItemsContainer,
+        container: adaptedItemsContainer,
         getActiveItem: () => {
-            return adapatItemsContainer.querySelector('.ibexa-context-menu__item');
+            return adaptedItemsContainer.querySelector('.ibexa-context-menu__item');
         },
         onAdapted: (visibleItems, hiddenItems) => {
             const hiddenButtonsIds = [...hiddenItems].map((item) => item.querySelector('.ibexa-btn').id);
@@ -35,11 +35,13 @@
         },
     });
     const clickRelatedBtn = (relatedBtnId) => {
-        const button = doc.getElementById(relatedBtnId);
+        const relatedBtn = doc.getElementById(relatedBtnId);
 
-        button.click();
+        relatedBtn.click();
+    };
+    const addRelatedBtnIdToMenuItem = (itemElement, relatedBtnId) => {
+        itemElement.dataset.relatedBtnId = relatedBtnId;
     };
-    const addRelatedBtnIdToMenuItem = (itemElement, relatedBtnId) => (itemElement.dataset.relatedBtnId = relatedBtnId);
     const multilevelPopupMenu = new ibexa.core.MultilevelPopupMenu({
         container: popupMenuElement,
         triggerElement: showPopupButton,
@@ -127,8 +129,9 @@
     };
 
     multilevelPopupMenu.init();
+
     const topBranch = multilevelPopupMenu.generateMenu(menuTree);
 
     adaptiveItems.init();
-    adapatItemsContainer.classList.remove('ibexa-context-menu--before-adaptive-items-init');
+    adaptedItemsContainer.classList.remove('ibexa-context-menu--before-adaptive-items-init');
 })(window, window.document, window.ibexa);

src/bundle/Resources/public/js/scripts/admin.multilevel.popup.menu.js

@@ -6,7 +6,7 @@
     multilevelPopupMenusContainers.forEach((container) => {
         const multilevelPopupMenu = new ibexa.core.MultilevelPopupMenu({
             container,
-            triggerElement: doc.querySelector('#asdf'),
+            triggerElement: doc.querySelector(container.dataset.triggerElementSelector),
         });
 
         multilevelPopupMenu.init();

src/bundle/Resources/public/js/scripts/core/multilevel.popup.menu.js

@@ -29,46 +29,43 @@
 
             const itemsWithSubitems = this.container.querySelectorAll('.ibexa-popup-menu__item--has-subitems');
 
-            this.initBranch(
-                this.triggerElement,
-                topBranch,
-                this.referenceElement,
-                this.initialBranchPlacement,
-                this.initialBranchFallbackPlacements,
-                this.processBranchOnInitAfter,
-                this.processItemOnInitAfter,
-            );
+            this.initBranch({
+                triggerElement: this.triggerElement,
+                branchElement: topBranch,
+                referenceElement: this.referenceElement,
+                placement: this.initialBranchPlacement,
+                fallbackPlacements: this.initialBranchFallbackPlacements,
+                processBranchAfter: this.processBranchOnInitAfter,
+                processBranchItemAfter: this.processItemOnInitAfter,
+            });
             this.triggerElement.branchElement = topBranch;
 
             itemsWithSubitems.forEach((itemElement) => {
                 const branchElement = itemElement.querySelector(':scope > .ibexa-multilevel-popup-menu__branch');
                 const parentBranchElement = itemElement.closest('.ibexa-popup-menu');
 
-                this.initBranch(
-                    itemElement,
-                    branchElement,
-                    undefined,
-                    undefined,
-                    undefined,
-                    this.processBranchOnInitAfter,
-                    this.processItemOnInitAfter,
-                );
+                this.initBranch({
+                    triggerElement: itemElement,
+                    branchElement: branchElement,
+                    processBranchAfter: this.processBranchOnInitAfter,
+                    processBranchItemAfter: this.processItemOnInitAfter,
+                });
 
                 itemElement.branchElement = branchElement;
                 branchElement.itemElement = itemElement;
                 branchElement.parentBranchElement = parentBranchElement;
             });
         }
 
-        initBranch(
+        initBranch({
             triggerElement,
             branchElement,
             referenceElement = null,
             placement = 'right-start',
             fallbackPlacements = ['right-end', 'left-start', 'left-end'],
             processBranchAfter = () => {},
             processBranchItemAfter = () => {},
-        ) {
+        }) {
             doc.body.appendChild(branchElement);
 
             const isTopBranch = !triggerElement.classList.contains('ibexa-popup-menu__item');
@@ -143,7 +140,7 @@
         }
 
         updateBranchAndParentBranchesOpenState(branchElement) {
-            const isTopBranch = !(branchElement?.parentBranchElement ?? null);
+            const isTopBranch = !branchElement?.parentBranchElement;
 
             if (isTopBranch) {
                 return;
@@ -265,7 +262,7 @@
 
             processAfterCreated(newBranchElement, data);
 
-            this.initBranch(triggerElement, newBranchElement, null, placement, fallbackPlacements);
+            this.initBranch({ triggerElement, branchElement: newBranchElement, placement, fallbackPlacements });
 
             const parentBranchElement = triggerElement.closest('.ibexa-popup-menu');
 
@@ -355,10 +352,10 @@
             }
         }
 
-        isOurBranch(branch) {
+        isBranchBelongingToThisMenu(branch) {
             const topBranch = this.triggerElement.branchElement;
 
-            return !!branch && (topBranch === branch || this.isOurBranch(branch.parentBranchElement));
+            return !!branch && (topBranch === branch || this.isBranchBelongingToThisMenu(branch.parentBranchElement));
         }
 
         handleClickOutside(event) {
@@ -371,7 +368,7 @@
             const closestPopup = event.target.closest('.ibexa-popup-menu');
             const isPopupMenuExpanded = !topBranch.classList.contains('ibexa-popup-menu--hidden');
             const isClickInsideTrigger = this.triggerElement.contains(event.target);
-            const isClickInsideOurBranch = this.isOurBranch(closestPopup);
+            const isClickInsideOurBranch = this.isBranchBelongingToThisMenu(closestPopup);
 
             if (!isPopupMenuExpanded || isClickInsideTrigger || isClickInsideOurBranch) {
                 return;

src/bundle/Resources/public/scss/_popup-menu.scss

@@ -129,7 +129,7 @@
         display: none;
     }
 
-    &--no-absolute {
+    &--initial-position {
         position: initial;
     }
 }

src/bundle/Resources/public/scss/_split-button.scss

@@ -9,8 +9,8 @@
     }
 
     &__main-btn {
-        border-top-right-radius: 0px;
-        border-bottom-right-radius: 0px;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
     }
 
     &__split {
@@ -20,8 +20,8 @@
 
     &__toggle-btn {
         margin-left: calculateRem(-1px);
-        border-top-left-radius: 0px;
-        border-bottom-left-radius: 0px;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
 
         .ibexa-icon {
             transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;