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

package/build/js/components/general/notification.js

@@ -0,0 +1,70 @@
+var Wick = Wick || {};
+Wick.Notification = (function () {
+    function Notification(params) {
+        var self = this,
+            iconSuccess =
+                '<span class="icon notification__icon"><span class="fas fa-check-circle"></span></span>',
+            iconWarning =
+                '<span class="icon notification__icon"><span class="fas fa-exclamation-circle"></span></span>',
+            iconError =
+                '<span class="icon notification__icon"><span class="fas fa-times-circle"></span></span>',
+            closeBtn =
+                '<span class="icon notification__close"><span class="far fa-times"></span></span>';
+
+        this.$self = $('<div/>', {
+            class: 'notification notification_general notification_' + params.type,
+            html: params.text,
+        })
+            .prepend(
+                params.type === 'success'
+                    ? iconSuccess
+                    : params.type === 'warning'
+                      ? iconWarning
+                      : params.type === 'error'
+                        ? iconError
+                        : ''
+            )
+            .prepend(params.closeBtn ? closeBtn : '')
+            .prependTo(params.container);
+
+        this.hide = function () {
+            self.$self.remove();
+        };
+    }
+
+    $(document).on('click', '.notification__close', function () {
+        $(this).parents('.notification, .notification_app, .sticky-wrapper').remove();
+    });
+
+    return {
+        show: function (params) {
+            var $oldNote = $(params.container).find('.notification');
+            if ($oldNote.length) {
+                $oldNote.remove();
+            }
+
+            var newNote = new Notification(params),
+                offset = Wick.OfferBanner ? Wick.OfferBanner.$element.outerHeight(true) : 0,
+                stickyHeaderOffset = $('body.tp-app').length
+                    ? $('.sticky-header-wrapper').height() || 0
+                    : 0;
+
+            if (params.noScrolling === undefined) {
+                $('html, body').animate(
+                    { scrollTop: newNote.$self.offset()?.top - offset - stickyHeaderOffset - 30 },
+                    300
+                );
+            }
+
+            if (params.temporary !== undefined) {
+                setTimeout(
+                    function () {
+                        newNote.hide();
+                    },
+                    params.delay ? params.delay : 5000
+                );
+            }
+            return newNote;
+        },
+    };
+})();

package/build/js/components/general/offer-banner.js

@@ -0,0 +1,74 @@
+$(document).ready(function () {
+  Wick.OfferBanner = (function () {
+    var offerBanner = $('.offer-banner')[0],
+      offer;
+
+    var stickyWrapper = $('.sticky-wrapper')[0];
+
+    if (!offerBanner) {
+      return;
+    }
+
+    Wick.applyBottomMarginIfBanner = function () {
+      if (!Wick.isTradePro) {
+        return;
+      }
+
+      if (!offerBanner) {
+        return;
+      }
+
+      let bannerHeight = $(offerBanner).outerHeight();
+      $(stickyWrapper).css('margin-bottom', bannerHeight + 'px');
+    };
+
+    var init = function () {
+      offer = new Waypoint.Sticky({
+        element: offerBanner
+      });
+    };
+
+    var toggle = function () {
+      if (offer) {
+        offer.destroy();
+        offer = null;
+      } else {
+        init();
+      }
+    };
+
+    function handleResize() {
+      if (!offer) {
+        return;
+      }
+      var elHeight = offer.$element.outerHeight(true);
+      if (elHeight !== offer.$wrapper.outerHeight(true)) {
+        offer.$wrapper.height(elHeight);
+      }
+
+      Wick.applyBottomMarginIfBanner();
+    }
+
+    var bindEvents = function () {
+      $(window).on('resize', handleResize);
+      $(window).on('orientationchange', handleResize);
+      $(document).on('mobileNav.toggle', toggle);
+    };
+
+    // Workaround for sticky banner functionality in IE
+    function isIE() {
+      var ua = navigator.userAgent;
+      /* MSIE used to detect old browsers and Trident used to newer ones*/
+      return ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;
+    }
+
+    if (isIE()) {
+      init();
+      bindEvents();
+    }
+
+    Wick.applyBottomMarginIfBanner();
+
+    return offer;
+  })();
+});

package/build/js/components/general/scroll-disable.js

