Merge pull request #20 from KratosMultiphysics/add-copy-code-button

Add a copy to clipboard button to code blocks

Author: ncrescenzio

Page_files/_includes/head.html

@@ -37,6 +37,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.3.0/mermaid.min.js"></script>
 
 <script src="{{ "/js/toc.js" | prepend: site.baseurl | preprend: site.url }}"></script>
+<script src="{{ "/js/copyCode.js" | prepend: site.baseurl | preprend: site.url }}"></script>
 <script src="{{ "/js/customscripts.js" | prepend: site.baseurl | preprend: site.url }}"></script>
 
 <link rel="shortcut icon" href="{{ "/images/favicon.ico" | prepend: site.baseurl | preprend: site.url  }}">

Page_files/css/syntax.scss

@@ -48,7 +48,7 @@ div.highlighter-rouge::before {
     position: absolute;
     display: block;
     height: 1.2rem;
-    right: 1rem;
+    right: 7rem;
     top: 0.5rem;
     z-index: 5;
 }
@@ -101,6 +101,21 @@ div.highlight table {
     font-size: 1.3rem;
 }
 
+div.highlight {
+  position: relative;
+}
+
+div.highlight button {
+  position: absolute;
+  top: 2px;
+  right: 5px;
+  z-index: 10;
+  background-color: #2e3e4e;
+  border: none;
+  cursor: pointer;
+  font-size: 1.2rem;
+}
+
 .highlight .hll { background-color: #373b41 }
 .highlight .c { color: #969896 } /* Comment */
 .highlight .err { color: #cc6666 } /* Error */

Page_files/js/copyCode.js

@@ -0,0 +1,65 @@
+---
+layout: null
+---
+(function (jtd, undefined) {
+
+// From https://github.com/just-the-docs/just-the-docs/blob/main/assets/js/just-the-docs.js
+// Event handling
+
+jtd.addEvent = function(el, type, handler) {
+  if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler);
+}
+jtd.removeEvent = function(el, type, handler) {
+  if (el.detachEvent) el.detachEvent('on'+type, handler); else el.removeEventListener(type, handler);
+}
+jtd.onReady = function(ready) {
+  // in case the document is already rendered
+  if (document.readyState!='loading') ready();
+  // modern browsers
+  else if (document.addEventListener) document.addEventListener('DOMContentLoaded', ready);
+  // IE <= 8
+  else document.attachEvent('onreadystatechange', function(){
+      if (document.readyState=='complete') ready();
+  });
+}
+
+jtd.onReady(function(){
+
+  if (!window.isSecureContext) {
+    console.log('Window does not have a secure context, therefore code clipboard copy functionality will not be available. For more details see https://web.dev/async-clipboard/#security-and-permissions');
+    return;
+  }
+
+  var codeBlocks = document.querySelectorAll('div.highlight');
+
+  var svgCopied =  '<i class="fa fa-check" aria-hidden="true"></i>&nbsp;Copied';
+  var svgCopy =  '<i class="fa fa-clipboard" aria-hidden="true"></i>&nbsp;Copy';
+
+  codeBlocks.forEach(codeBlock => {
+    var copyButton = document.createElement('button');
+    var timeout = null;
+    copyButton.type = 'button';
+    copyButton.ariaLabel = 'Copy code to clipboard';
+    copyButton.innerHTML = svgCopy;
+    codeBlock.append(copyButton);
+
+    copyButton.addEventListener('click', function () {
+      if(timeout === null) {
+        var code = (codeBlock.querySelector('pre:not(.lineno, .highlight)') || codeBlock.querySelector('code')).innerText;
+        window.navigator.clipboard.writeText(code);
+
+        copyButton.innerHTML = svgCopied;
+
+        var timeoutSetting = 4000;
+
+        timeout = setTimeout(function () {
+          copyButton.innerHTML = svgCopy;
+          timeout = null;
+        }, timeoutSetting);
+      }
+    });
+  });
+
+});
+
+})(window.jtd = window.jtd || {});