create export feature in editor

editor/editor.js

@@ -26,11 +26,24 @@ fileInput.addEventListener("change", (event) => {
     reader.readAsText(file);
 });
 
-// add step
+// export guide button
+const exportBtn = document.getElementById("exportBtn");
+exportBtn.addEventListener('click', function(){
+    exportGuide();
+});
+
+// share guide button
+const shareBtn = document.getElementById("shareBtn");
+shareBtn.addEventListener('click', function(){
+    alert("Coming soon...")
+});
+
+
+// add step button
 const addStepBtn = document.getElementById("addStepBtn");
 addStepBtn.addEventListener('click', function(){
     const stepsContainer = document.getElementById("stepsContainer");
-    stepsContainer.append(createStepElement("Title", "Description", "../logo/mockup-viewer-editor.jpg"));
+    stepsContainer.append(createStepElement("Title", "Description", "../logo/mockup-viewer-editor.jpg", "note", ""));
 });
 
 // render guide with steps
@@ -49,16 +62,20 @@ function loadGuide(data){
     const stepsContainer = document.getElementById("stepsContainer");
 
     for (const step of steps){
-        const element = createStepElement(step.label, step.description, step.image);
+        const element = createStepElement(step.label, step.description, step.image, step.action, step.element);
         stepsContainer.append(element);
     }
 }
 
-function createStepElement(label, description, imgSrc){
+function createStepElement(label, description, imgSrc, triggerAction, triggerElement){
     // create container
     const container = document.createElement("div");
     container.classList = "step";
 
+    // add attributes
+    container.dataset.triggerAction = triggerAction;
+    container.dataset.triggerElement = triggerElement;
+
     // create container for text & image
     const textContainer = document.createElement("div");
     const imgContainer = document.createElement("div");
@@ -84,4 +101,61 @@ function createStepElement(label, description, imgSrc){
 
     // return step element
     return container;
+}
+
+// export guide
+function exportGuide(){
+    // get metadata
+    const guideTitle = document.getElementById("guideTitle");
+    const guideDescription = document.getElementById("guideDescription");
+    const guideAuthor = document.getElementById("guideAuthor");
+
+    // generate file structure
+    const dateToday = new Date().toISOString().split('T')[0];
+    let guide = {
+        "title":guideTitle.textContent,
+        "description":guideDescription.textContent,
+        "date":dateToday,
+        "author":guideAuthor.textContent,
+    };
+    let guideSteps = [];
+
+    // add steps to array
+    const steps = document.getElementsByClassName("step");
+    for (const step of steps){
+        const stepObject = {
+            "label":step.querySelector("h2").textContent,
+            "description":step.querySelector("p").textContent,
+            "action":step.dataset.triggerAction,
+            "element":step.dataset.triggerElement,
+            "image":step.querySelector("img").src
+        }
+        guideSteps.push(stepObject);
+    }
+
+    // add steps to guide object
+    guide.steps = guideSteps;
+
+    // export guide
+    exportJSON(guide, "guide.json");
+}
+
+// export json file
+function exportJSON(object, filename){
+    try{
+        const json = JSON.stringify(object, null, 2);
+
+        const blob = new Blob([json], { type: "application/json" });
+        const url = URL.createObjectURL(blob);
+    
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = filename;
+        link.click();
+    
+        URL.revokeObjectURL(url);
+    }
+    catch(error){
+        return error
+    }
 }

editor/index.html

@@ -31,7 +31,7 @@
                     <input id="file-import-input" type="file" accept=".json">
                     <p>Import</p>
                 </button>
-                <button class="toolBtn">
+                <button id="exportBtn" class="toolBtn">
                     <span class="material-symbols-outlined">download</span>
                     <p>Export</p>
                 </button>
@@ -39,7 +39,7 @@
                     <span class="material-symbols-outlined">print</span>
                     <p>Print</p>
                 </button>
-                <button class="toolBtn">
+                <button id="shareBtn" class="toolBtn">
                     <span class="material-symbols-outlined">share</span>
                     <p>Share link</p>
                 </button>