Implement indentation

electrikmilk · Nov 17, 2023 · 136b966 · 136b966
1 parent 9520e12
commit 136b966
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 13 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -9,7 +9,26 @@ import {renderShortcut} from "~/render";
 import {parse} from 'plist/dist/plist-parse.js';
 
 let preview: HTMLDivElement | null;
-export let container: HTMLDivElement;
+export let container: HTMLElement;
+
+let containers: HTMLElement[] = [];
+let containerIndex: number = 0;
+
+export function newContainer() {
+    const renderContainer = document.createElement('div');
+    renderContainer.className = 'sp-sub-container';
+    container.appendChild(renderContainer);
+
+    containers.push(renderContainer);
+    containerIndex++;
+
+    container = renderContainer;
+}
+
+export function prevContainer() {
+    containerIndex--;
+    container = containers[containerIndex];
+}
 
 interface PreviewOptions {
     selector: string
@@ -130,6 +149,11 @@ export class ShortcutPreview {
 
         container = document.createElement('div');
         container.className = 'sp-container ios';
+        preview.appendChild(container);
+
+        containers = [];
+        containers.push(container);
+
         if (this.data.WFWorkflowActions && this.data.WFWorkflowActions.length !== 0) {
             renderShortcut(this.data.WFWorkflowActions);
         } else {
@@ -138,6 +162,6 @@ export class ShortcutPreview {
             empty.innerText = 'This Shortcut contains 0 actions.';
             container.appendChild(empty);
         }
-        preview.appendChild(container);
+
     }
 }
diff --git a/src/render.ts b/src/render.ts
@@ -1,22 +1,39 @@
-import {ActionData, container} from "~/main";
+import {ActionData, container, newContainer, prevContainer} from "~/main";
 import {ActionDefinition, actions} from "~/actions";
 import {renderValue} from "~/value";
 
 interface ActionParameters {
     [key: string]: any
 }
 
-export function renderShortcut(actions: Array<ActionData>) {
+export const controlFlowStart = 0;
+export const controlFlowItem = 1;
+export const controlFlowEnd = 2;
+
+export function renderShortcut(shortcutActions: Array<ActionData>) {
     console.group('Render Shortcut');
-    actions.forEach((action: ActionData) => {
-        container?.appendChild(
-            renderAction(action)
+    shortcutActions.forEach((action: ActionData) => {
+        let identifier = action.WFWorkflowActionIdentifier.replace('is.workflow.actions.', '');
+        let params = action.WFWorkflowActionParameters;
+
+        // @ts-ignore
+        if (params['WFControlFlowMode'] === controlFlowEnd || params['WFControlFlowMode'] === controlFlowItem) {
+            prevContainer();
+        }
+
+        container.appendChild(
+            renderAction(identifier, action)
         );
+
+        // @ts-ignore
+        if (params['WFControlFlowMode'] === controlFlowStart || params['WFControlFlowMode'] === controlFlowItem) {
+            newContainer();
+        }
     });
     console.groupEnd();
 }
 
-function renderAction(action: ActionData): Node {
+function renderAction(identifier: string, action: ActionData): Node {
     console.group(`Render ${action.WFWorkflowActionIdentifier}`);
 
     const card = document.createElement('div');
@@ -30,8 +47,6 @@ function renderAction(action: ActionData): Node {
 
     const ul = document.createElement('ul');
 
-    let identifier = action.WFWorkflowActionIdentifier.replace('is.workflow.actions.', '');
-
     let actionData = null;
     if (actions[identifier]) {
         console.log('Found definition.');

diff --git a/src/style.css b/src/style.css
@@ -65,7 +65,7 @@
         background: #202d3b !important;
     }
 
-    .sp-container .sp-unstyled-value .sp-value {
+    .sp-container .sp-value.sp-unstyled-value {
         background: transparent !important;
         color: #fff !important;
     }
@@ -118,6 +118,10 @@
     padding: 1.5rem;
 }
 
+.sp-sub-container {
+    padding-left: 2rem;
+}
+
 .sp-header {
     padding: 1rem 0;
     background-color: #fff;
@@ -261,11 +265,10 @@
     padding: .3rem;
 }
 
-.sp-container .sp-unstyled-value .sp-value {
+.sp-container .sp-value.sp-unstyled-value {
     border-radius: 0;
     background: none;
     color: inherit;
-    font-weight: normal;
     padding: 0;
 }