diff options
| author | codecalm <codecalm@gmail.com> | 2020-05-31 20:08:15 +0200 |
|---|---|---|
| committer | codecalm <codecalm@gmail.com> | 2020-05-31 20:08:15 +0200 |
| commit | b065e0aead1c019a4d24abbc1265ec9afb39b15d (patch) | |
| tree | 633ed0fe0710cfd2ad06a09e83a4dcd74c0d81f0 | |
| parent | Merge pull request #20 from mikouaji/html-search-bar (diff) | |
| download | tabler-icons-b065e0aead1c019a4d24abbc1265ec9afb39b15d.tar.xz | |
iconfont search
| -rw-r--r-- | .build/iconfont.html | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/.build/iconfont.html b/.build/iconfont.html index a61a6ad3..90260298 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> |