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

package/build/js/page/filters/desktop-nav.js

@@ -1,64 +0,0 @@
-function formatNumberInElement(selector) {
-    const formatter = new Intl.NumberFormat('en-GB');
-
-    document.querySelectorAll(selector).forEach((el) => {
-        const rawText = el.textContent.trim();
-
-        const number = Number(rawText.replace(/[^\d]/g, ''));
-
-        if (!Number.isNaN(number)) {
-            el.textContent = formatter.format(number);
-        }
-    });
-}
-
-(function () {
-    const SELECTORS = {
-        $sidebar: $('.filter-results_desktop'),
-        $heading: $('.filter-results__heading'),
-        $offerBanner: $('.offer-banner'),
-        $offerBannerIndent: 40,
-        offerBannerCloseIcon:
-            '.icon.notification__close, .icon.notification__close_white, .notification__close',
-    };
-
-    function isDesktop() {
-        return Wick.Responsive.getCurrentBreakpoint() !== 'down-sm';
-    }
-
-    function getOfferBannerHeight() {
-        if (!SELECTORS.$offerBanner.length) return SELECTORS.$offerBannerIndent;
-        return SELECTORS.$offerBanner.outerHeight(true) + SELECTORS.$offerBannerIndent || 0;
-    }
-
-    function applyTop() {
-        if (!SELECTORS.$sidebar.length) return;
-
-        if (!isDesktop()) {
-            SELECTORS.$sidebar.css('top', '');
-            SELECTORS.$heading.css('top', '');
-            return;
-        }
-
-        const top = getOfferBannerHeight();
-
-        SELECTORS.$sidebar.css('top', top + 'px');
-
-        if (SELECTORS.$heading.length) {
-            SELECTORS.$heading.css('top', top + 'px');
-        }
-    }
-
-    function setupOfferBannerCloseHook() {
-        $(document).on('click', SELECTORS.offerBannerCloseIcon, function () {
-            setTimeout(applyTop, 0);
-        });
-    }
-
-    $(document).ready(function () {
-        formatNumberInElement('.product-count');
-        applyTop();
-        $(window).on('resize', _.debounce(applyTop, 100));
-        setupOfferBannerCloseHook();
-    });
-})();

package/build/js/page/filters/mobile-nav.js

@@ -1,93 +0,0 @@
-(function () {
-    const SELECTORS = {
-        $filters: $('.plp-filters'),
-        $filterBar: $('.plp-filters__bar-mobile'),
-        $filterModal: $('.filter-modal'),
-
-        $offerBanner: $('.offer-banner'),
-        offerBannerCloseIcon: '.icon.notification__close',
-    };
-
-    const CLASSES = {
-        plpFiltersStuck: 'plp-filters__bar-stuck',
-    };
-
-    function isMobile() {
-        return Wick.Responsive.getCurrentBreakpoint() === 'down-sm';
-    }
-
-    function getOfferBannerHeight() {
-        if (!SELECTORS.$offerBanner.length) return 0;
-        return SELECTORS.$offerBanner.outerHeight(true) || 0;
-    }
-
-    function applyOfferBannerTop() {
-        if (!SELECTORS.$filters.length) return;
-
-        if (!isMobile()) {
-            SELECTORS.$filters.css('top', '');
-            return;
-        }
-
-        const h = getOfferBannerHeight();
-        SELECTORS.$filters.css('top', h > 0 ? h + 'px' : '');
-    }
-
-    function resetOfferBannerTopToZero() {
-        if (!SELECTORS.$filters.length) return;
-        SELECTORS.$filters.css('top', '0px');
-    }
-
-    function applyStuckState() {
-        if (!isMobile()) {
-            SELECTORS.$filterBar.removeClass(CLASSES.plpFiltersStuck);
-            return;
-        }
-
-        if (!SELECTORS.$filters.length || !SELECTORS.$filterBar.length) return;
-
-        const filtersEl = SELECTORS.$filters.get(0);
-        if (!filtersEl) return;
-
-        const rect = filtersEl.getBoundingClientRect();
-        const bannerHeight = getOfferBannerHeight();
-
-        const shouldStick = rect.top <= bannerHeight;
-
-        if (shouldStick) {
-            SELECTORS.$filterBar.addClass(CLASSES.plpFiltersStuck);
-        } else {
-            SELECTORS.$filterBar.removeClass(CLASSES.plpFiltersStuck);
-        }
-    }
-
-    function hideModal() {
-        if (Wick.Responsive.getCurrentBreakpoint() !== 'down-sm') {
-            SELECTORS.$filterModal.modal('hide');
-        }
-    }
-
-    function setupOfferBannerCloseHook() {
-        $(document).on('click', SELECTORS.offerBannerCloseIcon, function () {
-            resetOfferBannerTopToZero();
-        });
-    }
-
-    $(document).ready(function () {
-        applyOfferBannerTop();
-        applyStuckState();
-
-        $(window).on('scroll', _.debounce(applyStuckState, 50));
-
-        $(window).on(
-            'resize',
-            _.debounce(function () {
-                hideModal();
-                applyOfferBannerTop();
-                applyStuckState();
-            }, 100)
-        );
-
-        setupOfferBannerCloseHook();
-    });
-})();

