info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-21 16:41:24 +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; onClose?: () => void;
}; };
export function markTopicDone(groupId: string) {
localStorage.setItem(groupId, 'done');
queryGroupElementsById(groupId).forEach((item) =>
item?.classList?.add('done')
);
}
export function ContentDrawer(props: ContentDrawerProps) { export function ContentDrawer(props: ContentDrawerProps) {
const { roadmap, groupId, onClose = () => null } = props; const { roadmap, groupId, onClose = () => null } = props;
if (!groupId) { if (!groupId) {
@@ -52,10 +60,7 @@ export function ContentDrawer(props: ContentDrawerProps) {
{!isDone && ( {!isDone && (
<Button <Button
onClick={() => { onClick={() => {
localStorage.setItem(groupId, 'done'); markTopicDone(groupId);
queryGroupElementsById(groupId).forEach((item) =>
item?.classList?.add('done')
);
onClose(); onClose();
}} }}
colorScheme="green" 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 { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap';
import Helmet from '../../components/helmet'; import Helmet from '../../components/helmet';
import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header'; 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 { RoadmapError } from '../../components/roadmap/roadmap-error';
import { RoadmapLoader } from '../../components/roadmap/roadmap-loader'; import { RoadmapLoader } from '../../components/roadmap/roadmap-loader';
import { removeSortingInfo } from '../../lib/renderer'; 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) { function clickListener(event: MouseEvent) {
const targetGroup = (event?.target as HTMLElement)?.closest('g'); const groupId = getClosestGroupId(event.target as HTMLElement);
const groupId = targetGroup?.dataset?.groupId; if (!groupId) {
if (!targetGroup || !groupId) {
return; return;
} }
@@ -70,8 +74,19 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
setGroupId(removeSortingInfo(groupId)); 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('keydown', keydownListener);
window.addEventListener('click', clickListener); window.addEventListener('click', clickListener);
window.addEventListener('contextmenu', rightClickListener)
return () => { return () => {
window.removeEventListener('keydown', keydownListener); window.removeEventListener('keydown', keydownListener);