mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
248 lines
8.2 KiB
JavaScript
248 lines
8.2 KiB
JavaScript
import { t } from "../../services/i18n.js";
|
|
import libraryLoader from "../../services/library_loader.js";
|
|
import utils from "../../services/utils.js";
|
|
import dateNoteService from "../../services/date_notes.js";
|
|
import server from "../../services/server.js";
|
|
import appContext from "../../components/app_context.js";
|
|
import RightDropdownButtonWidget from "./right_dropdown_button.js";
|
|
import toastService from "../../services/toast.js";
|
|
import options from "../../services/options.js";
|
|
|
|
const MONTHS = [
|
|
t("calendar.january"),
|
|
t("calendar.febuary"),
|
|
t("calendar.march"),
|
|
t("calendar.april"),
|
|
t("calendar.may"),
|
|
t("calendar.june"),
|
|
t("calendar.july"),
|
|
t("calendar.august"),
|
|
t("calendar.september"),
|
|
t("calendar.october"),
|
|
t("calendar.november"),
|
|
t("calendar.december")
|
|
];
|
|
|
|
const DROPDOWN_TPL = `
|
|
<div class="calendar-dropdown-widget">
|
|
<style>
|
|
.calendar-dropdown-widget {
|
|
width: 350px;
|
|
}
|
|
</style>
|
|
|
|
<div class="calendar-header">
|
|
<div class="calendar-month-selector">
|
|
<button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
|
|
|
|
<select data-calendar-input="month">
|
|
${Object.entries(MONTHS).map(([i, month]) => `<option value=${i}>${month}</option>`)}
|
|
</select>
|
|
|
|
<button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="next"></button>
|
|
</div>
|
|
|
|
<div class="calendar-year-selector">
|
|
<button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previousYear"></button>
|
|
|
|
<input type="number" min="1900" max="2999" step="1" data-calendar-input="year" />
|
|
|
|
<button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="nextYear"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="calendar-week">
|
|
</div>
|
|
|
|
<div class="calendar-body" data-calendar-area="month"></div>
|
|
</div>`;
|
|
|
|
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")
|
|
];
|
|
|
|
export default class CalendarWidget extends RightDropdownButtonWidget {
|
|
constructor(title, icon) {
|
|
super(title, icon, DROPDOWN_TPL);
|
|
}
|
|
|
|
doRender() {
|
|
super.doRender();
|
|
|
|
this.$month = this.$dropdownContent.find('[data-calendar-area="month"]');
|
|
this.$weekHeader = this.$dropdownContent.find(".calendar-week");
|
|
|
|
this.manageFirstDayOfWeek();
|
|
|
|
// Month navigation
|
|
this.$monthSelect = this.$dropdownContent.find('[data-calendar-input="month"]');
|
|
this.$monthSelect.on("input", (e) => {
|
|
this.date.setMonth(e.target.value);
|
|
this.createMonth();
|
|
});
|
|
this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
|
|
this.$next.on('click', () => {
|
|
this.date.setMonth(this.date.getMonth() + 1);
|
|
this.createMonth();
|
|
});
|
|
this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');
|
|
this.$previous.on('click', e => {
|
|
this.date.setMonth(this.date.getMonth() - 1);
|
|
this.createMonth();
|
|
});
|
|
|
|
// Year navigation
|
|
this.$yearSelect = this.$dropdownContent.find('[data-calendar-input="year"]');
|
|
this.$yearSelect.on("input", (e) => {
|
|
this.date.setFullYear(e.target.value);
|
|
this.createMonth();
|
|
});
|
|
this.$nextYear = this.$dropdownContent.find('[data-calendar-toggle="nextYear"]');
|
|
this.$nextYear.on('click', () => {
|
|
this.date.setFullYear(this.date.getFullYear() + 1);
|
|
this.createMonth();
|
|
});
|
|
this.$previousYear = this.$dropdownContent.find('[data-calendar-toggle="previousYear"]');
|
|
this.$previousYear.on('click', e => {
|
|
this.date.setFullYear(this.date.getFullYear() - 1);
|
|
this.createMonth();
|
|
});
|
|
|
|
this.$dropdownContent.find('.calendar-header').on("click", e => e.stopPropagation());
|
|
|
|
this.$dropdownContent.on('click', '.calendar-date', async ev => {
|
|
const date = $(ev.target).closest('.calendar-date').attr('data-calendar-date');
|
|
|
|
const note = await dateNoteService.getDayNote(date);
|
|
|
|
if (note) {
|
|
appContext.tabManager.getActiveContext().setNote(note.noteId);
|
|
this.hideDropdown();
|
|
}
|
|
else {
|
|
toastService.showError(t("calendar.cannot_find_day_note"));
|
|
}
|
|
});
|
|
|
|
// Prevent dismissing the calendar popup by clicking on an empty space inside it.
|
|
this.$dropdownContent.on("click", (e) => e.stopPropagation());
|
|
}
|
|
|
|
manageFirstDayOfWeek() {
|
|
this.firstDayOfWeek = options.getInt("firstDayOfWeek");
|
|
|
|
// Generate the list of days of the week taking into consideration the user's selected first day of week.
|
|
let localeDaysOfWeek = [ ...DAYS_OF_WEEK ];
|
|
const daysToBeAddedAtEnd = localeDaysOfWeek.splice(0, this.firstDayOfWeek);
|
|
localeDaysOfWeek = [ ...localeDaysOfWeek, ...daysToBeAddedAtEnd ];
|
|
this.$weekHeader.html(localeDaysOfWeek.map((el) => `<span>${el}</span>`));
|
|
}
|
|
|
|
async dropdownShown() {
|
|
await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
|
|
|
|
const activeNote = appContext.tabManager.getActiveContextNote();
|
|
|
|
this.init(activeNote?.getOwnedLabelValue("dateNote"));
|
|
}
|
|
|
|
init(activeDate) {
|
|
// attaching time fixes local timezone handling
|
|
this.activeDate = activeDate ? new Date(`${activeDate}T12:00:00`) : null;
|
|
this.todaysDate = new Date();
|
|
this.date = new Date((this.activeDate || this.todaysDate).getTime());
|
|
this.date.setDate(1);
|
|
|
|
this.createMonth();
|
|
}
|
|
|
|
createDay(dateNotesForMonth, num, day) {
|
|
const $newDay = $('<a>')
|
|
.addClass("calendar-date")
|
|
.attr('data-calendar-date', utils.formatDateISO(this.date));
|
|
const $date = $('<span>').html(num);
|
|
|
|
// if it's the first day of the month
|
|
if (num === 1) {
|
|
// 0 1 2 3 4 5 6
|
|
// Su Mo Tu We Th Fr Sa
|
|
// 1 2 3 4 5 6 0
|
|
// Mo Tu We Th Fr Sa Su
|
|
let dayOffset = day - this.firstDayOfWeek;
|
|
if (dayOffset < 0)
|
|
dayOffset = 7 + dayOffset;
|
|
$newDay.css("marginLeft", (dayOffset * 14.28) + '%');
|
|
}
|
|
|
|
const dateNoteId = dateNotesForMonth[utils.formatDateISO(this.date)];
|
|
|
|
if (dateNoteId) {
|
|
$newDay.addClass('calendar-date-exists');
|
|
}
|
|
|
|
if (this.isEqual(this.date, this.activeDate)) {
|
|
$newDay.addClass('calendar-date-active');
|
|
}
|
|
|
|
if (this.isEqual(this.date, this.todaysDate)) {
|
|
$newDay.addClass('calendar-date-today');
|
|
}
|
|
|
|
$newDay.append($date);
|
|
return $newDay;
|
|
}
|
|
|
|
isEqual(a, b) {
|
|
if (!a && b || a && !b) {
|
|
return false;
|
|
}
|
|
|
|
return a.getFullYear() === b.getFullYear()
|
|
&& a.getMonth() === b.getMonth()
|
|
&& a.getDate() === b.getDate();
|
|
}
|
|
|
|
async createMonth() {
|
|
const month = utils.formatDateISO(this.date).substr(0, 7);
|
|
const dateNotesForMonth = await server.get(`special-notes/notes-for-month/${month}`);
|
|
|
|
this.$month.empty();
|
|
|
|
const currentMonth = this.date.getMonth();
|
|
while (this.date.getMonth() === currentMonth) {
|
|
const $day = this.createDay(
|
|
dateNotesForMonth,
|
|
this.date.getDate(),
|
|
this.date.getDay(),
|
|
this.date.getFullYear()
|
|
);
|
|
|
|
this.$month.append($day);
|
|
|
|
this.date.setDate(this.date.getDate() + 1);
|
|
}
|
|
// while loop trips over and day is at 30/31, bring it back
|
|
this.date.setDate(1);
|
|
this.date.setMonth(this.date.getMonth() - 1);
|
|
|
|
this.$monthSelect.val(this.date.getMonth());
|
|
this.$yearSelect.val(this.date.getFullYear());
|
|
}
|
|
|
|
async entitiesReloadedEvent({loadResults}) {
|
|
if (!loadResults.getOptionNames().includes("firstDayOfWeek")) {
|
|
return;
|
|
}
|
|
|
|
this.manageFirstDayOfWeek();
|
|
this.createMonth();
|
|
}
|
|
|
|
}
|