@@ -0,0 +1,54 @@
+var Wick = Wick || {};
+
+Wick.ScrollDisable = {
+  el: {
+    $body: $('body')
+  },
+  currentPosition: 0,
+  disableScroll: function () {
+    Wick.ScrollDisable.el.$body
+      .addClass('scroll-disable')
+      .css('margin-top', -Wick.ScrollDisable.currentPosition + 'px');
+  },
+  enableScroll: function () {
+    Wick.ScrollDisable.el.$body
+      .removeClass('scroll-disable')
+      .css('margin-top', '');
+    window.scrollTo(0, Wick.ScrollDisable.currentPosition);
+  },
+  initializeShowModalEvents: function (modal) {
+    const $modal = $(modal);
+    Wick.ScrollDisable.currentPosition = $(window).scrollTop();
+
+    Wick.ScrollDisable.disableScroll();
+    Wick.ScrollDisable.initializeHideModalEvents($modal);
+  },
+  initializeHideModalEvents: function (modal) {
+    modal.on('hidden.bs.modal', function() {
+      Wick.ScrollDisable.enableScroll();
+    });
+  },
+  handleTagAdded: function () {
+    Wick.ScrollDisable.currentPosition = $(window).scrollTop();
+    Wick.ScrollDisable.disableScroll(Wick.ScrollDisable.currentPosition);
+  },
+  handleTagRemoved: function () {
+    Wick.ScrollDisable.enableScroll(Wick.ScrollDisable.currentPosition);
+  },
+  init: function () {
+    if (!Wick.Responsive.isTouchDevice()) {
+      return;
+    }
+
+    $(document).on('show.bs.modal', '.modal', function (event) {
+      Wick.ScrollDisable.initializeShowModalEvents(event.currentTarget);
+    });
+
+    Wick.ScrollDisable.el.$body.on("tagKlarnaModalAdded", Wick.ScrollDisable.handleTagAdded);
+    Wick.ScrollDisable.el.$body.on("tagKlarnaModalRemoved", Wick.ScrollDisable.handleTagRemoved);
+  }
+};
+
+$(document).ready(function () {
+  Wick.ScrollDisable.init();
+});

package/build/js/components/general/search.js

@@ -0,0 +1,43 @@
+var Wick = Wick || {};
+
+Wick.Search = (function() {
+  var $searchBtn = $('#search-button'),
+    $searchWrapper = $('#search-wrapper'),
+    $searchInput = $('#search'),
+    searchWrapperActive = 'search-wrapper--active',
+    searchActive = 'search--active',
+    navButton = $('.header-hamburger-menu'),
+    openNavClass = 'header-hamburger-menu_close-visible';
+
+    var closeNav = function () {
+      if (navButton.hasClass(openNavClass)) {
+        navButton
+          .trigger('click')
+          .trigger('blur')
+      }
+    };
+
+    var showSearch = function () {
+      $searchWrapper.addClass(searchWrapperActive);
+      $searchInput.focus();
+      $searchBtn.addClass(searchActive);
+      closeNav();
+    };
+
+    var hideSearch = function () {
+      $searchWrapper.removeClass(searchWrapperActive);
+      $searchBtn.removeClass(searchActive);
+    };
+
+    $searchInput.focusout(function() {
+      setTimeout(hideSearch,0);
+    })
+
+    $searchBtn.click(function () {
+      if ($searchBtn.hasClass(searchActive)) {
+        hideSearch();
+      } else {
+        showSearch();
+      }
+    })
+})()

package/build/js/components/general/snack-bar.js

