mirror of
https://github.com/guicattani/obsidian-countdown-to.git
synced 2026-07-22 05:42:39 +00:00
Add ESlint and fix lint issues
This commit is contained in:
Guilherme Cattani
parent
2f5ef85364
commit
78bc639ca6
4 changed files with 2490 additions and 523 deletions
27
.eslintrc.js
Normal file
27
.eslintrc.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
module.exports = {
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'airbnb-typescript/base',
|
||||
],
|
||||
parser: '@typescript-eslint/parser',
|
||||
parserOptions: {
|
||||
project: './tsconfig.json',
|
||||
ecmaVersion: 2020,
|
||||
sourceType: 'module',
|
||||
},
|
||||
plugins: ['@typescript-eslint'],
|
||||
root: true,
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
},
|
||||
rules: {
|
||||
// Customize rules here
|
||||
'no-console': 'off',
|
||||
'import/prefer-default-export': 'off',
|
||||
'class-methods-use-this': 'off',
|
||||
'no-param-reassign': 'off',
|
||||
'no-unused-vars': 'off',
|
||||
},
|
||||
};
|
||||
830
main.ts
830
main.ts
|
|
@ -3,500 +3,498 @@ import { DateTime, Duration, Interval } from 'luxon';
|
|||
import * as ProgressBar from 'progressbar.js';
|
||||
|
||||
interface ProgressBarSettings {
|
||||
defaultBarColor: string;
|
||||
defaultTrailColor: string;
|
||||
defaultBarType: string;
|
||||
defaultProgressType: string;
|
||||
defaultOnCompleteText: string;
|
||||
defaultInfoFormat: string;
|
||||
defaultUpdateInRealTime: boolean;
|
||||
defaultUpdateIntervalSeconds: number;
|
||||
defaultBarColor: string;
|
||||
defaultTrailColor: string;
|
||||
defaultBarType: string;
|
||||
defaultProgressType: string;
|
||||
defaultOnCompleteText: string;
|
||||
defaultInfoFormat: string;
|
||||
defaultUpdateInRealTime: boolean;
|
||||
defaultUpdateIntervalSeconds: number;
|
||||
}
|
||||
|
||||
const DEFAULT_SETTINGS: ProgressBarSettings = {
|
||||
defaultBarColor: '#4CAF50',
|
||||
defaultTrailColor: '#e0e0e0',
|
||||
defaultBarType: 'Line',
|
||||
defaultProgressType: 'forward',
|
||||
defaultOnCompleteText: '{title} is done!',
|
||||
defaultInfoFormat: '{percent}% - {remaining} remaining',
|
||||
defaultUpdateInRealTime: false,
|
||||
defaultUpdateIntervalSeconds: 1,
|
||||
}
|
||||
defaultBarColor: '#4CAF50',
|
||||
defaultTrailColor: '#e0e0e0',
|
||||
defaultBarType: 'Line',
|
||||
defaultProgressType: 'forward',
|
||||
defaultOnCompleteText: '{title} is done!',
|
||||
defaultInfoFormat: '{percent}% - {remaining} remaining',
|
||||
defaultUpdateInRealTime: false,
|
||||
defaultUpdateIntervalSeconds: 1,
|
||||
};
|
||||
|
||||
interface ProgressBarInstance {
|
||||
element: HTMLElement;
|
||||
bar: any;
|
||||
infoEl: HTMLElement;
|
||||
params: any;
|
||||
updateTimer: number | null;
|
||||
element: HTMLElement;
|
||||
bar: any;
|
||||
infoEl: HTMLElement;
|
||||
params: any;
|
||||
updateTimer: number | null;
|
||||
}
|
||||
|
||||
export default class ProgressBarPlugin extends Plugin {
|
||||
settings: ProgressBarSettings;
|
||||
progressBars: Map<string, ProgressBarInstance> = new Map();
|
||||
settings: ProgressBarSettings;
|
||||
|
||||
async onload() {
|
||||
await this.loadSettings();
|
||||
progressBars: Map<string, ProgressBarInstance> = new Map();
|
||||
|
||||
this.registerMarkdownCodeBlockProcessor('progressbar', (source, el, _ctx) => {
|
||||
const id = Math.random().toString(36).substring(2, 15);
|
||||
this.renderProgressBar(source, el, id);
|
||||
});
|
||||
async onload() {
|
||||
await this.loadSettings();
|
||||
|
||||
this.addSettingTab(new ProgressBarSettingTab(this.app, this));
|
||||
this.register(() => {
|
||||
this.cleanupAllProgressBars();
|
||||
});
|
||||
}
|
||||
this.registerMarkdownCodeBlockProcessor('progressbar', (source, el) => {
|
||||
const id = Math.random().toString(36).substring(2, 15);
|
||||
this.renderProgressBar(source, el, id);
|
||||
});
|
||||
|
||||
onunload() {
|
||||
this.cleanupAllProgressBars();
|
||||
}
|
||||
this.addSettingTab(new ProgressBarSettingTab(this.app, this));
|
||||
this.register(() => {
|
||||
this.cleanupAllProgressBars();
|
||||
});
|
||||
}
|
||||
|
||||
async loadSettings() {
|
||||
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
|
||||
}
|
||||
onunload() {
|
||||
this.cleanupAllProgressBars();
|
||||
}
|
||||
|
||||
async saveSettings() {
|
||||
await this.saveData(this.settings);
|
||||
this.refreshAllProgressBars();
|
||||
}
|
||||
async loadSettings() {
|
||||
this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
|
||||
}
|
||||
|
||||
cleanupProgressBar(id: string) {
|
||||
const progressBar = this.progressBars.get(id);
|
||||
if (progressBar && progressBar.updateTimer) {
|
||||
window.clearTimeout(progressBar.updateTimer);
|
||||
this.progressBars.delete(id);
|
||||
}
|
||||
}
|
||||
async saveSettings() {
|
||||
await this.saveData(this.settings);
|
||||
this.refreshAllProgressBars();
|
||||
}
|
||||
|
||||
cleanupAllProgressBars() {
|
||||
this.progressBars.forEach((data) => {
|
||||
if (data.updateTimer) {
|
||||
window.clearTimeout(data.updateTimer);
|
||||
}
|
||||
});
|
||||
this.progressBars.clear();
|
||||
}
|
||||
cleanupProgressBar(id: string) {
|
||||
const progressBar = this.progressBars.get(id);
|
||||
if (progressBar && progressBar.updateTimer) {
|
||||
window.clearTimeout(progressBar.updateTimer);
|
||||
this.progressBars.delete(id);
|
||||
}
|
||||
}
|
||||
|
||||
refreshAllProgressBars() {
|
||||
this.progressBars.forEach((data, id) => {
|
||||
if (data.updateTimer) {
|
||||
window.clearTimeout(data.updateTimer);
|
||||
data.updateTimer = null;
|
||||
}
|
||||
cleanupAllProgressBars() {
|
||||
this.progressBars.forEach((data) => {
|
||||
if (data.updateTimer) {
|
||||
window.clearTimeout(data.updateTimer);
|
||||
}
|
||||
});
|
||||
this.progressBars.clear();
|
||||
}
|
||||
|
||||
this.renderProgressBar(data.params, data.element, id);
|
||||
});
|
||||
}
|
||||
refreshAllProgressBars() {
|
||||
this.progressBars.forEach((data, id) => {
|
||||
if (data.updateTimer) {
|
||||
window.clearTimeout(data.updateTimer);
|
||||
data.updateTimer = null;
|
||||
}
|
||||
|
||||
renderProgressBar(source: string, el: HTMLElement, id: string) {
|
||||
try {
|
||||
this.renderProgressBar(data.params, data.element, id);
|
||||
});
|
||||
}
|
||||
|
||||
renderProgressBar(source: string, el: HTMLElement, id: string) {
|
||||
try {
|
||||
this.cleanupProgressBar(id);
|
||||
|
||||
const params = this.parseProgressBarParams(source);
|
||||
const params = this.parseProgressBarParams(source);
|
||||
|
||||
|
||||
el.empty();
|
||||
const containerEl = el.createDiv({ cls: 'countdown-to-container' });
|
||||
el.empty();
|
||||
const containerEl = el.createDiv({ cls: 'countdown-to-container' });
|
||||
|
||||
const startDate = DateTime.fromISO(params.startDate);
|
||||
const endDate = DateTime.fromISO(params.endDate);
|
||||
const startDate = DateTime.fromISO(params.startDate);
|
||||
const endDate = DateTime.fromISO(params.endDate);
|
||||
|
||||
if (!startDate.isValid) {
|
||||
containerEl.setText('Invalid start date format. ' +
|
||||
'Please use ISO + time format (YYYY-MM-DDTHH:MM:SS).');
|
||||
return;
|
||||
}
|
||||
if (!startDate.isValid) {
|
||||
containerEl.setText('Invalid start date format. ' +
|
||||
'Please use ISO + time format (YYYY-MM-DDTHH:MM:SS).');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!endDate.isValid) {
|
||||
containerEl.setText('Invalid end date format. ' +
|
||||
'Please use ISO + time format (YYYY-MM-DDTHH:MM:SS).');
|
||||
return;
|
||||
}
|
||||
if (!endDate.isValid) {
|
||||
containerEl.setText('Invalid end date format. ' +
|
||||
'Please use ISO + time format (YYYY-MM-DDTHH:MM:SS).');
|
||||
return;
|
||||
}
|
||||
|
||||
if (endDate < startDate) {
|
||||
containerEl.setText('End date must be after start date.');
|
||||
return;
|
||||
}
|
||||
if (endDate < startDate) {
|
||||
containerEl.setText('End date must be after start date.');
|
||||
return;
|
||||
}
|
||||
|
||||
const progressBarEl = containerEl.createDiv({ cls: 'progress-bar-element' });
|
||||
const barType = params.type || this.settings.defaultBarType;
|
||||
progressBarEl.addClass(`progress-bar-${barType.toLowerCase()}`);
|
||||
const progressBarEl = containerEl.createDiv({ cls: 'progress-bar-element' });
|
||||
const barType = params.type || this.settings.defaultBarType;
|
||||
progressBarEl.addClass(`progress-bar-${barType.toLowerCase()}`);
|
||||
|
||||
const infoEl = containerEl.createDiv({ cls: 'progress-bar-info' });
|
||||
const infoEl = containerEl.createDiv({ cls: 'progress-bar-info' });
|
||||
|
||||
let bar;
|
||||
const barColor = params.color || this.settings.defaultBarColor;
|
||||
const trailColor = params.trailColor || this.settings.defaultTrailColor;
|
||||
const commonOptions = {
|
||||
strokeWidth: 4,
|
||||
color: barColor,
|
||||
trailColor: trailColor,
|
||||
trailWidth: 1,
|
||||
};
|
||||
let bar;
|
||||
const barColor = params.color || this.settings.defaultBarColor;
|
||||
const trailColor = params.trailColor || this.settings.defaultTrailColor;
|
||||
const commonOptions = {
|
||||
strokeWidth: 4,
|
||||
color: barColor,
|
||||
trailColor: trailColor,
|
||||
trailWidth: 1,
|
||||
};
|
||||
|
||||
switch (barType.toLowerCase()) {
|
||||
case 'circle':
|
||||
bar = new ProgressBar.Circle(progressBarEl, {
|
||||
...commonOptions,
|
||||
svgStyle: {width: '100%', height: '100%'},
|
||||
});
|
||||
break;
|
||||
case 'semicircle':
|
||||
bar = new ProgressBar.SemiCircle(progressBarEl, {
|
||||
...commonOptions,
|
||||
svgStyle: {width: '100%', height: '100%'},
|
||||
});
|
||||
break;
|
||||
case 'square':
|
||||
bar = new ProgressBar.Square(progressBarEl, {
|
||||
...commonOptions,
|
||||
svgStyle: {width: '100%', height: '100%'},
|
||||
});
|
||||
break;
|
||||
case 'line':
|
||||
default:
|
||||
bar = new ProgressBar.Line(progressBarEl, {
|
||||
...commonOptions,
|
||||
svgStyle: {width: '100%', height: '100%'},
|
||||
});
|
||||
break;
|
||||
}
|
||||
switch (barType.toLowerCase()) {
|
||||
case 'circle':
|
||||
bar = new ProgressBar.Circle(progressBarEl, {
|
||||
...commonOptions,
|
||||
svgStyle: { width: '100%', height: '100%' },
|
||||
});
|
||||
break;
|
||||
case 'semicircle':
|
||||
bar = new ProgressBar.SemiCircle(progressBarEl, {
|
||||
...commonOptions,
|
||||
svgStyle: { width: '100%', height: '100%' },
|
||||
});
|
||||
break;
|
||||
case 'square':
|
||||
bar = new ProgressBar.Square(progressBarEl, {
|
||||
...commonOptions,
|
||||
svgStyle: { width: '100%', height: '100%' },
|
||||
});
|
||||
break;
|
||||
case 'line':
|
||||
default:
|
||||
bar = new ProgressBar.Line(progressBarEl, {
|
||||
...commonOptions,
|
||||
svgStyle: { width: '100%', height: '100%' },
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
if (params.title) {
|
||||
const titleEl = containerEl.createDiv({ cls: 'progress-bar-title' });
|
||||
titleEl.setText(params.title);
|
||||
containerEl.prepend(titleEl);
|
||||
}
|
||||
if (params.title) {
|
||||
const titleEl = containerEl.createDiv({ cls: 'progress-bar-title' });
|
||||
titleEl.setText(params.title);
|
||||
containerEl.prepend(titleEl);
|
||||
}
|
||||
|
||||
this.progressBars.set(id, {
|
||||
element: el,
|
||||
bar: bar,
|
||||
infoEl: infoEl,
|
||||
params: source,
|
||||
updateTimer: null
|
||||
});
|
||||
this.progressBars.set(id, {
|
||||
element: el,
|
||||
bar: bar,
|
||||
infoEl: infoEl,
|
||||
params: source,
|
||||
updateTimer: null,
|
||||
});
|
||||
|
||||
this.updateProgressBar(id, startDate, endDate);
|
||||
this.updateProgressBar(id, startDate, endDate);
|
||||
|
||||
const updateInRealTime = params.updateInRealTime !== undefined ?
|
||||
params.updateInRealTime === 'true' :
|
||||
this.settings.defaultUpdateInRealTime;
|
||||
const updateInRealTime = params.updateInRealTime !== undefined ?
|
||||
params.updateInRealTime === 'true' :
|
||||
this.settings.defaultUpdateInRealTime;
|
||||
|
||||
if (updateInRealTime) {
|
||||
const updateInterval = params.updateInterval ?
|
||||
parseInt(params.updateInterval, 10) :
|
||||
this.settings.defaultUpdateIntervalSeconds;
|
||||
if (updateInRealTime) {
|
||||
const updateInterval = params.updateInterval ?
|
||||
parseInt(params.updateInterval, 10) :
|
||||
this.settings.defaultUpdateIntervalSeconds;
|
||||
|
||||
const timer = window.setTimeout(() => {
|
||||
this.scheduleUpdate(id, startDate, endDate, updateInterval);
|
||||
}, updateInterval * 1000);
|
||||
const timer = window.setTimeout(() => {
|
||||
this.scheduleUpdate(id, startDate, endDate, updateInterval);
|
||||
}, updateInterval * 1000);
|
||||
|
||||
this.progressBars.get(id)!.updateTimer = timer;
|
||||
}
|
||||
this.progressBars.get(id)!.updateTimer = timer;
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
el.setText('Error rendering progress bar: ' + error.message);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
el.setText('Error rendering progress bar: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
scheduleUpdate(id: string, startDate: DateTime, endDate: DateTime, defaultUpdateIntervalSeconds: number) {
|
||||
const progressBar = this.progressBars.get(id);
|
||||
if (!progressBar) return;
|
||||
scheduleUpdate(id: string, startDate: DateTime, endDate: DateTime, defaultUpdateIntervalSeconds: number) {
|
||||
const progressBar = this.progressBars.get(id);
|
||||
if (!progressBar) return;
|
||||
|
||||
this.updateProgressBar(id, startDate, endDate);
|
||||
this.updateProgressBar(id, startDate, endDate);
|
||||
|
||||
const timer = window.setTimeout(() => {
|
||||
this.scheduleUpdate(id, startDate, endDate, defaultUpdateIntervalSeconds);
|
||||
}, defaultUpdateIntervalSeconds * 1000);
|
||||
|
||||
progressBar.updateTimer = timer;
|
||||
}
|
||||
}
|
||||
|
||||
updateProgressBar(id: string, startDate: DateTime, endDate: DateTime) {
|
||||
const progressBar = this.progressBars.get(id);
|
||||
if (!progressBar) return;
|
||||
updateProgressBar(id: string, startDate: DateTime, endDate: DateTime) {
|
||||
const progressBar = this.progressBars.get(id);
|
||||
if (!progressBar) return;
|
||||
|
||||
const params = this.parseProgressBarParams(progressBar.params);
|
||||
const currentDate = DateTime.now();
|
||||
const params = this.parseProgressBarParams(progressBar.params);
|
||||
const currentDate = DateTime.now();
|
||||
|
||||
const totalInterval = Interval.fromDateTimes(startDate, endDate);
|
||||
const elapsedInterval = Interval.fromDateTimes(startDate, currentDate);
|
||||
const totalInterval = Interval.fromDateTimes(startDate, endDate);
|
||||
const elapsedInterval = Interval.fromDateTimes(startDate, currentDate);
|
||||
|
||||
const totalMillis = totalInterval.length();
|
||||
const elapsedMillis = Math.min(elapsedInterval.length(), totalMillis);
|
||||
const totalMillis = totalInterval.length();
|
||||
const elapsedMillis = Math.min(elapsedInterval.length(), totalMillis);
|
||||
|
||||
let progress = Math.min(Math.max(elapsedMillis / totalMillis, 0), 1);
|
||||
const progressType = params.progressType || this.settings.defaultProgressType;
|
||||
const onCompleteText = params.onCompleteText || this.settings.defaultOnCompleteText;
|
||||
const infoFormat = params.infoFormat || this.settings.defaultInfoFormat;
|
||||
const progress = Math.min(Math.max(elapsedMillis / totalMillis, 0), 1);
|
||||
const progressType = params.progressType || this.settings.defaultProgressType;
|
||||
const onCompleteText = params.onCompleteText || this.settings.defaultOnCompleteText;
|
||||
const infoFormat = params.infoFormat || this.settings.defaultInfoFormat;
|
||||
|
||||
if (progressType.toLowerCase() === 'countdown') {
|
||||
progressBar.bar.set(1.0 - progress);
|
||||
} else {
|
||||
progressBar.bar.set(Math.floor(progress * 100) / 100);
|
||||
}
|
||||
if (progressType.toLowerCase() === 'countdown') {
|
||||
progressBar.bar.set(1.0 - progress);
|
||||
} else {
|
||||
progressBar.bar.set(Math.floor(progress * 100) / 100);
|
||||
}
|
||||
|
||||
if (progress >= 1) {
|
||||
progressBar.infoEl.setText(
|
||||
onCompleteText.replace(/{title}/g, params.title || '')
|
||||
);
|
||||
} else {
|
||||
let infoText = infoFormat;
|
||||
if (progress >= 1) {
|
||||
progressBar.infoEl.setText(
|
||||
onCompleteText.replace(/{title}/g, params.title || ''),
|
||||
);
|
||||
} else {
|
||||
let infoText = infoFormat;
|
||||
|
||||
const remainingInterval = Interval.fromDateTimes(currentDate, endDate);
|
||||
const remainingDuration = remainingInterval.toDuration(['days', 'hours', 'minutes', 'seconds']);
|
||||
const remainingInterval = Interval.fromDateTimes(currentDate, endDate);
|
||||
const remainingDuration = remainingInterval.toDuration(['days', 'hours', 'minutes', 'seconds']);
|
||||
|
||||
const elapsedDuration = elapsedInterval.toDuration(['days', 'hours', 'minutes', 'seconds']);
|
||||
const elapsedDuration = elapsedInterval.toDuration(['days', 'hours', 'minutes', 'seconds']);
|
||||
|
||||
const totalDuration = totalInterval.toDuration(['days', 'hours', 'minutes', 'seconds']);
|
||||
infoText = infoText
|
||||
.replace(/{start:(.*?)}/g, (_match: string, format: string) => startDate.toFormat(format))
|
||||
.replace(/{end:(.*?)}/g, (_match: string, format: string) => endDate.toFormat(format))
|
||||
.replace(/{current:(.*?)}/g, (_match: string, format: string) => currentDate.toFormat(format))
|
||||
.replace(/{remaining:(.*?)}/g, (_match: string, format: string) => remainingDuration.toFormat(format))
|
||||
.replace(/{elapsed:(.*?)}/g, (_match: string, format: string) => elapsedDuration.toFormat(format))
|
||||
.replace(/{total:(.*?)}/g, (_match: string, format: string) => totalDuration.toFormat(format));
|
||||
const totalDuration = totalInterval.toDuration(['days', 'hours', 'minutes', 'seconds']);
|
||||
infoText = infoText
|
||||
.replace(/{start:(.*?)}/g, (_match: string, format: string) => startDate.toFormat(format))
|
||||
.replace(/{end:(.*?)}/g, (_match: string, format: string) => endDate.toFormat(format))
|
||||
.replace(/{current:(.*?)}/g, (_match: string, format: string) => currentDate.toFormat(format))
|
||||
.replace(/{remaining:(.*?)}/g, (_match: string, format: string) => remainingDuration.toFormat(format))
|
||||
.replace(/{elapsed:(.*?)}/g, (_match: string, format: string) => elapsedDuration.toFormat(format))
|
||||
.replace(/{total:(.*?)}/g, (_match: string, format: string) => totalDuration.toFormat(format));
|
||||
|
||||
infoText = infoText
|
||||
.replace(/{percent}/g, Math.floor(progress * 100).toString())
|
||||
.replace(/{start}/g, startDate.toISODate() || '')
|
||||
.replace(/{end}/g, endDate.toISODate() || '')
|
||||
.replace(/{current}/g, currentDate.toISODate() || '')
|
||||
.replace(/{remaining}/g, this.formatDuration(remainingDuration))
|
||||
.replace(/{elapsed}/g, this.formatDuration(elapsedDuration))
|
||||
.replace(/{total}/g, this.formatDuration(totalDuration));
|
||||
infoText = infoText
|
||||
.replace(/{percent}/g, Math.floor(progress * 100).toString())
|
||||
.replace(/{start}/g, startDate.toISODate() || '')
|
||||
.replace(/{end}/g, endDate.toISODate() || '')
|
||||
.replace(/{current}/g, currentDate.toISODate() || '')
|
||||
.replace(/{remaining}/g, this.formatDuration(remainingDuration))
|
||||
.replace(/{elapsed}/g, this.formatDuration(elapsedDuration))
|
||||
.replace(/{total}/g, this.formatDuration(totalDuration));
|
||||
|
||||
progressBar.infoEl.setText(infoText);
|
||||
}
|
||||
}
|
||||
progressBar.infoEl.setText(infoText);
|
||||
}
|
||||
}
|
||||
|
||||
parseProgressBarParams(source: string) {
|
||||
const params: any = {};
|
||||
const lines = source.trim().split('\n');
|
||||
parseProgressBarParams(source: string) {
|
||||
const params: any = {};
|
||||
const lines = source.trim().split('\n');
|
||||
|
||||
lines.forEach(line => {
|
||||
const colonIndex = line.indexOf(':');
|
||||
if (colonIndex !== -1) {
|
||||
const key = line.substring(0, colonIndex).trim();
|
||||
const value = line.substring(colonIndex + 1).trim();
|
||||
if (key && value) {
|
||||
params[key] = value;
|
||||
}
|
||||
}
|
||||
});
|
||||
lines.forEach(line => {
|
||||
const colonIndex = line.indexOf(':');
|
||||
if (colonIndex !== -1) {
|
||||
const key = line.substring(0, colonIndex).trim();
|
||||
const value = line.substring(colonIndex + 1).trim();
|
||||
if (key && value) {
|
||||
params[key] = value;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (!params.startDate) {
|
||||
throw new Error('Start date is required');
|
||||
}
|
||||
if (!params.startDate) {
|
||||
throw new Error('Start date is required');
|
||||
}
|
||||
|
||||
if (DateTime.fromISO(params.startDate) > DateTime.now()) {
|
||||
throw new Error('Start date must be now or in the past');
|
||||
}
|
||||
if (DateTime.fromISO(params.startDate) > DateTime.now()) {
|
||||
throw new Error('Start date must be now or in the past');
|
||||
}
|
||||
|
||||
if (!params.endDate) {
|
||||
throw new Error('End date is required');
|
||||
}
|
||||
if (!params.endDate) {
|
||||
throw new Error('End date is required');
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
return params;
|
||||
}
|
||||
|
||||
formatDuration(duration: Duration): string {
|
||||
const days = Math.ceil(duration.as('days'));
|
||||
const hours = Math.ceil(duration.as('hours') % 24);
|
||||
const minutes = Math.ceil(duration.as('minutes') % 60);
|
||||
const seconds = Math.ceil(duration.as('seconds') % 60);
|
||||
formatDuration(duration: Duration): string {
|
||||
const days = Math.ceil(duration.as('days'));
|
||||
const hours = Math.ceil(duration.as('hours') % 24);
|
||||
const minutes = Math.ceil(duration.as('minutes') % 60);
|
||||
const seconds = Math.ceil(duration.as('seconds') % 60);
|
||||
|
||||
if (days > 0) {
|
||||
return `${days} day${days > 1 ? 's' : ''}`;
|
||||
} else if (hours > 0) {
|
||||
return `${hours} hour${hours > 1 ? 's' : ''}`;
|
||||
} else if (minutes > 0) {
|
||||
return `${minutes} minute${minutes > 1 ? 's' : ''}`;
|
||||
} else {
|
||||
return `${seconds} second${seconds > 1 ? 's' : ''}`;
|
||||
}
|
||||
}
|
||||
if (days > 0) {
|
||||
return `${days} day${days > 1 ? 's' : ''}`;
|
||||
} else if (hours > 0) {
|
||||
return `${hours} hour${hours > 1 ? 's' : ''}`;
|
||||
} else if (minutes > 0) {
|
||||
return `${minutes} minute${minutes > 1 ? 's' : ''}`;
|
||||
} else {
|
||||
return `${seconds} second${seconds > 1 ? 's' : ''}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class LuxonFormatHelpModal extends Modal {
|
||||
onOpen() {
|
||||
const { contentEl } = this;
|
||||
|
||||
contentEl.createEl('h2', { text: 'Info Format Help' });
|
||||
|
||||
contentEl.createEl('h3', { text: 'Placeholders' });
|
||||
const placeholdersList = contentEl.createEl('ul');
|
||||
placeholdersList.createEl('li', { text: '{percent} - Percentage of completion' });
|
||||
placeholdersList.createEl('li', { text: '{start} - Start date (ISO format)' });
|
||||
placeholdersList.createEl('li', { text: '{end} - End date (ISO format)' });
|
||||
placeholdersList.createEl('li', { text: '{current} - Current date (ISO format)' });
|
||||
placeholdersList.createEl('li', { text: '{remaining} - Remaining time' });
|
||||
placeholdersList.createEl('li', { text: '{elapsed} - Elapsed time' });
|
||||
placeholdersList.createEl('li', { text: '{total} - Total duration' });
|
||||
|
||||
contentEl.createEl('h3', { text: 'Formatting' });
|
||||
contentEl.createEl('p', { text: 'You can use Luxon formatting for dates:' });
|
||||
const luxonList = contentEl.createEl('ul');
|
||||
luxonList.createEl('li', { text: '{start(format)} - Format start date' });
|
||||
luxonList.createEl('li', { text: '{end(format)} - Format end date' });
|
||||
luxonList.createEl('li', { text: '{current(format)} - Format current date' });
|
||||
contentEl.createEl('a', { href: 'https://moment.github.io/luxon/#/formatting?id=table-of-tokens', text: 'Luxon Formatting Reference' });
|
||||
|
||||
contentEl.createEl('p', { text: 'For durations the only tokens that are supported are for days, hours, minutes and seconds:' });
|
||||
luxonList.createEl('li', { text: '{remaining(format)} - Format remaining time' });
|
||||
luxonList.createEl('li', { text: '{elapsed(format)} - Format elapsed time' });
|
||||
luxonList.createEl('li', { text: '{total(format)} - Format total duration' });
|
||||
|
||||
contentEl.createEl('h3', { text: 'Examples' });
|
||||
const examplesList = contentEl.createEl('ul');
|
||||
examplesList.createEl('li', { text: '{percent}% complete - {remaining} left' });
|
||||
examplesList.createEl('li', { text: 'Started on {start(LLL d)}, ends on {end(LLL d, yyyy)}' });
|
||||
examplesList.createEl('li', { text: '{elapsed} elapsed out of {total} total' });
|
||||
|
||||
contentEl.createEl('h3', { text: 'Common Luxon Formats' });
|
||||
const formatsTable = contentEl.createEl('table');
|
||||
const headerRow = formatsTable.createEl('tr');
|
||||
headerRow.createEl('th', { text: 'Format' });
|
||||
headerRow.createEl('th', { text: 'Output' });
|
||||
|
||||
const addFormatRow = (format: string, output: string) => {
|
||||
const row = formatsTable.createEl('tr');
|
||||
row.createEl('td', { text: format });
|
||||
row.createEl('td', { text: output });
|
||||
};
|
||||
|
||||
addFormatRow('yyyy-MM-dd', '2025-04-11');
|
||||
addFormatRow('LLL d, yyyy', 'Apr 11, 2025');
|
||||
addFormatRow('EEEE, MMMM d, yyyy', 'Thursday, April 11, 2025');
|
||||
addFormatRow('d MMMM yyyy', '11 April 2025');
|
||||
}
|
||||
|
||||
onClose() {
|
||||
const { contentEl } = this;
|
||||
contentEl.empty();
|
||||
}
|
||||
}
|
||||
|
||||
class ProgressBarSettingTab extends PluginSettingTab {
|
||||
plugin: ProgressBarPlugin;
|
||||
plugin: ProgressBarPlugin;
|
||||
|
||||
constructor(app: App, plugin: ProgressBarPlugin) {
|
||||
super(app, plugin);
|
||||
this.plugin = plugin;
|
||||
}
|
||||
constructor(app: App, plugin: ProgressBarPlugin) {
|
||||
super(app, plugin);
|
||||
this.plugin = plugin;
|
||||
}
|
||||
|
||||
display(): void {
|
||||
const {containerEl} = this;
|
||||
containerEl.empty();
|
||||
containerEl.createEl('h2', {text: 'Countdown To Settings'});
|
||||
display(): void {
|
||||
const { containerEl } = this;
|
||||
containerEl.empty();
|
||||
containerEl.createEl('h2', { text: 'Countdown To Settings' });
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Default bar type')
|
||||
.setDesc('Default type of progress bar to display')
|
||||
.addDropdown(dropdown => dropdown
|
||||
.addOption('Line', 'Line')
|
||||
.addOption('Circle', 'Circle')
|
||||
.addOption('SemiCircle', 'Semi Circle')
|
||||
.addOption('Square', 'Square')
|
||||
.setValue(this.plugin.settings.defaultBarType)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultBarType = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
new Setting(containerEl)
|
||||
.setName('Default bar type')
|
||||
.setDesc('Default type of progress bar to display')
|
||||
.addDropdown(dropdown => dropdown
|
||||
.addOption('Line', 'Line')
|
||||
.addOption('Circle', 'Circle')
|
||||
.addOption('SemiCircle', 'Semi Circle')
|
||||
.addOption('Square', 'Square')
|
||||
.setValue(this.plugin.settings.defaultBarType)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultBarType = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Default progress type')
|
||||
.setDesc('Count as progress or as a countdown')
|
||||
.addDropdown(dropdown => dropdown
|
||||
.addOption('Progress', 'Progress')
|
||||
.addOption('Countdown', 'Countdown')
|
||||
.setValue(this.plugin.settings.defaultProgressType)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultProgressType = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
new Setting(containerEl)
|
||||
.setName('Default progress type')
|
||||
.setDesc('Count as progress or as a countdown')
|
||||
.addDropdown(dropdown => dropdown
|
||||
.addOption('Progress', 'Progress')
|
||||
.addOption('Countdown', 'Countdown')
|
||||
.setValue(this.plugin.settings.defaultProgressType)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultProgressType = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Update in real-time')
|
||||
.setDesc('Update progress bars according to the update interval')
|
||||
.addToggle(toggle => toggle
|
||||
.setValue(this.plugin.settings.defaultUpdateInRealTime)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultUpdateInRealTime = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
new Setting(containerEl)
|
||||
.setName('Update in real-time')
|
||||
.setDesc('Update progress bars according to the update interval')
|
||||
.addToggle(toggle => toggle
|
||||
.setValue(this.plugin.settings.defaultUpdateInRealTime)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultUpdateInRealTime = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Update interval')
|
||||
.setDesc('How often to update the progress bars (in seconds). This will affect performance.')
|
||||
.addSlider(slider => slider
|
||||
.setLimits(0.5, 20, 0.5)
|
||||
.setValue(this.plugin.settings.defaultUpdateIntervalSeconds)
|
||||
.setDynamicTooltip()
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultUpdateIntervalSeconds = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
new Setting(containerEl)
|
||||
.setName('Update interval')
|
||||
.setDesc('How often to update the progress bars (in seconds). This will affect performance.')
|
||||
.addSlider(slider => slider
|
||||
.setLimits(0.5, 20, 0.5)
|
||||
.setValue(this.plugin.settings.defaultUpdateIntervalSeconds)
|
||||
.setDynamicTooltip()
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultUpdateIntervalSeconds = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Default info format')
|
||||
.setDesc('Default format for the info text. Uses Luxon formatting (See format help button for a quick reference).')
|
||||
.addTextArea(text => text
|
||||
.setPlaceholder('{percent}% - {remaining} remaining')
|
||||
.setValue(this.plugin.settings.defaultInfoFormat)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultInfoFormat = value;
|
||||
await this.plugin.saveSettings();
|
||||
}))
|
||||
.addExtraButton(button => {
|
||||
button
|
||||
.setIcon('help')
|
||||
.setTooltip('Show format help')
|
||||
.onClick(() => {
|
||||
new LuxonFormatHelpModal(this.plugin.app).open();
|
||||
});
|
||||
});
|
||||
new Setting(containerEl)
|
||||
.setName('Default info format')
|
||||
.setDesc('Default format for the info text. Uses Luxon formatting (See format help button for a quick reference).')
|
||||
.addTextArea(text => text
|
||||
.setPlaceholder('{percent}% - {remaining} remaining')
|
||||
.setValue(this.plugin.settings.defaultInfoFormat)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultInfoFormat = value;
|
||||
await this.plugin.saveSettings();
|
||||
}))
|
||||
.addExtraButton(button => {
|
||||
button
|
||||
.setIcon('help')
|
||||
.setTooltip('Show format help')
|
||||
.onClick(() => {
|
||||
new LuxonFormatHelpModal(this.plugin.app).open();
|
||||
});
|
||||
});
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Default bar color')
|
||||
.setDesc('Default color for the progress bar')
|
||||
.addText(text => text
|
||||
.setPlaceholder('#4CAF50')
|
||||
.setValue(this.plugin.settings.defaultBarColor)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultBarColor = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
new Setting(containerEl)
|
||||
.setName('Default bar color')
|
||||
.setDesc('Default color for the progress bar')
|
||||
.addText(text => text
|
||||
.setPlaceholder('#4CAF50')
|
||||
.setValue(this.plugin.settings.defaultBarColor)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultBarColor = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Default on complete text')
|
||||
.setDesc('Default text to display when the progress is complete. Use {title} to display the title of the progress bar.')
|
||||
.addText(text => text
|
||||
.setPlaceholder('{title} is done!')
|
||||
.setValue(this.plugin.settings.defaultOnCompleteText)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultOnCompleteText = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
new Setting(containerEl)
|
||||
.setName('Default on complete text')
|
||||
.setDesc('Default text to display when the progress is complete. Use {title} to display the title of the progress bar.')
|
||||
.addText(text => text
|
||||
.setPlaceholder('{title} is done!')
|
||||
.setValue(this.plugin.settings.defaultOnCompleteText)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultOnCompleteText = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
|
||||
new Setting(containerEl)
|
||||
.setName('Default trail color')
|
||||
.setDesc('Default trail color for the progress bar (the incomplete part)')
|
||||
.addText(text => text
|
||||
.setPlaceholder('#e0e0e0')
|
||||
.setValue(this.plugin.settings.defaultTrailColor)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultTrailColor = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
containerEl.createEl('i', {text: 'All settings can be overridden in the markdown code block. If stuck please refer to the '});
|
||||
containerEl.createEl('a', {href: 'https://github.com/guicattani/countdown-to?tab=readme-ov-file#how-to-use', text: 'how to use guide'});
|
||||
}
|
||||
new Setting(containerEl)
|
||||
.setName('Default trail color')
|
||||
.setDesc('Default trail color for the progress bar (the incomplete part)')
|
||||
.addText(text => text
|
||||
.setPlaceholder('#e0e0e0')
|
||||
.setValue(this.plugin.settings.defaultTrailColor)
|
||||
.onChange(async (value) => {
|
||||
this.plugin.settings.defaultTrailColor = value;
|
||||
await this.plugin.saveSettings();
|
||||
}));
|
||||
containerEl.createEl('i', { text: 'All settings can be overridden in the markdown code block. If stuck please refer to the ' });
|
||||
containerEl.createEl('a', { href: 'https://github.com/guicattani/countdown-to?tab=readme-ov-file#how-to-use', text: 'how to use guide' });
|
||||
}
|
||||
}
|
||||
|
||||
class LuxonFormatHelpModal extends Modal {
|
||||
constructor(app: App) {
|
||||
super(app);
|
||||
}
|
||||
|
||||
onOpen() {
|
||||
const {contentEl} = this;
|
||||
|
||||
contentEl.createEl('h2', {text: 'Info Format Help'});
|
||||
|
||||
contentEl.createEl('h3', {text: 'Placeholders'});
|
||||
const placeholdersList = contentEl.createEl('ul');
|
||||
placeholdersList.createEl('li', {text: '{percent} - Percentage of completion'});
|
||||
placeholdersList.createEl('li', {text: '{start} - Start date (ISO format)'});
|
||||
placeholdersList.createEl('li', {text: '{end} - End date (ISO format)'});
|
||||
placeholdersList.createEl('li', {text: '{current} - Current date (ISO format)'});
|
||||
placeholdersList.createEl('li', {text: '{remaining} - Remaining time'});
|
||||
placeholdersList.createEl('li', {text: '{elapsed} - Elapsed time'});
|
||||
placeholdersList.createEl('li', {text: '{total} - Total duration'});
|
||||
|
||||
contentEl.createEl('h3', {text: 'Formatting'});
|
||||
contentEl.createEl('p', {text: 'You can use Luxon formatting for dates:'});
|
||||
const luxonList = contentEl.createEl('ul');
|
||||
luxonList.createEl('li', {text: '{start(format)} - Format start date'});
|
||||
luxonList.createEl('li', {text: '{end(format)} - Format end date'});
|
||||
luxonList.createEl('li', {text: '{current(format)} - Format current date'});
|
||||
contentEl.createEl('a', {href: 'https://moment.github.io/luxon/#/formatting?id=table-of-tokens', text: 'Luxon Formatting Reference'});
|
||||
|
||||
contentEl.createEl('p', {text: 'For durations the only tokens that are supported are for days, hours, minutes and seconds:'});
|
||||
luxonList.createEl('li', {text: '{remaining(format)} - Format remaining time'});
|
||||
luxonList.createEl('li', {text: '{elapsed(format)} - Format elapsed time'});
|
||||
luxonList.createEl('li', {text: '{total(format)} - Format total duration'});
|
||||
|
||||
contentEl.createEl('h3', {text: 'Examples'});
|
||||
const examplesList = contentEl.createEl('ul');
|
||||
examplesList.createEl('li', {text: '{percent}% complete - {remaining} left'});
|
||||
examplesList.createEl('li', {text: 'Started on {start(LLL d)}, ends on {end(LLL d, yyyy)}'});
|
||||
examplesList.createEl('li', {text: '{elapsed} elapsed out of {total} total'});
|
||||
|
||||
contentEl.createEl('h3', {text: 'Common Luxon Formats'});
|
||||
const formatsTable = contentEl.createEl('table');
|
||||
const headerRow = formatsTable.createEl('tr');
|
||||
headerRow.createEl('th', {text: 'Format'});
|
||||
headerRow.createEl('th', {text: 'Output'});
|
||||
|
||||
const addFormatRow = (format: string, output: string) => {
|
||||
const row = formatsTable.createEl('tr');
|
||||
row.createEl('td', {text: format});
|
||||
row.createEl('td', {text: output});
|
||||
};
|
||||
|
||||
addFormatRow('yyyy-MM-dd', '2025-04-11');
|
||||
addFormatRow('LLL d, yyyy', 'Apr 11, 2025');
|
||||
addFormatRow('EEEE, MMMM d, yyyy', 'Thursday, April 11, 2025');
|
||||
addFormatRow('d MMMM yyyy', '11 April 2025');
|
||||
}
|
||||
|
||||
onClose() {
|
||||
const {contentEl} = this;
|
||||
contentEl.empty();
|
||||
}
|
||||
}
|
||||
2150
package-lock.json
generated
2150
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -20,10 +20,12 @@
|
|||
"@types/luxon": "^3.4.2",
|
||||
"@types/node": "^16.11.6",
|
||||
"@types/progressbar.js": "^1.1.7",
|
||||
"@typescript-eslint/eslint-plugin": "5.29.0",
|
||||
"@typescript-eslint/parser": "5.29.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.29.0",
|
||||
"@typescript-eslint/parser": "^5.29.0",
|
||||
"builtin-modules": "3.3.0",
|
||||
"esbuild": "0.17.3",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-config-airbnb-typescript": "^17.0.0",
|
||||
"obsidian": "latest",
|
||||
"tslib": "2.4.0",
|
||||
"typescript": "4.7.4"
|
||||
|
|
|
|||
Loading…
Reference in a new issue