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

42
editor/editor.js
View file

@ -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

8
editor/index.html
View file

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