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

package/src/js/page/kitchen/plp-filters-mobile.js

@@ -1,72 +0,0 @@
-var Wick = window.Wick || {};
-
-Wick.PLPFiltersMobile = {
-  ROOT_WRAPPER: ".page-KitchenPLPPage",
-  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',
-
-  // update mobile counter
-  updateMobileFilterInfo() {
-    const info = $('.mobile-nav__item[data-target="#filterModal"] .mobile-nav__info');
-    if (!info.length) {
-      return;
-    }
-
-    const total = Wick.PLPFilters.totalApplied();
-    if (total > 0) {
-      const label = total === 1 ? 'filter' : 'filters';
-      info.text(`${total} ${label} applied`);
-    } else {
-      info.text('No filters applied');
-    }
-  },
-
-  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).on('change', 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).on('shown.bs.modal', Wick.PLPFiltersMobile.MODAL_SEL, function () {
-      Wick.PLPFilters.setDOMFromState($(this), Wick.PLPFilters.appliedState);
-    });
-
-    $(document).on('hide.bs.modal', Wick.PLPFiltersMobile.MODAL_SEL, function () {
-      Wick.PLPFiltersMobile.hideAccordions()
-    });
-
-    // mobile "View results" button in modal
-    $(document).on('click', Wick.PLPFiltersMobile.MODAL_VIEW_BTN, function (e) {
-      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).on('click', Wick.PLPFiltersMobile.MODAL_CLEAR_BTN, function (e) {
-      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));
-      $(document).trigger('filters:cleared', {state: Wick.PLPFilters.exportState()});
-    });
-  }
-}

package/src/js/page/kitchen/plp-filters-panel.js

@@ -1,119 +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/src/js/page/kitchen/plp-filters-utils.js

@@ -1,65 +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
-  };
-})();

package/src/js/page/kitchen/plp-filters.js

