michi.vonah/click-guide
1
0
Fork 0
mirror of https://github.com/michivonah/click-guide.git synced 2025-12-22 14:06:29 +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;
}
/* Mode selection */
body.viewer .editor {
display: none;
}
/* Navigation & Tool List */
.nav{
position: fixed;
@ -59,6 +64,7 @@ body{
box-sizing: border-box;
background: var(--white);
border-radius: 20px;
z-index: 999;
}
.toolBtn{
@ -76,7 +82,7 @@ body{
transition: var(--transition);
}
.toolBtn p{
.toolBtn p, .toolBtn input{
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"/>
<script src="editor.js" defer></script>
</head>
<body>
<body class="viewer-disabled">
<div class="content">
<div class="nav">
<img id="logo" class="logo" src="../logo/logo-invert.png" alt="Logo">
</div>
<div class="toolList editor">
<button class="toolBtn">
<button id="importBtn" class="toolBtn">
<span class="material-symbols-outlined">upload_file</span>
<input id="file-import-input" type="file" accept=".json">
<p>Import</p>
</button>
<button class="toolBtn">
<span class="material-symbols-outlined">download</span>
<p>Export</p>
</button>
<button id="printBtn" class="toolBtn">
<span class="material-symbols-outlined">print</span>
<p>Print</p>
</button>
<button class="toolBtn">
<span class="material-symbols-outlined">share</span>
<p>Share link</p>
</button>
</div>
<div class="stepsContainer">
<div id="stepsContainer" class="stepsContainer">
<div class="guideSettings">
<div>
<h1>Guide Title</h1>
<p>Description</p>
<p>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">
<h1 id="guideTitle">Guide Title</h1>
<p id="guideDescription">Description</p>
<p id="guideAuthor">Author</p>
</div>
</div>
</div>
<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>
</body>