wickes-css2 2.105.0-develop.1 → 2.105.0-develop.11

package/build/js/page/online-exclusive.js

@@ -1,6 +1,5 @@
 var Wick = Wick || {};
 Wick.onlineExclusive = (function () {
-
     let rangesToggler = $('.ranges-toggle'),
         rangesList = $('.ranges'),
         otherRanges = $('.other-ranges'),
@@ -27,8 +26,10 @@ Wick.onlineExclusive = (function () {
         otherRangesHeating = $('.other-ranges__item_heating');
 
     rangesToggler.on('click', function () {
-        rangesToggler.toggleClass('border-bottom-rounded_false')
-            .find('.icon').toggleClass('icon-rotated');
+        rangesToggler
+            .toggleClass('border-bottom-rounded_false')
+            .find('.icon')
+            .toggleClass('icon-rotated');
         if (window.innerWidth > 768) {
             rangesList.toggleClass('d-block border-bottom-rounded');
         } else if (window.innerWidth < 768) {
@@ -38,18 +39,17 @@ Wick.onlineExclusive = (function () {
     });
 
     if (window.innerWidth < 768) {
-        rangesList.on( 'click', 'a', function(e) {
+        rangesList.on('click', 'a', function (e) {
             e.preventDefault();
             otherRanges.show();
 
-            $(document).mouseup(function(e) {
-                if (!rangesList.is(e.target) && rangesList.has(e.target).length === 0)
-                {
+            $(document).mouseup(function (e) {
+                if (!rangesList.is(e.target) && rangesList.has(e.target).length === 0) {
                     rangesList.hide();
                 }
             });
 
-            switch ($(this).parent().attr("data-value")) {
+            switch ($(this).parent().attr('data-value')) {
                 case 'gardens-btn':
                     rangesComponent.hide();
                     gardensComponent.show();
@@ -96,15 +96,13 @@ Wick.onlineExclusive = (function () {
                     otherRanges.hide();
                     break;
             }
-
         });
-    }
-    else if (window.innerWidth >= 768) {
-        rangesList.on( 'click', 'a', function(e) {
+    } else if (window.innerWidth >= 768) {
+        rangesList.on('click', 'a', function (e) {
             e.preventDefault();
             otherRanges.show();
 
-            switch ($(this).parent().attr("data-value")) {
+            switch ($(this).parent().attr('data-value')) {
                 case 'gardens-btn':
                     rangesEl.removeClass('range-btn');
                     $(this).addClass('range-btn');
@@ -171,10 +169,10 @@ Wick.onlineExclusive = (function () {
                     break;
             }
         });
-        otherRangesList.on( 'click', 'a', function(e) {
+        otherRangesList.on('click', 'a', function (e) {
             e.preventDefault();
 
-            switch ($(this).parent().parent().attr("data-value")) {
+            switch ($(this).parent().parent().attr('data-value')) {
                 case 'gardens-btn':
                     rangesEl.removeClass('range-btn');
                     $('#gardens-btn').addClass('range-btn');
@@ -243,33 +241,33 @@ Wick.onlineExclusive = (function () {
         });
     }
 
-    viewBtn.on('click', function(e) {
+    viewBtn.on('click', function (e) {
         e.preventDefault();
         rangesComponent.show();
         otherRanges.hide();
         rangesEl.removeClass('range-btn');
     });
 
-    $(function(){
-        $('a.online-exclusive__banner').on('click', function(event) {
+    $(function () {
+        $('a.online-exclusive__banner').on('click', function (event) {
             event.preventDefault();
-            let sc = $(this).attr("href"),
+            let sc = $(this).attr('href'),
                 dn = $(sc).offset().top - 10;
-            $('html, body').animate({scrollTop: dn}, 1000);
+            $('html, body').animate({ scrollTop: dn }, 1000);
         });
     });
 
-    $(function(){
-        $('a.view-link').on('click', function(event) {
+    $(function () {
+        $('a.view-link').on('click', function (event) {
             event.preventDefault();
-            let sc = $(this).attr("href"),
+            let sc = $(this).attr('href'),
                 dn = $(sc).offset().top - 10;
-            $('html, body').animate({scrollTop: dn}, 1000);
+            $('html, body').animate({ scrollTop: dn }, 1000);
         });
     });
 
-    $(function(){
-        $('a.ranges-el').on('click', function(event) {
+    $(function () {
+        $('a.ranges-el').on('click', function (event) {
             event.preventDefault();
             let dn;
 
@@ -281,12 +279,12 @@ Wick.onlineExclusive = (function () {
                 dn = 990;
             }
 
-            $('html, body').animate({scrollTop: dn}, 1000);
+            $('html, body').animate({ scrollTop: dn }, 1000);
         });
     });
 
-    $(function(){
-        $('.other-ranges__item').on('click', function(event) {
+    $(function () {
+        $('.other-ranges__item').on('click', function (event) {
             event.preventDefault();
             let dn;
 
@@ -298,8 +296,7 @@ Wick.onlineExclusive = (function () {
                 dn = 810;
             }
 
-            $('html, body').animate({scrollTop: dn}, 1000);
+            $('html, body').animate({ scrollTop: dn }, 1000);
         });
     });
-
 })();

package/build/js/page/quick-filter.js

@@ -0,0 +1,108 @@
+$(document).ready(function () {
+  const SELECTORS = {
+    quickFilter: '.quick-filter',
+    swiperContainer: '.swiper-container',
+    pagination: '.swiper-pagination',
+    nextButton: '.quick-filter__next-btn',
+    prevButton: '.quick-filter__prev-btn',
+  };
+
+  const CSS_CLASSES = {
+    locked: 'quick-filter--locked',
+    colourSwatch: 'quick-filter--colour',
+    textOnly: 'quick-filter--text',
+    bulletClass: 'swiper-pagination-bullet',
+    bulletActiveClass: 'swiper-pagination-bullet-active'
+  };
+
+  const CONFIG = {
+    speed: 400,
+    defaultSpaceBetween: 16,
+    textOnlySpaceBetween: 8,
+    resizeDebounceTime: 250,
+    breakpoints: {
+      mobile: 767,
+      mobileSpaceBetween: 8,
+    },
+  };
+
+  function shouldSkipSlider($slider) {
+    return $slider.hasClass(CSS_CLASSES.colourSwatch);
+  }
+
+  function getSpaceBetween($slider) {
+    const isTextOnly = $slider.hasClass(CSS_CLASSES.textOnly);
+    return isTextOnly ? CONFIG.textOnlySpaceBetween : CONFIG.defaultSpaceBetween;
+  }
+
+  function getSwiperConfig($pagination, $nextBtn, $prevBtn, spaceBetween) {
+    return {
+      speed: CONFIG.speed,
+      spaceBetween: spaceBetween,
+      slidesPerView: 'auto',
+      watchOverflow: true,
+      pagination: {
+        el: $pagination[0],
+        type: 'bullets',
+        clickable: true,
+        bulletClass: CSS_CLASSES.bulletClass,
+        bulletActiveClass: CSS_CLASSES.bulletActiveClass,
+      },
+      navigation: {
+        nextEl: $nextBtn[0],
+        prevEl: $prevBtn[0],
+      },
+      breakpoints: {
+        [CONFIG.breakpoints.mobile]: {
+          spaceBetween: CONFIG.breakpoints.mobileSpaceBetween,
+        },
+      },
+      on: {
+        lock: handleLock,
+        unlock: handleUnlock,
+      },
+    };
+  }
+
+  function handleLock() {
+    this.el.parentElement.classList.add(CSS_CLASSES.locked);
+  }
+
+  function handleUnlock() {
+    this.el.parentElement.classList.remove(CSS_CLASSES.locked);
+  }
+
+  function initializeSwiper($slider) {
+    const $container = $slider.find(SELECTORS.swiperContainer);
+    const $pagination = $slider.find(SELECTORS.pagination);
+    const $nextBtn = $slider.find(SELECTORS.nextButton);
+    const $prevBtn = $slider.find(SELECTORS.prevButton);
+
+    const spaceBetween = getSpaceBetween($slider);
+    const config = getSwiperConfig($pagination, $nextBtn, $prevBtn, spaceBetween);
+
+    const swiper = new Swiper($container[0], config);
+
+    bindResizeHandler(swiper);
+  }
+
+  function bindResizeHandler(swiper) {
+    $(window).on('resize', _.debounce(function () {
+      swiper.update();
+    }, CONFIG.resizeDebounceTime));
+  }
+
+  function init() {
+    $(SELECTORS.quickFilter).each(function (index, slider) {
+      const $slider = $(slider);
+
+      if (shouldSkipSlider($slider)) {
+        return;
+      }
+
+      initializeSwiper($slider);
+    });
+  }
+
+  init();
+});

package/build/js/page/search-filter.js

@@ -0,0 +1,62 @@
+// import { createShowMoreLess } from './utils/show-more-less';
+
+var Wick = Wick || {};
+
+Wick.Overlay = (function () {
+    var filterMobile = $('.filter-results_mobile');
+    $('#open-overlay').click(function (event) {
+        event.preventDefault();
+        $('body').addClass('is-filters-visible');
+        filterMobile.toggleClass('show');
+    });
+
+    $('#close-overlay, .filter-results__btn-close').click(function (event) {
+        event.preventDefault();
+        if (filterMobile.hasClass('show')) {
+            $('body').removeClass('is-filters-visible');
+            filterMobile.removeClass('show');
+        }
+    });
+
+    $('.filter-results_desktop .filter__item input[type="checkbox"]').click(function () {
+        $(this).closest('form').submit();
+    });
+})();
+
+Wick.SearchFilter = (function () {
+    const SEL = {
+        CATEGORY: '.category-filter',
+        FILTER_MOBILE: '.filter-results_mobile',
+        OPEN: '.filter-modal-cta',
+        CLOSE: '.close',
+        FILTER_RESULT: '.filter-results_desktop',
+        DESKTOP_CHECKBOX: '.filter-results_desktop .filter__item input[type="checkbox"]',
+        BODY_ACTIVE: 'is-filters-visible',
+    };
+
+    // removed show more/show less logic from frontend (will be implemented on backend)
+    // const SRPShowMoreLess = createShowMoreLess({
+    //     excludeGroup: ($group) => $group.hasClass(SEL.CATEGORY),
+    // });
+
+    // const $fm = $(SEL.FILTER_MOBILE);
+    // SRPShowMoreLess.init($(SEL.FILTER_RESULT));
+    // SRPShowMoreLess.init($fm);
+
+    $(SEL.OPEN).on('click', function (event) {
+        event.preventDefault();
+        // removed show more/show less logic from frontend (will be implemented on backend)
+        // SRPShowMoreLess.init($fm);
+        // SRPShowMoreLess.resetAll($fm);
+    });
+
+    $(document).on('click', SEL.CLOSE, function (event) {
+        event.preventDefault();
+        // removed show more/show less logic from frontend (will be implemented on backend)
+        // SRPShowMoreLess.resetAll($fm);
+    });
+
+    $(document).on('click', SEL.DESKTOP_CHECKBOX, function () {
+        $(this).closest('form').submit();
+    });
+})();

package/build/js/page/share-project-list.js

@@ -0,0 +1,57 @@
+import { copyToClipboard } from './utils/copy-to-clipboard';
+
+var Wick = Wick || {};
+Wick.ShareProjectList = (function () {
+    function init() {
+        var $input = $('#share-list-modal #shopping-list-link');
+        var linkContainer = $('#copy-link');
+        var $actualLink = linkContainer.find('a');
+        var copyClass = 'copy-link_hovered';
+
+        $actualLink.on('click', function (e) {
+            e.preventDefault();
+        });
+
+        function focusAndSelectInput() {
+            if (!$input.length) return;
+
+            var el = $input.get(0);
+
+            $input.removeAttr('disabled');
+
+            el.focus();
+
+            var len = (el.value || '').length;
+            if (typeof el.setSelectionRange === 'function') {
+                el.setSelectionRange(0, len);
+            } else if (typeof el.select === 'function') {
+                el.select();
+            }
+        }
+
+        linkContainer.on('click', function (e) {
+            e.preventDefault();
+
+            focusAndSelectInput();
+
+            var value = ($input.val() || '').trim();
+            if (!value) return;
+
+            copyToClipboard(value, linkContainer[0], { noUpperCase: true })
+                .then(function () {
+                    $actualLink.addClass(copyClass);
+                })
+                .catch(function (e) {
+                    console.error(e);
+                });
+        });
+
+        $input.on('click', function (e) {
+            e.preventDefault();
+            focusAndSelectInput();
+            $actualLink.removeClass(copyClass);
+        });
+    }
+
+    init();
+})();

package/build/js/page/tradePro-rewards.js

@@ -1,46 +1,76 @@
-import {copyToClipboard} from "./utils/copy-to-clipboard";
+import { copyToClipboard } from './utils/copy-to-clipboard';
 
 var Wick = window.Wick || {};
 
 Wick.TradeProRewards = {
-  el: {
-    $tradeProRewards: $('.page_tradePro-rewards'),
-    buttonSelector: '.copy-tradePro-barcode',
-  },
-  message: 'Code copied to clipboard',
-  copyToClipboardInit() {
-    Wick.SnackBar.init();
-    $(Wick.TradeProRewards.el.buttonSelector).on('click', function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      var discountCode = $(this).parent().find('input');
-      var discountCodeValue = discountCode.val().trim();
-      discountCode.removeAttr('disabled').attr('readonly', 'readonly');
-
-      copyToClipboard(discountCodeValue, e.currentTarget, { noUpperCase: true });
-
-      discountCode.attr('disabled', 'disabled').removeAttr('readonly');
-      window.getSelection().removeAllRanges();
-
-      Wick.SnackBar.show(
-        {
-          text: Wick.TradeProRewards.message,
-          type: Wick.SnackBar.types.SUCCESS,
-          withCloseButton: false,
-          autoClose: true,
-          delayBeforeClose: 3000
-        }
-      );
-      return false;
-    });
-  },
-  init() {
-    Wick.TradeProRewards.copyToClipboardInit();
-  }
-}
+    el: {
+        $tradeProRewards: $('.page_tradePro-rewards'),
+        buttonSelector: '.copy-tradePro-barcode',
+    },
+
+    message: 'Code copied to clipboard',
+    errorMessage: 'Unable to copy. Please copy manually',
+
+    copyToClipboardInit() {
+        Wick.SnackBar.init();
+
+        $(document).on('click', Wick.TradeProRewards.el.buttonSelector, async function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const $btn = $(this);
+            const $input = $btn.parent().find('input');
+
+            if (!$input.length) return false;
+
+            const discountCodeValue = ($input.val() || '').trim();
+            if (!discountCodeValue) return false;
+
+            $input.removeAttr('disabled').attr('readonly', 'readonly');
+
+            try {
+                await copyToClipboard(discountCodeValue, e.currentTarget, { noUpperCase: true });
+
+                Wick.SnackBar.show({
+                    text: Wick.TradeProRewards.message,
+                    type: Wick.SnackBar.types.SUCCESS,
+                    withCloseButton: false,
+                    autoClose: true,
+                    delayBeforeClose: 3000,
+                });
+            } catch (err) {
+                try {
+                    const el = $input.get(0);
+                    el.focus();
+                    el.select();
+                    el.setSelectionRange(0, 999999);
+                } catch (e) {
+                    console.error(e);
+                }
+
+                Wick.SnackBar.show({
+                    text: Wick.TradeProRewards.errorMessage,
+                    type: Wick.SnackBar.types.ERROR,
+                    withCloseButton: false,
+                    autoClose: true,
+                    delayBeforeClose: 4000,
+                });
+            }
+
+            $input.attr('disabled', 'disabled').removeAttr('readonly');
+            window.getSelection()?.removeAllRanges?.();
+
+            return false;
+        });
+    },
+
+    init() {
+        Wick.TradeProRewards.copyToClipboardInit();
+    },
+};
 
 $(document).ready(function () {
-  if (Wick.TradeProRewards.el.$tradeProRewards.length) {
-    Wick.TradeProRewards.init();
-  }
+    if (Wick.TradeProRewards.el.$tradeProRewards.length) {
+        Wick.TradeProRewards.init();
+    }
 });

package/build/js/page/utils/copy-to-clipboard.js

@@ -1,56 +1,88 @@
 export function copyToClipboard(copyValue, currentSelector, options = {}) {
-  const $temp = $('<textarea>').css({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    opacity: 0
-  });
-
-  $(currentSelector).parent().append($temp);
-
-  let str;
-  if (options.noUpperCase) {
-    str = copyValue;
-  } else {
-    str = copyValue.replace(/(^\w|\s\w)/g, function (m) {
-      return m.toUpperCase()
-    });
-  }
+    const textTrimmed = normalizeCopyText(copyValue, options);
 
-  const textFiltered = str.split(' ').filter(function (value) {
-    return value !== ''
-  });
+    if (!textTrimmed) return Promise.reject(new Error('Empty text'));
 
-  const textTrimmed = textFiltered.join(' ');
+    // 1) iOS app bridge (WKWebView)
+    if (window.webkit?.messageHandlers?.copy) {
+        try {
+            window.webkit.messageHandlers.copy.postMessage(textTrimmed);
+            return Promise.resolve(true);
+        } catch (e) {
+            console.error(e);
+        }
+    }
 
-  $temp.val(textTrimmed);
+    // 2) Android app bridge
+    if (window.Android?.copyToClipboard && typeof window.Android.copyToClipboard === 'function') {
+        try {
+            window.Android.copyToClipboard(textTrimmed);
+            return Promise.resolve(true);
+        } catch (e) {
+            console.error(e);
+        }
+    }
 
-  if (navigator.userAgent.match(/TradeProMobile_iOS|DIYMobile_iOS/i)) {
-    iosCopyToClipboard($temp);
-  } else if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
-    $temp.select();
-    $temp[0].setSelectionRange(0, 999999);
-  } else {
-    $temp.select();
-  }
+    if (navigator.clipboard?.writeText) {
+        return navigator.clipboard.writeText(textTrimmed).then(() => true);
+    }
 
-  document.execCommand("copy");
-  $temp.remove();
+    return legacyExecCommandCopy(textTrimmed, currentSelector);
 }
 
-function iosCopyToClipboard($input) {
-  const el = $input.get(0);
-  const editable = el.contentEditable;
-  const readOnly = el.readOnly;
-  const range = document.createRange();
-  const sel = window.getSelection();
-
-  el.contentEditable = true;
-  el.readOnly = false;
-  range.selectNodeContents(el);
-  sel.removeAllRanges();
-  sel.addRange(range);
-  el.setSelectionRange(0, 999999);
-  el.contentEditable = editable;
-  el.readOnly = readOnly;
+function normalizeCopyText(copyValue, options) {
+    let raw = copyValue == null ? '' : copyValue + '';
+
+    const str = options.noUpperCase ? raw : raw.replace(/(^\w|\s\w)/g, (m) => m.toUpperCase());
+
+    return str
+        .split(' ')
+        .filter((v) => v !== '')
+        .join(' ')
+        .trim();
+}
+
+function legacyExecCommandCopy(text, currentSelector) {
+    return new Promise(function (resolve, reject) {
+        try {
+            let $parent = $(currentSelector).parent();
+
+            let $temp = $('<textarea>').val(text).attr('readonly', 'readonly').css({
+                position: 'fixed',
+                top: 0,
+                left: '-9999px',
+                opacity: 0,
+                width: '1px',
+                height: '1px',
+                padding: 0,
+                border: 0,
+                margin: 0,
+            });
+
+            $parent.append($temp);
+
+            let el = $temp.get(0);
+
+            el.focus();
+            let len = (el.value || '').length;
+            if (typeof el.setSelectionRange === 'function') {
+                el.setSelectionRange(0, len);
+            } else {
+                $temp.select();
+            }
+
+            let ok = document.execCommand('copy');
+
+            $temp.remove();
+
+            if (window.getSelection) {
+                let sel = window.getSelection();
+                if (sel && sel.removeAllRanges) sel.removeAllRanges();
+            }
+
+            ok ? resolve(true) : reject(new Error('execCommand failed'));
+        } catch (e) {
+            reject(e);
+        }
+    });
 }

package/build/js/page/utils/helpers.js

@@ -3,7 +3,7 @@ export function highlightCharacter(str, char, charClass) {
         return str;
     }
 
-    const pattern = new RegExp(`\\${char}+`, "g");
+    const pattern = new RegExp(`\\${char}+`, 'g');
     const replacement = `<span class="${charClass}">$&</span>`;
 
     return str.replace(pattern, replacement);
@@ -12,7 +12,7 @@ export function highlightCharacter(str, char, charClass) {
 export function createImageElements(images, alt) {
     return images.map((link) => {
         return $('<img>').attr('src', link).attr('alt', alt);
-    })
+    });
 }
 
 export function countLetters(str) {
@@ -35,15 +35,17 @@ export function isKeyboardOpen() {
     return screenHeight !== screenHeightWithoutKeyboard;
 }
 
-export function isTouchDevice () {
+export function isTouchDevice() {
     return 'ontouchstart' in window;
 }
 
-export function isApp () {
-    return navigator.userAgent.match(/TradeProMobile_iOS|TradeProMobile_Android|DIYMobile_iOS|DIYMobile_Android|DIYApp_Guest_Mobile_iOS|DIYApp_Guest_Mobile_Android|AGENT_PLACEHOLDER/i);
+export function isApp() {
+    return navigator.userAgent.match(
+        /TradeProMobile_iOS|TradeProMobile_Android|DIYMobile_iOS|DIYMobile_Android|DIYApp_Guest_Mobile_iOS|DIYApp_Guest_Mobile_Android|AGENT_PLACEHOLDER/i
+    );
 }
 
-export function trimFields () {
+export function trimFields() {
     const fields = Wick.AddressBook.getFieldsConfigurations();
     fields.forEach((field) => {
         const trimmedValue = field.input.val().trim();
@@ -55,8 +57,11 @@ export function scrollToElement(element, offset = 20) {
     const targetElement = $(element);
 
     if (targetElement.length > 0) {
-        $('html, body').animate({
-            scrollTop: targetElement.offset().top - offset
-        }, 300);
+        $('html, body').animate(
+            {
+                scrollTop: targetElement.offset().top - offset,
+            },
+            300
+        );
     }
 }