@@ -1,205 +0,0 @@
-var Wick = window.Wick || {};
-
-Wick.PLPFilters = {
-
-  ROOT_WRAPPER: ".page-KitchenPLPPage",
-  ROOT: ".plp-filters",
-  GROUP: ".plp-filters__group",
-  APPLY_BTN: ".plp-filters__apply",
-
-  INPUTS: '.filter-card__checkbox, .swatch__checkbox, .checkbox__input',
-
-  appliedState: {},
-
-  init() {
-    // 1) initialize submodules
-    Wick.PLPFiltersPanel.init();
-    Wick.PLPFiltersMobile.init();
-
-    // 2) initial state with URL
-    const root = $(Wick.PLPFilters.ROOT);
-    const rootWrapper = $(Wick.PLPFilters.ROOT_WRAPPER);
-    if (!root.length) {
-      return;
-    }
-
-    Wick.PLPFilters.appliedState = Wick.PLPFilters.readStateFromURL(rootWrapper);
-    Wick.PLPFilters.setDOMFromState(rootWrapper, Wick.PLPFilters.appliedState);
-
-    // 3) chips
-    Wick.PLPChips.bindChipActions(rootWrapper);
-
-    // 4) apply (desktop "View results")
-    $(document).on("click", Wick.PLPFilters.APPLY_BTN, Wick.PLPFilters.applyFilters);
-
-    // 5) primary render
-    Wick.PLPFilters.updateSelectedUI(rootWrapper);
-  },
-
-  // ===== URL <-> STATE
-  readStateFromURL(rootWrapper) {
-    const url = new URL(window.location.href);
-    const params = url.searchParams;
-    const state = {};
-
-    const groupsMeta = Wick.PLPUtils.getGroupsMeta(rootWrapper, Wick.PLPFilters.GROUP);
-    if (!groupsMeta.length) {
-      return state;
-    }
-
-    const byDomName = {};
-    groupsMeta.forEach(m => {
-      byDomName[m.domName] = m;
-    });
-
-    for (const [key, val] of params.entries()) {
-      const meta = byDomName[key];
-      if (!meta) {
-        continue;
-      }
-
-      const values = val.split(',').map(v => v.trim()).filter(Boolean);
-      if (!values.length) {
-        continue;
-      }
-
-      values.forEach(want => {
-        const inp = meta.group.find(Wick.PLPFilters.INPUTS).filter(function () {
-          return $(this).val() === want;
-        }).first();
-
-        if (!inp.length) {
-          return;
-        }
-
-        const originalValue = inp.val();
-        if (!state[meta.domName]) {
-          state[meta.domName] = new Set();
-        }
-        state[meta.domName].add(originalValue);
-      });
-    }
-
-    return state;
-  },
-
-  writeStateToURL(state, push) {
-    const url = new URL(window.location.href);
-
-    const groupsMeta = Wick.PLPUtils.getGroupsMeta($(Wick.PLPFilters.ROOT_WRAPPER), Wick.PLPFilters.GROUP);
-    const groupKeysDecoded = new Set(groupsMeta.map(m => m.domName)); // як видно в DOM (з пробілами/регістром)
-
-    const pairs = [];
-    for (const [k, v] of url.searchParams.entries()) {
-      if (!groupKeysDecoded.has(k)) {
-        pairs.push(`${encodeURIComponent(k)}=${encodeURIComponent(v)}`);
-      }
-    }
-
-    groupsMeta.forEach(meta => {
-      const set = state[meta.domName];
-      if (!set || !set.size) return;
-
-      const keyEnc = encodeURIComponent(meta.domName);
-      const valueEnc = Array.from(set).map(v => encodeURIComponent(v)).join(',');
-      pairs.push(`${keyEnc}=${valueEnc}`);
-    });
-
-    url.search = pairs.join('&');
-
-    window.location.href = url.origin + url.pathname + url.search;
-  },
-
-  // set checkboxes according to state (both for desktop and modal)
-  setDOMFromState(rootWrapper, state) {
-    rootWrapper.find(Wick.PLPFilters.INPUTS).prop('checked', false);
-
-    Object.keys(state).forEach(groupDomName => {
-      state[groupDomName].forEach(originalValue => {
-        const want = originalValue;
-
-        const cand = rootWrapper.find(Wick.PLPFilters.INPUTS).filter(function () {
-          const i = $(this);
-          const valMatch = i.val() === want;
-          const g = i.closest(Wick.PLPFilters.GROUP);
-          const groupMatch = g.length ? (g.attr('data-filter') === groupDomName) : true;
-          return valMatch && groupMatch;
-        }).first();
-
-        if (cand.length) {
-          cand.prop('checked', true);
-        }
-      });
-    });
-  },
-
-  collectStateFromDOM(rootWrapper) {
-    const state = {};
-    rootWrapper.find(Wick.PLPFilters.INPUTS).filter(':checked').each((_, el) => {
-      const input = $(el);
-      const group = input.closest(Wick.PLPFilters.GROUP);
-      const groupDomName = group.attr('data-filter') || '';
-      if (!groupDomName) {
-        return;
-      }
-
-      const val = (input.val() || '').trim();
-      if (!val) {
-        return;
-      }
-
-      if (!state[groupDomName]) {
-        state[groupDomName] = new Set();
-      }
-      state[groupDomName].add(val);
-    });
-    return state;
-  },
-
-  // ===== APPLY
-  applyFromScopes(scopeForCollect, push) {
-    Wick.PLPFilters.appliedState = Wick.PLPFilters.collectStateFromDOM(scopeForCollect);
-    Wick.PLPFilters.writeStateToURL(Wick.PLPFilters.appliedState, !!push);
-  },
-
-  applyFilters(e) {
-    e.preventDefault();
-    const scope = $(Wick.PLPFilters.ROOT_WRAPPER).add($(Wick.PLPFiltersMobile.MODAL_SEL));
-    Wick.PLPFilters.applyFromScopes(scope, true);
-  },
-
-  // ===== RENDER
-  updateSelectedUI(rootWrapper) {
-    Wick.PLPChips.renderGroupCounters(rootWrapper);
-    Wick.PLPChips.renderChips(rootWrapper);
-    Wick.PLPFiltersMobile.updateMobileFilterInfo();
-  },
-
-  totalApplied() {
-    return Object.values(Wick.PLPFilters.appliedState).reduce((n, set) => n + set.size, 0);
-  },
-
-  // Wick.PLPUtils for appliedState
-  removeFromApplied(groupDomName, valOriginal) {
-    const st = Wick.PLPFilters.appliedState[groupDomName];
-    if (!st) {
-      return;
-    }
-    st.delete(valOriginal);
-    if (st.size === 0) {
-      delete Wick.PLPFilters.appliedState[groupDomName];
-    }
-  },
-
-  exportState() {
-    const out = {};
-    Object.keys(Wick.PLPFilters.appliedState).forEach((g) => {
-      out[g] = Array.from(Wick.PLPFilters.appliedState[g]);
-    });
-    return out;
-  }
-}
-
-$(function () {
-  Wick.PLPFilters.init();
-});

package/src/js/page/kitchen/sort-by.js

