Skip to content

Commit

Permalink
Merge pull request #59 from KristenEKelly/feature/issue-54-indented-l…
Browse files Browse the repository at this point in the history
…ists

Feature/issue 54 indented lists
  • Loading branch information
JLambertazzo authored Oct 15, 2023
2 parents a7ee3bb + 39e0271 commit 5c423ab
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 0 deletions.
7 changes: 7 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
30 changes: 30 additions & 0 deletions lib/ListExtender.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 5c423ab

Please sign in to comment.