From 1b6c6c0f9100874e9ba950eacae3bbe62e9041b9 Mon Sep 17 00:00:00 2001 From: michivonah Date: Mon, 11 Nov 2024 20:58:06 +0100 Subject: [PATCH] add editing functionality to editor --- README.md | 11 ++++++++--- editor/editor.js | 42 +++++++++++++++++++++++++++++++++++++++++- editor/index.html | 8 ++++---- 3 files changed, 53 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index f90fcbb..a085f9c 100644 --- a/README.md +++ b/README.md @@ -14,12 +14,17 @@ Similar to tango.us/dubble.so/folge.me/magichow.co but all local - no data leave ### Additional nice to have: - [x] Meta data in guide (title, description, author, date) -- [ ] Viewer for Guide JSON - - [ ] PDF export -- [ ] Editor for Guide +- [x] Viewer for Guide JSON + - [x] PDF export + - [ ] automatic file loading (url parameter/etc) + - [ ] removing of steps + - [ ] reordering steps + - [ ] add marker on step image (#4) +- [x] Editor for Guide - [x] improve error handling - [ ] Blur sensitive information - [x] Pause/resume recording feature +- [ ] fix open issues ### Maybe far in the future: - [ ] Optional cloud for sharing guide as link diff --git a/editor/editor.js b/editor/editor.js index 5ebd375..cd7c9c8 100644 --- a/editor/editor.js +++ b/editor/editor.js @@ -35,7 +35,7 @@ exportBtn.addEventListener('click', function(){ // share guide button const shareBtn = document.getElementById("shareBtn"); shareBtn.addEventListener('click', function(){ - alert("Coming soon...") + alert("Coming soon..."); }); @@ -46,6 +46,44 @@ addStepBtn.addEventListener('click', function(){ stepsContainer.append(createStepElement("Title", "Description", "../logo/mockup-viewer-editor.jpg", "note", "")); }); +// toggle between editor and viewer mode +function toggleMode(type = "toggle"){ + const bodyClass = document.body.classList; + switch(type){ + case "viewer": + // sets mode to viewer + if (!bodyClass.contains("viewer")) bodyClass.add("viewer"); + break; + case "editor": + // sets mode to editor + if (bodyClass.contains("viewer")) bodyClass.remove("viewer"); + break; + case "toggle": + default: + // toggles between the modes + if (bodyClass.contains("viewer")){ + bodyClass.remove("viewer"); + } + else{ + bodyClass.add("viewer"); + } + break; + } + updateContenteditability(); +} + +function updateContenteditability(){ + const viewerModeActive = document.body.classList.contains("viewer"); + const editableSteps = document.getElementById("stepsContainer").children; + + for (const step of editableSteps){ + const editableChildren = step.querySelectorAll("[contenteditable]"); + for (const child of editableChildren){ + child.contentEditable = viewerModeActive ? "false" : "plaintext-only"; + } + } +} + // render guide with steps function loadGuide(data){ // render meta data @@ -83,11 +121,13 @@ function createStepElement(label, description, imgSrc, triggerAction, triggerEle // create title const title = document.createElement("h2"); title.textContent = label; + title.contentEditable = "plaintext-only"; textContainer.appendChild(title); // create description const desc = document.createElement("p"); desc.textContent = description; + desc.contentEditable = "plaintext-only"; textContainer.appendChild(desc); // create image diff --git a/editor/index.html b/editor/index.html index c68179a..e47356f 100644 --- a/editor/index.html +++ b/editor/index.html @@ -20,7 +20,7 @@ - +
@@ -47,9 +47,9 @@
-

Guide Title

-

Description

-

Author

+

Guide Title

+

Description

+

Author