@iris.interactive/handcook 2.9.49 → 2.10.1

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 (4) hide show
  1. package/README.md +1 -1
  2. package/package.json +1 -1
  3. package/public/index.html +19 -0
  4. package/public/scripts/components/slider/slider.component.js +241 -202
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # Welcome to HandCook 👨‍🍳
2
- ![Version](https://img.shields.io/badge/version-2.9.49-blue.svg?cacheSeconds=2592000)
2
+ ![Version](https://img.shields.io/badge/version-2.10.1-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.9.49",
3
+ "version": "2.10.1",
4
4
  "description": "The web cooking by IRIS Interactive",
5
5
  "main": "./public/scripts/index.js",
6
6
  "scripts": {
package/public/index.html CHANGED
@@ -405,6 +405,25 @@
405
405
  </div>
406
406
  <a href="#" class="button-prev-test">Bouton precedent de test</a>
407
407
  </div>
408
+ <div style="position: relative">
409
+ <div data-hc-slider data-hc-slider-slides-per-view="1" data-hc-slider-slides-per-view-large="2" data-hc-slider-arrows data-hc-slider-arrow-prev=".button-prev-test" data-hc-slider-no-swipe="true" data-hc-slider-no-swipe-medium="false">
410
+ <div>
411
+ <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
412
+ </div>
413
+ <div>
414
+ <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
415
+ </div>
416
+ <div>
417
+ <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
418
+ </div>
419
+ <div>
420
+ <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
421
+ </div>
422
+ <div>
423
+ <img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
424
+ </div>
425
+ </div>
426
+ </div>
408
427
  </div>
409
428
  </div>
410
429
  </article>
package/public/scripts/components/slider/slider.component.js CHANGED
@@ -20,212 +20,251 @@ import "swiper/css/effect-fade";
20
20
 
21
21
  export class HcSlider {
22
22
 
23
- slider;
24
- instances = [];
25
-
26
- breakpoints = [{
27
- name: "medium",
28
- value: 651
29
- },
30
- {
31
- name: "large",
32
- value: 1001
33
- },
34
- {
35
- name: "xlarge",
36
- value: 1454
37
- }];
38
-
39
- // Options
40
- options = {};
41
-
42
- constructor(elements = ElementEnum.slider) {
43
- this.initOptions();
44
- document.querySelectorAll(elements).forEach(element => {
45
- this.slider = element;
46
- this.setOptions();
47
- this.buildDom();
48
- const instance = new Swiper(element, this.options);
49
- this.instances.push(instance);
50
- this.initOptions();
51
- });
52
- }
53
-
54
- setOptions() {
55
- const attr = this.slider.getAttribute('data-hc-slider-autoplay');
56
- if (attr !== null) {
57
- this.options['autoplay'] = {
58
- delay: attr
59
- }
60
- }
61
-
62
- const gap = this.slider.getAttribute('data-hc-slider-gap');
63
- const slidesPerView = this.slider.getAttribute('data-hc-slider-slides-per-view');
64
- if (gap !== null) {
65
- this.options['spaceBetween'] = parseFloat(gap);
66
- }
67
- if (slidesPerView !== null) {
68
- this.options['slidesPerView'] = parseFloat(slidesPerView);
69
- }
70
-
71
- let breakpointOptions = {};
72
- this.breakpoints.forEach(breakpoint => {
73
- const gap = this.slider.getAttribute(`data-hc-slider-gap-${breakpoint.name}`);
74
- const slidesPerView = this.slider.getAttribute(`data-hc-slider-slides-per-view-${breakpoint.name}`);
75
- if (gap !== null || slidesPerView !== null) {
76
- breakpointOptions[breakpoint.value] = {};
77
- if (gap !== null) {
78
- breakpointOptions[breakpoint.value]['spaceBetween'] = parseFloat(gap);
79
- }
80
- if (slidesPerView !== null) {
81
- breakpointOptions[breakpoint.value]['slidesPerView'] = parseFloat(slidesPerView);
82
- }
83
- }
84
- });
85
- this.options.breakpoints = breakpointOptions;
23
+ slider;
24
+ instances = [];
86
25
 
87
- const freeMode = this.slider.getAttribute('data-hc-slider-free-mode');
88
- if (freeMode !== null) {
89
- this.options['freeMode'] = {
90
- enabled: true
91
- }
92
- }
93
-
94
- if (this.slider.hasAttribute('data-hc-slider-pagination')) {
95
- this.options['pagination'] = {
96
- el: '.hc-slider-pagination',
97
- type: 'bullets',
98
- clickable: true,
99
- bulletClass: 'hc-slider-pagination-bullet',
100
- clickableClass: 'hc-slider-pagination-clickable',
101
- currentClass: 'hc-slider-pagination-current',
102
- bulletActiveClass: 'hc-slider-pagination-bullet-active'
103
- };
104
- }
105
- if (this.slider.hasAttribute('data-hc-slider-arrows')) {
106
- const suffix = this.slider.getAttribute('data-hc-slider-arrows');
107
- const prevElement = this.slider.hasAttribute('data-hc-slider-arrow-prev') ? this.slider.getAttribute('data-hc-slider-arrow-prev') : `.hc-slider-button-prev${suffix}`;
108
- const nextElement = this.slider.hasAttribute('data-hc-slider-arrow-next') ? this.slider.getAttribute('data-hc-slider-arrow-next') : `.hc-slider-button-next${suffix}`;
109
- this.options['navigation'] = {
110
- prevEl: prevElement,
111
- nextEl: nextElement,
112
- disabledClass: `hc-slider-button-disabled${suffix}`,
113
- hiddenClass: `hc-slider-button-hidden${suffix}`
114
- };
115
- }
116
-
117
- if (this.slider.hasAttribute('data-hc-slider-fade-effect')) {
118
- this.options['effect'] = 'fade';
119
- this.options['fadeEffect'] = {
120
- crossFade: true
121
- };
122
- }
123
-
124
- if (this.slider.hasAttribute('data-hc-slider-infinite')) {
125
- this.options['loop'] = true;
126
- }
127
-
128
- this.options['watchOverflow'] = true;
129
- }
130
-
131
- buildDom() {
132
- // Si le DOM n'est pas créé correctement, on le fait
133
- if (this.slider.querySelectorAll('.swiper-wrapper').length === 0) {
134
- // On recupère les slide items (element de DOM enfant de premier niveau)
135
- // et on leur ajoute la classe des slide item
136
- const items = [].slice.call(this.slider.children);
137
- items.forEach(item => {
138
- item.classList.add('swiper-slide');
139
- });
140
-
141
- // On ajoute la classe swiper a notre slider,
142
- // on crée la div wrapper et on insére les slider item dedans
143
- const wrapperElement = document.createElement("div");
144
- wrapperElement.classList.add("swiper-wrapper");
145
- items.forEach(item => {
146
- wrapperElement.appendChild(item);
147
- });
148
- this.slider.appendChild(wrapperElement);
149
-
150
- // On ajout les différentes div utile en fonction des options passées
151
- // et si les elements n'existent pas déjà
152
- if (this.options.pagination !== false) {
153
-
154
- const el = this.slider.querySelectorAll(this.options.pagination.el);
155
- if (el.length === 0) {
156
- const paginationElement = document.createElement("div");
157
- paginationElement.classList.add(this.options.pagination.el.substr(1));
158
- this.slider.appendChild(paginationElement);
159
- }
160
- }
161
- if (this.options.navigation !== false) {
162
-
163
- if (!this.slider.hasAttribute('data-hc-slider-arrow-prev')) {
164
- const prevEl = this.slider.querySelectorAll(this.options.navigation.prevEl);
165
- if (prevEl.length === 0) {
166
- const buttonPrev = document.createElement("div");
167
- buttonPrev.classList.add(this.options.navigation.prevEl.substr(1));
168
- this.slider.appendChild(buttonPrev);
169
- }
170
- }
171
-
172
- if (!this.slider.hasAttribute('data-hc-slider-arrow-next')) {
173
- const nextEl = this.slider.querySelectorAll(this.options.navigation.nextEl);
174
- if (nextEl.length === 0) {
175
- const buttonNext = document.createElement("div");
176
- buttonNext.classList.add(this.options.navigation.nextEl.substr(1));
177
- this.slider.appendChild(buttonNext);
178
- }
179
- }
26
+ breakpoints = [{
27
+ name: "medium",
28
+ value: 651
29
+ },
30
+ {
31
+ name: "large",
32
+ value: 1001
33
+ },
34
+ {
35
+ name: "xlarge",
36
+ value: 1454
37
+ }];
38
+
39
+ // Options
40
+ options = {};
41
+
42
+ /**
43
+ * @param elements
44
+ */
45
+ constructor(elements = ElementEnum.slider) {
46
+ this.initOptions();
47
+ document.querySelectorAll(elements).forEach(element => {
48
+ this.slider = element;
49
+ this.setOptions();
50
+ this.buildDom();
51
+ const instance = new Swiper(element, this.options);
52
+ this.instances.push(instance);
53
+ this.initOptions();
54
+ });
55
+ }
56
+
57
+ setOptions() {
58
+ const attr = this.slider.getAttribute('data-hc-slider-autoplay');
59
+ if (attr !== null) {
60
+ this.options['autoplay'] = {
61
+ delay: attr
62
+ }
63
+ }
64
+
65
+ let breakpointOptions = {};
66
+
67
+ let breakpointKeyConfig = [
68
+ {
69
+ 'hcKey': 'gap',
70
+ 'libKey': 'spaceBetween',
71
+ 'callback': 'parseFloat'
72
+ },
73
+ {
74
+ 'hcKey': 'slides-per-view',
75
+ 'libKey': 'slidesPerView',
76
+ 'callback': 'parseFloat'
77
+ },
78
+ {
79
+ 'hcKey': 'no-swipe',
80
+ 'libKey': 'allowTouchMove',
81
+ 'callback': 'parseReverseBool'
82
+ }
83
+ ];
84
+
85
+ breakpointKeyConfig.map(config => {
86
+ let defaultVal = this.slider.getAttribute(`data-hc-slider-${config.hcKey}`);
87
+ if (defaultVal !== null) {
88
+ if ( config.callback === 'parseReverseBool' ) {
89
+ defaultVal = defaultVal !== 'true';
90
+ }
91
+ if ( config.callback === 'parseBool' ) {
92
+ defaultVal = defaultVal === 'true';
93
+ }
94
+ if ( config.callback === 'parseFloat' ) {
95
+ defaultVal = parseFloat(defaultVal);
96
+ }
97
+ this.options[config.libKey] = defaultVal;
180
98
  }
181
- }
182
- }
183
-
184
- initOptions() {
185
- this.options = {
186
- slidesPerView: "auto",
187
- pagination: false,
188
- navigation: false,
189
- mousewheel: {
190
- forceToAxis: true,
191
- },
192
- grabCursor: true,
193
- loop: false,
194
- on: {
195
- init: (swiper) => {
196
-
197
- // layout
198
- swiper.$el.find('.swiper-wrapper').addClass('hc-slider-wrapper');
199
- swiper.$el.addClass('hc-slider-initialized');
200
-
201
- // slide item
202
- swiper.$el.find('.swiper-slide').addClass('hc-slider-slide');
203
- swiper.$el.find('.swiper-slide-active').addClass('hc-slider-slide-active');
204
- swiper.$el.find('.swiper-slide-next').addClass('hc-slider-slide-next');
205
- swiper.$el.find('.swiper-slide-prev').addClass('hc-slider-slide-prev');
206
-
207
- if (swiper.isLocked) {
208
- swiper.$el.addClass('hc-slider-lock');
209
- }
210
- },
211
- slideChangeTransitionEnd: (swiper) => {
212
-
213
- // slide item
214
- swiper.$el.find('.swiper-slide')
215
- .removeClass('hc-slider-slide-active')
216
- .removeClass('hc-slider-slide-next')
217
- .removeClass('hc-slider-slide-prev');
218
- swiper.$el.find('.swiper-slide-active').addClass('hc-slider-slide-active');
219
- swiper.$el.find('.swiper-slide-next').addClass('hc-slider-slide-next');
220
- swiper.$el.find('.swiper-slide-prev').addClass('hc-slider-slide-prev');
221
- }
222
- },
223
- breakpoints: {}
224
- };
225
- }
99
+ });
100
+
101
+ this.breakpoints.forEach(breakpoint => {
102
+ let breakpointOptionsConfig = {};
103
+ breakpointKeyConfig.map(config => {
104
+ let val = this.slider.getAttribute(`data-hc-slider-${config.hcKey}-${breakpoint.name}`);
105
+ if (val !== null) {
106
+ if (config.callback === 'parseReverseBool') {
107
+ val = val !== 'true';
108
+ }
109
+ if (config.callback === 'parseBool') {
110
+ val = val === 'true';
111
+ }
112
+ if (config.callback === 'parseFloat') {
113
+ val = parseFloat(val);
114
+ }
115
+ breakpointOptionsConfig[config.libKey] = val;
116
+ }
117
+ });
118
+
119
+ if ( Object.getOwnPropertyNames(breakpointOptionsConfig).length > 0 ) {
120
+ breakpointOptions[breakpoint.value] = breakpointOptionsConfig;
121
+ }
122
+ });
123
+
124
+ this.options.breakpoints = breakpointOptions;
125
+
126
+ const freeMode = this.slider.getAttribute('data-hc-slider-free-mode');
127
+ if (freeMode !== null) {
128
+ this.options['freeMode'] = {
129
+ enabled: true
130
+ }
131
+ }
132
+
133
+ if (this.slider.hasAttribute('data-hc-slider-pagination')) {
134
+ this.options['pagination'] = {
135
+ el: '.hc-slider-pagination',
136
+ type: 'bullets',
137
+ clickable: true,
138
+ bulletClass: 'hc-slider-pagination-bullet',
139
+ clickableClass: 'hc-slider-pagination-clickable',
140
+ currentClass: 'hc-slider-pagination-current',
141
+ bulletActiveClass: 'hc-slider-pagination-bullet-active'
142
+ };
143
+ }
144
+ if (this.slider.hasAttribute('data-hc-slider-arrows')) {
145
+ const suffix = this.slider.getAttribute('data-hc-slider-arrows');
146
+ const prevElement = this.slider.hasAttribute('data-hc-slider-arrow-prev') ? this.slider.getAttribute('data-hc-slider-arrow-prev') : `.hc-slider-button-prev${suffix}`;
147
+ const nextElement = this.slider.hasAttribute('data-hc-slider-arrow-next') ? this.slider.getAttribute('data-hc-slider-arrow-next') : `.hc-slider-button-next${suffix}`;
148
+ this.options['navigation'] = {
149
+ prevEl: prevElement,
150
+ nextEl: nextElement,
151
+ disabledClass: `hc-slider-button-disabled${suffix}`,
152
+ hiddenClass: `hc-slider-button-hidden${suffix}`
153
+ };
154
+ }
155
+
156
+ if (this.slider.hasAttribute('data-hc-slider-fade-effect')) {
157
+ this.options['effect'] = 'fade';
158
+ this.options['fadeEffect'] = {
159
+ crossFade: true
160
+ };
161
+ }
162
+
163
+ if (this.slider.hasAttribute('data-hc-slider-infinite')) {
164
+ this.options['loop'] = true;
165
+ }
166
+
167
+ this.options['watchOverflow'] = true;
168
+ }
169
+
170
+ buildDom() {
171
+ // Si le DOM n'est pas créé correctement, on le fait
172
+ if (this.slider.querySelectorAll('.swiper-wrapper').length === 0) {
173
+ // On recupère les slide items (element de DOM enfant de premier niveau)
174
+ // et on leur ajoute la classe des slide item
175
+ const items = [].slice.call(this.slider.children);
176
+ items.forEach(item => {
177
+ item.classList.add('swiper-slide');
178
+ });
179
+
180
+ // On ajoute la classe swiper a notre slider,
181
+ // on crée la div wrapper et on insére les slider item dedans
182
+ const wrapperElement = document.createElement("div");
183
+ wrapperElement.classList.add("swiper-wrapper");
184
+ items.forEach(item => {
185
+ wrapperElement.appendChild(item);
186
+ });
187
+ this.slider.appendChild(wrapperElement);
188
+
189
+ // On ajout les différentes div utile en fonction des options passées
190
+ // et si les elements n'existent pas déjà
191
+ if (this.options.pagination !== false) {
192
+
193
+ const el = this.slider.querySelectorAll(this.options.pagination.el);
194
+ if (el.length === 0) {
195
+ const paginationElement = document.createElement("div");
196
+ paginationElement.classList.add(this.options.pagination.el.substr(1));
197
+ this.slider.appendChild(paginationElement);
198
+ }
199
+ }
200
+ if (this.options.navigation !== false) {
201
+
202
+ if (!this.slider.hasAttribute('data-hc-slider-arrow-prev')) {
203
+ const prevEl = this.slider.querySelectorAll(this.options.navigation.prevEl);
204
+ if (prevEl.length === 0) {
205
+ const buttonPrev = document.createElement("div");
206
+ buttonPrev.classList.add(this.options.navigation.prevEl.substr(1));
207
+ this.slider.appendChild(buttonPrev);
208
+ }
209
+ }
210
+
211
+ if (!this.slider.hasAttribute('data-hc-slider-arrow-next')) {
212
+ const nextEl = this.slider.querySelectorAll(this.options.navigation.nextEl);
213
+ if (nextEl.length === 0) {
214
+ const buttonNext = document.createElement("div");
215
+ buttonNext.classList.add(this.options.navigation.nextEl.substr(1));
216
+ this.slider.appendChild(buttonNext);
217
+ }
218
+ }
219
+ }
220
+ }
221
+ }
222
+
223
+ initOptions() {
224
+ this.options = {
225
+ slidesPerView: "auto",
226
+ pagination: false,
227
+ navigation: false,
228
+ mousewheel: {
229
+ forceToAxis: true,
230
+ },
231
+ grabCursor: true,
232
+ loop: false,
233
+ on: {
234
+ init: (swiper) => {
235
+
236
+ // layout
237
+ swiper.$el.find('.swiper-wrapper').addClass('hc-slider-wrapper');
238
+ swiper.$el.addClass('hc-slider-initialized');
239
+
240
+ // slide item
241
+ swiper.$el.find('.swiper-slide').addClass('hc-slider-slide');
242
+ swiper.$el.find('.swiper-slide-active').addClass('hc-slider-slide-active');
243
+ swiper.$el.find('.swiper-slide-next').addClass('hc-slider-slide-next');
244
+ swiper.$el.find('.swiper-slide-prev').addClass('hc-slider-slide-prev');
245
+
246
+ if (swiper.isLocked) {
247
+ swiper.$el.addClass('hc-slider-lock');
248
+ }
249
+ },
250
+ slideChangeTransitionEnd: (swiper) => {
251
+
252
+ // slide item
253
+ swiper.$el.find('.swiper-slide')
254
+ .removeClass('hc-slider-slide-active')
255
+ .removeClass('hc-slider-slide-next')
256
+ .removeClass('hc-slider-slide-prev');
257
+ swiper.$el.find('.swiper-slide-active').addClass('hc-slider-slide-active');
258
+ swiper.$el.find('.swiper-slide-next').addClass('hc-slider-slide-next');
259
+ swiper.$el.find('.swiper-slide-prev').addClass('hc-slider-slide-prev');
260
+ }
261
+ },
262
+ breakpoints: {}
263
+ };
264
+ }
226
265
  }
227
266
 
228
267
  const hc_slider = function (trigger) {
229
- return new HcSlider(trigger);
268
+ return new HcSlider(trigger);
230
269
  }
231
270
  export default hc_slider;