wickes-css2 2.105.0-develop.8 → 2.105.0-develop.9

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

package/build/js/page/utils/show-more-less.js

@@ -0,0 +1,273 @@
+import btn from '../../../elements/btn.hbs';
+
+// ===== HELPERS =====
+
+function normalizeOptions(options) {
+    return {
+        groupSel: '.accordion.filter',
+        panelSel: '.accordion__content-inner',
+        itemSel: '.filter__item',
+
+        ctaAppendToSel: '.accordion__content-inner',
+        ctaClass: 'filter__facet-cta',
+        ctaAction: 'more',
+        ctaActionAttr: 'data-action',
+
+        toggleSel: '.accordion__header',
+
+        stateKey: 'showMoreLessState',
+        stepAttr: 'data-facet-step',
+        defaultStep: 5,
+
+        excludeGroup: null,
+
+        moreText: 'Show more',
+        lessText: 'Show less',
+
+        ...options,
+    };
+}
+
+function makeSelectors(opt) {
+    return {
+        GROUP: opt.groupSel,
+        PANEL: opt.panelSel,
+        ITEM: opt.itemSel,
+        TOGGLE: opt.toggleSel || null,
+
+        CTA: `.${opt.ctaClass}`,
+        CTA_APPEND_TO: opt.ctaAppendToSel,
+    };
+}
+
+function isExcluded($group, excludeFn) {
+    return typeof excludeFn === 'function' ? !!excludeFn($group) : false;
+}
+
+function getPanel($group, sel) {
+    return $group.find(sel.PANEL).first();
+}
+
+function getItems($group, sel) {
+    const $panel = getPanel($group, sel);
+    if (!$panel.length) return $();
+
+    const $direct = $panel.children(sel.ITEM);
+    return $direct.length ? $direct : $panel.find(sel.ITEM);
+}
+
+function getStep($group, stepAttr, defaultStep) {
+    const raw = ($group.attr(stepAttr) || '').trim();
+    const n = parseInt(raw, 10);
+    return Number.isFinite(n) && n > 0 ? n : defaultStep;
+}
+
+function getState($group, stateKey, total, step) {
+    let state = $group.data(stateKey);
+
+    if (!state) state = { visible: step, total };
+
+    state.total = total;
+
+    if (!state.visible || state.visible < step) state.visible = step;
+    if (state.visible > total) state.visible = total;
+
+    $group.data(stateKey, state);
+    return state;
+}
+
+function setInitialState($group, stateKey, total, step) {
+    $group.data(stateKey, { visible: step, total });
+}
+
+function getGroups($root, groupSel) {
+    const $scope = $root && $root.length ? $root : $(document);
+    const $self = $scope.is(groupSel) ? $scope : $();
+    const $found = $scope.find(groupSel);
+    return $self.add($found);
+}
+
+// ===== CTA helpers =====
+
+function getCta($group, sel) {
+    return $group.find(sel.CTA).first();
+}
+
+function removeCta($group, sel) {
+    const $cta = getCta($group, sel);
+    if ($cta.length) $cta.remove();
+}
+
+function ensureCta($group, sel, opt) {
+    let $cta = getCta($group, sel);
+    if ($cta.length) return $cta;
+
+    const $appendTo = $group.find(sel.CTA_APPEND_TO).first();
+    if (!$appendTo.length) return $();
+
+    const html = btn({
+        text: opt.moreText,
+        class: opt.ctaClass,
+        action: opt.ctaAction,
+    });
+
+    $appendTo.append(html);
+
+    $cta = getCta($group, sel);
+
+    if ($cta.length && !$cta.attr(opt.ctaActionAttr)) {
+        $cta.attr(opt.ctaActionAttr, opt.ctaAction);
+    }
+
+    return $cta;
+}
+
+function setCtaState($cta, mode, opt) {
+    if (!$cta || !$cta.length) return;
+
+    if (mode === 'less') {
+        $cta.text(opt.lessText).attr(opt.ctaActionAttr, 'less').show();
+    } else {
+        $cta.text(opt.moreText).attr(opt.ctaActionAttr, 'more').show();
+    }
+}
+
+// ===== CORE ACTIONS =====
+
+function applyGroup($group, opt, sel) {
+    if (!$group || !$group.length) return;
+
+    // excluded -> CTA never exists
+    if (isExcluded($group, opt.excludeGroup)) {
+        removeCta($group, sel);
+        return;
+    }
+
+    const $items = getItems($group, sel);
+    const total = $items.length;
+    const step = getStep($group, opt.stepAttr, opt.defaultStep);
+
+    // 0 items -> no CTA
+    if (total === 0) {
+        removeCta($group, sel);
+        return;
+    }
+
+    const state = getState($group, opt.stateKey, total, step);
+
+    // show/hide items
+    $items.each(function (idx) {
+        $(this).toggle(idx < state.visible);
+    });
+
+    // <= step -> CTA not needed
+    if (total <= step) {
+        removeCta($group, sel);
+        return;
+    }
+
+    // > step -> ensure CTA exists and update it
+    const $cta = ensureCta($group, sel, opt);
+    if (!$cta.length) return;
+
+    if (state.visible >= total) setCtaState($cta, 'less', opt);
+    else setCtaState($cta, 'more', opt);
+}
+
+function expandGroup($group, opt, sel) {
+    if (!$group || !$group.length) return;
+    if (isExcluded($group, opt.excludeGroup)) return;
+
+    const total = getItems($group, sel).length;
+    if (!total) return;
+
+    const step = getStep($group, opt.stepAttr, opt.defaultStep);
+    const state = getState($group, opt.stateKey, total, step);
+
+    state.visible = Math.min(state.visible + step, total);
+    $group.data(opt.stateKey, state);
+
+    applyGroup($group, opt, sel);
+}
+
+function collapseGroupToInitial($group, opt, sel) {
+    if (!$group || !$group.length) return;
+
+    if (isExcluded($group, opt.excludeGroup)) {
+        removeCta($group, sel);
+        return;
+    }
+
+    const total = getItems($group, sel).length;
+    const step = getStep($group, opt.stepAttr, opt.defaultStep);
+
+    setInitialState($group, opt.stateKey, total, step);
+    applyGroup($group, opt, sel);
+}
+
+// ===== MAIN FACTORY =====
+
+export function createShowMoreLess(options = {}) {
+    const OPT = normalizeOptions(options);
+    const SEL = makeSelectors(OPT);
+
+    if (!SEL.GROUP || !SEL.PANEL || !SEL.ITEM) {
+        throw new Error('[createShowMoreLess] Missing required selectors');
+    }
+
+    // namespace for delegated events (avoid duplicates if factory created multiple times)
+    const NS = `.sml_${Math.random().toString(16).slice(2)}`;
+
+    function init($root) {
+        getGroups($root, SEL.GROUP).each(function () {
+            const $group = $(this);
+
+            if (isExcluded($group, OPT.excludeGroup)) {
+                removeCta($group, SEL);
+                return;
+            }
+
+            const total = getItems($group, SEL).length;
+            const step = getStep($group, OPT.stepAttr, OPT.defaultStep);
+
+            setInitialState($group, OPT.stateKey, total, step);
+            applyGroup($group, OPT, SEL);
+        });
+    }
+
+    function resetAll($root) {
+        getGroups($root, SEL.GROUP).each(function () {
+            collapseGroupToInitial($(this), OPT, SEL);
+        });
+    }
+
+    // CTA click
+    $(document)
+        .off(`click${NS}`, SEL.CTA)
+        .on(`click${NS}`, SEL.CTA, function (e) {
+            e.preventDefault();
+
+            const $cta = $(this);
+            const $group = $cta.closest(SEL.GROUP);
+
+            if (!$group.length || isExcluded($group, OPT.excludeGroup)) return;
+
+            const action = ($cta.attr(OPT.ctaActionAttr) || 'more').toLowerCase();
+
+            if (action === 'less') collapseGroupToInitial($group, OPT, SEL);
+            else expandGroup($group, OPT, SEL);
+        });
+
+    // Toggle/header click -> collapse to initial
+    if (SEL.TOGGLE) {
+        $(document)
+            .off(`click${NS}`, SEL.TOGGLE)
+            .on(`click${NS}`, SEL.TOGGLE, function () {
+                const $group = $(this).closest(SEL.GROUP);
+                if (!$group.length || isExcluded($group, OPT.excludeGroup)) return;
+                collapseGroupToInitial($group, OPT, SEL);
+            });
+    }
+
+    return { init, resetAll };
+}