@iris.interactive/handcook 4.0.14 → 4.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -2
  3. package/public/index.html +1 -1
  4. package/public/scripts/components/collapse/collapse.component.min.js +1 -1
  5. package/public/scripts/components/dropdown/dropdown.component.min.js +1 -1
  6. package/public/scripts/components/lightbox/lightbox.component.min.js +1 -1
  7. package/public/scripts/components/modal/modal.component.min.js +1 -1
  8. package/public/scripts/components/scroll-reveal/scroll-reveal.component.js +130 -90
  9. package/public/scripts/components/scroll-reveal/scroll-reveal.component.scss +39 -0
  10. package/public/scripts/components/scrollspy/scrollspy.component.min.js +1 -1
  11. package/public/scripts/components/slider/slider.component.min.js +1 -1
  12. package/public/scripts/components/smooth-scroll/smooth-scroll.component.min.js +1 -1
  13. package/public/scripts/components/tab/tab.component.min.js +1 -1
  14. package/public/scripts/components/toggle/toggle.component.min.js +1 -1
  15. package/public/scripts/components/tooltip/tooltip.component.min.js +1 -1
  16. package/public/scripts/enumerators/element.enum.js +3 -2
  17. package/public/scripts/index.js.LICENSE.txt +0 -130
package/public/scripts/components/scroll-reveal/scroll-reveal.component.js CHANGED
@@ -8,124 +8,164 @@
8
8
  * You can contact IRIS Interactive at the following
9
9
  * address: contact@iris-interactive.fr
10
10
  *
11
- * @author Lucas ROCHE
12
- * @date 01/02/2022 11:01
11
+ * @author Stephan JAMBOU
12
+ * @date 11/10/2023 18:27
13
13
  * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
14
  */
15
15
 
16
- import ScrollReveal from 'scrollreveal'
17
16
  import ElementEnum from "../../enumerators/element.enum";
17
+ import "./scroll-reveal.component.scss";
18
18
 
19
19
  export class HcScrollReveal {
20
20
 
21
+ //Default
22
+ static distanceDefault = getComputedStyle(document.documentElement).getPropertyValue('--hc-scroll-reveal-distance');
23
+ static delayDefault = getComputedStyle(document.documentElement).getPropertyValue('--hc-scroll-reveal-delay');
24
+ static durationDefault = getComputedStyle(document.documentElement).getPropertyValue('--hc-scroll-reveal-duration');
25
+ static intervalDefault = getComputedStyle(document.documentElement).getPropertyValue('--hc-scroll-reveal-interval');
26
+ static originDefault = getComputedStyle(document.documentElement).getPropertyValue('--hc-scroll-reveal-origin');
27
+ static timingFunctionDefault = getComputedStyle(document.documentElement).getPropertyValue('--hc-scroll-reveal-timing-function');
28
+
21
29
  constructor() {
22
- //Default
23
- const distanceDefault = '0px';
24
- const distanceDelay = 200;
25
- const distanceDuration = 800;
26
- const distanceInterval = 0;
27
- const distanceOrigin = 'bottom';
28
-
29
- //Config
30
- let distance = distanceDefault;
31
- let delay = distanceDelay;
32
- let duration = distanceDuration;
33
- let interval = distanceInterval;
34
- let origin = distanceOrigin;
35
-
36
-
37
- //Children by parent
38
- const parents = document.querySelectorAll(ElementEnum.scrollRevealParent);
39
- parents.forEach( parent => {
40
-
41
- if (parent.hasAttribute('data-hc-scroll-reveal-distance')) {
42
- distance = parent.getAttribute('data-hc-scroll-reveal-distance');
43
- } else {
44
- distance = distanceDefault;
45
- }
46
30
 
47
- if (parent.hasAttribute('data-hc-scroll-reveal-delay')) {
48
- delay = parent.getAttribute('data-hc-scroll-reveal-delay');
49
- } else {
50
- delay = distanceDelay;
51
- }
31
+ //Get all scrollreveal elements
32
+ 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)));
52
33
 
53
- if (parent.hasAttribute('data-hc-scroll-reveal-duration')) {
54
- duration = parent.getAttribute('data-hc-scroll-reveal-duration');
55
- } else {
56
- duration = distanceDuration;
57
- }
34
+ //Init scrollreveal
35
+ HcScrollReveal.init(items);
36
+ }
58
37
 
