After review

Author: albozek

src/bundle/Resources/public/js/scripts/admin.back.to.top.js

@@ -1,4 +1,4 @@
-(function (global, doc) {
+(function (global, doc, ibexa) {
     const backToTopBtn = doc.querySelector('.ibexa-back-to-top__btn');
     const backToTop = doc.querySelector('.ibexa-back-to-top');
     const backToTopAnchor = doc.querySelector('.ibexa-back-to-top-anchor');
@@ -15,7 +15,6 @@
 
         return backToTopBtn.classList.contains('ibexa-back-to-top__btn--visible');
     };
-
     const backToTopBtnTitle = backToTopBtn.querySelector('.ibexa-back-to-top__title');
     let currentBackToTopAnchorHeight = backToTopAnchor.offsetHeight;
     const setBackToTopBtnTextVisibility = (container) => {
@@ -28,7 +27,7 @@
 
         if (!backToTopBtn.classList.contains('ibexa-back-to-top__btn--visible') && shouldBeVisible) {
             backToTopBtn.classList.add('ibexa-back-to-top__btn--visible');
-            global.ibexa.adminUiConfig.quickActionManager.recalculateButtonsLayout();
+            ibexa.quickAction.recalculateButtonsLayout();
         }
 
         backToTopBtn.classList.toggle('ibexa-btn--no-text', !isTitleVisible);
@@ -56,13 +55,13 @@
         setBackToTopBtnTextVisibility(backToTopScrollContainer);
     });
     const config = {
-        name: 'back-to-top',
+        id: 'back-to-top',
         zIndex: 10,
-        selector: backToTop,
+        container: backToTop,
         priority: 100,
         checkVisibility: checkIsVisible,
     };
 
-    global.ibexa.adminUiConfig.quickActionManager.registerButton(config);
+    ibexa.quickAction.registerButton(config);
     resizeObserver.observe(backToTopAnchor);
-})(window, window.document);
+})(window, window.document, window.ibexa);

src/bundle/Resources/public/js/scripts/quick.action.manager.js

@@ -1,54 +1,49 @@
 (function (global) {
-    let registeredActionButtons = [];
+    let actionButtonConfigs = [];
+
+    const registerButton = (config) => {
+        if (!config || !config.container || actionButtonConfigs.some((btn) => btn.id === config.id)) {
+            return;
+        }
+
+        actionButtonConfigs = [...actionButtonConfigs, config].sort((a, b) => a.priority - b.priority);
+        recalculateButtonsLayout();
+    };
+    const unregisterButton = (id) => {
+        actionButtonConfigs = actionButtonConfigs.filter((btn) => btn.id !== id);
+        recalculateButtonsLayout();
+    };
+    const recalculateButtonsLayout = () => {
+        const buttonsToRender = actionButtonConfigs.filter((btn) => {
+            if (typeof btn.checkVisibility === 'function') {
+                const isVisible = btn.checkVisibility();
+
+                return isVisible;
+            }
+
+            return false;
+        });
+
+        buttonsToRender.forEach((buttonConfig, index) => {
+            const { container } = buttonConfig;
 
-    const QuickActionManager = (() => {
-        const registerButton = (config) => {
-            if (!config || !config.selector || registeredActionButtons.some((btn) => btn.name === config.name)) {
-                return;
+            if (!container.style.transition) {
+                container.style.transition = 'all 0.3s ease-in-out';
             }
 
-            registeredActionButtons = [...registeredActionButtons, config];
-            recalculateButtonsLayout();
-        };
-        const unregisterButton = (name) => {
-            registeredActionButtons = registeredActionButtons.filter((btn) => btn.name !== name);
-            recalculateButtonsLayout();
-        };
-        const recalculateButtonsLayout = () => {
-            const sortedButtons = registeredActionButtons.sort((a, b) => a.priority - b.priority);
-            const buttonsToRender = sortedButtons.filter((el) => {
-                if (el.checkVisibility && typeof el.checkVisibility === 'function') {
-                    const isVisible = el.checkVisibility();
-
-                    return isVisible;
-                }
-
-                return false;
-            });
-
-            buttonsToRender.forEach((buttonConfig, index) => {
-                const { selector } = buttonConfig;
-
-                if (!selector.style.transition) {
-                    selector.style.transition = 'all 0.3s ease-in-out';
-                }
-
-                selector.style.position = 'fixed';
-                selector.style.right = '2rem';
-                selector.style.zIndex = buttonConfig.zIndex || 1040;
-
-                const bottomPosition = `${index === 0 ? 2 : (index + 1) * 3.2}rem`;
-
-                selector.style.bottom = bottomPosition;
-            });
-        };
-
-        return {
-            registerButton,
-            unregisterButton,
-            recalculateButtonsLayout,
-        };
-    })();
-
-    global.ibexa.adminUiConfig.quickActionManager = QuickActionManager;
+            container.style.position = 'fixed';
+            container.style.right = '2rem';
+            container.style.zIndex = buttonConfig.zIndex || 1040;
+
+            const bottomPosition = `${index === 0 ? 2 : index * 3.8 + 2 + index * 0.5}rem`;
+
+            container.style.bottom = bottomPosition;
+        });
+    };
+
+    global.ibexa.quickAction = {
+        registerButton,
+        unregisterButton,
+        recalculateButtonsLayout,
+    };
 })(window);

src/bundle/Resources/views/themes/admin/ui/layout.html.twig

@@ -220,7 +220,7 @@
         <div class="ibexa-quick-action-menu">
             {% if not is_back_to_top_disabled|default(false) %}
                 {% block back_to_top %}
-                    <div class="ibexa-back-to-top{{ is_back_to_top_disabled|default(false) ? ' ibexa-back-to-top--hidden' : '' }}">
+                    <div class="ibexa-back-to-top">
                         <button type="button" class="btn ibexa-btn ibexa-btn--tertiary ibexa-btn--no-text ibexa-back-to-top__btn">
                             <span class="ibexa-back-to-top__title">
                                 {{ 'back.to.top'|trans|desc('Go to top') }}