#43 Update scrolling padding

Netcentric · Nov 15, 2023 · e21ff5d · e21ff5d
1 parent 8b77a05
commit e21ff5d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git a/blocks/v2-truck-features/v2-truck-features.css b/blocks/v2-truck-features/v2-truck-features.css
@@ -87,6 +87,21 @@
   li.v2-truck-features__slide-image--active {
   display: flex;
   justify-content: center;
+  position: relative;
+}
+
+.v2-truck-features__slide-image--active::after {
+  content: '';
+  display: block;
+  height: 100%;
+  position: absolute;
+  background: radial-gradient(
+    52.65% 52.65% at 50% 56%,
+    #fff0 31.16%,
+    #dfdfdf 89.49%
+  );
+  width: 298px;
+  max-width: 800px;
 }
 
 .v2-truck-features__slide-image--active picture,
@@ -150,17 +165,7 @@
   }
 
   .v2-truck-features__slide-image--active::after {
-    content: '';
-    display: block;
-    height: 100%;
-    position: absolute;
-    background: radial-gradient(
-      52.65% 52.65% at 50% 56%,
-      #fff0 31.16%,
-      #dfdfdf 89.49%
-    );
-    width: 50vw;
-    max-width: 800px;
+    width: 51vw;
   }
 
   .v2-truck-features__slide-image--active picture,

diff --git a/blocks/v2-truck-features/v2-truck-features.js b/blocks/v2-truck-features/v2-truck-features.js
@@ -5,7 +5,13 @@ import { getAllElWithChildren } from '../../scripts/scripts.js';
 
 const blockName = 'v2-truck-features';
 const desktopMQ = window.matchMedia('(min-width: 1200px)');
-const SLIDE_SCROLL_PADDING_IN_PX = 200;
+const DESKTOP_SCROLL_PADDING = 200;
+const MOBILE_SCROLL_PADDING = 400;
+let slideScrollPaddingInPx = desktopMQ.matches ? DESKTOP_SCROLL_PADDING : MOBILE_SCROLL_PADDING;
+
+desktopMQ.addEventListener('change', (event) => {
+  slideScrollPaddingInPx = event.matches ? DESKTOP_SCROLL_PADDING : MOBILE_SCROLL_PADDING;
+});
 
 const selectImagesList = (slide) => {
   const imagesLists = [...getAllElWithChildren(slide.querySelectorAll('ul'), ':scope > li > picture')];
@@ -34,7 +40,7 @@ const setContentWrapperHeight = (wrapper, slidesCount) => {
   const availableViewportInPx = windowHeightInPx - navHeightInPx - inPageNavInPx;
   // wrapper height is the viewport height without navigations
   // (to make sure that the slide will fit inside the block) + scroll padding for every slide
-  const wrapperHeight = SLIDE_SCROLL_PADDING_IN_PX * slidesCount + availableViewportInPx;
+  const wrapperHeight = slideScrollPaddingInPx * slidesCount + availableViewportInPx;
   wrapper.style.height = `${wrapperHeight}px`;
 };
 
@@ -158,7 +164,7 @@ export default async function decorate(block) {
       && blockBottomPosition > navHeightInPx + inPageNavInPx
     ) {
       const blockScrollInPx = Math.abs(blockTopPosition - navHeightInPx - inPageNavInPx);
-      const newSlideIndex = Math.floor(blockScrollInPx / SLIDE_SCROLL_PADDING_IN_PX);
+      const newSlideIndex = Math.floor(blockScrollInPx / slideScrollPaddingInPx);
 
       if (newSlideIndex > slidesCount) {
         return;