parent
4f9153fdb3
commit
9f4ffa211e
4 changed files with 53 additions and 33 deletions
@ -1,8 +1,9 @@ |
||||
window.setTimeout(() => { |
||||
const ad = document.querySelector('.sponsor-ad'); |
||||
const ad = document.querySelector('#sponsor-ad'); |
||||
if (!ad) { |
||||
return; |
||||
} |
||||
|
||||
ad.classList.remove('hidden'); |
||||
}, 500); |
||||
ad.classList.add('flex'); |
||||
}, 500); |
||||
|
@ -1,31 +1,46 @@ |
||||
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); |
||||
constructor() { |
||||
this.topicSearchId = 'search-topic-input'; |
||||
|
||||
this.onDOMLoaded = this.onDOMLoaded.bind(this); |
||||
this.init = this.init.bind(this); |
||||
this.filterTopicNodes = this.filterTopicNodes.bind(this); |
||||
} |
||||
|
||||
get topicSearchEl() { |
||||
return document.getElementById(this.topicSearchId); |
||||
} |
||||
|
||||
filterTopicNodes(e) { |
||||
const value = e.target.value.trim().toLowerCase(); |
||||
if (!value) { |
||||
document |
||||
.querySelectorAll(`[data-topic]`) |
||||
.forEach((item) => item.classList.remove('hidden')); |
||||
return; |
||||
} |
||||
|
||||
init() { |
||||
window.addEventListener('DOMContentLoaded', this.onDOMLoaded); |
||||
|
||||
document |
||||
.querySelectorAll(`[data-topic]`) |
||||
.forEach((item) => item.classList.add('hidden')); |
||||
|
||||
document |
||||
.querySelectorAll(`[data-topic*="${value}"]`) |
||||
.forEach((item) => item.classList.remove('hidden')); |
||||
} |
||||
|
||||
onDOMLoaded() { |
||||
if (!this.topicSearchEl) { |
||||
return; |
||||
} |
||||
|
||||
this.topicSearchEl.addEventListener('keyup', this.filterTopicNodes); |
||||
} |
||||
|
||||
init() { |
||||
window.addEventListener('DOMContentLoaded', this.onDOMLoaded); |
||||
} |
||||
|
||||
const topicRef = new Topics(); |
||||
topicRef.init(); |
||||
|
||||
} |
||||
|
||||
const topicRef = new Topics(); |
||||
topicRef.init(); |
||||
|
Loading…
Reference in new issue