parent
303dbcbd7d
commit
9144002b89
4 changed files with 64 additions and 25 deletions
@ -1,7 +1,9 @@ |
|||||||
--- |
--- |
||||||
import Icon from "./Icon.astro"; |
import Icon from "../Icon.astro"; |
||||||
--- |
--- |
||||||
|
|
||||||
|
<script src="./topics.js" /> |
||||||
|
|
||||||
<div class="sm:-mb-[68px] mt-5 sm:mt-6 relative"> |
<div class="sm:-mb-[68px] mt-5 sm:mt-6 relative"> |
||||||
<input |
<input |
||||||
autofocus |
autofocus |
@ -0,0 +1,31 @@ |
|||||||
|
class Topics { |
||||||
|
constructor() { |
||||||
|
this.onDOMLoaded = this.onDOMLoaded.bind(this); |
||||||
|
this.init = this.init.bind(this); |
||||||
|
this.filterTopicNodes = this.filterTopicNodes.bind(this); |
||||||
|
} |
||||||
|
|
||||||
|
filterTopicNodes(e) { |
||||||
|
const value = e.target.value.trim().toLowerCase(); |
||||||
|
if (!value) { |
||||||
|
document.querySelectorAll(`[data-topic]`).forEach((item) => item.classList.remove('hidden')); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
document.querySelectorAll(`[data-topic]`).forEach((item) => item.classList.add('hidden')); |
||||||
|
|
||||||
|
document.querySelectorAll(`[data-topic*="${value}"]`).forEach((item) => item.classList.remove('hidden')); |
||||||
|
} |
||||||
|
|
||||||
|
onDOMLoaded() { |
||||||
|
document.getElementById('search-topic-input').addEventListener('keyup', this.filterTopicNodes); |
||||||
|
} |
||||||
|
|
||||||
|
init() { |
||||||
|
window.addEventListener('DOMContentLoaded', this.onDOMLoaded); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const topicRef = new Topics(); |
||||||
|
topicRef.init(); |
||||||
|
|
Loading…
Reference in new issue