59
- if (parent.hasAttribute('data-hc-scroll-reveal-interval')) {
60
- interval = parent.getAttribute('data-hc-scroll-reveal-interval');
61
- } else {
62
- interval = distanceInterval;
63
- }
38
+ static init(items) {
39
+ let childOffset = 0;
40
+ let childRowCount = 1;
41
+ const observerOptions = {
42
+ root: null,
43
+ rootMargin: '-10px 0px -10px 0px',
44
+ threshold: 0.1
45
+ }
46
+
47
+ const observer = new IntersectionObserver((entries) => {
48
+ entries.forEach(entry => {
49
+ if (entry.isIntersecting) {
50
+ if (entry.target.classList.contains('hc-sr')) {
51
+ entry.target.classList.add('hc-sr--show');
52
+ }
53
+ } else {
54
+ entry.target.classList.add('hc-sr');
55
+ }
56
+ });
57
+ }, observerOptions)
58
+
59
+ items.forEach(item => {
60
+ let options;
61
+ let isChild = false;
64
62
 
65
- if (parent.hasAttribute('data-hc-scroll-reveal-origin')) {
66
- origin = parent.getAttribute('data-hc-scroll-reveal-origin');
63
+ //Get options
64
+ if (item.hasAttribute('data-hc-scroll-reveal')) {
65
+ options = HcScrollReveal.getOptions(item);
67
66
  } else {
68
- origin = distanceOrigin;
69
- }
67
+ let parent = item.parentElement;
70
68
 
71
- ScrollReveal().reveal(parent.querySelectorAll(ElementEnum.scrollRevealChildren), {
72
- distance: distance,
73
- delay: delay,
74
- duration: duration,
75
- interval: interval,
76
- origin: origin,
77
- afterReveal: function (element) {
78
- element.setAttribute('hc-scroll-reveal-is-visible', '');
79
- },
80
- });
81
- });
69
+ if (item.hasAttribute('data-hc-scroll-reveal-parent') && parent.hasAttribute('data-hc-scroll-reveal-parent')) {
70
+ isChild = true;
71
+ } else if (!item.hasAttribute('data-hc-noscroll-reveal')) {
72
+ isChild = true;
73
+ }
82
74
 
83
- //Specific item
84
- const items = document.querySelectorAll(ElementEnum.scrollReveal);
85
- items.forEach( item => {
75
+ options = HcScrollReveal.getOptions(parent);
76
+ }
86
77
 
87
- if (item.hasAttribute('data-hc-scroll-reveal-distance')) {
88
- distance = item.getAttribute('data-hc-scroll-reveal-distance');
89
- } else {
90
- distance = distanceDefault;
78
+ //Apply options if different than default
79
+ if (options.distance !== HcScrollReveal.distanceDefault && options.distance !== '') {
80
+ item.style.setProperty('--hc-scroll-reveal-distance', options.distance);
91
81
  }
92
82
 
93
- if (item.hasAttribute('data-hc-scroll-reveal-delay')) {
94
- delay = item.getAttribute('data-hc-scroll-reveal-delay');
95
- } else {
96
- delay = distanceDelay;
83
+ if (options.delay !== HcScrollReveal.delayDefault && options.delay !== null) {
84
+ item.style.setProperty('--hc-scroll-reveal-delay', options.delay);
97
85
  }
98
86
 
99
- if (item.hasAttribute('data-hc-scroll-reveal-duration')) {
100
- duration = item.getAttribute('data-hc-scroll-reveal-duration');
101
- } else {
102
- duration = distanceDuration;
87
+ if (options.duration !== HcScrollReveal.durationDefault && options.duration !== null) {
88
+ item.style.setProperty('--hc-scroll-reveal-duration', options.duration);
103
89
  }
104
90
 
105
- if (item.hasAttribute('data-hc-scroll-reveal-interval')) {
106
- interval = item.getAttribute('data-hc-scroll-reveal-interval');
107
- } else {
108
- interval = distanceInterval;
91
+ if (options.timing !== HcScrollReveal.timingFunctionDefault && options.timing !== null) {
92
+ item.style.setProperty('--hc-scroll-reveal-timing-function', options.timing);
109
93
  }
110
94
 
111
- if (item.hasAttribute('data-hc-scroll-reveal-origin')) {
112
- origin = item.getAttribute('data-hc-scroll-reveal-origin');
113
- } else {
114
- origin = distanceOrigin;
95
+ //Interval on items in same row
96
+ if (options.interval !== HcScrollReveal.intervalDefault && options.interval !== null && options.delay !== null) {
97
+ if (isChild) {
98
+ if (childOffset == item.offsetTop) {
99
+ let delayValue = parseInt(options.delay.replace('ms', ''));
100
+ let intervalValue = parseInt(options.interval.replace('ms', ''));
101
+ let newDelay = delayValue + (intervalValue * childRowCount);
102
+ options.delay = newDelay+'ms';
103
+ childRowCount++;
104
+ } else {
105
+ childOffset = item.offsetTop;
106
+ childRowCount = 1;
107
+ }
108
+
109
+ item.style.setProperty('--hc-scroll-reveal-delay', options.delay);
110
+ }
115
111
  }
116
112
 
117
- ScrollReveal().reveal(item, {
118
- distance: distance,
119
- delay: delay,
120
- duration: duration,
121
- interval: interval,
122
- origin: origin,
123
- afterReveal: function (element) {
124
- element.setAttribute('hc-scroll-reveal-is-visible', '');
125
- },
126
- });
113
+ //Generate translate according to origin
114
+ if (options.origin !== '') {
115
+ item.style.setProperty('--hc-scroll-reveal-origin', options.origin);
116
+
117
+ if (options.origin == 'top') {
118
+ item.style.setProperty('--hc-scroll-reveal-translate', 'translateY(calc(var(--hc-scroll-reveal-distance) * -1))');
119
+ } else if(options.origin == 'left') {
120
+ item.style.setProperty('--hc-scroll-reveal-translate', 'translateX(calc(var(--hc-scroll-reveal-distance) * -1))');
121
+ } else if(options.origin == 'right') {
122
+ item.style.setProperty('--hc-scroll-reveal-translate', 'translateX(var(--hc-scroll-reveal-distance))');
123
+ } else {
124
+ item.style.setProperty('--hc-scroll-reveal-translate', 'translateY(var(--hc-scroll-reveal-distance))');
125
+ }
126
+ }
127
+
128
+ //Observe
129
+ observer.observe(item);
127
130
  });
128
131
  }
132
+
133
+ static getOptions(item) {
134
+ let options = {
135
+ distance: HcScrollReveal.distanceDefault,
136
+ delay: HcScrollReveal.delayDefault,
137
+ duration: HcScrollReveal.durationDefault,
138
+ interval: HcScrollReveal.intervalDefault,
139
+ origin: HcScrollReveal.originDefault,
140
+ timing: HcScrollReveal.timingFunctionDefault
141
+ }
142
+
143
+ if (item.hasAttribute('data-hc-scroll-reveal-distance')) {
144
+ options.distance = item.getAttribute('data-hc-scroll-reveal-distance');
145
+ }
146
+
147
+ if (item.hasAttribute('data-hc-scroll-reveal-delay')) {
148
+ options.delay = item.getAttribute('data-hc-scroll-reveal-delay')+'ms';
149
+ }
150
+
151
+ if (item.hasAttribute('data-hc-scroll-reveal-duration')) {
152
+ options.duration = item.getAttribute('data-hc-scroll-reveal-duration')+'ms';
153
+ }
154
+
155
+ if (item.hasAttribute('data-hc-scroll-reveal-interval')) {
156
+ options.interval = item.getAttribute('data-hc-scroll-reveal-interval')+'ms';
157
+ }
158
+
159
+ if (item.hasAttribute('data-hc-scroll-reveal-origin')) {
160
+ options.origin = item.getAttribute('data-hc-scroll-reveal-origin');
161
+ }
162
+
163
+ if (item.hasAttribute('data-hc-scroll-reveal-timing-function')) {
164
+ options.timing = item.getAttribute('data-hc-scroll-reveal-timing-function');
165
+ }
166
+
167
+ return options;
168
+ }
129
169
  }
130
170
 
131
171
  const hc_scroll_reveal = function () {
package/public/scripts/components/scroll-reveal/scroll-reveal.component.scss ADDED
@@ -0,0 +1,39 @@
1
+ /* Init scroll reveal
2
+ / ================================================== */
3
+ :root {
4
+ --hc-scroll-reveal-distance: 0px;
5
+ --hc-scroll-reveal-delay: 200ms;
6
+ --hc-scroll-reveal-duration: 800ms;
7
+ --hc-scroll-reveal-interval: 0ms;
8
+ --hc-scroll-reveal-origin: bottom;
9
+ --hc-scroll-reveal-timing-function: ease;
10
+ --hc-scroll-reveal-translate: translateY(0);
11
+ }
12
+
13
+ .has-iris-scroll-reveal {
14
+
15
+ .hc-sr {
16
+ opacity: 0;
17
+ transform: var(--hc-scroll-reveal-translate);
18
+ }
19
+
20
+ .hc-sr--show {
21
+ animation-name: scrollRevealAnimation;
22
+ animation-duration: var(--hc-scroll-reveal-duration);
23
+ animation-delay: var(--hc-scroll-reveal-delay);
24
+ animation-fill-mode: forwards;
25
+ animation-timing-function: var(--hc-scroll-reveal-timing-function);
26
+ }
27
+ }
28
+
29
+ @keyframes scrollRevealAnimation {
30
+ 0% {
31
+ opacity: 0;
32
+ transform: var(--hc-scroll-reveal-translate);
33
+ }
34
+
35
+ 100% {
36
+ opacity: 1;
37
+ transform: translate(0);
38
+ }
39
+ }
package/public/scripts/components/scrollspy/scrollspy.component.min.js CHANGED
@@ -1 +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)})();
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)})();