@iris.interactive/handcook 2.5.0 → 2.6.1

package/mix-manifest.json

@@ -1,5 +1,8 @@
 {
+    "/public/scripts/index.js": "/public/scripts/index.js",
+    "/public/styles/style.css": "/public/styles/style.css",
     "/public/index.html": "/public/index.html",
+    "/public/scripts/handcook.js": "/public/scripts/handcook.js",
     "/public/styles/scss/_utils.scss": "/public/styles/scss/_utils.scss",
     "/public/styles/scss/_variables.scss": "/public/styles/scss/_variables.scss",
     "/public/styles/scss/handcook.scss": "/public/styles/scss/handcook.scss",

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "@iris.interactive/handcook",
-  "version": "2.5.0",
+  "version": "2.6.1",
   "description": "The web cooking by IRIS Interactive",
   "main": "./public/scripts/index.js",
   "scripts": {
     "build": "mix",
     "build:production": "mix --production",
     "start": "mix watch",
-    "hot": "mix watch --hot",
-    "prepare": "mix -- --env prepare"
+    "hot": "mix watch --hot"
   },
   "keywords": [
     "IRIS Interactive",
@@ -26,6 +25,7 @@
     "browser-sync-webpack-plugin": "^2.3.0",
     "iconfont-plugin-webpack": "^1.1.4",
     "laravel-mix": "^6.0.19",
+    "laravel-mix-glob": "^1.1.10",
     "mix-env-file": "^0.1.1",
     "postcss": "^8.3.0",
     "resolve-url-loader": "^4.0.0",

package/public/index.html

@@ -42,41 +42,41 @@
             color: blue;
         }
 
-        .swiper {
+        .hc-slider {
             position: relative;
             margin: 40px 0;
         }
 
-        #slider-full .swiper-slide {
+        #slider-full .hc-slider-slide {
             width: 100%;
         }
 
-        #slider-full .swiper-slide img {
+        #slider-full .hc-slider-slide img {
             width: 100%;
         }
 
