@iris.interactive/handcook 7.0.12 → 7.1.0
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 +1 -1
- package/package.json +1 -1
- package/public/scripts/components/collapse/collapse.component.js +9 -1
- package/public/scripts/components/slider/slider.component.js +51 -12
- package/public/scripts/components/tooltip/tooltip.component.js +2 -2
- package/public/styles/scss/_utils.scss +6 -0
- package/public/styles/scss/_variables.scss +5 -0
- package/public/styles/scss/mixins/_mixin-style.scss +4 -8
- package/public/styles/style.css +1 -1
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
|
@@ -39,9 +39,15 @@ export class HcCollapse {
|
|
|
39
39
|
});
|
|
40
40
|
collapseList.map(function (collapse) {
|
|
41
41
|
document.querySelectorAll(`[data-hc-collapse-trigger="${collapse._element.getAttribute("data-hc-collapse")}"]`).forEach(trigger => {
|
|
42
|
-
|
|
42
|
+
const handleTriggerAction = (e) => {
|
|
43
43
|
e.preventDefault();
|
|
44
44
|
collapse.toggle();
|
|
45
|
+
};
|
|
46
|
+
trigger.addEventListener('click', handleTriggerAction);
|
|
47
|
+
trigger.addEventListener('keydown', (e) => {
|
|
48
|
+
if (e.which == 13 ) {
|
|
49
|
+
handleTriggerAction(e);
|
|
50
|
+
}
|
|
45
51
|
});
|
|
46
52
|
});
|
|
47
53
|
});
|
|
@@ -52,6 +58,7 @@ export class HcCollapse {
|
|
|
52
58
|
if (triggerEl.classList.contains('active')) {
|
|
53
59
|
triggerEl.classList.remove('active');
|
|
54
60
|
}
|
|
61
|
+
triggerEl.setAttribute('aria-expanded', 'false');
|
|
55
62
|
});
|
|
56
63
|
trigger.dispatchEvent(this.hideEvent);
|
|
57
64
|
});
|
|
@@ -63,6 +70,7 @@ export class HcCollapse {
|
|
|
63
70
|
if (!triggerEl.classList.contains('active')) {
|
|
64
71
|
triggerEl.classList.add('active');
|
|
65
72
|
}
|
|
73
|
+
triggerEl.setAttribute('aria-expanded', 'true');
|
|
66
74
|
});
|
|
67
75
|
trigger.dispatchEvent(this.showEvent);
|
|
68
76
|
});
|
|
@@ -193,20 +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
|
-
});
|
|
196
|
+
// On récupère les enfants de slider
|
|
197
|
+
const items = Array.from(this.slider.children);
|
|
202
198
|
|
|
203
|
-
// On
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
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>
|
|
207
204
|
items.forEach(item => {
|
|
208
|
-
|
|
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);
|
|
209
217
|
});
|
|
218
|
+
|
|
219
|
+
// On vide le slider et on insère le wrapper <ul> contenant les <li>
|
|
220
|
+
this.slider.innerHTML = "";
|
|
210
221
|
this.slider.appendChild(wrapperElement);
|
|
211
222
|
|
|
212
223
|
// On ajout les différentes div utile en fonction des options passées
|
|
@@ -237,7 +248,7 @@ export class HcSlider {
|
|
|
237
248
|
buttonsWrapper.appendChild(buttonPrev);
|
|
238
249
|
buttonsWrapper.appendChild(buttonNext);
|
|
239
250
|
|
|
240
|
-
this.slider.
|
|
251
|
+
this.slider.prepend(buttonsWrapper);
|
|
241
252
|
} else {
|
|
242
253
|
if (!this.slider.hasAttribute('data-hc-slider-arrow-prev') && prevEl.length === 0) {
|
|
243
254
|
const buttonPrev = document.createElement("div");
|
|
@@ -266,6 +277,14 @@ export class HcSlider {
|
|
|
266
277
|
grabCursor: true,
|
|
267
278
|
loop: false,
|
|
268
279
|
watchSlidesProgress: true,
|
|
280
|
+
a11y: {
|
|
281
|
+
prevSlideMessage: IRISCollectionTheme.translate.slider.prevSlideMessage ?? 'Slide précédente',
|
|
282
|
+
nextSlideMessage: IRISCollectionTheme.translate.slider.nextSlideMessage ?? 'Slide suivante',
|
|
283
|
+
firstSlideMessage: IRISCollectionTheme.translate.slider.firstSlideMessage ?? 'Vous êtes sur la première slide',
|
|
284
|
+
lastSlideMessage: IRISCollectionTheme.translate.slider.lastSlideMessage ?? 'Vous avez atteint la dernière slide',
|
|
285
|
+
paginationBulletMessage: IRISCollectionTheme.translate.slider.paginationBulletMessage ?? 'Aller sur la slide {{index}}',
|
|
286
|
+
slideLabelMessage: IRISCollectionTheme.translate.slider.slideLabelMessage ?? 'Slide {{index}} sur {{slidesLength}}',
|
|
287
|
+
},
|
|
269
288
|
on: {
|
|
270
289
|
init: (swiper) => {
|
|
271
290
|
|
|
@@ -285,6 +304,17 @@ export class HcSlider {
|
|
|
285
304
|
|
|
286
305
|
this.slider.dispatchEvent(this.initEvent);
|
|
287
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
|
+
},
|
|
288
318
|
slideChangeTransitionEnd: (swiper) => {
|
|
289
319
|
|
|
290
320
|
// slide item
|
|
@@ -295,6 +325,15 @@ export class HcSlider {
|
|
|
295
325
|
swiper.$el.find('.swiper-slide-active').addClass('hc-slider-slide-active');
|
|
296
326
|
swiper.$el.find('.swiper-slide-next').addClass('hc-slider-slide-next');
|
|
297
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
|
+
}
|
|
298
337
|
}
|
|
299
338
|
},
|
|
300
339
|
breakpoints: {}
|
|
@@ -40,14 +40,14 @@ export class HcTooltip {
|
|
|
40
40
|
document.querySelectorAll(elements).forEach(element => {
|
|
41
41
|
let options = {};
|
|
42
42
|
Object.assign(options, this.defaultOptions, overrideOptions);
|
|
43
|
-
options.trigger = options.trigger != '' ? options.trigger : (element.hasAttribute(TooltipEnum.attrPopover) ? "click" : "mouseenter");
|
|
43
|
+
options.trigger = options.trigger != '' ? options.trigger : (element.hasAttribute(TooltipEnum.attrPopover) ? "click focus" : "mouseenter focus");
|
|
44
44
|
options.content = options.content != '' ? options.content : (element.hasAttribute(TooltipEnum.attrContent) ? element.getAttribute(TooltipEnum.attrContent) : '');
|
|
45
45
|
options.placement = options.placement != '' ? options.placement : (element.hasAttribute(TooltipEnum.attrPlacement) ? element.getAttribute(TooltipEnum.attrPlacement) : 'bottom');
|
|
46
46
|
options.interactive = options.interactive != '' ? options.interactive : (element.hasAttribute(TooltipEnum.attrInteractive) ? element.getAttribute(TooltipEnum.attrInteractive) : false);
|
|
47
47
|
let backgroundColor = element.hasAttribute(TooltipEnum.attrBackgroundColor) ? element.getAttribute(TooltipEnum.attrBackgroundColor) : '';
|
|
48
48
|
let color = element.hasAttribute(TooltipEnum.attrColor) ? element.getAttribute(TooltipEnum.attrColor) : '';
|
|
49
49
|
let fontSize = element.hasAttribute(TooltipEnum.attrFontSize) ? element.getAttribute(TooltipEnum.attrFontSize) : '';
|
|
50
|
-
if (options.trigger
|
|
50
|
+
if (options.trigger.indexOf('click') !== -1) {
|
|
51
51
|
element.addEventListener('click', (e) => {
|
|
52
52
|
e.preventDefault();
|
|
53
53
|
});
|
|
@@ -169,9 +169,7 @@
|
|
|
169
169
|
@include transition;
|
|
170
170
|
}
|
|
171
171
|
|
|
172
|
-
&:visited
|
|
173
|
-
&:focus,
|
|
174
|
-
&:focus-within {
|
|
172
|
+
&:visited {
|
|
175
173
|
color: $button-color;
|
|
176
174
|
background-color: $button-background-color;
|
|
177
175
|
background-image: $button-background-image;
|
|
@@ -180,7 +178,7 @@
|
|
|
180
178
|
border: $button-border;
|
|
181
179
|
}
|
|
182
180
|
|
|
183
|
-
@include hover {
|
|
181
|
+
@include hover-focus {
|
|
184
182
|
color: $button-color-hover;
|
|
185
183
|
background-color: $button-background-color-hover;
|
|
186
184
|
border: $button-border-hover;
|
|
@@ -228,9 +226,7 @@
|
|
|
228
226
|
@include transition;
|
|
229
227
|
}
|
|
230
228
|
|
|
231
|
-
&:visited
|
|
232
|
-
&:focus,
|
|
233
|
-
&:focus-within {
|
|
229
|
+
&:visited {
|
|
234
230
|
color: $secondary-button-color;
|
|
235
231
|
background-color: $secondary-button-background-color;
|
|
236
232
|
background-image: $secondary-button-background-image;
|
|
@@ -239,7 +235,7 @@
|
|
|
239
235
|
border: $secondary-button-border;
|
|
240
236
|
}
|
|
241
237
|
|
|
242
|
-
@include hover {
|
|
238
|
+
@include hover-focus {
|
|
243
239
|
color: $secondary-button-color-hover;
|
|
244
240
|
background-color: $secondary-button-background-color-hover;
|
|
245
241
|
border: $secondary-button-border-hover;
|
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}
|