Skip to content

Commit c884cd5

Browse files
jgthmsjgthms
committed
Add lights
1 parent 3004e27 commit c884cd5

81 files changed

Lines changed: 334 additions & 56 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎_includes/collections/forms.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,9 @@ <h3 class="attribute-name">
213213
<section id="fieldset" class="element">
214214
<header class="element-header">
215215
<nav class="element-links">
216+
<span>
217+
Type: <strong>block</strong>
218+
</span>
216219
<span>
217220
Self-closing:
218221
<strong>
@@ -292,6 +295,9 @@ <h3 class="attribute-name">
292295
<section id="form" class="element">
293296
<header class="element-header">
294297
<nav class="element-links">
298+
<span>
299+
Type: <strong>block</strong>
300+
</span>
295301
<span>
296302
Self-closing:
297303
<strong>
@@ -1152,6 +1158,9 @@ <h3 class="attribute-name">
11521158
<section id="legend" class="element">
11531159
<header class="element-header">
11541160
<nav class="element-links">
1161+
<span>
1162+
Type: <strong>block</strong>
1163+
</span>
11551164
<span>
11561165
Self-closing:
11571166
<strong>
@@ -1202,6 +1211,9 @@ <h2 class="element-name">
12021211
<section id="textarea" class="element">
12031212
<header class="element-header">
12041213
<nav class="element-links">
1214+
<span>
1215+
Type: <strong>inline</strong>
1216+
</span>
12051217
<span>
12061218
Self-closing:
12071219
<strong>

‎_includes/collections/lists.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@ <h2 class="element-name">
5656
<section id="dl" class="element">
5757
<header class="element-header">
5858
<nav class="element-links">
59+
<span>
60+
Type: <strong>block</strong>
61+
</span>
5962
<span>
6063
Self-closing:
6164
<strong>
@@ -230,6 +233,9 @@ <h2 class="element-name">
230233
<section id="ol" class="element">
231234
<header class="element-header">
232235
<nav class="element-links">
236+
<span>
237+
Type: <strong>block</strong>
238+
</span>
233239
<span>
234240
Self-closing:
235241
<strong>
@@ -462,6 +468,9 @@ <h3 class="attribute-name">
462468
<section id="ul" class="element">
463469
<header class="element-header">
464470
<nav class="element-links">
471+
<span>
472+
Type: <strong>block</strong>
473+
</span>
465474
<span>
466475
Self-closing:
467476
<strong>

‎_includes/components/finder.html‎

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@
33
<input id="finder-input" type="search" autocomplete="off" placeholder="Search 113 HTML elements">
44
<i class="icon is-search"></i>
55
</div>
6+
<div id="finder-checkboxes" class="finder-checkboxes">
7+
<label class="light light--experimental is-active"><input type="checkbox" name="experimental" checked>experimental</label>
8+
<label class="light light--meta is-active"><input type="checkbox" name="meta" checked>meta</label>
9+
<label class="light light--selfclosing is-active"><input type="checkbox" name="selfclosing" checked>self-closing</label>
10+
<label class="light light--inline is-active"><input type="checkbox" name="inline" checked>inline</label>
11+
<label class="light light--block is-active"><input type="checkbox" name="block" checked>block</label>
12+
</div>
613
<div id="finder-list" class="finder-list">
714
{% include lists/finder-list.html %}
815
</div>
@@ -15,6 +22,14 @@
1522
var $searchInput = document.getElementById('finder-input');
1623
var $finderList = document.getElementById('finder-list');
1724
var $finderItems = document.querySelectorAll('.finder-item');
25+
var $finderCheckboxes = document.querySelectorAll('#finder-checkboxes input');
26+
var lights = {
27+
experimental: true,
28+
meta: true,
29+
selfClosing: true,
30+
inline: true,
31+
block: true,
32+
}
1833
var isFocused = false;
1934
var isSearching = false;
2035
var isModaling = false;
@@ -49,7 +64,7 @@
4964
var elementName = $el.dataset.elementName;
5065
var isMatch = highlightQuery($el, elementName, query);
5166

52-
if (isMatch) {
67+
if (isMatch && !$el.classList.contains('is-hidden')) {
5368
matches.push({
5469
DOMIndex: index,
5570
elementName: elementName,
@@ -66,6 +81,13 @@
6681
}
6782
});
6883

84+
Array.prototype.forEach.call($finderCheckboxes, function($el) {
85+
$el.addEventListener('change', function(event) {
86+
lights[this.name] = this.checked;
87+
changeLights();
88+
});
89+
});
90+
6991
window.addEventListener('click', function(event) {
7092
if (!isFocused) {
7193
isSearching = false;
@@ -116,6 +138,31 @@
116138
}
117139
});
118140

141+
function checkLights() {
142+
Array.prototype.forEach.call($finderCheckboxes, function($el) {
143+
lights[this.name] = this.checked;
144+
});
145+
}
146+
147+
function changeLights() {
148+
Array.prototype.forEach.call($finderItems, function($el, index) {
149+
var hide = false;
150+
151+
Object.keys(lights).forEach(function(key) {
152+
// Check if we hide "experimental"
153+
if (!lights[key]) {
154+
hide = (hide) || ($el.dataset[key] == 'true');
155+
}
156+
});
157+
158+
if (hide) {
159+
$el.classList.add('is-hidden');
160+
} else {
161+
$el.classList.remove('is-hidden');
162+
}
163+
});
164+
}
165+
119166
function globalReset() {
120167
isFocused = false;
121168
$searchInput.value = '';
@@ -125,6 +172,9 @@
125172
$finderList.classList.remove('is-searching');
126173
cleanMenu($finderItems, true, true);
127174
}
175+
176+
checkLights();
177+
changeLights();
128178
}
129179

130180
});

‎_includes/lists/finder-list.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎_layouts/collection.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
</head>
2929
<body>
3030
{% include menu.html %}
31-
<main class="main">
31+
<main class="collection">
3232
<header class="heading">
3333
<div class="heading-content">
3434
<h1 class="heading-title">

‎_layouts/single.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
</head>
2929
<body>
3030
{% include menu.html %}
31-
<main class="main">
31+
<main class="single">
3232
<section class="properties">
3333
{{content}}
3434
</section>

‎css/website.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎element/del/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
<section id="del" class="element">
77
<header class="element-header">
88
<nav class="element-links">
9+
<span>
10+
Type: <strong>inline</strong>
11+
</span>
912
<span>
1013
Self-closing:
1114
<strong>

‎element/details/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
<section id="details" class="element">
77
<header class="element-header">
88
<nav class="element-links">
9+
<span>
10+
Type: <strong>block</strong>
11+
</span>
912
<span>
1013
Self-closing:
1114
<strong>

‎element/dfn/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
<section id="dfn" class="element">
77
<header class="element-header">
88
<nav class="element-links">
9+
<span>
10+
Type: <strong>inline</strong>
11+
</span>
912
<span>
1013
Self-closing:
1114
<strong>

0 commit comments

Comments
 (0)