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

Add functionality to mark as done on right click

Browse Source
This commit is contained in:
Kamran Ahmed
2022-12-13 14:32:16 +04:00
parent 72a918116a
commit a0bc3200ed
2 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/roadmap/content-drawer.tsx
View File

@@ -11,6 +11,14 @@ type ContentDrawerProps = {
onClose?: () => void;
};
export function markTopicDone(groupId: string) {
localStorage.setItem(groupId, 'done');
queryGroupElementsById(groupId).forEach((item) =>
item?.classList?.add('done')
);
}
export function ContentDrawer(props: ContentDrawerProps) {
const { roadmap, groupId, onClose = () => null } = props;
if (!groupId) {
@@ -52,10 +60,7 @@ export function ContentDrawer(props: ContentDrawerProps) {
{!isDone && (
<Button
onClick={() => {
localStorage.setItem(groupId, 'done');
queryGroupElementsById(groupId).forEach((item) =>
item?.classList?.add('done')
);
markTopicDone(groupId);
onClose();
}}
colorScheme="green"

23
pages/[roadmap]/interactive.tsx
View File

@@ -8,7 +8,7 @@ import { Footer } from '../../components/footer';
import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
import Helmet from '../../components/helmet';
import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header';
import { ContentDrawer } from '../../components/roadmap/content-drawer';
import { ContentDrawer, markTopicDone } from '../../components/roadmap/content-drawer';
import { RoadmapError } from '../../components/roadmap/roadmap-error';
import { RoadmapLoader } from '../../components/roadmap/roadmap-loader';
import { removeSortingInfo } from '../../lib/renderer';
@@ -53,10 +53,14 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
}
}
function getClosestGroupId(target: HTMLElement) {
const targetGroup = target?.closest('g');
return targetGroup?.dataset?.groupId;
}
function clickListener(event: MouseEvent) {
const targetGroup = (event?.target as HTMLElement)?.closest('g');
const groupId = targetGroup?.dataset?.groupId;
if (!targetGroup || !groupId) {
const groupId = getClosestGroupId(event.target as HTMLElement);
if (!groupId) {
return;
}
@@ -70,8 +74,19 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
setGroupId(removeSortingInfo(groupId));
}
function rightClickListener(event: MouseEvent) {
const groupId = getClosestGroupId(event.target as HTMLElement);
if (!groupId) {
return;
}
event.preventDefault();
markTopicDone(removeSortingInfo(groupId));
}
window.addEventListener('keydown', keydownListener);
window.addEventListener('click', clickListener);
window.addEventListener('contextmenu', rightClickListener)
return () => {
window.removeEventListener('keydown', keydownListener);