aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorcodecalm <codecalm@gmail.com>2020-05-31 20:08:15 +0200
committercodecalm <codecalm@gmail.com>2020-05-31 20:08:15 +0200
commitb065e0aead1c019a4d24abbc1265ec9afb39b15d (patch)
tree633ed0fe0710cfd2ad06a09e83a4dcd74c0d81f0
parentMerge pull request #20 from mikouaji/html-search-bar (diff)
downloadtabler-icons-b065e0aead1c019a4d24abbc1265ec9afb39b15d.tar.xz
iconfont search
-rw-r--r--.build/iconfont.html39
1 files changed, 39 insertions, 0 deletions
diff --git a/.build/iconfont.html b/.build/iconfont.html
index a61a6ad..9026029 100644
--- a/.build/iconfont.html
+++ b/.build/iconfont.html
@@ -39,6 +39,8 @@
background: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .1);
border-radius: 3px;
+ border-top-right-radius: 0;
+ border-top-left-radius: 0;
}
.tabler-icons {
@@ -84,6 +86,20 @@
margin: 2rem 0 3rem;
}
+ .search-bar {
+ padding: 0.75rem 1.5rem;
+ background: #fff;
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .1);
+ border-radius: 3px;
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ }
+ .search-bar input[name=search]{
+ padding:0.5rem;
+ background: #fafbfc;
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .1);
+ width:100%;
+ }
</style>
</head>
@@ -96,6 +112,10 @@
<p class="text-muted">version <%= v %></p>
</header>
+ <div class="search-bar">
+ <input type="text" name="search" placeholder="type to search"/>
+ </div>
+
<div class="box">
<div class="tabler-icons">
<% glyphs.forEach(function(glyph) { %>
@@ -112,6 +132,25 @@
</div>
</div>
+<script type="text/javascript">
+ const input = document.querySelector("div.search-bar input");
+ const iconContainer = document.querySelector("div.box div.tabler-icons");
+ let icons = [];
+
+ document.querySelectorAll("div.tabler-icon").forEach(icon => icons.push({
+ el : icon,
+ name : icon.querySelector('strong').innerHTML,
+ }));
+
+ input.addEventListener('input', search);
+
+ function search(evt){
+ let searchValue = evt.target.value;
+ let iconsToShow = searchValue.length ? icons.filter(icon => icon.name.includes(searchValue)) : icons;
+ iconContainer.innerHTML = "";
+ iconsToShow.forEach(icon => iconContainer.appendChild(icon.el));
+ }
+</script>
</body>
</html>