wickes-css2 2.107.0-ripple.2 → 2.107.0-ripple.21

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

@@ -0,0 +1,194 @@
+function createEvent(eventName, payload, eventDetail) {
+    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);
+        }
+    }
+
+    function showSlider() {
+        if (isSmallBreakpoint()) {
+            adjustHeight();
+        }
+
+        const animationClass = getAnimationClass();
+        const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+        $(el.slider).removeClass('bottom-to-top right-to-left').addClass(animationClass);
+
+        $('html, body').animate({ scrollTop: 0 }, 300, () => {
+            Wick.Backdrop.show();
+            $(el.slider).removeClass('d-none');
+
+            setTimeout(() => {
+                $(el.slider).addClass('show');
+                handleScroll(el.sliderWrap);
+                el.$body.addClass(el.scrollDisable);
+
+                if (!isSmallBreakpoint()) {
+                    el.$body.css('padding-right', `${scrollBarWidth}px`);
+                }
+            }, 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 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);
+            }
+
+            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')
+        );
+    }
+
+    function init() {
+        bindClosePopup();
+
+        if (onAppendEvent && onAppend) {
+            window.addEventListener(onAppendEvent, (event) => {
+                onAppend(event, { showSlider, handleScroll, el });
+            });
+        }
+
+        $(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,
+    };
+}

package/build/js/components/general/device-type.js

@@ -0,0 +1,6 @@
+var Wick = Wick || {};
+Wick.Device = function() {
+    if (Wick.Responsive.isTouchDevice()){
+        $('html').addClass('touch-device');
+    }
+}();

package/build/js/components/general/footer.js

@@ -0,0 +1,67 @@
+var Wick = Wick || {};
+Wick.Footer = (function(){
+  let $accordion = $('.footer-menu__inner .accordion'),
+    $accordionContent = $('.footer-menu__inner .accordion__content'),
+    $paymentList = $('footer .payments__list'),
+    $waysToPayList = $('footer .payways__list'),
+    $paymentListCheckoutFooter = $('footer .payments-checkout__list'),
+    $paymentListOrderSummery = $('.right-aside .footer-checkout .payments-checkout__list'),
+    paymentSmallListClass = 'payments__list--small',
+    waysToPaySmallListClass = 'payways__list--small',
+    paymentCheckoutSmallListClass = 'payments-checkout__list--small',
+    collapsedState = "accordion_collapsed",
+    windowWidth = $(window).width();
+
+  const elementClassAdjustments = [
+    { $element: $paymentList, count: 6, className: paymentSmallListClass },
+    { $element: $paymentListOrderSummery, count: 6, className: paymentCheckoutSmallListClass, isGreaterThan: true },
+    { $element: $paymentListCheckoutFooter, count: 6, className: paymentCheckoutSmallListClass, isGreaterThan: false },
+    { $element: $waysToPayList, count: 6, className: waysToPaySmallListClass, isGreaterThan: false, checkForWindowWidth: true }
+  ];
+
+  function accordionClickHandler() {
+    if ($(this).find($accordionContent).is(':visible')) {
+      $accordionContent.hide()
+      $accordion.not($(this)).removeClass(collapsedState)
+      $(this).find($accordionContent).show()
+    }
+  }
+
+  function applyClassBasedOnChildrenCount($element, count, className, isGreaterThan = false, checkForWindowWidth = false) {
+    let hasEnoughChildren = isGreaterThan ? $element.children().length > count : $element.children().length < count;
+
+    if(checkForWindowWidth && windowWidth < 576) {
+      if(hasEnoughChildren) {
+        $element.addClass(className);
+      }
+    } else if (!checkForWindowWidth) {
+      if(hasEnoughChildren) {
+        $element.addClass(className);
+      }
+    }
+  }
+
+  function onWindowResize() {
+    windowWidth = $(window).width();
+
+    let isChildrenCountLessThanSix = $waysToPayList.children().length < 6;
+
+    if(isChildrenCountLessThanSix && windowWidth > 576 ) {
+      $waysToPayList.removeClass(waysToPaySmallListClass);
+    } else if (isChildrenCountLessThanSix) {
+      $waysToPayList.addClass(waysToPaySmallListClass);
+    }
+  }
+
+  function init () {
+    $accordion.click(accordionClickHandler);
+
+    elementClassAdjustments.forEach(function(item) {
+      applyClassBasedOnChildrenCount(item.$element, item.count, item.className, item.isGreaterThan, item.checkForWindowWidth);
+    });
+
+    $(window).resize(_.debounce(onWindowResize, 200));
+  }
+
+  init();
+})();

package/build/js/components/general/handleAccordion.js

