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

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

@@ -1,273 +0,0 @@
-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 };
-}

package/src/components/kitchen/filter-modal-content-kitchen.hbs

@@ -1,10 +0,0 @@
-{{#with kitchen-plp}}
-  {{> kitchen/chips mod="mobile"}}
-  {{#each filters}}
-    {{#extend "accordion" header=name collapsed="accordion_collapsed" hidden="hidden-state"}}
-      {{#content "content"}}
-        {{> kitchen/filter-option }}
-      {{/content}}
-    {{/extend}}
-  {{/each}}
-{{/with}}

package/src/components/search-filter-modal-content.hbs

@@ -1,102 +0,0 @@
-<form class="filter-results filter-results_mobile">
-    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Color Family" mod="filter" facetStep="5" }}
-      {{#content "content"}}
-        {{#each filters.colors}}
-          <div class="filter__item">
-            <label for="m-{{id}}" class="chb chb-color">
-              <input type="checkbox" value="{{label}}" id="m-{{id}}" name="{{id}}-filter">
-              <ins><i class="fas fa-check"></i></ins>
-              <span>{{label}}</span>
-            </label>
-          </div>
-        {{/each}}
-      {{/content}}
-    {{/extend}}
-    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by category" mod="filter category-filter" fixed-height=""}}
-        {{#content "content"}}
-            {{>category-tree filters}}
-        {{/content}}
-    {{/extend}}
-    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by pack quantity" mod="filter" facetStep="5"}}
-        {{#content "content"}}
-        {{/content}}
-    {{/extend}}
-    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by type" mod="filter" facetStep="5"}}
-        {{#content "content"}}
-            {{#each filters.type-list}}
-                <div class="filter__item">
-                    <label for="m-{{id}}" class="chb chb-{{classForGtm}}">
-                        <input type="checkbox" value="{{value}}" id="m-{{id}}"
-                               name="m-{{id}}" {{#if checked}}checked{{/if}} {{#if disabled}}disabled{{/if}}>
-                        <ins><i class="fas fa-check"></i></ins>
-                        <span>{{label}}</span>
-                        <span class="filter-quantity">({{quantity}})</span>
-                    </label>
-                </div>
-            {{/each}}
-        {{/content}}
-    {{/extend}}
-    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Customer Rating" mod="filter" facetStep="5"}}
-        {{#content "content"}}
-            {{#each filters.rated}}
-            <div class="filter__item">
-                {{#ifvalue quantity value='0'}}
-                {{else}}
-                <label class="chb chb-{{classForGtm}}">
-                    <input type="checkbox" value="{{value}}" id="{{id}}" name="{{id}}" {{#if checked}}checked{{/if}} {{#if
-                        disabled}}disabled{{/if}}>
-                    <ins><i class="fas fa-check"></i></ins>
-                    <div class="filter__reviews">
-                        <div class="product-rating">
-                            <div class="rating-bg">
-                                <i class="fa fa-star" aria-hidden="true"></i>
-                                <i class="fa fa-star" aria-hidden="true"></i>
-                                <i class="fa fa-star" aria-hidden="true"></i>
-                                <i class="fa fa-star" aria-hidden="true"></i>
-                                <i class="fa fa-star" aria-hidden="true"></i>
-                                <div class="rating-overlay" data-rating="{{#if rating}}{{rating}}{{else}}0{{/if}}">
-                                    <span class="star-overlay">
-                                        <i class="fa fa-star" aria-hidden="true"></i>
-                                    </span>
-                                    <span class="star-overlay">
-                                        <i class="fa fa-star" aria-hidden="true"></i>
-                                    </span>
-                                    <span class="star-overlay">
-                                        <i class="fa fa-star" aria-hidden="true"></i>
-                                    </span>
-                                    <span class="star-overlay">
-                                        <i class="fa fa-star" aria-hidden="true"></i>
-                                    </span>
-                                    <span class="star-overlay">
-                                        <i class="fa fa-star" aria-hidden="true"></i>
-                                    </span>
-                                </div>
-                            </div>
-                            ({{quantity}})
-                        </div>
-                    </div>
-                </label>
-                {{/ifvalue}}
-            </div>
-            {{/each}}
-        {{/content}}
-    {{/extend}}
-    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by bulb shape" mod="filter" facetStep="5"}}
-        {{#content "content"}}
-        {{/content}}
-    {{/extend}}
-    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by number of gangs" mod="filter" facetStep="5"}}
-        {{#content "content"}}
-        {{/content}}
-    {{/extend}}
-    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by bulb fitting" mod="filter" facetStep="5"}}
-        {{#content "content"}}
-        {{/content}}
-    {{/extend}}
-    {{#extend "accordion" collapsed="accordion_collapsed" hidden="hidden-state" header="Shop by wattage" mod="filter" facetStep="5"}}
-        {{#content "content"}}
-        {{/content}}
-    {{/extend}}
-
-
-</form>

package/src/elements/btn.hbs

@@ -1,7 +0,0 @@
-<button
-    class="{{class}}"
-    data-action="{{action}}"
-    {{#if ariaControls}}aria-controls="{{ariaControls}}"{{/if}}
->
-  {{text}}
-</button>

package/src/js/emulation/filters-emulation.js

@@ -1,164 +0,0 @@
-import { createShowMoreLess } from '../page/utils/show-more-less';
-
-var Wick = window.Wick || (window.Wick = {});
-
-function waitFor(getter, cb, opts) {
-    opts = opts || {};
-    var timeout = opts.timeout || 8000;
-    var interval = opts.interval || 50;
-
-    var start = Date.now();
-    (function tick() {
-        var val;
-        try {
-            val = getter();
-        } catch (e) {
-            val = null;
-        }
-
-        if (val) {
-            cb(val);
-            return;
-        }
-
-        if (Date.now() - start > timeout) {
-            return;
-        }
-
-        setTimeout(tick, interval);
-    })();
-}
-
-// show-more-less
-(function () {
-    const SEL = {
-        OPEN: '#open-overlay',
-        CLOSE: '#close-overlay, .filter-results__btn-close',
-        FILTER_RESULT: '.filter-results_desktop',
-        FILTER_MOBILE: '.filter-results_mobile',
-        CATEGORY: '.filter__item--category',
-    };
-
-    const SRPShowMoreLess = createShowMoreLess({
-        excludeGroup: ($group) => $group.hasClass(SEL.CATEGORY),
-    });
-
-    function initInScope() {
-        const $fm = $(SEL.FILTER_MOBILE);
-        SRPShowMoreLess.init($(SEL.FILTER_RESULT));
-        SRPShowMoreLess.init($fm);
-    }
-
-    function resetInMobile() {
-        const $fm = $(SEL.FILTER_MOBILE);
-        SRPShowMoreLess.resetAll($fm);
-    }
-
-    $(function () {
-        initInScope();
-    });
-
-    $(document)
-        .off('click.srpSmlEmu', SEL.OPEN)
-        .on('click.srpSmlEmu', SEL.OPEN, function (e) {
-            e.preventDefault();
-            initInScope();
-            resetInMobile();
-        });
-
-    $(document)
-        .off('click.srpSmlEmu', SEL.CLOSE)
-        .on('click.srpSmlEmu', SEL.CLOSE, function (e) {
-            e.preventDefault();
-            resetInMobile();
-        });
-})();
-
-(function () {
-    waitFor(
-        function () {
-            return Wick.Sort;
-        },
-        function (Sort) {
-            Sort.ROOT = '.products-list-page:not(.page-KitchenPLPPage)';
-            Wick.Sort.ROOT = Sort.ROOT;
-
-            var $root = $(Sort.ROOT);
-            if (!$root.length) return;
-
-            if (Sort.__emuBound) return;
-            Sort.__emuBound = true;
-
-            $root.off('click', Sort.TRIGGER_MOBILE);
-            $root.off('click', Sort.TRIGGER_DESKTOP_BTN);
-            $root.off('keydown', Sort.TRIGGER_MOBILE + ', ' + Sort.TRIGGER_DESKTOP_BTN);
-            $root.off('click', Sort.OPTION);
-
-            $root.on('click', Sort.TRIGGER_MOBILE, function (e) {
-                e.stopPropagation();
-
-                if ($(e.target).closest(Sort.DROPDOWN).length) return;
-                e.preventDefault();
-                Sort.toggle($(e.currentTarget));
-            });
-
-            $root.on('click', Sort.TRIGGER_DESKTOP_BTN, function (e) {
-                e.stopPropagation();
-
-                e.preventDefault();
-                Sort.toggle($(e.currentTarget).closest(Sort.WRAP));
-            });
-
-            $root.on(
-                'keydown',
-                Sort.TRIGGER_MOBILE + ', ' + Sort.TRIGGER_DESKTOP_BTN,
-                function (e) {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        Sort.toggle($(e.currentTarget).closest(Sort.WRAP));
-                    }
-                }
-            );
-
-            $root.on('click', Sort.OPTION, function (e) {
-                e.preventDefault();
-                e.stopPropagation();
-
-                var opt = $(e.currentTarget);
-                var value = opt.data('value');
-                var label = Sort.valueToLabel(value);
-
-                if (opt.data('is-plp-srp')) {
-                    var wrap = opt.closest(Sort.WRAP);
-                    wrap.find(Sort.OPTION).removeClass('is-active');
-                    opt.addClass('is-active');
-
-                    $(Sort.INFO).text(label);
-                    Sort.closeAll();
-                    return;
-                }
-
-                Sort.updateSortParamInURL(value);
-            });
-
-            (function bootstrapEmu() {
-                var urlParams = new URLSearchParams(window.location.search);
-                var value = urlParams.get('sortBy') || 'relevance';
-                var label = Sort.valueToLabel(value);
-
-                var $wraps = $root.find(Sort.WRAP);
-
-                $wraps.each(function (_, el) {
-                    var w = $(el);
-                    w.find(Sort.OPTION)
-                        .removeClass('is-active')
-                        .filter('[data-value="' + value + '"]')
-                        .addClass('is-active');
-                });
-
-                $(Sort.INFO).text(label);
-            })();
-        }
-    );
-})();

package/src/js/emulation/product-counter.js

@@ -1,50 +0,0 @@
-var Wick = Wick || {};
-
-Wick.ProductCounter = (function () {
-    let _count = 0;
-
-    function triggerChange() {
-        $(document).trigger('productCounter:change', [_count]);
-    }
-
-    function setCount(val) {
-        const next = Number(val) || 0;
-        if (_count === next) return;
-
-        _count = next;
-        triggerChange();
-    }
-
-    function recalcFromFilters() {
-        const checked = $('.filter-results input[type="checkbox"]:checked').length;
-
-        if (checked === 0) setCount(0);
-        else if (checked === 1) setCount(1);
-        else setCount(1838);
-    }
-
-    function bind() {
-        $(document).on('change', '.filter-results input[type="checkbox"]', recalcFromFilters);
-
-        recalcFromFilters();
-    }
-
-    return {
-        get count() {
-            return _count;
-        },
-        set count(val) {
-            setCount(val);
-        },
-        recalc: recalcFromFilters,
-        bind: bind,
-    };
-})();
-
-$(document).ready(function () {
-    if (Wick.ProjectListMultiple && typeof Wick.ProjectListMultiple.bindAll === 'function') {
-        Wick.ProjectListMultiple.bindAll();
-    }
-
-    Wick.ProductCounter.bind();
-});

package/src/js/emulation/reset-filter-desktop.js

@@ -1,5 +0,0 @@
-$(document).on('click', '.filter-results__clear', function () {
-    const form = $(this).closest('form')[0];
-    form.reset();
-    form.submit();
-});

package/src/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();
-    });
-})();