diff --git a/src/main.ts b/src/main.ts index 8e8556f..6e592f6 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,22 +2,28 @@ import { CachedMetadata, Plugin, TFile } from 'obsidian'; import { OZCalendarView, VIEW_TYPE } from './view'; import dayjs from 'dayjs'; import { OZCalendarDaysMap } from './types'; +import { OZCalendarPluginSettings, DEFAULT_SETTINGS, OZCalendarPluginSettingsTab } from 'settings'; export default class OZCalendarPlugin extends Plugin { - FM_KEY: string = 'created'; - FM_FORMAT: string = 'YYYY-MM-DD hh:mm:ss'; + settings: OZCalendarPluginSettings; OZCALENDARDAYS_STATE: OZCalendarDaysMap = {}; EVENT_TYPES = { forceUpdate: 'ozCalendarForceUpdate', }; async onload() { + // Load Settings + this.addSettingTab(new OZCalendarPluginSettingsTab(this.app, this)); + await this.loadSettings(); + this.registerView(VIEW_TYPE, (leaf) => { return new OZCalendarView(leaf, this); }); this.app.workspace.onLayoutReady(() => { - this.openOZCalendarLeaf({ showAfterAttach: true }); + if (this.settings.openViewOnStart) { + this.openOZCalendarLeaf({ showAfterAttach: true }); + } this.OZCALENDARDAYS_STATE = this.getNotesWithDates(); }); @@ -35,9 +41,9 @@ export default class OZCalendarPlugin extends Plugin { if (cache && cache.frontmatter) { let fm = cache.frontmatter; for (let k of Object.keys(cache.frontmatter)) { - if (k === this.FM_KEY) { + if (k === this.settings.yamlKey) { let fmValue = fm[k]; - let parsedDayISOString = dayjs(fmValue, this.FM_FORMAT).format('YYYY-MM-DD'); + let parsedDayISOString = dayjs(fmValue, this.settings.dateFormat).format('YYYY-MM-DD'); this.addFilePathToState(parsedDayISOString, file.path); } } @@ -67,14 +73,22 @@ export default class OZCalendarPlugin extends Plugin { onunload() {} + async loadSettings() { + this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()); + } + + async saveSettings() { + await this.saveData(this.settings); + } + handleCacheChange = (file: TFile, data: string, cache: CachedMetadata) => { this.removeFilePathFromState(file.path); if (cache && cache.frontmatter) { let fm = cache.frontmatter; for (let k of Object.keys(cache.frontmatter)) { - if (k === this.FM_KEY) { + if (k === this.settings.yamlKey) { let fmValue = fm[k]; - let parsedDayISOString = dayjs(fmValue, this.FM_FORMAT).format('YYYY-MM-DD'); + let parsedDayISOString = dayjs(fmValue, this.settings.dateFormat).format('YYYY-MM-DD'); // If date doesn't exist, create a new one if (!(parsedDayISOString in this.OZCALENDARDAYS_STATE)) { this.addFilePathToState(parsedDayISOString, file.path); @@ -123,10 +137,10 @@ export default class OZCalendarPlugin extends Plugin { let fm = fileCache.frontmatter; // Check the FM keys vs the provided key by the user in settings @todo for (let k of Object.keys(fm)) { - if (k === this.FM_KEY) { + if (k === this.settings.yamlKey) { let fmValue = fm[k]; // Parse the date with provided date format - let parsedDayJsDate = dayjs(fmValue, this.FM_FORMAT); + let parsedDayJsDate = dayjs(fmValue, this.settings.dateFormat); // Take only YYYY-MM-DD part fromt the date as String let parsedDayISOString = parsedDayJsDate.format('YYYY-MM-DD'); // Check if it already exists diff --git a/src/settings.ts b/src/settings.ts new file mode 100644 index 0000000..0212e00 --- /dev/null +++ b/src/settings.ts @@ -0,0 +1,84 @@ +import OZCalendarPlugin from 'main'; +import { PluginSettingTab, App, Setting } from 'obsidian'; + +export interface OZCalendarPluginSettings { + openViewOnStart: boolean; + yamlKey: string; + dateFormat: string; +} + +export const DEFAULT_SETTINGS: OZCalendarPluginSettings = { + openViewOnStart: true, + yamlKey: 'created', + dateFormat: 'YYYY-MM-DD hh:mm:ss', +}; + +export class OZCalendarPluginSettingsTab extends PluginSettingTab { + plugin: OZCalendarPlugin; + + constructor(app: App, plugin: OZCalendarPlugin) { + super(app, plugin); + this.plugin = plugin; + } + + display() { + let { containerEl } = this; + containerEl.empty(); + + /* ------------- Buy Me a Coffee ------------- */ + + const tipDiv = containerEl.createDiv('tip'); + tipDiv.addClass('oz-cal-tip-div'); + const tipLink = tipDiv.createEl('a', { href: 'https://revolut.me/ozante' }); + const tipImg = tipLink.createEl('img', { + attr: { + src: 'https://raw.githubusercontent.com/ozntel/file-tree-alternative/main/images/tip%20the%20artist_v2.png', + }, + }); + tipImg.height = 55; + + const coffeeDiv = containerEl.createDiv('coffee'); + coffeeDiv.addClass('oz-cal-coffee-div'); + const coffeeLink = coffeeDiv.createEl('a', { href: 'https://ko-fi.com/L3L356V6Q' }); + const coffeeImg = coffeeLink.createEl('img', { + attr: { + src: 'https://cdn.ko-fi.com/cdn/kofi2.png?v=3', + }, + }); + coffeeImg.height = 45; + + /* ------------- General Settings ------------- */ + + containerEl.createEl('h1', { text: 'OZ Calendar Plugin Settings' }); + + new Setting(containerEl) + .setName('Open Calendar on Start') + .setDesc('Disable if you dont want Calendar View to be opened during the initial vault launch') + .addToggle((toggle) => { + toggle.setValue(this.plugin.settings.openViewOnStart).onChange((newValue) => { + this.plugin.settings.openViewOnStart = newValue; + this.plugin.saveSettings(); + }); + }); + + new Setting(containerEl) + .setName('YAML Key') + .setDesc('Set the YAML Key that should be used for displaying in the calendar') + .addText((text) => { + text.setValue(this.plugin.settings.yamlKey).onChange((newValue) => { + this.plugin.settings.yamlKey = newValue; + this.plugin.saveSettings(); + }); + }); + + new Setting(containerEl) + .setName('Date Format') + .setDesc('Set the Date format you are using within the YAML key provided above') + .addText((text) => { + text.setValue(this.plugin.settings.dateFormat).onChange((newValue) => { + this.plugin.settings.dateFormat = newValue; + this.plugin.saveSettings(); + }); + }); + } +} diff --git a/styles.css b/styles.css index 35aeef9..ba5cea5 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,13 @@ +.oz-cal-coffee-div, +.oz-cal-tip-div { + text-align: center; + margin-top: 10px; +} + +.oz-cal-tip-div img { + border-radius: 10px; +} + .oz-calendar-plugin-view .react-calendar button:enabled:hover { cursor: pointer; } @@ -25,8 +35,7 @@ color: #d10000; } -.oz-calendar-plugin-view - .react-calendar__month-view__days__day--neighboringMonth { +.oz-calendar-plugin-view .react-calendar__month-view__days__day--neighboringMonth { color: var(--text-muted); opacity: 0.5; } @@ -39,8 +48,7 @@ line-height: 16px; } -.oz-calendar-plugin-view - button.react-calendar__tile.react-calendar__month-view__days__day, +.oz-calendar-plugin-view button.react-calendar__tile.react-calendar__month-view__days__day, .oz-calendar-plugin-view button.react-calendar__navigation__arrow, .oz-calendar-plugin-view button.react-calendar__navigation__label { background-color: transparent !important; @@ -52,8 +60,7 @@ font-size: 1.1em; } -.oz-calendar-plugin-view - .react-calendar__tile.react-calendar__month-view__days__day { +.oz-calendar-plugin-view .react-calendar__tile.react-calendar__month-view__days__day { height: 40px; display: block; }