Redesign develop

.gitignore

@@ -7,3 +7,5 @@ helix-importer-ui
 .DS_Store
 *.bak
 .idea
+
+.vscode/settings.json

blocks/columns/columns.js

@@ -13,7 +13,6 @@ export default function decorate(block) {
     block.classList.remove(borderClassName);
   }
   const isDownloadVariant = block.classList.contains('download');
-
   const isGridVariant = block.classList.contains('grid');
   const isGalleryVariant = block.classList.contains('gallery');
   const ratioClass = [...block.classList].find((cl) => cl.startsWith('ratio-'));

blocks/dealer-locator/dealer-locator.js

@@ -118,44 +118,57 @@ export default async function decorate(block) {
     },
   };
 
-  loadScript('/blocks/dealer-locator/vendor/jquery.min.js', { type: 'text/javascript', charset: 'UTF-8' })
-    .then(() => {
-      // these scripts depend on jquery:
-      loadScript('//webapp.woosmap.com/webapp.js', { type: 'text/javascript' }).then(() => {
-        function loadWebApp() {
-          const publicKey = 'woos-50c04d89-af71-3a3b-b0b9-0786ee130532';
-          // eslint-disable-next-line no-undef
-          const webapp = new window.WebApp('dealer-locator', publicKey);
-          const config = {
-            maps: {
-              provider: 'woosmap',
-              channel: '',
-              localities: {
-                language,
-                data: 'advanced',
+  const loadDealerLocator = () => {
+    loadScript('/blocks/dealer-locator/vendor/jquery.min.js', { type: 'text/javascript', charset: 'UTF-8' })
+      .then(() => {
+        // these scripts depend on jquery:
+        loadScript('//webapp.woosmap.com/webapp.js', { type: 'text/javascript' }).then(() => {
+          function loadWebApp() {
+            const publicKey = 'woos-50c04d89-af71-3a3b-b0b9-0786ee130532';
+            // eslint-disable-next-line no-undef
+            const webapp = new window.WebApp('dealer-locator', publicKey);
+            const config = {
+              maps: {
+                provider: 'woosmap',
+                channel: '',
+                localities: {
+                  language,
+                  data: 'advanced',
+                },
               },
-            },
-            theme: {
-              primaryColor: '#ed1d24',
-            },
-            datasource: {
-              maxResponses: 5,
-              maxDistance: 1000000,
-              useDistanceMatrix: true,
-              distanceMatrixProvider: 'woosmap',
-            },
-            internationalization: {
-              lang: language,
-            },
-            woosmapview: isOneLocationVariant ? selectedLocationConfig : defaultLocationConfig,
-          };
-          webapp.setConf(config);
-          if (isOneLocationVariant) {
-            webapp.setInitialStateToSelectedStore('990002');
+              theme: {
+                primaryColor: '#ed1d24',
+              },
+              datasource: {
+                maxResponses: 5,
+                maxDistance: 1000000,
+                useDistanceMatrix: true,
+                distanceMatrixProvider: 'woosmap',
+              },
+              internationalization: {
+                lang: language,
+              },
+              woosmapview: isOneLocationVariant ? selectedLocationConfig : defaultLocationConfig,
+            };
+            webapp.setConf(config);
+            if (isOneLocationVariant) {
+              webapp.setInitialStateToSelectedStore('990002');
+            }
+            webapp.render();
           }
-          webapp.render();
-        }
-        loadWebApp();
+          loadWebApp();
+        });
       });
+  };
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.intersectionRatio > 0) {
+        loadDealerLocator();
+        observer.disconnect();
+      }
     });
+  }, { threshold: [0.1], rootMargin: '500px' });
+
+  observer.observe(block);
 }

blocks/feature/feature.css

