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

package/build/js/page/kitchen/colour-swatches.js

@@ -1,6 +1,6 @@
-const Handlebars = require("hbsfy/runtime");
+const Handlebars = require('hbsfy/runtime');
 const markdown = require('helper-markdown');
- 
+
 import { arrayToObjectByIndex } from '../utils/array-utils';
 
 import price from '../../../components/kitchen/price.hbs';
@@ -8,156 +8,161 @@ import stripStickers from '../../../components/kitchen/strip-stickers.hbs';
 import slide from '../../../components/kitchen/slide.hbs';
 import infoIcon from '../../../components/info-icon.hbs';
 
-(function() {
-  const CLASSES = {
-    activeSwatch: 'colour-swatch--active',
-    hiddenSwatch: 'colour-swatch--hidden',
-  };
-
-  const SELECTORS = {
-    kitchenCardsContainer: '.kitchen-cards',
-    cardContainer: '.kitchen-card',
-    colourSwatch: '.colour-swatch',
-    moreSwatchesButton: '.swatch-more',
-    hiddenSwatch: '.colour-swatch--hidden',
-    activeSwatch: '.colour-swatch--active',
-    swatchesText: '.colour-swatches__text',
-    designText: '.kitchen-card__design',
-    finishesText: '.kitchen-card__finishes',
-    ctaLink: '.kitchen-card__cta a',
-    stripsContainer: '.kitchen-card__strips',
-    priceContainer: '.kitchen-card__price',
-    tooltip: '[data-toggle="tooltip"]',
-  };
-
-  let kitchenData = [];
-
-  Handlebars.registerPartial('info-icon', infoIcon);
-
-  Handlebars.registerHelper('markdown', markdown());
-  Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
-    if (operator === '||') {
-      return (v1 || v2) ? options.fn(this) : options.inverse(this);
+(function () {
+    const CLASSES = {
+        activeSwatch: 'colour-swatch--active',
+        hiddenSwatch: 'colour-swatch--hidden',
+    };
+
+    const SELECTORS = {
+        kitchenCardsContainer: '.kitchen-cards',
+        cardContainer: '.kitchen-card',
+        colourSwatch: '.colour-swatch',
+        moreSwatchesButton: '.swatch-more',
+        hiddenSwatch: '.colour-swatch--hidden',
+        activeSwatch: '.colour-swatch--active',
+        swatchesText: '.colour-swatches__text',
+        designText: '.kitchen-card__design',
+        finishesText: '.kitchen-card__finishes',
+        ctaLink: '.kitchen-card__cta a',
+        stripsContainer: '.kitchen-card__strips',
+        priceContainer: '.kitchen-card__price',
+        tooltip: '[data-toggle="tooltip"]',
+    };
+
+    let kitchenData = [];
+
+    Handlebars.registerPartial('info-icon', infoIcon);
+
+    Handlebars.registerHelper('markdown', markdown());
+    Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
+        if (operator === '||') {
+            return v1 || v2 ? options.fn(this) : options.inverse(this);
+        }
+    });
+    Handlebars.registerHelper('optimizeImageUrl', function (url, width) {
+        const queryParameters = `format=pjpg&auto=webp&quality=90&width=${width}`;
+        const connectSymbol = url.includes('?') ? '&' : '?';
+
+        return `${url}${connectSymbol}${queryParameters}`;
+    });
+    Handlebars.registerHelper('formatPrice', function (value) {
+        if (typeof value === 'number') {
+            return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        }
+
+        return value;
+    });
+
+    function normalizeKitchenData(kitchens) {
+        const transformedKitchens = kitchens.map((kitchen) => ({
+            ...kitchen,
+            colourDatas: arrayToObjectByIndex(kitchen.colourDatas),
+        }));
+
+        return arrayToObjectByIndex(transformedKitchens);
     }
-  });
-  Handlebars.registerHelper('optimizeImageUrl', function(url, width) {
-    const queryParameters = `format=pjpg&auto=webp&quality=90&width=${width}`
-    const connectSymbol = url.includes('?') ? '&' : '?'
-
-    return `${url}${connectSymbol}${queryParameters}`;
-  });
-  Handlebars.registerHelper('formatPrice', function (value) {
-    if (typeof value === 'number') {
-      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+
+    function transformStripStickerDataForHbs(stickers) {
+        return stickers.map((sticker) => ({
+            text: sticker.text,
+            background: sticker.backgroundColour,
+            text_colour: sticker.textColour,
+        }));
     }
 
-    return value;
-  });
-
-  function normalizeKitchenData(kitchens) {
-    const transformedKitchens = kitchens.map((kitchen) => ({
-      ...kitchen,
-      colourDatas: arrayToObjectByIndex(kitchen.colourDatas),
-    }));
-
-    return arrayToObjectByIndex(transformedKitchens);
-  };
-
-  function transformStripStickerDataForHbs(stickers) {
-    return stickers.map(sticker=> ({
-      text: sticker.text,
-      background: sticker.backgroundColour,
-      text_colour: sticker.textColour,
-    }));
-  }
-
-  function transformPriceDataForHbs(priceData) {
-    return {
-      price: priceData.price,
-      was_price: priceData.wasPrice,
-      finance_price: priceData.financePrice,
-      tooltip_text: priceData.tooltipText,
-      additional_text: priceData.additionalText,
-      price_offer: priceData.isPriceOffer
-    };
-  }
-
-  function updateSwiperView($cardSwiper, images, sticker) {
-    $cardSwiper.removeAllSlides();
-    const newSlidesHtml = slide({images, sticker});
-    $cardSwiper.appendSlide(newSlidesHtml);
-    $cardSwiper.slideTo(0, 0);
-  }
-  function updateSwatchesTextView($cardContainer, colourName) {
-    $cardContainer.find(SELECTORS.swatchesText).text(`in ${colourName}`)
-  }
-  function updateParametersView($cardContainer, design, finishes) {
-    const finishesText = finishes.join(', ');
-    const finishesLabel = (finishes.length > 1) ? 'finishes' : 'finish';
-
-    $cardContainer.find(SELECTORS.designText).text(`${design} design`)
-    $cardContainer.find(SELECTORS.finishesText).text(`${finishesText} ${finishesLabel}`)
-  }
-  function updateCTALink($cardContainer, url) {
-    $cardContainer.find(SELECTORS.ctaLink).attr('href', url)
-  }
-  function updateStickersView($cardContainer, stickersData) {
-    const updatedStickersData = transformStripStickerDataForHbs(stickersData);
-    const newStripStickersHtml = stripStickers({strip_stickers: updatedStickersData});
-
-    $cardContainer.find(SELECTORS.stripsContainer).html(newStripStickersHtml);
-  }
-
-  function updatePriceView($cardContainer, priceData) {
-    const updatedPriceData = transformPriceDataForHbs(priceData);
-    const newPriceHtml = price({price: updatedPriceData, small: true});
-
-    $cardContainer.find(SELECTORS.priceContainer).html(newPriceHtml);
-    $cardContainer.find(SELECTORS.tooltip).tooltip();
-  }
-
-  function handleMoreSwatchesClick() {
-    const $button = $(this);
-    $button.siblings(SELECTORS.hiddenSwatch).removeClass(CLASSES.hiddenSwatch);
-    $button.hide();
-    $(window).trigger('kitchenCardChanged');
-  }
-
-  function handleColourSwatchClick() {
-    const $swatch = $(this);
-    const $cardContainer = $swatch.closest(SELECTORS.cardContainer);
-    const $currentSwatchActive = $swatch.siblings(SELECTORS.activeSwatch);
-
-    const colourId = $swatch.data('id');
-    const kitchenId = $cardContainer.data('id');
-
-    const currentKitchenData = kitchenData[kitchenId];
-    const colourData = currentKitchenData.colourDatas[colourId];
-
-    const $cardSwiper = Wick.PLPCardSwiper[kitchenId];
-    
-    updatePriceView($cardContainer, colourData.priceData);
-    updateStickersView($cardContainer, colourData.stickers);
-    updateSwatchesTextView($cardContainer, colourData.colourSwatch.colourName);
-    updateSwiperView($cardSwiper, colourData.images, currentKitchenData.rangeStickers[0]);
-    updateParametersView($cardContainer, colourData.design, colourData.finishes);
-    updateCTALink($cardContainer, colourData.pdpUrl);
-
-    $currentSwatchActive.removeClass(CLASSES.activeSwatch);
-    $swatch.addClass(CLASSES.activeSwatch);
-    $(window).trigger('kitchenCardChanged');
-  }
-
-  function initKitchenPLP(_, PLPKitchenData) {
-    const $kitchenCardsContainer = $(SELECTORS.kitchenCardsContainer);
-
-    kitchenData = normalizeKitchenData(PLPKitchenData);
-
-    $kitchenCardsContainer.on('click', SELECTORS.colourSwatch, handleColourSwatchClick);
-    $kitchenCardsContainer.on('click', SELECTORS.moreSwatchesButton, handleMoreSwatchesClick);
-  }
-
-  $(document).ready(function() {
-    $(document).on('initKitchenPLP', initKitchenPLP);
-  });
-})()
+    function transformPriceDataForHbs(priceData) {
+        return {
+            price: priceData.price,
+            was_price: priceData.wasPrice,
+            finance_price: priceData.financePrice,
+            tooltip_text: priceData.tooltipText,
+            additional_text: priceData.additionalText,
+            price_offer: priceData.isPriceOffer,
+        };
+    }
+
+    function updateSwiperView($cardSwiper, images, sticker, pdpUrl) {
+        $cardSwiper.removeAllSlides();
+        const newSlidesHtml = slide({ images, sticker, pdpUrl });
+        $cardSwiper.appendSlide(newSlidesHtml);
+        $cardSwiper.slideTo(0, 0);
+    }
+    function updateSwatchesTextView($cardContainer, colourName) {
+        $cardContainer.find(SELECTORS.swatchesText).text(`in ${colourName}`);
+    }
+    function updateParametersView($cardContainer, design, finishes) {
+        const finishesText = finishes.join(', ');
+        const finishesLabel = finishes.length > 1 ? 'finishes' : 'finish';
+
+        $cardContainer.find(SELECTORS.designText).text(`${design} design`);
+        $cardContainer.find(SELECTORS.finishesText).text(`${finishesText} ${finishesLabel}`);
+    }
+    function updateCTALink($cardContainer, url) {
+        $cardContainer.find(SELECTORS.ctaLink).attr('href', url);
+    }
+    function updateStickersView($cardContainer, stickersData) {
+        const updatedStickersData = transformStripStickerDataForHbs(stickersData);
+        const newStripStickersHtml = stripStickers({ strip_stickers: updatedStickersData });
+
+        $cardContainer.find(SELECTORS.stripsContainer).html(newStripStickersHtml);
+    }
+
+    function updatePriceView($cardContainer, priceData) {
+        const updatedPriceData = transformPriceDataForHbs(priceData);
+        const newPriceHtml = price({ price: updatedPriceData, small: true });
+
+        $cardContainer.find(SELECTORS.priceContainer).html(newPriceHtml);
+        $cardContainer.find(SELECTORS.tooltip).tooltip();
+    }
+
+    function handleMoreSwatchesClick() {
+        const $button = $(this);
+        $button.siblings(SELECTORS.hiddenSwatch).removeClass(CLASSES.hiddenSwatch);
+        $button.hide();
+        $(window).trigger('kitchenCardChanged');
+    }
+
+    function handleColourSwatchClick() {
+        const $swatch = $(this);
+        const $cardContainer = $swatch.closest(SELECTORS.cardContainer);
+        const $currentSwatchActive = $swatch.siblings(SELECTORS.activeSwatch);
+
+        const colourId = $swatch.data('id');
+        const kitchenId = $cardContainer.data('id');
+
+        const currentKitchenData = kitchenData[kitchenId];
+        const colourData = currentKitchenData.colourDatas[colourId];
+
+        const $cardSwiper = Wick.PLPCardSwiper[kitchenId];
+
+        updatePriceView($cardContainer, colourData.priceData);
+        updateStickersView($cardContainer, colourData.stickers);
+        updateSwatchesTextView($cardContainer, colourData.colourSwatch.colourName);
+        updateSwiperView(
+            $cardSwiper,
+            colourData.images,
+            currentKitchenData.rangeStickers[0],
+            colourData.pdpUrl
+        );
+        updateParametersView($cardContainer, colourData.design, colourData.finishes);
+        updateCTALink($cardContainer, colourData.pdpUrl);
+
+        $currentSwatchActive.removeClass(CLASSES.activeSwatch);
+        $swatch.addClass(CLASSES.activeSwatch);
+        $(window).trigger('kitchenCardChanged');
+    }
+
+    function initKitchenPLP(_, PLPKitchenData) {
+        const $kitchenCardsContainer = $(SELECTORS.kitchenCardsContainer);
+
+        kitchenData = normalizeKitchenData(PLPKitchenData);
+
+        $kitchenCardsContainer.on('click', SELECTORS.colourSwatch, handleColourSwatchClick);
+        $kitchenCardsContainer.on('click', SELECTORS.moreSwatchesButton, handleMoreSwatchesClick);
+    }
+
+    $(document).ready(function () {
+        $(document).on('initKitchenPLP', initKitchenPLP);
+    });
+})();

