Skip to content

Commit abadc2f

Browse files
DarklgDarklg
committed
v 0.1.0
Basic Panels
1 parent 49b14ec commit abadc2f

9 files changed

Lines changed: 359 additions & 1 deletion

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/yarn.lock

‎README.md‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,22 @@
1-
# vanillaPanels
1+
# Vanilla Panels
2+
23
Add simple panels to your website
4+
5+
## Usage
6+
7+
```html
8+
<button data-panel-trigger="panel-name" type="button">Open Panel</button>
9+
<div class="panel-wrapper" data-panel="panel-name" aria-hidden="true" data-panel-open="false">
10+
<div class="panel-overlay"></div>
11+
<div class="panel-content">
12+
<a class="panel-content__close" href="#"><span>Close Panel</span></a>
13+
<div class="panel-content__inner">
14+
<h2>Panel</h2>
15+
Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it's really how it works.
16+
</div>
17+
<div class="panel-content__action">
18+
action
19+
</div>
20+
</div>
21+
</div>
22+
```

‎css/base.css‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
@charset "UTF-8";
2+
3+
/* ----------------------------------------------------------
4+
Basic theme
5+
---------------------------------------------------------- */
6+
7+
* {
8+
box-sizing: border-box;
9+
margin: 0;
10+
padding: 0;
11+
border: 0;
12+
font-family: sans-serif;
13+
font-size: inherit;
14+
line-height: 1.5;
15+
}
16+
17+
body {
18+
font-size: 16px;
19+
}
20+
21+
hr {
22+
margin: 2em 0;
23+
border: 1px solid #EEE;
24+
}
25+
26+
h1,
27+
h2,
28+
h3,
29+
h4,
30+
h5 {
31+
margin-top: 1em;
32+
margin-bottom: .5em;
33+
}
34+
35+
h1 {
36+
font-size: 2em;
37+
}
38+
39+
h2 {
40+
font-size: 1.8em;
41+
}
42+
43+
select {
44+
height: 1.5em;
45+
background-color: transparent;
46+
}
47+
48+
.button-wrapper {
49+
margin: 1em 0;
50+
padding-left: 4em;
51+
}
52+
53+
button {
54+
padding: 0 1em;
55+
text-align: center;
56+
background-color: #EEE;
57+
transition: background-color 0.3s ease;
58+
cursor: pointer;
59+
}
60+
61+
button:hover {
62+
background-color: #CCC;
63+
}
64+
65+
textarea {
66+
width: 100%;
67+
padding: .5em;
68+
border: 1px solid #CCC;
69+
}
70+
71+
body {
72+
margin: 10px auto;
73+
padding: 10px;
74+
max-width: 800px;
75+
}

‎css/vanilla-panels.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/* ----------------------------------------------------------
2+
Panels
3+
---------------------------------------------------------- */
4+
.panel-wrapper,
5+
.panel-wrapper .panel-overlay,
6+
.panel-wrapper .panel-content__inner {
7+
z-index: 1;
8+
position: absolute;
9+
top: 0;
10+
right: 0;
11+
bottom: 0;
12+
left: 0;
13+
margin: auto;
14+
}
15+
.panel-wrapper {
16+
z-index: 12;
17+
position: fixed;
18+
transition: opacity 0.3s ease;
19+
}
20+
.panel-wrapper[data-panel-open=false] {
21+
opacity: 0;
22+
pointer-events: none;
23+
}
24+
.panel-wrapper .panel-overlay {
25+
background-color: rgba(0, 0, 0, 0.5);
26+
cursor: pointer;
27+
}
28+
.panel-wrapper .panel-content {
29+
z-index: 1;
30+
position: absolute;
31+
top: 0;
32+
right: 0;
33+
bottom: 0;
34+
width: 450px;
35+
max-width: 100%;
36+
background-color: #FFF;
37+
transition: transform 0.3s ease;
38+
}
39+
.panel-wrapper[data-panel-open=false] .panel-content {
40+
transform: translateX(100%);
41+
}
42+
.panel-wrapper .panel-content__close {
43+
z-index: 2;
44+
position: absolute;
45+
top: 0;
46+
right: 0;
47+
padding: 1em;
48+
cursor: pointer;
49+
}
50+
.panel-wrapper .panel-content__inner {
51+
box-sizing: border-box;
52+
padding: 1em;
53+
overflow: auto;
54+
-webkit-overflow-scrolling: touch;
55+
}
56+
.panel-wrapper .panel-content__inner:not(:last-child) {
57+
bottom: 130px;
58+
}
59+
.panel-wrapper .panel-content__action {
60+
z-index: 2;
61+
position: absolute;
62+
right: 0;
63+
bottom: 0;
64+
left: 0;
65+
box-sizing: border-box;
66+
height: 130px;
67+
padding: 1em;
68+
text-align: center;
69+
background-color: #CCC;
70+
}

‎gulpfile.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const gulp = require('gulp');
2+
const sass = require('gulp-sass')(require('sass'));
3+
4+
5+
// Compile SCSS to CSS
6+
function compileSCSS() {
7+
return gulp.src('./scss/**/*.scss') // Source SCSS files
8+
.pipe(sass().on('error', sass.logError)) // Compile SCSS to CSS
9+
.pipe(gulp.dest('./css')); // Output to ./css directory
10+
}
11+
12+
// Watch for changes in SCSS files
13+
function watchFiles() {
14+
gulp.watch('./scss/**/*.scss', compileSCSS);
15+
}
16+
17+
// Define default task
18+
exports.default = gulp.series(compileSCSS, watchFiles);

