Skip to content

Commit 153acf9

Browse files
DarklgDarklg
committed
v 0.2.0
- Added functionality to build panels dynamically from HTML elements with data attributes.
1 parent abadc2f commit 153acf9

File tree

5 files changed

+81
-8
lines changed

5 files changed

+81
-8
lines changed

‎css/vanilla-panels.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,4 +67,16 @@
6767
padding: 1em;
6868
text-align: center;
6969
background-color: #CCC;
70+
}
71+
72+
/* Reset
73+
-------------------------- */
74+
[data-build-panel] {
75+
z-index: 1;
76+
position: absolute;
77+
top: 0;
78+
left: -999vw;
79+
width: 1px;
80+
height: 1px;
81+
opacity: 0;
7082
}

‎index.html‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,38 @@
44
<meta charset="UTF-8" />
55
<title>Vanilla Panels</title>
66
<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>
7+
<link rel="stylesheet" type="text/css" href="css/base.css?v=0.2.0" />
8+
<link rel="stylesheet" type="text/css" href="css/vanilla-panels.css?v=0.2.0" />
9+
<script src="js/vanilla-panels.js?v=0.2.0"></script>
1010
</head>
1111
<body>
1212
<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">
13+
14+
<h2>Full HTML panel</h2>
15+
<button data-panel-trigger="html-panel" type="button">Open HTML Panel</button>
16+
<div class="panel-wrapper" data-panel="html-panel" aria-hidden="true" data-panel-open="false">
1517
<div class="panel-overlay"></div>
1618
<div class="panel-content">
1719
<a class="panel-content__close" href="#"><span>Close Panel</span></a>
1820
<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+
<h2>HTML Panel</h2>
22+
<p>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.</p>
2123
</div>
2224
<div class="panel-content__action">
2325
action
2426
</div>
2527
</div>
2628
</div>
29+
30+
<h2>Built Panel</h2>
31+
<button data-panel-trigger="built-panel" type="button">Open Built Panel</button>
32+
<div data-build-panel="built-panel">
33+
<div class="panel-content__inner">
34+
<h2>Built Panel</h2>
35+
<p>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.</p>
36+
</div>
37+
<div class="panel-content__action">action</div>
38+
</div>
39+
2740
</body>
2841
</html>

‎js/vanilla-panels.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,41 @@
11
document.addEventListener("DOMContentLoaded", function() {
22
'use strict';
33

4+
var _panelTemplate =
5+
'<div class="panel-wrapper" aria-hidden="true" data-panel-open="false">' +
6+
'<div class="panel-overlay"></div>' +
7+
'<div class="panel-content">' +
8+
'<a href="#" class="panel-content__close"><span>Close Panel</span></a>' +
9+
'</div>' +
10+
'</div>';
11+
12+
var $panelsToBuild = document.querySelectorAll('[data-build-panel]');
13+
Array.prototype.forEach.call($panelsToBuild, function($item) {
14+
if (!$item) {
15+
return;
16+
}
17+
18+
if (!$item.querySelector('.panel-content__inner')) {
19+
console.log('No panel content found');
20+
return;
21+
}
22+
23+
var _panelId = $item.getAttribute('data-build-panel');
24+
25+
/* Build wrapper */
26+
var $wrapper = document.createElement('div');
27+
$wrapper.innerHTML = _panelTemplate;
28+
$wrapper = $wrapper.firstElementChild;
29+
$wrapper.setAttribute('data-panel', _panelId);
30+
31+
/* Load panel content */
32+
$item.removeAttribute('data-build-panel');
33+
$wrapper.querySelector('.panel-content').appendChild($item);
34+
35+
/* Inject in body */
36+
document.body.appendChild($wrapper);
37+
});
38+
439
/* Open a panel on click */
540
document.body.addEventListener('click', function(event) {
641
var panelTrigger = event.target.closest('[data-panel-trigger]');

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vanilla-panels",
3-
"version": "0.1.0",
3+
"version": "0.2.0",
44
"description": "Add simple panels to your website",
55
"scripts": {
66
},

‎scss/vanilla-panels.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,3 +84,16 @@ $zindex-header: 10!default;
8484
background-color: #CCC;
8585
}
8686
}
87+
88+
/* Reset
89+
-------------------------- */
90+
91+
[data-build-panel] {
92+
z-index: 1;
93+
position: absolute;
94+
top: 0;
95+
left: -999vw;
96+
width: 1px;
97+
height: 1px;
98+
opacity: 0;
99+
}

0 commit comments

Comments
 (0)