@@ -0,0 +1,160 @@
+var Wick = Wick || {};
+Wick.SnackBar = {
+    messages: [],
+    overlaySelector: '.snack-bar-notification-modal',
+    types: {
+        SUCCESS: 'success',
+        ERROR: 'error',
+        WARNING: 'warning'
+    },
+};
+
+Wick.SnackBar = {
+    ...Wick.SnackBar,
+    defaultMessagesState: {
+        [Wick.SnackBar.types.SUCCESS]: {
+            icon: 'fa-check-circle',
+            className: 'snack-bar-notification-success',
+            withCloseButton: true,
+            autoClose: false,
+            delayBeforeClose: 3000,
+        },
+        [Wick.SnackBar.types.ERROR]: {
+            icon: 'fa-times-circle',
+            className: 'snack-bar-notification-error',
+            withCloseButton: true,
+            autoClose: false,
+            delayBeforeClose: 3000,
+        },
+        [Wick.SnackBar.types.WARNING]: {
+            icon: 'fa-exclamation-circle',
+            className: 'snack-bar-notification-warning',
+            withCloseButton: true,
+            autoClose: false,
+            delayBeforeClose: 3000,
+        },
+    },
+
+    init() {
+        Wick.SnackBar.createNotificationWrapper();
+        Wick.SnackBar.defineOverlayListener();
+    },
+
+    createNotificationWrapper(overlayClassName = 'snack-bar-notification-modal') {
+        Wick.SnackBar.overlaySelector = `.${overlayClassName}`;
+        if ($(Wick.SnackBar.overlaySelector).length) {
+            console.warn('Snack bar already initialized');
+            return;
+        }
+        const wrapper = $("<div>", { class: overlayClassName });
+        $(document.body).append(wrapper);
+    },
+
+    defineOverlayListener() {
+        $(Wick.SnackBar.overlaySelector)
+            .on('click', Wick.SnackBar.hideOverlayByOutsideClick);
+    },
+
+    getDefaultOptionsForMessageType(type) {
+        return Wick.SnackBar.defaultMessagesState[type];
+    },
+
+    show(messageOptions) {
+        const id = Date.now();
+        const defaultMessageOptions = Wick.SnackBar.getDefaultOptionsForMessageType(messageOptions.type);
+        const templateArgs = {
+            ...defaultMessageOptions,
+            ...messageOptions,
+            id,
+        };
+
+        const template = Wick.SnackBar.createMessageTemplate(templateArgs);
+        Wick.SnackBar.messages.push(templateArgs);
+        $(Wick.SnackBar.overlaySelector).append(template);
+        Wick.SnackBar.showOverlay();
+        template.addClass('animateTop');
+    },
+
+    addCloseBtn(template) {
+        const closeBtn = $(`
+            <span class="icon notification__close">
+                <span class="far fa-times"></span>
+            </span>
+        `)
+        closeBtn.on('click', function (e) {
+            e.stopPropagation();
+            const message = $(this).closest('.snack-bar-notification-wrapper');
+
+            message.addClass('animateBottom');
+
+            message.on('animationend', () => {
+                message.remove();
+                if (!Wick.SnackBar.hasChildren(Wick.SnackBar.overlaySelector)) {
+                    Wick.SnackBar.hideOverlay();
+                }
+            });
+        })
+        template.find('.snack-bar-notification-popup').append(closeBtn);
+    },
+
+    showOverlay() {
+        $(Wick.SnackBar.overlaySelector).fadeIn();
+    },
+
+    hideOverlay() {
+        $(Wick.SnackBar.overlaySelector).fadeOut();
+    },
+
+    getTemplate(text = '', icon, className){
+        return $(`
+        <div class="snack-bar-notification-wrapper">
+          <div class="snack-bar-notification-wrapper-inner">
+              <div class="snack-bar-notification-popup ${className}">
+                  <span class="icon notification__icon">
+                      <span class="fas ${icon}"></span>
+                  </span>
+                  <span class="snack-bar-notification_text">${text}</span>
+                </div>
+          </div>
+        </div>
+      `);
+    },
+
+    addTemplateId(template, id) {
+        template.attr('data-message-id', id)
+    },
+
+    hasChildren(selector) {
+        return $(selector).children().length >= 1;
+    },
+
+    hideOverlayByOutsideClick() {
+        const notificationWrap = $('.snack-bar-notification-wrapper');
+        notificationWrap.addClass('animateBottom');
+        notificationWrap.on('animationstart', () => {
+            notificationWrap.remove();
+            Wick.SnackBar.hideOverlay();
+        });
+    },
+
+    createMessageTemplate({ text, icon, className, withCloseButton, id, delayBeforeClose, autoClose }) {
+        const templateWithText = Wick.SnackBar.getTemplate(text, icon, className);
+        Wick.SnackBar.addTemplateId(templateWithText, id)
+        if (withCloseButton) {
+            Wick.SnackBar.addCloseBtn(templateWithText);
+        }
+        if (autoClose) {
+            setTimeout(function () {
+                templateWithText.addClass('animateBottom');
+                templateWithText.on('animationend', () => {
+                    templateWithText.remove();
+                    if (!Wick.SnackBar.hasChildren('.snack-bar-notification-modal')) {
+                        Wick.SnackBar.hideOverlay();
+                    }
+                });
+            }, delayBeforeClose);
+        }
+
+        return templateWithText;
+    },
+};

