recipe shortcode: add copy indicator

resolves ScottPlot/ScottPlot#4725

Author: swharden

layouts/_default/baseof.html

@@ -34,7 +34,7 @@
         integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
 
     <script src="/js/anchor.js"></script>
-    <script src="/js/recipe.js?20250112"></script>
+    <script src="/js/recipe.js?20250123"></script>
 
     <link rel="stylesheet" href="/css/accordian.css?20231209">
     <link rel="stylesheet" href="/css/stats.css?20231209">
@@ -44,7 +44,7 @@
 
     <link rel="stylesheet" href="/css/highlightjs/vs2015.css?20241101">
     <script src="/js/highlight.min.js"></script>
-    <link rel="stylesheet" href="/css/recipe.css?20250112">
+    <link rel="stylesheet" href="/css/recipe.css?20250123">
 
 </head>
 

layouts/shortcodes/recipe-sp5.html

@@ -33,10 +33,14 @@
 
             <div class="w-100 text-end pe-2">
                 <button type="button" onclick="copy_button_clicked(this)" class="code-copy-button" title="Copy to Clipboard">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard2-check code-copied-button-hidden" viewBox="0 0 16 16">
+                        <path d="M9.5 0a.5.5 0 0 1 .5.5.5.5 0 0 0 .5.5.5.5 0 0 1 .5.5V2a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 2v-.5a.5.5 0 0 1 .5-.5.5.5 0 0 0 .5-.5.5.5 0 0 1 .5-.5z"/>
+                        <path d="M3 2.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 0 0-1h-.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 12.5 1H12a.5.5 0 0 0 0 1h.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5z"/>
+                        <path d="M10.854 7.854a.5.5 0 0 0-.708-.708L7.5 9.793 6.354 8.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0z"/>
+                      </svg>
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                         class="bi bi-copy" viewBox="0 0 16 16">
-                        <path fill-rule="evenodd"
-                            d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z" />
+                        <path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z" />
                     </svg>
                 </button>
             </div>

static/css/recipe.css

@@ -69,4 +69,9 @@
 .code-copy-button:active {
     background-color: #FFFFFF11 !important;
     opacity: 1;
+}
+
+.code-copied-button-hidden {
+    opacity: 0;
+    transition: opacity 1s;
 }

static/js/recipe.js

@@ -99,4 +99,7 @@ function copy_button_clicked(button) {
     }
 
     navigator.clipboard.writeText(code);
+
+    button.children[0].classList.remove("code-copied-button-hidden");
+    setTimeout(() => button.children[0].classList.add("code-copied-button-hidden"), 100);
 }