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

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

package/src/page_empty-shared-project-list-bicester-hub.html

@@ -6,5 +6,9 @@
 <main>
     {{> shopping-list-bicester-hub emptyShopList="true" }}
 </main>
+<script defer src="./js/share-project-list.min.js"></script>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/saving-shopping-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_empty-shopping-list_guest.html

@@ -5,5 +5,6 @@
 <main>
     {{> shopping-list emptyShopList=true pagination=false}}
 </main>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_kitchen-plp.html

@@ -11,8 +11,8 @@
         </main>
     {{/content}}
     {{#content "foot" mode="append"}}
-        {{> kitchen/filter-modal }}
-        <script src="./js/page/accordion.js"></script>
+        {{> kitchen/filter-modal isKitchenMode=true modalTitle="Filter by" }}
         <script src="./js/kitchen/kitchen-plp.min.js"></script>
+        <script src="./js/plp-filters.min.js"></script>
     {{/content}}
 {{/extend}}

package/src/page_my-account-installer.html

@@ -33,7 +33,7 @@
               subtitle=my_account.user.email
           }}
           {{> my-account/discount
-              discountSrc=my_account.installer.discount
+              discountText=my_account.installer.discountText
               installer=true
               title="In-store discount"
               code=my_account.discount

package/src/page_my-account-trade-pro-carousel-double.html

@@ -0,0 +1,127 @@
+{{#extend
+  "my-account-v2"
+  iconUserClass=my_account.tradepro.icons.tradeproID
+  dataBreadcrumbs=my_account.tradepro.breadcrumbs
+  pageClass="page_my-account_new"
+  title="My Account Trade Pro Carousel Double"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  tradepro-nav=true
+  mainClass="my-account"
+  switch-vat=true
+}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav my-account-menu-new
+          menu=my_account.tradepro.menu
+          active-index=0
+          page-name=my_account.tradepro.menu.[0].title
+          }}
+    </div>
+  </div>
+</div>
+<div class="account-summary">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        <div class="account-summary__wrapper d-none d-sm-grid mb-3">
+          {{> my-account/greetings
+              name=my_account.user.name
+              subtitle=my_account.user.email
+          }}
+        </div>
+        {{#extend "my-account/cards-swap"}}
+          {{#content "card1"}}
+            <div class="account-summary__wrapper account-summary__wrapper--secondary account-summary__wrapper--double">
+              {{> my-account/greetings
+                  secondary=true
+                  mod="d-sm-none"
+                  name=my_account.user.name
+                  subtitle=my_account.user.email
+              }}
+              {{> my-account/discount
+                  secondary=true
+                  discountText=my_account.tradepro2.discountText
+                  title="In-store discount"
+                  code=my_account.discount
+              }}
+              {{> my-account/clipboard-code-card
+                  secondary=true
+                  mod="trade-pro-id"
+                  icon=my_account.tradepro.icons.tradeproID
+                  title="TradePro ID"
+                  code=my_account.tradeProId
+              }}
+            </div>
+          {{/content}}
+          {{#content "card2"}}
+            <div class="account-summary__wrapper">
+              {{> my-account/greetings
+                  mod="d-sm-none"
+                  name=my_account.user.name
+                  subtitle=my_account.user.email
+              }}
+              {{> my-account/discount
+                  discountText=my_account.tradepro.discountText
+                  title="In-store discount"
+                  code=my_account.discount
+              }}
+              {{> my-account/clipboard-code-card
+                  mod="trade-pro-id"
+                  icon=my_account.tradepro.icons.tradeproID
+                  title="TradePro ID"
+                  code=my_account.tradeProId
+              }}
+              {{> my-account/clipboard-code-card
+                  mod="discount-code"
+                  icon="fas fa-badge-percent"
+                  title="Online discount code"
+                  code=my_account.tradepro.discountCode
+              }}
+            </div>
+          {{/content}}
+        {{/extend}}
+        {{> my-account/active-orders/list-orders
+          switch-vat=true
+          title=my_account.tradepro.activeOrders.sectionTitle
+          linkText='View all orders'
+          orders=my_account.tradepro.activeOrders.orderList
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/menu-items
+          items=my_account.tradepro.menu
+          }}
+    </div>
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/saving-totaliser this-last-year=true}}
+    </div>
+  </div>
+</div>
+<div class="account-actions">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        {{> my-account/user-account-actions mod="d-sm-none"}}
+        {{> my-account/contact-us contacts=my_account.contacts}}
+      </div>
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_my-account-trade-pro-carousel.html

@@ -0,0 +1,134 @@
+{{#extend
+  "my-account-v2"
+  iconUserClass=my_account.tradepro.icons.tradeproID
+  dataBreadcrumbs=my_account.tradepro.breadcrumbs
+  pageClass="page_my-account_new"
+  title="My Account Trade Pro Carousel"
+  pageMyAcc=true
+  myAccV2=true
+  isLoggedIn=true
+  tradepro-nav=true
+  mainClass="my-account"
+  switch-vat=true
+}}
+{{#content "main"}}
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/mobile-nav my-account-menu-new
+          menu=my_account.tradepro.menu
+          active-index=0
+          page-name=my_account.tradepro.menu.[0].title
+          }}
+    </div>
+  </div>
+</div>
+<div class="account-summary">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        <div class="account-summary__wrapper d-none d-sm-grid mb-3">
+          {{> my-account/greetings
+              name=my_account.user.name
+              subtitle=my_account.user.email
+          }}
+        </div>
+        {{#extend "my-account/cards-swap"}}
+          {{#content "card1"}}
+            <div class="account-summary__wrapper account-summary__wrapper--secondary">
+              {{> my-account/greetings
+                  mod="d-sm-none"
+                  secondary=true
+                  name=my_account.user.name
+                  subtitle=my_account.user.email
+              }}
+              {{> my-account/discount
+                  secondary=true
+                  discountText=my_account.tradepro2.discountText
+                  title="In-store discount"
+                  code=my_account.discount
+              }}
+              {{> my-account/clipboard-code-card
+                  secondary=true
+                  mod="trade-pro-id"
+                  icon=my_account.tradepro.icons.tradeproID
+                  title="TradePro ID"
+                  code=my_account.tradeProId
+              }}
+              {{> my-account/clipboard-code-card
+                  secondary=true
+                  mod="discount-code"
+                  icon="fas fa-badge-percent"
+                  title="Online discount code"
+                  code=my_account.tradepro.discountCode
+              }}
+            </div>
+          {{/content}}
+          {{#content "card2"}}
+            <div class="account-summary__wrapper">
+              {{> my-account/greetings
+                  mod="d-sm-none"
+                  name=my_account.user.name
+                  subtitle=my_account.user.email
+              }}
+              {{> my-account/discount
+                  discountText=my_account.tradepro.discountText
+                  title="In-store discount"
+                  code=my_account.discount
+              }}
+              {{> my-account/clipboard-code-card
+                  mod="trade-pro-id"
+                  icon=my_account.tradepro.icons.tradeproID
+                  title="TradePro ID"
+                  code=my_account.tradeProId
+              }}
+              {{> my-account/clipboard-code-card
+                  mod="discount-code"
+                  icon="fas fa-badge-percent"
+                  title="Online discount code"
+                  code=my_account.tradepro.discountCode
+              }}
+            </div>
+          {{/content}}
+        {{/extend}}
+        {{> my-account/active-orders/list-orders
+          switch-vat=true
+          title=my_account.tradepro.activeOrders.sectionTitle
+          linkText='View all orders'
+          orders=my_account.tradepro.activeOrders.orderList
+        }}
+      </div>
+    </div>
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/menu-items
+          items=my_account.tradepro.menu
+          }}
+    </div>
+  </div>
+</div>
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+      {{> my-account/saving-totaliser this-last-year=true}}
+    </div>
+  </div>
+</div>
+<div class="account-actions">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        {{> my-account/user-account-actions mod="d-sm-none"}}
+        {{> my-account/contact-us contacts=my_account.contacts}}
+      </div>
+    </div>
+  </div>
+</div>
+{{/content}}
+{{#content "foot" mode="append"}}
+<script defer src="./js/my-account.min.js"></script>
+{{/content}}
+{{/extend}}

package/src/page_my-account-trade-pro.html

@@ -33,7 +33,7 @@
               subtitle=my_account.user.email
           }}
           {{> my-account/discount
-              discountSrc=my_account.tradepro.discount
+              discountText=my_account.tradepro.discountText
               title="In-store discount"
               code=my_account.discount
           }}

package/src/page_my-shopping-list-add-notes.html

@@ -18,5 +18,6 @@
     copy-id=true
   }}
 </main>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_my-shopping-list-energy.html

@@ -15,5 +15,6 @@
 {{/content}}
 <script defer src="./js/page/project-list.js"></script>
 <script defer src="./js/energy-efficiency.min.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_my-shopping-list-hide-download.html

@@ -3,10 +3,11 @@
 {{/content}}
 {{#content "body"}}
 <main>
-    {{> shopping-list emptyShopList=false isUserRegister=true pagination=true note=true hideDownload=true}}
+    {{> shopping-list emptyShopList=false isUserRegister=true pagination=true note=true}}
 </main>
 {{/content}}
 {{#content "foot" mode="append"}}
-<script src="./js/project-list-note.min.js"></script>
+<script defer src="./js/project-list.min.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_my-shopping-list-pdf.html

@@ -3,5 +3,7 @@
 {{/content}}
 {{#content "body"}}
   {{> shopping-list-pdf}}
+
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_my-shopping-list-saved-ref.html

@@ -6,5 +6,6 @@
     {{> shopping-list emptyShopList=false isUserRegister=true pagination=true ref-value=true}}
 </main>
 <script defer src="./js/page/project-list.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{/extend}}

package/src/page_my-shopping-list-wisdom-oos-registered.html

@@ -6,6 +6,7 @@
     {{> shopping-list emptyShopList=false isUserRegister=true pagination=true ref=true wisdom=true available=0}}
 </main>
 <script defer src="./js/page/project-list.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{#content "foot" mode="append"}}
     {{> wisdom-modal available=0 current=5}}

package/src/page_my-shopping-list-wisdom-oos.html

@@ -6,6 +6,7 @@
     {{> shopping-list emptyShopList=false isUserRegister=false pagination=true ref=true wisdom=true available=0}}
 </main>
 <script defer src="./js/page/project-list.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{#content "foot" mode="append"}}
     {{> wisdom-modal available=0 current=5}}

package/src/page_my-shopping-list-wisdom-partial-registered.html

@@ -6,6 +6,7 @@
     {{> shopping-list emptyShopList=false isUserRegister=true pagination=true ref=true wisdom=true available=10}}
 </main>
 <script defer src="./js/page/project-list.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{#content "foot" mode="append"}}
     {{> wisdom-modal available=12 current=15}}

package/src/page_my-shopping-list-wisdom-registered.html

@@ -6,6 +6,7 @@
     {{> shopping-list emptyShopList=false isUserRegister=true pagination=true ref=true wisdom=true available=10}}
 </main>
 <script defer src="./js/page/project-list.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{#content "foot" mode="append"}}
     {{> wisdom-modal available=12 current=5}}

package/src/page_my-shopping-list-wisdom.html

@@ -6,6 +6,7 @@
     {{> shopping-list emptyShopList=false isUserRegister=false pagination=true ref=true wisdom=true available=10}}
 </main>
 <script defer src="./js/page/project-list.js"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{#content "foot" mode="append"}}
     {{> wisdom-modal available=12 current=5}}

package/src/page_my-shopping-list.html

@@ -9,5 +9,6 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.1/html2pdf.bundle.min.js"
         integrity="sha512-1qLXyA3x0VSWeM+8vOotn6+KIRGdcQ8QMzsNeDXmdJsUAnoDGjzlxzqAuUGJGrGkGrtOrq4buDoAHxR89D9PWA=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script defer src="./js/share-project-list.min.js"></script>
 {{/content}}
 {{/extend}}