feat: can now specify multiple calendar event paths

javalent · Aug 30, 2023 · 4d2ee83 · 4d2ee83
1 parent 81bfbd4
commit 4d2ee83
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 52 deletions.
diff --git a/src/@types/calendar.d.ts b/src/@types/calendar.d.ts
@@ -18,7 +18,7 @@ export interface Calendar {
     date?: number;
     displayWeeks?: boolean;
     autoParse: boolean;
-    path: string;
+    path: string[];
     supportInlineEvents: boolean;
     inlineEventTag: string;
     dateFormat?: string;

diff --git a/src/settings/creator/Containers/EventContainer.svelte b/src/settings/creator/Containers/EventContainer.svelte
@@ -15,10 +15,18 @@
         prepareFuzzySearch,
         FuzzyMatch,
         debounce,
-        SearchComponent
+        SearchComponent,
+        normalizePath,
+        TFolder,
+        TextComponent as ObsidianTextComponent,
+        ExtraButtonComponent,
     } from "obsidian";
     import { getContext } from "svelte";
     import { derived, writable } from "svelte/store";
+    import ToggleComponent from "../Settings/ToggleComponent.svelte";
+    import TextComponent from "../Settings/TextComponent.svelte";
+    import { FolderSuggestionModal } from "src/suggester/folder";
+    import { DEFAULT_CALENDAR } from "src/settings/settings.constants";
 
     export let plugin: Calendarium;
 
@@ -30,6 +38,82 @@
     let filtered = false;
     let nameFilter = writable<string>("");
 
