Working svelte + toggleable views

SkepticMystic · Jun 23, 2021 · bbe4e6d · bbe4e6d
1 parent 36d7df1
commit bbe4e6d
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 58 deletions.
diff --git a/src/List.svelte b/src/List.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { App } from "obsidian";
+
+  import type { internalLinkObj } from "src/ListView";
+
+  export let list;
+  const realItems: internalLinkObj[] = list.realItems;
+  const impliedItems: internalLinkObj[] = list.impliedItems;
+  const fieldName: string = list.fieldName;
+  const app: App = list.app;
+
+  async function openLink(item: internalLinkObj) {
+    await app.workspace.openLinkText(item.to, item.currFile.path);
+  }
+</script>
+
+<details>
+  <summary>{fieldName}</summary>
+
+  {#if realItems.length > 0}
+    <h5 class="header">Real</h5>
+  {/if}
+
+  {#if realItems.length > 1}
+    <ol>
+      {#each realItems as realItem}
+        <li>
+          <a
+            href="null"
+            class={realItem.cls}
+            on:click={async () => openLink(realItem)}
+          >
+            {realItem.to}
+          </a>
+        </li>
+      {/each}
+    </ol>
+  {:else if realItems.length === 1}
+    <a
+      href="null"
+      class={realItems[0].cls}
+      on:click={async () => openLink(realItems[0])}
+    >
+      {realItems[0].to}
+    </a>
+  {/if}
+
+  {#if impliedItems.length > 0}
+    <h5 class="header">Implied</h5>
+  {/if}
+
+  {#if impliedItems.length > 1}
+    <ol>
+      {#each impliedItems as impliedItem}
+        <li>
+          <a
+            href="null"
+            class={impliedItem.cls}
+            on:click={async () => openLink(impliedItem)}
+            >{impliedItem.to}
+          </a>
+        </li>
+      {/each}
+    </ol>
+  {:else if impliedItems.length === 1}
+    <a
+      href="null"
+      class={impliedItems[0].cls}
+      on:click={async () => openLink(impliedItems[0])}>{impliedItems[0].to}</a
+    >
+  {/if}
+</details>
+
+<style>
+  summary {
+    font-size: larger;
+    margin: 3px;
+  }
+  h5.header {
+    margin: 3px;
+  }
+
+  ol {
+    margin: 3px;
+  }
+</style>
diff --git a/src/Lists.svelte b/src/Lists.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import List from "./List.svelte";
+  import type SquareProps from "./MatrixView";
+
+  export let parents: SquareProps;
+  export let top: SquareProps;
+  export let siblings: SquareProps;
+  export let children: SquareProps;
+
+  const lists = [parents, top, siblings, children];
+  const currFile = parents.app.workspace.getActiveFile().basename;
+</script>
+
+<h2 class="header">{currFile}</h2>
+{#each lists as list}
+  {#if Object.keys(list).length}
+    <List {list} />
+  {/if}
+{/each}
+
+<style>
+  h2.header {
+    margin: 3px;
+  }
+</style>
diff --git a/src/MatrixView.ts b/src/MatrixView.ts
@@ -14,6 +14,7 @@ import {
 } from "src/constants";
 import type BreadcrumbsPlugin from "src/main";
 import Matrix from "./Matrix.svelte";
+import Lists from "./Lists.svelte"
 
 interface neighbourObj {
   current: TFile;
@@ -42,7 +43,8 @@ export interface SquareProps {
 
 export default class MatrixView extends ItemView {
   private plugin: BreadcrumbsPlugin;
-  private matrix: Matrix;
+  private view: Matrix;
+  matrixQ: boolean;
 
   constructor(leaf: WorkspaceLeaf, plugin: BreadcrumbsPlugin) {
     super(leaf);
@@ -52,8 +54,10 @@ export default class MatrixView extends ItemView {
     );
   }
 
-  onload(): void {
+  async onload(): Promise<void> {
     super.onload();
+    this.draw();
+    await this.plugin.saveSettings();
   }
 
   getViewType(): string {
@@ -65,8 +69,8 @@ export default class MatrixView extends ItemView {
   }
 
   onClose(): Promise<void> {
-    if (this.matrix) {
-      this.matrix.$destroy();
+    if (this.view) {
+      this.view.$destroy();
     }
     return Promise.resolve();
   }
@@ -111,10 +115,14 @@ export default class MatrixView extends ItemView {
   }
 
   getNeighbourObjArr(fileFrontmatterArr: fileFrontmatter[]): neighbourObj[] {
+    const settings = this.plugin.settings;
     return fileFrontmatterArr.map((fileFrontmatter) => {
-      const parents = this.getFields(fileFrontmatter, "yz-parent");
-      const siblings = this.getFields(fileFrontmatter, "sibling");
-      const children = this.getFields(fileFrontmatter, "child");
+      const parents = this.getFields(fileFrontmatter, settings.parentFieldName);
+      const siblings = this.getFields(
+        fileFrontmatter,
+        settings.siblingFieldName
+      );
+      const children = this.getFields(fileFrontmatter, settings.childFieldName);
 
       return { current: fileFrontmatter.file, parents, siblings, children };
     });
@@ -162,7 +170,7 @@ export default class MatrixView extends ItemView {
   getBreadcrumbs(
     g: Graph,
     // TODO Settings bug
-    userTo: string = "Index"
+    userTo: string = this.plugin.settings.indexNote
   ): string[] {
     const from = this.app.workspace.getActiveFile().basename;
     const paths = graphlib.alg.dijkstra(g, from);
@@ -218,6 +226,16 @@ export default class MatrixView extends ItemView {
   async draw(): Promise<void> {
     this.contentEl.empty();
 
+    const button = this.contentEl.createEl("button", {
+      text: this.matrixQ ? "Matrix" : "List",
+    });
+    button.addEventListener("click", async () => {
+      this.matrixQ = !this.matrixQ;
+      button.innerText = this.matrixQ ? "Matrix" : "List";
+      console.log(this.matrixQ);
+      await this.draw()
+    });
+
     // const { parentFieldName, siblingFieldName, childFieldName, indexNote } =
     //   this.plugin.settings;
 
@@ -237,6 +255,8 @@ export default class MatrixView extends ItemView {
       this.squareItems(gChildren, false),
     ];
 
+    const settings = this.plugin.settings;
+
     // TODO finish
     const impliedSiblings = [];
 
@@ -245,16 +265,16 @@ export default class MatrixView extends ItemView {
     const parentsSquare: SquareProps = {
       realItems: realParents,
       impliedItems: impliedParents,
-      fieldName: "parent",
+      fieldName: settings.parentFieldName,
       app: this.app,
     };
 
     const topSquare: SquareProps = {
       realItems: [
         {
-          to: "Index",
+          to: settings.indexNote,
           currFile: currFile,
-          cls: this.resolvedClass("Index", currFile),
+          cls: this.resolvedClass(settings.indexNote, currFile),
         },
       ],
       impliedItems: [{ to: undefined, currFile: undefined, cls: undefined }],
@@ -278,32 +298,47 @@ export default class MatrixView extends ItemView {
     const siblingSquare: SquareProps = {
       realItems: realSiblings,
       impliedItems: impliedSiblings,
-      fieldName: "sibling",
+      fieldName: settings.siblingFieldName,
       app: this.app,
     };
 
     const childrenSquare: SquareProps = {
       realItems: realChildren,
       impliedItems: impliedChildren,
-      fieldName: "child",
+      fieldName: settings.childFieldName,
       app: this.app,
     };
 
-    this.matrix = new Matrix({
-      target: this.contentEl,
-      props: {
-        parents: parentsSquare,
-        top: topSquare,
-        current: currSquare,
-        siblings: siblingSquare,
-        children: childrenSquare,
-      },
-    });
+    if (this.matrixQ) {
+      this.view = new Matrix({
+        target: this.contentEl,
+        props: {
+          parents: parentsSquare,
+          top: topSquare,
+          current: currSquare,
+          siblings: siblingSquare,
+          children: childrenSquare,
+        },
+      });
+    } else {
+      this.view = new Lists({
+        target: this.contentEl,
+        props: {
+          parents: parentsSquare,
+          top: topSquare,
+          siblings: siblingSquare,
+          children: childrenSquare,
+        },
+      });
+    }
+
+
   }
 
   async onOpen(): Promise<void> {
     // Liam uses this here: https://github.com/liamcain/obsidian-calendar-plugin/blob/d620bbac628ac8ac5e1f176ac1bb7be64dc2846e/src/view.ts#L100
     // this.app.workspace.trigger(TRIGGER_ON_OPEN, sources);
     // this.draw();
+    await this.plugin.saveSettings();
   }
 }
diff --git a/src/Square.svelte b/src/Square.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { App } from "obsidian";
+import type { internalLinkObj, SquareProps } from "src/ListView";
 
-  import type internalLinkObj from "./MatrixView";
 
   export let realItems: internalLinkObj[];
   export let impliedItems: internalLinkObj[];
@@ -20,29 +20,29 @@ import type { App } from "obsidian";
     <h5 class="header">Real</h5>
     {#if realItems.length > 1}
       <ol>
-        {#each realItems as item}
+        {#each realItems as realItem}
           <li>
-            <a href=null class={item.cls} on:click={async () => openLink(item)}>{item.to}</a>
+            <a href=null class={realItem.cls} on:click={async () => openLink(realItem)}>{realItem.to}</a>
           </li>
         {/each}
       </ol>
     {:else}
-    <a href=null on:click={async () => openLink(realItems[0].to)}>{realItems[0].to}</a>
+    <a href=null class={realItems[0].cls} on:click={async () => openLink(realItems[0])}>{realItems[0].to}</a>
     {/if}
   {/if}
 
   {#if impliedItems.length}
     <h5 class="header">Implied</h5>
     {#if impliedItems.length > 1}
       <ol>
-        {#each impliedItems as item}
+        {#each impliedItems as impliedItem}
           <li>
-            <a href=null on:click={async () => openLink(item)}>{item.to}</a>
+            <a href=null class={impliedItem.cls} on:click={async () => openLink(impliedItem)}>{impliedItem.to}</a>
           </li>
         {/each}
       </ol>
     {:else}
-    <a href=null on:click={async () => openLink(impliedItems[0].to)}>{impliedItems[0].to}</a>
+    <a href=null class={impliedItems[0].cls} on:click={async () => openLink(impliedItems[0])}>{impliedItems[0].to}</a>
     {/if}
   {/if}
 </div>

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,4 +1,5 @@
 export const VIEW_TYPE_BREADCRUMBS_MATRIX = "breadcrumbs-matrix";
+export const VIEW_TYPE_BREADCRUMBS_LIST = "breadcrumbs-list";
 export const VIEW_TYPE_BREADCRUMBS_TRAIL = "breadcrumbs-trail";
 export const splitLinksRegex = new RegExp(/\[\[(.+?)\]\]/g);
 export const dropHeaderOrAlias = new RegExp(/\[\[([^#|]+)\]\]/);