@@ -0,0 +1,35 @@
+var Wick = Wick || {};
+
+Wick.HandleAccordions = {
+  el: {
+    $body: $('body'),
+    $accordions: $(".account-nav .accordion"),
+    accordionContent: '.accordion__content',
+    accordionHeader: '.accordion__header',
+    accordionCollapsed: 'accordion_collapsed',
+  },
+  handleOutsideClick() {
+    document.addEventListener("click", function (event) {
+      Wick.HandleAccordions.el.$accordions.each(function () {
+        const $accordion = $(this);
+        const $content = $accordion.find(Wick.HandleAccordions.el.accordionContent);
+        const $toggle = $accordion.find(Wick.HandleAccordions.el.accordionHeader);
+
+        const toggleButton = $toggle[0];
+        const content = $content[0];
+
+        if (!toggleButton || !content) {
+          return;
+        }
+
+        if (!toggleButton.contains(event.target) && !content.contains(event.target)) {
+          if ($content.is(":visible")) {
+            $content.hide();
+            $accordion.addClass(Wick.HandleAccordions.el.accordionCollapsed);
+            $accordion.attr("aria-expanded", "false");
+          }
+        }
+      });
+    });
+  }
+};

package/build/js/components/general/image-accordion.js

@@ -0,0 +1,54 @@
+var Wick = Wick || {};
+Wick.ImageAccordion = (function () {
+    const CONFIG = {
+        animationDuration: 200,
+        collapsedText: 'See details',
+        expandedText: 'Hide details',
+    };
+
+    const SELECTORS = {
+        root: '.image-accordion',
+        toggler: '.image-accordion__header',
+        content: '.image-accordion__content',
+        headerText: '.image-accordion__header-text',
+        collapsedClass: 'image-accordion--collapsed',
+    };
+
+    function handleToggle(e) {
+        var $trigger = $(e.currentTarget);
+        var $accordion = $trigger.closest(SELECTORS.root);
+
+        if (!$accordion.length) {
+            return;
+        }
+
+        var $triggerSel = $(SELECTORS.toggler);
+
+        if (!$trigger.is($triggerSel)) {
+            return;
+        }
+
+        var $headerText = $accordion.find(SELECTORS.headerText);
+
+        $accordion.toggleClass(SELECTORS.collapsedClass);
+
+        $headerText.text(
+            $accordion.hasClass(SELECTORS.collapsedClass)
+                ? CONFIG.collapsedText
+                : CONFIG.expandedText
+        );
+
+        $accordion
+            .children(SELECTORS.content)
+            .stop(true, true)
+            .slideToggle(CONFIG.animationDuration);
+    }
+
+    function init() {
+        $(document)
+            .off('click.wickImageAccordion', SELECTORS.toggler)
+            .on('click.wickImageAccordion', SELECTORS.toggler, handleToggle);
+    }
+
+    init();
+})();

package/build/js/components/general/is-trade-pro.js

@@ -0,0 +1,38 @@
+var Wick = Wick || {};
+Wick.isTradeProAndroid = (function(){
+    if (navigator.userAgent.match(/TradeProMobile_Android|DIYMobile_Android/i)) {
+        return true;
+    }
+})();
+
+Wick.isTradeProiOS = (function(){
+    if (navigator.userAgent.match(/TradeProMobile_iOS|DIYMobile_iOS/i)) {
+        return true;
+    }
+})();
+
+Wick.isTradePro = (function(){
+    if (navigator.userAgent.match(/TradeProMobile_iOS|TradeProMobile_Android|DIYMobile_iOS|DIYMobile_Android/i)) {
+        return true;
+    }
+})();
+
+$(document).ready(function () {
+    if (navigator.userAgent.match(/TradeProMobile_iOS|TradeProMobile_Android|DIYMobile_iOS|DIYMobile_Android/i)) {
+        $('body').addClass('tp-app');
+    }
+});
+
+$(function() {
+    if (Wick.isTradeProAndroid) {
+        $('body').addClass('tp-android');
+    }
+    if (Wick.isTradeProiOS) {
+        $('body').addClass('tp-ios');
+        if (
+          window.matchMedia('(min-width: 768px)').matches
+        ) {
+            $('body').addClass('tp-ios-notch');
+        }
+    }
+});

package/build/js/components/general/main-nav.js

@@ -0,0 +1,16 @@
+var Wick = Wick || {};
+
+Wick.MainNav = (function () {
+  return {
+    createMainNav: function () {
+      Wick.Nav();
+      Wick.Responsive.callBr();
+    }
+  }
+})();
+
+$(document).ready(function () {
+  if (!$('#main-nav').length) return;
+
+  Wick.MainNav.createMainNav();
+});