‎index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE HTML>
2+
<html lang="fr-FR">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Vanilla Panels</title>
6+
<meta name="viewport" content="width=device-width" />
7+
<link rel="stylesheet" type="text/css" href="css/base.css" />
8+
<link rel="stylesheet" type="text/css" href="css/vanilla-panels.css" />
9+
<script src="js/vanilla-panels.js"></script>
10+
</head>
11+
<body>
12+
<h1>Vanilla Panels</h1>
13+
<button data-panel-trigger="panel-name" type="button">Open Panel</button>
14+
<div class="panel-wrapper" data-panel="panel-name" aria-hidden="true" data-panel-open="false">
15+
<div class="panel-overlay"></div>
16+
<div class="panel-content">
17+
<a class="panel-content__close" href="#"><span>Close Panel</span></a>
18+
<div class="panel-content__inner">
19+
<h2>Panel</h2>
20+
Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it's really how it works.
21+
</div>
22+
<div class="panel-content__action">
23+
action
24+
</div>
25+
</div>
26+
</div>
27+
</body>
28+
</html>

‎js/vanilla-panels.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
document.addEventListener("DOMContentLoaded", function() {
2+
'use strict';
3+
4+
/* Open a panel on click */
5+
document.body.addEventListener('click', function(event) {
6+
var panelTrigger = event.target.closest('[data-panel-trigger]');
7+
if (panelTrigger) {
8+
event.preventDefault();
9+
open_panel(panelTrigger.getAttribute('data-panel-trigger'));
10+
}
11+
});
12+
13+
/* Close all panels when clicking echap */
14+
document.body.addEventListener('keydown', function(event) {
15+
if (event.key === 'Escape') {
16+
close_panels();
17+
}
18+
});
19+
20+
/* Close panels on click on panel-overlay */
21+
document.body.addEventListener('click', function(event) {
22+
var panelOverlay = event.target.closest('[data-panel-close], .panel-overlay, .panel-content__close');
23+
if (panelOverlay) {
24+
event.preventDefault();
25+
close_panels();
26+
}
27+
});
28+
29+
function close_panels() {
30+
var panels = document.querySelectorAll('[data-panel]');
31+
panels.forEach(function(panel) {
32+
panel.setAttribute('data-panel-open', 'false');
33+
});
34+
}
35+
36+
function open_panel(id) {
37+
if (!id) {
38+
return;
39+
}
40+
close_panels();
41+
var panel = document.querySelector('[data-panel="' + id + '"]');
42+
if (panel) {
43+
panel.setAttribute('data-panel-open', 'true');
44+
}
45+
}
46+
47+
});

‎package.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"name": "vanilla-panels",
3+
"version": "0.1.0",
4+
"description": "Add simple panels to your website",
5+
"scripts": {
6+
},
7+
"license": "MIT",
8+
"devDependencies": {
9+
"gulp": "4.*",
10+
"gulp-sass": "^6.0.1",
11+
"sass": "^1.86.0"
12+
}
13+
}

‎scss/vanilla-panels.scss‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
@charset "UTF-8";
2+
3+
/* ----------------------------------------------------------
4+
Panels
5+
---------------------------------------------------------- */
6+
7+
$panel-bottom-height: 130px!default;
8+
$zindex-header: 10!default;
9+
.panel-wrapper {
10+
&,
11+
.panel-overlay,
12+
.panel-content__inner {
13+
z-index: 1;
14+
position: absolute;
15+
top: 0;
16+
right: 0;
17+
bottom: 0;
18+
left: 0;
19+
margin: auto;
20+
}
21+
22+
& {
23+
z-index: $zindex-header + 2;
24+
position: fixed;
25+
transition: opacity 0.3s ease;
26+
}
27+
28+
&[data-panel-open="false"] {
29+
opacity: 0;
30+
pointer-events: none;
31+
}
32+
33+
.panel-overlay {
34+
background-color: rgba(0, 0, 0, 0.5);
35+
cursor: pointer;
36+
}
37+
38+
.panel-content {
39+
z-index: 1;
40+
position: absolute;
41+
top: 0;
42+
right: 0;
43+
bottom: 0;
44+
width: 450px;
45+
max-width: 100%;
46+
background-color: #FFF;
47+
transition: transform 0.3s ease;
48+
}
49+
50+
&[data-panel-open="false"] .panel-content {
51+
transform: translateX(100%);
52+
}
53+
54+
.panel-content__close {
55+
z-index: 2;
56+
position: absolute;
57+
top: 0;
58+
right: 0;
59+
padding: 1em;
60+
cursor: pointer;
61+
}
62+
63+
.panel-content__inner {
64+
box-sizing: border-box;
65+
padding: 1em;
66+
overflow: auto;
67+
-webkit-overflow-scrolling: touch;
68+
}
69+
70+
.panel-content__inner:not(:last-child) {
71+
bottom: $panel-bottom-height;
72+
}
73+
74+
.panel-content__action {
75+
z-index: 2;
76+
position: absolute;
77+
right: 0;
78+
bottom: 0;
79+
left: 0;
80+
box-sizing: border-box;
81+
height: $panel-bottom-height;
82+
padding: 1em;
83+
text-align: center;
84+
background-color: #CCC;
85+
}
86+
}

0 commit comments

Comments
 (0)