michi.vonah/click-guide
1
0
Fork 0
mirror of https://github.com/michivonah/click-guide.git synced 2025-12-22 22:16:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

add editing functionality to editor

Browse source
This commit is contained in:
Michi 2024-11-11 20:58:06 +01:00
parent 5fe8d3adb4
commit 1b6c6c0f91
3 changed files with 53 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

11
README.md
View file

@ -14,12 +14,17 @@ Similar to tango.us/dubble.so/folge.me/magichow.co but all local - no data leave
### Additional nice to have: ### Additional nice to have:
- [x] Meta data in guide (title, description, author, date) - [x] Meta data in guide (title, description, author, date)
- [ ] Viewer for Guide JSON - [x] Viewer for Guide JSON
- [ ] PDF export - [x] PDF export
- [ ] Editor for Guide - [ ] 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 - [x] improve error handling
- [ ] Blur sensitive information - [ ] Blur sensitive information
- [x] Pause/resume recording feature - [x] Pause/resume recording feature
- [ ] fix open issues
### Maybe far in the future: ### Maybe far in the future:
- [ ] Optional cloud for sharing guide as link - [ ] Optional cloud for sharing guide as link

42
editor/editor.js
View file

@ -35,7 +35,7 @@ exportBtn.addEventListener('click', function(){
// share guide button // share guide button
const shareBtn = document.getElementById("shareBtn"); const shareBtn = document.getElementById("shareBtn");
shareBtn.addEventListener('click', function(){ 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", "")); 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 // render guide with steps
function loadGuide(data){ function loadGuide(data){
// render meta data // render meta data
@ -83,11 +121,13 @@ function createStepElement(label, description, imgSrc, triggerAction, triggerEle
// create title // create title
const title = document.createElement("h2"); const title = document.createElement("h2");
title.textContent = label; title.textContent = label;
title.contentEditable = "plaintext-only";
textContainer.appendChild(title); textContainer.appendChild(title);
// create description // create description
const desc = document.createElement("p"); const desc = document.createElement("p");
desc.textContent = description; desc.textContent = description;
desc.contentEditable = "plaintext-only";
textContainer.appendChild(desc); textContainer.appendChild(desc);
// create image // create image

8
editor/index.html
View file

@ -20,7 +20,7 @@
<link rel="stylesheet" type="text/css" href="editor.css"/> <link rel="stylesheet" type="text/css" href="editor.css"/>
<script src="editor.js" defer></script> <script src="editor.js" defer></script>
</head> </head>
<body class="viewer-disabled"> <body>
<div class="content"> <div class="content">
<div class="nav"> <div class="nav">
<img id="logo" class="logo" src="../logo/logo-invert.png" alt="Logo"> <img id="logo" class="logo" src="../logo/logo-invert.png" alt="Logo">
@ -47,9 +47,9 @@
<div id="stepsContainer" class="stepsContainer"> <div id="stepsContainer" class="stepsContainer">
<div class="guideSettings"> <div class="guideSettings">
<div> <div>
<h1 id="guideTitle">Guide Title</h1> <h1 id="guideTitle" contenteditable="plaintext-only">Guide Title</h1>
<p id="guideDescription">Description</p> <p id="guideDescription" contenteditable="plaintext-only">Description</p>
<p id="guideAuthor">Author</p> <p id="guideAuthor" contenteditable="plaintext-only">Author</p>
</div> </div>
</div> </div>
</div> </div>