Merge pull request #59 from KristenEKelly/feature/issue-54-indented-lists

Feature/issue 54 indented lists

Author: JLambertazzo

css/style.css

@@ -149,6 +149,13 @@ ol {
   padding: 0px;
 }
 
+.tabbed_text {
+  text-indent: 10px;
+  padding-left: 10px;
+  list-style-type: circle;
+  list-style-position: inside;
+}
+
 input::placeholder {
   font-family: "Andale", monospace;
 }

lib/ListExtender.js

@@ -87,6 +87,36 @@
       this.addListItem();
     });
 
+    function addIndent(input) {
+      const li = input.parentElement;
+      if (!li.classList.contains("tabbed_text")) {
+        li.classList.add("tabbed_text");
+      }
+    }
+
+    function removeIndent(input) {
+      const li = input.parentElement;
+      if (li.classList.contains("tabbed_text")) {
+        li.classList.remove("tabbed_text");
+      }
+    }
+
+    this.element.addEventListener("keydown", (event) => {
+      if (event.key === "Tab") {
+        event.preventDefault();
+        const currentInput = document.activeElement;
+        if (currentInput && currentInput.tagName === "INPUT") {
+          if (event.shiftKey) {
+            // Handle Shift+Tab to remove indent
+            removeIndent(currentInput);
+          } else {
+            // Handle Tab to add indent
+            addIndent(currentInput);
+          }
+        }
+      }
+    });
+
     /*
       Following function uses external code
       Title: How To Build Sortable Drag & Drop With Vanilla Javascript