Handle mark done/pending functionality in best practices

src/components/FrameRenderer/FrameRenderer.css

@@ -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%;
   }
-  
+}

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