package/build/js/page/quick-filter.js

@@ -1,108 +1,111 @@
 $(document).ready(function () {
-  const SELECTORS = {
-    quickFilter: '.quick-filter',
-    swiperContainer: '.swiper-container',
-    pagination: '.swiper-pagination',
-    nextButton: '.quick-filter__next-btn',
-    prevButton: '.quick-filter__prev-btn',
-  };
-
-  const CSS_CLASSES = {
-    locked: 'quick-filter--locked',
-    colourSwatch: 'quick-filter--colour',
-    textOnly: 'quick-filter--text',
-    bulletClass: 'swiper-pagination-bullet',
-    bulletActiveClass: 'swiper-pagination-bullet-active'
-  };
-
-  const CONFIG = {
-    speed: 400,
-    defaultSpaceBetween: 16,
-    textOnlySpaceBetween: 8,
-    resizeDebounceTime: 250,
-    breakpoints: {
-      mobile: 767,
-      mobileSpaceBetween: 8,
-    },
-  };
-
-  function shouldSkipSlider($slider) {
-    return $slider.hasClass(CSS_CLASSES.colourSwatch);
-  }
-
-  function getSpaceBetween($slider) {
-    const isTextOnly = $slider.hasClass(CSS_CLASSES.textOnly);
-    return isTextOnly ? CONFIG.textOnlySpaceBetween : CONFIG.defaultSpaceBetween;
-  }
-
-  function getSwiperConfig($pagination, $nextBtn, $prevBtn, spaceBetween) {
-    return {
-      speed: CONFIG.speed,
-      spaceBetween: spaceBetween,
-      slidesPerView: 'auto',
-      watchOverflow: true,
-      pagination: {
-        el: $pagination[0],
-        type: 'bullets',
-        clickable: true,
-        bulletClass: CSS_CLASSES.bulletClass,
-        bulletActiveClass: CSS_CLASSES.bulletActiveClass,
-      },
-      navigation: {
-        nextEl: $nextBtn[0],
-        prevEl: $prevBtn[0],
-      },
-      breakpoints: {
-        [CONFIG.breakpoints.mobile]: {
-          spaceBetween: CONFIG.breakpoints.mobileSpaceBetween,
-        },
-      },
-      on: {
-        lock: handleLock,
-        unlock: handleUnlock,
-      },
+    const SELECTORS = {
+        quickFilter: '.quick-filter',
+        swiperContainer: '.swiper-container',
+        pagination: '.swiper-pagination',
+        nextButton: '.quick-filter__next-btn',
+        prevButton: '.quick-filter__prev-btn',
     };
-  }
-
-  function handleLock() {
-    this.el.parentElement.classList.add(CSS_CLASSES.locked);
-  }
-
-  function handleUnlock() {
-    this.el.parentElement.classList.remove(CSS_CLASSES.locked);
-  }
-
-  function initializeSwiper($slider) {
-    const $container = $slider.find(SELECTORS.swiperContainer);
-    const $pagination = $slider.find(SELECTORS.pagination);
-    const $nextBtn = $slider.find(SELECTORS.nextButton);
-    const $prevBtn = $slider.find(SELECTORS.prevButton);
-
-    const spaceBetween = getSpaceBetween($slider);
-    const config = getSwiperConfig($pagination, $nextBtn, $prevBtn, spaceBetween);
-
-    const swiper = new Swiper($container[0], config);
 
-    bindResizeHandler(swiper);
-  }
-
-  function bindResizeHandler(swiper) {
-    $(window).on('resize', _.debounce(function () {
-      swiper.update();
-    }, CONFIG.resizeDebounceTime));
-  }
-
-  function init() {
-    $(SELECTORS.quickFilter).each(function (index, slider) {
-      const $slider = $(slider);
-
-      if (shouldSkipSlider($slider)) {
-        return;
-      }
+    const CSS_CLASSES = {
+        locked: 'quick-filter--locked',
+        colourSwatch: 'quick-filter--colour',
+        textOnly: 'quick-filter--text',
+        bulletClass: 'swiper-pagination-bullet',
+        bulletActiveClass: 'swiper-pagination-bullet-active',
+    };
 
-      initializeSwiper($slider);
-    });
-  }
+    const CONFIG = {
+        speed: 400,
+        defaultSpaceBetween: 16,
+        textOnlySpaceBetween: 8,
+        resizeDebounceTime: 250,
+        breakpoints: {
+            mobile: 767,
+            mobileSpaceBetween: 8,
+        },
+    };
 
-  init();
-});
+    function shouldSkipSlider($slider) {
+        return $slider.hasClass(CSS_CLASSES.colourSwatch);
+    }
+
+    function getSpaceBetween($slider) {
+        const isTextOnly = $slider.hasClass(CSS_CLASSES.textOnly);
+        return isTextOnly ? CONFIG.textOnlySpaceBetween : CONFIG.defaultSpaceBetween;
+    }
+
+    function getSwiperConfig($pagination, $nextBtn, $prevBtn, spaceBetween) {
+        return {
+            speed: CONFIG.speed,
+            spaceBetween: spaceBetween,
+            slidesPerView: 'auto',
+            watchOverflow: true,
+            pagination: {
+                el: $pagination[0],
+                type: 'bullets',
+                clickable: true,
+                bulletClass: CSS_CLASSES.bulletClass,
+                bulletActiveClass: CSS_CLASSES.bulletActiveClass,
+            },
+            navigation: {
+                nextEl: $nextBtn[0],
+                prevEl: $prevBtn[0],
+            },
+            breakpoints: {
+                [CONFIG.breakpoints.mobile]: {
+                    spaceBetween: CONFIG.breakpoints.mobileSpaceBetween,
+                },
+            },
+            on: {
+                lock: handleLock,
+                unlock: handleUnlock,
+            },
+        };
+    }
+
+    function handleLock() {
+        this.el.parentElement.classList.add(CSS_CLASSES.locked);
+    }
+
+    function handleUnlock() {
+        this.el.parentElement.classList.remove(CSS_CLASSES.locked);
+    }
+
+    function initializeSwiper($slider) {
+        const $container = $slider.find(SELECTORS.swiperContainer);
+        const $pagination = $slider.find(SELECTORS.pagination);
+        const $nextBtn = $slider.find(SELECTORS.nextButton);
+        const $prevBtn = $slider.find(SELECTORS.prevButton);
+
+        const spaceBetween = getSpaceBetween($slider);
+        const config = getSwiperConfig($pagination, $nextBtn, $prevBtn, spaceBetween);
+
+        const swiper = new Swiper($container[0], config);
+
+        bindResizeHandler(swiper);
+    }
+
+    function bindResizeHandler(swiper) {
+        $(window).on(
+            'resize',
+            _.debounce(function () {
+                swiper.update();
+            }, CONFIG.resizeDebounceTime)
+        );
+    }
+
+    function init() {
+        $(SELECTORS.quickFilter).each(function (index, slider) {
+            const $slider = $(slider);
+
+            if (shouldSkipSlider($slider)) {
+                return;
+            }
+
+            initializeSwiper($slider);
+        });
+    }
+
+    init();
+});