@@ -0,0 +1,135 @@
+.feature.block {
+  position: relative;
+}
+
+.feature .feature-slides {
+  display: grid;
+}
+
+.feature .feature-slide {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  grid-area: 1 / 1 / 2 / 2;
+  transition: opacity 500ms ease-in-out;
+}
+
+.feature .feature-image {
+  margin-left: calc((100vw - 100%) / -2);
+  margin-right: calc((100vw - 100%) / -2);
+}
+
+.feature .feature-image picture {
+  display: flex;
+}
+
+.feature .feature-image img {
+  width: 100%;
+  height: auto;
+}
+
+.feature .feature-slides-nav {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 16px;
+  position: absolute;
+  right: 0;
+  top: calc(75vw + 40px);
+  margin-right: calc(var(--section-x-padding) * -1);
+  z-index: 1;
+}
+
+.feature .feature-slide-nav-item {
+  width: 42px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.feature-slide-nav-dot {
+  width: 8px;
+  height: 8px;
+  display: block;
+  border: solid 1px var(--grey-90);
+  color: transparent;
+  overflow: hidden;
+  border-radius: 50%;
+}
+
+.feature .active .feature-slide-nav-dot {
+  width: 20px;
+  height: 20px;
+  background: var(--black);
+  border-radius: 50%;
+  border-width: 0;
+  letter-spacing: 0;
+}
+
+.feature .feature-text {
+  padding-right: 36px;
+}
+
+.feature .feature-text .h5 {
+  margin-bottom: 24px;
+}
+
+@media (width >= 768px) {
+  .feature .feature-slide {
+    flex-direction: row;
+    gap: 48px;
+  }
+
+  .feature .feature-image {
+    width: calc(50vw - 12px);
+    margin-right: unset;
+  }
+
+  .feature .feature-text {
+    max-width: 50%;
+    padding-right: 67px;
+  }
+
+  .feature .feature-slides-nav {
+    width: 42px;
+    top: 0;
+    margin-right: 0;
+    z-index: 1;
+  }
+
+  .feature .feature-slide-nav-item {
+    width: 42px;
+    height: 42px;
+  }
+
+  .feature .feature-slide-nav-item.active span {
+    width: 32px;
+    height: 32px;
+    color: var(--white);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@media (width >= 1025px) {
+  .feature .feature-slide {
+    align-items: center;
+    gap: 72px;
+  }
+
+  .feature .feature-text {
+    padding-right: 80px;
+  }
+
+  .feature .feature-slides-nav {
+    top: 50%;
+    translate: 0 -50%;
+  }
+}
+
+@media (width >= 1440px) {
+  .feature .feature-text {
+    padding-right: 118px;
+  }
+}

blocks/feature/feature.js

@@ -0,0 +1,91 @@
+import {
+  onAppReady,
+} from '../../scripts/helpers.js';
+
+const setActiveSlide = (newActiveIndex, block) => {
+  const slides = block.querySelectorAll('.feature-slides > div');
+  const navItems = [...block.querySelectorAll('.feature-slide-nav-item')];
+
+  slides.forEach((slide, index) => {
+    if (newActiveIndex === index) {
+      slide.style.opacity = '1';
+      slide.style.zIndex = '1';
+      slide.classList.add('active');
+      navItems[index].classList.add('active');
+    } else {
+      slide.style.opacity = '0';
+      slide.style.zIndex = '0';
+      slide.classList.remove('active');
+      navItems[index].classList.remove('active');
+    }
+  });
+};
+
+const createNavigation = (block, slideCount, onClick) => {
+  const slidesDots = (new Array(slideCount))
+    .fill(0)
+    .map((_, index) => {
+      const navItem = document.createElement('button');
+      navItem.classList.add('feature-slide-nav-item');
+
+      if (!index) {
+        navItem.classList.add('active');
+      }
+
+      const dotEl = document.createElement('span');
+      dotEl.classList.add('feature-slide-nav-dot');
+      dotEl.textContent = index + 1;
+
+      navItem.append(dotEl);
+      navItem.addEventListener('click', () => onClick(index, block));
+
+      return navItem;
+    });
+
+  const wrapper = document.createElement('div');
+  wrapper.classList.add('feature-slides-nav');
+  wrapper.append(...slidesDots);
+  block.append(wrapper);
+};
+
+export default async function decorate(block) {
+  const slideCount = block.querySelectorAll(':scope > div').length;
+  const slideWrapper = document.createElement('div');
+  slideWrapper.classList.add('feature-slides');
+
+  block.querySelectorAll(':scope > div').forEach((el, index) => {
+    if (!index) {
+      el.replaceWith(slideWrapper);
+    }
+
+    el.classList.add('feature-slide');
+    slideWrapper.append(el);
+  });
+
+  block.querySelectorAll('.feature-slides > div > div').forEach((column) => {
+    const type = column.querySelector('picture') ? 'image' : 'text';
+    column.classList.add(`feature-${type}`);
+  });
+
+  const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6');
+
+  headings.forEach((heading) => {
+    heading.classList.add('h5');
+  });
+
+  createNavigation(block, slideCount, setActiveSlide);
+  setActiveSlide(0, block);
+
+  // making sure that the slide gets enought space to display slide navigation
+  const onResize = () => {
+    const firstTextEl = block.querySelector('.feature-text');
+    const navEl = block.querySelector('.feature-slides-nav');
+    const minHeight = window.getComputedStyle(navEl).height;
+
+    firstTextEl.style.minHeight = `calc(${minHeight} + 20px)`;
+  };
+
+  onAppReady(onResize);
+
+  window.addEventListener('resize', onResize);
+}