mirror of
https://github.com/ozntel/oz-calendar.git
synced 2026-07-22 07:40:24 +00:00
Settings Implementation
This commit is contained in:
Ozan Tellioglu
parent
09927a1fae
commit
a91ea9c0c9
3 changed files with 120 additions and 15 deletions
32
src/main.ts
32
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
|
||||
|
|
|
|||
84
src/settings.ts
Normal file
84
src/settings.ts
Normal file
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
19
styles.css
19
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue