[Sections] Recalculate last section padding on section height change

ibexa · Apr 19, 2023 · f56a65a · f56a65a
1 parent 26d822f
commit f56a65a
Showing 1 changed file with 21 additions and 6 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/admin.anchor.navigation.js b/src/bundle/Resources/public/js/scripts/admin.anchor.navigation.js
@@ -9,6 +9,9 @@
     const headerContainer = header?.querySelector('.ibexa-edit-header__container');
     const SECTION_ADJUST_MARGIN_TOP = 20;
     const formContainerNode = doc.querySelector('.ibexa-edit-content');
+    const lastSectionObserver = new ResizeObserver(() => {
+        fitSections();
+    });
     const getSectionGroupActiveItems = () => {
         const sectionGroupNode = formContainerNode.querySelector('.ibexa-anchor-navigation__section-group') ?? formContainerNode;
         const sections = sectionGroupNode.querySelectorAll('.ibexa-anchor-navigation__section');
@@ -68,7 +71,7 @@
 
         currentlyVisibleSections = getSectionGroupActiveItems();
 
-        fitSections();
+        initFitSection();
     };
     const attachSectionsMenuEvents = () => {
         const items = doc.querySelectorAll('.ibexa-anchor-navigation-menu .ibexa-anchor-navigation-menu__sections-item-btn');
@@ -96,7 +99,7 @@
 
         return sections[sections.length - 1];
     };
-    const fitSections = () => {
+    const initFitSection = () => {
         const sectionGroup =
             formContainerNode.querySelector('.ibexa-anchor-navigation__section-group--active') ??
             formContainerNode.querySelector('.ibexa-anchor-navigation-sections');
@@ -105,16 +108,28 @@
             return;
         }
 
-        const contentColumn = doc.querySelector('.ibexa-main-container__content-column');
-        const firstSection = getFirstSection(sectionGroup);
         const lastSection = getLastSection(sectionGroup);
 
-        if (!firstSection) {
+        if (!lastSection) {
             return;
         }
 
         const contentContainer = lastSection.closest('.ibexa-edit-content__container');
 
+        fitSections();
+
+        lastSectionObserver.unobserve(contentContainer);
+        lastSectionObserver.observe(contentContainer);
+    };
+    const fitSections = () => {
+        const sectionGroup =
+            formContainerNode.querySelector('.ibexa-anchor-navigation__section-group--active') ??
+            formContainerNode.querySelector('.ibexa-anchor-navigation-sections');
+        const contentColumn = doc.querySelector('.ibexa-main-container__content-column');
+        const firstSection = getFirstSection(sectionGroup);
+        const lastSection = getLastSection(sectionGroup);
+        const contentContainer = lastSection.closest('.ibexa-edit-content__container');
+
         if (!firstSection.isSameNode(lastSection) && lastSection.offsetHeight) {
             const lastSectionHeight = lastSection.offsetHeight;
             const headerHeight = headerContainer?.offsetHeight;
@@ -224,6 +239,6 @@
     attachSectionsMenuEvents();
     attachScrollContainerEvents();
     attachListenForIsInvalidClass();
-    fitSections();
+    initFitSection();
     ibexa.helpers.tooltips.parse(navigationMenu);
 })(window, window.document, window.ibexa);