+    $: autoParse = $calendar.autoParse;
+
+    $: supportInlineEvents = $calendar.supportInlineEvents;
+    if (!$calendar.inlineEventTag)
+        $calendar.inlineEventTag = DEFAULT_CALENDAR.inlineEventTag;
+
+    let path = writable(DEFAULT_CALENDAR.path[0]);
+    const folder = (node: HTMLElement) => {
+        let folders = plugin.app.vault
+            .getAllLoadedFiles()
+            .filter(
+                (f) =>
+                    f instanceof TFolder &&
+                    !$calendar.path.find((p) => f.path.startsWith(p))
+            );
+        const text = new ObsidianTextComponent(node);
+        if (!$calendar.path) $calendar.path = ["/"];
+        text.setPlaceholder($calendar.path[0] ?? "/");
+        const modal = new FolderSuggestionModal(plugin.app, text, [
+            ...(folders as TFolder[]),
+        ]);
+
+        modal.onClose = async () => {
+            const v = text.inputEl.value?.trim()
+                ? text.inputEl.value.trim()
+                : "/";
+            $path = normalizePath(v);
+        };
+
+        text.inputEl.onblur = async () => {
+            const v = text.inputEl.value?.trim()
+                ? text.inputEl.value.trim()
+                : "/";
+            $path = normalizePath(v);
+        };
+    };
+
+    const addPathButton = (node: HTMLElement) => {
+        new ExtraButtonComponent(node).setIcon("plus-with-circle");
+    };
+    const addPath = () => {
+        if ($path.length && !$calendar.path.includes($path)) {
+            $calendar.path = [...$calendar.path, $path];
+        }
+    };
+    const pathSetting = (node: HTMLElement, path: string) => {
+        new Setting(node).setName(path).addExtraButton((b) =>
+            b.setIcon("trash").onClick(() => {
+                $calendar.path = $calendar.path.filter((p) => p != path);
+            })
+        );
+    };
+    $: inlineEventTagDesc = createFragment((e) => {
+        e.createSpan({
+            text: "Tag to specify which notes to scan for inline events, e.g. ",
+        });
+        e.createEl("code", { text: "inline-events" });
+        e.createSpan({
+            text: " to use the ",
+        });
+        e.createEl("code", { text: "#inline-events" });
+        e.createSpan({
+            text: " tag.",
+        });
+    });
+
+    const inlineEventTagSetting = (node: HTMLElement) => {
+        const text = new ObsidianTextComponent(node);
+        text.setValue(
+            `${$calendar.inlineEventTag ?? ""}`.replace("#", "")
+        ).onChange(async (v) => {
+            $calendar.inlineEventTag = v.startsWith("#") ? v : `#${v}`;
+            await plugin.saveSettings();
+        });
+    };
+
     const sorted = derived([sortedStore, nameFilter], ([events, filter]) => {
         if (!filter || !filter.length) {
             filtered = false;
@@ -57,7 +141,7 @@
         return $calendar.categories.find(({ id }) => id == category);
     };
     const add = (event?: CalEvent) => {
-        const modal = new CreateEventModal(plugin, $calendar, event);
+        const modal = new CreateEventModal($calendar, event);
         modal.onClose = () => {
             if (!modal.saved) return;
             if (modal.editing) {
@@ -117,6 +201,51 @@
     desc={`Displaying ${$sorted.length}/${$calendar.events.length} events.`}
     open={false}
 >
+    <ToggleComponent
+        name={"Parse Files for Events"}
+        desc={"The plugin will automatically parse files in the vault for events for this calendar."}
+        value={autoParse}
+        on:click={() => {
+            $calendar.autoParse = !$calendar.autoParse;
+        }}
+    />
+    {#if autoParse}
+        <TextComponent
+            name={"Events Folders"}
+            desc={"The plugin will only parse files in these folders for events."}
+            value={$calendar.path[0]}
+        >
+            <div use:folder />
+            <div use:addPathButton on:click={addPath} />
+        </TextComponent>
+        <div class="existing-paths">
+            {#each $calendar.path as path (path)}
+                <div class="existing-path" use:pathSetting={path} />
+            {/each}
+        </div>
+        <ToggleComponent
+            name={"Support Inline Events"}
+            desc={"Look for <span> tags defining events in notes."}
+            value={supportInlineEvents}
+            on:click={() => {
+                $calendar.supportInlineEvents = !$calendar.supportInlineEvents;
+            }}
+        />
+        {#if supportInlineEvents}
+            {#key $calendar.supportInlineEvents}
+                <TextComponent
+                    name={"Default Inline Events Tag"}
+                    desc={inlineEventTagDesc}
+                    value={""}
+                >
+                    <div
+                        use:inlineEventTagSetting
+                        class="setting-item-control"
+                    />
+                </TextComponent>
+            {/key}
+        {/if}
+    {/if}
     <ButtonComponent
         name={"Delete All Events"}
         icon="trash"
@@ -157,4 +286,9 @@
         font-style: italic;
         cursor: pointer;
     }
+    .existing-paths {
+        padding: 1rem 2rem;
+        display: flex;
+        flex-flow: column;
+    }
 </style>
diff --git a/src/settings/creator/Containers/EventInstance.svelte b/src/settings/creator/Containers/EventInstance.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
-    import type { Event, EventCategory } from "src/@types";
+    import type { CalEvent, CalEventCategory } from "src/@types";
     import { ExtraButtonComponent } from "obsidian";
     import Dot from "../Utilities/Dot.svelte";
 
@@ -15,8 +15,8 @@
     const edit = (node: HTMLElement) => {
         new ExtraButtonComponent(node).setIcon("pencil").setTooltip("Edit");
     };
-    export let event: Event;
-    export let category: EventCategory;
+    export let event: CalEvent;
+    export let category: CalEventCategory;
     export let date: string;
 </script>
 

diff --git a/src/settings/creator/Containers/Info.svelte b/src/settings/creator/Containers/Info.svelte
@@ -34,8 +34,8 @@
             .getAllLoadedFiles()
             .filter((f) => f instanceof TFolder);
         const text = new ObsidianTextComponent(node);
-        if (!$calendar.path) $calendar.path = "/";
-        text.setPlaceholder($calendar.path ?? "/");
+        if (!$calendar.path) $calendar.path = ["/"];
+        text.setPlaceholder($calendar.path[0] ?? "/");
         const modal = new FolderSuggestionModal(plugin.app, text, [
             ...(folders as TFolder[]),
         ]);
@@ -44,14 +44,14 @@
             const v = text.inputEl.value?.trim()
                 ? text.inputEl.value.trim()
                 : "/";
-            $calendar.path = normalizePath(v);
+            $calendar.path = [normalizePath(v)];
         };
 
         text.inputEl.onblur = async () => {
             const v = text.inputEl.value?.trim()
                 ? text.inputEl.value.trim()
                 : "/";
-            $calendar.path = normalizePath(v);
+            $calendar.path = [normalizePath(v)];
         };
     };
 
@@ -118,46 +118,6 @@
                 $calendar.static.incrementDay = !$calendar.static.incrementDay;
             }}
         />
-        <ToggleComponent
-            name={"Parse Files for Events"}
-            desc={"The plugin will automatically parse files in the vault for events."}
-            value={autoParse}
-            on:click={() => {
-                $calendar.autoParse = !$calendar.autoParse;
-            }}
-        />
-        {#if autoParse}
-            <TextComponent
-                name={"Events Folder"}
-                desc={"The plugin will only parse files in this folder for events."}
-                value={$calendar.path}
-            >
-                <div use:folder />
-            </TextComponent>
-            <ToggleComponent
-                name={"Support Inline Events"}
-                desc={"Look for <span> tags defining events in notes."}
-                value={supportInlineEvents}
-                on:click={() => {
-                    $calendar.supportInlineEvents =
-                        !$calendar.supportInlineEvents;
-                }}
-            />
-            {#if supportInlineEvents}
-                {#key $calendar.supportInlineEvents}
-                    <TextComponent
-                        name={"Default Inline Events Tag"}
-                        desc={inlineEventTagDesc}
-                        value={""}
-                    >
-                        <div
-                            use:inlineEventTagSetting
-                            class="setting-item-control"
-                        />
-                    </TextComponent>
-                {/key}
-            {/if}
-        {/if}
     </div>
 </Details>
 

diff --git a/src/settings/settings.constants.ts b/src/settings/settings.constants.ts
@@ -25,7 +25,7 @@ export const DEFAULT_CALENDAR: Calendar = {
     events: [],
     categories: [],
     autoParse: false,
-    path: "/",
+    path: ["/"],
     supportInlineEvents: false,
     inlineEventTag: "#inline-events",
 };

diff --git a/src/settings/settings.service.ts b/src/settings/settings.service.ts
@@ -104,6 +104,10 @@ export default class SettingsService {
                     calendar.id = `${nanoid(10)}`;
                     dirty = true;
                 }
+                if (!Array.isArray(calendar.path)) {
+                    calendar.path = [calendar.path];
+                    dirty = true;
+                }
             }
             if (!this.#data.defaultCalendar && this.#data.calendars.length) {
                 this.#data.defaultCalendar = this.#data.calendars[0].id;

diff --git a/src/settings/settings.ts b/src/settings/settings.ts
@@ -568,7 +568,8 @@ export default class CalendariumSettings extends PluginSettingTab {
     ): Promise<Calendar | void> {
         /* this.containerEl.empty(); */
         const clone = copy(calendar);
-        clone.id = `ID_${nanoid(10)}`;
+        const original = calendar.id;
+        clone.id = `${nanoid(10)}`;
 
         /* if (Platform.isMobile) { */
         const modal = new CreatorModal(this.plugin, clone);
@@ -577,6 +578,7 @@ export default class CalendariumSettings extends PluginSettingTab {
                 modal.onClose = () => {
                     if (modal.saved) {
                         calendar = copy(modal.calendar);
+                        calendar.id = original;
                         resolve(calendar);
                     }
                     resolve();