@total_onion/onion-library 3.2.0 → 3.2.2

package/public/block-block-interactions-v3/block-interactions-v3.css

@@ -0,0 +1,36 @@
+@layer base-styles {
+  .block-interactions-v3__block-close-button {
+    cursor: pointer;
+    border: medium none currentcolor;
+    border: initial;
+    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+    background: initial;
+  }
+  .block-interactions-v3__popup-trigger {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: medium none currentcolor;
+    border: initial;
+    background-color: transparent;
+    background-color: initial;
+    display: flex;
+    cursor: pointer;
+  }
+  .block-interactions-v3 svg {
+    width: calc(30 / var(--design-reference) * var(--screen-width));
+    height: calc(30 / var(--design-reference) * var(--screen-width));
+  }
+  @media screen and (min-width: 768px) {
+    .block-interactions-v3 svg {
+      width: calc(30 / var(--design-reference) * var(--screen-width));
+      height: calc(30 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .block-interactions-v3 svg {
+      width: calc(30 / var(--design-reference) * var(--screen-width));
+      height: calc(30 / var(--design-reference) * var(--screen-width));
+    }
+  }
+}

package/public/block-block-interactions-v3/block-interactions-v3.js

@@ -0,0 +1,44 @@
+export default function blockinteractionsv3Js(options = {}) {
+  try {
+    let setCookie = function(name, value, days) {
+      const expires = new Date(Date.now() + days * 864e5).toUTCString();
+      document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
+    }, getCookie = function(name) {
+      return document.cookie.split("; ").reduce((result, cookieString) => {
+        const [key, val] = cookieString.split("=");
+        return key === name ? decodeURIComponent(val) : result;
+      }, "");
+    };
+    const { block } = options;
+    const blockId = block.dataset.blockid;
+    const parentBlockId = block.dataset.parentblockid;
+    const blockCloseButtons = block.querySelectorAll(".block-interactions-v3__block-close-button");
+    if (!blockCloseButtons.length) {
+      return;
+    }
+    blockCloseButtons.forEach((button) => {
+      const shouldStoreCookie = button?.dataset?.storeCookie === "true";
+      const cookieKey = `blockClosed_${parentBlockId}`;
+      const wrappingSection = document.querySelector(`[data-blockid="${parentBlockId}"]`);
+      if (getCookie(cookieKey) === "true") {
+        wrappingSection.style.animation = "none";
+        wrappingSection.style.display = "none";
+        return;
+      }
+      button.addEventListener("click", (e) => {
+        console.log(e.currentTarget.dataset);
+        wrappingSection.style.animation = "none";
+        wrappingSection.offsetHeight;
+        wrappingSection.style.animation = `${e.currentTarget.dataset.animationname} ${e.currentTarget.dataset.animationduration}s forwards reverse`;
+        setTimeout(() => {
+          wrappingSection.style.display = "none";
+        }, e.currentTarget.dataset.animationduration * 1e3);
+        if (shouldStoreCookie) {
+          setCookie(cookieKey, "true", 7);
+        }
+      });
+    });
+  } catch (error) {
+    console.error("Error in blockinteractionsv3Js:", error);
+  }
+}

package/public/block-carousel-multi-layout-v3/carousel-multi-layout-v3.css

@@ -0,0 +1,187 @@
+@layer base-styles {
+  .carousel-multi-layout-v3 {
+    display: grid;
+    grid-template: "main"/1fr;
+    overflow-x: hidden;
+    overflow-x: var(--block-overflow, hidden);
+    width: 100%;
+    position: relative;
+    background-color: var(--carousel-bg-colour);
+  }
+  .carousel-multi-layout-v3__inner-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: grid;
+    grid-area: main;
+    grid-template: "main"/1fr;
+  }
+  .carousel-multi-layout-v3__swiper-carousel-container {
+    width: 100%;
+    height: 100%;
+    grid-area: main;
+    inset: 0;
+  }
+  .carousel-multi-layout-v3__swiper-carousel-container .swiper-wrapper {
+    height: 100%;
+  }
+  .carousel-multi-layout-v3 .swiper-button-disabled {
+    pointer-events: none;
+    opacity: 0;
+  }
+  .carousel-multi-layout-v3 .swiper-button-prev {
+    left: var(--left-arrow-horizontally-mobile);
+  }
+  @media screen and (min-width: 768px) {
+    .carousel-multi-layout-v3 .swiper-button-prev {
+      left: var(--left-arrow-horizontally-portrait);
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .carousel-multi-layout-v3 .swiper-button-prev {
+      left: var(--left-arrow-horizontally-desktop);
+    }
+  }
+  .carousel-multi-layout-v3 .swiper-button-next {
+    right: var(--right-arrow-horizontally-mobile);
+  }
+  @media screen and (min-width: 768px) {
+    .carousel-multi-layout-v3 .swiper-button-next {
+      right: var(--right-arrow-horizontally-portrait);
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .carousel-multi-layout-v3 .swiper-button-next {
+      right: var(--right-arrow-horizontally-desktop);
+    }
+  }
+  .carousel-multi-layout-v3 .swiper-button-next,
+  .carousel-multi-layout-v3 .swiper-button-prev {
+    top: var(--arrows-position-vertically-mobile);
+  }
+  @media screen and (min-width: 768px) {
+    .carousel-multi-layout-v3 .swiper-button-next,
+    .carousel-multi-layout-v3 .swiper-button-prev {
+      top: var(--arrows-position-vertically-portrait);
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .carousel-multi-layout-v3 .swiper-button-next,
+    .carousel-multi-layout-v3 .swiper-button-prev {
+      top: var(--arrows-position-vertically-desktop);
+    }
+  }
+  .carousel-multi-layout-v3 .swiper-button-next::after,
+  .carousel-multi-layout-v3 .swiper-button-prev::after {
+    --swiper-navigation-size: calc(var(--arrows-size-mobile) / var(--design-reference) * var(--screen-width));
+  }
+  @media screen and (min-width: 768px) {
+    .carousel-multi-layout-v3 .swiper-button-next::after,
+    .carousel-multi-layout-v3 .swiper-button-prev::after {
+      --swiper-navigation-size: calc(var(--arrows-size-portrait) / var(--design-reference) * var(--screen-width));
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .carousel-multi-layout-v3 .swiper-button-next::after,
+    .carousel-multi-layout-v3 .swiper-button-prev::after {
+      --swiper-navigation-size: calc(var(--arrows-size-desktop) / var(--design-reference) * var(--screen-width));
+    }
+  }
+  .carousel-multi-layout-v3 .swiper-button-next::after,
+  .carousel-multi-layout-v3 .swiper-button-prev::after {
+    text-rendering: auto;
+    color: var(--swiper-arrow-colour);
+  }
+  .carousel-multi-layout-v3 .custom_arrow {
+    height: auto;
+    width: calc(var(--custom-arrows-size-mobile) / var(--design-reference) * var(--screen-width));
+  }
+  @media screen and (min-width: 768px) {
+    .carousel-multi-layout-v3 .custom_arrow {
+      width: calc(var(--custom-arrows-size-portrait) / var(--design-reference) * var(--screen-width));
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .carousel-multi-layout-v3 .custom_arrow {
+      width: calc(var(--custom-arrows-size-desktop) / var(--design-reference) * var(--screen-width));
+    }
+  }
+  .carousel-multi-layout-v3 .swiper-pagination-bullets.swiper-pagination-horizontal {
+    bottom: auto;
+    bottom: initial;
+    left: auto;
+    left: initial;
+    width: auto;
+    width: initial;
+  }
+  .carousel-multi-layout-v3 .swiper-pagination {
+    position: relative;
+    position: var(--element-position, relative);
+    z-index: var(--element-z-index);
+    place-self: var(--mobile-vertical-placement) var(--mobile-horizontal-placement);
+    translate: 0 0;
+    translate: var(--element-horizontal-offset-mobile, 0) var(--element-vertical-offset-mobile, 0);
+    rotate: 0deg;
+    rotate: var(--element-rotation-mobile, 0deg);
+  }
+  @media screen and (min-width: 768px) {
+    .carousel-multi-layout-v3 .swiper-pagination {
+      place-self: var(--portrait-vertical-placement, var(--desktop-vertical-placement)) var(--portrait-horizontal-placement, var(--desktop-horizontal-placement));
+      translate: 0 0;
+      translate: var(--element-horizontal-offset-portrait, var(--element-horizontal-offset-desktop, 0)) var(--element-vertical-offset-portrait, var(--element-vertical-offset-desktop, 0));
+      rotate: 0deg;
+      rotate: var(--element-rotation-portrait, var(--element-rotation-desktop, 0deg));
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .carousel-multi-layout-v3 .swiper-pagination {
+      place-self: var(--desktop-vertical-placement) var(--desktop-horizontal-placement);
+      translate: 0 0;
+      translate: var(--element-horizontal-offset-desktop, 0) var(--element-vertical-offset-desktop, 0);
+      rotate: 0deg;
+      rotate: var(--element-rotation-desktop, 0deg);
+    }
+  }
+  .carousel-multi-layout-v3 .swiper-pagination-bullet {
+    background-color: transparent;
+  }
+  .carousel-multi-layout-v3 .swiper-pagination-bullet-active {
+    background-color: var(--swiper-pagination-colour);
+  }
+  .carousel-multi-layout-v3 .swiper-pagination-fraction {
+    color: var(--swiper-pagination-colour);
+  }
+  .carousel-multi-layout-v3 .swiper-slide {
+    opacity: var(--next-and-prev-slide-opacity-mobile);
+  }
+  @media screen and (min-width: 768px) {
+    .carousel-multi-layout-v3 .swiper-slide {
+      opacity: var(--next-and-prev-slide-opacity-portrait);
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .carousel-multi-layout-v3 .swiper-slide {
+      opacity: var(--next-and-prev-slide-opacity-desktop);
+    }
+  }
+  .carousel-multi-layout-v3 .swiper-slide-active {
+    opacity: 1;
+    opacity: initial;
+  }
+  .carousel-multi-layout-v3 .swiper-button-next,
+  .carousel-multi-layout-v3 .swiper-button-prev {
+    display: var(--display-arrows-mobile);
+  }
+  @media screen and (min-width: 768px) {
+    .carousel-multi-layout-v3 .swiper-button-next,
+    .carousel-multi-layout-v3 .swiper-button-prev {
+      display: var(--display-arrows-portrait);
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .carousel-multi-layout-v3 .swiper-button-next,
+    .carousel-multi-layout-v3 .swiper-button-prev {
+      display: var(--display-arrows-desktop);
+    }
+  }
+}

package/public/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js

@@ -0,0 +1,185 @@
+import { Navigation, Pagination, Autoplay, EffectFade } from "swiper/modules";
+import "swiper/css/bundle";
+export default function carouselmultilayoutv3Js(options = {}) {
+  try {
+    const { block } = options;
+    const totalSlides = block.querySelectorAll(".swiper-slide").length || 1;
+    Promise.all([getSwiperAssetsV2()]).then((values) => {
+      const { Swiper } = values[0][0];
+      const dataAttributes = block.dataset;
+      const slidesDesktop = Number(dataAttributes.desktopslides);
+      const slidesDesktopFull = Number(dataAttributes.desktopslidesfull) || slidesDesktop;
+      const slidesTablet = Number(dataAttributes.tabletslides);
+      const slidesMobile = Number(dataAttributes.mobileslides);
+      const slidesOffsetDesktopBefore = Number(
+        dataAttributes.desktopslidesoffsetbefore
+      );
+      const slidesOffsetTabletBefore = Number(
+        dataAttributes.tabletslidesoffsetbefore
+      );
+      const slidesOffsetMobileBefore = Number(
+        dataAttributes.mobileslidesoffsetbefore
+      );
+      const slidesOffsetDesktopAfter = Number(
+        dataAttributes.desktopslidesoffsetafter
+      );
+      const slidesOffsetTabletAfter = Number(
+        dataAttributes.tabletslidesoffsetafter
+      );
+      const slidesOffsetMobileAfter = Number(
+        dataAttributes.mobileslidesoffsetafter
+      );
+      const loopSlides = Number(dataAttributes.loopslides) === 1;
+      const loopSlidesPortrait = Number(dataAttributes.loopslidesportrait) === 1;
+      const loopSlidesMobile = Number(dataAttributes.loopslidesmobile) === 1;
+      console.log(totalSlides > 1 ? loopSlides : false);
+      const spaceBetweenSlidesDesktop = Number(
+        dataAttributes.desktopspacebetweenslides
+      );
+      const spaceBetweenSlidesDesktopFull = Number(dataAttributes.desktopfullspacebetweenslides) || spaceBetweenSlidesDesktop;
+      const spaceBetweenSlidesMobile = Number(
+        dataAttributes.mobilespacebetweenslides
+      );
+      const spaceBetweenSlidesTablet = Number(
+        dataAttributes.tabletspacebetweenslides
+      );
+      const autoplayCarousel = Number(dataAttributes.autoplay) === 1;
+      const centerActiveSlide = Number(dataAttributes.centeractiveslide) === 1;
+      const centerActiveSlidePortrait = Number(dataAttributes.centeractiveslideportrait) === 1;
+      const centerActiveSlideMobile = Number(dataAttributes.centeractiveslidemobile) === 1;
+      const centerSlidesBounds = Number(dataAttributes.centerslidesbounds) === 1;
+      const centerSlidesBoundsPortrait = Number(dataAttributes.centerslidesboundsportrait) === 1;
+      const centerSlidesBoundsMobile = Number(dataAttributes.centerslidesboundsmobile) === 1;
+      const centerInsufficientSlidesDesktop = Number(dataAttributes.centerinsufficientslidesdesktop) === 1;
+      const centerInsufficientSlidesPortrait = Number(dataAttributes.centerinsufficientslidesportrait) === 1;
+      const centerInsufficientSlidesMobile = Number(dataAttributes.centerinsufficientslidesmobile) === 1;
+      const carouselEnableFreeMode = Number(dataAttributes.enablefreemode) === 1;
+      const carouselEnableMousewheel = Number(dataAttributes.enablemousewheel) === 1;
+      const delay = Number(dataAttributes.transitiondelay);
+      const speed = Number(dataAttributes.transitionspeed);
+      const transitionStyle = dataAttributes.transitionstyle === "default" ? "" : dataAttributes.transitionstyle;
+      const paginationStyle = dataAttributes.paginationstyle === "customnumber" ? "bullets" : dataAttributes.paginationstyle;
+      const fractionStyle = dataAttributes.fractionstyle;
+      const fractionString = dataAttributes.fractionstring;
+      const fractionSetting = fractionStyle === "text" ? function(currentClass, totalClass) {
+        return '<span class="' + currentClass + '"></span> ' + fractionString + ' <span class="' + totalClass + '"></span>';
+      } : false;
+      const customNumber = dataAttributes.paginationstyle === "customnumber" ? function(index, className) {
+        return '<div class="' + className + '"><span class="pagination-number">0' + (index + 1) + "</span></div>";
+      } : false;
+      const carouselmultilayoutv3Swiper = new Swiper(
+        block.querySelector(".swiper"),
+        {
+          modules: [
+            Navigation,
+            Pagination,
+            Autoplay,
+            EffectFade
+            // EffectCoverflow,
+            // EffectCreative,
+            // FreeMode,
+            // Mousewheel
+          ],
+          slidesPerView: slidesMobile,
+          spaceBetween: spaceBetweenSlidesMobile,
+          loop: totalSlides > 1 ? loopSlidesMobile : false,
+          preloadImages: true,
+          watchSlidesVisibility: true,
+          effect: transitionStyle,
+          creativeEffect: {
+            prev: {
+              shadow: true,
+              translate: [0, 0, -400]
+            },
+            next: {
+              translate: ["100%", 0, 0]
+            }
+          },
+          coverflowEffect: {
+            rotate: 20,
+            depth: 50,
+            scale: 0.9,
+            modifier: 1,
+            slideShadows: true
+          },
+          fadeEffect: {
+            crossFade: true
+          },
+          lazy: {
+            loadPrevNext: true
+          },
+          speed,
+          autoplay: autoplayCarousel ? {
+            delay
+          } : "",
+          watchOverflow: true,
+          centeredSlides: centerActiveSlideMobile,
+          centerInsufficientSlides: centerInsufficientSlidesMobile,
+          centeredSlidesBounds: centerSlidesBoundsMobile,
+          freeMode: {
+            enabled: carouselEnableFreeMode,
+            sticky: carouselEnableFreeMode
+          },
+          mousewheel: carouselEnableMousewheel,
+          slidesOffsetBefore: slidesOffsetMobileBefore,
+          slidesOffsetAfter: slidesOffsetMobileAfter,
+          breakpoints: {
+            744: {
+              spaceBetween: spaceBetweenSlidesTablet,
+              slidesPerView: slidesTablet,
+              centeredSlides: centerActiveSlidePortrait,
+              centerInsufficientSlides: centerInsufficientSlidesPortrait,
+              centeredSlidesBounds: centerSlidesBoundsPortrait,
+              slidesOffsetBefore: slidesOffsetTabletBefore,
+              slidesOffsetAfter: slidesOffsetTabletAfter,
+              loop: totalSlides > 1 ? loopSlidesPortrait : false
+            },
+            1024: {
+              slidesPerView: slidesDesktop,
+              spaceBetween: spaceBetweenSlidesDesktop,
+              centeredSlides: centerActiveSlide,
+              centerInsufficientSlides: centerInsufficientSlidesDesktop,
+              centeredSlidesBounds: centerSlidesBounds,
+              slidesOffsetBefore: slidesOffsetDesktopBefore,
+              slidesOffsetAfter: slidesOffsetDesktopAfter,
+              loop: totalSlides > 1 ? loopSlides : false
+            },
+            1440: {
+              centeredSlides: centerActiveSlide,
+              centerInsufficientSlides: centerInsufficientSlidesDesktop,
+              centeredSlidesBounds: centerSlidesBounds,
+              slidesPerView: slidesDesktopFull,
+              spaceBetween: spaceBetweenSlidesDesktopFull,
+              slidesOffsetBefore: slidesOffsetDesktopBefore,
+              slidesOffsetAfter: slidesOffsetDesktopAfter,
+              loop: totalSlides > 1 ? loopSlides : false
+            }
+          },
+          navigation: {
+            nextEl: block.querySelector(".swiper-button-next"),
+            prevEl: block.querySelector(".swiper-button-prev")
+          },
+          pagination: {
+            el: block.querySelector(".swiper-pagination"),
+            type: paginationStyle,
+            renderFraction: fractionSetting,
+            clickable: true,
+            renderBullet: customNumber
+          }
+        }
+      );
+    });
+  } catch (error) {
+    console.error(error);
+  }
+}
+function getSwiperAssetsV2(options = { css: "bundle" }) {
+  const getSwiperJs = () => import(
+    /* webpackChunkName: 'swiper' */
+    "swiper"
+  );
+  const promisedJs = Promise.all([getSwiperJs()]).then((values) => {
+    return values;
+  });
+  return promisedJs;
+}