package/build/js/page/filters/plp-filters-chips.js

@@ -1,92 +0,0 @@
-var Wick = window.Wick || {};
-
-Wick.PLPChips = {
-    GROUP: '.plp-filters__group',
-    TOGGLE: '.plp-filters__toggle',
-    INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
-    CHIPS_WRAP_SEL: '.plp-selected',
-    BADGE_CLASS: 'plp-filters__badge',
-
-    renderGroupCounters(rootWrapper) {
-        rootWrapper.find(Wick.PLPChips.GROUP).each((_, el) => {
-            const group = $(el);
-            const name = group.attr('data-filter') || '';
-            const count = Wick.PLPFilters.appliedState[name]
-                ? Wick.PLPFilters.appliedState[name].size
-                : 0;
-            const btn = group.find(Wick.PLPChips.TOGGLE);
-            const badgeSpan = btn.find(`.${Wick.PLPChips.BADGE_CLASS} span`);
-            if (count > 0) {
-                badgeSpan.text(count).css('display', 'flex');
-            } else {
-                badgeSpan.text('').hide();
-            }
-        });
-    },
-
-    renderChips(rootWrapper) {
-        const wrap = rootWrapper.find(Wick.PLPChips.CHIPS_WRAP_SEL);
-        if (!wrap.length) {
-            return;
-        }
-
-        const list = wrap.find('.plp-selected__list');
-        let clearAllBtn = wrap.find('.plp-selected__clear-all');
-
-        list.empty();
-
-        const total = Wick.PLPFilters.totalApplied();
-        wrap.find('.plp-selected__clear-all').prop('hidden', total === 0);
-
-        if (total === 0) {
-            wrap.hide();
-            if (clearAllBtn.length) {
-                clearAllBtn.remove();
-            }
-            return;
-        }
-
-        Object.keys(Wick.PLPFilters.appliedState).forEach((group) => {
-            Wick.PLPFilters.appliedState[group].forEach((value) => {
-                list.append(
-                    `<button type="button" class="pf-chip" data-group="${group}" data-value="${value}">
-            <span class="pf-chip__text">${value}</span>
-            <i class="fa fa-times pf-chip__close" aria-hidden="true"></i>
-            <span class="sr-only">Remove ${value} from ${group}</span>
-        </button>`
-                );
-            });
-        });
-
-        if (clearAllBtn.length) {
-            clearAllBtn.prop('hidden', false);
-            clearAllBtn.appendTo(list);
-        } else {
-            clearAllBtn = $(`
-      <button type="button" class="plp-selected__clear-all btn btn-secondary">
-        <i class="fa fa-times" aria-hidden="true"></i><span>Clear all</span>
-      </button>
-    `);
-            list.append(clearAllBtn);
-        }
-    },
-
-    bindChipActions(rootWrapper) {
-        // remove one chip
-        rootWrapper.on('click', '.pf-chip', (e) => {
-            e.preventDefault();
-            const chip = $(e.target).closest('.pf-chip');
-            const groupDomName = chip.data('group');
-            const valueOriginal = chip.data('value');
-
-            Wick.PLPFilters.removeFromApplied(groupDomName, valueOriginal);
-            Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, false);
-        });
-
-        // clear all
-        rootWrapper.on('click', '.plp-selected__clear-all', (e) => {
-            e.preventDefault();
-            Wick.PLPFilters.writeStateToURL({}, false);
-        });
-    },
-};

