support keyboard parameter modification

contenteditable.js

@@ -0,0 +1,67 @@
+(function() {
+  var editables = $$('.param');
+  function onInput(editable) {
+    var sel = window.getSelection();
+    var range = sel.getRangeAt(0);
+    var startOffset = range.startOffset;
+
+    var content = editable.innerText;
+    var isNegative = content[0] === '-';
+    if (isNegative) {
+      content = content.slice(1);
+    }
+    if (/[^0-9.]/g.test(content)) {
+      content = content.replace(/[^0-9.]/g, '');
+      startOffset = startOffset - 1;
+    }
+    content = isNegative ? '-' + content : content;
+
+    // only one decimal point
+    var parts = content.split('.');
+    if (parts.length > 2) {
+      content = parts[0] + '.' + parts.slice(1).join('');
+      startOffset = startOffset - 1;
+    }
+    content.replace(/<br\s*\/?>/gi, ''); 
+
+    editable.innerText = content;
+
+    if (editable.firstChild) {
+      range.setStart(editable.firstChild, Math.min(startOffset, content.length));
+      range.setEnd(editable.firstChild, Math.min(startOffset, content.length));
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+  }
+
+  function onKeydown(event, editable, i) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (['.', '-'].includes(editable.innerText)) return;
+      editable.blur();
+    }
+  }
+
+  function onBlur(editable, index) {
+    var xy = editable.innerText;
+    if (isNaN(xy) || (!(index % 2) && (xy < 0 || xy > 1))) {
+      editable.innerText = 0;
+    }
+
+    updateBezier(editable.parentElement.innerText);
+    update();
+    updateDelayed();
+  }
+
+  editables.forEach(function(editable, index) {
+    editable.addEventListener('input', function() {
+      onInput(editable, index);
+    });
+    editable.addEventListener('keydown', function(event) {
+      onKeydown(event, editable, index);
+    });
+    editable.addEventListener('blur', function() {
+      onBlur(editable, index);
+    });
+  });
+})()

index.html

@@ -13,10 +13,10 @@
 <header>
 	<h1>
 		<a href="" class="permalink"><code>cubic-bezier(<span id="values"><span
-		 id="P1x" class="param">0</span>,<span
-		 id="P1y" class="param">0</span>,<span
-		 id="P2x" class="param">.25</span>,<span
-		 id="P2y" class="param">1</span></span>)</code></a>
+		 id="P1x" class="param" contenteditable="true">0</span>,<span
+		 id="P1y" class="param" contenteditable="true">0</span>,<span
+		 id="P2x" class="param" contenteditable="true">.25</span>,<span
+		 id="P2y" class="param" contenteditable="true">1</span></span>)</code></a>
 		<div id="copybuttons">
 			<button id="copy">Copy</button>
 			<button id="copyoptionstoggle">&#9662;</button>
@@ -88,6 +88,7 @@ <h1>
 <script src="environment.js"></script>
 <script src="cubic-bezier.js"></script>
 <script src="interaction.js"></script>
+<script src="contenteditable.js"></script>
 
 <script>_gaq = [['_setAccount', 'UA-25106441-3'], ['_trackPageview']];</script>
 <script src="https://www.google-analytics.com/ga.js" async></script>

interaction.js

@@ -176,14 +176,17 @@ bezierLibrary.curves = JSON.parse(localStorage.curves);
 
 bezierLibrary.render();
 
-if(location.hash) {
-	bezierCanvas.bezier = window.bezier = new CubicBezier(decodeURI(location.hash));
+function updateBezier(str) {
+	bezierCanvas.bezier = window.bezier = new CubicBezier(decodeURI(str));
 
 	var offsets = bezierCanvas.offsets;
 
 	P1.style.prop(offsets[0]);
 	P2.style.prop(offsets[1]);
 }
+if(location.hash) {
+	updateBezier(location.hash)
+}
 
 favicon.width = favicon.height = 16 * pixelDepth;
 

style.css

@@ -329,6 +329,10 @@ header {
 #P2x, #P2y {
 	color: #0ab;
 }
+/* Make the cursor unobstructed by the outline */
+#P1x, #P1y, #P2x, #P2y {
+	padding: 0 4px;
+}
 
 canvas#curve {
 	background: #f0f0f0;