@iris.interactive/handcook 7.1.2-beta → 7.1.3-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
|
@@ -193,21 +193,31 @@ export class HcSlider {
|
|
|
193
193
|
buildDom() {
|
|
194
194
|
// Si le DOM n'est pas créé correctement, on le fait
|
|
195
195
|
if (this.slider.querySelectorAll('.swiper-wrapper').length === 0) {
|
|
196
|
-
// On
|
|
197
|
-
|
|
198
|
-
const items = [].slice.call(this.slider.children);
|
|
199
|
-
items.forEach(item => {
|
|
200
|
-
item.classList.add('swiper-slide');
|
|
201
|
-
item.setAttribute('aria-roledescription', 'slide');
|
|
202
|
-
});
|
|
196
|
+
// On récupère les enfants de slider
|
|
197
|
+
const items = Array.from(this.slider.children);
|
|
203
198
|
|
|
204
|
-
// On
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
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>
|
|
208
204
|
items.forEach(item => {
|
|
209
|
-
|
|
205
|
+
// Créer un nouvel élément <li>
|
|
206
|
+
const newItem = document.createElement("li");
|
|
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);
|
|
210
217
|
});
|
|
218
|
+
|
|
219
|
+
// On vide le slider et on insère le wrapper <ul> contenant les <li>
|
|
220
|
+
this.slider.innerHTML = "";
|
|
211
221
|
this.slider.appendChild(wrapperElement);
|
|
212
222
|
|
|
213
223
|
// On ajout les différentes div utile en fonction des options passées
|
|
@@ -294,6 +304,17 @@ export class HcSlider {
|
|
|
294
304
|
|
|
295
305
|
this.slider.dispatchEvent(this.initEvent);
|
|
296
306
|
},
|
|
307
|
+
afterInit: (swiper) => {
|
|
308
|
+
|
|
309
|
+
//Remove tabindex
|
|
310
|
+
if (this.slider.hasAttribute('data-hc-slider-disable-arrows-focus')) {
|
|
311
|
+
swiper.$el.find('.hc-slider-buttons > *').removeAttr('tabindex');
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
if (this.slider.hasAttribute('data-hc-slider-disable-pagination-focus')) {
|
|
315
|
+
swiper.$el.find('.hc-slider-pagination > *').removeAttr('tabindex');
|
|
316
|
+
}
|
|
317
|
+
},
|
|
297
318
|
slideChangeTransitionEnd: (swiper) => {
|
|
298
319
|
|
|
299
320
|
// slide item
|
|
@@ -304,6 +325,15 @@ export class HcSlider {
|
|
|
304
325
|
swiper.$el.find('.swiper-slide-active').addClass('hc-slider-slide-active');
|
|
305
326
|
swiper.$el.find('.swiper-slide-next').addClass('hc-slider-slide-next');
|
|
306
327
|
swiper.$el.find('.swiper-slide-prev').addClass('hc-slider-slide-prev');
|
|
328
|
+
|
|
329
|
+
//Remove tabindex
|
|
330
|
+
if (this.slider.hasAttribute('data-hc-slider-disable-arrows-focus')) {
|
|
331
|
+
swiper.$el.find('.hc-slider-buttons > *').removeAttr('tabindex');
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
if (this.slider.hasAttribute('data-hc-slider-disable-pagination-focus')) {
|
|
335
|
+
swiper.$el.find('.hc-slider-pagination > *').removeAttr('tabindex');
|
|
336
|
+
}
|
|
307
337
|
}
|
|
308
338
|
},
|
|
309
339
|
breakpoints: {}
|
package/public/styles/style.css
CHANGED
|
@@ -25,4 +25,4 @@
|
|
|
25
25
|
* @author Lucas ROCHE
|
|
26
26
|
* @date 28/01/2022 07:41
|
|
27
27
|
* @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
|
|
28
|
-
*/.stretched-link:before{background-color:transparent;bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}.list-flex{display:flex;flex-wrap:wrap;margin-bottom:0}.list-flex>*{list-style-type:none;margin:0 5px 10px 0}.list-flex>:last-child{margin-right:0}@keyframes loader{to{transform:rotate(1turn)}}@keyframes fade{0%{opacity:0}to{opacity:1}}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.text-icon{align-items:center;display:inline-flex;gap:5px}.text-icon--start{align-items:flex-start}.hover-item img{transition:.2s ease;will-change:transform}.hover-item:hover img{transform:scale(1.02)}.is-open{color:#009e55}.soon-close{color:#ff890e}.is-close{color:#f33}.fi--color:before,.fi-color:after{color:var(--iris--icon--color)}.font-size-xsmall{font-size:var(--iris--global--font-size-xsmall--rem)}.font-size-small{font-size:var(--iris--global--font-size-small--rem)}.font-size-regular{font-size:var(--iris--global--font-size-regular--rem)}@media screen and (max-width:650px){.font-size-regular{font-size:var(--iris--global--font-size-regular--small--rem)}}.font-size-large{font-size:var(--iris--global--font-size-large--rem)}@media screen and (max-width:650px){.font-size-large{font-size:var(--iris--global--font-size-large--small--rem)}}.font-size-xlarge{font-size:var(--iris--global--font-size-extra-large--rem)}@media screen and (max-width:650px){.font-size-xlarge{font-size:var(--iris--global--font-size-extra-large--small--rem)}}.align-items--bottom,.align-items--end{align-items:flex-end}.align-items--start,.align-items--top{align-items:flex-start}.align-items--center{align-items:center}
|
|
28
|
+
*/.stretched-link:before{background-color:transparent;bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}.list-flex{display:flex;flex-wrap:wrap;margin-bottom:0}.list-flex>*{list-style-type:none;margin:0 5px 10px 0}.list-flex>:last-child{margin-right:0}@keyframes loader{to{transform:rotate(1turn)}}@keyframes fade{0%{opacity:0}to{opacity:1}}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.text-icon{align-items:center;display:inline-flex;gap:5px}.text-icon--start{align-items:flex-start}.hover-item img{transition:.2s ease;will-change:transform}.hover-item:hover img{transform:scale(1.02)}.is-open{color:#009e55}.soon-close{color:#ff890e}.is-close{color:#f33}.fi--color:before,.fi-color:after{color:var(--iris--icon--color)}.font-size-xsmall{font-size:var(--iris--global--font-size-xsmall--rem)}.font-size-small{font-size:var(--iris--global--font-size-small--rem)}.font-size-regular{font-size:var(--iris--global--font-size-regular--rem)}@media screen and (max-width:650px){.font-size-regular{font-size:var(--iris--global--font-size-regular--small--rem)}}.font-size-large{font-size:var(--iris--global--font-size-large--rem)}@media screen and (max-width:650px){.font-size-large{font-size:var(--iris--global--font-size-large--small--rem)}}.font-size-xlarge{font-size:var(--iris--global--font-size-extra-large--rem)}@media screen and (max-width:650px){.font-size-xlarge{font-size:var(--iris--global--font-size-extra-large--small--rem)}}.align-items--bottom,.align-items--end{align-items:flex-end}.align-items--start,.align-items--top{align-items:flex-start}.align-items--center{align-items:center}.not-focus-style:focus{outline:none!important}
|