package/build/js/page/filters/plp-filters-mobile.js

@@ -1,150 +0,0 @@
-var Wick = window.Wick || {};
-
-Wick.PLPFiltersMobile = {
-    ROOT_WRAPPER:
-        '.page-KitchenPLPPage, .products-list-page:not(.page-responsiveThematicProductListPage)',
-    PRODUCTS_LIST: '.products-list-page',
-    INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
-
-    MODAL_SEL: '#filterModal',
-    MODAL_VIEW_BTN: '#filterModal .btn.btn-primary',
-    MODAL_CLEAR_BTN: '#filterModal .btn.btn-secondary',
-    $ACCORDION: '.accordion',
-    $ACCORDION_CONTENT: '.accordion__content',
-    ACCORDION_COLLAPSED: 'accordion_collapsed',
-
-    getPlural(value, one, many) {
-        return value === 1 ? one : many;
-    },
-
-    isProductPage() {
-        return $(Wick.PLPFiltersMobile.PRODUCTS_LIST).length > 0;
-    },
-
-    getMobileCounts() {
-        const isProducts = Wick.PLPFiltersMobile.isProductPage();
-
-        if (isProducts) {
-            const total = (Wick.ProductCounter && Wick.ProductCounter.count) || 0;
-            return { mode: 'products', total };
-        }
-
-        const total = Wick.PLPFilters.totalApplied();
-        return { mode: 'filters', total };
-    },
-
-    updateMobileFilterInfo() {
-        const info = $('.mobile-nav__item[data-target="#filterModal"] .mobile-nav__info');
-        if (!info.length) return;
-
-        const { mode, total } = Wick.PLPFiltersMobile.getMobileCounts();
-
-        if (mode === 'products') {
-            return;
-        }
-
-        if (total > 0) {
-            const label = Wick.PLPFiltersMobile.getPlural(total, 'filter', 'filters');
-            info.text(`${total} ${label} applied`);
-        } else {
-            info.text('No filters applied');
-        }
-    },
-
-    updateViewResultsButton() {
-        const { mode } = Wick.PLPFiltersMobile.getMobileCounts();
-
-        if (mode === 'products') {
-            return;
-        }
-
-        const $btn = $(Wick.PLPFiltersMobile.MODAL_VIEW_BTN);
-        if (!$btn.length) return;
-
-        const { total } = Wick.PLPFiltersMobile.getMobileCounts();
-        $btn.text(total > 0 ? `View results (${total})` : 'View results');
-    },
-
-    hideAccordions() {
-        $(Wick.PLPFiltersMobile.$ACCORDION).addClass(Wick.PLPFiltersMobile.ACCORDION_COLLAPSED);
-        $(Wick.PLPFiltersMobile.$ACCORDION_CONTENT).hide();
-    },
-
-    init() {
-        // two-way binding for input between desktop and modal
-        $(document)
-            .off('change.plpFiltersMobile', Wick.PLPFiltersMobile.INPUTS)
-            .on('change.plpFiltersMobile', Wick.PLPFiltersMobile.INPUTS, function () {
-                const inp = $(this);
-                const name = inp.attr('name');
-                if (!name) return;
-
-                Wick.PLPUtils.syncTwinInputsByName(name, inp.prop('checked'), inp);
-            });
-
-        // when the modal is opened — synchronize its checkboxes with state
-        $(document)
-            .off('shown.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL)
-            .on('shown.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL, function () {
-                Wick.PLPFilters.setDOMFromState($(this), Wick.PLPFilters.appliedState);
-            });
-
-        $(document)
-            .off('hide.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL)
-            .on('hide.bs.modal.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_SEL, function () {
-                Wick.PLPFiltersMobile.hideAccordions();
-            });
-
-        // mobile "View results" button in modal
-        $(document)
-            .off('click.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_VIEW_BTN)
-            .on('click.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_VIEW_BTN, function (e) {
-                if ($(this).data('is-plp-srp')) {
-                    e.stopImmediatePropagation();
-                    e.preventDefault();
-                    return;
-                }
-
-                e.preventDefault();
-
-                const scope = $(Wick.PLPFiltersMobile.ROOT_WRAPPER).add(
-                    $(Wick.PLPFiltersMobile.MODAL_SEL)
-                );
-
-                Wick.PLPFilters.applyFromScopes(scope, true);
-            });
-
-        // mobile "Clear all" button in modal
-        $(document)
-            .off('click.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_CLEAR_BTN)
-            .on('click.plpFiltersMobile', Wick.PLPFiltersMobile.MODAL_CLEAR_BTN, function (e) {
-                if ($(this).data('is-plp-srp')) {
-                    e.stopImmediatePropagation();
-                    e.preventDefault();
-                    return;
-                }
-
-                e.preventDefault();
-
-                Wick.PLPFilters.appliedState = {};
-                Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, false);
-
-                $(document)
-                    .find(Wick.PLPFiltersMobile.INPUTS + ':checked')
-                    .prop('checked', false);
-
-                Wick.PLPFilters.updateSelectedUI($(Wick.PLPFiltersMobile.ROOT_WRAPPER));
-            });
-
-        // emulation watcher (stub backend)
-        $(document)
-            .off('productCounter:change.plpFiltersMobile')
-            .on('productCounter:change.plpFiltersMobile', function () {
-                Wick.PLPFiltersMobile.updateMobileFilterInfo();
-                Wick.PLPFiltersMobile.updateViewResultsButton();
-            });
-
-        Wick.PLPFiltersMobile.updateMobileFilterInfo();
-        Wick.PLPFiltersMobile.updateViewResultsButton();
-    },
-};

