tools / commit
Added more separator docs, modified the default contents a bit.
separator-page/default-edit.png | Bin 0 -> 34600 bytes separator-page/default-view.png | Bin 0 -> 100209 bytes separator-page/index.html | 16 ++++++++++------ separator-page/readme.md | 8 ++++++++ 4 files changed, 18 insertions(+), 6 deletions(-) diff --git a/separator-page/default-edit.png b/separator-page/default-edit.png new file mode 100644 index 0000000..3bec6d1 Binary files /dev/null and b/separator-page/default-edit.png differ diff --git a/separator-page/default-view.png b/separator-page/default-view.png new file mode 100644 index 0000000..639f0a0 Binary files /dev/null and b/separator-page/default-view.png differ diff --git a/separator-page/index.html b/separator-page/index.html index b4e7133..133fd1f 100644 --- a/separator-page/index.html +++ b/separator-page/index.html @@ -30,8 +30,8 @@ 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 edit an element, **double-click on it** -1. Page content (this block) is not editable by default +1. To enter "edit mode", **double-click on either 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 1. Content links will always open in a new tab @@ -177,10 +177,14 @@ This is a separator page! descriptionShowSpan = document.getElementById("description-show"); // hook up double-click switching - descriptionShowSpan.addEventListener("dblclick", () => flipHideShow(descriptionShowSpan, descriptionSpan)); - descriptionSpan.addEventListener("dblclick", () => flipHideShow(descriptionShowSpan, descriptionSpan)); - nameInput.addEventListener("dblclick", () => flipHideShow(nameInput, nameSpan)); - nameSpan.addEventListener("dblclick", () => flipHideShow(nameInput, nameSpan)); + const dblClickCallback = () => { + flipHideShow(descriptionShowSpan, descriptionSpan); + flipHideShow(nameInput, nameSpan); + }; + descriptionShowSpan.addEventListener("dblclick", dblClickCallback); + descriptionSpan.addEventListener("dblclick", dblClickCallback); + nameInput.addEventListener("dblclick", () => dblClickCallback); + nameSpan.addEventListener("dblclick", () => dblClickCallback); const saveButton = document.getElementById("save"); saveButton.onclick = () => { diff --git a/separator-page/readme.md b/separator-page/readme.md index b792837..f173140 100644 --- a/separator-page/readme.md +++ b/separator-page/readme.md @@ -8,6 +8,14 @@ This screenshot shows the separator page being used to organize trees of tabs in  +This is the default view that comes up for a new separator page. + + + +This is the edit-mode of the default view. Double-click on the title and then again on the contents to start editing them. + + + ## Installation 1. Navigate to [this page](https://fuzzy-rp.gitlab.io/tools/separator-page/index.html)