wickes-css2 2.105.0-develop.2 → 2.105.0-develop.4

package/src/data/data_plp_load-more.json

@@ -381,7 +381,7 @@
       "currentPage": 0,
       "sort": null,
       "numberOfPages": 3,
-      "totalNumberOfResults": 65,
+      "totalNumberOfResults": 1818,
       "startPageItem": 1,
       "endPageItem": 0,
       "offset": 0,

package/src/elements/btn.hbs

@@ -0,0 +1,7 @@
+<button
+    class="{{class}}"
+    data-action="{{action}}"
+    {{#if ariaControls}}aria-controls="{{ariaControls}}"{{/if}}
+>
+  {{text}}
+</button>

package/src/js/components/general/accordion.js

@@ -1,35 +1,44 @@
 var Wick = Wick || {};
-Wick.Accordion = (function(){
-  var $accordion = $('.accordion'),
-    accordionToggler = '.accordion__header',
-    accordionIcon = '.accordion__action',
-    accordionContent = '.accordion__content',
-    collapsed = 'accordion_collapsed',
-    $asideAccordion = $('.aside-accordion .js-toggle-aside-accordion');
-  var bindEvents = function (index, element) {
-    var $acc = $(element);
+Wick.Accordion = (function () {
+    var accordionRoot = '.accordion',
+        accordionToggler = '.accordion__header',
+        accordionIcon = '.accordion__action',
+        accordionContent = '.accordion__content',
+        collapsed = 'accordion_collapsed',
+        $asideAccordion = $('.aside-accordion .js-toggle-aside-accordion');
 
-    var accordionTrigger = $acc.attr('data-action-element') === 'icon' ? accordionIcon : accordionToggler
-    $acc.find(accordionTrigger).on('click', function(){
-      $acc.toggleClass(collapsed);
-      $acc.children(accordionContent).slideToggle(200);
-    });
-  };
+    function getTriggerSelector($acc) {
+        return $acc.attr('data-action-element') === 'icon' ? accordionIcon : accordionToggler;
+    }
 
-  var init = function () {
-    $accordion.each(bindEvents);
+    function onAccordionClick(e) {
+        var $acc = $(e.target).closest(accordionRoot);
+        if (!$acc.length) return;
 
-    $asideAccordion.click(function() {
-      if (window.matchMedia("(min-width: 992px)").matches) {
-          if ($(this).text().toLowerCase() != 'useful links') {
-              $(this).closest('.aside-nav2__holder')
-                     .toggleClass('is-active')
-                     .find('.aside-nav2__list')
-                     .slideToggle(250);
-          }
-      }
-    });
-  }
+        var trigger = getTriggerSelector($acc);
+        if (!$(e.target).closest(trigger).length) return;
 
-  init();
+        $acc.toggleClass(collapsed);
+        $acc.children(accordionContent).stop(true, true).slideToggle(200);
+    }
+
+    function init() {
+        $(document)
+            .off('click.wickAccordion', accordionToggler + ',' + accordionIcon)
+            .on('click.wickAccordion', accordionToggler + ',' + accordionIcon, onAccordionClick);
+
+        $asideAccordion.off('click.wickAsideAccordion').on('click.wickAsideAccordion', function () {
+            if (window.matchMedia('(min-width: 992px)').matches) {
+                if ($(this).text().toLowerCase() !== 'useful links') {
+                    $(this)
+                        .closest('.aside-nav2__holder')
+                        .toggleClass('is-active')
+                        .find('.aside-nav2__list')
+                        .slideToggle(250);
+                }
+            }
+        });
+    }
+
+    init();
 })();

package/src/js/components/general/cart-slider.js

@@ -1,20 +1,23 @@
 const cartSliderHTML = '<div class="custom-slider just-added d-none"></div>';
 
 createPopupSlider({
-  type: 'cart',
-  sliderSelector: '.custom-slider.just-added',
-  onAppendEvent: 'productAddedToCart',
-  onAppend: function (event, { showSlider, handleScroll, el }) {
-    if (!$('.custom-slider.just-added').length) {
-      $('body').append(cartSliderHTML);
-    }
-    const htmlContent = event.detail.html;
-    $(el.slider).append(htmlContent);
-    showSlider();
-    Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
-    $(el.sliderWrap).on('scroll', _.debounce(() => handleScroll(el.sliderWrap), 100));
-  },
-  onClose: function () {
-    Wick.MiniBasketSliderFE.cartEntries = [];
-  }
+    type: 'cart',
+    sliderSelector: '.custom-slider.just-added',
+    onAppendEvent: 'productAddedToCart',
+    onAppend: function (event, { showSlider, handleScroll, el }) {
+        if (!$('.custom-slider.just-added').length) {
+            $('body').append(cartSliderHTML);
+        }
+        const htmlContent = event.detail.html;
+        $(el.slider).append(htmlContent);
+        showSlider();
+        Wick.MiniBasketSliderFE.isMiniBasketLoaded = false;
+        $(el.sliderWrap).on(
+            'scroll',
+            _.debounce(() => handleScroll(el.sliderWrap), 100)
+        );
+    },
+    onClose: function () {
+        Wick.MiniBasketSliderFE.cartEntries = [];
+    },
 });

package/src/js/components/general/create-popup-slider.js

@@ -1,199 +1,194 @@
 function createEvent(eventName, payload, eventDetail) {
-  return new CustomEvent(eventName, {
-    detail: {
-      payload,
-      resolve: eventDetail.resolve,
-      reject: eventDetail.reject,
-    },
-  });
+    return new CustomEvent(eventName, {
+        detail: {
+            payload,
+            resolve: eventDetail.resolve,
+            reject: eventDetail.reject,
+        },
+    });
 }
 
+/* eslint-disable no-unused-vars -- used globally */
 function createPopupSlider({ type, sliderSelector, onAppendEvent, onAppend, onClose }) {
-  const events = {
-    CLOSE_JUST_ADDED: 'CLOSE_JUST_ADDED',
-    CLOSE_MINI_BASKET: 'CLOSE_MINI_BASKET'
-  }
-
-  const el = {
-    $body: $('body'),
-    slider: sliderSelector,
-    sliderWrap: `${sliderSelector} .custom-slider__wrap`,
-    sliderWrapScroll: 'custom-slider__wrap--scroll',
-    footer: '.custom-slider__footer',
-    closePopup: `${sliderSelector} .close-popup`,
-    $stickyWrapper: $('.sticky-wrapper'),
-    $headerWrapper: $('.header-wrapper'),
-    scrollDisable: 'slider-scroll-disable',
-    footerFixed: 'footer-fixed',
-    btnMiniBasket: '.header-minicart__btn',
-  };
-
-  function isSmallBreakpoint() {
-    return Wick.Responsive.getCurrentBreakpoint() === 'down-sm';
-  }
-
-  function getAnimationClass() {
-    return isSmallBreakpoint() ? 'bottom-to-top' : 'right-to-left';
-  }
-
-  function adjustHeight() {
-    const stickyWrapperHeight = el.$stickyWrapper.outerHeight() || 0;
-    const headerWrapperHeight = el.$headerWrapper.outerHeight() || 0;
-
-    const totalHeight = stickyWrapperHeight + headerWrapperHeight;
-    $(el.slider).css('height', `calc(100% - ${totalHeight}px)`);
-  }
-
-  function hideSlider() {
-    $(el.slider).removeClass('show');
-
-    setTimeout(() => {
-      el.$body.removeClass(el.scrollDisable);
-
-      if (!isSmallBreakpoint()) {
-        el.$body.css('padding-right', '');
-      }
-
-      if (type === 'cart') {
-        $(el.slider)
-          .removeAttr('style')
-          .empty();
-      }
-
-      $(el.slider).addClass('d-none');
-    }, 400);
-  }
-
-  function handleScroll(sliderWrap) {
-    const scrollHeight = $(sliderWrap)[0].scrollHeight;
-    const scrollTop = $(sliderWrap).scrollTop();
-    const clientHeight = $(sliderWrap)[0].clientHeight;
-    const scrollBottom = scrollHeight - scrollTop - clientHeight;
-
-    if (scrollBottom > 75) {
-      $(el.footer).addClass(el.footerFixed);
-      $(sliderWrap).addClass(el.sliderWrapScroll);
-    } else {
-      $(el.footer).removeClass(el.footerFixed);
-      $(sliderWrap).removeClass(el.sliderWrapScroll);
+    const events = {
+        CLOSE_JUST_ADDED: 'CLOSE_JUST_ADDED',
+        CLOSE_MINI_BASKET: 'CLOSE_MINI_BASKET',
+    };
+
+    const el = {
+        $body: $('body'),
+        slider: sliderSelector,
+        sliderWrap: `${sliderSelector} .custom-slider__wrap`,
+        sliderWrapScroll: 'custom-slider__wrap--scroll',
+        footer: '.custom-slider__footer',
+        closePopup: `${sliderSelector} .close-popup`,
+        $stickyWrapper: $('.sticky-wrapper'),
+        $headerWrapper: $('.header-wrapper'),
+        scrollDisable: 'slider-scroll-disable',
+        footerFixed: 'footer-fixed',
+        btnMiniBasket: '.header-minicart__btn',
+    };
+
+    function isSmallBreakpoint() {
+        return Wick.Responsive.getCurrentBreakpoint() === 'down-sm';
+    }
+
+    function getAnimationClass() {
+        return isSmallBreakpoint() ? 'bottom-to-top' : 'right-to-left';
     }
-  }
 
-  function showSlider() {
-    if (isSmallBreakpoint()) {
-      adjustHeight();
+    function adjustHeight() {
+        const stickyWrapperHeight = el.$stickyWrapper.outerHeight() || 0;
+        const headerWrapperHeight = el.$headerWrapper.outerHeight() || 0;
+
+        const totalHeight = stickyWrapperHeight + headerWrapperHeight;
+        $(el.slider).css('height', `calc(100% - ${totalHeight}px)`);
     }
 
-    const animationClass = getAnimationClass();
-    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
-    $(el.slider)
-      .removeClass('bottom-to-top right-to-left')
-      .addClass(animationClass);
+    function hideSlider() {
+        $(el.slider).removeClass('show');
 
-    $('html, body').animate({ scrollTop: 0 }, 300, () => {
-      Wick.Backdrop.show();
-      $(el.slider).removeClass('d-none');
+        setTimeout(() => {
+            el.$body.removeClass(el.scrollDisable);
 
-      setTimeout(() => {
-        $(el.slider).addClass('show');
-        handleScroll(el.sliderWrap);
-        el.$body.addClass(el.scrollDisable);
+            if (!isSmallBreakpoint()) {
+                el.$body.css('padding-right', '');
+            }
+
+            if (type === 'cart') {
+                $(el.slider).removeAttr('style').empty();
+            }
+
+            $(el.slider).addClass('d-none');
+        }, 400);
+    }
 
-        if (!isSmallBreakpoint()) {
-          el.$body.css('padding-right', `${scrollBarWidth}px`);
+    function handleScroll(sliderWrap) {
+        const scrollHeight = $(sliderWrap)[0].scrollHeight;
+        const scrollTop = $(sliderWrap).scrollTop();
+        const clientHeight = $(sliderWrap)[0].clientHeight;
+        const scrollBottom = scrollHeight - scrollTop - clientHeight;
+
+        if (scrollBottom > 75) {
+            $(el.footer).addClass(el.footerFixed);
+            $(sliderWrap).addClass(el.sliderWrapScroll);
+        } else {
+            $(el.footer).removeClass(el.footerFixed);
+            $(sliderWrap).removeClass(el.sliderWrapScroll);
         }
-      }, 100);
-    });
-  }
-
-  function handleSliderClose(eventName) {
-    return new Promise((resolve, reject) => {
-      const eventDetail = {resolve, reject};
-      const event = createEvent(eventName, {}, eventDetail);
-      window.dispatchEvent(event);
-    })
-      .then(() => {})
-      .catch((error) => {
-        console.error(error);
-      })
-      .finally(() => {
-        hideSlider();
-        Wick.Backdrop.hide();
-        if (typeof onClose === 'function') {
-          onClose();
+    }
+
+    function showSlider() {
+        if (isSmallBreakpoint()) {
+            adjustHeight();
         }
-      })
-  }
 
-  function bindClosePopup() {
-    $(document).on('click', el.closePopup, async () => {
-      if (type === 'cart') {
-        await handleSliderClose(events.CLOSE_JUST_ADDED);
-      }
+        const animationClass = getAnimationClass();
+        const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+        $(el.slider).removeClass('bottom-to-top right-to-left').addClass(animationClass);
 
-      if (type === 'miniBasket') {
-        await handleSliderClose(events.CLOSE_MINI_BASKET)
-      }
+        $('html, body').animate({ scrollTop: 0 }, 300, () => {
+            Wick.Backdrop.show();
+            $(el.slider).removeClass('d-none');
 
-      hideSlider();
-      Wick.Backdrop.hide();
-    });
-  }
-
-  function handleResize() {
-    const animationClass = getAnimationClass();
-
-    if ($(el.slider).hasClass('show')) {
-      $(el.slider)
-        .removeClass('bottom-to-top right-to-left')
-        .addClass(animationClass);
-
-      if (isSmallBreakpoint()) {
-        adjustHeight();
-      } else {
-        $(el.slider).css('height', '');
-        Wick.Backdrop.show();
-      }
+            setTimeout(() => {
+                $(el.slider).addClass('show');
+                handleScroll(el.sliderWrap);
+                el.$body.addClass(el.scrollDisable);
+
+                if (!isSmallBreakpoint()) {
+                    el.$body.css('padding-right', `${scrollBarWidth}px`);
+                }
+            }, 100);
+        });
     }
-  }
-
-  function shouldClosePopup(event) {
-    const $target = $(event.target);
-    return (
-      !$target.closest(el.slider).length &&
-      !$target.closest(el.closePopup).length &&
-      $(el.slider).hasClass('show')
-    );
-  }
-
-  function init() {
-    bindClosePopup();
-
-    if (onAppendEvent && onAppend) {
-      window.addEventListener(onAppendEvent, (event) => {
-        onAppend(event, { showSlider, handleScroll, el });
-      });
+
+    function handleSliderClose(eventName) {
+        return new Promise((resolve, reject) => {
+            const eventDetail = { resolve, reject };
+            const event = createEvent(eventName, {}, eventDetail);
+            window.dispatchEvent(event);
+        })
+            .then(() => {})
+            .catch((error) => {
+                console.error(error);
+            })
+            .finally(() => {
+                hideSlider();
+                Wick.Backdrop.hide();
+                if (typeof onClose === 'function') {
+                    onClose();
+                }
+            });
     }
 
-    $(window).on('resize', _.debounce(handleResize, 100));
+    function bindClosePopup() {
+        $(document).on('click', el.closePopup, async () => {
+            if (type === 'cart') {
+                await handleSliderClose(events.CLOSE_JUST_ADDED);
+            }
+
+            if (type === 'miniBasket') {
+                await handleSliderClose(events.CLOSE_MINI_BASKET);
+            }
 
-    $('body').on('click', async (event) => {
-      if (shouldClosePopup(event)) {
-        if (type === 'cart') {
-          await handleSliderClose(events.CLOSE_JUST_ADDED);
+            hideSlider();
+            Wick.Backdrop.hide();
+        });
+    }
+
+    function handleResize() {
+        const animationClass = getAnimationClass();
+
+        if ($(el.slider).hasClass('show')) {
+            $(el.slider).removeClass('bottom-to-top right-to-left').addClass(animationClass);
+
+            if (isSmallBreakpoint()) {
+                adjustHeight();
+            } else {
+                $(el.slider).css('height', '');
+                Wick.Backdrop.show();
+            }
         }
+    }
+
+    function shouldClosePopup(event) {
+        const $target = $(event.target);
+        return (
+            !$target.closest(el.slider).length &&
+            !$target.closest(el.closePopup).length &&
+            $(el.slider).hasClass('show')
+        );
+    }
 
-        if (type === 'miniBasket') {
-          await handleSliderClose(events.CLOSE_MINI_BASKET)
+    function init() {
+        bindClosePopup();
+
+        if (onAppendEvent && onAppend) {
+            window.addEventListener(onAppendEvent, (event) => {
+                onAppend(event, { showSlider, handleScroll, el });
+            });
         }
-      }
-    });
-  }
 
-  init();
+        $(window).on('resize', _.debounce(handleResize, 100));
+
+        $('body').on('click', async (event) => {
+            if (shouldClosePopup(event)) {
+                if (type === 'cart') {
+                    await handleSliderClose(events.CLOSE_JUST_ADDED);
+                }
+
+                if (type === 'miniBasket') {
+                    await handleSliderClose(events.CLOSE_MINI_BASKET);
+                }
+            }
+        });
+    }
+
+    init();
 
-  return {
-    showSlider,
-    handleScroll,
-  };
+    return {
+        showSlider,
+        handleScroll,
+    };
 }