package/build/js/components/general/sticky_header.js

@@ -0,0 +1,62 @@
+var Wick = Wick || {};
+Wick.StickyHeader = (function () {
+
+    var position = $(window).scrollTop(),
+        headerTopLine = $('.header__top-line'),
+        headerWrapper = $('.header-wrapper'),
+        stickyHeaderWrapper = $('.sticky-header-wrapper'),
+        stickyHeaderWrapperHeight = headerWrapper.height(),
+        flag = 1;
+    stickyHeaderWrapper.height(stickyHeaderWrapperHeight);
+
+    $(window).scroll(function () {
+        var mainNav = $('.main-nav.js-visible'),
+            mainNavDisplay = mainNav.css('display');
+
+        var scroll = $(window).scrollTop();
+
+        if (mainNavDisplay !== 'block') {
+            if (scroll > position && flag === 1) {
+                hideTop(scroll, position);
+            } else if (scroll < position && flag === 0) {
+                showTop(scroll, position);
+            }
+        } else if (mainNavDisplay === 'block' && flag === 0){
+            showTop(scroll, position);
+        }
+        position = scroll;
+    });
+
+
+    function hideTop(pageOffsetTop, scrolledPosition) {
+        if (pageOffsetTop + scrolledPosition <= 0) {
+            return;
+        }
+        headerTopLine.each(function (index) {
+            headerTopLine[index].classList.add('header-top-line-hide');
+        });
+
+        flag = 0;
+    }
+
+    function showTop() {
+        headerTopLine.each(function (index) {
+            headerTopLine[index].classList.remove('header-top-line-hide');
+        });
+
+        flag = 1;
+    }
+
+    function goBack() {
+        $('.header-back-btn').click(function(e){
+            e.stopPropagation();
+            e.preventDefault();
+            if (navigator.userAgent.match(/TradeProMobile_iOS|TradeProMobile_Android|DIYMobile_iOS|DIYMobile_Android/i)) {
+	            window.history.back();
+            }
+        });
+    }
+
+    goBack();
+
+})();

package/build/js/components/general/switchVat.js

