Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-31 12:12:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

port calender to ts

Browse Source
This commit is contained in:
Jin 2025-02-28 14:41:30 +01:00
parent 06a439e95d
commit a99c86ea9f
1 changed files with 52 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/public/app/widgets/buttons/calendar.js → src/public/app/widgets/buttons/calendar.ts
View File

@ -8,6 +8,7 @@ import RightDropdownButtonWidget from "./right_dropdown_button.js";
import toastService from "../../services/toast.js"; import toastService from "../../services/toast.js";
import options from "../../services/options.js"; import options from "../../services/options.js";
import { Dropdown } from "bootstrap"; import { Dropdown } from "bootstrap";
import type { EventData } from "../../components/app_context.js";
const MONTHS = [ const MONTHS = [
t("calendar.january"), t("calendar.january"),
@ -37,7 +38,7 @@ const DROPDOWN_TPL = `
<button class="calendar-btn tn-tool-button bx bx-chevron-left" data-calendar-toggle="previous"></button> <button class="calendar-btn tn-tool-button bx bx-chevron-left" data-calendar-toggle="previous"></button>
<button class="btn dropdown-toggle select-button" type="button" <button class="btn dropdown-toggle select-button" type="button"
data-bs-toggle="dropdown" data-bs-auto-close="true" data-bs-toggle="dropdown" data-bs-auto-close="outside"
aria-expanded="false" aria-expanded="false"
data-calendar-input="month"></button> data-calendar-input="month"></button>
<ul class="dropdown-menu" data-calendar-input="month-list"> <ul class="dropdown-menu" data-calendar-input="month-list">
@ -66,8 +67,26 @@ const DROPDOWN_TPL = `
const DAYS_OF_WEEK = [t("calendar.sun"), t("calendar.mon"), t("calendar.tue"), t("calendar.wed"), t("calendar.thu"), t("calendar.fri"), t("calendar.sat")]; const DAYS_OF_WEEK = [t("calendar.sun"), t("calendar.mon"), t("calendar.tue"), t("calendar.wed"), t("calendar.thu"), t("calendar.fri"), t("calendar.sat")];
interface DateNotesForMonth {
[date: string]: string;
}
export default class CalendarWidget extends RightDropdownButtonWidget { export default class CalendarWidget extends RightDropdownButtonWidget {
constructor(title, icon) { private $month!: JQuery<HTMLElement>;
private $weekHeader!: JQuery<HTMLElement>;
private $monthSelect!: JQuery<HTMLElement>;
private $yearSelect!: JQuery<HTMLElement>;
private $next!: JQuery<HTMLElement>;
private $previous!: JQuery<HTMLElement>;
private $nextYear!: JQuery<HTMLElement>;
private $previousYear!: JQuery<HTMLElement>;
private monthDropdown!: Dropdown;
private firstDayOfWeek!: number;
private activeDate: Date | null = null;
private todaysDate!: Date;
private date!: Date;
constructor(title: string = "", icon: string = "") {
super(title, icon, DROPDOWN_TPL); super(title, icon, DROPDOWN_TPL);
} }
@ -85,11 +104,15 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
// Don't trigger dropdownShown() at widget level when the month selection dropdown is shown, since it would cause a redundant refresh. // Don't trigger dropdownShown() at widget level when the month selection dropdown is shown, since it would cause a redundant refresh.
e.stopPropagation(); e.stopPropagation();
}); });
this.monthDropdown = Dropdown.getOrCreateInstance(this.$monthSelect); this.monthDropdown = Dropdown.getOrCreateInstance(this.$monthSelect[0]);
this.$dropdownContent.find('[data-calendar-input="month-list"] button').on("click", (e) => { this.$dropdownContent.find('[data-calendar-input="month-list"] button').on("click", (e) => {
this.date.setMonth(e.target.dataset.value); const target = e.target as HTMLElement;
this.createMonth(); const value = target.dataset.value;
this.monthDropdown.hide(); if (value) {
this.date.setMonth(parseInt(value));
this.createMonth();
this.monthDropdown.hide();
}
}); });
this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]'); this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
this.$next.on("click", () => { this.$next.on("click", () => {
@ -97,7 +120,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
this.createMonth(); this.createMonth();
}); });
this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]'); this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');
this.$previous.on("click", (e) => { this.$previous.on("click", () => {
this.date.setMonth(this.date.getMonth() - 1); this.date.setMonth(this.date.getMonth() - 1);
this.createMonth(); this.createMonth();
}); });
@ -105,7 +128,8 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
// Year navigation // Year navigation
this.$yearSelect = this.$dropdownContent.find('[data-calendar-input="year"]'); this.$yearSelect = this.$dropdownContent.find('[data-calendar-input="year"]');
this.$yearSelect.on("input", (e) => { this.$yearSelect.on("input", (e) => {
this.date.setFullYear(e.target.value); const target = e.target as HTMLInputElement;
this.date.setFullYear(parseInt(target.value));
this.createMonth(); this.createMonth();
}); });
this.$nextYear = this.$dropdownContent.find('[data-calendar-toggle="nextYear"]'); this.$nextYear = this.$dropdownContent.find('[data-calendar-toggle="nextYear"]');
@ -114,7 +138,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
this.createMonth(); this.createMonth();
}); });
this.$previousYear = this.$dropdownContent.find('[data-calendar-toggle="previousYear"]'); this.$previousYear = this.$dropdownContent.find('[data-calendar-toggle="previousYear"]');
this.$previousYear.on("click", (e) => { this.$previousYear.on("click", () => {
this.date.setFullYear(this.date.getFullYear() - 1); this.date.setFullYear(this.date.getFullYear() - 1);
this.createMonth(); this.createMonth();
}); });
@ -124,13 +148,15 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
this.$dropdownContent.on("click", ".calendar-date", async (ev) => { this.$dropdownContent.on("click", ".calendar-date", async (ev) => {
const date = $(ev.target).closest(".calendar-date").attr("data-calendar-date"); const date = $(ev.target).closest(".calendar-date").attr("data-calendar-date");
const note = await dateNoteService.getDayNote(date); if (date) {
const note = await dateNoteService.getDayNote(date);
if (note) { if (note) {
appContext.tabManager.getActiveContext().setNote(note.noteId); appContext.tabManager.getActiveContext().setNote(note.noteId);
this.dropdown.hide(); this.dropdown?.hide();
} else { } else {
toastService.showError(t("calendar.cannot_find_day_note")); toastService.showError(t("calendar.cannot_find_day_note"));
}
} }
ev.stopPropagation(); ev.stopPropagation();
@ -141,13 +167,13 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
} }
manageFirstDayOfWeek() { manageFirstDayOfWeek() {
this.firstDayOfWeek = options.getInt("firstDayOfWeek"); this.firstDayOfWeek = options.getInt("firstDayOfWeek") || 0;
// Generate the list of days of the week taking into consideration the user's selected first day of week. // Generate the list of days of the week taking into consideration the user's selected first day of week.
let localeDaysOfWeek = [...DAYS_OF_WEEK]; let localeDaysOfWeek = [...DAYS_OF_WEEK];
const daysToBeAddedAtEnd = localeDaysOfWeek.splice(0, this.firstDayOfWeek); const daysToBeAddedAtEnd = localeDaysOfWeek.splice(0, this.firstDayOfWeek);
localeDaysOfWeek = [...localeDaysOfWeek, ...daysToBeAddedAtEnd]; localeDaysOfWeek = [...localeDaysOfWeek, ...daysToBeAddedAtEnd];
this.$weekHeader.html(localeDaysOfWeek.map((el) => `<span>${el}</span>`)); this.$weekHeader.html(localeDaysOfWeek.map((el) => `<span>${el}</span>`).join(''));
} }
async dropdownShown() { async dropdownShown() {
@ -158,7 +184,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
this.init(activeNote?.getOwnedLabelValue("dateNote")); this.init(activeNote?.getOwnedLabelValue("dateNote"));
} }
init(activeDate) { init(activeDate: string | null) {
// attaching time fixes local timezone handling // attaching time fixes local timezone handling
this.activeDate = activeDate ? new Date(`${activeDate}T12:00:00`) : null; this.activeDate = activeDate ? new Date(`${activeDate}T12:00:00`) : null;
this.todaysDate = new Date(); this.todaysDate = new Date();
@ -168,9 +194,9 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
this.createMonth(); this.createMonth();
} }
createDay(dateNotesForMonth, num, day) { createDay(dateNotesForMonth: DateNotesForMonth, num: number, day: number) {
const $newDay = $("<a>").addClass("calendar-date").attr("data-calendar-date", utils.formatDateISO(this.date)); const $newDay = $("<a>").addClass("calendar-date").attr("data-calendar-date", utils.formatDateISO(this.date));
const $date = $("<span>").html(num); const $date = $("<span>").html(String(num));
// if it's the first day of the month // if it's the first day of the month
if (num === 1) { if (num === 1) {
@ -202,23 +228,25 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
return $newDay; return $newDay;
} }
isEqual(a, b) { isEqual(a: Date, b: Date | null) {
if ((!a && b) || (a && !b)) { if ((!a && b) || (a && !b)) {
return false; return false;
} }
if (!b) return false;
return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
} }
async createMonth() { async createMonth() {
const month = utils.formatDateISO(this.date).substr(0, 7); const month = utils.formatDateISO(this.date).substr(0, 7);
const dateNotesForMonth = await server.get(`special-notes/notes-for-month/${month}`); const dateNotesForMonth: DateNotesForMonth = await server.get(`special-notes/notes-for-month/${month}`);
this.$month.empty(); this.$month.empty();
const currentMonth = this.date.getMonth(); const currentMonth = this.date.getMonth();
while (this.date.getMonth() === currentMonth) { while (this.date.getMonth() === currentMonth) {
const $day = this.createDay(dateNotesForMonth, this.date.getDate(), this.date.getDay(), this.date.getFullYear()); const $day = this.createDay(dateNotesForMonth, this.date.getDate(), this.date.getDay());
this.$month.append($day); this.$month.append($day);
@ -232,7 +260,7 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
this.$yearSelect.val(this.date.getFullYear()); this.$yearSelect.val(this.date.getFullYear());
} }
async entitiesReloadedEvent({ loadResults }) { async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
if (!loadResults.getOptionNames().includes("firstDayOfWeek")) { if (!loadResults.getOptionNames().includes("firstDayOfWeek")) {
return; return;
} }