@iris.interactive/handcook 4.0.5 → 5.0.0

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

@@ -0,0 +1,88 @@
+import ElementEnum from "../../enumerators/element.enum";
+import './overlay.component.scss';
+
+export class HcOverlay {
+
+	showEvent;
+	hideEvent;
+
+	constructor(elements = ElementEnum.overlay) {
+		const HcOverlay = this;
+		document.querySelectorAll(elements).forEach(element => {
+			HcOverlay.createEvent(element);
+
+			//Init class
+			element.classList.add('hc-overlay-init');
+
+			//Open triggers
+			document.querySelectorAll('[data-hc-overlay-trigger]').forEach(open => {
+				open.addEventListener('click', (e) => {
+					let target = e.currentTarget.getAttribute('data-hc-overlay-trigger') ? e.currentTarget.getAttribute('data-hc-overlay-trigger'):e.currentTarget.getAttribute('href') ? e.currentTarget.getAttribute('href').substring(1):null;
+					HcOverlay.show(document.getElementById(target));
+				});
+			});
+
+			//Close triggers
+			document.querySelectorAll('[data-hc-overlay-close]').forEach(close => {
+				close.addEventListener('click', (e) => {
+					e.preventDefault();
+					let closeTarget = e.currentTarget.getAttribute('data-hc-overlay-close');
+					if (closeTarget) {
+						HcOverlay.close(document.getElementById(closeTarget));
+					}
+				});
+			});
+
+			//Close all overlays on background click
+			document.querySelectorAll('[data-hc-overlay-background]').forEach(background => {
+				background.addEventListener('click', (e) => {
+					console.log('click');
+					e.preventDefault();
+					document.querySelectorAll(ElementEnum.overlay).forEach(overlay => {
+						HcOverlay.close(overlay);
+					})
+				});
+			});
+
+			//Close all overlays on escape key
+			document.onkeyup = function(event) {
+				if (event.key === 'Escape') {
+					document.querySelectorAll(ElementEnum.overlay).forEach(overlay => {
+						HcOverlay.close(overlay);
+					})
+				}
+			}
+		});
+	}
+
+	show(element) {
+		element.classList.add('hc-overlay-show');
+		//lock scroll
+		document.dispatchEvent(this.showEvent);
+	}
+
+	close(element) {
+		element.classList.remove('hc-overlay-show');
+		//unlock scroll
+		document.dispatchEvent(this.hideEvent);
+	}
+
+	createEvent(element) {
+		this.showEvent = new CustomEvent("show.hc.overlay", {
+			detail: {
+				element
+			}
+		});
+
+		this.hideEvent = new CustomEvent("hide.hc.overlay", {
+			detail: {
+				element
+			}
+		});
+	}
+}
+
+const hc_overlay = function (elements) {
+	return new HcOverlay(elements);
+}
+export default hc_overlay;

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

@@ -0,0 +1,73 @@
+/* Overlay
+/* ============================================= */
+.hc-overlay {
+    display: none;
+    position: fixed;
+    z-index: var(--hc-overlay--z-index, 9000);
+    color: var(--hc-overlay--color, #000);
+    background-color: var(--hc-overlay--background-color, #fff);
+    padding: var(--hc-overlay--padding, 20px);
+    top: 0;
+    height: 100%;
+    width: 100%;
+    max-width: var(--hc-overlay--width, 675px);
+    overflow: auto;
+    transition-property: var(--hc-overlay--transition-property, transform);
+    transition-duration: var(--hc-overlay--transition-duration, 0.4s);
+    transition-timing-function: var(--hc-overlay--transition-timing-function, ease);
+
+    &--right {
+        right: 0;
+        transform: translateX(100%);
+    }
+
+    &--left,
+    &--full {
+        left: 0;
+        transform: translateX(-100%);
+    }
+
+    &--full {
+        max-width: none;
+    }
+
+    &.hc-overlay-init {
+        display: block;
+
+        & + .hc-overlay__background {
+            display: block;
+        }
+    }
+
+    &.hc-overlay-show {
+        transform: translateX(0);
+
+        & + .hc-overlay__background {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
+
+    &__background {
+        display: none;
+        position: fixed;
+        z-index: calc(var(--hc-overlay--z-index, 9000) - 1);
+        background-color: var(--hc-overlay-background--background-color, rgba(0, 0, 0, 0.6));
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        opacity: 0;
+        pointer-events: none;
+        transition-property: var(--hc-overlay-background--transition-property, opacity);
+        transition-duration: var(--hc-overlay-background--transition-duration, 0.4s);
+        transition-timing-function: var(--hc-overlay-background--transition-timing-function, ease);
+    }
+
+    &__close {
+        position: absolute;
+        right: var(--hc-overlay-close--right, 30px);
+        top: var(--hc-overlay-close--top, 30px);
+        cursor: pointer;
+    }
+}

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

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