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 import guide function to editor/viewer

Browse source
This commit is contained in:
Michi 2024-11-10 21:21:12 +01:00
parent 0d95e29afb
commit 4845a4a3a6
3 changed files with 106 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

8
editor/editor.css
View file

@ -32,6 +32,11 @@ body{
padding: 20px 0; padding: 20px 0;
} }
/* Mode selection */
body.viewer .editor {
display: none;
}
/* Navigation & Tool List */ /* Navigation & Tool List */
.nav{ .nav{
position: fixed; position: fixed;
@ -59,6 +64,7 @@ body{
box-sizing: border-box; box-sizing: border-box;
background: var(--white); background: var(--white);
border-radius: 20px; border-radius: 20px;
z-index: 999;
} }
.toolBtn{ .toolBtn{
@ -76,7 +82,7 @@ body{
transition: var(--transition); transition: var(--transition);
} }
.toolBtn p{ .toolBtn p, .toolBtn input{
display: none; display: none;
} }

87
editor/editor.js Normal file
View file

@ -0,0 +1,87 @@
// Custom branding
//document.body.style.setProperty('--primary', '#3498db');
//document.getElementById("logo").src = "https://michivonah.ch/assets/logo/logo_white.svg";
// Print Button
const printBtn = document.getElementById("printBtn");
printBtn.addEventListener('click', function(){
window.print();
});
// Import guide
const importBtn = document.getElementById("importBtn");
const fileInput = document.getElementById("file-import-input");
importBtn.addEventListener('click', function(){
fileInput.click();
});
fileInput.addEventListener("change", (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(event){
const content = event.target.result;
const data = JSON.parse(content);
loadGuide(data);
};
reader.readAsText(file);
});
// add step
const addStepBtn = document.getElementById("addStepBtn");
addStepBtn.addEventListener('click', function(){
const stepsContainer = document.getElementById("stepsContainer");
stepsContainer.append(createStepElement("Title", "Description", "../logo/mockup-viewer-editor.jpg"));
});
// render guide with steps
function loadGuide(data){
// render meta data
const guideTitle = document.getElementById("guideTitle");
const guideDescription = document.getElementById("guideDescription");
const guideAuthor = document.getElementById("guideAuthor");
guideTitle.textContent = data.title;
guideDescription.textContent = data.description;
guideAuthor.textContent = data.author;
// render steps
const steps = data.steps;
const stepsContainer = document.getElementById("stepsContainer");
for (const step of steps){
const element = createStepElement(step.label, step.description, step.image);
stepsContainer.append(element);
}
}
function createStepElement(label, description, imgSrc){
// create container
const container = document.createElement("div");
container.classList = "step";
// create container for text & image
const textContainer = document.createElement("div");
const imgContainer = document.createElement("div");
// create title
const title = document.createElement("h2");
title.textContent = label;
textContainer.appendChild(title);
// create description
const desc = document.createElement("p");
desc.textContent = description;
textContainer.appendChild(desc);
// create image
const image = document.createElement("img");
image.src = imgSrc;
imgContainer.appendChild(image);
// append to main container
container.appendChild(textContainer);
container.appendChild(imgContainer);
// return step element
return container;
}

46
editor/index.html
View file

@ -20,63 +20,41 @@
<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> <body class="viewer-disabled">
<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">
</div> </div>
<div class="toolList editor"> <div class="toolList editor">
<button class="toolBtn"> <button id="importBtn" class="toolBtn">
<span class="material-symbols-outlined">upload_file</span> <span class="material-symbols-outlined">upload_file</span>
<input id="file-import-input" type="file" accept=".json">
<p>Import</p> <p>Import</p>
</button> </button>
<button class="toolBtn"> <button class="toolBtn">
<span class="material-symbols-outlined">download</span> <span class="material-symbols-outlined">download</span>
<p>Export</p> <p>Export</p>
</button> </button>
<button id="printBtn" class="toolBtn">
<span class="material-symbols-outlined">print</span>
<p>Print</p>
</button>
<button class="toolBtn"> <button class="toolBtn">
<span class="material-symbols-outlined">share</span> <span class="material-symbols-outlined">share</span>
<p>Share link</p> <p>Share link</p>
</button> </button>
</div> </div>
<div class="stepsContainer"> <div id="stepsContainer" class="stepsContainer">
<div class="guideSettings"> <div class="guideSettings">
<div> <div>
<h1>Guide Title</h1> <h1 id="guideTitle">Guide Title</h1>
<p>Description</p> <p id="guideDescription">Description</p>
<p>Author</p> <p id="guideAuthor">Author</p>
</div>
</div>
<div class="step">
<div>
<h2>Step Name</h2>
<p>Description</p>
</div>
<div>
<img src="../logo/mockup-viewer-editor.jpg">
</div>
</div>
<div class="step">
<div>
<h2>Step Name</h2>
<p>Description</p>
</div>
<div>
<img src="../logo/mockup-viewer-editor.jpg">
</div>
</div>
<div class="step">
<div>
<h2>Step Name</h2>
<p>Description</p>
</div>
<div>
<img src="../logo/mockup-viewer-editor.jpg">
</div> </div>
</div> </div>
</div> </div>
<div class="guideTools editor"> <div class="guideTools editor">
<button><span class="material-symbols-outlined">add</span>Add step</button> <button id="addStepBtn"><span class="material-symbols-outlined">add</span>Add step</button>
</div> </div>
</div> </div>
</body> </body>