Merge pull request #14 from mwomick/bug-fix-copy

bug fix: copy button should copy points not static text

Author: capjamesg

index.html

@@ -48,7 +48,7 @@ <h2>How to use</h2>
                         </ol>
                         <h2>Coordinates</h2>
                         <p>Copy the points below, formatted as NumPy arrays, into your Python code.</p>
-                        <a href="" id="clipboard" class="widgetButton left">Copy Python to Clipboard</a>
+                        <a href="" id="copyPythonButton" class="widgetButton left">Copy Python to Clipboard</a>
                         <label for="normalize-checkbox">Show Normalized Points from 0-1</label>
                         <input type="checkbox" id="normalize-checkbox" name="normalize-checkbox" value="normalize-checkbox">
                         <pre id="python">
@@ -58,7 +58,7 @@ <h2>Coordinates</h2>
                         <details>
                             <summary>View JSON Points</summary>
                             <h2>JSON Points</h2>
-                            <a href="" id="clipboardJSON" class="widgetButton">Copy JSON to Clipboard</a>
+                            <a href="" id="copyJSONButton" class="widgetButton">Copy JSON to Clipboard</a>
                             <pre id="json">
                                 <code>
                                 </code>
@@ -138,7 +138,6 @@ <h2>JSON Points</h2>
                             </div>
                         </div>
                     </div>
-
                     <div class="image-container">
                         <canvas id="canvas"></canvas>
                     </div>

script.js

@@ -64,6 +64,8 @@ function blitCachedCanvas() {
 
 function clipboard(selector) {
     var copyText = document.querySelector(selector).innerText;
+    // strip whitespace on left and right
+    copyText = copyText.replace(/^\s+|\s+$/g, '');
     navigator.clipboard.writeText(copyText);
 }
 
@@ -242,14 +244,14 @@ window.addEventListener('keyup', function(e) {
     }
 });
 
-document.querySelector('#clipboard').addEventListener('click', function(e) {
+document.querySelector('#copyPythonButton').addEventListener('click', function(e) {
     e.preventDefault();
-    clipboard("#clipboard");
+    clipboard("#python");
 });
 
-document.querySelector('#clipboardJSON').addEventListener('click', function(e) {
+document.querySelector('#copyJSONButton').addEventListener('click', function(e) {
     e.preventDefault();
-    clipboard("#clipboardJSON");
+    clipboard("#json");
 });
 
 canvas.addEventListener('dragover', function(e) {
@@ -423,7 +425,7 @@ function writePoints(parentPoints) {
 
     if (!parentPoints.length) {
         document.querySelector('#python').innerHTML = '';
-        document.querySelector('#json').innerHTML = '';
+        document.querySelector('#json').innerHTML;
         return;
     }
 
@@ -620,6 +622,12 @@ function clearAll() {
     offScreenCtx.clearRect(0, 0, offScreenCanvas.width, offScreenCanvas.height);
     mainCtx.drawImage(img, 0, 0);
     offScreenCtx.drawImage(img, 0, 0);
+    points = [];
+    masterPoints = [];
+    masterColors = [];
+    rgb_color = color_choices[0];
+    document.querySelector('#jsonCode').innerHTML = '';
+    document.querySelector('#pythonCode').innerHTML = '';
 }
 
 document.querySelector('#clear').addEventListener('click', function(e) {