diff --git a/src/settings/ICSSettingsTab.ts b/src/settings/ICSSettingsTab.ts index c52980c..2594f61 100644 --- a/src/settings/ICSSettingsTab.ts +++ b/src/settings/ICSSettingsTab.ts @@ -12,6 +12,7 @@ import { Calendar, DEFAULT_CALENDAR_FORMAT } from "./ICSSettings"; +import moment = require("moment"); export function getCalendarElement( icsName: string): HTMLElement { @@ -30,12 +31,42 @@ export function getCalendarElement( export default class ICSSettingsTab extends PluginSettingTab { plugin: ICSPlugin; + timeFormatExample = document.createElement('b'); constructor(app: App, plugin: ICSPlugin) { super(app, plugin); this.plugin = plugin; } + +private timeFormattingDescription() { + this.updateTimeFormatExample(); + + const descEl = document.createDocumentFragment(); + descEl.appendText('Time format for events. HH:mm is 00:15. hh:mma is 12:15am.'); + descEl.appendText(' For more syntax, refer to '); + descEl.appendChild(this.getMomentDocsLink()); + descEl.appendText('.'); + + descEl.appendChild(document.createElement('p')); + descEl.appendText('Your current time format syntax looks like this: '); + descEl.appendChild(this.timeFormatExample); + descEl.appendText('.'); + return descEl; +} + +private updateTimeFormatExample() { + this.timeFormatExample.innerText = moment(new Date()).format(this.plugin.data.format.timeFormat); +} + +private getMomentDocsLink() { + const a = document.createElement('a'); + a.href = 'https://momentjs.com/docs/#/displaying/format/'; + a.text = 'format reference'; + a.target = '_blank'; + return a; +} + display(): void { let { containerEl @@ -126,14 +157,18 @@ export default class ICSSettingsTab extends PluginSettingTab { let timeFormat: TextComponent; const timeFormatSetting = new Setting(containerEl) .setName("Time format") - .setDesc('HH:mm will display 00:15. hh:mma will display 12:15am.') + .setDesc(this.timeFormattingDescription()) .addText((text) => { timeFormat = text; timeFormat.setValue(this.plugin.data.format.timeFormat).onChange((v) => { this.plugin.data.format.timeFormat = v; + this.updateTimeFormatExample(); }); }); + + + // Sponsor link - Thank you! const divSponsor = containerEl.createDiv(); divSponsor.innerHTML = `

A scratch my own itch project by muness.
@@ -142,6 +177,7 @@ export default class ICSSettingsTab extends PluginSettingTab { } } + class SettingsModal extends Modal { icsName: string = ""; icsUrl: string = "";