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

Handle mark done/pending functionality in best practices

Browse Source
This commit is contained in:
Kamran Ahmed
2023-01-24 19:57:42 +04:00
parent e0e6168cfe
commit 415dc2d8e8
4 changed files with 140 additions and 3852 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3770
public/jsons/best-practices/frontend-performance.json
View File

File diff suppressed because one or more lines are too long

164
src/components/FrameRenderer/FrameRenderer.css
View File

@@ -1,86 +1,90 @@
svg text tspan {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeSpeed;
}
code {
background: #1e1e3f;
color: #9efeff;
padding: 3px 5px;
font-size: 14px;
border-radius: 3px;
}
svg .clickable-group {
cursor: pointer;
}
svg .clickable-group:hover > [fill='rgb(65,53,214)'] {
fill: #232381;
stroke: #232381;
}
svg .clickable-group:hover > [fill='rgb(255,255,0)'] {
fill: #d6d700;
}
svg .clickable-group:hover > [fill='rgb(255,229,153)'] {
fill: #f3c950;
}
svg .clickable-group:hover > [fill='rgb(153,153,153)'] {
fill: #646464;
}
svg .clickable-group:hover > [fill='rgb(255,255,255)'] {
fill: #d7d7d7;
}
svg .clickable-group:hover > [fill='rgb(255,255,221)'] {
fill: #e5e5be;
}
svg .clickable-group:hover > [fill='rgb(255,217,102)'] {
fill: #d9b443;
}
svg .done rect {
fill: #cbcbcb !important;
}
svg .done text {
text-decoration: line-through;
}
/************************************
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeSpeed;
}
code {
background: #1e1e3f;
color: #9efeff;
padding: 3px 5px;
font-size: 14px;
border-radius: 3px;
}
svg .clickable-group {
cursor: pointer;
}
svg .clickable-group:hover > [fill='rgb(65,53,214)'] {
fill: #232381;
stroke: #232381;
}
svg .clickable-group:hover > [fill='rgb(255,255,0)'] {
fill: #d6d700;
}
svg .clickable-group:hover > [fill='rgb(255,229,153)'] {
fill: #f3c950;
}
svg .clickable-group:hover > [fill='rgb(153,153,153)'] {
fill: #646464;
}
svg .clickable-group:hover > [fill='rgb(255,255,255)'] {
fill: #d7d7d7;
}
svg .clickable-group:hover > [fill='rgb(255,255,221)'] {
fill: #e5e5be;
}
svg .clickable-group:hover > [fill='rgb(255,217,102)'] {
fill: #d9b443;
}
svg .done rect {
fill: #cbcbcb !important;
}
svg .done text {
text-decoration: line-through;
}
svg .clickable-group.done[data-group-id^='check:'] rect {
fill: gray !important;
stroke: gray;
}
/************************************
Aspect ratio implementation
*************************************/
[style*="--aspect-ratio"] > :first-child {
width: 100%;
[style*='--aspect-ratio'] > :first-child {
width: 100%;
}
[style*='--aspect-ratio'] > img {
height: auto;
}
@supports (--custom: property) {
[style*='--aspect-ratio'] {
position: relative;
}
[style*="--aspect-ratio"] > img {
height: auto;
[style*='--aspect-ratio']::before {
content: '';
display: block;
/*noinspection CssUnresolvedCustomProperty*/
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
@supports (--custom:property) {
[style*="--aspect-ratio"] {
position: relative;
}
[style*="--aspect-ratio"]::before {
content: "";
display: block;
/*noinspection CssUnresolvedCustomProperty*/
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
[style*="--aspect-ratio"] > :first-child {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
[style*='--aspect-ratio'] > :first-child {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}

13
src/components/FrameRenderer/renderer.js
View File

@@ -80,6 +80,19 @@ export class Renderer {
return;
}
if (/^check:/.test(groupId)) {
window.dispatchEvent(
new CustomEvent(`${this.resourceType}.topic.toggle`, {
detail: {
topicId: groupId.replace('check:', ''),
resourceType: this.resourceType,
resourceId: this.resourceId,
},
})
);
return;
}
// Remove sorting prefix from groupId
const normalizedGroupId = groupId.replace(/^\d+-/, '');

45
src/components/TopicOverlay/topic.js
View File

@@ -16,6 +16,8 @@ export class Topic {
this.handleRoadmapTopicClick = this.handleRoadmapTopicClick.bind(this);
this.handleBestPracticeTopicClick = this.handleBestPracticeTopicClick.bind(this);
this.handleBestPracticeTopicToggle = this.handleBestPracticeTopicToggle.bind(this);
this.handleBestPracticeTopicPending = this.handleBestPracticeTopicPending.bind(this);
this.close = this.close.bind(this);
this.resetDOM = this.resetDOM.bind(this);
@@ -138,6 +140,31 @@ export class Topic {
});
}
handleBestPracticeTopicToggle(e) {
const { resourceId: bestPracticeId, topicId } = e.detail;
if (!topicId || !bestPracticeId) {
console.log('Missing topic or bestPracticeId: ', e.detail);
return;
}
const isDone = localStorage.getItem(topicId) === 'done';
if (isDone) {
this.markAsPending(topicId);
} else {
this.markAsDone(topicId);
}
}
handleBestPracticeTopicPending(e) {
const { resourceId: bestPracticeId, topicId } = e.detail;
if (!topicId || !bestPracticeId) {
console.log('Missing topic or bestPracticeId: ', e.detail);
return;
}
this.markAsPending(topicId);
}
handleBestPracticeTopicClick(e) {
const { resourceId: bestPracticeId, topicId } = e.detail;
if (!topicId || !bestPracticeId) {
@@ -169,10 +196,10 @@ export class Topic {
}
querySvgElementsByTopicId(topicId) {
const elements = document.querySelectorAll(`[data-group-id$="-${topicId}"]`);
const matchingElements = [];
elements.forEach((element) => {
// Elements having sort order in the beginning of the group id
document.querySelectorAll(`[data-group-id$="-${topicId}"]`).forEach((element) => {
const foundGroupId = element?.dataset?.groupId || '';
const validGroupRegex = new RegExp(`^\\d+-${topicId}$`);
@@ -181,6 +208,16 @@ export class Topic {
}
});
// Elements with exact match of the topic id
document.querySelectorAll(`[data-group-id="${topicId}"]`).forEach((element) => {
matchingElements.push(element);
});
// Matching "check:XXXX" box of the topic
document.querySelectorAll(`[data-group-id="check:${topicId}"]`).forEach((element) => {
matchingElements.push(element);
});
return matchingElements;
}
@@ -229,8 +266,10 @@ export class Topic {
}
init() {
window.addEventListener('roadmap.topic.click', this.handleRoadmapTopicClick);
window.addEventListener('best-practice.topic.click', this.handleBestPracticeTopicClick);
window.addEventListener('best-practice.topic.toggle', this.handleBestPracticeTopicToggle);
window.addEventListener('roadmap.topic.click', this.handleRoadmapTopicClick);
window.addEventListener('click', this.handleOverlayClick);
window.addEventListener('contextmenu', this.rightClickListener);