@iris.interactive/handcook 2.6.5 → 2.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iris.interactive/handcook",
-  "version": "2.6.5",
+  "version": "2.6.8",
   "description": "The web cooking by IRIS Interactive",
   "main": "./public/scripts/index.js",
   "scripts": {

package/public/scripts/components/modal/modal.component.js

@@ -20,20 +20,18 @@ import './modal.component.scss';
 
 export class HcModal {
 
-	defaultOptions = {
-		src: '',
-		type: 'inline'
-	}
+	options = {};
 
 	constructor(elements = ElementEnum.modal, overrideOptions = {}) {
-		let options = {};
-		Object.assign(options, this.defaultOptions, overrideOptions);
 		document.querySelectorAll(elements).forEach(element => {
 			Fancybox.bind(element);
 			element.addEventListener('click', (e) => {
 				e.preventDefault();
-				options.src = options.src != '' ? options.src : (e.currentTarget.hasAttribute('href') ? e.currentTarget.getAttribute('href') : (e.currentTarget.hasAttribute('data-hc-src') ? e.currentTarget.dataset.hcSrc : ''));
-				Fancybox.show([options]);
+				this.initOptions();
+				Object.assign(this.options, overrideOptions);
+				this.options.src = this.options.src != '' ? this.options.src : (e.currentTarget.hasAttribute('href') ? e.currentTarget.getAttribute('href') : (e.currentTarget.hasAttribute('data-hc-src') ? e.currentTarget.dataset.hcSrc : ''));
+				this.options.parentEl = this.options.parentEl !== null ? document.querySelector(this.options.parentEl) : (e.currentTarget.hasAttribute('data-hc-modal-parent') ? document.querySelector(e.currentTarget.getAttribute('data-hc-modal-parent')) : '');
+				Fancybox.show([this.options]);
 			});
 		});
 	}
@@ -45,6 +43,14 @@ export class HcModal {
 	static close(all) {
 		Fancybox.close(all);
 	}
+
+	initOptions() {
+		this.options = {
+			src: '',
+			type: 'inline',
+			parentEl: null
+		};
+	}
 }
 
 const hc_modal = function (trigger, options) {

package/public/scripts/components/slider/slider.component.js

@@ -38,22 +38,55 @@ export class HcSlider {
 	}
 
 	setOptions() {
-		for (const option in this.options) {
-			const attr = this.slider.getAttribute('data-hc-' + option);
-			if (attr !== null) {
-				if (typeof option === "boolean") {
-					this.options[option] = attr !== false;
-				} else {
-					this.options[option] = attr;
-				}
-			}
-		}
-		const attr = this.slider.getAttribute('data-hc-autoplay');
+		const attr = this.slider.getAttribute('data-hc-slider-autoplay');
 		if (attr !== null) {
 			this.options['autoplay'] = {
 				delay: attr
 			}
 		}
+
+		const gap = this.slider.getAttribute('data-hc-slider-gap');
+		const slidesPerView = this.slider.getAttribute('data-hc-slider-slides-per-view');
+		if (gap !== null) {
+			this.options['spaceBetween'] = parseFloat(gap);
+		}
+		if (slidesPerView !== null) {
+			this.options['slidesPerView'] = parseFloat(slidesPerView);
+		}
+
+		const gapMedium = this.slider.getAttribute('data-hc-slider-gap-medium');
+		const slidesPerViewMedium = this.slider.getAttribute('data-hc-slider-slides-per-view-medium');
+		if (gapMedium !== null) {
+			this.options['breakpoints'][650]['spaceBetween'] = parseFloat(gapMedium);
+		}
+		if (slidesPerViewMedium !== null) {
+			this.options['breakpoints'][650]['slidesPerView'] = parseFloat(slidesPerViewMedium);
+		}
+
+		const gapLarge = this.slider.getAttribute('data-hc-slider-gap-large');
+		const slidesPerViewLarge = this.slider.getAttribute('data-hc-slider-slides-per-view-large');
+		if (gapLarge !== null) {
+			this.options['breakpoints']['1000']['spaceBetween'] = parseFloat(gapLarge);
+		}
+		if (slidesPerViewLarge !== null) {
+			this.options['breakpoints']['1000']['slidesPerView'] = parseFloat(slidesPerViewLarge);
+		}
+
+		const gapXlarge = this.slider.getAttribute('data-hc-slider-gap-xlarge');
+		const slidesPerViewXlarge = this.slider.getAttribute('data-hc-slider-slides-per-view-xlarge');
+		if (gapXlarge !== null) {
+			this.options['breakpoints']['1453']['spaceBetween'] = parseFloat(gapXlarge);
+		}
+		if (slidesPerViewXlarge !== null) {
+			this.options['breakpoints']['1453']['slidesPerView'] = parseFloat(slidesPerViewXlarge);
+		}
+
+		const freeMode = this.slider.getAttribute('data-hc-slider-free-mode');
+		if (freeMode !== null) {
+			this.options['freeMode'] = {
+				enabled: true
+			}
+		}
 	}
 
 	buildDom() {
@@ -66,15 +99,12 @@ export class HcSlider {
 
 		// On ajoute la classe swiper a notre slider,
 		// on crée la div wrapper et on insére les slider item dedans
-		this.slider.classList.add('swiper');
 		const wrapperElement = document.createElement("div");
 		wrapperElement.classList.add("swiper-wrapper");
-		this.slider.appendChild(wrapperElement);
-		this.slider.querySelectorAll('.swiper-wrapper').forEach(wrapper => {
-			items.forEach(item => {
-				wrapper.appendChild(item);
-			});
+		items.forEach(item => {
+			wrapperElement.appendChild(item);
 		});
+		this.slider.appendChild(wrapperElement);
 
 		// On ajout les différentes div utile en fonction des options passées
 		if (this.slider.hasAttribute('data-hc-slider-pagination')) {
@@ -114,7 +144,7 @@ export class HcSlider {
 
 	initOptions() {
 		this.options = {
-			slidesPerView: 'auto',
+			slidesPerView: "auto",
 			pagination: false,
 			navigation: false,
 			mousewheel: {
@@ -145,6 +175,11 @@ export class HcSlider {
 					swiper.$el.find('.swiper-slide-next').addClass('hc-slider-slide-next');
 					swiper.$el.find('.swiper-slide-prev').addClass('hc-slider-slide-prev');
 				}
+			},
+			breakpoints: {
+				650: {},
+				1000: {},
+				1453: {},
 			}
 		};
 	}

package/public/styles/scss/_variables.scss

@@ -89,6 +89,8 @@ $font-size-small: var(--iris--global--font-size-small);
 $font-size-small--rem: var(--iris--global--font-size-small--rem);
 $font-size-regular: $font-size;
 $font-size-regular--rem: $font-size--rem;
+$font-size-regular--small: var(--iris--global--font-size-regular--small);
+$font-size-regular--small--rem: var(--iris--global--font-size-regular--small--rem);
 $font-size-large: var(--iris--global--font-size-large);
 $font-size-large--rem: var(--iris--global--font-size-large--rem);
 $font-size-large--small: var(--iris--global--font-size-large--small);