@natachah/vanilla-frontend 0.1.14 → 0.1.16
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/docs/main.js +3 -1
- package/docs/pages/components/drawer.html +5 -1
- package/docs/pages/components/slider.html +62 -85
- package/docs/pages/javascript/sortable.html +19 -37
- package/docs/src/js/demo.js +10 -4
- package/docs/src/js/doc-layout.js +2 -2
- package/js/_drawer.js +39 -26
- package/js/_dropdown.js +8 -2
- package/js/_slider.js +122 -141
- package/js/_sortable.js +89 -44
- package/js/tests/slider.test.js +49 -96
- package/js/tests/sortable.test.js +8 -29
- package/natachah-vanilla-frontend-0.1.16.tgz +0 -0
- package/package.json +1 -1
- package/scss/components/_slider.scss +8 -7
- package/natachah-vanilla-frontend-0.1.14.tgz +0 -0
package/docs/main.js
CHANGED
|
@@ -24,7 +24,9 @@ if (current.startsWith('/pages/')) document.querySelectorAll(`#sidebar a[href*="
|
|
|
24
24
|
// My awsome sidebar !!!
|
|
25
25
|
import Drawer from './../js/_drawer.js'
|
|
26
26
|
const sidebar = document.getElementById('sidebar')
|
|
27
|
-
if (sidebar) new Drawer(sidebar
|
|
27
|
+
if (sidebar) new Drawer(sidebar, {
|
|
28
|
+
cookie: 'demo-confort'
|
|
29
|
+
})
|
|
28
30
|
|
|
29
31
|
// Code group
|
|
30
32
|
import Tabpanel from './../js/_tabpanel.js'
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
<doc-code id="js" data-type="js" role="tabpanel">
|
|
58
58
|
import Drawer from '@natachah/vanilla-frontend/js/utilities/_drawer.js'
|
|
59
59
|
const drawer = document.getElementById('drawer')
|
|
60
|
-
if (drawer) new Drawer(drawer, { breakpoint : 960 })
|
|
60
|
+
if (drawer) new Drawer(drawer, { breakpoint : 960, cookie: 'name-of-my-cookie' })
|
|
61
61
|
</doc-code>
|
|
62
62
|
</div>
|
|
63
63
|
|
|
@@ -114,6 +114,10 @@
|
|
|
114
114
|
<p>This documentation use the drawer as an exemple for the sidebar on the left !</p>
|
|
115
115
|
</blockquote>
|
|
116
116
|
|
|
117
|
+
<blockquote class="warning">
|
|
118
|
+
<p>If your website use the <b>Comfort</b> JS component, you should use the same cookie name for both as it will combine the values.</p>
|
|
119
|
+
</blockquote>
|
|
120
|
+
|
|
117
121
|
</doc-layout>
|
|
118
122
|
<script type="module" src="/main.js"></script>
|
|
119
123
|
</body>
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
<p>The slider is using the a <code><div></code> tag with the class <code>.slider</code>.</p>
|
|
15
15
|
<p>Each slide must be a <code><div></code> with <code>role="tabpanel"</code> and <code>aria-hidden="true"</code> attributes.</p>
|
|
16
16
|
<doc-demo>
|
|
17
|
-
<div id="
|
|
17
|
+
<div id="sliderFull" class="slider demo-slider">
|
|
18
18
|
<div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one" alt="Image 1"></div>
|
|
19
19
|
<div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=two" alt="Image 2"></div>
|
|
20
20
|
<div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=three" alt="Image 3"></div>
|
|
@@ -22,15 +22,25 @@
|
|
|
22
22
|
<div id="slide5" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=five" alt="Image 5"></div>
|
|
23
23
|
<div id="slide6" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=six" alt="Image 6"></div>
|
|
24
24
|
</div>
|
|
25
|
+
<button aria-controls="sliderFull" data-slider-prev>previous</button>
|
|
26
|
+
<div aria-controls="sliderFull" role="tablist">
|
|
27
|
+
<button role="tab" aria-controls="slide1" aria-selected="true">1</button>
|
|
28
|
+
<button role="tab" aria-controls="slide2" aria-selected="false">2</button>
|
|
29
|
+
<button role="tab" aria-controls="slide3" aria-selected="false">3</button>
|
|
30
|
+
<button role="tab" aria-controls="slide4" aria-selected="false">4</button>
|
|
31
|
+
<button role="tab" aria-controls="slide5" aria-selected="false">5</button>
|
|
32
|
+
<button role="tab" aria-controls="slide6" aria-selected="false">6</button>
|
|
33
|
+
</div>
|
|
34
|
+
<button aria-controls="sliderFull" data-slider-next>next</button>
|
|
25
35
|
</doc-demo>
|
|
26
36
|
<div class="code-group">
|
|
27
37
|
<div role="tablist">
|
|
28
|
-
<button role="tab" aria-controls="html">HTML</button>
|
|
38
|
+
<button role="tab" aria-controls="html" aria-selected="true">HTML</button>
|
|
29
39
|
<button role="tab" aria-controls="scss">SCSS</button>
|
|
30
40
|
<button role="tab" aria-controls="css">CSS</button>
|
|
31
41
|
<button role="tab" aria-controls="js">JS</button>
|
|
32
42
|
</div>
|
|
33
|
-
<doc-code id="html" data-type="html" role="tabpanel">
|
|
43
|
+
<doc-code id="html" data-type="html" role="tabpanel" aria-hidden="false">
|
|
34
44
|
<div id="slider" class="slider">
|
|
35
45
|
<div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one" alt="Image 1"></div>
|
|
36
46
|
<div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=two" alt="Image 2"></div>
|
|
@@ -39,6 +49,16 @@
|
|
|
39
49
|
<div id="slide5" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=five" alt="Image 5"></div>
|
|
40
50
|
<div id="slide6" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=six" alt="Image 6"></div>
|
|
41
51
|
</div>
|
|
52
|
+
<button aria-controls="slider" data-slider-prev>previous</button>
|
|
53
|
+
<div aria-controls="slider" role="tablist">
|
|
54
|
+
<button role="tab" aria-controls="slide1" aria-selected="true">1</button>
|
|
55
|
+
<button role="tab" aria-controls="slide2" aria-selected="false">2</button>
|
|
56
|
+
<button role="tab" aria-controls="slide3" aria-selected="false">3</button>
|
|
57
|
+
<button role="tab" aria-controls="slide4" aria-selected="false">4</button>
|
|
58
|
+
<button role="tab" aria-controls="slide5" aria-selected="false">5</button>
|
|
59
|
+
<button role="tab" aria-controls="slide6" aria-selected="false">6</button>
|
|
60
|
+
</div>
|
|
61
|
+
<button aria-controls="slider" data-slider-next>next</button>
|
|
42
62
|
</doc-code>
|
|
43
63
|
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
44
64
|
@use '@natachah/vanilla-frontend/scss/components/slider';
|
|
@@ -50,31 +70,14 @@
|
|
|
50
70
|
<doc-code id="js" data-type="js" role="tabpanel">
|
|
51
71
|
import Slider from "@natachah/vanilla-frontend/js/_slider"
|
|
52
72
|
const slider = document.getElementById('slider')
|
|
53
|
-
if (slider) const mySliderObj = new Slider(
|
|
73
|
+
if (slider) const mySliderObj = new Slider(slider, {loop: true})
|
|
54
74
|
</doc-code>
|
|
55
75
|
</div>
|
|
56
76
|
|
|
57
77
|
<h2>Indicators</h2>
|
|
58
78
|
<p>You can create some indicators with a <code><div></code> tag with the <code>aria-controls="IdOfSlider"</code> and <code>role="tablist"</code> attributes.</p>
|
|
59
79
|
<p>Inside you must insert each slides indicators as <code><button></code> tag with <code>role="tab"</code>, <code>aria-controls="IdOfSlide"</code> and <code>aria-selected="false"</code> attributes.</p>
|
|
60
|
-
|
|
61
|
-
<div id="sliderTabs" class="slider demo-slider">
|
|
62
|
-
<div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one" alt="Image 1"></div>
|
|
63
|
-
<div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=two" alt="Image 2"></div>
|
|
64
|
-
<div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=three" alt="Image 3"></div>
|
|
65
|
-
<div id="slide4" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=four" alt="Image 4"></div>
|
|
66
|
-
<div id="slide5" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=five" alt="Image 5"></div>
|
|
67
|
-
<div id="slide6" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=six" alt="Image 6"></div>
|
|
68
|
-
</div>
|
|
69
|
-
<div aria-controls="sliderTabs" role="tablist">
|
|
70
|
-
<button role="tab" aria-controls="slide1" aria-selected="true">1</button>
|
|
71
|
-
<button role="tab" aria-controls="slide2" aria-selected="false">2</button>
|
|
72
|
-
<button role="tab" aria-controls="slide3" aria-selected="false">3</button>
|
|
73
|
-
<button role="tab" aria-controls="slide4" aria-selected="false">4</button>
|
|
74
|
-
<button role="tab" aria-controls="slide5" aria-selected="false">5</button>
|
|
75
|
-
<button role="tab" aria-controls="slide6" aria-selected="false">6</button>
|
|
76
|
-
</div>
|
|
77
|
-
</doc-demo>
|
|
80
|
+
|
|
78
81
|
<doc-code>
|
|
79
82
|
<div aria-controls="slider" role="tablist">
|
|
80
83
|
<button role="tab" aria-controls="slide1" aria-selected="true">1</button>
|
|
@@ -88,18 +91,6 @@
|
|
|
88
91
|
|
|
89
92
|
<h2>Navigation</h2>
|
|
90
93
|
<p>You can create some prev/next navigation with some <code><button></code> tag with the <code>aria-controls="IdOfSlider"</code> and <code>data-slider-prev</code> or <code>data-slider-next</code> attributes.</p>
|
|
91
|
-
<doc-demo>
|
|
92
|
-
<div id="sliderNav" class="slider demo-slider">
|
|
93
|
-
<div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one" alt="Image 1"></div>
|
|
94
|
-
<div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=two" alt="Image 2"></div>
|
|
95
|
-
<div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=three" alt="Image 3"></div>
|
|
96
|
-
<div id="slide4" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=four" alt="Image 4"></div>
|
|
97
|
-
<div id="slide5" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=five" alt="Image 5"></div>
|
|
98
|
-
<div id="slide6" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=six" alt="Image 6"></div>
|
|
99
|
-
</div>
|
|
100
|
-
<button aria-controls="sliderNav" data-slider-prev>previous</button>
|
|
101
|
-
<button aria-controls="sliderNav" data-slider-next>next</button>
|
|
102
|
-
</doc-demo>
|
|
103
94
|
<doc-code>
|
|
104
95
|
<button aria-controls="slider" data-slider-prev>previous</button>
|
|
105
96
|
<button aria-controls="slider" data-slider-next>next</button>
|
|
@@ -108,14 +99,11 @@
|
|
|
108
99
|
<h2>Variants</h2>
|
|
109
100
|
<h3>Fade effect</h3>
|
|
110
101
|
<p>You can change the CSS and JS to create a sort of fade effect, but it's not optimal.</p>
|
|
111
|
-
<blockquote class="todo">
|
|
112
|
-
<p>This functionality is not working good on mobile and with prev/next arrow.</p>
|
|
113
|
-
</blockquote>
|
|
114
102
|
<doc-demo>
|
|
115
|
-
<div id="sliderFade" class="slider slider-fade-demo">
|
|
116
|
-
<div id="
|
|
117
|
-
<div id="
|
|
118
|
-
<div id="
|
|
103
|
+
<div id="sliderFade" class="slider slider-fade-demo" style="background-image: url(https://fakeimg.pl/760x506/?text=one);">
|
|
104
|
+
<div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one" alt="Image 1"></div>
|
|
105
|
+
<div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=two" alt="Image 2"></div>
|
|
106
|
+
<div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=three" alt="Image 3"></div>
|
|
119
107
|
</div>
|
|
120
108
|
</doc-demo>
|
|
121
109
|
<div class="code-group">
|
|
@@ -125,29 +113,29 @@
|
|
|
125
113
|
<button role="tab" aria-controls="js">JS</button>
|
|
126
114
|
</div>
|
|
127
115
|
<doc-code id="html" data-type="html" role="tabpanel">
|
|
128
|
-
<div id="
|
|
129
|
-
<div id="
|
|
130
|
-
<div id="
|
|
131
|
-
<div id="
|
|
116
|
+
<div id="sliderFade" class="slider slider-fade-demo" style="background-image: url(https://fakeimg.pl/760x506/?text=one);">
|
|
117
|
+
<div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one" alt="Image 1"></div>
|
|
118
|
+
<div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=two" alt="Image 2"></div>
|
|
119
|
+
<div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=three" alt="Image 3"></div>
|
|
132
120
|
</div>
|
|
133
121
|
</doc-code>
|
|
134
122
|
<doc-code id="css" data-type="css" role="tabpanel">
|
|
135
123
|
.slider-fade-demo {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
124
|
+
--image-width: 100%;
|
|
125
|
+
--image-ratio: 4/3;
|
|
126
|
+
background-position: center;
|
|
127
|
+
background-repeat: no-repeat;
|
|
128
|
+
background-size: cover;
|
|
129
|
+
> * {
|
|
130
|
+
transition: all 2s ease-out;
|
|
131
|
+
&[aria-hidden=true] {
|
|
132
|
+
filter: blur(1rem);
|
|
133
|
+
opacity: 0;
|
|
134
|
+
}
|
|
135
|
+
&[aria-hidden=false] {
|
|
136
|
+
opacity: 1;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
151
139
|
}
|
|
152
140
|
</doc-code>
|
|
153
141
|
<doc-code id="js" data-type="js" role="tabpanel">
|
|
@@ -155,16 +143,16 @@
|
|
|
155
143
|
const sliderFade = document.getElementById('mySlider')
|
|
156
144
|
if (sliderFade) {
|
|
157
145
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
146
|
+
const mySliderObj = new Slider(sliderFade, {
|
|
147
|
+
behavior: 'instant',
|
|
148
|
+
autoplay: 4000
|
|
149
|
+
})
|
|
162
150
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
151
|
+
sliderFade.addEventListener('slider:changing', (ev) => {
|
|
152
|
+
const currentSlide = mySliderObj._slides[ev.detail.previous]
|
|
153
|
+
const src = currentSlide.querySelector('img').getAttribute('src')
|
|
154
|
+
sliderFade.style.backgroundImage = `url("${src}")`
|
|
155
|
+
})
|
|
168
156
|
|
|
169
157
|
}
|
|
170
158
|
</doc-code>
|
|
@@ -221,9 +209,9 @@
|
|
|
221
209
|
</table>
|
|
222
210
|
<doc-code data-type="js">
|
|
223
211
|
new Slider(mySliderDiv, {
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
212
|
+
behavior: 'smooth',
|
|
213
|
+
loop: false,
|
|
214
|
+
autoplay: false
|
|
227
215
|
})
|
|
228
216
|
</doc-code>
|
|
229
217
|
|
|
@@ -273,17 +261,6 @@
|
|
|
273
261
|
</tr>
|
|
274
262
|
</thead>
|
|
275
263
|
<tbody>
|
|
276
|
-
<tr>
|
|
277
|
-
<td data-label="Event">
|
|
278
|
-
<p>slider:changing</p>
|
|
279
|
-
</td>
|
|
280
|
-
<td data-label="Description">
|
|
281
|
-
<p>This event is fired when the slide is changing</p>
|
|
282
|
-
</td>
|
|
283
|
-
<td data-label="Value">
|
|
284
|
-
<p><code>current</code> as a <code>index number</code></p>
|
|
285
|
-
</td>
|
|
286
|
-
</tr>
|
|
287
264
|
<tr>
|
|
288
265
|
<td data-label="Event">
|
|
289
266
|
<p>slider:changed</p>
|
|
@@ -299,8 +276,8 @@
|
|
|
299
276
|
</table>
|
|
300
277
|
<doc-code data-type="js">
|
|
301
278
|
document.getElementById('mySliderId').addEventListener('slider:changed', (e) => {
|
|
302
|
-
|
|
303
|
-
|
|
279
|
+
const theSlide = e.detail.current
|
|
280
|
+
...
|
|
304
281
|
})
|
|
305
282
|
</doc-code>
|
|
306
283
|
|
|
@@ -95,45 +95,27 @@
|
|
|
95
95
|
</ul>
|
|
96
96
|
</doc-code>
|
|
97
97
|
|
|
98
|
-
<h2>Manually move</h2>
|
|
99
|
-
<p>You can manually move the item by adding some button with <code>data-go="up"</code> or <code>data-go="down"</code> attribute</p>
|
|
100
|
-
<doc-demo>
|
|
101
|
-
<ul class="demo-sortable">
|
|
102
|
-
<li draggable="false">
|
|
103
|
-
<button data-go="up">UP</button><button data-go="down">Down</button>
|
|
104
|
-
Lorem, ipsum.
|
|
105
|
-
</li>
|
|
106
|
-
<li draggable="false">
|
|
107
|
-
<button data-go="up">UP</button><button data-go="down">Down</button>
|
|
108
|
-
Impedit, quod!
|
|
109
|
-
</li>
|
|
110
|
-
<li draggable="false">
|
|
111
|
-
<button data-go="up">UP</button><button data-go="down">Down</button>
|
|
112
|
-
Repudiandae, rerum.
|
|
113
|
-
</li>
|
|
114
|
-
</ul>
|
|
115
|
-
</doc-demo>
|
|
116
|
-
|
|
117
|
-
<doc-code>
|
|
118
|
-
<ul id="mySortableListWithBtn">
|
|
119
|
-
<li draggable="false">
|
|
120
|
-
<button data-go="up">UP</button><button data-go="down">Down</button>
|
|
121
|
-
Lorem, ipsum.
|
|
122
|
-
</li>
|
|
123
|
-
<li draggable="false">
|
|
124
|
-
<button data-go="up">UP</button><button data-go="down">Down</button>
|
|
125
|
-
Impedit, quod!
|
|
126
|
-
</li>
|
|
127
|
-
<li draggable="false">
|
|
128
|
-
<button data-go="up">UP</button><button data-go="down">Down</button>
|
|
129
|
-
Repudiandae, rerum.
|
|
130
|
-
</li>
|
|
131
|
-
</ul>
|
|
132
|
-
</doc-code>
|
|
133
|
-
|
|
134
|
-
|
|
135
98
|
<h2 id="javascript">Javascript</h2>
|
|
136
99
|
<p>To enable this component you need to import the javascript file and create a new Sortable object.</p>
|
|
100
|
+
<h3>Methods</h3>
|
|
101
|
+
<table>
|
|
102
|
+
<thead>
|
|
103
|
+
<tr>
|
|
104
|
+
<th>Method</th>
|
|
105
|
+
<th>Description</th>
|
|
106
|
+
</tr>
|
|
107
|
+
</thead>
|
|
108
|
+
<tbody>
|
|
109
|
+
<tr>
|
|
110
|
+
<td data-label="Method">
|
|
111
|
+
<p>resetEvents()</p>
|
|
112
|
+
</td>
|
|
113
|
+
<td data-label="Description">
|
|
114
|
+
<p>This method will reset the items and events</p>
|
|
115
|
+
</td>
|
|
116
|
+
</tr>
|
|
117
|
+
</tbody>
|
|
118
|
+
</table>
|
|
137
119
|
<h3 id="events">Events</h3>
|
|
138
120
|
<table>
|
|
139
121
|
<thead>
|
package/docs/src/js/demo.js
CHANGED
|
@@ -27,17 +27,23 @@ const dropdowns = document.querySelectorAll('.demo-dropdown')
|
|
|
27
27
|
if (dropdowns) dropdowns.forEach(dropdown => new Dropdown(dropdown))
|
|
28
28
|
|
|
29
29
|
import Slider from './../../../js/_slider.js'
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
//if (sliders) sliders.forEach(slider => new Slider(slider))
|
|
31
|
+
const sliderFull = document.getElementById('sliderFull')
|
|
32
|
+
if (sliderFull) new Slider(sliderFull, {
|
|
33
|
+
//behavior: 'instant',
|
|
34
|
+
loop: true,
|
|
35
|
+
//autoplay: 1500
|
|
36
|
+
})
|
|
32
37
|
|
|
33
38
|
const sliderFade = document.getElementById('sliderFade')
|
|
34
39
|
if (sliderFade) {
|
|
35
40
|
const mySliderObj = new Slider(sliderFade, {
|
|
36
41
|
behavior: 'instant',
|
|
42
|
+
loop: true,
|
|
37
43
|
autoplay: 4000
|
|
38
44
|
})
|
|
39
|
-
sliderFade.addEventListener('slider:
|
|
40
|
-
const src = mySliderObj._slides[ev.detail.
|
|
45
|
+
sliderFade.addEventListener('slider:changed', (ev) => {
|
|
46
|
+
const src = mySliderObj._slides[ev.detail.previous].querySelector('img').getAttribute('src')
|
|
41
47
|
sliderFade.style.backgroundImage = `url("${src}")`
|
|
42
48
|
})
|
|
43
49
|
}
|
|
@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
|
|
|
18
18
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
|
|
19
19
|
<path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
|
|
20
20
|
</svg>
|
|
21
|
-
0.1.
|
|
21
|
+
0.1.16
|
|
22
22
|
</span>
|
|
23
23
|
</li>
|
|
24
24
|
<li>
|
|
@@ -36,7 +36,7 @@ class DocLayout extends HTMLElement {
|
|
|
36
36
|
</ul>
|
|
37
37
|
</nav>
|
|
38
38
|
</header>
|
|
39
|
-
<aside id="sidebar" class="drawer"
|
|
39
|
+
<aside id="sidebar" class="drawer" hidden>
|
|
40
40
|
<header>
|
|
41
41
|
<a href="/index.html">
|
|
42
42
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-rocket" viewBox="0 0 16 16">
|
package/js/_drawer.js
CHANGED
|
@@ -31,6 +31,7 @@ export default class Drawer extends BaseComponent {
|
|
|
31
31
|
constructor(el, options = {}) {
|
|
32
32
|
|
|
33
33
|
if (options.breakpoint && typeof options.breakpoint !== 'number') throw new Error(ErrorMessage.typeOf('options.breakpoint', 'number'))
|
|
34
|
+
if (options.cookie && typeof options.cookie !== 'string') throw new Error(ErrorMessage.typeOf('options.cookie', 'string'))
|
|
34
35
|
|
|
35
36
|
// Run the SUPER constructor from BaseComponent
|
|
36
37
|
super(el, options, 'drawer')
|
|
@@ -44,7 +45,7 @@ export default class Drawer extends BaseComponent {
|
|
|
44
45
|
|
|
45
46
|
this._isOpen = !this._element.hidden
|
|
46
47
|
|
|
47
|
-
this._focus = this._element.querySelector('a,button') ?? null
|
|
48
|
+
this._focus = this._element.querySelector('[tabindex="0"]') ?? this._element.querySelector('a,button,input') ?? null
|
|
48
49
|
|
|
49
50
|
this._cookie = this._options.cookie ? new Cookie(this._options.cookie) : null
|
|
50
51
|
|
|
@@ -60,53 +61,52 @@ export default class Drawer extends BaseComponent {
|
|
|
60
61
|
*/
|
|
61
62
|
#init() {
|
|
62
63
|
|
|
63
|
-
|
|
64
|
+
// Set the cookie by default
|
|
65
|
+
if (this._cookie && !this._cookie.has('drawer-is-open')) this._cookie.set({ ...this._cookie.value, 'drawer-is-open': this._isOpen })
|
|
64
66
|
|
|
65
|
-
//
|
|
66
|
-
|
|
67
|
+
// Define the default state on bigger screen
|
|
68
|
+
const shouldBeOpen = this._cookie ? this._cookie.get('drawer-is-open') : true
|
|
67
69
|
|
|
68
|
-
//
|
|
69
|
-
|
|
70
|
+
// Window is bigger than breakpoint
|
|
71
|
+
// -> Show/Hide the drawer by the cookie
|
|
72
|
+
if (window.innerWidth > this._options.breakpoint) this.toggle(shouldBeOpen)
|
|
70
73
|
|
|
71
|
-
//
|
|
74
|
+
// Window is smaller than breakpoint
|
|
75
|
+
// -> Hide the drawer
|
|
76
|
+
if (window.innerWidth <= this._options.breakpoint) this.toggle(false)
|
|
77
|
+
|
|
78
|
+
// On window resize
|
|
79
|
+
// -> Toggle the drawer
|
|
72
80
|
window.onresize = () => {
|
|
73
81
|
clearTimeout(this._timeout)
|
|
74
82
|
this._timeout = setTimeout(() => {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
83
|
+
|
|
84
|
+
// Bigger than breakpoint
|
|
85
|
+
if (window.innerWidth > this._options.breakpoint && (!this._isOpen && shouldBeOpen)) this.toggle(true)
|
|
86
|
+
|
|
87
|
+
// Smaller than breakpoint -> Invisible
|
|
88
|
+
if (window.innerWidth <= this._options.breakpoint && this._isOpen) this.toggle(false)
|
|
89
|
+
|
|
79
90
|
}, 250)
|
|
80
91
|
}
|
|
81
92
|
|
|
82
93
|
// On click on the button toggle the drawer
|
|
83
|
-
this._buttons.forEach((button) => button.addEventListener('click', () =>
|
|
84
|
-
this.toggle()
|
|
85
|
-
if (window.innerWidth > this._options.breakpoint) this.#resetCookie()
|
|
86
|
-
if (this._focus && this._isOpen) this._focus.focus()
|
|
87
|
-
}))
|
|
94
|
+
this._buttons.forEach((button) => button.addEventListener('click', () => this.toggle()))
|
|
88
95
|
|
|
89
96
|
// On click on the backdrop, close the drawer
|
|
90
97
|
if (this._backdrop) this._backdrop.addEventListener('click', () => this.toggle())
|
|
91
98
|
|
|
92
99
|
}
|
|
93
100
|
|
|
94
|
-
/**
|
|
95
|
-
* Reset the cookie
|
|
96
|
-
*
|
|
97
|
-
*/
|
|
98
|
-
#resetCookie() {
|
|
99
|
-
if (this._cookie) this._cookie.set({ 'open': this._isOpen })
|
|
100
|
-
}
|
|
101
|
-
|
|
102
101
|
/**
|
|
103
102
|
* Toggle the drawer
|
|
104
103
|
*
|
|
104
|
+
* @param {boolean} value
|
|
105
105
|
*/
|
|
106
|
-
toggle() {
|
|
106
|
+
toggle(value = !this._isOpen) {
|
|
107
107
|
|
|
108
108
|
// Change the state
|
|
109
|
-
this._isOpen =
|
|
109
|
+
this._isOpen = value
|
|
110
110
|
|
|
111
111
|
// Change the [aria-pressed] & [aria-expanded] attribute on the <button>
|
|
112
112
|
this._buttons.forEach((button) => {
|
|
@@ -117,6 +117,19 @@ export default class Drawer extends BaseComponent {
|
|
|
117
117
|
// Change the [hidden] attribute on the drawer
|
|
118
118
|
this._element.hidden = !this._isOpen
|
|
119
119
|
|
|
120
|
+
// Change the cookie
|
|
121
|
+
if (this._cookie && (this._cookie.get('drawer-is-open') !== this._isOpen) && window.innerWidth > this._options.breakpoint) {
|
|
122
|
+
this._cookie.set({ ...this._cookie.value, 'drawer-is-open': this._isOpen })
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// Add the focus if open
|
|
126
|
+
// * Need to wait the transition before make it focused
|
|
127
|
+
if (this._focus && this._isOpen) {
|
|
128
|
+
this._element.addEventListener("transitionend", () => {
|
|
129
|
+
this._focus.focus()
|
|
130
|
+
}, { once: true })
|
|
131
|
+
}
|
|
132
|
+
|
|
120
133
|
}
|
|
121
134
|
|
|
122
135
|
|
package/js/_dropdown.js
CHANGED
|
@@ -37,6 +37,7 @@ export default class Dropdown extends BaseComponent {
|
|
|
37
37
|
// Define the properties
|
|
38
38
|
this._button = this._element.querySelector('[aria-controls]')
|
|
39
39
|
this._content = document.getElementById(this._button.getAttribute('aria-controls'))
|
|
40
|
+
this._focus = this._element.querySelector('[tabindex="0"]') ?? this._element.querySelector('a,button,input') ?? null
|
|
40
41
|
|
|
41
42
|
// Init the event listener
|
|
42
43
|
this.#init()
|
|
@@ -88,8 +89,13 @@ export default class Dropdown extends BaseComponent {
|
|
|
88
89
|
// Change visibility of the content
|
|
89
90
|
this._content.hidden = !value
|
|
90
91
|
|
|
91
|
-
//
|
|
92
|
-
|
|
92
|
+
// Add the focus if open
|
|
93
|
+
// * Need to wait the transition before make it focused
|
|
94
|
+
if (this._focus && value) {
|
|
95
|
+
this._element.addEventListener("transitionend", () => {
|
|
96
|
+
this._focus.focus()
|
|
97
|
+
}, { once: true })
|
|
98
|
+
}
|
|
93
99
|
|
|
94
100
|
// Emmit event
|
|
95
101
|
this.emmitEvent('changed', { isOpen: !this._content.hidden })
|