@iris.interactive/handcook 4.0.13 → 4.0.15

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 (18) 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 +124 -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.js +1 -0
  12. package/public/scripts/components/slider/slider.component.min.js +1 -1
  13. package/public/scripts/components/smooth-scroll/smooth-scroll.component.min.js +1 -1
  14. package/public/scripts/components/tab/tab.component.min.js +1 -1
  15. package/public/scripts/components/toggle/toggle.component.min.js +1 -1
  16. package/public/scripts/components/tooltip/tooltip.component.min.js +1 -1
  17. package/public/scripts/enumerators/element.enum.js +3 -2
  18. package/public/scripts/index.js.LICENSE.txt +0 -130
package/public/scripts/components/scroll-reveal/scroll-reveal.component.js CHANGED
@@ -8,124 +8,158 @@
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.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-parent') && !item.hasAttribute('data-hc-scroll-reveal') && !item.hasAttribute('data-hc-noscroll-reveal')) {
65
+ let parent = item.parentElement;
66
+ isChild = true;
67
+ options = HcScrollReveal.getOptions(parent);
67
68
  } else {
68
- origin = distanceOrigin;
69
+ options = HcScrollReveal.getOptions(item);
69
70
  }
70
71
 
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
- });
82
-
83
- //Specific item
84
- const items = document.querySelectorAll(ElementEnum.scrollReveal);
85
- items.forEach( item => {
72
+ //Apply options if different than default
73
+ if (options.distance !== HcScrollReveal.distanceDefault && options.distance !== '') {
74
+ item.style.setProperty('--hc-scroll-reveal-distance', options.distance);
75
+ }
86
76
 
87
- if (item.hasAttribute('data-hc-scroll-reveal-distance')) {
88
- distance = item.getAttribute('data-hc-scroll-reveal-distance');
89
- } else {
90
- distance = distanceDefault;
77
+ if (options.delay !== HcScrollReveal.delayDefault && options.delay !== null) {
78
+ item.style.setProperty('--hc-scroll-reveal-delay', options.delay);
91
79
  }
92
80
 
93
- if (item.hasAttribute('data-hc-scroll-reveal-delay')) {
94
- delay = item.getAttribute('data-hc-scroll-reveal-delay');
95
- } else {
96
- delay = distanceDelay;
81
+ if (options.duration !== HcScrollReveal.durationDefault && options.duration !== null) {
82
+ item.style.setProperty('--hc-scroll-reveal-duration', options.duration);
97
83
  }
98
84
 
99
- if (item.hasAttribute('data-hc-scroll-reveal-duration')) {
100
- duration = item.getAttribute('data-hc-scroll-reveal-duration');
101
- } else {
102
- duration = distanceDuration;
85
+ if (options.timing !== HcScrollReveal.timingFunctionDefault && options.timing !== null) {
86
+ item.style.setProperty('--hc-scroll-reveal-timing-function', options.timing);
103
87
  }
104
88
 
105
- if (item.hasAttribute('data-hc-scroll-reveal-interval')) {
106
- interval = item.getAttribute('data-hc-scroll-reveal-interval');
107
- } else {
108
- interval = distanceInterval;
89
+ //Interval on items in same row
90
+ if (options.interval !== HcScrollReveal.intervalDefault && options.interval !== null && options.duration !== null) {
91
+ if (isChild) {
92
+ if (childOffset == item.offsetTop) {
93
+ let durationValue = parseInt(options.duration.replace('ms', ''));
94
+ let intervalValue = parseInt(options.interval.replace('ms', ''));
95
+ let newDuration = durationValue + (intervalValue * childRowCount);
96
+ options.duration = newDuration+'ms';
97
+ childRowCount++;
98
+ } else {
99
+ childOffset = item.offsetTop;
100
+ childRowCount = 1;
101
+ }
102
+
103
+ item.style.setProperty('--hc-scroll-reveal-duration', options.duration);
104
+ }
109
105
  }
110
106
 
111
- if (item.hasAttribute('data-hc-scroll-reveal-origin')) {
112
- origin = item.getAttribute('data-hc-scroll-reveal-origin');
113
- } else {
114
- origin = distanceOrigin;
107
+ //Generate translate according to origin
108
+ if (options.origin !== '') {
109
+ item.style.setProperty('--hc-scroll-reveal-origin', options.origin);
110
+
111
+ if (options.origin == 'top') {
112
+ item.style.setProperty('--hc-scroll-reveal-translate', 'translateY(calc(var(--hc-scroll-reveal-distance) * -1))');
113
+ } else if(options.origin == 'left') {
114
+ item.style.setProperty('--hc-scroll-reveal-translate', 'translateX(calc(var(--hc-scroll-reveal-distance) * -1))');
115
+ } else if(options.origin == 'right') {
116
+ item.style.setProperty('--hc-scroll-reveal-translate', 'translateX(var(--hc-scroll-reveal-distance))');
117
+ } else {
118
+ item.style.setProperty('--hc-scroll-reveal-translate', 'translateY(var(--hc-scroll-reveal-distance))');
119
+ }
115
120
  }
116
121
 
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
- });
122
+ //Observe
123
+ observer.observe(item);
127
124
  });
128
125
  }
126
+
127
+ static getOptions(item) {
128
+ let options = {
129
+ distance: HcScrollReveal.distanceDefault,
130
+ delay: HcScrollReveal.delayDefault,
131
+ duration: HcScrollReveal.durationDefault,
132
+ interval: HcScrollReveal.intervalDefault,
133
+ origin: HcScrollReveal.originDefault,
134
+ timing: HcScrollReveal.timingFunctionDefault
135
+ }
136
+
137
+ if (item.hasAttribute('data-hc-scroll-reveal-distance')) {
138
+ options.distance = item.getAttribute('data-hc-scroll-reveal-distance');
139
+ }
140
+
141
+ if (item.hasAttribute('data-hc-scroll-reveal-delay')) {
142
+ options.delay = item.getAttribute('data-hc-scroll-reveal-delay')+'ms';
143
+ }
144
+
145
+ if (item.hasAttribute('data-hc-scroll-reveal-duration')) {
146
+ options.duration = item.getAttribute('data-hc-scroll-reveal-duration')+'ms';
147
+ }
148
+
149
+ if (item.hasAttribute('data-hc-scroll-reveal-interval')) {
150
+ options.interval = item.getAttribute('data-hc-scroll-reveal-interval')+'ms';
151
+ }
152
+
153
+ if (item.hasAttribute('data-hc-scroll-reveal-origin')) {
154
+ options.origin = item.getAttribute('data-hc-scroll-reveal-origin');
155
+ }
156
+
157
+ if (item.hasAttribute('data-hc-scroll-reveal-timing-function')) {
158
+ options.timing = item.getAttribute('data-hc-scroll-reveal-timing-function');
159
+ }
160
+
161
+ return options;
162
+ }
129
163
  }
130
164
 
131
165
  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)})();
package/public/scripts/components/slider/slider.component.js CHANGED
@@ -253,6 +253,7 @@ export class HcSlider {
253
253
  },
254
254
  grabCursor: true,
255
255
  loop: false,
256
+ watchSlidesProgress: true,
256
257
  on: {
257
258
  init: (swiper) => {
258
259