@total_onion/onion-library 2.0.199 → 2.0.200

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

@@ -1,5 +1,6 @@
 import { getSwiperAssetsV2 } from "@total_onion/onion-utils/onion-utils.mjs";
 import { Navigation, Pagination, Autoplay, EffectFade } from "swiper/modules";
+import "swiper/css/bundle";
 export default function carouselmultilayoutv3Js(options = {}) {
   try {
     const { block } = options;
@@ -47,6 +48,9 @@ export default function carouselmultilayoutv3Js(options = {}) {
       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;
@@ -112,6 +116,7 @@ export default function carouselmultilayoutv3Js(options = {}) {
           watchOverflow: true,
           centeredSlides: centerActiveSlideMobile,
           centerInsufficientSlides: centerInsufficientSlidesMobile,
+          centeredSlidesBounds: centerSlidesBoundsMobile,
           freeMode: {
             enabled: carouselEnableFreeMode,
             sticky: carouselEnableFreeMode
@@ -125,6 +130,7 @@ export default function carouselmultilayoutv3Js(options = {}) {
               slidesPerView: slidesTablet,
               centeredSlides: centerActiveSlidePortrait,
               centerInsufficientSlides: centerInsufficientSlidesPortrait,
+              centeredSlidesBounds: centerSlidesBoundsPortrait,
               slidesOffsetBefore: slidesOffsetTabletBefore,
               slidesOffsetAfter: slidesOffsetTabletAfter,
               loop: totalSlides > 1 ? loopSlidesPortrait : false
@@ -134,13 +140,19 @@ export default function carouselmultilayoutv3Js(options = {}) {
               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
             }
           },

package/public/block-cocktail-recipe-v3/cocktail-recipe-v3.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 .cocktail-recipe-v3 {
   pointer-events: all;
 }
@@ -47,30 +46,6 @@
   border: 1px solid #faf8ec;
   overflow: hidden;
 }
-.cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper .servings-dec-btn {
-  cursor: pointer;
-  background-color: #0054ff;
-  color: #faf8ec;
-  font-size: 28px;
-  padding-bottom: 4px;
-  width: 100%;
-  height: 100%;
-  border: medium none currentcolor;
-  border: initial;
-  transform: translateX(0);
-  transition: transform 0.3s ease;
-}
-.cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper .servings-dec-btn::after {
-  content: "\2212";
-  color: #0054ff;
-  padding-top: 4px;
-  width: 38px;
-  height: 38px;
-  position: absolute;
-  top: 0;
-  right: -38px;
-  background-color: #faf8ec;
-}
 .cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper:hover .servings-dec-btn {
   transform: translateX(-100%);
 }
@@ -98,29 +73,6 @@
   border: 1px solid #faf8ec;
   overflow: hidden;
 }
-.cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper .servings-inc-btn {
-  cursor: pointer;
-  color: #0054ff;
-  font-size: 30px;
-  background-color: #faf8ec;
-  width: 100%;
-  height: 100%;
-  border: medium none currentcolor;
-  border: initial;
-  transform: translateX(-100%);
-  transition: transform 0.3s ease;
-}
-.cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper .servings-inc-btn::after {
-  content: "+";
-  padding-top: 2px;
-  color: #faf8ec;
-  width: 38px;
-  height: 38px;
-  position: absolute;
-  top: 0;
-  right: -38px;
-  background-color: #0054ff;
-}
 .cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper:hover .servings-inc-btn {
   transform: translateX(0);
 }
@@ -310,8 +262,13 @@
 }
 .cocktail-recipe-v3__instructions-container .instructions-wrapper .instructions-text {
   font-family: var(--tertiary-font-family);
-  font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  font-size: calc(24 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
   font-weight: 300;
   text-box-trim: trim-both;
   text-box-edge: cap alphabetic;
 }
+@media screen and (min-width: 768px) {
+  .cocktail-recipe-v3__instructions-container .instructions-wrapper .instructions-text {
+    font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  }
+}

package/public/block-cover-link-v3/cover-link-v3.css

@@ -0,0 +1,9 @@
+.cover-link-v3__link {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  pointer-events: all;
+}

package/public/block-scrolling-banner-v3/scrolling-banner-v3.css

@@ -1,5 +1,10 @@
 .scrolling-banner-v3 {
-  position: relative;
+  display: flex;
+  overflow-x: hidden;
+  flex-wrap: nowrap;
+}
+.scrolling-banner-v3__banner-container,
+.scrolling-banner-v3 > .scrolling-banner-v3 {
   overflow-x: hidden;
   color: var(--banner-text-colour);
   font-weight: var(--weight-extra-bold);
@@ -80,6 +85,11 @@
   place-self: center;
   border-radius: 50%;
 }
+.scrolling-banner-v3__separator--image {
+  width: 1.5em;
+  width: var(--separator-image-width, 1.5em);
+  height: auto;
+}
 .scrolling-banner-v3--text-shadow {
   text-shadow: calc(var(--text-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--text-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--text-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) var(--text-shadow-colour);
 }

package/public/block-scrolling-banner-v3/scrolling-banner-v3.js

@@ -6,101 +6,113 @@ export default function scrollingbannerv3Js(options = {}) {
     console.error(error);
   }
 }
-const initializedBanners = /* @__PURE__ */ new WeakMap();
 function scrollingbannerJs(block) {
   if (!block) {
     return;
   }
-  const bannerElement = block.querySelector(".scrolling-banner-v3");
+  const bannerElement = block.querySelector(".scrolling-banner-v3__banner-container") ?? block.querySelector(".scrolling-banner-v3");
   if (!bannerElement) {
     return;
   }
+  const initializedBanners = /* @__PURE__ */ new WeakMap();
   try {
     if (!initializedBanners.has(bannerElement)) {
-      bannerInit(bannerElement);
+      bannerInit(bannerElement, initializedBanners, block);
     }
     const wrapper = bannerElement.querySelector(
       ".scrolling-banner-v3__wrapper"
     );
-    if (wrapper) {
-      if (window.ResizeObserver) {
-        const resizeObserver = new ResizeObserver(() => {
-          resetBanner(bannerElement);
-          bannerInit(bannerElement);
-        });
-        resizeObserver.observe(wrapper);
-      } else {
-        window.addEventListener("resize", () => {
-          resetBanner(bannerElement);
-          bannerInit(bannerElement);
-        });
-      }
+    if (window.ResizeObserver) {
+      const resizeObserver = new ResizeObserver(() => {
+        resetBanner(bannerElement, initializedBanners);
+        bannerInit(bannerElement, initializedBanners, block);
+      });
+      resizeObserver.observe(wrapper);
+    } else {
+      window.addEventListener("resize", () => {
+        resetBanner(bannerElement, initializedBanners);
+        bannerInit(bannerElement, initializedBanners, block);
+      });
     }
   } catch (error) {
     console.error(error);
   }
-  function bannerInit(bannerElement2) {
-    if (initializedBanners.has(bannerElement2)) {
-      return;
-    }
-    const container = bannerElement2.querySelector(
-      ".scrolling-banner-v3__container"
-    );
-    const wrapper = bannerElement2.querySelector(
-      ".scrolling-banner-v3__wrapper"
-    );
-    const inner = bannerElement2.querySelector(
-      ".scrolling-banner-v3__inner"
-    );
-    const speed = bannerElement2.dataset.speed ?? 3;
-    const wrapperWidth = wrapper.clientWidth;
-    const innerContentWidth = inner.clientWidth;
-    const multiplier = Number(Math.round(wrapperWidth / innerContentWidth));
-    for (let index = 0; index < multiplier; index++) {
-      const newInner = inner.cloneNode(true);
-      newInner.classList.add("clone");
-      container.appendChild(newInner);
-    }
-    const containerHeight = inner.clientHeight;
-    wrapper.setAttribute("style", `min-height: ${containerHeight}px`);
-    const newTickerContainer = container.cloneNode(true);
-    newTickerContainer.classList.add("clone");
-    wrapper.appendChild(newTickerContainer);
-    const animation1 = [
-      { transform: "translateX(0%)" },
-      { transform: "translateX(-100%)" }
-    ];
-    const animation2 = [
-      { transform: "translateX(100%)" },
-      { transform: "translateX(0%)" }
-    ];
-    const time = 1e5 / speed;
-    let timing = {
-      duration: time,
-      iterations: Infinity,
-      fill: "both"
-    };
-    let timing2 = timing;
-    const containers = bannerElement2.querySelectorAll(
-      ".scrolling-banner-v3__container"
-    );
-    containers[0].style.transform = "translateX(0%)";
-    containers[1].style.transform = "translateX(100%)";
-    void containers[0].offsetWidth;
-    const anim1 = containers[0].animate(animation1, timing);
-    const anim2 = containers[1].animate(animation2, timing2);
-    initializedBanners.set(bannerElement2, { anim1, anim2 });
+}
+function bannerInit(bannerElement, initializedBanners, block) {
+  if (initializedBanners.has(bannerElement)) {
+    return;
   }
-  function resetBanner(bannerElement2) {
-    const data = initializedBanners.get(bannerElement2);
-    if (data) {
-      data.anim1?.cancel();
-      data.anim2?.cancel();
-      initializedBanners.delete(bannerElement2);
-    }
-    bannerElement2.querySelectorAll(
-      ".scrolling-banner-v3__container.clone, .scrolling-banner-v3__inner.clone"
-    ).forEach((el) => el.remove());
-    bannerElement2.querySelector(".scrolling-banner-v3__wrapper").removeAttribute("style");
+  const container = bannerElement.querySelector(
+    ".scrolling-banner-v3__container"
+  );
+  const wrapper = bannerElement.querySelector(
+    ".scrolling-banner-v3__wrapper"
+  );
+  const inner = bannerElement.querySelector(".scrolling-banner-v3__inner");
+  const speed = bannerElement.dataset.speed ?? 3;
+  const wrapperWidth = wrapper.clientWidth;
+  const innerContentWidth = inner.clientWidth;
+  if (innerContentWidth == 0) {
+    return;
+  }
+  const multiplier = Number(Math.round(wrapperWidth / innerContentWidth));
+  for (let index = 0; index < multiplier; index++) {
+    const newInner = inner.cloneNode(true);
+    newInner.classList.add("clone");
+    container.appendChild(newInner);
+  }
+  const containerHeight = inner.clientHeight;
+  wrapper.setAttribute("style", `min-height: ${containerHeight}px`);
+  const newTickerContainer = container.cloneNode(true);
+  newTickerContainer.classList.add("clone");
+  wrapper.appendChild(newTickerContainer);
+  const animation1 = [
+    { transform: "translateX(0%)" },
+    { transform: "translateX(-100%)" }
+  ];
+  const animation2 = [
+    { transform: "translateX(100%)" },
+    { transform: "translateX(0%)" }
+  ];
+  const bannerLength = Math.floor(container.getBoundingClientRect().width);
+  const singleBannerCycleTime = bannerLength * 100 / speed;
+  let timing = {
+    duration: singleBannerCycleTime,
+    iterations: Infinity,
+    fill: "both"
+  };
+  let timing2 = timing;
+  const containers = bannerElement.querySelectorAll(
+    ".scrolling-banner-v3__container"
+  );
+  containers[0].style.transform = "translateX(0%)";
+  containers[1].style.transform = "translateX(100%)";
+  containers[0].offsetWidth;
+  const anim1 = containers[0].animate(animation1, timing);
+  const anim2 = containers[1].animate(animation2, timing2);
+  initializedBanners.set(bannerElement, { anim1, anim2 });
+  function pauseAnimations() {
+    anim1.pause();
+    anim2.pause();
+  }
+  function resumeAnimations() {
+    anim1.play();
+    anim2.play();
+  }
+  if (bannerElement.querySelector("a")) {
+    block.addEventListener("mouseover", pauseAnimations);
+    block.addEventListener("mouseleave", resumeAnimations);
+  }
+}
+function resetBanner(bannerElement, initializedBanners) {
+  const data = initializedBanners.get(bannerElement);
+  if (data) {
+    data.anim1?.cancel();
+    data.anim2?.cancel();
+    initializedBanners.delete(bannerElement);
   }
+  bannerElement.querySelectorAll(
+    ".scrolling-banner-v3__container.clone, .scrolling-banner-v3__inner.clone"
+  ).forEach((el) => el.remove());
+  bannerElement.querySelector(".scrolling-banner-v3__wrapper").removeAttribute("style");
 }

package/public/block-site-copyright-notice-v3/site-copyright-notice-v3.css

@@ -1,3 +1,18 @@
 .site-copyright-notice-v3 {
-	color: red;
+  color: black;
+  color: var(--site-copyright-notice-colour, black);
+  font-size: calc(14px / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  font-size: calc(var(--site-copyright-font-size-mobile, 14px) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+}
+@media screen and (min-width: 768px) {
+  .site-copyright-notice-v3 {
+    font-size: calc(16px / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    font-size: calc(var(--site-copyright-font-size-portrait, 16px) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .site-copyright-notice-v3 {
+    font-size: calc(18px / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+    font-size: calc(var(--site-copyright-font-size-desktop, 18px) / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
+  }
 }

package/public/block-site-copyright-notice-v3/site-copyright-notice-v3.js

@@ -1,60 +1,44 @@
 export default function sitecopyrightnoticev3Js(options = {}) {
-	try {
-		const {block} = options;
-
-		customElements.define(
-			'site-copyright-notice-v3',
-			class extends HTMLElement {
-				static observedAttributes = ['data-copyright-text'];
-				constructor() {
-					super();
-					let template = document.querySelector(
-						'#site-copyright-notice-v3'
-					);
-					let templateContent = template.content;
-
-					// const shadowRoot = this.attachShadow({mode: 'open'});
-					// shadowRoot.appendChild(
-					// 	document.importNode(templateContent, true)
-					// );
-					// shadowRoot.querySelector(
-					// 	'.site-copyright-notice-v3__title'
-					// ).innerText = this.dataset.copyrightText;
-
-					this.appendChild(
-						document.importNode(templateContent, true)
-					);
-
-					this.classList.add('loaded');
-				}
-				connectedCallback() {
-					console.log('Custom element added to page.');
-					this.querySelector(
-						'.site-copyright-notice-v3__title'
-					).innerText = this.dataset.copyrightText;
-				}
-
-				// disconnectedCallback() {
-				// 	console.log('Custom element removed from page.');
-				// }
-
-				// connectedMoveCallback() {
-				// 	console.log('Custom element moved with moveBefore()');
-				// }
-
-				// adoptedCallback() {
-				// 	console.log('Custom element moved to new page.');
-				// }
-
-				attributeChangedCallback(name, oldValue, newValue) {
-					console.log(`Attribute ${name} has changed.`);
-					this.querySelector(
-						'.site-copyright-notice-v3__title'
-					).innerText = this.dataset.copyrightText;
-				}
-			}
-		);
-	} catch (error) {
-		console.error(error);
-	}
+  try {
+    customElements.define(
+      "site-copyright-notice-v3",
+      class extends HTMLElement {
+        static observedAttributes = ["data-copyright-text"];
+        constructor() {
+          super();
+          let template = document.querySelector(
+            "#site-copyright-notice-v3"
+          );
+          let templateContent = template.content;
+          this.appendChild(
+            document.importNode(templateContent, true)
+          );
+          this.classList.add("loaded");
+        }
+        connectedCallback() {
+          console.log("Custom element added to page.");
+          this.querySelector(
+            ".site-copyright-notice-v3__title"
+          ).innerText = this.dataset.copyrightText;
+        }
+        // disconnectedCallback() {
+        // 	console.log('Custom element removed from page.');
+        // }
+        // connectedMoveCallback() {
+        // 	console.log('Custom element moved with moveBefore()');
+        // }
+        // adoptedCallback() {
+        // 	console.log('Custom element moved to new page.');
+        // }
+        attributeChangedCallback(name, oldValue, newValue) {
+          console.log(`Attribute ${name} has changed.`);
+          this.querySelector(
+            ".site-copyright-notice-v3__title"
+          ).innerText = this.dataset.copyrightText;
+        }
+      }
+    );
+  } catch (error) {
+    console.error(error);
+  }
 }