(checklist) Simplified item editing and resizing

1 files changed, 16 insertions, 18 deletions

diff --git a/checklist.html b/checklist.html
index 800637f..19e7b1d 100644
--- a/checklist.html
+++ b/checklist.html
@@ -42,8 +42,14 @@
 	left: 0;
 }
 
-input {
-	vertical-align: middle;
+span {
+	display: inline-block;
+	min-width: 160px;
+}
+/* Thanks https://stackoverflow.com/a/30520997/12036073 */
+[contenteditable=true]:empty:before {
+	content: "New item";
+	color: gray;
 }
 
 .checked {
@@ -128,10 +134,6 @@ input {
 				return [].slice.call(container.children[1].children).slice(2);
 			}
 
-			function calcInputWidth(text) {
-				return Math.max(16, text.length) * 10 + "px";
-			}
-
 			function changeCheck(current, check) {
 				get_checkBox(current).checked = check;
 				if (get_inputBox(current).classList.contains('checked') !== check) {
@@ -147,7 +149,7 @@ input {
 				}
 			}
 
-			function newBlankItem(initialText, initialWidth, checked) {
+			function newBlankItem(initialText, checked) {
 				var holder = document.createElement('div');
 				holder.classList.add('list-container');
 
@@ -158,13 +160,10 @@ input {
 				input.classList.add('list-item');
 				holder.appendChild(input);
 
-				var text = document.createElement('input');
+				var text = document.createElement('span');
+				text.contentEditable = true;
 				text.classList.add('textlike');
 				text.type = 'text';
-				text.style.width = "160px";
-				text.onkeypress = function () {
-					this.style.width = calcInputWidth(this.value);
-				}
 
 				var checkbox = document.createElement('input');
 				checkbox.type = 'checkbox';
@@ -209,9 +208,8 @@ input {
 				}
 				controls.appendChild(check);
 
-				if (initialText)  text.value = initialText;
-				if (initialWidth) text.style.width = initialWidth;
-				if (checked)      checkbox.click();
+				if (initialText) text.innerText = initialText;
+				if (checked)     checkbox.click();
 
 				return holder;
 			}
@@ -265,7 +263,7 @@ input {
 					children = [].slice.call(lists.children);
 				}
 				else {
-					str = "\"" + encodeURIComponent(get_inputBox(current).value) + "\"" + ((get_checkBox(current).checked) ? "t" : "f");
+					str = "\"" + encodeURIComponent(get_inputBox(current).innerText) + "\"" + ((get_checkBox(current).checked) ? "t" : "f");
 				}
 
 				children.forEach((child) => str += "-" + stringify(child) + "_");
@@ -297,14 +295,14 @@ input {
 
 						// Is checked
 						case 't':
-							current = newBlankItem(text, calcInputWidth(text), true);
+							current = newBlankItem(text, true);
 							par.appendChild(current);
 							if (str[i+1] == 'u') i += 3; // backwards compatibility with older format
 							break;
 
 						// Is not checked
 						case 'f':
-							current = newBlankItem(text, calcInputWidth(text), false);
+							current = newBlankItem(text, false);
 							par.appendChild(current);
 							if (str[i+1] == 'a') i += 4; // backwards compatibility
 							break;