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

package/src/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/scss/components/_sort-by.scss

@@ -1,190 +0,0 @@
-/* MOBILE */
-.mobile-nav__item--dropdown {
-  position: relative;
-  cursor: pointer;
-
-  &:hover,
-  &.is-open {
-    .sort__chevron {
-      color: $squant;
-    }
-  }
-
-  .sort__chevron {
-    position: absolute;
-    right: 22px;
-    color: $warm-grey;
-    font-size: 14px;
-    transition: transform 0.2s;
-  }
-
-  .sort-dd {
-    left: auto;
-    right: 4px;
-  }
-
-  .mobile-nav__dropdown {
-    position: absolute;
-    top: calc(100% + 8px);
-    right: 0;
-    min-width: 220px;
-    background: $white;
-    border-radius: 12px;
-    box-shadow: 0 0 8px 0 $black-transparent10;
-    padding: 8px 0;
-    z-index: 30;
-
-    &[hidden] {
-      display: none !important;
-    }
-  }
-
-  .mobile-nav__opt {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px 14px;
-    background: none;
-    border: 0;
-    text-align: left;
-    cursor: pointer;
-    font-size: 1rem;
-    line-height: 22px;
-    color: $blue-dark;
-
-    &:hover {
-      background: $gray;
-    }
-  }
-
-  .mobile-nav__opt-check {
-    color: $blue;
-    opacity: 0;
-    width: 16px;
-  }
-
-  .mobile-nav__opt.is-active .mobile-nav__opt-check {
-    opacity: 1;
-  }
-}
-
-/* DESKTOP */
-.sort {
-  position: relative;
-
-  &--desktop {
-    display: none;
-    align-items: center;
-    gap: 12px;
-
-    .sort__label {
-      font-weight: 500;
-      color: $gray-dark;
-      font-size: 1rem;
-      margin-bottom: 0;
-    }
-
-    .sort-button {
-      position: relative;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      border: 1px solid $gray;
-      background: $white;
-      color: $gray-dark;
-      cursor: pointer;
-      border-radius: 3px;
-      padding: 8px 8px 8px 16px;
-      font-size: 1rem;
-      min-width: 210px;
-
-      &:focus {
-        outline: none;
-      }
-
-      &:focus-visible {
-        outline: 2px solid $blue;
-        outline-offset: 2px;
-      }
-    }
-
-    .sort__chevron {
-      position: absolute;
-      right: 14px;
-      color: $blue;
-      font-size: 12px;
-      transition: transform 0.2s;
-    }
-  }
-}
-
-/* COMMON */
-.sort.is-open .sort__chevron {
-  transform: rotate(180deg);
-}
-
-.sort-dd {
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 0;
-  min-width: 210px;
-  background: #fff;
-  padding: 4px 0;
-  z-index: 40;
-  box-shadow: 0 0 8px $black-transparent12;
-  border-radius: 4px;
-
-  &[hidden] {
-    display: none !important;
-  }
-}
-
-.sort-opt {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 16px 8px 12px;
-  background: none;
-  border: 0;
-  text-align: left;
-  cursor: pointer;
-  line-height: 24px;
-  color: $gray-dark;
-
-  &:hover {
-    background: $ma-white;
-  }
-}
-
-.sort-opt__check {
-  color: $blue;
-  opacity: 0;
-  width: 16px;
-}
-
-.sort-opt.is-active .sort-opt__check {
-  opacity: 1;
-}
-
-@include media-breakpoint-up(md) {
-  .sort--desktop {
-    display: flex;
-  }
-}
-
-@include media-breakpoint-up(sm) {
-  .mobile-nav__item--dropdown .sort-dd {
-    left: 0;
-    right: auto;
-  }
-}
-
-@include media-breakpoint-up(md) {
-  .sort-opt {
-    font-size: 1rem;
-    line-height: 20px;
-    padding: 10px 16px 10px 12px;
-  }
-}