@iris.interactive/handcook 2.9.13 → 2.9.16

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

@@ -0,0 +1,150 @@
+/*
+ * 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      Stephan JAMBOU
+ * @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";
+import './popin.component.scss';
+
+export class HcPopin {
+
+	showEvent;
+	hideEvent;
+
+	constructor(triggerAttribute = ElementEnum.popin) {
+		document.querySelectorAll(triggerAttribute).forEach( element => {
+			this.createEvent(element);
+
+			//Set close cross
+			let cross = document.createElement('button');
+			cross.setAttribute('data-hc-popin-close', '');
+			cross.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M20 20L4 4m16 0L4 20"></path></svg>'
+			element.prepend(cross)
+
+			//Set overlay
+			if (element.hasAttribute('data-hc-popin-overlay')) {
+				let overlay = document.createElement('div');
+				overlay.setAttribute('data-hc-popin-overlay-background', '');
+				element.prepend(overlay);
+				element.parentNode.insertBefore(overlay, element);
+				overlay.appendChild(element);
+
+				//Close overlay
+				let closeTriggerOverlay = document.querySelectorAll('[data-hc-popin-overlay-background]');
+				closeTriggerOverlay[0].addEventListener('click', (e) => {
+					const clickDetect = e.composedPath().includes(element)
+					if (!clickDetect) {
+						this.close(element);
+					}
+				});
+			}
+
+			//Set position
+			if (element.hasAttribute('data-hc-popin-position-top')) {
+				element.style.top = element.getAttribute('data-hc-popin-position-top');
+			}
+
+			if (element.hasAttribute('data-hc-popin-position-bottom')) {
+				element.style.bottom = element.getAttribute('data-hc-popin-position-bottom');
+			}
+
+			if (element.hasAttribute('data-hc-popin-position-left')) {
+				element.style.left = element.getAttribute('data-hc-popin-position-left');
+			}
+
+			if (element.hasAttribute('data-hc-popin-position-right')) {
+				element.style.right = element.getAttribute('data-hc-popin-position-right');
+			}
+
+			//Default position
+			if (!element.hasAttribute('data-hc-popin-position-top') && !element.hasAttribute('data-hc-popin-position-top')) {
+				element.style.bottom = '20px';
+			}
+
+			if (!element.hasAttribute('data-hc-popin-position-left') && !element.hasAttribute('data-hc-popin-position-right')) {
+				element.style.right = '20px';
+			}
+
+			//Mode (trigger or auto [default])
+			if (element.hasAttribute('data-hc-popin-mode') && element.getAttribute('data-hc-popin-mode') === 'trigger') {
+				document.querySelectorAll('[data-hc-popin-trigger]').forEach(trigger => {
+					trigger.addEventListener('click', (e) => {
+						let target = e.currentTarget.getAttribute('href');
+						this.show(document.getElementById(target.substring(1)));
+					});
+				});
+			} else {
+				//Set delay on mode auto
+				if (element.hasAttribute('data-hc-popin-delay')) {
+					setTimeout(() => {
+						this.show(element);
+					}, element.getAttribute('data-hc-popin-delay'));
+				} else {
+					this.show(element);
+				}
+			}
+
+			//Close cross
+			let closeTrigger = element.querySelectorAll('[data-hc-popin-close]');
+			closeTrigger[0].addEventListener('click', (e) => {
+				e.preventDefault();
+				this.close(element);
+			});
+		});
+	}
+
+	show(element) {
+		//On affiche la popin
+		element.classList.add('hc-popin-show');
+
+		//On affiche l'overlay si présent
+		let parent = element.parentNode;
+		if (parent.hasAttribute('data-hc-popin-overlay-background')) {
+			parent.classList.add('hc-popin-overlay-show');
+		}
+
+		document.dispatchEvent(this.showEvent);
+	}
+
+	close(element) {
+		//On cache la popin
+		element.classList.remove('hc-popin-show');
+
+		//On cache l'overlay si présent
+		let parent = element.parentNode;
+		if (parent.hasAttribute('data-hc-popin-overlay-background')) {
+			parent.classList.remove('hc-popin-overlay-show');
+		}
+
+		document.dispatchEvent(this.hideEvent);
+	}
+
+	createEvent(element) {
+		this.showEvent = new CustomEvent("show.hc.popin", {
+			detail: {
+				element
+			}
+		} );
+
+		this.hideEvent = new CustomEvent("hide.hc.popin", {
+			detail: {
+				element
+			}
+		} );
+	}
+}
+
+const hc_popin = function (trigger) {
+	new HcPopin(trigger);
+}
+export default hc_popin;

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

@@ -0,0 +1,143 @@
+/*!
+ * 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      Stephan JAMBOU
+ * @date        22/02/2022 14:57
+ * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
+ */
+
+//Popin
+[data-hc-popin] {
+    display: none;
+    position: fixed;
+    z-index: 1051;
+    animation-name: fadeIn;
+    animation-duration: 0.4s;
+    visibility: hidden;
+    color: var(--hc-popin--color, #000);
+    background-color: var(--hc-popin--background-color, #fff);
+    border-radius: var(--hc-popin--border-radius, 0);
+    box-shadow: var(--hc-popin--box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.2));
+
+    &[data-hc-popin-overlay] {
+        position: absolute;
+        z-index: 1;
+    }
+
+    //Origin transform
+    &[data-hc-popin-origin-center-x] {
+        transform: translateX(-50%);
+    }
+
+    &[data-hc-popin-origin-center-y] {
+        transform: translateY(-50%);
+    }
+
+    &[data-hc-popin-origin-center] {
+        transform: translate(-50%, -50%);
+    }
+
+    //Type large
+    &[data-hc-popin-type="large"] {
+        width: calc(100% - 60px);
+        padding: var(--hc-popin--padding--large, 60px);
+        max-width: var(--hc-popin--width--large, 800px);
+
+        [data-hc-popin-close] {
+            top: var(--hc-popin-close--top--large, 20px);
+            right: var(--hc-popin-close--right--large, 20px);
+
+            svg {
+                height: var(--hc-popin-close--height--large, 18px);
+                width: var(--hc-popin-close--width--large, 18px);
+            }
+        }
+    }
+
+    //Type small
+    &[data-hc-popin-type="small"] {
+        width: calc(100% - 40px);
+        max-width: var(--hc-popin--width--small, 275px);
+        padding: var(--hc-popin--padding--small, 30px);
+
+        [data-hc-popin-close] {
+            top: var(--hc-popin-close--top--small, 5px);
+            right: var(--hc-popin-close--right--small, 5px);
+
+            svg {
+                height: var(--hc-popin-close--height--small, 14px);
+                width: var(--hc-popin-close--width--small, 14px);
+            }
+        }
+    }
+
+    //Open class
+    &.hc-popin-show {
+        display: block;
+        visibility: visible;
+    }
+
+    //Close cross
+    [data-hc-popin-close] {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        pointer-events: all;
+        background: transparent;
+        border: 0;
+        padding: 5px;
+        transition: opacity 0.4s ease;
+
+        svg {
+            stroke: var(--hc-popin-close--color, #000);
+            stroke-width: var(--hc-popin-close--stroke-width, 2.5);
+            stroke-linejoin: bevel;
+            stroke-linecap: round;
+        }
+
+        &:hover {
+            opacity: 0.6;
+        }
+    }
+}
+
+
+//Overlay
+[data-hc-popin-overlay-background] {
+    display: none;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1050;
+    visibility: hidden;
+    animation-name: fadeIn;
+    animation-duration: 0.4s;
+    background: var(--hc-popin--overlay, rgba(24, 24, 27, 0.8));
+
+    &.hc-popin-overlay-show {
+        display: block;
+        visibility: visible;
+    }
+}
+
+
+//Animation Fade in
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}

package/public/scripts/components/scrollspy/scrollspy.component.min.js

@@ -1 +1 @@
-(()=>{"use strict";var t={812:(t,a,o)=>{function r(t,a,o){return a in t?Object.defineProperty(t,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[a]=o,t}var e=function t(){!function(t,a){if(!(t instanceof a))throw new TypeError("Cannot call a class as a function")}(this,t)};r(e,"tooltip","[data-hc-tooltip], [data-hc-popover]"),r(e,"popover","[data-hc-popover]"),r(e,"scrollSmooth","[data-hc-smooth-scroll]"),r(e,"modal","[data-hc-modal]"),r(e,"lightboxAttr","data-hc-lightbox"),r(e,"lightbox","[".concat(e.lightboxAttr,"]")),r(e,"dropdown","[data-hc-dropdown]"),r(e,"collapse","[data-hc-collapse]"),r(e,"collapseItem","[data-hc-collapse-item]"),r(e,"tab","[data-hc-tab]"),r(e,"toggle","[data-hc-toggle]"),r(e,"slider","[data-hc-slider]"),r(e,"scrollspy","[data-hc-scrollspy]"),r(e,"scrollspyNav","[data-hc-scrollspy-nav]"),r(e,"scrollspyNavItem","[data-hc-scrollspy-nav-item]")},539:(t,a,o)=>{function r(t,a,o){return a in t?Object.defineProperty(t,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[a]=o,t}var e=function t(){!function(t,a){if(!(t instanceof a))throw new TypeError("Cannot call a class as a function")}(this,t)};r(e,"attrHref","data-hc-smooth-scroll-href"),r(e,"attrShift","data-hc-smooth-scroll-shift")}},a={};function o(r){var e=a[r];if(void 0!==e)return e.exports;var l=a[r]={exports:{}};return t[r](l,l.exports,o),l.exports}o.d=(t,a)=>{for(var r in a)o.o(a,r)&&!o.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:a[r]})},o.o=(t,a)=>Object.prototype.hasOwnProperty.call(t,a),o(812),o(539)})();
+(()=>{"use strict";var t={812:(t,a,o)=>{function r(t,a,o){return a in t?Object.defineProperty(t,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[a]=o,t}var e=function t(){!function(t,a){if(!(t instanceof a))throw new TypeError("Cannot call a class as a function")}(this,t)};r(e,"tooltip","[data-hc-tooltip], [data-hc-popover]"),r(e,"popover","[data-hc-popover]"),r(e,"scrollSmooth","[data-hc-smooth-scroll]"),r(e,"modal","[data-hc-modal]"),r(e,"lightboxAttr","data-hc-lightbox"),r(e,"lightbox","[".concat(e.lightboxAttr,"]")),r(e,"dropdown","[data-hc-dropdown]"),r(e,"collapse","[data-hc-collapse]"),r(e,"collapseItem","[data-hc-collapse-item]"),r(e,"popin","[data-hc-popin]"),r(e,"tab","[data-hc-tab]"),r(e,"toggle","[data-hc-toggle]"),r(e,"slider","[data-hc-slider]"),r(e,"scrollspy","[data-hc-scrollspy]"),r(e,"scrollspyNav","[data-hc-scrollspy-nav]"),r(e,"scrollspyNavItem","[data-hc-scrollspy-nav-item]")},539:(t,a,o)=>{function r(t,a,o){return a in t?Object.defineProperty(t,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[a]=o,t}var e=function t(){!function(t,a){if(!(t instanceof a))throw new TypeError("Cannot call a class as a function")}(this,t)};r(e,"attrHref","data-hc-smooth-scroll-href"),r(e,"attrShift","data-hc-smooth-scroll-shift")}},a={};function o(r){var e=a[r];if(void 0!==e)return e.exports;var c=a[r]={exports:{}};return t[r](c,c.exports,o),c.exports}o.d=(t,a)=>{for(var r in a)o.o(a,r)&&!o.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:a[r]})},o.o=(t,a)=>Object.prototype.hasOwnProperty.call(t,a),o(812),o(539)})();