@iris.interactive/handcook 2.6.12 → 2.6.15

package/README.md

@@ -1,5 +1,5 @@
 # Welcome to HandCook 👨‍🍳
-![Version](https://img.shields.io/badge/version-2.6.3-blue.svg?cacheSeconds=2592000)
+![Version](https://img.shields.io/badge/version-2.6.15-blue.svg?cacheSeconds=2592000)
 ![Prerequisite](https://img.shields.io/badge/node-%3E%3D%2012.14.0-blue.svg)
 [![License: UNLICENSED](https://img.shields.io/badge/License-UNLICENSED-yellow.svg)](#)
 [![Twitter: captain\_iris](https://img.shields.io/twitter/follow/captain\_iris.svg?style=social)](https://twitter.com/captain\_iris)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iris.interactive/handcook",
-  "version": "2.6.12",
+  "version": "2.6.15",
   "description": "The web cooking by IRIS Interactive",
   "main": "./public/scripts/index.js",
   "scripts": {
@@ -35,7 +35,7 @@
   "dependencies": {
     "@fancyapps/ui": "^4.0.22",
     "bootstrap": "^5.1.3",
-    "swiper": "^8.0.6",
+    "swiper": "8.0.6",
     "tippy.js": "^6.3.7",
     "vanilla-lazyload": "^17.6.1"
   }

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

@@ -46,13 +46,24 @@ export class HcCollapse {
 			});
 		});
 		document.querySelectorAll('[data-hc-collapse]').forEach(trigger => {
+			const triggerEls = document.querySelectorAll(`[data-hc-collapse-trigger="${trigger.getAttribute('id')}"]`);
 			trigger.addEventListener('hide.bs.collapse', (e) => {
+				triggerEls.forEach(triggerEl => {
+					if (triggerEl.classList.contains('active')) {
+						triggerEl.classList.remove('active');
+					}
+				});
 				trigger.dispatchEvent(this.hideEvent);
 			});
 			trigger.addEventListener('hidden.bs.collapse', (e) => {
 				trigger.dispatchEvent(this.hiddenEvent);
 			});
 			trigger.addEventListener('show.bs.collapse', (e) => {
+				triggerEls.forEach(triggerEl => {
+					if (!triggerEl.classList.contains('active')) {
+						triggerEl.classList.add('active');
+					}
+				});
 				trigger.dispatchEvent(this.showEvent);
 			});
 			trigger.addEventListener('shown.bs.collapse', (e) => {
@@ -73,4 +84,4 @@ export class HcCollapse {
 const hc_collapse = function (trigger) {
 	return new HcCollapse(trigger);
 };
-export default hc_collapse;
+export default hc_collapse;

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

@@ -16,13 +16,16 @@
 
 import LazyLoad from "vanilla-lazyload";
 
-const hc_lazyload = function() {
-	return new LazyLoad({
+const hc_lazyload = function (options = {}) {
+
+	options = Object.assign({
 		elements_selector: '[data-hc-src], [data-hc-bg], [data-hc-bg-hidpi]',
 		data_src: 'hc-src',
 		data_bg: 'hc-bg',
 		data_bg_hidpi: 'hc-bg-hidpi'
-	});
+	}, options)
+
+	return new LazyLoad(options);
 }
 
 export default hc_lazyload;

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

@@ -27,23 +27,19 @@ export class HcModal {
 	constructor(elements = ElementEnum.modal, overrideOptions = {}) {
 		this.createEvent();
 		document.querySelectorAll(elements).forEach(element => {
-			Fancybox.bind(element);
-			element.addEventListener('click', (e) => {
-				e.preventDefault();
-				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], {
-					on: {
-						reveal: () => {
-							document.dispatchEvent(this.showEvent);
-						},
-						closing: () => {
-							document.dispatchEvent(this.hideEvent);
-						}
+			this.initOptions();
+			Object.assign(this.options, overrideOptions);
+			this.options.src = this.options.src != '' ? this.options.src : (element.hasAttribute('href') ? element.getAttribute('href') : (element.hasAttribute('data-hc-src') ? element.dataset.hcSrc : ''));
+			this.options.parentEl = this.options.parentEl !== null ? document.querySelector(this.options.parentEl) : (element.hasAttribute('data-hc-modal-parent') ? document.querySelector(element.getAttribute('data-hc-modal-parent')) : '');
+			Fancybox.bind(elements, this.options, {
+				on: {
+					reveal: () => {
+						document.dispatchEvent(this.showEvent);
+					},
+					closing: () => {
+						document.dispatchEvent(this.hideEvent);
 					}
-				});
+				}
 			});
 		});
 	}

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

@@ -22,6 +22,19 @@ export class HcSlider {
 	slider;
 	instances = [];
 
+	breakpoints = [{
+		name: "medium",
+		value: 650
+	},
+		{
+			name: "large",
+			value: 1000
+		},
+		{
+			name: "xlarge",
+			value: 1453
+		}];
+
 	// Options
 	options = {};
 
@@ -54,32 +67,21 @@ export class HcSlider {
 			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);
-		}
+		let breakpointOptions = {};
+		this.breakpoints.forEach(breakpoint => {
+			const gap = this.slider.getAttribute(`data-hc-slider-gap-${breakpoint.name}`);
+			const slidesPerView = this.slider.getAttribute(`data-hc-slider-slides-per-view-${breakpoint.name}`);
+			if (gap !== null || slidesPerView !== null) {
+				breakpointOptions[breakpoint.value] = {};
+				if (gap !== null) {
+					breakpointOptions[breakpoint.value]['spaceBetween'] = parseFloat(gap);
+				}
+				if (slidesPerView !== null) {
+					breakpointOptions[breakpoint.value]['slidesPerView'] = parseFloat(slidesPerView);
+				}
+			}
+		});
+		this.options.breakpoints = breakpointOptions;
 
 		const freeMode = this.slider.getAttribute('data-hc-slider-free-mode');
 		if (freeMode !== null) {
@@ -87,6 +89,27 @@ export class HcSlider {
 				enabled: true
 			}
 		}
+
+		if (this.slider.hasAttribute('data-hc-slider-pagination')) {
+			this.options['pagination'] = {
+				el: '.hc-slider-pagination',
+				type: 'bullets',
+				clickable: true,
+				bulletClass: 'hc-slider-pagination-bullet',
+				clickableClass: 'hc-slider-pagination-clickable',
+				currentClass: 'hc-slider-pagination-current',
+				bulletActiveClass: 'hc-slider-pagination-bullet-active'
+			};
+		}
+		if (this.slider.hasAttribute('data-hc-slider-arrows')) {
+			const suffix = this.slider.getAttribute('data-hc-slider-arrows');
+			this.options['navigation'] = {
+				nextEl: `.hc-slider-button-next${suffix}`,
+				prevEl: `.hc-slider-button-prev${suffix}`,
+				disabledClass: `hc-slider-button-disabled${suffix}`,
+				hiddenClass: `hc-slider-button-hidden${suffix}`
+			};
+		}
 	}
 
 	buildDom() {
@@ -107,38 +130,31 @@ export class HcSlider {
 		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')) {
-
-			const paginationElement = document.createElement("div");
-			paginationElement.classList.add("hc-slider-pagination");
-			this.slider.appendChild(paginationElement);
-
-			this.options['pagination'] = {
-				el: '.hc-slider-pagination',
-				type: 'bullets',
-				clickable: true,
-				bulletClass: 'hc-slider-pagination-bullet',
-				clickableClass: 'hc-slider-pagination-clickable',
-				currentClass: 'hc-slider-pagination-current',
-				bulletActiveClass: 'hc-slider-pagination-bullet-active'
-			};
+		// et si les elements n'existent pas déjà
+		if (this.options.pagination !== false) {
+
+			const el = this.slider.querySelectorAll(this.options.pagination.el);
+			if (el.length === 0) {
+				const paginationElement = document.createElement("div");
+				paginationElement.classList.add(this.options.pagination.el.substr(1));
+				this.slider.appendChild(paginationElement);
+			}
 		}
-		if (this.slider.hasAttribute('data-hc-slider-arrows')) {
+		if (this.options.navigation !== false) {
 
-			const buttonPrev = document.createElement("div");
-			buttonPrev.classList.add("hc-slider-button-prev");
-			this.slider.appendChild(buttonPrev);
-
-			const buttonNext = document.createElement("div");
-			buttonNext.classList.add("hc-slider-button-next");
-			this.slider.appendChild(buttonNext);
+			const prevEl = this.slider.querySelectorAll(this.options.navigation.prevEl);
+			if (prevEl.length === 0) {
+				const buttonPrev = document.createElement("div");
+				buttonPrev.classList.add(this.options.navigation.prevEl.substr(1));
+				this.slider.appendChild(buttonPrev);
+			}
 
-			this.options['navigation'] = {
-				nextEl: '.hc-slider-button-next',
-				prevEl: '.hc-slider-button-prev',
-				disabledClass: 'hc-slider-button-disabled',
-				hiddenClass: 'hc-slider-button-hidden',
-			};
+			const nextEl = this.slider.querySelectorAll(this.options.navigation.nextEl);
+			if (nextEl.length === 0) {
+				const buttonNext = document.createElement("div");
+				buttonNext.classList.add(this.options.navigation.nextEl.substr(1));
+				this.slider.appendChild(buttonNext);
+			}
 		}
 	}
 
@@ -157,6 +173,7 @@ export class HcSlider {
 
 					// layout
 					swiper.$el.find('.swiper-wrapper').addClass('hc-slider-wrapper');
+					swiper.$el.addClass('hc-slider-initialized');
 
 					// slide item
 					swiper.$el.find('.swiper-slide').addClass('hc-slider-slide');
@@ -176,11 +193,7 @@ export class HcSlider {
 					swiper.$el.find('.swiper-slide-prev').addClass('hc-slider-slide-prev');
 				}
 			},
-			breakpoints: {
-				650: {},
-				1000: {},
-				1453: {},
-			}
+			breakpoints: {}
 		};
 	}
 }

package/public/scripts/components/smooth-scroll/smooth-scroll.component.js

@@ -12,29 +12,24 @@
  * @date        28/01/2022 14:27
  * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
  */
-
 import ElementEnum from "../../enumerators/element.enum";
 
 export class HcSmoothScroll {
-
 	constructor(triggerAttribute = ElementEnum.scrollSmooth, durationAnimation = 1000) {
-
-		document.addEventListener('click', (e) => {
-			if(e.target && e.target.hasAttribute(ElementEnum.scrollSmooth)) {
+		document.querySelectorAll(triggerAttribute).forEach(trigger => {
+			trigger.addEventListener('click', (e) => {
 				e.preventDefault();
-				const target = (e.target.getAttribute('href') != '') ? document.querySelector(e.target.getAttribute('href')) : document.querySelector(e.target.dataset.href);
-				const shift = (e.target.dataset.shift !== undefined) ? e.target.dataset.shift : 0;
+				const target = (e.currentTarget.getAttribute('href') != '') ? document.querySelector(e.currentTarget.getAttribute('href')) : document.querySelector(e.currentTarget.dataset.hcSmoothScrollHref);
+				const shift = (e.currentTarget.dataset.hcSmoothScrollShift !== undefined) ? e.currentTarget.dataset.hcSmoothScrollShift : 0;
 				const anim = requestAnimationFrame((timestamp) => {
 					const stamp = timestamp || new Date().getTime();
 					const start = stamp;
-
 					const startScrollOffset = window.pageYOffset;
 					const scrollEndElemTop = target.getBoundingClientRect().top - shift;
-
 					this.scrollToElem(start, stamp, durationAnimation, scrollEndElemTop, startScrollOffset);
 				})
-			}
-		});
+			});
+		})
 	}
 
 	easeInCubic(t) {
@@ -44,11 +39,8 @@ export class HcSmoothScroll {
 	scrollToElem(startTime, currentTime, duration, scrollEndElemTop, startScrollOffset) {
 		const runtime = currentTime - startTime;
 		let progress = runtime / duration;
-
 		progress = Math.min(progress, 1);
-
 		const ease = this.easeInCubic(progress);
-
 		window.scroll(0, startScrollOffset + (scrollEndElemTop * ease));
 		if (runtime < duration) {
 			requestAnimationFrame((timestamp) => {
@@ -59,7 +51,7 @@ export class HcSmoothScroll {
 	}
 }
 
-const hc_smooth_scroll = function(trigger, options) {
-	new HcSmoothScroll(trigger, options);
+const hc_smooth_scroll = function (trigger, durationAnimation) {
+	new HcSmoothScroll(trigger, durationAnimation);
 }
 export default hc_smooth_scroll;

package/public/scripts/enumerators/element.enum.js

@@ -16,7 +16,7 @@
 export default class ElementEnum {
 	static tooltip = '[data-hc-tooltip], [data-hc-popover]';
 	static popover = '[data-hc-popover]';
-	static scrollSmooth = 'data-hc-smooth-scroll';
+	static scrollSmooth = '[data-hc-smooth-scroll]';
 	static modal = '[data-hc-modal]';
 	static lightbox = '[data-hc-lightbox]';
 	static dropdown = '[data-hc-dropdown]';