mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
refactored separate RightDropdownButton from calendar widgets
This commit is contained in:
zadam
parent
711af02928
commit
7152c5e51d
@ -3,56 +3,42 @@ import utils from "../../services/utils.js";
|
|||||||
import dateNoteService from "../../services/date_notes.js";
|
import dateNoteService from "../../services/date_notes.js";
|
||||||
import server from "../../services/server.js";
|
import server from "../../services/server.js";
|
||||||
import appContext from "../../services/app_context.js";
|
import appContext from "../../services/app_context.js";
|
||||||
import BasicWidget from "../basic_widget.js";
|
import RightDropdownButtonWidget from "./right_dropdown_button.js";
|
||||||
|
|
||||||
const TPL = `
|
const DROPDOWN_TPL = `
|
||||||
<div class="dropdown calendar-menu-widget dropright">
|
<div class="calendar-menu">
|
||||||
<style>
|
<style>
|
||||||
.calendar-menu-widget {
|
.calendar-menu {
|
||||||
width: 53px;
|
width: 350px;
|
||||||
height: 53px;
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="calendar-header">
|
||||||
|
<button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
|
||||||
|
|
||||||
|
<div class="calendar-header-label" data-calendar-label="month"></div>
|
||||||
|
|
||||||
|
<button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="next"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="calendar-week">
|
||||||
|
<span>Mon</span> <span>Tue</span><span>Wed</span> <span>Thu</span> <span>Fri</span> <span>Sat</span> <span>Sun</span>
|
||||||
|
</div>
|
||||||
|
<div class="calendar-body" data-calendar-area="month"></div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
export default class CalendarMenuWidget extends RightDropdownButtonWidget {
|
||||||
|
constructor() {
|
||||||
|
super("bx-calendar", "Calendar", DROPDOWN_TPL);
|
||||||
}
|
}
|
||||||
|
|
||||||
.calendar-menu {
|
|
||||||
width: 350px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<button type="button" data-toggle="dropdown" data-placement="right"
|
|
||||||
aria-haspopup="true" aria-expanded="false"
|
|
||||||
class="icon-action bx bx-calendar calendar-menu-button" title="Calendar"></button>
|
|
||||||
|
|
||||||
<div class="dropdown-menu dropdown-menu-right">
|
|
||||||
<div class="calendar-menu">
|
|
||||||
<div class="calendar-header">
|
|
||||||
<button class="calendar-btn bx bx-left-arrow-alt" data-calendar-toggle="previous"></button>
|
|
||||||
|
|
||||||
<div class="calendar-header-label" data-calendar-label="month"></div>
|
|
||||||
|
|
||||||
<button class="calendar-btn bx bx-right-arrow-alt" data-calendar-toggle="next"></button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="calendar-week">
|
|
||||||
<span>Mon</span> <span>Tue</span><span>Wed</span> <span>Thu</span> <span>Fri</span> <span>Sat</span> <span>Sun</span>
|
|
||||||
</div>
|
|
||||||
<div class="calendar-body" data-calendar-area="month"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default class CalendarMenuWidget extends BasicWidget {
|
|
||||||
doRender() {
|
doRender() {
|
||||||
this.$widget = $(TPL);
|
super.doRender();
|
||||||
|
|
||||||
const $button = this.$widget.find(".calendar-menu-button");
|
this.$month = this.$dropdownContent.find('[data-calendar-area="month"]');
|
||||||
$button.tooltip({ trigger: "hover" });
|
this.$next = this.$dropdownContent.find('[data-calendar-toggle="next"]');
|
||||||
$button.on("click", () => $button.tooltip("hide"));
|
this.$previous = this.$dropdownContent.find('[data-calendar-toggle="previous"]');
|
||||||
|
this.$label = this.$dropdownContent.find('[data-calendar-label="month"]');
|
||||||
this.$month = this.$widget.find('[data-calendar-area="month"]');
|
|
||||||
this.$next = this.$widget.find('[data-calendar-toggle="next"]');
|
|
||||||
this.$previous = this.$widget.find('[data-calendar-toggle="previous"]');
|
|
||||||
this.$label = this.$widget.find('[data-calendar-label="month"]');
|
|
||||||
|
|
||||||
this.$next.on('click', () => {
|
this.$next.on('click', () => {
|
||||||
this.date.setMonth(this.date.getMonth() + 1);
|
this.date.setMonth(this.date.getMonth() + 1);
|
||||||
@ -64,32 +50,32 @@ export default class CalendarMenuWidget extends BasicWidget {
|
|||||||
this.createMonth();
|
this.createMonth();
|
||||||
});
|
});
|
||||||
|
|
||||||
this.$widget.find('.calendar-header').on("click", e => e.stopPropagation());
|
this.$dropdownContent.find('.calendar-header').on("click", e => e.stopPropagation());
|
||||||
|
|
||||||
this.$widget.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.getDateNote(date);
|
const note = await dateNoteService.getDateNote(date);
|
||||||
|
|
||||||
if (note) {
|
if (note) {
|
||||||
appContext.tabManager.getActiveContext().setNote(note.noteId);
|
appContext.tabManager.getActiveContext().setNote(note.noteId);
|
||||||
this.$widget.dropdown("hide");
|
this.hideDropdown();
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
alert("Cannot find day note");
|
alert("Cannot find day note");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
this.$widget.on('show.bs.dropdown', async () => {
|
|
||||||
await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
|
|
||||||
|
|
||||||
const activeNote = appContext.tabManager.getActiveContextNote();
|
|
||||||
|
|
||||||
this.init(this.$widget, activeNote?.getOwnedLabelValue("dateNote"));
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
init($el, activeDate) {
|
async dropdown() {
|
||||||
|
await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET);
|
||||||
|
|
||||||
|
const activeNote = appContext.tabManager.getActiveContextNote();
|
||||||
|
|
||||||
|
this.init(activeNote?.getOwnedLabelValue("dateNote"));
|
||||||
|
}
|
||||||
|
|
||||||
|
init(activeDate) {
|
||||||
// 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();
|
||||||
|
|||||||
50
src/public/app/widgets/buttons/right_dropdown_button.js
Normal file
50
src/public/app/widgets/buttons/right_dropdown_button.js
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
import BasicWidget from "../basic_widget.js";
|
||||||
|
|
||||||
|
const TPL = `
|
||||||
|
<div class="dropdown right-dropdown-widget dropright">
|
||||||
|
<style>
|
||||||
|
.right-dropdown-widget {
|
||||||
|
width: 53px;
|
||||||
|
height: 53px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<button type="button" data-toggle="dropdown" data-placement="right"
|
||||||
|
aria-haspopup="true" aria-expanded="false"
|
||||||
|
class="icon-action bx right-dropdown-button"></button>
|
||||||
|
|
||||||
|
<div class="dropdown-menu dropdown-menu-right"></div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default class RightDropdownButtonWidget extends BasicWidget {
|
||||||
|
constructor(iconClass, title, dropdownTpl) {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.iconClass = iconClass;
|
||||||
|
this.title = title;
|
||||||
|
this.dropdownTpl = dropdownTpl;
|
||||||
|
}
|
||||||
|
|
||||||
|
doRender() {
|
||||||
|
this.$widget = $(TPL);
|
||||||
|
|
||||||
|
const $button = this.$widget.find(".right-dropdown-button")
|
||||||
|
.addClass(this.iconClass)
|
||||||
|
.attr("title", this.title)
|
||||||
|
.tooltip({ trigger: "hover" })
|
||||||
|
.on("click", () => $button.tooltip("hide"));
|
||||||
|
|
||||||
|
this.$widget.on('show.bs.dropdown', () => this.dropdown());
|
||||||
|
|
||||||
|
this.$dropdownContent = $(this.dropdownTpl);
|
||||||
|
this.$widget.find(".dropdown-menu").append(this.$dropdownContent);
|
||||||
|
}
|
||||||
|
|
||||||
|
// to be overriden
|
||||||
|
dropdown() {}
|
||||||
|
|
||||||
|
hideDropdown() {
|
||||||
|
this.$widget.dropdown("hide");
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user