feat: Toggle demo clipboard visibility between JSON, and Markdown and…

… HTML (#609) * Add demo clipboard view toggle between when type is set to JSON and when not when set to JSON, markdown and HTML clipboards not visible and disabled when not set to JSON, JSON clipboard not visible and disabled * Update src/demo/js/script.js Co-authored-by: Jonah Lawrence <[email protected]> * Update src/demo/js/script.js Co-authored-by: Jonah Lawrence <[email protected]> * Update src/demo/js/script.js Co-authored-by: Jonah Lawrence <[email protected]> * Fix demo clipboard copy to json --------- Co-authored-by: Jonah Lawrence <[email protected]>
DenverCoder1 · Oct 4, 2023 · caa9a84 · caa9a84
1 parent f5aeeca
commit caa9a84
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/src/demo/index.php b/src/demo/index.php
@@ -245,6 +245,17 @@ function gtag() {
                         Copy To Clipboard
                     </button>
                 </div>
+
+                <div>
+                    <h2>JSON</h2>
+                    <div class="code-container json">
+                        <code></code>
+                    </div>
+
+                    <button class="copy-button btn tooltip copy-json" onclick="clipboard.copy(this);" onmouseout="tooltip.reset(this);" disabled>
+                        Copy To Clipboard
+                    </button>
+                </div>
             </div>
             <div class="bottom">
                 <a href="https://github.com/DenverCoder1/github-readme-streak-stats/blob/main/docs/faq.md" target="_blank" class="underline-hover faq">

diff --git a/src/demo/js/script.js b/src/demo/js/script.js
@@ -47,17 +47,22 @@ const preview = {
       document.querySelector(".output img").src = demoImageURL;
       document.querySelector(".md code").innerText = md;
       document.querySelector(".html code").innerText = html;
+      document.querySelector(".copy-md").parentElement.style.display = "block";
+      document.querySelector(".copy-html").parentElement.style.display = "block";
       document.querySelector(".output img").style.display = "block";
       document.querySelector(".output .json").style.display = "none";
+      document.querySelector(".copy-json").parentElement.style.display = "none";
     } else {
-      document.querySelector(".output img").style.display = "none";
-      document.querySelector(".output .json").style.display = "block";
       fetch(demoImageURL)
         .then((response) => response.json())
         .then((data) => (document.querySelector(".output .json pre").innerText = JSON.stringify(data, null, 2)))
         .catch(console.error);
-      document.querySelector(".md code").innerText = imageURL;
-      document.querySelector(".html code").innerText = imageURL;
+      document.querySelector(".json code").innerText = imageURL;
+      document.querySelector(".copy-md").parentElement.style.display = "none";
+      document.querySelector(".copy-html").parentElement.style.display = "none";
+      document.querySelector(".output img").style.display = "none";
+      document.querySelector(".output .json").style.display = "block";
+      document.querySelector(".copy-json").parentElement.style.display = "block";
     }
     // disable copy button if username is invalid
     const copyButtons = document.querySelectorAll(".copy-button");
@@ -388,6 +393,8 @@ const clipboard = {
       input.value = document.querySelector(".md code").innerText;
     } else if (el.classList.contains("copy-html")) {
       input.value = document.querySelector(".html code").innerText;
+    } else if (el.classList.contains("copy-json")) {
+      input.value = document.querySelector(".json code").innerText;
     }
     document.body.appendChild(input);
     // select all