From 85bc8eaf43e8c76abe7786f93e3287a9bcb9d6a6 Mon Sep 17 00:00:00 2001
From: michivonah <info@michivonah.ch>
Date: Tue, 12 Nov 2024 21:37:17 +0100
Subject: [PATCH] add delete step button

---
 README.md         |  2 +-
 editor/editor.css | 23 +++++++++++++++++++++++
 editor/editor.js  | 18 ++++++++++++++++++
 3 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a085f9c..8468354 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@ Similar to tango.us/dubble.so/folge.me/magichow.co but all local - no data leave
 - [x] Viewer for Guide JSON
     - [x] PDF export
     - [ ] automatic file loading (url parameter/etc)
-    - [ ] removing of steps
+    - [x] removing of steps
     - [ ] reordering steps
     - [ ] add marker on step image (#4)
 - [x] Editor for Guide
diff --git a/editor/editor.css b/editor/editor.css
index dee9aba..a835523 100644
--- a/editor/editor.css
+++ b/editor/editor.css
@@ -175,6 +175,29 @@ body.viewer .editor {
     color: var(--primary);
 }
 
+/* Step controls */
+.stepControls button{
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
+    align-items: center;
+    width: 40%;
+    height: auto;
+    padding: 10px 20px;
+    background: var(--primary);
+    color: var(--white);
+    font-size: 1rem;
+    border-radius: 20px;
+    border: 2px solid var(--primary);
+    transition: var(--transition);
+}
+
+.stepControls button:hover{
+    background: var(--white);
+    color: var(--primary);
+    border-color: var(--primary);
+}
+
 /* Print View */
 @media print{
     .stepsContainer{
diff --git a/editor/editor.js b/editor/editor.js
index cd7c9c8..2bddd38 100644
--- a/editor/editor.js
+++ b/editor/editor.js
@@ -116,6 +116,7 @@ function createStepElement(label, description, imgSrc, triggerAction, triggerEle
 
     // create container for text & image
     const textContainer = document.createElement("div");
+    const stepControls = document.createElement("div");
     const imgContainer = document.createElement("div");
 
     // create title
@@ -135,6 +136,23 @@ function createStepElement(label, description, imgSrc, triggerAction, triggerEle
     image.src = imgSrc;
     imgContainer.appendChild(image);
 
+    // create stepcontrol + delete button
+    const delBtn = document.createElement("button");
+    const delBtnIcon = document.createElement("span");
+    delBtn.textContent = "Delete step";
+    delBtnIcon.className = "material-symbols-outlined";
+    delBtnIcon.textContent = "delete";
+    delBtn.appendChild(delBtnIcon);
+
+    delBtn.addEventListener('click', function(){
+        // remove step
+        event.target.parentNode.parentNode.parentNode.remove();
+    });
+    
+    stepControls.classList = "stepControls editor";
+    stepControls.appendChild(delBtn);
+    textContainer.appendChild(stepControls);
+
     // append to main container
     container.appendChild(textContainer);
     container.appendChild(imgContainer);