Handle mark done/pending functionality in best practices

src/components/FrameRenderer/FrameRenderer.css

@@ -53,34 +53,38 @@ svg text tspan {
   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) {
-    [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);