@total_onion/onion-library 3.2.0 → 3.2.1

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

@@ -0,0 +1,117 @@
+export default function accordionv3Js(options = {}) {
+  try {
+    const { block } = options;
+    const blockClassName = block.dataset.assetkey;
+    const sections = block.querySelectorAll(
+      `.${blockClassName}-content`
+    );
+    const closeAccordionSections = () => {
+      sections.forEach((section) => {
+        if (section.classList.contains("active")) {
+          const question = section.querySelector(
+            `.${blockClassName}-question-wrapper`
+          );
+          const answer = section.querySelector(
+            `.${blockClassName}-answer-wrapper`
+          );
+          const svg = section.querySelector(
+            `.${blockClassName}-icon`
+          );
+          const iconImage = section.querySelector(
+            `.${blockClassName}-image-wrapper`
+          );
+          const sectionHeight = answer.scrollHeight;
+          answer.animate(
+            [
+              {
+                height: sectionHeight + "px"
+              },
+              { height: "0px" }
+            ],
+            {
+              fill: "forwards",
+              duration: 200,
+              easing: "ease-out"
+            }
+          );
+          answer.setAttribute("aria-hidden", "true");
+          question.classList.remove("active");
+          section.classList.remove("active");
+          if (svg) {
+            svg.classList.remove("active");
+          }
+          if (iconImage) {
+            iconImage.classList.remove("image-icon-active");
+          }
+        }
+      });
+    };
+    sections.forEach((section) => {
+      const question = section.querySelector(
+        `.${blockClassName}-question-wrapper`
+      );
+      const answer = section.querySelector(
+        `.${blockClassName}-answer-wrapper`
+      );
+      const svg = section.querySelector(`.${blockClassName}-icon`);
+      const iconImage = section.querySelector(
+        `.${blockClassName}-image-wrapper`
+      );
+      question.addEventListener("click", () => {
+        const isCollapsed = answer.getAttribute("aria-hidden") === "true";
+        closeAccordionSections();
+        if (isCollapsed) {
+          const sectionHeight = answer.scrollHeight;
+          answer.animate(
+            [
+              { height: "0px" },
+              {
+                height: sectionHeight + "px"
+              }
+            ],
+            {
+              fill: "forwards",
+              duration: 200,
+              easing: "ease-out"
+            }
+          );
+          section.classList.add("active");
+          answer.classList.add("active");
+          answer.setAttribute("aria-hidden", "false");
+          if (svg) {
+            svg.classList.add("active");
+          }
+          if (iconImage) {
+            iconImage.classList.add("image-icon-active");
+          }
+        } else {
+          const sectionHeight = answer.scrollHeight;
+          section.classList.remove("active");
+          answer.animate(
+            [
+              {
+                height: sectionHeight + "px"
+              },
+              { height: "0px" }
+            ],
+            {
+              fill: "forwards",
+              duration: 200,
+              easing: "ease-out"
+            }
+          );
+          answer.classList.remove("active");
+          answer.setAttribute("aria-hidden", "true");
+          if (svg) {
+            svg.classList.remove("active");
+          }
+          if (iconImage) {
+            iconImage.classList.remove("image-icon-active");
+          }
+        }
+      });
+    });
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/block-back-to-top-button-v3/back-to-top-button-v3.css

@@ -0,0 +1,64 @@
+@layer base-styles {
+  .back-to-top-button {
+    position: relative;
+    width: 100%;
+    z-index: 50;
+    overflow: visible;
+    overflow: initial;
+  }
+  .back-to-top-button__arrow {
+    --arrow-colour: black;
+    position: absolute;
+    border-style: solid;
+    border-color: black;
+    border-color: var(--arrow-colour);
+    border-width: 0 2px 2px 0;
+    display: inline-block;
+    transform: rotate(-135deg);
+    height: 20%;
+    width: 20%;
+  }
+  .back-to-top-button__button {
+    --bg-colour: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    cursor: pointer;
+    height: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
+    width: calc(50 / var(--desktop-design-reference) * var(--screen-width-static));
+    border: none;
+    border-radius: 50px;
+    padding: calc(18 / var(--desktop-design-reference) * var(--screen-width-static));
+    background-color: white;
+    background-color: var(--bg-colour);
+    right: calc(10 / var(--design-reference) * var(--screen-width));
+    border-radius: var(--button-border-radius);
+  }
+  @media screen and (min-width: 768px) {
+    .back-to-top-button__button {
+      right: calc(30 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    .back-to-top-button__button {
+      right: calc(60 / var(--design-reference) * var(--screen-width));
+    }
+  }
+  .back-to-top-button__button--fixed {
+    position: fixed;
+    bottom: calc(60 / var(--desktop-design-reference) * var(--screen-width-static));
+  }
+  .back-to-top-button__button--absolute {
+    position: absolute;
+    translate: 0 -50%;
+  }
+  .wp-admin .back-to-top-button__button {
+    position: absolute;
+    translate: 0 0;
+    bottom: 0;
+  }
+  .back-to-top-button__image {
+    width: calc(var(--image-size) / var(--desktop-design-reference) * var(--screen-width-static));
+  }
+}

package/public/block-back-to-top-button-v3/back-to-top-button-v3.js

@@ -0,0 +1,12 @@
+export default function backtotopbuttonJs(options = {}) {
+  try {
+    const { block } = options;
+    const button = block.querySelector(".back-to-top-button__button");
+    button.addEventListener(
+      "click",
+      () => window.scrollTo({ top: 0, behavior: "smooth" })
+    );
+  } catch (error) {
+    console.error(error);
+  }
+}

package/public/block-betterreviews-display-v3/betterreviews-display-v3.css

@@ -0,0 +1,95 @@
+@layer base-styles {
+  .betterreviews-display-v3.loaded .better-reviews__criteria-stars {
+    animation: slide-reveal-right 1s 2s ease-out forwards;
+  }
+  .betterreviews-display-v3 .better-reviews__average .better-reviews__criteria-stars {
+    --star-count: 5;
+    --star-size: 16px;
+    --better-reviews-star-width: calc( var(--star-count) * var(--star-size) + (var(--star-count) - 1) * 0px );
+    opacity: 0;
+    position: relative;
+    width: calc(5 * 16px + (5 - 1) * 0px);
+    width: var(--better-reviews-star-width);
+    height: 16px;
+    height: var(--star-size);
+    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.86 26'><path d='M27.86,10.12l-7.24,6.46,1.99,9.42-8.68-4.71-8.68,4.54,1.99-9.43L0,9.95l9.77-1.22L13.93,0l4.16,8.73,9.77,1.4Z'/></svg>");
+    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.86 26'><path d='M27.86,10.12l-7.24,6.46,1.99,9.42-8.68-4.71-8.68,4.54,1.99-9.43L0,9.95l9.77-1.22L13.93,0l4.16,8.73,9.77,1.4Z'/></svg>");
+    -webkit-mask-repeat: repeat-x;
+    mask-repeat: repeat-x;
+    -webkit-mask-size: 16px auto;
+    mask-size: 16px auto;
+    -webkit-mask-size: var(--star-size) auto;
+    mask-size: var(--star-size) auto;
+    -webkit-mask-position: left 33%;
+    mask-position: left 33%;
+    background: transparent;
+  }
+  .betterreviews-display-v3 .better-reviews__average .better-reviews__criteria-stars::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background:
+      linear-gradient(
+        90deg,
+        #44271c 0%,
+        #dabb9c 32%,
+        #e5c29d 38%,
+        #ebc79f 45%,
+        #7a4a36 74%,
+        #89563e 81%,
+        #9d6749 92%,
+        #a56d4e 100%);
+    background-clip: content-box;
+    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.86 26'><path d='M27.86,10.12l-7.24,6.46,1.99,9.42-8.68-4.71-8.68,4.54,1.99-9.43L0,9.95l9.77-1.22L13.93,0l4.16,8.73,9.77,1.4Z'/></svg>");
+    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.86 26'><path d='M27.86,10.12l-7.24,6.46,1.99,9.42-8.68-4.71-8.68,4.54,1.99-9.43L0,9.95l9.77-1.22L13.93,0l4.16,8.73,9.77,1.4Z'/></svg>");
+    -webkit-mask-repeat: repeat-x;
+    mask-repeat: repeat-x;
+    -webkit-mask-size: var(--star-size) auto;
+    mask-size: var(--star-size) auto;
+    -webkit-mask-position: left 33%;
+    mask-position: left 33%;
+  }
+  .betterreviews-display-v3 .better-reviews__average .better-reviews__criteria-stars.better-reviews__star_05::before {
+    padding-right: calc(var(--better-reviews-star-width) * 0.911);
+  }
+  .betterreviews-display-v3 .better-reviews__average .better-reviews__criteria-stars.better-reviews__star_10::before {
+    padding-right: calc(var(--better-reviews-star-width) * 0.8);
+  }
+  .betterreviews-display-v3 .better-reviews__average .better-reviews__criteria-stars.better-reviews__star_15::before {
+    padding-right: calc(var(--better-reviews-star-width) * 0.702);
+  }
+  .betterreviews-display-v3 .better-reviews__average .better-reviews__criteria-stars.better-reviews__star_20::before {
+    padding-right: calc(var(--better-reviews-star-width) * 0.6);
+  }
+  .betterreviews-display-v3 .better-reviews__average .better-reviews__criteria-stars.better-reviews__star_25::before {
+    padding-right: calc(var(--better-reviews-star-width) * 0.5);
+  }
+  .betterreviews-display-v3 .better-reviews__average .better-reviews__criteria-stars.better-reviews__star_30::before {
+    padding-right: calc(var(--better-reviews-star-width) * 0.4);
+  }
+  .betterreviews-display-v3 .better-reviews__average .better-reviews__criteria-stars.better-reviews__star_35::before {
+    padding-right: calc(var(--better-reviews-star-width) * 0.298);
+  }
+  .betterreviews-display-v3 .better-reviews__average .better-reviews__criteria-stars.better-reviews__star_40::before {
+    padding-right: calc(var(--better-reviews-star-width) * 0.2);
+  }
+  .betterreviews-display-v3 .better-reviews__average .better-reviews__criteria-stars.better-reviews__star_45::before {
+    padding-right: calc(var(--better-reviews-star-width) * 0.1);
+  }
+  .betterreviews-display-v3 .better-reviews__average .better-reviews__criteria-stars.better-reviews__star_50::before {
+    padding-right: 0;
+  }
+  @keyframes slide-reveal-right {
+    from {
+      clip-path: inset(0 100% 0 0);
+      opacity: 0;
+    }
+    25% {
+      opacity: 1;
+    }
+    100% {
+      clip-path: inset(0 0 0 0);
+      opacity: 1;
+    }
+  }
+}

package/public/block-betterreviews-display-v3/betterreviews-display-v3.js

@@ -0,0 +1,7 @@
+export default function betterreviewsdisplay3Js(options = {}) {
+  try {
+    const { block } = options;
+  } catch (error) {
+    console.error(error);
+  }
+}

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);
+    }
+  }
+}