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 render of markers to editor #4

Browse source
This commit is contained in:
Michi 2024-11-14 21:58:11 +01:00
parent 94fb124a40
commit 6fda79b6c7
2 changed files with 30 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

10
editor/editor.css
View file

@ -159,6 +159,16 @@ body.viewer .editor {
flex-shrink: 1;
}
.imgContainer{
position: relative;
overflow: hidden;
}
.imageMarker{
position: absolute;
border: 2px solid red;
}
.step img{
width: 100%;
border-radius: 12px;

22
editor/editor.js
View file

@ -101,12 +101,19 @@ function loadGuide(data){
const stepsContainer = document.getElementById("stepsContainer");
for (const step of steps){
const element = createStepElement(step.label, step.description, step.image, step.action, step.element);
const element = createStepElement(step);
stepsContainer.append(element);
}
}
function createStepElement(label, description, imgSrc, triggerAction, triggerElement){
function createStepElement(step){
// define constants
const label = step.label;
const description = step.description;
const imgSrc = step.image;
const triggerAction = step.action;
const triggerElement = step.element;
// create container
const container = document.createElement("div");
container.classList = "step";
@ -119,6 +126,7 @@ function createStepElement(label, description, imgSrc, triggerAction, triggerEle
const textContainer = document.createElement("div");
const stepControls = document.createElement("div");
const imgContainer = document.createElement("div");
imgContainer.classList = "imgContainer";
// create title
const title = document.createElement("h2");
@ -137,6 +145,16 @@ function createStepElement(label, description, imgSrc, triggerAction, triggerEle
image.src = imgSrc;
imgContainer.appendChild(image);
if(step.elementPosition){
const imageMarker = document.createElement("div");
imageMarker.classList = "imageMarker";
imageMarker.style.left = `${step.elementPosition.startX}px`;
imageMarker.style.top = `${step.elementPosition.startY}px`;
imageMarker.style.width = `${step.elementPosition.endX - step.elementPosition.startX}px`;
imageMarker.style.height = `${step.elementPosition.endY - step.elementPosition.startY}px`;
imgContainer.appendChild(imageMarker);
}
// create stepcontrol + delete button
const delBtn = document.createElement("button");
const delBtnIcon = document.createElement("span");