package/build/js/page/filters/plp-filters-panel.js

@@ -1,123 +0,0 @@
-var Wick = window.Wick || {};
-
-Wick.PLPFiltersPanel = {
-    ROOT: '.plp-filters',
-    BAR: '.plp-filters__bar',
-    GROUP: '.plp-filters__group',
-    TOGGLE: '.plp-filters__toggle',
-    PANEL: '.plp-filters__panel',
-
-    init() {
-        // toggle
-        $(document).on('click', Wick.PLPFiltersPanel.TOGGLE, Wick.PLPFiltersPanel.togglePanel);
-
-        // close outside filters / ESC
-        $(document).on('click', (e) => {
-            const root = $(Wick.PLPFiltersPanel.ROOT);
-            if (!root.is(e.target) && root.has(e.target).length === 0) {
-                Wick.PLPFiltersPanel.closeAll();
-            }
-        });
-
-        $(document).on('keydown', (e) => {
-            if (e.key === 'Escape') {
-                Wick.PLPFiltersPanel.closeAll();
-            }
-        });
-
-        // responsive (position of the opened panel)
-        $(window).on(
-            'resize',
-            _.debounce(() => {
-                const open = $(Wick.PLPFiltersPanel.GROUP + '.is-open').first();
-                if (open.length) {
-                    const btn = open.find(Wick.PLPFiltersPanel.TOGGLE).first();
-                    Wick.PLPFiltersPanel.layoutPanel(btn);
-                }
-            }, 120)
-        );
-    },
-
-    togglePanel(e) {
-        e.preventDefault();
-        const btn = $(this);
-        const group = btn.closest(Wick.PLPFiltersPanel.GROUP);
-        const panel = group.children(Wick.PLPFiltersPanel.PANEL).first();
-        const willOpen = !group.hasClass('is-open');
-
-        Wick.PLPFiltersPanel.closeAll();
-        if (willOpen) {
-            group.addClass('is-open');
-            btn.attr('aria-expanded', 'true');
-            panel.attr('aria-hidden', 'false');
-            requestAnimationFrame(() => Wick.PLPFiltersPanel.layoutPanel(btn));
-        }
-    },
-
-    closeAll() {
-        $(Wick.PLPFiltersPanel.GROUP).removeClass('is-open');
-        $(Wick.PLPFiltersPanel.TOGGLE).attr('aria-expanded', 'false');
-        $(Wick.PLPFiltersPanel.PANEL)
-            .attr('aria-hidden', 'true')
-            .removeClass('plp-filters__panel--wide plp-filters__panel--auto')
-            .css({ left: '', right: '' });
-    },
-
-    layoutPanel(btn) {
-        const root = $(Wick.PLPFiltersPanel.ROOT);
-        const group = btn.closest(Wick.PLPFiltersPanel.GROUP);
-        const panel = group.children(Wick.PLPFiltersPanel.PANEL).first();
-
-        let bar = group.closest(Wick.PLPFiltersPanel.BAR);
-        if (!bar.length) {
-            bar =
-                root.find('.plp-filters__bar-desktop:visible').first() ||
-                root.find('.plp-filters__bar-desktop').first() ||
-                root.find(Wick.PLPFiltersPanel.BAR).filter(':visible').first() ||
-                root.find(Wick.PLPFiltersPanel.BAR).first();
-        }
-        if (!bar.length || !panel.length) {
-            return;
-        }
-
-        panel
-            .removeClass('plp-filters__panel--wide plp-filters__panel--auto')
-            .css({ left: '', right: '', width: '' });
-
-        const barOff = bar.offset();
-        const groupOff = group.offset();
-        const barW = Math.round(bar.outerWidth());
-        const groupLeftWithinBar = Math.round(groupOff.left - barOff.left);
-
-        const type = Wick.PLPUtils.getPanelType(panel);
-        const items = Math.max(1, Wick.PLPUtils.countItems(panel));
-
-        if (type === 'cards') {
-            Wick.PLPUtils.setCardsColumns(panel, Math.min(items, 4));
-            let leftWithinBar = groupLeftWithinBar;
-            const panelW = panel.outerWidth();
-            if (leftWithinBar + panelW > barW) {
-                leftWithinBar = barW - panelW;
-            }
-            if (leftWithinBar < 0) {
-                leftWithinBar = 0;
-            }
-            panel.css({ left: leftWithinBar - groupLeftWithinBar });
-            return;
-        }
-        if (type === 'swatches') {
-            const panelW = panel.outerWidth();
-            let leftWithinBar = groupLeftWithinBar;
-            if (leftWithinBar + panelW > barW) {
-                leftWithinBar = barW - panelW;
-                if (leftWithinBar < 0) {
-                    leftWithinBar = 0;
-                }
-            }
-            panel.css({ left: leftWithinBar - groupLeftWithinBar });
-            return;
-        }
-        // text → fix to the right edge
-        panel.css({ right: 0 });
-    },
-};

