info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-31 21:11:44 +02:00
Code Issues Releases Wiki Activity

Add topic search interactivity

Browse Source
This commit is contained in:
Kamran Ahmed
2023-01-02 20:48:46 +04:00
parent 303dbcbd7d
commit 9144002b89
4 changed files with 64 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/Popup/Popup.astro
View File

@@ -2,35 +2,41 @@
import Icon from '../Icon.astro'; import Icon from '../Icon.astro';
export interface Props { export interface Props {
id: string; id: string;
title: string; title: string;
subtitle: string; subtitle: string;
} }
const { id, title, subtitle } = Astro.props; const { id, title, subtitle } = Astro.props;
--- ---
<script src="./popup.js"></script> <script src='./popup.js'></script>
<div id={id} tabindex="-1" class="hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 h-full flex items-center justify-center modal"> <div
<div class="relative p-4 w-full max-w-md h-full md:h-auto"> id={id}
<div class="relative bg-white rounded-lg shadow modal-body"> tabindex='-1'
<button type="button" class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center" onclick='this.closest(".modal").classList.add("hidden")'> class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 h-full flex items-center justify-center modal'
<Icon icon="close" /> >
<span class="sr-only">Close modal</span> <div class='relative p-4 w-full max-w-md h-full md:h-auto'>
</button> <div class='relative bg-white rounded-lg shadow modal-body'>
<div class="p-5"> <button
<h3 class='text-2xl mb-0.5 font-medium'> type='button'
{ title } class='absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center'
</h3> onclick='this.closest(".modal").classList.add("hidden")'
<p class="mb-4 text-sm font-normal text-gray-800"> >
{ subtitle } <Icon icon='close' />
</p> <span class='sr-only'>Close modal</span>
</button>
<slot /> <div class='p-5'>
</div> <h3 class='text-2xl mb-0.5 font-medium'>
{title}
</h3>
<p class='mb-4 text-sm font-normal text-gray-800'>
{subtitle}
</p>
<slot />
</div> </div>
</div> </div>
</div> </div>
</div>

2
src/components/RoadmapHeader.astro
View File

@@ -1,7 +1,7 @@
--- ---
import Icon from "./Icon.astro"; import Icon from "./Icon.astro";
import ResourcesAlert from "./ResourcesAlert.astro"; import ResourcesAlert from "./ResourcesAlert.astro";
import TopicSearch from "./TopicSearch.astro"; import TopicSearch from "./TopicSearch/TopicSearch.astro";
import YouTubeAlert from "./YouTubeAlert.astro"; import YouTubeAlert from "./YouTubeAlert.astro";
export interface Props { export interface Props {

4
src/components/TopicSearch.astro → src/components/TopicSearch/TopicSearch.astro
View File

@@ -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

31
src/components/TopicSearch/topics.js Normal file
View File

@@ -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();