-        .swiper-slide {
+        .hc-slider-slide {
             width: 500px;
             margin-right: 40px;
         }
 
-        .swiper-slide:last-child {
+        .hc-slider-slide:last-child {
             margin-right: 0;
         }
 
-        .swiper-button-prev,
-        .swiper-button-next {
+        .hc-slider-button-prev,
+        .hc-slider-button-next {
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
             z-index: 1;
         }
 
-        .swiper-button-prev {
+        .hc-slider-button-prev {
             left: 0;
         }
 
-        .swiper-button-prev:before {
+        .hc-slider-button-prev:before {
             content: "<";
             display: flex;
             align-items: center;
@@ -87,11 +87,11 @@
             background-color: #fff;
         }
 
-        .swiper-button-next {
+        .hc-slider-button-next {
             right: 0;
         }
 
-        .swiper-button-next:before {
+        .hc-slider-button-next:before {
             content: ">";
             display: flex;
             align-items: center;
@@ -102,14 +102,14 @@
             background-color: #fff;
         }
 
-        .swiper-pagination {
+        .hc-slider-pagination {
             display: inline-flex;
             gap: 10px;
             margin: 30px 50% 0;
             transform: translate(-50%);
         }
 
-        .swiper-pagination-bullet {
+        .hc-slider-pagination-bullet {
             width: 10px;
             height: 10px;
             background-color: rgba(255, 0, 0, 0.35);
@@ -117,7 +117,7 @@
             border-radius: 50%;
         }
 
-        .swiper-pagination-bullet.swiper-pagination-bullet-active {
+        .hc-slider-pagination-bullet.hc-slider-pagination-bullet-active {
             background-color: red;
         }
     </style>

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

@@ -14,21 +14,26 @@
  */
 
 import ElementEnum from "../../enumerators/element.enum";
-import "./collapse.component.css";
+import "./collapse.component.scss";
 import Collapse from "bootstrap/js/src/collapse";
 
-class HcCollapse {
+export class HcCollapse {
+
+	showEvent;
+	shownEvent;
+	hideEvent;
+	hiddenEvent;
 
 	constructor(elements = ElementEnum.collapse, type = "collapse") {
+		this.createEvent();
 		const collapseElementList = [].slice.call(document.querySelectorAll(elements));
 		const collapseList = collapseElementList.map(function (collapseElement) {
 			const parent = collapseElement.getAttribute('data-hc-collapse-parent');
-			let option = {};
+			let option = {
+				toggle: false
+			};
 			if (parent !== null) {
-				option = {
-					parent: parent,
-					toggle: false
-				}
+				option.parent = parent;
 			}
 			return new Collapse(collapseElement, option);
 		});
@@ -40,10 +45,32 @@ class HcCollapse {
 				});
 			});
 		});
+		document.querySelectorAll('[data-hc-collapse]').forEach(trigger => {
+			trigger.addEventListener('hide.bs.collapse', (e) => {
+				trigger.dispatchEvent(this.hideEvent);
+			});
+			trigger.addEventListener('hidden.bs.collapse', (e) => {
+				trigger.dispatchEvent(this.hiddenEvent);
+			});
+			trigger.addEventListener('show.bs.collapse', (e) => {
+				trigger.dispatchEvent(this.showEvent);
+			});
+			trigger.addEventListener('shown.bs.collapse', (e) => {
+				trigger.dispatchEvent(this.shownEvent);
+			});
+		});
+	}
+
+	createEvent() {
+		this.showEvent = new Event("show.hc.collapse");
+		this.shownEvent = new Event("shown.hc.collapse");
+		this.hideEvent = new Event("hide.hc.collapse");
+		this.hiddenEvent = new Event("hidden.hc.collapse");
 	}
 
 }
 
-export const hc_collapse = function (trigger) {
+const hc_collapse = function (trigger) {
 	return new HcCollapse(trigger);
-}
+};
+export default hc_collapse;

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

@@ -17,29 +17,56 @@
 import ElementEnum from "../../enumerators/element.enum";
 import tippy from "tippy.js";
 import "tippy.js/dist/tippy.css";
-import "tippy.js/themes/light.css";
+import "./dropdown.component.scss";
 
-class HcDropdown {
+export class HcDropdown {
 
-	instance;
+	showEvent;
+	shownEvent;
+	hideEvent;
+	hiddenEvent;
+
+	instances = [];
 
 	constructor(elements = ElementEnum.dropdown) {
+		this.createEvent();
 		document.querySelectorAll(elements).forEach(element => {
 
 			const template = document.querySelector(element.dataset.hcDropdownMenu);
-			this.instance = tippy(element, {
+			const tippyObject = tippy(element, {
 				trigger: 'click',
 				allowHTML: true,
 				content: template.innerHTML,
 				arrow: false,
 				placement: "bottom",
-				theme: "light",
-				interactive: true
+				theme: "dropdown",
+				interactive: true,
+				onShow: (instance) => {
+					instance.reference.dispatchEvent(this.showEvent)
+				},
+				onShown: (instance) => {
+					instance.reference.dispatchEvent(this.shownEvent)
+				},
+				onHide: (instance) => {
+					instance.reference.dispatchEvent(this.hideEvent)
+				},
+				onHidden: (instance) => {
+					instance.reference.dispatchEvent(this.hiddenEvent)
+				},
 			});
+			this.instances.push(tippyObject);
 		});
 	}
+
+	createEvent() {
+		this.showEvent = new Event('show.hc.dropdown');
+		this.shownEvent = new Event('shown.hc.dropdown');
+		this.hideEvent = new Event('hide.hc.dropdown');
+		this.hiddenEvent = new Event('hidden.hc.dropdown');
+	}
 }
 
-export const hc_dropdown = function (trigger) {
+const hc_dropdown = function (trigger) {
 	return new HcDropdown(trigger);
-}
+}
+export default hc_dropdown;

package/public/scripts/components/dropdown/dropdown.component.scss

@@ -0,0 +1,48 @@
+/*!
+ * IRIS Interactive
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is no subject to a specific license
+ * but it belongs to the company IRIS Interactive.
+ * You can contact IRIS Interactive at the following
+ * address: contact@iris-interactive.fr
+ *
+ * @author      Lucas ROCHE
+ * @date        24/02/2022 14:19
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+
+.tippy-box[data-theme~=dropdown] {
+    color: #26323d;
+    box-shadow: 0 0 20px 4px rgba(154, 161, 177, .15), 0 4px 80px -8px rgba(36, 40, 47, .25), 0 4px 4px -2px rgba(91, 94, 105, .15);
+    background-color: #fff
+}
+
+.tippy-box[data-theme~=dropdown] .tippy-content {
+    padding: 0;
+}
+
+.tippy-box[data-theme~=dropdown][data-placement^=top] > .tippy-arrow:before {
+    border-top-color: #fff
+}
+
+.tippy-box[data-theme~=dropdown][data-placement^=bottom] > .tippy-arrow:before {
+    border-bottom-color: #fff
+}
+
+.tippy-box[data-theme~=dropdown][data-placement^=left] > .tippy-arrow:before {
+    border-left-color: #fff
+}
+
+.tippy-box[data-theme~=dropdown][data-placement^=right] > .tippy-arrow:before {
+    border-right-color: #fff
+}
+
+.tippy-box[data-theme~=dropdown] > .tippy-backdrop {
+    background-color: #fff
+}
+
+.tippy-box[data-theme~=dropdown] > .tippy-svg-arrow {
+    fill: #fff
+}

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

@@ -16,11 +16,13 @@
 
 import LazyLoad from "vanilla-lazyload";
 
-export const hc_lazyload = function() {
+const hc_lazyload = function() {
 	return new LazyLoad({
 		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'
 	});
-}
+}
+
+export default hc_lazyload;

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

@@ -17,16 +17,20 @@ import {Fancybox} from "@fancyapps/ui";
 import '@fancyapps/ui/dist/fancybox.css';
 import ElementEnum from "../../enumerators/element.enum";
 
-class HcLightbox {
+export class HcLightbox {
 
-	instance = [];
+	instance;
 
 	constructor(elements = ElementEnum.lightbox) {
-		Fancybox.bind(elements);
+		Fancybox.bind(elements,{
+			groupAll: true
+		});
 		this.instance = Fancybox.getInstance();
 	}
 }
 
-export const hc_lightbox = function (trigger, options) {
-	return new HcLightbox(trigger, options);
-}
+const hc_lightbox = function (trigger) {
+	return new HcLightbox(trigger);
+}
+
+export default hc_lightbox;

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

@@ -16,9 +16,9 @@
 import ElementEnum from "../../enumerators/element.enum";
 import {Fancybox} from "@fancyapps/ui";
 import '@fancyapps/ui/dist/fancybox.css';
-import './modal.component.css';
+import './modal.component.scss';
 
-class HcModal {
+export class HcModal {
 
 	instance = [];
 	defaultOptions = {
@@ -40,6 +40,7 @@ class HcModal {
 	}
 }
 
-export const hc_modal = function (trigger, options) {
+const hc_modal = function (trigger, options) {
 	return new HcModal(trigger, options);
-}
+}
+export default hc_modal;

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

@@ -17,9 +17,10 @@ import ElementEnum from "../../enumerators/element.enum";
 import Swiper from "swiper/bundle";
 import "swiper/css";
 
-class HcSlider {
+export class HcSlider {
 
 	slider;
+	instances = [];
 
 	// Options
 	options = {};
@@ -30,7 +31,8 @@ class HcSlider {
 			this.slider = element;
 			this.setOptions();
 			this.buildDom();
-			new Swiper(element, this.options);
+			const instance = new Swiper(element, this.options);
+			this.instances.push(instance);
 			this.initOptions();
 		});
 	}
@@ -66,7 +68,7 @@ class HcSlider {
 		// 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" );
+		wrapperElement.classList.add("swiper-wrapper");
 		this.slider.appendChild(wrapperElement);
 		this.slider.querySelectorAll('.swiper-wrapper').forEach(wrapper => {
 			items.forEach(item => {
@@ -78,28 +80,34 @@ class HcSlider {
 		if (this.slider.hasAttribute('data-hc-slider-pagination')) {
 
 			const paginationElement = document.createElement("div");
-			paginationElement.classList.add("swiper-pagination");
+			paginationElement.classList.add("hc-slider-pagination");
 			this.slider.appendChild(paginationElement);
 
 			this.options['pagination'] = {
-				el: '.swiper-pagination',
+				el: '.hc-slider-pagination',
 				type: 'bullets',
-				clickable: true
+				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 buttonPrev = document.createElement("div");
-			buttonPrev.classList.add("swiper-button-prev");
+			buttonPrev.classList.add("hc-slider-button-prev");
 			this.slider.appendChild(buttonPrev);
 
 			const buttonNext = document.createElement("div");
-			buttonNext.classList.add("swiper-button-next");
+			buttonNext.classList.add("hc-slider-button-next");
 			this.slider.appendChild(buttonNext);
 
 			this.options['navigation'] = {
-				nextEl: '.swiper-button-next',
-				prevEl: '.swiper-button-prev',
+				nextEl: '.hc-slider-button-next',
+				prevEl: '.hc-slider-button-prev',
+				disabledClass: 'hc-slider-button-disabled',
+				hiddenClass: 'hc-slider-button-hidden',
 			};
 		}
 	}
@@ -113,11 +121,36 @@ class HcSlider {
 				forceToAxis: true,
 			},
 			grabCursor: true,
-			loop: false
+			loop: false,
+			on: {
+				init: (swiper) => {
+
+					// layout
+					swiper.$el.find('.swiper-wrapper').addClass('hc-slider-wrapper');
+
+					// slide item
+					swiper.$el.find('.swiper-slide').addClass('hc-slider-slide');
+					swiper.$el.find('.swiper-slide-active').addClass('hc-slider-slide-active');
+					swiper.$el.find('.swiper-slide-next').addClass('hc-slider-slide-next');
+					swiper.$el.find('.swiper-slide-prev').addClass('hc-slider-slide-prev');
+				},
+				slideChangeTransitionEnd: (swiper) => {
+
+					// slide item
+					swiper.$el.find('.swiper-slide')
+						.removeClass('hc-slider-slide-active')
+						.removeClass('hc-slider-slide-next')
+						.removeClass('hc-slider-slide-prev');
+					swiper.$el.find('.swiper-slide-active').addClass('hc-slider-slide-active');
+					swiper.$el.find('.swiper-slide-next').addClass('hc-slider-slide-next');
+					swiper.$el.find('.swiper-slide-prev').addClass('hc-slider-slide-prev');
+				}
+			}
 		};
 	}
 }
 
-export const hc_slider = function (trigger) {
+const hc_slider = function (trigger) {
 	return new HcSlider(trigger);
-}
+}
+export default hc_slider;

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

@@ -15,7 +15,7 @@
 
 import ElementEnum from "../../enumerators/element.enum";
 
-class HcSmoothScroll {
+export class HcSmoothScroll {
 
 	constructor(triggerAttribute = ElementEnum.scrollSmooth, durationAnimation = 1000) {
 
@@ -59,6 +59,7 @@ class HcSmoothScroll {
 	}
 }
 
-export const hc_smooth_scroll = function(trigger, options) {
+const hc_smooth_scroll = function(trigger, options) {
 	new HcSmoothScroll(trigger, options);
-}
+}
+export default hc_smooth_scroll;

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

@@ -14,10 +14,15 @@
  */
 
 import ElementEnum from "../../enumerators/element.enum";
-import "./tab.component.css";
+import "./tab.component.scss";
 import Tab from "bootstrap/js/src/tab";
 
-class HcTab {
+export class HcTab {
+
+	showEvent;
+	shownEvent;
+	hideEvent;
+	hiddenEvent;
 
 	constructor(elements = ElementEnum.tab) {
 		this.buildDOM();
@@ -29,7 +34,21 @@ class HcTab {
 				event.preventDefault()
 				tabTrigger.show()
 			})
-		})
+		});
+		document.querySelectorAll(elements).forEach(trigger => {
+			trigger.addEventListener('hide.bs.tab', (e) => {
+				trigger.dispatchEvent(this.hideEvent);
+			});
+			trigger.addEventListener('show.bs.tab', (e) => {
+				trigger.dispatchEvent(this.showEvent);
+			});
+			trigger.addEventListener('shown.bs.tab', (e) => {
+				trigger.dispatchEvent(this.shownEvent);
+			});
+			trigger.addEventListener('hidden.bs.tab', (e) => {
+				trigger.dispatchEvent(this.hiddenEvent);
+			});
+		});
 	}
 
 	buildDOM() {
@@ -37,10 +56,18 @@ class HcTab {
 			if (!wrapper.classList.contains("nav")) {
 				wrapper.classList.add("nav")
 			}
-		})
+		});
+	}
+
+	createEvent() {
+		this.showEvent = new Event("show.hc.collapse");
+		this.shownEvent = new Event("shown.hc.collapse");
+		this.hideEvent = new Event("hide.hc.collapse");
+		this.hiddenEvent = new Event("hidden.hc.collapse");
 	}
 }
 
-export const hc_tab = function (trigger) {
+const hc_tab = function (trigger) {
 	return new HcTab(trigger);
-}
+}
+export default hc_tab;

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

@@ -16,7 +16,7 @@
 
 import ElementEnum from "../../enumerators/element.enum";
 
-class HcToggle {
+export class HcToggle {
 
 	constructor(elements = ElementEnum.toggle) {
 		document.querySelectorAll(elements).forEach(element => {
@@ -45,6 +45,7 @@ class HcToggle {
 	}
 }
 
-export const hc_toggle = function (trigger) {
+const hc_toggle = function (trigger) {
 	return new HcToggle(trigger);
-}
+}
+export default hc_toggle;

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

@@ -19,16 +19,23 @@ import "tippy.js/dist/tippy.css"
 import ElementEnum from "../../enumerators/element.enum";
 import TooltipEnum from "../../enumerators/tooltip.enum";
 
-class HcTooltip {
+export class HcTooltip {
+
+	showEvent;
+	shownEvent;
+	hideEvent;
+	hiddenEvent;
 
 	instances = [];
 	defaultOptions = {
 		placement: '',
 		content: '',
-		trigger: ''
+		trigger: '',
+		allowHTML: true
 	};
 
 	constructor(elements = ElementEnum.tooltip, overrideOptions = {}) {
+		this.createEvent();
 		document.querySelectorAll(elements).forEach(element => {
 			let options = {};
 			Object.assign(options, this.defaultOptions, overrideOptions);
@@ -40,11 +47,30 @@ class HcTooltip {
 					e.preventDefault();
 				});
 			}
+			options.onShow = (instance) => {
+				instance.reference.dispatchEvent(this.showEvent);
+			}
+			options.onShown = (instance) => {
+				instance.reference.dispatchEvent(this.shownEvent);
+			}
+			options.onHide = (instance) => {
+				instance.reference.dispatchEvent(this.hideEvent);
+			}
+			options.onHidden = (instance) => {
+				instance.reference.dispatchEvent(this.hiddenEvent);
+			}
 			const instance = tippy(element, options);
 			this.instances.push(instance);
 		});
 	}
 
+	createEvent() {
+		this.showEvent = new Event('show.hc.tooltip');
+		this.shownEvent = new Event('shown.hc.tooltip');
+		this.hideEvent = new Event('hide.hc.tooltip');
+		this.hiddenEvent = new Event('hidden.hc.tooltip');
+	}
+
 	show() {
 		this.instances.forEach(instance => {
 			instance.show();
@@ -70,6 +96,7 @@ class HcTooltip {
 	}
 }
 
-export const hc_tooltip = function (trigger, options) {
+const hc_tooltip = function (trigger, options) {
 	return new HcTooltip(trigger, options);
-};
+}
+export default hc_tooltip;