-
diff --git a/src/settings/creator/Settings/SettingItem.svelte b/src/settings/creator/Settings/SettingItem.svelte
new file mode 100644
index 0000000..01c8674
--- /dev/null
+++ b/src/settings/creator/Settings/SettingItem.svelte
@@ -0,0 +1,8 @@
+
diff --git a/src/settings/creator/stores/calendar.ts b/src/settings/creator/stores/calendar.ts
index 193fb7e..0a3b37a 100644
--- a/src/settings/creator/stores/calendar.ts
+++ b/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;
}),
diff --git a/src/settings/modals/modal.ts b/src/settings/modals/modal.ts
index e502d04..a0f1ded 100644
--- a/src/settings/modals/modal.ts
+++ b/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");
}
-}
\ No newline at end of file
+ onOpen(): void {
+ this.display();
+ }
+ abstract display(): Promise
;
+}
+
+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 {
+ 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() {}
+}
diff --git a/src/settings/modals/weekday/weekday.ts b/src/settings/modals/weekday/weekday.ts
new file mode 100644
index 0000000..9f9d32b
--- /dev/null
+++ b/src/settings/modals/weekday/weekday.ts
@@ -0,0 +1,50 @@
+import type { Day } from "src/@types";
+import { CalendariumModal, CanceableCalendariumModal } from "../modal";
+import { Setting } from "obsidian";
+import { nanoid } from "src/utils/functions";
+
+export class WeekdayModal extends CanceableCalendariumModal {
+ creating: boolean;
+ useAbbr: boolean;
+
+ constructor(item?: Day) {
+ super();
+ if (!item) {
+ this.creating = true;
+ }
+
+ this.item = item ?? {
+ type: "day",
+ name: null,
+ id: nanoid(6),
+ };
+
+ this.useAbbr = this.item?.abbreviation?.length > 0;
+
+ this.titleEl.setText(`${this.creating ? "Create" : "Modify"} Weekday`);
+ }
+ async display() {
+ this.contentEl.empty();
+ new Setting(this.contentEl).setName("Name").addText((t) => {
+ t.setValue(this.item.name).onChange((v) => (this.item.name = v));
+ });
+ new Setting(this.contentEl)
+ .setName("Custom Abbreviation")
+ .setDesc(
+ "By default, the first three letters of the name will be used."
+ )
+ .addToggle((t) => {
+ t.setValue(this.useAbbr).onChange((v) => {
+ this.useAbbr = v;
+ this.display();
+ });
+ });
+ if (this.useAbbr) {
+ new Setting(this.contentEl).setName("Abbreviation").addText((t) => {
+ t.setValue(this.item.abbreviation).onChange(
+ (v) => (this.item.abbreviation = v)
+ );
+ });
+ }
+ }
+}
diff --git a/src/settings/settings.css b/src/settings/settings.css
index 8012d64..a07ad54 100644
--- a/src/settings/settings.css
+++ b/src/settings/settings.css
@@ -251,3 +251,8 @@ details.calendarium-nested-settings[open] > summary > .collapser > .handle {
.calendarium-creator .additional.can-save {
color: var(--text-normal);
}
+
+/** Generic Modal */
+.calendarium-modal-buttons {
+ justify-content: flex-end;
+}
diff --git a/src/settings/settings.ts b/src/settings/settings.ts
index d71f952..8362be5 100644
--- a/src/settings/settings.ts
+++ b/src/settings/settings.ts
@@ -588,46 +588,6 @@ export default class CalendariumSettings extends PluginSettingTab {
reject();
}
});
- /* } else {
- this.containerEl.addClass("calendarium-creator-open");
- return new Promise((resolve) => {
- const color = getComputedStyle(
- this.containerEl.closest(".modal")
- ).backgroundColor;
- const $app = new CalendarCreator({
- target: this.containerEl,
- props: {
- base: clone,
- plugin: this.plugin,
- width: this.contentEl.clientWidth,
- color,
- top: this.containerEl.scrollTop,
- },
- });
- const observer = new ResizeObserver(() => {
- $app.$set({ width: this.contentEl.clientWidth });
- });
- observer.observe(this.contentEl);
- $app.$on(
- "exit",
- (
- evt: CustomEvent<{ saved: boolean; calendar: Calendar }>
- ) => {
- this.containerEl.removeClass(
- "calendarium-creator-open"
- );
- $app.$destroy();
- if (evt.detail.saved) {
- //saved
- calendar = copy(evt.detail.calendar);
- observer.disconnect();
- resolve(calendar);
- }
- resolve();
- }
- );
- });
- } */
}
}
@@ -694,7 +654,8 @@ class CreatorModal extends CalendariumModal {
})
);
}
- onOpen() {
+ async display() {
+ this.modalEl.onscroll = () => console.trace();
this.setTitle();
this.store.valid.subscribe((v) => {
if (v == this.valid) return;
diff --git a/src/utils/functions.ts b/src/utils/functions.ts
index 7d03b67..1bd4a1a 100644
--- a/src/utils/functions.ts
+++ b/src/utils/functions.ts
@@ -1,4 +1,11 @@
-import type { Calendar, CalDate, CalEvent, LeapDay, Month } from "../@types";
+import type {
+ Calendar,
+ CalDate,
+ CalEvent,
+ LeapDay,
+ Month,
+ Day,
+} from "../@types";
export function daysBetween(date1: Date, date2: Date) {
const d1 = window.moment(date1);
@@ -206,3 +213,7 @@ export function compareEvents(a: CalEvent, b: CalEvent) {
export function sortEventList(list: CalEvent[]): CalEvent[] {
return list.sort((a, b) => compareEvents(a, b));
}
+
+export function getAbbreviation(day: Day) {
+ return day.abbreviation ? day.abbreviation : day.name.slice(0, 3);
+}
diff --git a/src/utils/presets.ts b/src/utils/presets.ts
index 09a263e..2d218ee 100644
--- a/src/utils/presets.ts
+++ b/src/utils/presets.ts
@@ -18,6 +18,7 @@ export const PRESET_CALENDARS: Calendar[] = [
{
type: "day",
name: "Sunday",
+ abbreviation: "abc",
id: "ID_19ea684b4a08",
},
{