@@ -0,0 +1,161 @@
+var Wick = window.Wick || {};
+
+Wick.VatToggle = {
+    VAT_COOKIE: 'isVatChecked',
+    TOGGLE_VAT_EVENT_NAME: 'toggleVat',
+    HIDDEN_CLASS_NAME: 'd-none',
+    el: {
+        switchVatLabel: '.switch-vat-label',
+        includingVat: '.including-vat',
+        excludingVat: '.excluding-vat',
+        includingVatGlobalClass: 'including-vat-global',
+        excludingVatGlobalClass: 'excluding-vat-global',
+        switchVatInput: '.switch-vat input',
+        isHidden: 'd-none',
+        switchLabelCheckedClass: 'switch-label__checked',
+    },
+
+    toggle: function () {
+        const newSwitcherValue = !Wick.VatToggle.isOn();
+
+        Wick.VatToggle.setLabelState();
+        Wick.VatToggle.setSwitcherState(newSwitcherValue);
+
+        Wick.VatToggle.setCookie(Wick.VatToggle.VAT_COOKIE, newSwitcherValue);
+
+        const event = Wick.VatToggle.createToggleEvent(newSwitcherValue);
+        window.dispatchEvent(event);
+    },
+
+    setLabelState: function () {
+        Wick.VatToggle.toggleLabelClass();
+    },
+
+    setSwitcherState: function (isToggled) {
+        $(Wick.VatToggle.el.switchVatInput).attr('checked', isToggled);
+    },
+
+    getSwitcherState: function () {
+        if ($(Wick.VatToggle.el.switchVatInput).length) {
+            return !!$(Wick.VatToggle.el.switchVatInput).attr('checked');
+        } else {
+            return null;
+        }
+    },
+
+    createToggleEvent: function (isToggled) {
+        return new CustomEvent(Wick.VatToggle.TOGGLE_VAT_EVENT_NAME, {
+            detail: { toggled: isToggled },
+        });
+    },
+
+    toggleLabelClass: function () {
+        $(Wick.VatToggle.el.switchVatLabel).toggleClass(Wick.VatToggle.el.switchLabelCheckedClass);
+    },
+
+    isToggleVatAvailable: function () {
+        return window.ACC.app.isVatToggleAvailable;
+    },
+
+    isOn: function () {
+        return !!Wick.VatToggle.getCookie(Wick.VatToggle.VAT_COOKIE);
+    },
+
+    toggleDisplayClass: function () {
+        const includingVatEl = Wick.VatToggle.el.includingVat;
+        const excludingVat = Wick.VatToggle.el.excludingVat;
+        const hiddenClassName = Wick.VatToggle.HIDDEN_CLASS_NAME;
+
+        $(includingVatEl).toggleClass(hiddenClassName);
+        $(excludingVat).toggleClass(hiddenClassName);
+    },
+    reapplyDisplayClass: function () {
+        const includingVatEl = Wick.VatToggle.el.includingVat;
+        const excludingVatEl = Wick.VatToggle.el.excludingVat;
+        const hiddenClassName = Wick.VatToggle.HIDDEN_CLASS_NAME;
+
+        let vatState = null;
+
+        // check switcher state for web or cookie for app
+        if (Wick.VatToggle.getSwitcherState() !== null) {
+            vatState = Wick.VatToggle.getSwitcherState();
+        } else {
+            vatState = Wick.VatToggle.isOn();
+        }
+
+        if (vatState) {
+            $(includingVatEl).addClass(hiddenClassName);
+            $(excludingVatEl).removeClass(hiddenClassName);
+        } else {
+            $(includingVatEl).removeClass(hiddenClassName);
+            $(excludingVatEl).addClass(hiddenClassName);
+        }
+    },
+
+    updateGlobalClass: function () {
+        const includingVatGlobal = Wick.VatToggle.el.includingVatGlobalClass;
+        const excludingVatGlobal = Wick.VatToggle.el.excludingVatGlobalClass;
+
+        if (Wick.VatToggle.isOn()) {
+            $('body').removeClass(includingVatGlobal).addClass(excludingVatGlobal);
+        } else {
+            $('body').removeClass(excludingVatGlobal).addClass(includingVatGlobal);
+        }
+    },
+
+    getCookie: function (cookieName) {
+        const cookie = decodeURIComponent(document.cookie)
+            .split(';')
+            .map((cookie = '') => cookie.trim())
+            .find((cookie = '') => cookie.startsWith(`${cookieName}=`));
+
+        if (cookie) {
+            const cookieValue = cookie.replace(`${cookieName}=`, '');
+            return covertStringBooleanToBoolean(cookieValue);
+        }
+
+        return '';
+    },
+
+    setCookie: function (cookie, value) {
+        const cookiesString = `${cookie}=${encodeURIComponent(value)};path=/`;
+        document.cookie = cookiesString;
+    },
+
+    init: function () {
+        const isVatShouldBeToggled = Wick.VatToggle.isOn();
+        const isVatToggled = !!Wick.VatToggle.getSwitcherState();
+
+        if (isVatShouldBeToggled) {
+            Wick.VatToggle.setLabelState();
+        }
+        Wick.VatToggle.setSwitcherState(isVatShouldBeToggled);
+        Wick.VatToggle.updateGlobalClass();
+
+        $(Wick.VatToggle.el.switchVatInput).on('change', Wick.VatToggle.toggle);
+
+        $(window).on(Wick.VatToggle.TOGGLE_VAT_EVENT_NAME, function () {
+            Wick.VatToggle.toggleDisplayClass();
+            Wick.VatToggle.updateGlobalClass();
+        });
+
+        if (isVatShouldBeToggled !== isVatToggled) {
+            const event = Wick.VatToggle.createToggleEvent(isVatShouldBeToggled);
+            window.dispatchEvent(event);
+        }
+    },
+};
+
+function covertStringBooleanToBoolean(stringBoolean) {
+    if (stringBoolean === 'true') {
+        return true;
+    }
+    if (stringBoolean === 'false') {
+        return false;
+    }
+    return stringBoolean;
+}
+
+$(document).ready(function () {
+    Wick.VatToggle.init();
+});