tools / commit
Added Edit/Done buttons to separator page.
separator-page/index.html | 57 ++++++++++++++++++++++++++++++++++------------- 1 file changed, 42 insertions(+), 15 deletions(-) diff --git a/separator-page/index.html b/separator-page/index.html index 1b2b72c..a9a4968 100644 --- a/separator-page/index.html +++ b/separator-page/index.html @@ -30,7 +30,7 @@ This is a separator page! 1. Read this page 1. Understand this page 1. The page name and page content are both editable -1. To enter "edit mode", **double-click on either element** +1. To enter "edit mode", click on the "Edit" button OR **double-click on title or description element** 1. Double-click on either element again to return to "view mode" 1. Replace the contents on this page to whatever you want a new separator page to contain 1. Markdown contents will be rendered as HTML @@ -178,30 +178,39 @@ This is a separator page! // description html field descriptionShowSpan = document.getElementById("description-show"); + const saveButton = document.getElementById("save"); + const resetButton = document.getElementById("reset"); + const editButton = document.getElementById("edit"); + const doneButton = document.getElementById("done"); + // hook up double-click switching - const dblClickCallback = () => { + const flipEditState = () => { flipHideShow(descriptionShowSpan, descriptionSpan); flipHideShow(nameInput, nameSpan); + flipHideShow(editButton, doneButton); }; - descriptionShowSpan.addEventListener("dblclick", dblClickCallback); - descriptionSpan.addEventListener("dblclick", dblClickCallback); - nameInput.addEventListener("dblclick", () => dblClickCallback); - nameSpan.addEventListener("dblclick", () => dblClickCallback); + descriptionShowSpan.addEventListener("dblclick", flipEditState); + descriptionSpan.addEventListener("dblclick", flipEditState); + nameInput.addEventListener("dblclick", () => flipEditState); + nameSpan.addEventListener("dblclick", () => flipEditState); - const saveButton = document.getElementById("save"); saveButton.onclick = () => { if (confirm("Save current title and description as default starting values for separator page?")) { localStorage.setItem(lsKey, JSON.stringify(currentState)); } }; - - const resetButton = document.getElementById("reset"); resetButton.onclick = () => { if (confirm("Set default title and description values to original values?")) { localStorage.setItem(lsKey, JSON.stringify(defaultState)); update(defaultState); } }; + editButton.onclick = () => { + flipEditState(); + } + done.onclick = () => { + flipEditState(); + } // render everything for the first time update(state); @@ -281,12 +290,30 @@ This is a separator page! </div> <div class="container"> - <button class="left" - type="button" - id="save">Save as Default</button> - <button class="right" - type="button" - id="reset">Hard Reset</button> + + <div class="left"> + <button type="button" + id="edit"> + Edit + </button> + <button type="button" + id="done" + class="hidden"> + Done + </button> + <button type="button" + id="save"> + Save as Default + </button> + </div> + + <div class="right"> + <button type="button" + id="reset"> + Hard Reset + </button> + </div> + </div> </div> </body>