package/build/js/page/filters/plp-filters-utils.js

@@ -1,66 +0,0 @@
-var Wick = window.Wick || {};
-
-Wick.PLPUtils = (function () {
-    function syncTwinInputsByName(name, checked, source) {
-        const all = $('.filter-card__checkbox, .swatch__checkbox, .checkbox__input').filter(
-            function () {
-                return $(this).attr('name') === name;
-            }
-        );
-        all.each(function () {
-            if (source && this === source[0]) {
-                return;
-            }
-            $(this).prop('checked', checked);
-        });
-    }
-
-    function getPanelType(panel) {
-        if (panel.find('.plp-filters__options--cards').length) {
-            return 'cards';
-        }
-        if (panel.find('.swatch-list').length) {
-            return 'swatches';
-        }
-        return 'text';
-    }
-
-    function countItems(panel) {
-        const t = getPanelType(panel);
-        if (t === 'cards') {
-            return panel.find('.filter-card').length || 0;
-        }
-        if (t === 'swatches') {
-            return panel.find('.swatch').length || 0;
-        }
-        return panel.find('.checkbox').length || 0;
-    }
-
-    function setCardsColumns(panel, cols) {
-        const wrap = panel.find('.plp-filters__options--cards');
-        if (wrap.length) {
-            wrap.css('grid-template-columns', `repeat(${cols}, minmax(0,1fr))`);
-        }
-    }
-
-    function getGroupsMeta(rootWrapper, selGroup) {
-        const out = [];
-        rootWrapper.find(selGroup).each((_, el) => {
-            const group = $(el);
-            const domName = group.attr('data-filter') || '';
-            if (!domName) {
-                return;
-            }
-            out.push({ domName, paramKey: domName, group });
-        });
-        return out;
-    }
-
-    return {
-        syncTwinInputsByName,
-        getPanelType,
-        countItems,
-        setCardsColumns,
-        getGroupsMeta,
-    };
-})();