@iris.interactive/handcook 7.1.4-beta → 7.2.0-beta
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.
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
# Welcome to HandCook 👨🍳
|
|
2
|
-
|
|
3
3
|
|
|
4
4
|
[](#)
|
|
5
5
|
[](https://twitter.com/captain\_iris)
|
package/package.json
CHANGED
|
@@ -175,49 +175,27 @@ export class HcSlider {
|
|
|
175
175
|
this.options['mousewheel'] = false;
|
|
176
176
|
}
|
|
177
177
|
|
|
178
|
-
if (this.slider.hasAttribute('data-hc-slider-lazy')) {
|
|
179
|
-
this.options['lazy'] = {
|
|
180
|
-
enabled: true,
|
|
181
|
-
checkInView: true,
|
|
182
|
-
loadPrevNext: true,
|
|
183
|
-
elementClass: 'hc-slider-lazy',
|
|
184
|
-
loadedClass: 'hc-slider-lazy-loaded',
|
|
185
|
-
loadingClass: 'hc-slider-lazy-loading',
|
|
186
|
-
preloaderClass: 'hc-slider-lazy-preloader',
|
|
187
|
-
};
|
|
188
|
-
}
|
|
189
|
-
|
|
190
178
|
this.options['watchOverflow'] = true;
|
|
191
179
|
}
|
|
192
180
|
|
|
193
181
|
buildDom() {
|
|
194
182
|
// Si le DOM n'est pas créé correctement, on le fait
|
|
195
183
|
if (this.slider.querySelectorAll('.swiper-wrapper').length === 0) {
|
|
196
|
-
// On
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
// On crée l'élément <ul> qui va contenir les <li>
|
|
200
|
-
const wrapperElement = document.createElement("ul");
|
|
201
|
-
wrapperElement.classList.add("not-list-style", "swiper-wrapper");
|
|
202
|
-
|
|
203
|
-
// On transforme chaque enfant en <li>, en leur appliquant les classes et attributs, puis on les ajoute au <ul>
|
|
184
|
+
// On recupère les slide items (element de DOM enfant de premier niveau)
|
|
185
|
+
// et on leur ajoute la classe des slide item
|
|
186
|
+
const items = [].slice.call(this.slider.children);
|
|
204
187
|
items.forEach(item => {
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
// Copier les classes et attributs de l'ancien élément
|
|
209
|
-
newItem.classList.add(...item.classList, "swiper-slide");
|
|
210
|
-
newItem.setAttribute("aria-roledescription", "slide");
|
|
211
|
-
|
|
212
|
-
// Copier le contenu de l'ancien élément dans le nouveau
|
|
213
|
-
newItem.innerHTML = item.innerHTML;
|
|
214
|
-
|
|
215
|
-
// Ajouter le nouvel élément <li> au <ul>
|
|
216
|
-
wrapperElement.appendChild(newItem);
|
|
188
|
+
item.classList.add('swiper-slide');
|
|
189
|
+
item.setAttribute('aria-roledescription', 'slide');
|
|
217
190
|
});
|
|
218
191
|
|
|
219
|
-
// On
|
|
220
|
-
|
|
192
|
+
// On ajoute la classe swiper a notre slider,
|
|
193
|
+
// on crée la div wrapper et on insére les slider item dedans
|
|
194
|
+
const wrapperElement = document.createElement("div");
|
|
195
|
+
wrapperElement.classList.add("swiper-wrapper");
|
|
196
|
+
items.forEach(item => {
|
|
197
|
+
wrapperElement.appendChild(item);
|
|
198
|
+
});
|
|
221
199
|
this.slider.appendChild(wrapperElement);
|
|
222
200
|
|
|
223
201
|
// On ajout les différentes div utile en fonction des options passées
|
|
@@ -289,17 +267,17 @@ export class HcSlider {
|
|
|
289
267
|
init: (swiper) => {
|
|
290
268
|
|
|
291
269
|
// layout
|
|
292
|
-
swiper
|
|
293
|
-
swiper
|
|
270
|
+
$(swiper.el).find('.swiper-wrapper').addClass('hc-slider-wrapper');
|
|
271
|
+
$(swiper.el).addClass('hc-slider-initialized');
|
|
294
272
|
|
|
295
273
|
// slide item
|
|
296
|
-
swiper
|
|
297
|
-
swiper
|
|
298
|
-
swiper
|
|
299
|
-
swiper
|
|
274
|
+
$(swiper.el).find('.swiper-slide').addClass('hc-slider-slide');
|
|
275
|
+
$(swiper.el).find('.swiper-slide-active').addClass('hc-slider-slide-active');
|
|
276
|
+
$(swiper.el).find('.swiper-slide-next').addClass('hc-slider-slide-next');
|
|
277
|
+
$(swiper.el).find('.swiper-slide-prev').addClass('hc-slider-slide-prev');
|
|
300
278
|
|
|
301
279
|
if (swiper.isLocked) {
|
|
302
|
-
swiper
|
|
280
|
+
$(swiper.el).addClass('hc-slider-lock');
|
|
303
281
|
}
|
|
304
282
|
|
|
305
283
|
this.slider.dispatchEvent(this.initEvent);
|
|
@@ -318,21 +296,21 @@ export class HcSlider {
|
|
|
318
296
|
slideChangeTransitionEnd: (swiper) => {
|
|
319
297
|
|
|
320
298
|
// slide item
|
|
321
|
-
swiper
|
|
299
|
+
$(swiper.el).find('.swiper-slide')
|
|
322
300
|
.removeClass('hc-slider-slide-active')
|
|
323
301
|
.removeClass('hc-slider-slide-next')
|
|
324
302
|
.removeClass('hc-slider-slide-prev');
|
|
325
|
-
swiper
|
|
326
|
-
swiper
|
|
327
|
-
swiper
|
|
303
|
+
$(swiper.el).find('.swiper-slide-active').addClass('hc-slider-slide-active');
|
|
304
|
+
$(swiper.el).find('.swiper-slide-next').addClass('hc-slider-slide-next');
|
|
305
|
+
$(swiper.el).find('.swiper-slide-prev').addClass('hc-slider-slide-prev');
|
|
328
306
|
|
|
329
307
|
//Remove tabindex
|
|
330
308
|
if (this.slider.hasAttribute('data-hc-slider-disable-arrows-focus')) {
|
|
331
|
-
swiper
|
|
309
|
+
$(swiper.el).find('.hc-slider-buttons > *').removeAttr('tabindex');
|
|
332
310
|
}
|
|
333
311
|
|
|
334
312
|
if (this.slider.hasAttribute('data-hc-slider-disable-pagination-focus')) {
|
|
335
|
-
swiper
|
|
313
|
+
$(swiper.el).find('.hc-slider-pagination > *').removeAttr('tabindex');
|
|
336
314
|
}
|
|
337
315
|
}
|
|
338
316
|
},
|