@iris.interactive/handcook 2.6.14 → 2.6.17

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 (9) hide show
  1. package/README.md +1 -1
  2. package/package.json +2 -2
  3. package/public/index.html +20 -0
  4. package/public/scripts/components/collapse/collapse.component.js +12 -1
  5. package/public/scripts/components/modal/modal.component.js +12 -16
  6. package/public/scripts/components/slider/slider.component.js +83 -68
  7. package/public/scripts/components/smooth-scroll/smooth-scroll.component.js +8 -16
  8. package/public/scripts/enumerators/element.enum.js +1 -1
  9. package/public/styles/scss/_variables.scss +1 -6
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # Welcome to HandCook 👨‍🍳
2
- ![Version](https://img.shields.io/badge/version-2.6.14-blue.svg?cacheSeconds=2592000)
2
+ ![Version](https://img.shields.io/badge/version-2.6.17-blue.svg?cacheSeconds=2592000)
3
3
  ![Prerequisite](https://img.shields.io/badge/node-%3E%3D%2012.14.0-blue.svg)
4
4
  [![License: UNLICENSED](https://img.shields.io/badge/License-UNLICENSED-yellow.svg)](#)
5
5
  [![Twitter: captain\_iris](https://img.shields.io/twitter/follow/captain\_iris.svg?style=social)](https://twitter.com/captain\_iris)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iris.interactive/handcook",
3
- "version": "2.6.14",
3
+ "version": "2.6.17",
4
4
  "description": "The web cooking by IRIS Interactive",
5
5
  "main": "./public/scripts/index.js",
6
6
  "scripts": {
@@ -35,7 +35,7 @@
35
35
  "dependencies": {
36
36
  "@fancyapps/ui": "^4.0.22",
37
37
  "bootstrap": "^5.1.3",
38
- "swiper": "^8.0.6",
38
+ "swiper": "8.0.6",
39
39
  "tippy.js": "^6.3.7",
40
40
  "vanilla-lazyload": "^17.6.1"
41
41
  }
package/public/index.html CHANGED
@@ -375,6 +375,26 @@
375
375
  <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
376
376
  </div>
377
377
  </div>
378
+ <div style="position: relative">
379
+ <div data-hc-slider data-hc-slider-arrows data-hc-slider-arrow-prev=".button-prev-test">
380
+ <div>
381
+ <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
382
+ </div>
383
+ <div>
384
+ <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
385
+ </div>
386
+ <div>
387
+ <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
388
+ </div>
389
+ <div>
390
+ <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
391
+ </div>
392
+ <div>
393
+ <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
394
+ </div>
395
+ </div>
396
+ <a href="#" class="button-prev-test">Bouton precedent de test</a>
397
+ </div>
378
398
  </div>
379
399
  </div>
380
400
  </article>
package/public/scripts/components/collapse/collapse.component.js CHANGED
@@ -46,13 +46,24 @@ export class HcCollapse {
46
46
  });
47
47
  });
48
48
  document.querySelectorAll('[data-hc-collapse]').forEach(trigger => {
49
+ const triggerEls = document.querySelectorAll(`[data-hc-collapse-trigger="${trigger.getAttribute('id')}"]`);
49
50
  trigger.addEventListener('hide.bs.collapse', (e) => {
51
+ triggerEls.forEach(triggerEl => {
52
+ if (triggerEl.classList.contains('active')) {
53
+ triggerEl.classList.remove('active');
54
+ }
55
+ });
50
56
  trigger.dispatchEvent(this.hideEvent);
51
57
  });
52
58
  trigger.addEventListener('hidden.bs.collapse', (e) => {
53
59
  trigger.dispatchEvent(this.hiddenEvent);
54
60
  });
55
61
  trigger.addEventListener('show.bs.collapse', (e) => {
62
+ triggerEls.forEach(triggerEl => {
63
+ if (!triggerEl.classList.contains('active')) {
64
+ triggerEl.classList.add('active');
65
+ }
66
+ });
56
67
  trigger.dispatchEvent(this.showEvent);
57
68
  });
58
69
  trigger.addEventListener('shown.bs.collapse', (e) => {
@@ -73,4 +84,4 @@ export class HcCollapse {
73
84
  const hc_collapse = function (trigger) {
74
85
  return new HcCollapse(trigger);
75
86
  };
76
- export default hc_collapse;
87
+ export default hc_collapse;
package/public/scripts/components/modal/modal.component.js CHANGED
@@ -27,23 +27,19 @@ export class HcModal {
27
27
  constructor(elements = ElementEnum.modal, overrideOptions = {}) {
28
28
  this.createEvent();
29
29
  document.querySelectorAll(elements).forEach(element => {
30
- Fancybox.bind(element);
31
- element.addEventListener('click', (e) => {
32
- e.preventDefault();
33
- this.initOptions();
34
- Object.assign(this.options, overrideOptions);
35
- this.options.src = this.options.src != '' ? this.options.src : (e.currentTarget.hasAttribute('href') ? e.currentTarget.getAttribute('href') : (e.currentTarget.hasAttribute('data-hc-src') ? e.currentTarget.dataset.hcSrc : ''));
36
- this.options.parentEl = this.options.parentEl !== null ? document.querySelector(this.options.parentEl) : (e.currentTarget.hasAttribute('data-hc-modal-parent') ? document.querySelector(e.currentTarget.getAttribute('data-hc-modal-parent')) : '');
37
- Fancybox.show([this.options], {
38
- on: {
39
- reveal: () => {
40
- document.dispatchEvent(this.showEvent);
41
- },
42
- closing: () => {
43
- document.dispatchEvent(this.hideEvent);
44
- }
30
+ this.initOptions();
31
+ Object.assign(this.options, overrideOptions);
32
+ this.options.src = this.options.src != '' ? this.options.src : (element.hasAttribute('href') ? element.getAttribute('href') : (element.hasAttribute('data-hc-src') ? element.dataset.hcSrc : ''));
33
+ this.options.parentEl = this.options.parentEl !== null ? document.querySelector(this.options.parentEl) : (element.hasAttribute('data-hc-modal-parent') ? document.querySelector(element.getAttribute('data-hc-modal-parent')) : '');
34
+ Fancybox.bind(elements, this.options, {
35
+ on: {
36
+ reveal: () => {
37
+ document.dispatchEvent(this.showEvent);
38
+ },
39
+ closing: () => {
40
+ document.dispatchEvent(this.hideEvent);
45
41
  }
46
- });
42
+ }
47
43
  });
48
44
  });
49
45
  }
package/public/scripts/components/slider/slider.component.js CHANGED
@@ -22,14 +22,27 @@ export class HcSlider {
22
22
  slider;
23
23
  instances = [];
24
24
 
25
+ breakpoints = [{
26
+ name: "medium",
27
+ value: 650
28
+ },
29
+ {
30
+ name: "large",
31
+ value: 1000
32
+ },
33
+ {
34
+ name: "xlarge",
35
+ value: 1453
36
+ }];
37
+
25
38
  // Options
26
39
  options = {};
27
40
 
28
- constructor(elements = ElementEnum.slider, options = {}) {
41
+ constructor(elements = ElementEnum.slider) {
29
42
  this.initOptions();
30
43
  document.querySelectorAll(elements).forEach(element => {
31
44
  this.slider = element;
32
- this.setOptions(options);
45
+ this.setOptions();
33
46
  this.buildDom();
34
47
  const instance = new Swiper(element, this.options);
35
48
  this.instances.push(instance);
@@ -37,7 +50,7 @@ export class HcSlider {
37
50
  });
38
51
  }
39
52
 
40
- setOptions(options) {
53
+ setOptions() {
41
54
  const attr = this.slider.getAttribute('data-hc-slider-autoplay');
42
55
  if (attr !== null) {
43
56
  this.options['autoplay'] = {
@@ -54,32 +67,21 @@ export class HcSlider {
54
67
  this.options['slidesPerView'] = parseFloat(slidesPerView);
55
68
  }
56
69
 
57
- const gapMedium = this.slider.getAttribute('data-hc-slider-gap-medium');
58
- const slidesPerViewMedium = this.slider.getAttribute('data-hc-slider-slides-per-view-medium');
59
- if (gapMedium !== null) {
60
- this.options['breakpoints'][650]['spaceBetween'] = parseFloat(gapMedium);
61
- }
62
- if (slidesPerViewMedium !== null) {
63
- this.options['breakpoints'][650]['slidesPerView'] = parseFloat(slidesPerViewMedium);
64
- }
65
-
66
- const gapLarge = this.slider.getAttribute('data-hc-slider-gap-large');
67
- const slidesPerViewLarge = this.slider.getAttribute('data-hc-slider-slides-per-view-large');
68
- if (gapLarge !== null) {
69
- this.options['breakpoints']['1000']['spaceBetween'] = parseFloat(gapLarge);
70
- }
71
- if (slidesPerViewLarge !== null) {
72
- this.options['breakpoints']['1000']['slidesPerView'] = parseFloat(slidesPerViewLarge);
73
- }
74
-
75
- const gapXlarge = this.slider.getAttribute('data-hc-slider-gap-xlarge');
76
- const slidesPerViewXlarge = this.slider.getAttribute('data-hc-slider-slides-per-view-xlarge');
77
- if (gapXlarge !== null) {
78
- this.options['breakpoints']['1453']['spaceBetween'] = parseFloat(gapXlarge);
79
- }
80
- if (slidesPerViewXlarge !== null) {
81
- this.options['breakpoints']['1453']['slidesPerView'] = parseFloat(slidesPerViewXlarge);
82
- }
70
+ let breakpointOptions = {};
71
+ this.breakpoints.forEach(breakpoint => {
72
+ const gap = this.slider.getAttribute(`data-hc-slider-gap-${breakpoint.name}`);
73
+ const slidesPerView = this.slider.getAttribute(`data-hc-slider-slides-per-view-${breakpoint.name}`);
74
+ if (gap !== null || slidesPerView !== null) {
75
+ breakpointOptions[breakpoint.value] = {};
76
+ if (gap !== null) {
77
+ breakpointOptions[breakpoint.value]['spaceBetween'] = parseFloat(gap);
78
+ }
79
+ if (slidesPerView !== null) {
80
+ breakpointOptions[breakpoint.value]['slidesPerView'] = parseFloat(slidesPerView);
81
+ }
82
+ }
83
+ });
84
+ this.options.breakpoints = breakpointOptions;
83
85
 
84
86
  const freeMode = this.slider.getAttribute('data-hc-slider-free-mode');
85
87
  if (freeMode !== null) {
@@ -88,8 +90,28 @@ export class HcSlider {
88
90
  }
89
91
  }
90
92
 
91
- // Override option passing in function js
92
- Object.assign( this.options, options );
93
+ if (this.slider.hasAttribute('data-hc-slider-pagination')) {
94
+ this.options['pagination'] = {
95
+ el: '.hc-slider-pagination',
96
+ type: 'bullets',
97
+ clickable: true,
98
+ bulletClass: 'hc-slider-pagination-bullet',
99
+ clickableClass: 'hc-slider-pagination-clickable',
100
+ currentClass: 'hc-slider-pagination-current',
101
+ bulletActiveClass: 'hc-slider-pagination-bullet-active'
102
+ };
103
+ }
104
+ if (this.slider.hasAttribute('data-hc-slider-arrows')) {
105
+ const suffix = this.slider.getAttribute('data-hc-slider-arrows');
106
+ const prevElement = this.slider.hasAttribute('data-hc-slider-arrow-prev') ? this.slider.getAttribute('data-hc-slider-arrow-prev') : `.hc-slider-button-prev${suffix}`;
107
+ const nextElement = this.slider.hasAttribute('data-hc-slider-arrow-next') ? this.slider.getAttribute('data-hc-slider-arrow-next') : `.hc-slider-button-next${suffix}`;
108
+ this.options['navigation'] = {
109
+ prevEl: prevElement,
110
+ nextEl: nextElement,
111
+ disabledClass: `hc-slider-button-disabled${suffix}`,
112
+ hiddenClass: `hc-slider-button-hidden${suffix}`
113
+ };
114
+ }
93
115
  }
94
116
 
95
117
  buildDom() {
@@ -110,38 +132,35 @@ export class HcSlider {
110
132
  this.slider.appendChild(wrapperElement);
111
133
 
112
134
  // On ajout les différentes div utile en fonction des options passées
113
- if (this.slider.hasAttribute('data-hc-slider-pagination')) {
114
-
115
- const paginationElement = document.createElement("div");
116
- paginationElement.classList.add("hc-slider-pagination");
117
- this.slider.appendChild(paginationElement);
118
-
119
- this.options['pagination'] = {
120
- el: '.hc-slider-pagination',
121
- type: 'bullets',
122
- clickable: true,
123
- bulletClass: 'hc-slider-pagination-bullet',
124
- clickableClass: 'hc-slider-pagination-clickable',
125
- currentClass: 'hc-slider-pagination-current',
126
- bulletActiveClass: 'hc-slider-pagination-bullet-active'
127
- };
135
+ // et si les elements n'existent pas déjà
136
+ if (this.options.pagination !== false) {
137
+
138
+ const el = this.slider.querySelectorAll(this.options.pagination.el);
139
+ if (el.length === 0) {
140
+ const paginationElement = document.createElement("div");
141
+ paginationElement.classList.add(this.options.pagination.el.substr(1));
142
+ this.slider.appendChild(paginationElement);
143
+ }
128
144
  }
129
- if (this.slider.hasAttribute('data-hc-slider-arrows')) {
130
-
131
- const buttonPrev = document.createElement("div");
132
- buttonPrev.classList.add("hc-slider-button-prev");
133
- this.slider.appendChild(buttonPrev);
134
-
135
- const buttonNext = document.createElement("div");
136
- buttonNext.classList.add("hc-slider-button-next");
137
- this.slider.appendChild(buttonNext);
145
+ if (this.options.navigation !== false) {
146
+
147
+ if (!this.slider.hasAttribute('data-hc-slider-arrow-prev')) {
148
+ const prevEl = this.slider.querySelectorAll(this.options.navigation.prevEl);
149
+ if (prevEl.length === 0) {
150
+ const buttonPrev = document.createElement("div");
151
+ buttonPrev.classList.add(this.options.navigation.prevEl.substr(1));
152
+ this.slider.appendChild(buttonPrev);
153
+ }
154
+ }
138
155
 
139
- this.options['navigation'] = {
140
- nextEl: '.hc-slider-button-next',
141
- prevEl: '.hc-slider-button-prev',
142
- disabledClass: 'hc-slider-button-disabled',
143
- hiddenClass: 'hc-slider-button-hidden',
144
- };
156
+ if (!this.slider.hasAttribute('data-hc-slider-arrow-next')) {
157
+ const nextEl = this.slider.querySelectorAll(this.options.navigation.nextEl);
158
+ if (nextEl.length === 0) {
159
+ const buttonNext = document.createElement("div");
160
+ buttonNext.classList.add(this.options.navigation.nextEl.substr(1));
161
+ this.slider.appendChild(buttonNext);
162
+ }
163
+ }
145
164
  }
146
165
  }
147
166
 
@@ -180,16 +199,12 @@ export class HcSlider {
180
199
  swiper.$el.find('.swiper-slide-prev').addClass('hc-slider-slide-prev');
181
200
  }
182
201
  },
183
- breakpoints: {
184
- 650: {},
185
- 1000: {},
186
- 1453: {},
187
- }
202
+ breakpoints: {}
188
203
  };
189
204
  }
190
205
  }
191
206
 
192
- const hc_slider = function (trigger, options) {
193
- return new HcSlider(trigger, options);
207
+ const hc_slider = function (trigger) {
208
+ return new HcSlider(trigger);
194
209
  }
195
210
  export default hc_slider;
package/public/scripts/components/smooth-scroll/smooth-scroll.component.js CHANGED
@@ -12,29 +12,24 @@
12
12
  * @date 28/01/2022 14:27
13
13
  * @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
14
14
  */
15
-
16
15
  import ElementEnum from "../../enumerators/element.enum";
17
16
 
18
17
  export class HcSmoothScroll {
19
-
20
18
  constructor(triggerAttribute = ElementEnum.scrollSmooth, durationAnimation = 1000) {
21
-
22
- document.addEventListener('click', (e) => {
23
- if(e.target && e.target.hasAttribute(ElementEnum.scrollSmooth)) {
19
+ document.querySelectorAll(triggerAttribute).forEach(trigger => {
20
+ trigger.addEventListener('click', (e) => {
24
21
  e.preventDefault();
25
- const target = (e.target.getAttribute('href') != '') ? document.querySelector(e.target.getAttribute('href')) : document.querySelector(e.target.dataset.href);
26
- const shift = (e.target.dataset.shift !== undefined) ? e.target.dataset.shift : 0;
22
+ const target = (e.currentTarget.getAttribute('href') != '') ? document.querySelector(e.currentTarget.getAttribute('href')) : document.querySelector(e.currentTarget.dataset.hcSmoothScrollHref);
23
+ const shift = (e.currentTarget.dataset.hcSmoothScrollShift !== undefined) ? e.currentTarget.dataset.hcSmoothScrollShift : 0;
27
24
  const anim = requestAnimationFrame((timestamp) => {
28
25
  const stamp = timestamp || new Date().getTime();
29
26
  const start = stamp;
30
-
31
27
  const startScrollOffset = window.pageYOffset;
32
28
  const scrollEndElemTop = target.getBoundingClientRect().top - shift;
33
-
34
29
  this.scrollToElem(start, stamp, durationAnimation, scrollEndElemTop, startScrollOffset);
35
30
  })
36
- }
37
- });
31
+ });
32
+ })
38
33
  }
39
34
 
40
35
  easeInCubic(t) {
@@ -44,11 +39,8 @@ export class HcSmoothScroll {
44
39
  scrollToElem(startTime, currentTime, duration, scrollEndElemTop, startScrollOffset) {
45
40
  const runtime = currentTime - startTime;
46
41
  let progress = runtime / duration;
47
-
48
42
  progress = Math.min(progress, 1);
49
-
50
43
  const ease = this.easeInCubic(progress);
51
-
52
44
  window.scroll(0, startScrollOffset + (scrollEndElemTop * ease));
53
45
  if (runtime < duration) {
54
46
  requestAnimationFrame((timestamp) => {
@@ -59,7 +51,7 @@ export class HcSmoothScroll {
59
51
  }
60
52
  }
61
53
 
62
- const hc_smooth_scroll = function(trigger, options) {
63
- new HcSmoothScroll(trigger, options);
54
+ const hc_smooth_scroll = function (trigger, durationAnimation) {
55
+ new HcSmoothScroll(trigger, durationAnimation);
64
56
  }
65
57
  export default hc_smooth_scroll;
package/public/scripts/enumerators/element.enum.js CHANGED
@@ -16,7 +16,7 @@
16
16
  export default class ElementEnum {
17
17
  static tooltip = '[data-hc-tooltip], [data-hc-popover]';
18
18
  static popover = '[data-hc-popover]';
19
- static scrollSmooth = 'data-hc-smooth-scroll';
19
+ static scrollSmooth = '[data-hc-smooth-scroll]';
20
20
  static modal = '[data-hc-modal]';
21
21
  static lightbox = '[data-hc-lightbox]';
22
22
  static dropdown = '[data-hc-dropdown]';
package/public/styles/scss/_variables.scss CHANGED
@@ -312,12 +312,7 @@ $switch-off: var(--iris--switch--color-off);
312
312
  $highlight-color: var(--iris--highlight--color);
313
313
  $highlight-background-color: var(--iris--highlight--background-color);
314
314
  $highlight-link-color: var(--iris--highlight--color-link);
315
- $highlight-link-color-hover: var(--iris--highlight--color-link-hover);
316
-
317
- // Highlight
318
- $highlight-color: var(--iris--highlight--color);
319
- $highlight-background-color: var(--iris--highlight--background-color);
320
- $highlight-link-color: var(--iris--highlight--color-link);
315
+ $highlight-title-color: var(--iris--highlight--color-title);
321
316
  $highlight-link-color-hover: var(--iris--highlight--color-link-hover);
322
317
 
323
318
  // Single SIT highlight