slightly less embarrassing

Signed-off-by: Keith Wall <[email protected]>

Author: k-wall

_layouts/guide.html

@@ -4,8 +4,6 @@
 <!-- _layouts/guide.html -->
 
 
-<!-- TODO don't rely on jquery -->
-<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <!-- TODO don't rely resource available from site -->
 <script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
 
@@ -44,29 +42,49 @@ <h1 class="card-title fs-3">
   </div>
 </div>
 
-<script>
-
-var allCodeBlocksElements = $( "code" );
 
-allCodeBlocksElements.each(function(i) {
+<script>
 
-if ($(this).parents('.listingblock').length) {
 
-  var code = $(this).text().split(/\n/);
-  for (var idx = 0; idx < code.length; idx++) { code[idx] = code[idx].replace("$ ", "") }
+    document.querySelectorAll("code").forEach((codeElem) => {
+        if (codeElem.textContent && codeElem.closest('.listingblock')) {
+            let codeLines = codeElem.textContent.split(/\n/);
+            for (var idx = 0; idx < codeLines.length; idx++) {
+                // replace any console prompt
+                codeLines[idx] = codeLines[idx].replace("$ ", "")
+            }
+            let selectableCode = codeLines.join("\n");
+            let clipboardBtn =  document.createElement("button");
+            clipboardBtn.setAttribute('data-clipboard-text', selectableCode);
+            clipboardBtn.className = "clipboardBtn";
+            codeElem.parentNode.insertBefore(clipboardBtn, codeElem.nextSibling);
+        }
+    });
+    //
+    // var allCodeBlocksElements = $("code");
+    //
+    //     allCodeBlocksElements.each(function (i) {
+    //
+    //         if ($(this).parents('.listingblock').length) {
+    //
+    //             var code = $(this).text().split(/\n/);
+    //             for (var idx = 0; idx < code.length; idx++) {
+    //                 code[idx] = code[idx].replace("$ ", "")
+    //             }
+    //
+    //             //trigger
+    //             var clipButton = '<button class="btn" data-clipboard-text="' + code.join("\n") + '"><img src="/assets/theme/images/clippy.svg" width="13" alt="Copy to clipboard"></button>';
+    //             $(this).parent().before(clipButton);
+    //         }
+    //     }
+    // );
 
-  //trigger
-  var clipButton = '<button class="btn" data-clipboard-text="' + code.join("\n") + '"><img src="https://clipboardjs.com/assets/images/clippy.svg" width="13" alt="Copy to clipboard"></button>';
-     $(this).parent().before(clipButton);
-  }
-}
-);
- 
-  new Clipboard('.btn');
+    new Clipboard('.clipboardBtn');
 
 </script>
 
 
+
 {% include asciidoctor-scripts/icons.html %}
 {% include asciidoctor-scripts/sectanchors.html %}
 

_sass/kroxylicious.scss

@@ -334,3 +334,13 @@ b.conum * {
 .kroxylicious-guide .sect1+.sect1 {
   border-top: 1px solid $kroxy-light;
 }
+
+.kroxylicious-guide .clipboardBtn {
+  background:url(/assets/theme/images/clippy.svg) no-repeat;
+  float: right;
+  cursor:pointer;
+  width: 13px;
+  height: 15px;
+  background-size:contain;
+  border: none;
+}