@iris.interactive/handcook 2.3.11 → 2.5.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.
- package/mix-manifest.json +7 -0
- package/package.json +10 -2
- package/public/index.html +390 -29
- package/public/scripts/components/collapse/collapse.component.css +50 -0
- package/public/scripts/components/collapse/collapse.component.js +66 -0
- package/public/scripts/components/collapse/collapse.component.scss +19 -0
- package/public/scripts/components/dropdown/dropdown.component.js +45 -0
- package/public/scripts/components/lazyload/lazyload.component.js +26 -0
- package/public/scripts/components/lightbox/lightbox.component.js +32 -0
- package/public/scripts/components/modal/modal.component.css +18 -0
- package/public/scripts/components/modal/modal.component.js +45 -0
- package/public/scripts/components/modal/modal.component.scss +20 -0
- package/public/scripts/components/slider/slider.component.js +123 -0
- package/public/scripts/components/smooth-scroll/smooth-scroll.component.js +64 -0
- package/public/scripts/components/tab/tab.component.css +20 -0
- package/public/scripts/components/tab/tab.component.js +46 -0
- package/public/scripts/components/tab/tab.component.scss +23 -0
- package/public/scripts/components/toggle/toggle.component.js +50 -0
- package/public/scripts/components/tooltip/tooltip.component.js +75 -0
- package/public/scripts/enumerators/element.enum.js +28 -0
- package/public/scripts/enumerators/tooltip.enum.js +21 -0
- package/public/scripts/index.js +21962 -65
- package/public/styles/scss/mixins/_mixin-font.scss +2 -2
- package/public/styles/scss/style.css +186 -0
- package/public/mix-manifest.json +0 -9
- package/public/scripts/SmoothScroll.js +0 -41
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"/public/index.html": "/public/index.html",
|
|
3
|
+
"/public/styles/scss/_utils.scss": "/public/styles/scss/_utils.scss",
|
|
4
|
+
"/public/styles/scss/_variables.scss": "/public/styles/scss/_variables.scss",
|
|
5
|
+
"/public/styles/scss/handcook.scss": "/public/styles/scss/handcook.scss",
|
|
6
|
+
"/public/styles/scss/style.css": "/public/styles/scss/style.css"
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iris.interactive/handcook",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.1",
|
|
4
4
|
"description": "The web cooking by IRIS Interactive",
|
|
5
5
|
"main": "./public/scripts/index.js",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"build": "mix",
|
|
8
8
|
"build:production": "mix --production",
|
|
9
9
|
"start": "mix watch",
|
|
10
|
-
"hot": "mix watch --hot"
|
|
10
|
+
"hot": "mix watch --hot",
|
|
11
|
+
"prepare": "mix -- --env prepare"
|
|
11
12
|
},
|
|
12
13
|
"keywords": [
|
|
13
14
|
"IRIS Interactive",
|
|
@@ -30,5 +31,12 @@
|
|
|
30
31
|
"resolve-url-loader": "^4.0.0",
|
|
31
32
|
"sass": "^1.34.0",
|
|
32
33
|
"sass-loader": "11.1.1"
|
|
34
|
+
},
|
|
35
|
+
"dependencies": {
|
|
36
|
+
"@fancyapps/ui": "^4.0.22",
|
|
37
|
+
"bootstrap": "^5.1.3",
|
|
38
|
+
"swiper": "^8.0.6",
|
|
39
|
+
"tippy.js": "^6.3.7",
|
|
40
|
+
"vanilla-lazyload": "^17.6.1"
|
|
33
41
|
}
|
|
34
42
|
}
|
package/public/index.html
CHANGED
|
@@ -1,39 +1,400 @@
|
|
|
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 27/01/2022 14:31
|
|
13
|
-
~ @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
|
|
14
|
-
-->
|
|
15
|
-
|
|
1
|
+
<!doctype html>
|
|
16
2
|
<html>
|
|
17
3
|
<head>
|
|
18
4
|
<title>IRIStyle</title>
|
|
19
5
|
<script type="text/javascript">var exports = {};</script>
|
|
20
|
-
<script type="text/javascript" src="scripts/index.js"></script>
|
|
21
|
-
<link rel="stylesheet" href="styles/style.css">
|
|
6
|
+
<script type="text/javascript" src="../public/scripts/index.js"></script>
|
|
7
|
+
<link rel="stylesheet" href="../public/styles/style.css">
|
|
8
|
+
<style>
|
|
9
|
+
a {
|
|
10
|
+
text-decoration: none;
|
|
11
|
+
font-weight: 500;
|
|
12
|
+
color: red;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
a:hover {
|
|
16
|
+
color: #000;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.component__wrapper {
|
|
20
|
+
padding: 80px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.component__content__topbar {
|
|
24
|
+
background-color: #fbfbff;
|
|
25
|
+
border-radius: 12px;
|
|
26
|
+
filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
|
|
27
|
+
padding: 40px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.button {
|
|
31
|
+
padding: 8px 20px;
|
|
32
|
+
border-radius: 6px;
|
|
33
|
+
background-image: linear-gradient(to right, #ff512f, #dd2476);
|
|
34
|
+
color: #fff;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.button:hover {
|
|
38
|
+
color: #fff !important;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.text-blue {
|
|
42
|
+
color: blue;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.swiper {
|
|
46
|
+
position: relative;
|
|
47
|
+
margin: 40px 0;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
#slider-full .swiper-slide {
|
|
51
|
+
width: 100%;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
#slider-full .swiper-slide img {
|
|
55
|
+
width: 100%;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.swiper-slide {
|
|
59
|
+
width: 500px;
|
|
60
|
+
margin-right: 40px;
|
|
61
|
+
}
|
|
22
62
|
|
|
63
|
+
.swiper-slide:last-child {
|
|
64
|
+
margin-right: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.swiper-button-prev,
|
|
68
|
+
.swiper-button-next {
|
|
69
|
+
position: absolute;
|
|
70
|
+
top: 50%;
|
|
71
|
+
transform: translateY(-50%);
|
|
72
|
+
z-index: 1;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.swiper-button-prev {
|
|
76
|
+
left: 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.swiper-button-prev:before {
|
|
80
|
+
content: "<";
|
|
81
|
+
display: flex;
|
|
82
|
+
align-items: center;
|
|
83
|
+
justify-content: center;
|
|
84
|
+
width: 40px;
|
|
85
|
+
height: 40px;
|
|
86
|
+
color: blue;
|
|
87
|
+
background-color: #fff;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.swiper-button-next {
|
|
91
|
+
right: 0;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.swiper-button-next:before {
|
|
95
|
+
content: ">";
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
justify-content: center;
|
|
99
|
+
width: 40px;
|
|
100
|
+
height: 40px;
|
|
101
|
+
color: red;
|
|
102
|
+
background-color: #fff;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.swiper-pagination {
|
|
106
|
+
display: inline-flex;
|
|
107
|
+
gap: 10px;
|
|
108
|
+
margin: 30px 50% 0;
|
|
109
|
+
transform: translate(-50%);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.swiper-pagination-bullet {
|
|
113
|
+
width: 10px;
|
|
114
|
+
height: 10px;
|
|
115
|
+
background-color: rgba(255, 0, 0, 0.35);
|
|
116
|
+
cursor: pointer;
|
|
117
|
+
border-radius: 50%;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.swiper-pagination-bullet.swiper-pagination-bullet-active {
|
|
121
|
+
background-color: red;
|
|
122
|
+
}
|
|
123
|
+
</style>
|
|
23
124
|
</head>
|
|
24
|
-
<body>
|
|
25
|
-
<div
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
<
|
|
29
|
-
|
|
125
|
+
<body style="font-family: 'Helvetica Neue';">
|
|
126
|
+
<div class="wrapper">
|
|
127
|
+
<main style="display: grid; grid-template-columns: 10% 90%;">
|
|
128
|
+
<aside style="position: sticky; top: 0; max-height: 100vh;">
|
|
129
|
+
<nav>
|
|
130
|
+
<ul>
|
|
131
|
+
<li><a href="#scroll-smooth" data-hc-smooth-scroll>Scroll Smooth</a></li>
|
|
132
|
+
<li><a href="#tooltip" data-hc-smooth-scroll>Tooltip</a></li>
|
|
133
|
+
<li><a href="#modal" data-hc-smooth-scroll>Modal</a></li>
|
|
134
|
+
<li><a href="#lightbox" data-hc-smooth-scroll>Lightbox</a></li>
|
|
135
|
+
<li><a href="#lazyload" data-hc-smooth-scroll>Lazyload</a></li>
|
|
136
|
+
<li><a href="#dropdown" data-hc-smooth-scroll>Dropdown</a></li>
|
|
137
|
+
<li><a href="#collapse" data-hc-smooth-scroll>Collapse</a></li>
|
|
138
|
+
<li><a href="#accordion" data-hc-smooth-scroll>Accordion</a></li>
|
|
139
|
+
<li><a href="#tab" data-hc-smooth-scroll>Tab</a></li>
|
|
140
|
+
<li><a href="#slider" data-hc-smooth-scroll>Slider</a></li>
|
|
141
|
+
</ul>
|
|
142
|
+
</nav>
|
|
143
|
+
</aside>
|
|
144
|
+
<section>
|
|
145
|
+
<article id="scroll-smooth">
|
|
146
|
+
<div class="navbar"
|
|
147
|
+
style="position: sticky; top: 0; height: 50px; display: flex; align-items: center; gap: 40px; background-color: #fff; padding: 0 20px;">
|
|
148
|
+
<a href="#step-1" data-hc-smooth-scroll>To step 1</a>
|
|
149
|
+
<a href="#step-2" data-hc-smooth-scroll>To step 2</a>
|
|
150
|
+
<a href="#step-3" data-hc-smooth-scroll>To step 3</a>
|
|
151
|
+
</div>
|
|
152
|
+
<div id="step-1" style="height: 500px; background-color: red;"></div>
|
|
153
|
+
<div id="step-2" style="height: 500px; background-color: green;"></div>
|
|
154
|
+
<div id="step-3" style="height: 500px; background-color: yellow;"></div>
|
|
155
|
+
</article>
|
|
156
|
+
<article id="tooltip" class="component__wrapper">
|
|
157
|
+
<h2 class="component__content__title">Tooltip</h2>
|
|
158
|
+
<div class="component__content">
|
|
159
|
+
<div class="component__content__topbar">
|
|
160
|
+
<a href="#tooltip" class="button" data-hc-popover data-hc-tooltip-content="Je suis un tooltip top"
|
|
161
|
+
data-hc-tooltip-placement="top">Tooltip top</a>
|
|
162
|
+
<a href="#tooltip" class="button" data-hc-tooltip data-hc-tooltip-content="Je suis un tooltip left"
|
|
163
|
+
data-hc-tooltip-placement="left">Tooltip left</a>
|
|
164
|
+
<a href="#tooltip" class="button" data-hc-tooltip data-hc-tooltip-content="Je suis un tooltip right"
|
|
165
|
+
data-hc-tooltip-placement="right">Tooltip right</a>
|
|
166
|
+
<a href="#tooltip" class="button" data-hc-tooltip data-hc-tooltip-content="Je suis un tooltip bottom"
|
|
167
|
+
data-hc-tooltip-placement="bottom">Tooltip bottom</a>
|
|
168
|
+
<a href="#tooltip" class="button" id="test" data-hc-tooltip-content="Je suis un tooltip erferf">Custom
|
|
169
|
+
tooltip</a>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
</article>
|
|
173
|
+
<article id="modal" class="component__wrapper">
|
|
174
|
+
<h2 class="component__content__title">Modal</h2>
|
|
175
|
+
<div class="component__content">
|
|
176
|
+
<div class="component__content__topbar">
|
|
177
|
+
<a href="#dialog-content" class="button" data-hc-modal>Modal</a>
|
|
178
|
+
<a href="#dialog-content" class="button" id="custom-trigger-modal">Custom trigger modal</a>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
</article>
|
|
182
|
+
<article id="lightbox" class="component__wrapper">
|
|
183
|
+
<h2 class="component__content__title">Lightbox</h2>
|
|
184
|
+
<div class="component__content">
|
|
185
|
+
<div class="component__content__topbar">
|
|
186
|
+
<a href="https://via.placeholder.com/1000x500" data-hc-lightbox>
|
|
187
|
+
<img src="https://via.placeholder.com/150" alt="" width="150" height="150">
|
|
188
|
+
</a>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</article>
|
|
192
|
+
<article id="lazyload" class="component__wrapper">
|
|
193
|
+
<h2 class="component__content__title">Lazyload</h2>
|
|
194
|
+
<div class="component__content">
|
|
195
|
+
<div class="component__content__topbar">
|
|
196
|
+
<div><img data-hc-src="https://via.placeholder.com/150" alt="" width="150" height="150"></div>
|
|
197
|
+
<div><img data-hc-src="https://via.placeholder.com/150" alt="" width="150" height="150"></div>
|
|
198
|
+
<div><img data-hc-src="https://via.placeholder.com/150" alt="" width="150" height="150"></div>
|
|
199
|
+
<div data-hc-bg="https://via.placeholder.com/150"></div>
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
</article>
|
|
203
|
+
<article id="dropdown" class="component__wrapper">
|
|
204
|
+
<h2 class="component__content__title">Dropdown</h2>
|
|
205
|
+
<div class="component__content">
|
|
206
|
+
<div class="component__content__topbar">
|
|
207
|
+
<span class="button" data-hc-dropdown data-hc-dropdown-menu="#dropdown1"
|
|
208
|
+
aria-controls="dropdown1">
|
|
209
|
+
dropdown
|
|
210
|
+
</span>
|
|
211
|
+
<div style="display: none;" id="dropdown1">
|
|
212
|
+
<div class="dropdown__list">
|
|
213
|
+
<a href="#scroll-smooth" data-hc-smooth-scroll>Scroll Smooth</a>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
</article>
|
|
219
|
+
<article id="collapse" class="component__wrapper">
|
|
220
|
+
<h2 class="component__content__title">Collapse</h2>
|
|
221
|
+
<div class="component__content">
|
|
222
|
+
<div class="component__content__topbar">
|
|
223
|
+
<a href="#collapse1" aria-controls="collapse1" data-hc-collapse-trigger="collapse1">Collapse 1</a>
|
|
224
|
+
<a href="#collapse1" aria-controls="collapse1" data-hc-collapse-trigger="collapse1">2 Collapse 1</a>
|
|
225
|
+
<div class="collapse" data-hc-collapse="collapse1" id="collapse1">
|
|
226
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis esse
|
|
227
|
+
facilis ipsa iste obcaecati. Ab aliquam cupiditate earum eius facere minima nemo
|
|
228
|
+
nihil odit ratione sunt! Cumque enim eveniet voluptates.
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
</article>
|
|
234
|
+
<article id="accordion" class="component__wrapper">
|
|
235
|
+
<h2 class="component__content__title">Accordion</h2>
|
|
236
|
+
<div class="component__content">
|
|
237
|
+
<div class="component__content__topbar">
|
|
238
|
+
<div id="accordion__parent1">
|
|
239
|
+
<a href="#accordion1" data-hc-collapse-trigger="accordion1" aria-controls="accordion1">Accordion 1
|
|
240
|
+
</a>
|
|
241
|
+
<div class="collapse show" data-hc-collapse="accordion1" id="accordion1"
|
|
242
|
+
data-hc-collapse-parent="#accordion__parent1">
|
|
243
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis esse
|
|
244
|
+
facilis ipsa iste obcaecati. Ab aliquam cupiditate earum eius facere minima nemo
|
|
245
|
+
nihil odit ratione sunt! Cumque enim eveniet voluptates.
|
|
246
|
+
</div>
|
|
247
|
+
<a href="#accordion2" data-hc-collapse-trigger="accordion2" aria-controls="accordion2">Accordion 2
|
|
248
|
+
</a>
|
|
249
|
+
<div class="collapse" data-hc-collapse="accordion2" id="accordion2"
|
|
250
|
+
data-hc-collapse-parent="#accordion__parent1">
|
|
251
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis esse
|
|
252
|
+
facilis ipsa iste obcaecati. Ab aliquam cupiditate earum eius facere minima nemo
|
|
253
|
+
nihil odit ratione sunt! Cumque enim eveniet voluptates.
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
</article>
|
|
259
|
+
<article id="tab" class="component__wrapper">
|
|
260
|
+
<h2 class="component__content__title">Tab</h2>
|
|
261
|
+
<div class="component__content">
|
|
262
|
+
<div class="component__content__topbar">
|
|
263
|
+
|
|
264
|
+
<div data-hc-tab-wrapper role="tablist">
|
|
265
|
+
<a id="home-tab" data-hc-tab href="#home"
|
|
266
|
+
role="tab" aria-controls="home" aria-selected="true">Home
|
|
267
|
+
</a>
|
|
268
|
+
<a id="profile-tab" data-hc-tab href="#profile"
|
|
269
|
+
role="tab" aria-controls="profile" aria-selected="false">Profile
|
|
270
|
+
</a>
|
|
271
|
+
<a id="messages-tab" data-hc-tab href="#messages"
|
|
272
|
+
role="tab" aria-controls="messages" aria-selected="false">Messages
|
|
273
|
+
</a>
|
|
274
|
+
<a id="settings-tab" data-hc-tab href="#settings"
|
|
275
|
+
role="tab" aria-controls="settings" aria-selected="false">Settings
|
|
276
|
+
</a>
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
<div data-hc-tab-content>
|
|
280
|
+
<div class="active" data-hc-tab-pane id="home" role="tabpanel" aria-labelledby="home-tab">
|
|
281
|
+
<b>Home</b><br>
|
|
282
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quis rem sed veniam
|
|
283
|
+
voluptate! Earum excepturi fugit incidunt inventore magnam nemo nisi nulla optio
|
|
284
|
+
perferendis possimus, quae quidem sequi voluptatem.
|
|
285
|
+
</div>
|
|
286
|
+
<div data-hc-tab-pane id="profile" role="tabpanel" aria-labelledby="profile-tab">
|
|
287
|
+
<b>Profile</b><br>
|
|
288
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolore ipsam minima,
|
|
289
|
+
nulla obcaecati perferendis porro possimus quidem rerum ullam. Assumenda doloremque
|
|
290
|
+
eligendi facere facilis libero maiores quisquam voluptatem. Mollitia.
|
|
291
|
+
</div>
|
|
292
|
+
<div data-hc-tab-pane id="messages" role="tabpanel" aria-labelledby="messages-tab">
|
|
293
|
+
<b>Messages</b><br>
|
|
294
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid animi assumenda
|
|
295
|
+
atque commodi delectus eius illo, ipsam iure pariatur quaerat qui quia, quod repudiandae
|
|
296
|
+
sint soluta, unde vel voluptates!
|
|
297
|
+
</div>
|
|
298
|
+
<div data-hc-tab-pane id="settings" role="tabpanel" aria-labelledby="settings-tab">
|
|
299
|
+
<b>Settings</b><br>
|
|
300
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aut doloremque ea fugit
|
|
301
|
+
iste laborum mollitia nam, veniam voluptate voluptatem. Ad dignissimos dolore ea earum
|
|
302
|
+
eos inventore modi perspiciatis veniam.
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
307
|
+
</article>
|
|
308
|
+
<article id="toggle" class="component__wrapper">
|
|
309
|
+
<h2 class="component__content__title">Toggle</h2>
|
|
310
|
+
<div class="component__content">
|
|
311
|
+
<div class="component__content__topbar">
|
|
312
|
+
<a data-hc-toggle data-hc-toggle-attribute="class" data-hc-toggle-value="text-blue" href="#toggle1">Toggle class</a>
|
|
313
|
+
<div id="toggle1">
|
|
314
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis esse
|
|
315
|
+
facilis ipsa iste obcaecati. Ab aliquam cupiditate earum eius facere minima nemo
|
|
316
|
+
nihil odit ratione sunt! Cumque enim eveniet voluptates.
|
|
317
|
+
</div>
|
|
318
|
+
<a data-hc-toggle data-hc-toggle-attribute="checked" data-hc-toggle-value="checked" href="#checkbox1">Toggle checkbox</a>
|
|
319
|
+
<input type="checkbox" id="checkbox1">
|
|
320
|
+
</div>
|
|
321
|
+
</div>
|
|
322
|
+
</article>
|
|
323
|
+
<article id="slider" class="component__wrapper">
|
|
324
|
+
<h2 class="component__content__title">Slider</h2>
|
|
325
|
+
<div class="component__content">
|
|
326
|
+
<div class="component__content__topbar">
|
|
327
|
+
<div data-hc-slider>
|
|
328
|
+
<div>
|
|
329
|
+
<img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
|
|
330
|
+
</div>
|
|
331
|
+
<div>
|
|
332
|
+
<img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
|
|
333
|
+
</div>
|
|
334
|
+
<div>
|
|
335
|
+
<img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
|
|
336
|
+
</div>
|
|
337
|
+
<div>
|
|
338
|
+
<img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
|
|
339
|
+
</div>
|
|
340
|
+
<div>
|
|
341
|
+
<img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
|
|
342
|
+
</div>
|
|
343
|
+
</div>
|
|
344
|
+
<div data-hc-slider data-hc-slider-arrows id="slider-full">
|
|
345
|
+
<div>
|
|
346
|
+
<img data-hc-src="https://via.placeholder.com/1280x500" alt="" width="1280" height="500">
|
|
347
|
+
</div>
|
|
348
|
+
<div>
|
|
349
|
+
<img data-hc-src="https://via.placeholder.com/1280x500" alt="" width="1280" height="500">
|
|
350
|
+
</div>
|
|
351
|
+
<div>
|
|
352
|
+
<img data-hc-src="https://via.placeholder.com/1280x500" alt="" width="1280" height="500">
|
|
353
|
+
</div>
|
|
354
|
+
<div>
|
|
355
|
+
<img data-hc-src="https://via.placeholder.com/1280x500" alt="" width="1280" height="500">
|
|
356
|
+
</div>
|
|
357
|
+
<div>
|
|
358
|
+
<img data-hc-src="https://via.placeholder.com/1280x500" alt="" width="1280" height="500">
|
|
359
|
+
</div>
|
|
360
|
+
</div>
|
|
361
|
+
<div data-hc-slider data-hc-slider-pagination>
|
|
362
|
+
<div>
|
|
363
|
+
<img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
|
|
364
|
+
</div>
|
|
365
|
+
<div>
|
|
366
|
+
<img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
|
|
367
|
+
</div>
|
|
368
|
+
<div>
|
|
369
|
+
<img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
|
|
370
|
+
</div>
|
|
371
|
+
<div>
|
|
372
|
+
<img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
|
|
373
|
+
</div>
|
|
374
|
+
<div>
|
|
375
|
+
<img data-hc-src="https://via.placeholder.com/500x250" alt="" width="500" height="250">
|
|
376
|
+
</div>
|
|
377
|
+
</div>
|
|
378
|
+
</div>
|
|
379
|
+
</div>
|
|
380
|
+
</article>
|
|
381
|
+
</section>
|
|
382
|
+
</main>
|
|
30
383
|
</div>
|
|
31
|
-
<div id="
|
|
32
|
-
<
|
|
384
|
+
<div id="dialog-content" class="hc-modal">
|
|
385
|
+
<h2>Hello, world!</h2>
|
|
386
|
+
<p>
|
|
387
|
+
<input type="text" value=""/>
|
|
388
|
+
</p>
|
|
389
|
+
<p>
|
|
390
|
+
Try hitting the tab key and notice how the focus stays within the dialog itself.
|
|
391
|
+
</p>
|
|
392
|
+
<p>
|
|
393
|
+
To close dialog hit the esc button, click on the overlay or just click the close button.
|
|
394
|
+
</p>
|
|
395
|
+
<p class="margin-bottom--none">
|
|
396
|
+
Element used to launch the modal would receive focus back after closing.
|
|
397
|
+
</p>
|
|
33
398
|
</div>
|
|
34
399
|
</body>
|
|
35
|
-
<script type="text/javascript">
|
|
36
|
-
const SmoothScroll = exports.SmoothScroll;
|
|
37
|
-
SmoothScroll( '[data-trigger="wpiris-scroll"]', 1000 );
|
|
38
|
-
</script>
|
|
39
400
|
</html>
|
|
@@ -0,0 +1,50 @@
|
|
|
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 22/02/2022 08:25
|
|
13
|
+
* @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
|
|
14
|
+
*/
|
|
15
|
+
.fade {
|
|
16
|
+
transition: opacity 0.15s linear;
|
|
17
|
+
}
|
|
18
|
+
@media (prefers-reduced-motion: reduce) {
|
|
19
|
+
.fade {
|
|
20
|
+
transition: none;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
.fade:not(.show) {
|
|
24
|
+
opacity: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.collapse:not(.show) {
|
|
28
|
+
display: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.collapsing {
|
|
32
|
+
height: 0;
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
transition: height 0.35s ease;
|
|
35
|
+
}
|
|
36
|
+
@media (prefers-reduced-motion: reduce) {
|
|
37
|
+
.collapsing {
|
|
38
|
+
transition: none;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
.collapsing.collapse-horizontal {
|
|
42
|
+
width: 0;
|
|
43
|
+
height: auto;
|
|
44
|
+
transition: width 0.35s ease;
|
|
45
|
+
}
|
|
46
|
+
@media (prefers-reduced-motion: reduce) {
|
|
47
|
+
.collapsing.collapse-horizontal {
|
|
48
|
+
transition: none;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
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 21/02/2022 17:30
|
|
13
|
+
* @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
import ElementEnum from "../../enumerators/element.enum";
|
|
17
|
+
import "./collapse.component.css";
|
|
18
|
+
import Collapse from "bootstrap/js/src/collapse";
|
|
19
|
+
|
|
20
|
+
class HcCollapse {
|
|
21
|
+
|
|
22
|
+
showEvent;
|
|
23
|
+
hideEvent;
|
|
24
|
+
|
|
25
|
+
constructor(elements = ElementEnum.collapse, type = "collapse") {
|
|
26
|
+
this.createEvent();
|
|
27
|
+
const collapseElementList = [].slice.call(document.querySelectorAll(elements));
|
|
28
|
+
const collapseList = collapseElementList.map(function (collapseElement) {
|
|
29
|
+
const parent = collapseElement.getAttribute('data-hc-collapse-parent');
|
|
30
|
+
let option = {};
|
|
31
|
+
if (parent !== null) {
|
|
32
|
+
option = {
|
|
33
|
+
parent: parent,
|
|
34
|
+
toggle: false
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
return new Collapse(collapseElement, option);
|
|
38
|
+
});
|
|
39
|
+
collapseList.map(function (collapse) {
|
|
40
|
+
document.querySelectorAll(`[data-hc-collapse-trigger="${collapse._element.getAttribute("data-hc-collapse")}"]`).forEach(trigger => {
|
|
41
|
+
trigger.addEventListener('click', function (e) {
|
|
42
|
+
e.preventDefault();
|
|
43
|
+
collapse.toggle();
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
document.querySelectorAll('[data-hc-collapse]').forEach(trigger => {
|
|
48
|
+
trigger.addEventListener('hide.bs.collapse', (e) => {
|
|
49
|
+
document.dispatchEvent(this.hideEvent);
|
|
50
|
+
});
|
|
51
|
+
trigger.addEventListener('show.bs.collapse', (e) => {
|
|
52
|
+
document.dispatchEvent(this.showEvent);
|
|
53
|
+
});
|
|
54
|
+
})
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
createEvent() {
|
|
58
|
+
this.showEvent = new Event("show.hc.collapse");
|
|
59
|
+
this.hideEvent = new Event("hide.hc.collapse");
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
export const hc_collapse = function (trigger) {
|
|
65
|
+
return new HcCollapse(trigger);
|
|
66
|
+
}
|
|
@@ -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 22/02/2022 08:25
|
|
13
|
+
* @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
@import "~bootstrap/scss/functions";
|
|
17
|
+
@import "~bootstrap/scss/variables";
|
|
18
|
+
@import "~bootstrap/scss/mixins";
|
|
19
|
+
@import "~bootstrap/scss/transitions";
|
|
@@ -0,0 +1,45 @@
|
|
|
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 21/02/2022 10:14
|
|
13
|
+
* @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
import ElementEnum from "../../enumerators/element.enum";
|
|
18
|
+
import tippy from "tippy.js";
|
|
19
|
+
import "tippy.js/dist/tippy.css";
|
|
20
|
+
import "tippy.js/themes/light.css";
|
|
21
|
+
|
|
22
|
+
class HcDropdown {
|
|
23
|
+
|
|
24
|
+
instance;
|
|
25
|
+
|
|
26
|
+
constructor(elements = ElementEnum.dropdown) {
|
|
27
|
+
document.querySelectorAll(elements).forEach(element => {
|
|
28
|
+
|
|
29
|
+
const template = document.querySelector(element.dataset.hcDropdownMenu);
|
|
30
|
+
this.instance = tippy(element, {
|
|
31
|
+
trigger: 'click',
|
|
32
|
+
allowHTML: true,
|
|
33
|
+
content: template.innerHTML,
|
|
34
|
+
arrow: false,
|
|
35
|
+
placement: "bottom",
|
|
36
|
+
theme: "light",
|
|
37
|
+
interactive: true
|
|
38
|
+
});
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
export const hc_dropdown = function (trigger) {
|
|
44
|
+
return new HcDropdown(trigger);
|
|
45
|
+
}
|