fix merge conflicts, fix buttons

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>

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);
 }
 
@@ -244,12 +246,12 @@ window.addEventListener('keyup', function(e) {
 
 document.querySelector('#copyPythonButton').addEventListener('click', function(e) {
     e.preventDefault();
-    clipboard("#pythonCode");
+    clipboard("#python");
 });
 
 document.querySelector('#copyJSONButton').addEventListener('click', function(e) {
     e.preventDefault();
-    clipboard("#jsonCode");
+    clipboard("#json");
 });
 
 canvas.addEventListener('dragover', function(e) {
@@ -422,8 +424,8 @@ function writePoints(parentPoints) {
     parentPoints = parentPoints.filter(points => !!points.length);
 
     if (!parentPoints.length) {
-        document.querySelector('#pythonCode').innerHTML = '';
-        document.querySelector('#jsonCode').innerHTML;
+        document.querySelector('#python').innerHTML = '';
+        document.querySelector('#json').innerHTML;
         return;
     }
 
@@ -433,14 +435,14 @@ function writePoints(parentPoints) {
                                 return `[${point[0]}, ${point[1]}]`;}).join(', ')}])`;
                             }).join(',\n')}\n]`;
 
-    document.querySelector('#pythonCode').innerHTML = code_template;
+    document.querySelector('#python').innerHTML = code_template;
 
     var json_template = `{\n${parentPoints.map(function(points) {
         return `    [${points.map(function(point) {
             return `{"x": ${point[0]}, "y": ${point[1]}}`;}).join(', ')}]`;
         }).join(',\n')}\n}`;
 
-    document.querySelector('#jsonCode').innerHTML = json_template;
+    document.querySelector('#json').innerHTML = json_template;
 }
 
 canvas.addEventListener('mousedown', function(e) {