package/build/js/components/general/main-navigation.js

@@ -0,0 +1,275 @@
+var Wick = Wick || {};
+Wick.Nav = function () {
+    var $nav = $('.main-nav'),
+        navs = [
+            '.main-nav__top-level-wrap',
+            '.main-nav__menu-wrapper',
+            '.main-nav__sub-menu__wrapper',
+            '.main-nav__offers',
+            '.main-nav__sub-sub-menu__wrapper'
+        ],
+        navItems = [
+            '.main-nav__top-level__item',
+            '.main-nav__menu__item',
+            '.main-nav__sub-menu__item, .main-nav__offers__wrapper',
+            '.main-nav__sub-menu__item',
+            '.main-nav__sub-sub-menu__item'
+        ],
+        navLabels = [
+            '.main-nav__top-level__label'
+        ],
+        navDropdown = [
+            '.main-nav__menu__label',
+            '.main-nav__sub-menu__label'
+        ],
+        currentLevel = 0,
+        desktopNav,
+        mobileNav,
+        navSubMenuIsHovered = false;
+
+
+    function setBottomShadowWhenNoBreadcrumbs() {
+        if (!$('.breadcrumbs').length) {
+            $nav.addClass('with-bottom-shadow');
+        }
+    }
+
+    function setActiveLink() {
+        const pathname = location.pathname.toLowerCase();
+        $('.main-nav li:not(.main-nav__sub-menu__view-more) > a').each(function() {
+            const link = $(this).attr('href') || '';
+            const lowerCaseLink = link.toLowerCase();
+
+            if (pathname.endsWith(lowerCaseLink)) {
+                $(this).addClass('active');
+            }
+
+            const replacedLink = replaceAndWithPlusSymbol(lowerCaseLink);
+            if(pathname.endsWith(replacedLink)) {
+                $(this).addClass('active');
+            }
+        })
+    }
+
+    function replaceAndWithPlusSymbol(link) {
+        return link.replace(/-and-/g, '+')
+    }
+
+    function setCurrentVisibleLevel(lvl) {
+        $nav.attr('data-active-lvl', lvl);
+    }
+
+    function resetSectionHeight(sectionName) {
+        $(sectionName).removeAttr('style');
+    }
+
+    function resizeNavSection(firstSection, SecondSection, padding) {
+        if (padding == null) {
+            padding = 0;
+        }
+        $(firstSection).css({"min-height": $(SecondSection).height() + padding});
+    }
+
+    function mobileNavigation() {
+        var self = this,
+            $btnHamburger = $('.header-hamburger-menu'),
+            $navSection = $('.main-nav__section'),
+            hamburgerState = 'header-hamburger-menu_close-visible',
+            $btnBack = $('.main-nav__back-btn'),
+            $navOpener = $(navLabels.join(',')),
+            $navDropdown = $(navDropdown.join(',')),
+            mobileNavBodyClass = 'mobile-nav-opened',
+            isHidden = 'js-down-sm-hidden',
+            isVisible = 'js-visible';
+            isOpen = 'js-open';
+
+        this.toggleNavVisibility = function () {
+            $btnHamburger.toggleClass(hamburgerState);
+            $nav.toggleClass(isVisible);
+            $('main, footer').toggleClass(isHidden);
+            $(document).trigger('mobileNav.toggle');
+        };
+
+        this.toggleBodyClass = function () {
+            $('body').toggleClass(mobileNavBodyClass);
+        };
+
+        this.checkLink = function($link) {
+            if ($link.hasClass("main-nav__offers__label")) {
+                if (!$link.is(navLabels[currentLevel]) || !$link.nextAll(navs.join(',')).length) {
+                    return true;
+                }
+            } else {
+                // Click on link from previous level or without submenu will directly follow the link
+                if (!$link.is(navLabels[currentLevel - 1]) || !$link.nextAll(navs.join(',')).length) {
+                    return true;
+                }
+            }
+
+            return false
+        }
+
+        this.showNavSection = function (e) {
+            var $link = $(this);
+
+            if (self.checkLink($link)) {
+                return true
+            }
+
+            $link.parent().addClass(isVisible);
+            $navSection.addClass('slide-in');
+
+            $('html, body').animate({
+                scrollTop: $("body").offset().top
+            });
+
+            setTimeout(function () {
+                $navSection.removeClass('slide-in');
+            }, 300);
+
+            setCurrentVisibleLevel(++currentLevel);
+            return false;
+        };
+
+        this.closeOpenSub = function() {
+            $('.js-open').removeClass(isOpen)
+        }
+
+        this.openSubNavigation = function (e) {
+            var $link = $(this).parent();
+
+            if ($link.hasClass(isOpen)) {
+                $link.removeClass(isOpen)
+            } else {
+                $link.addClass(isOpen)
+                $(this).next().focus()
+            }
+
+            return false
+        },
+
+        this.handleBackBtnClick = function () {
+            $(navItems[currentLevel - 2]).removeClass(isVisible);
+            $navSection.addClass('slide-in-l2r');
+            setTimeout(function () {
+                $navSection.removeClass('slide-in-l2r');
+            }, 300);
+            self.closeOpenSub()
+
+            setCurrentVisibleLevel(--currentLevel);
+        };
+
+        this.init = function () {
+            $btnHamburger.on('click.mobile', function () {
+                self.toggleNavVisibility();
+                self.toggleBodyClass();
+            });
+            $navOpener.on('click.mobile', self.showNavSection);
+            $navDropdown.on('click.mobile', self.openSubNavigation);
+            $btnBack.on('click.mobile', self.handleBackBtnClick);
+        };
+
+        this.destroy = function () {
+            $btnHamburger.off('.mobile');
+            $navOpener.off('.mobile');
+            $btnBack.off('.mobile');
+        };
+
+        self.init();
+    }
+
+    function desktopNavigation() {
+        var self = this,
+            isHovered = 'is-hovered',
+            isHoveredLvl1 = 'is-hovered-lvl-1';
+
+        this.handleTouchstart = function () {
+            console.log('start');
+            var $link = $(this),
+                $li = $link.parent(),
+                hovered = $li.hasClass(isHovered);
+
+            if (hovered || !$link.nextAll(navs.join(',')).length) {
+                $link.data("shouldPrevent", false);
+                return true;
+            }
+
+            $li.siblings().removeClass(isHovered);
+            $li.addClass(isHovered);
+            $nav.addClass(isHoveredLvl1);
+            $link.data("shouldPrevent", true);
+            $(document).off("touchstart.leaveNav").on("touchstart.leaveNav", function (e) {
+                if (!$(e.target).parents('.main-nav').length) {
+                    $nav.removeClass(isHoveredLvl1).find(navItems.join(',')).removeClass(isHovered);
+                    $(document).off("touchstart.leaveNav")
+                }
+            });
+        };
+
+        this.handleTouchend = function (e) {
+            console.log('end');
+            $(this).data("shouldPrevent") && e.preventDefault();
+        };
+
+        this.bindHoverEvents = function () {
+            $(navItems[0]).on('mouseenter.navDesktop', function () {
+                $(this).addClass(isHovered)
+                if ($(this).children(navs[1]).length) {
+                    $nav.addClass(isHoveredLvl1);
+                    resetSectionHeight(".main-nav__menu-wrapper");
+                }
+            }).on('mouseleave.navDesktop', function () {
+                $(this).removeClass(isHovered)
+                $nav.removeClass(isHoveredLvl1);
+                $(navItems[1]).removeClass(isHovered);
+                resetSectionHeight(".main-nav__menu-wrapper");
+            });
+        };
+
+        this.bindTouchEvents = function () {
+            $(document).on('touchstart.navTouchStart', navLabels.join(','), self.handleTouchstart);
+            $(document).on('touchend.navTouchEnd', navLabels.join(','), self.handleTouchend);
+        };
+
+        this.init = function () {
+            if (!Wick.Responsive.isTouchDevice()) {
+                self.bindHoverEvents();
+            } else {
+                self.bindTouchEvents();
+            }
+        };
+
+        this.destroy = function () {
+            if (!Wick.Responsive.isTouchDevice()) {
+                $(navItems.join(',')).off('.navDesktop');
+                $(navs.join(',')).off('.navDesktop');
+            } else {
+                $(document).off('.navTouchStart .navTouchEnd');
+            }
+        };
+        self.init();
+    }
+
+    var init = function () {
+        setBottomShadowWhenNoBreadcrumbs();
+        setCurrentVisibleLevel(++currentLevel);
+        setActiveLink();
+
+        Wick.Responsive.onBreakpoint(function () {
+            desktopNav && desktopNav.destroy();
+            desktopNav = null;
+            if (!mobileNav) {
+                mobileNav = new mobileNavigation();
+            }
+        }, 'down-lg');
+        Wick.Responsive.onBreakpoint(function () {
+            mobileNav && mobileNav.destroy();
+            mobileNav = null;
+            if (!desktopNav) {
+                desktopNav = new desktopNavigation();
+            }
+        }, 'up-lg');
+    };
+
+    init();
+};