[MWPW-151474] Ensure carousel navigation is displayed after everythin…

…g has been loaded (adobecom#2427) [MWPW-151474] Ensure navigation is displayed after everything has been loaded
mokimo · Jun 11, 2024 · 7266eb1 · 7266eb1
1 parent 4faf094
commit 7266eb1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/libs/blocks/carousel/carousel.css b/libs/blocks/carousel/carousel.css
@@ -20,6 +20,11 @@
   margin-bottom: 1.8rem;
 }
 
+/* Late loading controls */
+.carousel .is-delayed {
+  visibility: hidden;
+}
+
 .carousel .carousel-wrapper {
   position: relative;
   overflow: hidden;

diff --git a/libs/blocks/carousel/carousel.js b/libs/blocks/carousel/carousel.js
@@ -20,7 +20,7 @@ function decorateNextPreviousBtns() {
   const previousBtn = createTag(
     'button',
     {
-      class: 'carousel-button carousel-previous',
+      class: 'carousel-button carousel-previous is-delayed',
       'aria-label': 'Previous',
       'data-toggle': 'previous',
     },
@@ -30,7 +30,7 @@ function decorateNextPreviousBtns() {
   const nextBtn = createTag(
     'button',
     {
-      class: 'carousel-button carousel-next',
+      class: 'carousel-button carousel-next is-delayed',
       'aria-label': 'Next',
       'data-toggle': 'next',
     },
@@ -43,15 +43,15 @@ function decorateLightboxButtons() {
   const expandBtn = createTag(
     'button',
     {
-      class: 'lightbox-button carousel-expand',
+      class: 'lightbox-button carousel-expand is-delayed',
       'aria-label': 'Open in full screen',
     },
     LIGHTBOX_ICON,
   );
   const closeBtn = createTag(
     'button',
     {
-      class: 'lightbox-button carousel-close',
+      class: 'lightbox-button carousel-close is-delayed',
       'aria-label': 'Close full screen carousel',
     },
     CLOSE_ICON,
@@ -342,7 +342,7 @@ export default function init(el) {
   const fragment = new DocumentFragment();
   const nextPreviousBtns = decorateNextPreviousBtns();
   const slideIndicators = decorateSlideIndicators(slides);
-  const controlsContainer = createTag('div', { class: 'carousel-controls' });
+  const controlsContainer = createTag('div', { class: 'carousel-controls is-delayed' });
 
   fragment.append(...slides);
   const slideWrapper = createTag('div', { class: 'carousel-wrapper' });
@@ -395,4 +395,11 @@ export default function init(el) {
   }
   slides.slice(NoOfVisibleSlides).forEach((slide) => slide.querySelectorAll('a').forEach((focusableElement) => { focusableElement.setAttribute('tabindex', -1); }));
   handleChangingSlides(carouselElements);
+
+  function handleLateLoadingNavigation() {
+    [...el.querySelectorAll('.is-delayed')].forEach((item) => item.classList.remove('is-delayed'));
+    parentArea.removeEventListener(MILO_EVENTS.DEFERRED, handleLateLoadingNavigation, true);
+  }
+
+  parentArea.addEventListener(MILO_EVENTS.DEFERRED, handleLateLoadingNavigation, true);
 }