@iris.interactive/handcook 2.3.11 → 2.5.1

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

@@ -0,0 +1,26 @@
+/*
+ * 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        22/02/2022 14:16
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+
+
+import LazyLoad from "vanilla-lazyload";
+
+export 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'
+	});
+}

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

@@ -0,0 +1,32 @@
+/*
+ * 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        21/02/2022 09:57
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+
+import {Fancybox} from "@fancyapps/ui";
+import '@fancyapps/ui/dist/fancybox.css';
+import ElementEnum from "../../enumerators/element.enum";
+
+class HcLightbox {
+
+	instance = [];
+
+	constructor(elements = ElementEnum.lightbox) {
+		Fancybox.bind(elements);
+		this.instance = Fancybox.getInstance();
+	}
+}
+
+export const hc_lightbox = function (trigger, options) {
+	return new HcLightbox(trigger, options);
+}

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

@@ -0,0 +1,18 @@
+/*
+ * 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        01/02/2022 11:21
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+.hc-modal {
+  display: none;
+  max-width: 500px;
+}

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

@@ -0,0 +1,45 @@
+/*
+ * 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        01/02/2022 11:01
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+
+import ElementEnum from "../../enumerators/element.enum";
+import {Fancybox} from "@fancyapps/ui";
+import '@fancyapps/ui/dist/fancybox.css';
+import './modal.component.css';
+
+class HcModal {
+
+	instance = [];
+	defaultOptions = {
+		src: '',
+		type: 'inline'
+	}
+
+	constructor(elements = ElementEnum.modal, overrideOptions = {}) {
+		let options = {};
+		Object.assign(options, this.defaultOptions, overrideOptions);
+		document.querySelectorAll(elements).forEach(element => {
+			options.src = options.src != '' ? options.src : (element.hasAttribute('href') ? element.getAttribute('href') : (element.hasAttribute('data-hc-src') ? element.dataset.hcSrc : ''));
+			this.instance.push(Fancybox.bind(element));
+			element.addEventListener('click', (e) => {
+				e.preventDefault();
+				Fancybox.show([options]);
+			});
+		});
+	}
+}
+
+export const hc_modal = function (trigger, options) {
+	return new HcModal(trigger, options);
+}

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

@@ -0,0 +1,20 @@
+/*
+ * 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        01/02/2022 11:21
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+
+
+.hc-modal {
+    display: none;
+    max-width: 500px;
+}

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

@@ -0,0 +1,123 @@
+/*
+ * 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        22/02/2022 17:21
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+
+import ElementEnum from "../../enumerators/element.enum";
+import Swiper from "swiper/bundle";
+import "swiper/css";
+
+class HcSlider {
+
+	slider;
+
+	// Options
+	options = {};
+
+	constructor(elements = ElementEnum.slider) {
+		this.initOptions();
+		document.querySelectorAll(elements).forEach(element => {
+			this.slider = element;
+			this.setOptions();
+			this.buildDom();
+			new Swiper(element, this.options);
+			this.initOptions();
+		});
+	}
+
+	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');
+		if (attr !== null) {
+			this.options['autoplay'] = {
+				delay: attr
+			}
+		}
+	}
+
+	buildDom() {
+		// On recupère les slide items (element de DOM enfant de premier niveau)
+		// et on leur ajoute la classe des slide item
+		const items = [].slice.call(this.slider.children);
+		items.forEach(item => {
+			item.classList.add('swiper-slide');
+		});
+
+		// 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);
+			});
+		});
+
+		// 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("swiper-pagination");
+			this.slider.appendChild(paginationElement);
+
+			this.options['pagination'] = {
+				el: '.swiper-pagination',
+				type: 'bullets',
+				clickable: true
+			};
+		}
+		if (this.slider.hasAttribute('data-hc-slider-arrows')) {
+
+			const buttonPrev = document.createElement("div");
+			buttonPrev.classList.add("swiper-button-prev");
+			this.slider.appendChild(buttonPrev);
+
+			const buttonNext = document.createElement("div");
+			buttonNext.classList.add("swiper-button-next");
+			this.slider.appendChild(buttonNext);
+
+			this.options['navigation'] = {
+				nextEl: '.swiper-button-next',
+				prevEl: '.swiper-button-prev',
+			};
+		}
+	}
+
+	initOptions() {
+		this.options = {
+			slidesPerView: 'auto',
+			pagination: false,
+			navigation: false,
+			mousewheel: {
+				forceToAxis: true,
+			},
+			grabCursor: true,
+			loop: false
+		};
+	}
+}
+
+export const hc_slider = function (trigger) {
+	return new HcSlider(trigger);
+}

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

@@ -0,0 +1,64 @@
+/*
+ * 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        28/01/2022 14:27
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+
+import ElementEnum from "../../enumerators/element.enum";
+
+class HcSmoothScroll {
+
+	constructor(triggerAttribute = ElementEnum.scrollSmooth, durationAnimation = 1000) {
+
+		document.addEventListener('click', (e) => {
+			if(e.target && e.target.hasAttribute(ElementEnum.scrollSmooth)) {
+				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 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) {
+		return t * t * t
+	}
+
+	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) => {
+				const currentTime = timestamp || new Date().getTime();
+				this.scrollToElem(startTime, currentTime, duration, scrollEndElemTop, startScrollOffset);
+			})
+		}
+	}
+}
+
+export const hc_smooth_scroll = function(trigger, options) {
+	new HcSmoothScroll(trigger, options);
+}

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

@@ -0,0 +1,20 @@
+/*!
+ * 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        22/02/2022 14:57
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+[data-hc-tab-content] > [data-hc-tab-pane] {
+  display: none;
+}
+[data-hc-tab-content] > .active {
+  display: block;
+}

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

@@ -0,0 +1,46 @@
+/*
+ * 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        22/02/2022 14:34
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+
+import ElementEnum from "../../enumerators/element.enum";
+import "./tab.component.css";
+import Tab from "bootstrap/js/src/tab";
+
+class HcTab {
+
+	constructor(elements = ElementEnum.tab) {
+		this.buildDOM();
+		const triggerTabList = [].slice.call(document.querySelectorAll(elements))
+		triggerTabList.forEach(function (triggerEl) {
+			const tabTrigger = new Tab(triggerEl);
+
+			triggerEl.addEventListener('click', function (event) {
+				event.preventDefault()
+				tabTrigger.show()
+			})
+		})
+	}
+
+	buildDOM() {
+		document.querySelectorAll("[data-hc-tab-wrapper]").forEach(wrapper => {
+			if (!wrapper.classList.contains("nav")) {
+				wrapper.classList.add("nav")
+			}
+		})
+	}
+}
+
+export const hc_tab = function (trigger) {
+	return new HcTab(trigger);
+}

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

@@ -0,0 +1,23 @@
+/*!
+ * 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        22/02/2022 14:57
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+
+[data-hc-tab-content] {
+	> [data-hc-tab-pane] {
+		display: none;
+	}
+	> .active {
+		display: block;
+	}
+}

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

@@ -0,0 +1,50 @@
+/*
+ * 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        22/02/2022 16:50
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+
+
+import ElementEnum from "../../enumerators/element.enum";
+
+class HcToggle {
+
+	constructor(elements = ElementEnum.toggle) {
+		document.querySelectorAll(elements).forEach(element => {
+			element.addEventListener('click', (e) => {
+				e.preventDefault();
+				const attribute = e.currentTarget.dataset.hcToggleAttribute;
+				const value = e.currentTarget.dataset.hcToggleValue;
+				const targets = e.currentTarget.getAttribute("href") ? e.currentTarget.getAttribute("href") : e.currentTarget.dataset.hcToggleTarget;
+				document.querySelectorAll(targets).forEach(target => {
+					if(target.getAttribute(attribute) === value) {
+						if(attribute === "class"){
+							target.classList.remove(value);
+						} else {
+							target.removeAttribute(attribute);
+						}
+					} else {
+						if(attribute === "class"){
+							target.classList.add(value);
+						} else {
+							target.setAttribute(attribute, value);
+						}
+					}
+				});
+			});
+		});
+	}
+}
+
+export const hc_toggle = function (trigger) {
+	return new HcToggle(trigger);
+}

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

@@ -0,0 +1,75 @@
+/*
+ * 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        28/01/2022 14:52
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+
+
+import tippy from "tippy.js";
+import "tippy.js/dist/tippy.css"
+import ElementEnum from "../../enumerators/element.enum";
+import TooltipEnum from "../../enumerators/tooltip.enum";
+
+class HcTooltip {
+
+	instances = [];
+	defaultOptions = {
+		placement: '',
+		content: '',
+		trigger: ''
+	};
+
+	constructor(elements = ElementEnum.tooltip, overrideOptions = {}) {
+		document.querySelectorAll(elements).forEach(element => {
+			let options = {};
+			Object.assign(options, this.defaultOptions, overrideOptions);
+			options.trigger = options.trigger != '' ? options.trigger : (element.hasAttribute(TooltipEnum.attrPopover) ? "click" : "mouseenter focus");
+			options.content = options.content != '' ? options.content : (element.hasAttribute(TooltipEnum.attrContent) ? element.getAttribute(TooltipEnum.attrContent) : '');
+			options.placement = options.placement != '' ? options.placement : (element.hasAttribute(TooltipEnum.attrPlacement) ? element.getAttribute(TooltipEnum.attrPlacement) : '');
+			if (options.trigger === 'click') {
+				element.addEventListener('click', (e) => {
+					e.preventDefault();
+				});
+			}
+			const instance = tippy(element, options);
+			this.instances.push(instance);
+		});
+	}
+
+	show() {
+		this.instances.forEach(instance => {
+			instance.show();
+		})
+	}
+
+	hide() {
+		this.instances.forEach(instance => {
+			instance.hide();
+		})
+	}
+
+	disable() {
+		this.instances.forEach(instance => {
+			instance.disable();
+		})
+	}
+
+	enable() {
+		this.instances.forEach(instance => {
+			instance.enable();
+		})
+	}
+}
+
+export const hc_tooltip = function (trigger, options) {
+	return new HcTooltip(trigger, options);
+};

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

@@ -0,0 +1,28 @@
+/*
+ * 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        01/02/2022 10:36
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+
+export default class ElementEnum {
+	static tooltip = '[data-hc-tooltip], [data-hc-popover]';
+	static popover = '[data-hc-popover]';
+	static scrollSmooth = 'data-hc-smooth-scroll';
+	static modal = '[data-hc-modal]';
+	static lightbox = '[data-hc-lightbox]';
+	static dropdown = '[data-hc-dropdown]';
+	static collapse = '[data-hc-collapse]';
+	static collapseItem = '[data-hc-collapse-item]';
+	static tab = '[data-hc-tab]';
+	static toggle = '[data-hc-toggle]';
+	static slider = '[data-hc-slider]';
+}

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

@@ -0,0 +1,21 @@
+/*
+ * 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        01/02/2022 10:40
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+
+
+export default class TooltipEnum {
+	static attrPopover = "data-hc-popover";
+	static attrContent = "data-hc-tooltip-content";
+	static attrPlacement = "data-hc-tooltip-placement";
+}