Handle mark done/pending functionality in best practices

src/components/FrameRenderer/FrameRenderer.css

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

src/components/FrameRenderer/renderer.js

@@ -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+-/, '');
 

src/components/TopicOverlay/topic.js

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