@@ -1,157 +0,0 @@
-var Wick = window.Wick || {};
-
-Wick.Sort = {
-  ROOT: '.page-KitchenPLPPage',
-  WRAP: '.sort',
-  DROPDOWN: '.sort-dd',
-  OPTION: '.sort-opt',
-  INFO: '.js-sort-info',
-  CHEVRON: '.sort__chevron',
-
-  TRIGGER_MOBILE: '.sort--mobile',
-  TRIGGER_DESKTOP_BTN: '.sort--desktop .sort-button',
-
-  MAP_VALUE_TO_LABEL: {
-    'relevance': 'Relevance',
-    'priceLow': 'Price (lowest first)',
-    'priceHigh': 'Price (highest first)'
-  },
-
-  init: function () {
-    const root = $(Wick.Sort.ROOT);
-    if (!root.length) {
-      return;
-    }
-
-    root.on('click', Wick.Sort.TRIGGER_MOBILE, (e) => {
-      if ($(e.target).closest(Wick.Sort.DROPDOWN).length) {
-        return;
-      }
-      e.preventDefault();
-      Wick.Sort.toggle($(e.currentTarget));
-    });
-
-    root.on('click', Wick.Sort.TRIGGER_DESKTOP_BTN, (e) => {
-      e.preventDefault();
-      Wick.Sort.toggle($(e.currentTarget).closest(Wick.Sort.WRAP));
-    });
-
-    root.on('keydown', `${Wick.Sort.TRIGGER_MOBILE}, ${Wick.Sort.TRIGGER_DESKTOP_BTN}`, (e) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        Wick.Sort.toggle($(e.currentTarget).closest(Wick.Sort.WRAP));
-      }
-    });
-
-    root.on('click', Wick.Sort.OPTION, (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      const opt = $(e.currentTarget);
-      const value = opt.data('value');
-      Wick.Sort.updateSortParamInURL(value);
-    });
-
-    $(document).on('click', (e) => {
-      const open = $(`${Wick.Sort.WRAP}.is-open`);
-      if (!open.length) {
-        return;
-      }
-      if (!open.is(e.target) && open.has(e.target).length === 0) {
-        Wick.Sort.closeAll();
-      }
-    });
-
-    $(document).on('keydown', (e) => {
-      if (e.key === 'Escape') {
-        Wick.Sort.closeAll();
-      }
-    });
-
-    Wick.Sort.bootstrap();
-  },
-
-  updateSortParamInURL: function (value) {
-    const url = new URL(window.location.href);
-    const params = url.searchParams;
-
-    if (value === 'relevance') {
-      params.delete('sortBy');
-    } else {
-      params.set('sortBy', value);
-    }
-
-    url.search = params.toString();
-
-    window.location.href = url.toString();
-  },
-
-  toggle: function (wrap) {
-    const isOpen = wrap.hasClass('is-open');
-    Wick.Sort.closeAll();
-    if (!isOpen) {
-      wrap.addClass('is-open');
-      wrap.find(Wick.Sort.DROPDOWN).removeAttr('hidden');
-      Wick.Sort.setExpanded(wrap, true);
-
-      if (window.Wick && Wick.PLPFilters && typeof Wick.PLPFilters.closeAll === 'function') {
-        Wick.PLPFilters.closeAll();
-      }
-    }
-  },
-
-  close: function (wrap) {
-    wrap.removeClass('is-open');
-    wrap.find(Wick.Sort.DROPDOWN).attr('hidden', true);
-    Wick.Sort.setExpanded(wrap, false);
-  },
-
-  closeAll: function () {
-    const all = $(Wick.Sort.WRAP);
-    all.removeClass('is-open');
-    all.find(Wick.Sort.DROPDOWN).attr('hidden', true);
-    all.each((_, el) => Wick.Sort.setExpanded($(el), false));
-  },
-
-  bootstrap: function () {
-    const urlParams = new URLSearchParams(window.location.search);
-    const value = urlParams.get('sortBy') || 'relevance';
-    const label = Wick.Sort.valueToLabel(value);
-
-    $(Wick.Sort.WRAP).each((_, el) => {
-      const w = $(el);
-      w.find(Wick.Sort.OPTION)
-        .removeClass('is-active')
-        .filter(`[data-value="${value}"]`)
-        .addClass('is-active');
-    });
-
-    $(document).trigger('sort:change', { value, label });
-
-    $(Wick.Sort.INFO).text(label);
-  },
-
-  setExpanded: function (wrap, expanded) {
-    const btn = wrap.is('.sort--mobile') ? wrap : wrap.find('.sort-button').first();
-    if (btn.length) {
-      btn.attr('aria-expanded', expanded ? 'true' : 'false');
-    }
-  },
-
-  valueToLabel: function (value) {
-    return Wick.Sort.MAP_VALUE_TO_LABEL[value] || 'Relevance';
-  },
-  labelToValue: function (label) {
-    const entries = Object.entries(Wick.Sort.MAP_VALUE_TO_LABEL);
-    for (const [val, lab] of entries) {
-      if (lab.toLowerCase() === label.toString().toLowerCase()) {
-        return val;
-      }
-    }
-    return 'relevance';
-  }
-};
-
-$(function () {
-  Wick.Sort.init();
-});