@iris.interactive/handcook 4.0.16 → 4.0.18

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

@@ -8,164 +8,124 @@
  * You can contact IRIS Interactive at the following
  * address: contact@iris-interactive.fr
  *
- * @author      Stephan JAMBOU
- * @date        11/10/2023 18:27
+ * @author      Lucas ROCHE
+ * @date        01/02/2022 11:01
  * @copyright   Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
  */
 
+import ScrollReveal from 'scrollreveal'
 import ElementEnum from "../../enumerators/element.enum";
-import "./scroll-reveal.component.scss";
 
 export class HcScrollReveal {
 
-	//Default
-	static distanceDefault = getComputedStyle(document.documentElement).getPropertyValue('--hc-scroll-reveal-distance');
-	static delayDefault    = getComputedStyle(document.documentElement).getPropertyValue('--hc-scroll-reveal-delay');
-	static durationDefault = getComputedStyle(document.documentElement).getPropertyValue('--hc-scroll-reveal-duration');
-	static intervalDefault = getComputedStyle(document.documentElement).getPropertyValue('--hc-scroll-reveal-interval');
-	static originDefault   = getComputedStyle(document.documentElement).getPropertyValue('--hc-scroll-reveal-origin');
-	static timingFunctionDefault = getComputedStyle(document.documentElement).getPropertyValue('--hc-scroll-reveal-timing-function');
-
 	constructor() {
+		//Default
+		const distanceDefault = '0px';
+		const distanceDelay = 200;
+		const distanceDuration = 800;
+		const distanceInterval = 0;
+		const distanceOrigin = 'bottom';
+
+		//Config
+		let distance = distanceDefault;
+		let delay = distanceDelay;
+		let duration = distanceDuration;
+		let interval = distanceInterval;
+		let origin = distanceOrigin;
+
+
+		//Children by parent
+		const parents = document.querySelectorAll(ElementEnum.scrollRevealParent);
+		parents.forEach( parent => {
+
+			if (parent.hasAttribute('data-hc-scroll-reveal-distance')) {
+				distance = parent.getAttribute('data-hc-scroll-reveal-distance');
+			} else {
+				distance = distanceDefault;
+			}
 
-		//Get all scrollreveal elements
-		const items = Array.prototype.slice.call(document.querySelectorAll(ElementEnum.scrollRevealParent)).concat(Array.prototype.slice.call(document.querySelectorAll(ElementEnum.scrollReveal))).concat(Array.prototype.slice.call(document.querySelectorAll(ElementEnum.scrollRevealChildren)));
-
-		//Init scrollreveal
-		HcScrollReveal.init(items);
-	}
-
-	static init(items) {
-		let childOffset = 0;
-		let childRowCount = 1;
-		const observerOptions = {
-			root: null,
-			rootMargin: '-10px 0px -10px 0px',
-			threshold: 0.1
-		}
-
-		const observer = new IntersectionObserver((entries) => {
-			entries.forEach(entry => {
-				if (entry.isIntersecting) {
-					if (entry.target.classList.contains('hc-sr')) {
-						entry.target.classList.add('hc-sr--show');
-					}
-				} else {
-					entry.target.classList.add('hc-sr');
-				}
-			});
-		}, observerOptions)
-
-		items.forEach(item => {
-			let options;
-			let isChild = false;
-
-			//Get options
-			if (item.hasAttribute('data-hc-scroll-reveal')) {
-				options = HcScrollReveal.getOptions(item);
+			if (parent.hasAttribute('data-hc-scroll-reveal-delay')) {
+				delay = parent.getAttribute('data-hc-scroll-reveal-delay');
 			} else {
-				let parent = item.parentElement;
+				delay = distanceDelay;
+			}
 
-				if (item.hasAttribute('data-hc-scroll-reveal-parent') && parent.hasAttribute('data-hc-scroll-reveal-parent')) {
-					isChild = true;
-				} else if (!item.hasAttribute('data-hc-noscroll-reveal')) {
-					isChild = true;
-				}
+			if (parent.hasAttribute('data-hc-scroll-reveal-duration')) {
+				duration = parent.getAttribute('data-hc-scroll-reveal-duration');
+			} else {
+				duration = distanceDuration;
+			}
 
-				options = HcScrollReveal.getOptions(parent);
+			if (parent.hasAttribute('data-hc-scroll-reveal-interval')) {
+				interval = parent.getAttribute('data-hc-scroll-reveal-interval');
+			} else {
+				interval = distanceInterval;
 			}
 
-			//Apply options if different than default
-			if (options.distance !== HcScrollReveal.distanceDefault && options.distance !== '') {
-				item.style.setProperty('--hc-scroll-reveal-distance', options.distance);
+			if (parent.hasAttribute('data-hc-scroll-reveal-origin')) {
+				origin = parent.getAttribute('data-hc-scroll-reveal-origin');
+			} else {
+				origin = distanceOrigin;
 			}
 
-			if (options.delay !== HcScrollReveal.delayDefault && options.delay !== null) {
-				item.style.setProperty('--hc-scroll-reveal-delay', options.delay);
+			ScrollReveal().reveal(parent.querySelectorAll(ElementEnum.scrollRevealChildren), {
+				distance: distance,
+				delay: delay,
+				duration: duration,
+				interval: interval,
+				origin: origin,
+				afterReveal: function (element) {
+					element.setAttribute('hc-scroll-reveal-is-visible', '');
+				},
+			});
+		});
+
+		//Specific item
+		const items = document.querySelectorAll(ElementEnum.scrollReveal);
+		items.forEach( item => {
+
+			if (item.hasAttribute('data-hc-scroll-reveal-distance')) {
+				distance = item.getAttribute('data-hc-scroll-reveal-distance');
+			} else {
+				distance = distanceDefault;
 			}
 
-			if (options.duration !== HcScrollReveal.durationDefault && options.duration !== null) {
-				item.style.setProperty('--hc-scroll-reveal-duration', options.duration);
+			if (item.hasAttribute('data-hc-scroll-reveal-delay')) {
+				delay = item.getAttribute('data-hc-scroll-reveal-delay');
+			} else {
+				delay = distanceDelay;
 			}
 
-			if (options.timing !== HcScrollReveal.timingFunctionDefault && options.timing !== null) {
-				item.style.setProperty('--hc-scroll-reveal-timing-function', options.timing);
+			if (item.hasAttribute('data-hc-scroll-reveal-duration')) {
+				duration = item.getAttribute('data-hc-scroll-reveal-duration');
+			} else {
+				duration = distanceDuration;
 			}
 
-			//Interval on items in same row
-			if (options.interval !== HcScrollReveal.intervalDefault && options.interval !== null && options.delay !== null) {
-				if (isChild) {
-					if (childOffset == item.offsetTop) {
-						let delayValue = parseInt(options.delay.replace('ms', ''));
-						let intervalValue = parseInt(options.interval.replace('ms', ''));
-						let newDelay = delayValue + (intervalValue * childRowCount);
-						options.delay = newDelay+'ms';
-						childRowCount++;
-					} else {
-						childOffset = item.offsetTop;
-						childRowCount = 1;
-					}
-
-					item.style.setProperty('--hc-scroll-reveal-delay', options.delay);
-				}
+			if (item.hasAttribute('data-hc-scroll-reveal-interval')) {
+				interval = item.getAttribute('data-hc-scroll-reveal-interval');
+			} else {
+				interval = distanceInterval;
 			}
 
-			//Generate translate according to origin
-			if (options.origin !== '') {
-				item.style.setProperty('--hc-scroll-reveal-origin', options.origin);
-
-				if (options.origin == 'top') {
-					item.style.setProperty('--hc-scroll-reveal-translate', 'translateY(calc(var(--hc-scroll-reveal-distance) * -1))');
-				} else if(options.origin == 'left') {
-					item.style.setProperty('--hc-scroll-reveal-translate', 'translateX(calc(var(--hc-scroll-reveal-distance) * -1))');
-				} else if(options.origin == 'right') {
-					item.style.setProperty('--hc-scroll-reveal-translate', 'translateX(var(--hc-scroll-reveal-distance))');
-				} else {
-					item.style.setProperty('--hc-scroll-reveal-translate', 'translateY(var(--hc-scroll-reveal-distance))');
-				}
+			if (item.hasAttribute('data-hc-scroll-reveal-origin')) {
+				origin = item.getAttribute('data-hc-scroll-reveal-origin');
+			} else {
+				origin = distanceOrigin;
 			}
 
-			//Observe
-			observer.observe(item);
+			ScrollReveal().reveal(item, {
+				distance: distance,
+				delay: delay,
+				duration: duration,
+				interval: interval,
+				origin: origin,
+				afterReveal: function (element) {
+					element.setAttribute('hc-scroll-reveal-is-visible', '');
+				},
+			});
 		});
 	}
-
-	static getOptions(item) {
-		let options = {
-			distance: HcScrollReveal.distanceDefault,
-			delay: HcScrollReveal.delayDefault,
-			duration: HcScrollReveal.durationDefault,
-			interval: HcScrollReveal.intervalDefault,
-			origin: HcScrollReveal.originDefault,
-			timing: HcScrollReveal.timingFunctionDefault
-		}
-
-		if (item.hasAttribute('data-hc-scroll-reveal-distance')) {
-			options.distance = item.getAttribute('data-hc-scroll-reveal-distance');
-		}
-
-		if (item.hasAttribute('data-hc-scroll-reveal-delay')) {
-			options.delay = item.getAttribute('data-hc-scroll-reveal-delay')+'ms';
-		}
-
-		if (item.hasAttribute('data-hc-scroll-reveal-duration')) {
-			options.duration = item.getAttribute('data-hc-scroll-reveal-duration')+'ms';
-		}
-
-		if (item.hasAttribute('data-hc-scroll-reveal-interval')) {
-			options.interval = item.getAttribute('data-hc-scroll-reveal-interval')+'ms';
-		}
-
-		if (item.hasAttribute('data-hc-scroll-reveal-origin')) {
-			options.origin = item.getAttribute('data-hc-scroll-reveal-origin');
-		}
-
-		if (item.hasAttribute('data-hc-scroll-reveal-timing-function')) {
-			options.timing = item.getAttribute('data-hc-scroll-reveal-timing-function');
-		}
-
-		return options;
-	}
 }
 
 const hc_scroll_reveal = function () {

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

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