@natachah/vanilla-frontend 0.1.6 → 0.1.7
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/pages/components/drawer.html +80 -0
- package/docs/src/js/doc-layout.js +4 -4
- package/docs/src/scss/layout.scss +3 -92
- package/natachah-vanilla-frontend-0.1.7.tgz +0 -0
- package/package.json +1 -1
- package/scss/components/_drawer.scss +117 -0
- package/scss/components/index.scss +1 -0
- package/docs/pages/javascript/drawer.html +0 -50
- package/natachah-vanilla-frontend-0.1.6.tgz +0 -0
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Documentations: Javascript > Drawer</title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body data-preload>
|
|
11
|
+
<doc-layout>
|
|
12
|
+
|
|
13
|
+
<h1>Drawer</h1>
|
|
14
|
+
<p>The drawer component make you able to toggle a drawer with a button and resize window.</p>
|
|
15
|
+
|
|
16
|
+
<p>You can use the classes <code>.drawer</code>, <code>.drawer-button</code> and the id <code>backdrop</code> to quickly design the drawer with some nice animations</p>
|
|
17
|
+
|
|
18
|
+
<div class="code-group">
|
|
19
|
+
<div role="tablist">
|
|
20
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
21
|
+
<button role="tab" aria-controls="scss">SCSS</button>
|
|
22
|
+
<button role="tab" aria-controls="css">CSS</button>
|
|
23
|
+
<button role="tab" aria-controls="js">JS</button>
|
|
24
|
+
</div>
|
|
25
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
26
|
+
<div id="backdrop"></div>
|
|
27
|
+
<button class="drawer-button" aria-expanded="false" aria-pressed="false" aria-controls="drawer" aria-label="Toggle the drawer">
|
|
28
|
+
<svg viewbox="0 0 100 100" width="100%">
|
|
29
|
+
<rect width="100" height="10" x="0" y="10" rx="0"></rect>
|
|
30
|
+
<rect width="100" height="10" x="0" y="45" rx="0"></rect>
|
|
31
|
+
<rect width="100" height="10" x="0" y="80" rx="0"></rect>
|
|
32
|
+
</svg>
|
|
33
|
+
</button>
|
|
34
|
+
<div id="drawer" class="drawer" tabindex="0" hidden>
|
|
35
|
+
My awsome drawer !
|
|
36
|
+
</div>
|
|
37
|
+
</doc-code>
|
|
38
|
+
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
39
|
+
@use '@natachah/vanilla-frontend/scss/components/drawer';
|
|
40
|
+
</doc-code>
|
|
41
|
+
<doc-code id="css" data-type="css" role="tabpanel">
|
|
42
|
+
--drawer-display
|
|
43
|
+
--drawer-background
|
|
44
|
+
--drawer-index
|
|
45
|
+
--drawer-position
|
|
46
|
+
--drawer-width
|
|
47
|
+
--drawer-height
|
|
48
|
+
--drawer-max-width
|
|
49
|
+
--drawer-max-height
|
|
50
|
+
--drawer-origin
|
|
51
|
+
--drawer-animation
|
|
52
|
+
--drawer-trasnform
|
|
53
|
+
--drawer-backdrop-color
|
|
54
|
+
--drawer-backdrop-filter
|
|
55
|
+
--svg-line-size
|
|
56
|
+
</doc-code>
|
|
57
|
+
<doc-code id="js" data-type="js" role="tabpanel">
|
|
58
|
+
import Drawer from '@natachah/vanilla-frontend/js/utilities/_drawer.js'
|
|
59
|
+
const drawer = document.getElementById('drawer')
|
|
60
|
+
if (drawer) new Drawer(drawer, { breakpoint : 960 })
|
|
61
|
+
</doc-code>
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
<blockquote class="note">The <code>#backdrop</code> must be a child of the <code><body></code> ! <br> And the default CSS breakpoint to view the backdrop is 960px</blockquote>
|
|
65
|
+
|
|
66
|
+
<h2>Javascript</h2>
|
|
67
|
+
<p>This component is mostly in javascript, to use it you must import the javascript file and create a new Drawer object.</p>
|
|
68
|
+
<p>You can customize the breakpoint when initiate the component.</p>
|
|
69
|
+
<p>You can have a <b>Backdrop</b> if you want to make it more like a drawer opening on the front of the content.</p>
|
|
70
|
+
|
|
71
|
+
<blockquote>
|
|
72
|
+
<p>Main use case are sidebar menu or main navigation menu.</p>
|
|
73
|
+
<p>This documentation use the drawer as an exemple for the sidebar on the left !</p>
|
|
74
|
+
</blockquote>
|
|
75
|
+
|
|
76
|
+
</doc-layout>
|
|
77
|
+
<script type="module" src="/main.js"></script>
|
|
78
|
+
</body>
|
|
79
|
+
|
|
80
|
+
</html>
|
|
@@ -4,7 +4,7 @@ class DocLayout extends HTMLElement {
|
|
|
4
4
|
this.innerHTML = `
|
|
5
5
|
<div id="backdrop"></div>
|
|
6
6
|
<header>
|
|
7
|
-
<button aria-expanded="false" aria-pressed="false" aria-controls="sidebar" aria-label="Toggle the sidebar navigation">
|
|
7
|
+
<button class="drawer-button" aria-expanded="false" aria-pressed="false" aria-controls="sidebar" aria-label="Toggle the sidebar navigation">
|
|
8
8
|
<svg viewbox="0 0 100 100" width="100%">
|
|
9
9
|
<rect width="100" height="10" x="0" y="10" rx="0"></rect>
|
|
10
10
|
<rect width="100" height="10" x="0" y="45" rx="0"></rect>
|
|
@@ -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.7
|
|
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" tabindex="0" hidden>
|
|
39
|
+
<aside id="sidebar" class="drawer" tabindex="0" 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">
|
|
@@ -73,6 +73,7 @@ class DocLayout extends HTMLElement {
|
|
|
73
73
|
<li><a href="/pages/components/card.html">Card</a></li>
|
|
74
74
|
<li><a href="/pages/components/dialog.html">Dialog</a></li>
|
|
75
75
|
<li><a href="/pages/components/disclosure.html">Disclosure</a></li>
|
|
76
|
+
<li><a href="/pages/components/drawer.html">Drawer</a></li>
|
|
76
77
|
<li><a href="/pages/components/dropdown.html">Dropdown</a></li>
|
|
77
78
|
<li><a href="/pages/components/form.html">Form</a></li>
|
|
78
79
|
<li><a href="/pages/components/list.html">List</a></li>
|
|
@@ -88,7 +89,6 @@ class DocLayout extends HTMLElement {
|
|
|
88
89
|
<li><a href="/pages/javascript/comfort.html">Comfort</a></li>
|
|
89
90
|
<li><a href="/pages/javascript/consent.html">Consent</a></li>
|
|
90
91
|
<li><a href="/pages/javascript/cookie.html">Cookie</a></li>
|
|
91
|
-
<li><a href="/pages/javascript/drawer.html">Drawer</a></li>
|
|
92
92
|
<li><a href="/pages/javascript/form.html">Form helper</a></li>
|
|
93
93
|
<li><a href="/pages/javascript/scroll.html">Scroll</a></li>
|
|
94
94
|
<li><a href="/pages/javascript/sortable.html">Sortable</a></li>
|
|
@@ -37,43 +37,6 @@ doc-layout {
|
|
|
37
37
|
gap: 1rem;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
// The open/close button for the sidebar
|
|
41
|
-
> header button {
|
|
42
|
-
|
|
43
|
-
rect {
|
|
44
|
-
transition: y .25s ease-in-out .25s, rotate .25s ease-in-out, opacity 0ms .25s;
|
|
45
|
-
transform-origin: center;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
// Active
|
|
49
|
-
&[aria-expanded=true] {
|
|
50
|
-
|
|
51
|
-
// Define the rectangle transition for the reverse animation
|
|
52
|
-
rect {
|
|
53
|
-
transition: y .25s ease-in-out, rotate .25s ease-in-out .25s, opacity 0ms .25s;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
// Remove the middle bar
|
|
57
|
-
rect:not(:first-child, :last-child) {
|
|
58
|
-
opacity: 0;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
// Change the first bar
|
|
62
|
-
rect:first-child {
|
|
63
|
-
y: calc(50% - var(--svg-line-size, 10px) / 2);
|
|
64
|
-
rotate: 45deg;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
// Change the last bar
|
|
68
|
-
rect:last-child {
|
|
69
|
-
y: calc(50% - var(--svg-line-size, 10px) / 2);
|
|
70
|
-
rotate: -45deg;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
}
|
|
76
|
-
|
|
77
40
|
> main {
|
|
78
41
|
grid-area: main;
|
|
79
42
|
overflow-y: auto;
|
|
@@ -81,38 +44,14 @@ doc-layout {
|
|
|
81
44
|
|
|
82
45
|
aside {
|
|
83
46
|
|
|
47
|
+
--drawer-display: grid;
|
|
48
|
+
--drawer-transform: translatex(-100%);
|
|
49
|
+
|
|
84
50
|
// Set the grid for the sidebar based on the parent grid
|
|
85
51
|
grid-area: aside;
|
|
86
|
-
display: grid !important;
|
|
87
52
|
grid-template-rows: subgrid;
|
|
88
53
|
grid-template-areas: "header" "main" "footer";
|
|
89
54
|
|
|
90
|
-
// Make the sidebar as stiky for mobile
|
|
91
|
-
position: sticky;
|
|
92
|
-
z-index: 2;
|
|
93
|
-
top: 0;
|
|
94
|
-
width: 320px;
|
|
95
|
-
max-width: 80vw;
|
|
96
|
-
height: 100vh;
|
|
97
|
-
|
|
98
|
-
// Animation
|
|
99
|
-
transition: all .5s ease-in-out;
|
|
100
|
-
transform-origin: left;
|
|
101
|
-
transform: none;
|
|
102
|
-
|
|
103
|
-
// Show the sidebar
|
|
104
|
-
pointer-events: initial;
|
|
105
|
-
visibility: visible;
|
|
106
|
-
transform: translateX(0);
|
|
107
|
-
|
|
108
|
-
// Hide the sidebar
|
|
109
|
-
&[hidden] {
|
|
110
|
-
pointer-events: none;
|
|
111
|
-
overflow: hidden auto;
|
|
112
|
-
visibility: hidden;
|
|
113
|
-
transform: translateX(-100%);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
55
|
// Design the nav
|
|
117
56
|
> nav {
|
|
118
57
|
overflow-y: auto;
|
|
@@ -131,34 +70,6 @@ doc-layout {
|
|
|
131
70
|
}
|
|
132
71
|
}
|
|
133
72
|
|
|
134
|
-
#backdrop {
|
|
135
|
-
// Design the backdrop
|
|
136
|
-
position: fixed;
|
|
137
|
-
inset: 0;
|
|
138
|
-
z-index: 1;
|
|
139
|
-
background-color: rgba(0, 0, 0, .25);
|
|
140
|
-
backdrop-filter: blur(.25rem);
|
|
141
|
-
|
|
142
|
-
// Animation
|
|
143
|
-
transition: all .5s ease-in-out;
|
|
144
|
-
|
|
145
|
-
// By default it's hidden
|
|
146
|
-
pointer-events: none;
|
|
147
|
-
visibility: hidden;
|
|
148
|
-
opacity: 0;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
// Make backdrop visible if breakpoint
|
|
152
|
-
@media (max-width:960px) {
|
|
153
|
-
&:has(aside:not([hidden])) {
|
|
154
|
-
#backdrop {
|
|
155
|
-
visibility: visible;
|
|
156
|
-
pointer-events: initial;
|
|
157
|
-
opacity: 1;
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
|
|
162
73
|
@media (min-width: 960px) {
|
|
163
74
|
&:has(aside:not([hidden])) {
|
|
164
75
|
grid-template-columns: 320px 1fr;
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// ------------------------------------------------------------------
|
|
3
|
+
/// Drawer
|
|
4
|
+
/// ------------------------------------------------------------------
|
|
5
|
+
/// Create the drawer component
|
|
6
|
+
///
|
|
7
|
+
///
|
|
8
|
+
/// @group components
|
|
9
|
+
/// @author Natacha Herth
|
|
10
|
+
///
|
|
11
|
+
////
|
|
12
|
+
|
|
13
|
+
.drawer {
|
|
14
|
+
|
|
15
|
+
// Design
|
|
16
|
+
display: var(--drawer-display, block);
|
|
17
|
+
background-color: var(--drawer-background, var(--color-body));
|
|
18
|
+
|
|
19
|
+
// Make the drawer as sticky for mobile
|
|
20
|
+
position: sticky;
|
|
21
|
+
z-index: var(--drawer-index, 2);
|
|
22
|
+
inset: var(--drawer-position, 0);
|
|
23
|
+
|
|
24
|
+
// Set the size
|
|
25
|
+
width: var(--drawer-width, 320px);
|
|
26
|
+
height: var(--drawer-height, 100vh);
|
|
27
|
+
max-width: var(--drawer-max-width, 80dvw);
|
|
28
|
+
max-height: var(--drawer-max-height, 100dvh);
|
|
29
|
+
|
|
30
|
+
// For animation
|
|
31
|
+
transform-origin: var(--drawer-origin, left);
|
|
32
|
+
transform: none;
|
|
33
|
+
|
|
34
|
+
// Show
|
|
35
|
+
pointer-events: initial;
|
|
36
|
+
visibility: visible;
|
|
37
|
+
transform: translateX(0);
|
|
38
|
+
opacity: 1;
|
|
39
|
+
|
|
40
|
+
// Animation
|
|
41
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
42
|
+
transition: var(--drawer-animation, all 0.5s ease-in-out);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Hide the drawer
|
|
46
|
+
&[hidden] {
|
|
47
|
+
pointer-events: none;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
visibility: hidden;
|
|
50
|
+
transform: var(--drawer-transform, translatex(100%));
|
|
51
|
+
opacity: 0;
|
|
52
|
+
display: var(--drawer-display, block) !important; // ! REQUIRED to avoid the display:none of [hidden]
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.drawer-button {
|
|
58
|
+
rect {
|
|
59
|
+
transform-origin: center;
|
|
60
|
+
|
|
61
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
62
|
+
transition: y .25s ease-in-out .25s, rotate .25s ease-in-out, opacity 0ms .25s;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// Active
|
|
67
|
+
&[aria-expanded=true] {
|
|
68
|
+
|
|
69
|
+
// Remove the middle bar
|
|
70
|
+
rect:not(:first-child, :last-child) {
|
|
71
|
+
opacity: 0;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// Change the first bar
|
|
75
|
+
rect:first-child {
|
|
76
|
+
y: calc(50% - var(--svg-line-size, 10px) / 2);
|
|
77
|
+
rotate: 45deg;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// Change the last bar
|
|
81
|
+
rect:last-child {
|
|
82
|
+
y: calc(50% - var(--svg-line-size, 10px) / 2);
|
|
83
|
+
rotate: -45deg;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
body #backdrop {
|
|
90
|
+
// Design the backdrop
|
|
91
|
+
position: fixed;
|
|
92
|
+
inset: 0;
|
|
93
|
+
z-index: 1;
|
|
94
|
+
background: var(--drawer-backdrop-background, var(--backdrop-color, rgba(black, .75)));
|
|
95
|
+
backdrop-filter: var(--drawer-backdrop-filter, var(--backdrop-filter, blur(.5rem)));
|
|
96
|
+
|
|
97
|
+
// By default it's hidden
|
|
98
|
+
pointer-events: none;
|
|
99
|
+
visibility: hidden;
|
|
100
|
+
opacity: 0;
|
|
101
|
+
|
|
102
|
+
// Animation
|
|
103
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
|
104
|
+
transition: all .5s ease-in-out;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// Make backdrop visible if breakpoint
|
|
109
|
+
@media (max-width:960px) {
|
|
110
|
+
body:has(.drawer:not([hidden])) {
|
|
111
|
+
#backdrop {
|
|
112
|
+
visibility: visible;
|
|
113
|
+
pointer-events: initial;
|
|
114
|
+
opacity: 1;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>Documentations: Javascript > Drawer</title>
|
|
8
|
-
</head>
|
|
9
|
-
|
|
10
|
-
<body data-preload>
|
|
11
|
-
<doc-layout>
|
|
12
|
-
|
|
13
|
-
<h1>Drawer</h1>
|
|
14
|
-
<p>The drawer component make you able to toggle a drawer with a button and resize window.</p>
|
|
15
|
-
|
|
16
|
-
<h2>Javascript</h2>
|
|
17
|
-
<p>This component is only in javascript, to use it you must import the javascript file and create a new Drawer object.</p>
|
|
18
|
-
<p>You can customize the breakpoint when initiate the component.</p>
|
|
19
|
-
<p>You can have a <b>Backdrop</b> if you want to make it more like a drawer opening on the front of the content.</p>
|
|
20
|
-
|
|
21
|
-
<blockquote>
|
|
22
|
-
<p>Main use case are sidebar menu or main navigation menu.</p>
|
|
23
|
-
<p>This documentation use the drawer as an exemple for the sidebar on the left !</p>
|
|
24
|
-
</blockquote>
|
|
25
|
-
|
|
26
|
-
<div class="code-group">
|
|
27
|
-
<div role="tablist">
|
|
28
|
-
<button role="tab" aria-controls="html">HTML</button>
|
|
29
|
-
<button role="tab" aria-controls="js">JS</button>
|
|
30
|
-
</div>
|
|
31
|
-
<doc-code id="html" data-type="html" role="tabpanel">
|
|
32
|
-
<div id="backdrop"></div>
|
|
33
|
-
<button aria-expanded="false" aria-pressed="false" aria-controls="drawer">Toggle</button>
|
|
34
|
-
<aside id="drawer" tabindex="0" hidden>
|
|
35
|
-
<button aria-expanded="false" aria-pressed="false" aria-controls="drawer">Toggle</button>
|
|
36
|
-
My drawer
|
|
37
|
-
</aside>
|
|
38
|
-
</doc-code>
|
|
39
|
-
<doc-code id="js" data-type="js" role="tabpanel">
|
|
40
|
-
import Drawer from '@natachah/vanilla-frontend/js/utilities/_drawer.js'
|
|
41
|
-
const drawer = document.getElementById('drawer')
|
|
42
|
-
if (drawer) new Drawer(drawer, { breakpoint : 960 })
|
|
43
|
-
</doc-code>
|
|
44
|
-
</div>
|
|
45
|
-
|
|
46
|
-
</doc-layout>
|
|
47
|
-
<script type="module" src="/main.js"></script>
|
|
48
|
-
</body>
|
|
49
|
-
|
|
50
|
-
</html>
|
|
Binary file
|