@iris.interactive/handcook 2.6.26 → 2.7.2
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/index.html +14 -5
- package/public/scripts/components/scrollspy/scrollspy.component.js +79 -0
- package/public/scripts/components/smooth-scroll/smooth-scroll.component.js +3 -2
- package/public/scripts/enumerators/element.enum.js +3 -0
- package/public/scripts/enumerators/smooth-scroll.enum.js +19 -0
- package/public/scripts/handcook.js +2 -0
- package/public/styles/scss/_variables.scss +8 -0
- package/public/styles/scss/mixins/_mixin-layout.scss +8 -0
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
package/public/index.html
CHANGED
|
@@ -120,6 +120,14 @@
|
|
|
120
120
|
.hc-slider-pagination-bullet.hc-slider-pagination-bullet-active {
|
|
121
121
|
background-color: red;
|
|
122
122
|
}
|
|
123
|
+
|
|
124
|
+
nav li *.active {
|
|
125
|
+
color: blue;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
#scroll-smooth .navbar a.active {
|
|
129
|
+
color: blue;
|
|
130
|
+
}
|
|
123
131
|
</style>
|
|
124
132
|
</head>
|
|
125
133
|
<body style="font-family: 'Helvetica Neue';">
|
|
@@ -127,28 +135,29 @@
|
|
|
127
135
|
<main style="display: grid; grid-template-columns: 10% 90%;">
|
|
128
136
|
<aside style="position: sticky; top: 0; max-height: 100vh;">
|
|
129
137
|
<nav>
|
|
130
|
-
<ul>
|
|
138
|
+
<ul id="scrollspy-nav">
|
|
131
139
|
<li><a href="#scroll-smooth" data-hc-smooth-scroll>Scroll Smooth</a></li>
|
|
132
|
-
<li><
|
|
140
|
+
<li><span data-hc-smooth-scroll-href="#tooltip" data-hc-smooth-scroll>Tooltip</span></li>
|
|
133
141
|
<li><a href="#modal" data-hc-smooth-scroll>Modal</a></li>
|
|
134
142
|
<li><a href="#lightbox" data-hc-smooth-scroll>Lightbox</a></li>
|
|
135
143
|
<li><a href="#lazyload" data-hc-smooth-scroll>Lazyload</a></li>
|
|
136
144
|
<li><a href="#dropdown" data-hc-smooth-scroll>Dropdown</a></li>
|
|
137
145
|
<li><a href="#collapse" data-hc-smooth-scroll>Collapse</a></li>
|
|
138
|
-
<li><a href="#accordion" data-hc-smooth-scroll>Accordion</a></li>
|
|
146
|
+
<li><a href="#accordion" data-hc-smooth-scroll data-hc-smooth-scroll-shift="250">Accordion</a></li>
|
|
139
147
|
<li><a href="#tab" data-hc-smooth-scroll>Tab</a></li>
|
|
140
148
|
<li><a href="#slider" data-hc-smooth-scroll>Slider</a></li>
|
|
141
149
|
</ul>
|
|
142
150
|
</nav>
|
|
143
151
|
</aside>
|
|
144
|
-
<section>
|
|
152
|
+
<section data-hc-scrollspy="#scrollspy-nav">
|
|
145
153
|
<article id="scroll-smooth">
|
|
146
154
|
<div class="navbar"
|
|
147
|
-
style="position: sticky; top: 0; height: 50px; display: flex; align-items: center; gap: 40px; background-color: #fff; padding: 0 20px;">
|
|
155
|
+
style="position: sticky; top: 0; height: 50px; display: flex; align-items: center; gap: 40px; background-color: #fff; padding: 0 20px;" id="scroll-smooth-nav">
|
|
148
156
|
<a href="#step-1" data-hc-smooth-scroll>To step 1</a>
|
|
149
157
|
<a href="#step-2" data-hc-smooth-scroll>To step 2</a>
|
|
150
158
|
<a href="#step-3" data-hc-smooth-scroll>To step 3</a>
|
|
151
159
|
</div>
|
|
160
|
+
<div data-hc-scrollspy="#scroll-smooth-nav"></div>
|
|
152
161
|
<div id="step-1" style="height: 500px; background-color: red;"></div>
|
|
153
162
|
<div id="step-2" style="height: 500px; background-color: green;"></div>
|
|
154
163
|
<div id="step-3" style="height: 500px; background-color: yellow;"></div>
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import ElementEnum from "../../enumerators/element.enum";
|
|
2
|
+
import SmoothScrollEnum from "../../enumerators/smooth-scroll.enum";
|
|
3
|
+
|
|
4
|
+
export class HcScrollspy {
|
|
5
|
+
|
|
6
|
+
activeEvent;
|
|
7
|
+
|
|
8
|
+
constructor(elements = ElementEnum.scrollspy) {
|
|
9
|
+
document.querySelectorAll(elements).forEach(element => {
|
|
10
|
+
const navElement = document.querySelector(element.dataset.hcScrollspy);
|
|
11
|
+
this.activeItem(navElement, ElementEnum.scrollSmooth);
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
getOffsetTop(navElement, childElement) {
|
|
16
|
+
let offsetTop = [];
|
|
17
|
+
navElement.querySelectorAll(childElement).forEach(item => {
|
|
18
|
+
const part = item.getAttribute('href') !== null ? {
|
|
19
|
+
id: item.getAttribute('href'),
|
|
20
|
+
value: 0,
|
|
21
|
+
attribute: 'href'
|
|
22
|
+
} : {
|
|
23
|
+
id: item.getAttribute(SmoothScrollEnum.attrHref),
|
|
24
|
+
value: 0,
|
|
25
|
+
attribute: SmoothScrollEnum.attrHref
|
|
26
|
+
};
|
|
27
|
+
if (document.querySelector(part.id) !== null) {
|
|
28
|
+
part.value = document.querySelector(part.id).offsetTop;
|
|
29
|
+
offsetTop = [
|
|
30
|
+
...offsetTop,
|
|
31
|
+
part
|
|
32
|
+
];
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
return offsetTop;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
activeItem(navElement, childElement) {
|
|
39
|
+
let item = navElement.querySelector(`${childElement}:first-child`);
|
|
40
|
+
window.addEventListener('scroll', () => {
|
|
41
|
+
const offsetTop = this.getOffsetTop(navElement, childElement);
|
|
42
|
+
const top = window.scrollY;
|
|
43
|
+
offsetTop.forEach(offsetTop => {
|
|
44
|
+
if (top > (offsetTop.value - 150)) {
|
|
45
|
+
item = navElement.querySelector('[' + offsetTop.attribute + '="' + offsetTop.id + '"]');
|
|
46
|
+
}
|
|
47
|
+
})
|
|
48
|
+
navElement.querySelectorAll(childElement).forEach(child => {
|
|
49
|
+
if (child !== item) {
|
|
50
|
+
const deactiveEvent = new CustomEvent('deactive.hc.scrollspy', {
|
|
51
|
+
detail: {
|
|
52
|
+
nav: navElement,
|
|
53
|
+
item: item
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
document.dispatchEvent(deactiveEvent);
|
|
57
|
+
if(child.classList.contains('active')) {
|
|
58
|
+
child.classList.remove('active');
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
if (!item.classList.contains('active')) {
|
|
63
|
+
const activeEvent = new CustomEvent('active.hc.scrollspy', {
|
|
64
|
+
detail: {
|
|
65
|
+
nav: navElement,
|
|
66
|
+
item: item
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
document.dispatchEvent(activeEvent);
|
|
70
|
+
item.classList.add('active');
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
const hc_scrollspy = function (trigger) {
|
|
77
|
+
return new HcScrollspy(trigger);
|
|
78
|
+
}
|
|
79
|
+
export default hc_scrollspy;
|
|
@@ -13,14 +13,15 @@
|
|
|
13
13
|
* @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
|
|
14
14
|
*/
|
|
15
15
|
import ElementEnum from "../../enumerators/element.enum";
|
|
16
|
+
import SmoothScrollEnum from "../../enumerators/smooth-scroll.enum";
|
|
16
17
|
|
|
17
18
|
export class HcSmoothScroll {
|
|
18
19
|
constructor(triggerAttribute = ElementEnum.scrollSmooth, durationAnimation = 1000) {
|
|
19
20
|
document.querySelectorAll(triggerAttribute).forEach(trigger => {
|
|
20
21
|
trigger.addEventListener('click', (e) => {
|
|
21
22
|
e.preventDefault();
|
|
22
|
-
const target = (e.currentTarget.getAttribute('href') !=
|
|
23
|
-
const shift = (e.currentTarget.
|
|
23
|
+
const target = (e.currentTarget.getAttribute('href') != null) ? document.querySelector(e.currentTarget.getAttribute('href')) : document.querySelector(e.currentTarget.dataset.hcSmoothScrollHref);
|
|
24
|
+
const shift = (e.currentTarget.getAttribute(SmoothScrollEnum.attrShift) !== null) ? e.currentTarget.getAttribute(SmoothScrollEnum.attrShift) : 0;
|
|
24
25
|
const anim = requestAnimationFrame((timestamp) => {
|
|
25
26
|
const stamp = timestamp || new Date().getTime();
|
|
26
27
|
const start = stamp;
|
|
@@ -26,4 +26,7 @@ export default class ElementEnum {
|
|
|
26
26
|
static tab = '[data-hc-tab]';
|
|
27
27
|
static toggle = '[data-hc-toggle]';
|
|
28
28
|
static slider = '[data-hc-slider]';
|
|
29
|
+
static scrollspy = '[data-hc-scrollspy]';
|
|
30
|
+
static scrollspyNav = '[data-hc-scrollspy-nav]';
|
|
31
|
+
static scrollspyNavItem = '[data-hc-scrollspy-nav-item]';
|
|
29
32
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* IRIS Interactive
|
|
3
|
+
*
|
|
4
|
+
* NOTICE OF LICENSE
|
|
5
|
+
*
|
|
6
|
+
* This source file is no subject to a specific license
|
|
7
|
+
* but it belongs to the company IRIS Interactive.
|
|
8
|
+
* You can contact IRIS Interactive at the following
|
|
9
|
+
* address: contact@iris-interactive.fr
|
|
10
|
+
*
|
|
11
|
+
* @author Lucas ROCHE
|
|
12
|
+
* @date 14/04/2022 11:28
|
|
13
|
+
* @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
export default class SmoothScrollEnum {
|
|
17
|
+
static attrHref = "data-hc-smooth-scroll-href";
|
|
18
|
+
static attrShift = "data-hc-smooth-scroll-shift";
|
|
19
|
+
}
|
|
@@ -23,6 +23,7 @@ import hc_lazyload from "@package_script/components/lazyload/lazyload.component"
|
|
|
23
23
|
import hc_tab from "@package_script/components/tab/tab.component";
|
|
24
24
|
import hc_toggle from "@package_script/components/toggle/toggle.component";
|
|
25
25
|
import hc_slider from "@package_script/components/slider/slider.component";
|
|
26
|
+
import hc_scrollspy from "@package_script/components/scrollspy/scrollspy.component";
|
|
26
27
|
|
|
27
28
|
const Handcook = {
|
|
28
29
|
hc_tooltip,
|
|
@@ -35,5 +36,6 @@ const Handcook = {
|
|
|
35
36
|
hc_tab,
|
|
36
37
|
hc_toggle,
|
|
37
38
|
hc_slider,
|
|
39
|
+
hc_scrollspy
|
|
38
40
|
}
|
|
39
41
|
export default Handcook;
|
|
@@ -345,6 +345,14 @@ $brochure-form-field-border: var(--iris--brochure-form-field--border);
|
|
|
345
345
|
$brochure-form-field-color: var(--iris--brochure-form-field--color);
|
|
346
346
|
|
|
347
347
|
|
|
348
|
+
// Brochures single
|
|
349
|
+
$brochure-color: var(--iris--brochure--color);
|
|
350
|
+
$brochure-form-color-title: var(--iris--brochure--color-title, var(--iris--brochure-form--color));
|
|
351
|
+
$brochure-form-background-color: var(--iris--brochure--background-color);
|
|
352
|
+
$brochure-form-link-color: var(--iris--brochure--color-link);
|
|
353
|
+
$brochure-form-link-color-hover: var(--iris--brochure--color-link-hover);
|
|
354
|
+
|
|
355
|
+
|
|
348
356
|
// Alternative content
|
|
349
357
|
$alternative-content-color: var(--iris--alternative-content--color);
|
|
350
358
|
$alternative-content-color-title: var(--iris--alternative-content--color-title, var(--iris--alternative-content--color));
|