add a copy button to copy expression

gskinner · Jul 28, 2022 · ae38677 · ae38677
1 parent db7f698
commit ae38677
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/dev/lib/codemirror.js b/dev/lib/codemirror.js
@@ -80,8 +80,21 @@ function elt(tag, content, className, style) {
 function eltP(tag, content, className, style) {
   var e = elt(tag, content, className, style)
   e.setAttribute("role", "presentation")
+  e.setAttribute("id", "presentation")
   return e
 }
+function copyExpression() {
+  var expressionText = ""
+  document.getElementById("presentation").childNodes.forEach((child) => {
+    expressionText += child.innerText
+  })
+  navigator.clipboard.writeText(expressionText)
+
+  document.getElementById("copyExpressionButton").innerText= "Copied !"
+  setTimeout(() => {
+    document.getElementById("copyExpressionButton").innerText= "Copy Expression"
+  }, 800);
+}
 
 var range
 if (document.createRange) { range = function(node, start, end, endNode) {

diff --git a/index.html b/index.html
@@ -157,6 +157,20 @@ <h1 class="label">Menu</h1>
 				<section class="expression">
 					<header>
 						<h1>Expression</h1>
+							<div class="button flavor" onclick="copyExpression();">
+								<svg xmlns="http://www.w3.org/2000/svg" x="0px"y="0px" xml:space="preserve" style="enable-background:new 0 0 460 460;right: .25em;position: relative;" viewBox="0 0 460 460" class="icon">
+									<g>
+										<path d="M425.934,0H171.662c-18.122,0-32.864,14.743-32.864,32.864v77.134h30V32.864c0-1.579,1.285-2.864,2.864-2.864h254.272
+											c1.579,0,2.864,1.285,2.864,2.864v254.272c0,1.58-1.285,2.865-2.864,2.865h-74.729v30h74.729
+											c18.121,0,32.864-14.743,32.864-32.865V32.864C458.797,14.743,444.055,0,425.934,0z"></path>
+										<path d="M288.339,139.998H34.068c-18.122,0-32.865,14.743-32.865,32.865v254.272C1.204,445.257,15.946,460,34.068,460h254.272
+											c18.122,0,32.865-14.743,32.865-32.864V172.863C321.206,154.741,306.461,139.998,288.339,139.998z M288.341,430H34.068
+											c-1.58,0-2.865-1.285-2.865-2.864V172.863c0-1.58,1.285-2.865,2.865-2.865h254.272c1.58,0,2.865,1.285,2.865,2.865v254.273h0.001
+											C291.206,428.715,289.92,430,288.341,430z"></path>
+									</g>
+								</svg>
+								<span class="label" id="copyExpressionButton">Copy Expression</span>
+							</div>
 						<div class="controlbar">
 							<div class="button flavor">
 								<svg class="icon"><use xlink:href="#code"></use></svg>