feat: Can now specify Weekday Abbreviations (#45)

src/@types/calendar.d.ts

@@ -61,6 +61,7 @@ export type DefinedeDay = {
 };
 export type Day = BaseDay & {
     type: "day";
+    abbreviation?: string;
 };
 export type DefinedDay = Day &
     DefinedDay & {

src/calendar/ui/Week/Weekdays.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+    import type { Day } from "src/@types";
     import { getTypedContext } from "src/calendar/view";
+    import { getAbbreviation } from "src/utils/functions";
 
     export let year: number;
     export let month: number;
@@ -24,7 +26,7 @@
     {/if}
     {#each $weekdays as day}
         <div class="weekday calendarium">
-            {day.name.slice(0, 3).toUpperCase()}
+            {getAbbreviation(day)}
         </div>
     {/each}
 </div>

src/settings/creator/Containers/WeekdayContainer.svelte

@@ -1,22 +1,57 @@
 <script lang="ts">
     import { createEventDispatcher, getContext } from "svelte";
     import { flip } from "svelte/animate";
-    import { dndzone, SOURCES, TRIGGERS } from "svelte-dnd-action";
+    import {
+        dndzone,
+        SHADOW_PLACEHOLDER_ITEM_ID,
+        SOURCES,
+        TRIGGERS,
+    } from "svelte-dnd-action";
     import { ExtraButtonComponent, setIcon, TextComponent } from "obsidian";
     import type { Day } from "src/@types";
     import ToggleComponent from "../Settings/ToggleComponent.svelte";
     import AddNew from "../Utilities/AddNew.svelte";
     import NoExistingItems from "../Utilities/NoExistingItems.svelte";
     import Details from "../Utilities/Details.svelte";
+    import SettingItem from "../Settings/SettingItem.svelte";
+    import { WeekdayModal } from "src/settings/modals/weekday/weekday";
+    import copy from "fast-copy";
+    import { getAbbreviation } from "src/utils/functions";
+
     const calendar = getContext("store");
 
     const { staticStore, weekdayStore } = calendar;
 
     $: overflow = $staticStore.overflow;
+    $: items = copy($weekdayStore);
+
     let firstWeekday = $staticStore.firstWeekDay;
 
     const grip = (node: HTMLElement) => {
-        setIcon(node, "calendarium-grip");
+        setIcon(node, "grip-horizontal");
+    };
+
+    const add = () => {
+        const modal = new WeekdayModal();
+
+        modal.onCancel = () => {}; //no op;
+        modal.onClose = () => {
+            if (!modal.item.name) return;
+            weekdayStore.add(modal.item);
+        };
+
+        modal.open();
+    };
+    const advanced = (node: HTMLElement, item: Day) => {
+        new ExtraButtonComponent(node).setIcon("wrench").onClick(() => {
+            const modal = new WeekdayModal(item);
+            modal.onCancel = () => {}; //no op;
+            modal.onClose = () => {
+                if (!modal.item.name) return;
+                weekdayStore.update(item.id, modal.item);
+            };
+            modal.open();
+        });
     };
 
     const trash = (node: HTMLElement, item: Day) => {
@@ -34,7 +69,7 @@
     function handleConsider(e: CustomEvent<GenericDndEvent<Day>>) {
         const {
             items: newItems,
-            info: { source, trigger }
+            info: { source, trigger },
         } = e.detail;
         weekdayStore.set(newItems);
         // Ensure dragging is stopped on drag finish via keyboard
@@ -45,32 +80,23 @@
     function handleFinalize(e: CustomEvent<GenericDndEvent<Day>>) {
         const {
             items: newItems,
-            info: { source }
+            info: { source },
         } = e.detail;
         weekdayStore.set(newItems);
         // Ensure dragging is stopped on drag finish via pointer (mouse, touch)
         if (source === SOURCES.POINTER) {
             dragDisabled = true;
         }
     }
-
-    const name = (node: HTMLElement, item: Day) => {
-        new TextComponent(node)
-            .setValue(item.name)
-            .setPlaceholder("Name")
-            .onChange((v) => {
-                item.name = v;
-                weekdayStore.update(item.id, item);
-            })
-            .inputEl.setAttr("style", "width: 100%;");
-    };
 </script>
 
 <Details
     name={"Weekdays"}
     warn={!$weekdayStore?.length}
     label={"At least one weekday is required"}
-    desc={`${$weekdayStore.length} weekday${$weekdayStore.length != 1 ? "s" : ""}`}
+    desc={`${$weekdayStore.length} weekday${
+        $weekdayStore.length != 1 ? "s" : ""
+    }`}
     open={false}
 >
     <ToggleComponent
@@ -81,18 +107,28 @@
             staticStore.setProperty("overflow", !$staticStore.overflow)}
     />
 
-    <AddNew on:click={() => weekdayStore.add()} />
+    <AddNew
+        on:click={() => {
+            add();
+        }}
+    />
 
     {#if !$weekdayStore.length}
         <NoExistingItems message={"Create a new weekday to see it here."} />
     {:else}
         <div
-            use:dndzone={{ items: $weekdayStore, flipDurationMs, dragDisabled }}
+            use:dndzone={{
+                items,
+                flipDurationMs,
+                dragDisabled,
+                dropFromOthersDisabled: true,
+                type: "weeks",
+            }}
             class="existing-items"
             on:consider={handleConsider}
             on:finalize={handleFinalize}
         >
-            {#each $weekdayStore as item (item.id)}
+            {#each items.filter((x) => x.id !== SHADOW_PLACEHOLDER_ITEM_ID) as item (item.id)}
                 <div
                     animate:flip={{ duration: flipDurationMs }}
                     class="weekday"
@@ -102,11 +138,22 @@
                         use:grip
                         on:mousedown={startDrag}
                         on:touchstart={startDrag}
+                        style={dragDisabled
+                            ? "cursor: grab"
+                            : "cursor: grabbing"}
                     />
 
-                    <div use:name={item} />
+                    <SettingItem>
+                        <div slot="name">{item.name}</div>
+                        <div slot="desc" style="text-transform: uppercase">
+                            {getAbbreviation(item)}
+                        </div>
+                    </SettingItem>
 
-                    <div class="icon" use:trash={item} />
+                    <div class="icons">
+                        <div class="icon" use:advanced={item} />
+                        <div class="icon" use:trash={item} />
+                    </div>
                 </div>
             {/each}
         </div>
@@ -155,7 +202,12 @@
         width: 100%;
     }
 
+    .icons {
+        display: flex;
+        align-items: center;
+    }
     .weekday .icon {
+        display: flex;
         align-items: center;
     }
     .weekday {

src/settings/creator/Creator.svelte

@@ -60,6 +60,7 @@
                         };
                         modal.open();
                     });
+                b.buttonEl.setAttr("tabindex", "-1");
             });
     };
 
@@ -86,42 +87,12 @@
             class="inherit calendarium-creator-inner"
             style={!mobile ? `width: ${width + 4}px;` : ""}
         >
-            <!-- <div class="top-nav">
-                <div class="icons">
-                    <div class="left">
-                        <div class="check">
-                            {#if $valid}
-                                <div
-                                    class="save can-save"
-                                    use:savedEl
-                                    aria-label={missing}
-                                />
-                                <span class="additional can-save">
-                                    All good! Exit to save calendar
-                                </span>
-                            {:else}
-                                <div
-                                    class="save"
-                                    use:savedEl
-                                    aria-label={missing}
-                                />
-                                <span class="additional">
-                                    Additional information is required before
-                                    saving
-                                </span>
-                            {/if}
-                        </div>
-                    </div>
-                </div>
-            </div> -->
             <div class="calendarium-creator-app">
                 <div use:preset />
                 <Info {plugin} />
                 <WeekdayContainer />
                 <MonthContainer />
                 <YearContainer app={plugin.app} />
-                <!-- 
-            -->
                 <!--<EraContainer {plugin} {calendar} />-->
                 <CurrentDate />
                 <EventContainer {plugin} />

src/settings/creator/Settings/SettingItem.svelte

@@ -0,0 +1,8 @@
+<div class="setting-item-info">
+    <span class="setting-item-name">
+        <slot name="name" />
+    </span>
+    <div class="setting-item-description">
+        <slot name="desc" />
+    </div>
+</div>

src/settings/creator/stores/calendar.ts

@@ -150,13 +150,15 @@ function createStore(
         },
         weekdayStore: {
             subscribe: weekStore.subscribe,
-            add: () =>
+            add: (item?: Day) =>
                 update((data) => {
-                    data.static.weekdays.push({
-                        type: "day",
-                        name: null,
-                        id: nanoid(6),
-                    });
+                    data.static.weekdays.push(
+                        item ?? {
+                            type: "day",
+                            name: null,
+                            id: nanoid(6),
+                        }
+                    );
                     return data;
                 }),
 

src/settings/modals/modal.ts

@@ -1,8 +1,69 @@
-import { App, Modal } from "obsidian";
+import { App, ButtonComponent, Modal } from "obsidian";
+import type { TimeSpan } from "src/@types";
 
 export abstract class CalendariumModal extends Modal {
     constructor(public app: App) {
         super(app);
-        this.containerEl.addClass("calendarium-modal")
+        this.containerEl.addClass("calendarium-modal");
     }
-}
+    onOpen(): void {
+        this.display();
+    }
+    abstract display(): Promise<void>;
+}
+
+export abstract class CanceableCalendariumModal<
+    T extends TimeSpan
+> extends CalendariumModal {
+    constructor() {
+        super(app);
+        this.containerEl.addClasses(["has-buttons", "cancelable"]);
+    }
+    item: T;
+    override onOpen(): void {
+        this.display();
+        this.addButtons();
+    }
+    addButtons() {
+        const buttons = this.modalEl.createDiv(
+            "calendarium-modal-buttons setting-item"
+        );
+        new ButtonComponent(buttons)
+            .setButtonText("Cancel")
+            .setCta()
+            .onClick(this.cancel.bind(this));
+    }
+    cancel() {
+        this.onClose = () => {};
+        this.close();
+        this.onCancel();
+    }
+    onCancel() {}
+}
+export abstract class SaveableCalendariumModal<
+    T extends TimeSpan
+> extends CanceableCalendariumModal<T> {
+    constructor() {
+        super();
+        this.containerEl.addClasses(["saveable"]);
+    }
+    override onOpen(): void {
+        this.display();
+        this.addButtons();
+    }
+    addButtons() {
+        const buttons = this.modalEl.createDiv("calendarium-modal-buttons");
+        new ButtonComponent(buttons)
+            .setButtonText("Save")
+            .setCta()
+            .onClick(this.save.bind(this));
+        new ButtonComponent(buttons)
+            .setButtonText("Cancel")
+            .onClick(this.cancel.bind(this));
+    }
+    save() {
+        this.close();
+        this.onSave();
+    }
+    onSave() {}
+}