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

chore(client/ts): port classic_editor_toolbar

Browse Source
This commit is contained in:
Elian Doran 2025-01-16 15:51:58 +02:00
parent 1d6e3af9aa
commit 0cab891d2e
No known key found for this signature in database
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.js → src/public/app/widgets/ribbon_widgets/classic_editor_toolbar.ts
View File

@ -64,6 +64,9 @@ const TPL = `\
* The ribbon item is active by default for text notes, as long as they are not in read-only mode. * The ribbon item is active by default for text notes, as long as they are not in read-only mode.
*/ */
export default class ClassicEditorToolbar extends NoteContextAwareWidget { export default class ClassicEditorToolbar extends NoteContextAwareWidget {
private observer: MutationObserver;
constructor() { constructor() {
super(); super();
this.observer = new MutationObserver((e) => this.#onDropdownStateChanged(e)); this.observer = new MutationObserver((e) => this.#onDropdownStateChanged(e));
@ -83,7 +86,7 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget {
if (utils.isMobile()) { if (utils.isMobile()) {
// The virtual keyboard obscures the editing toolbar so we have to reposition by calculating the height of the keyboard. // The virtual keyboard obscures the editing toolbar so we have to reposition by calculating the height of the keyboard.
window.visualViewport.addEventListener("resize", () => this.#adjustPosition()); window.visualViewport?.addEventListener("resize", () => this.#adjustPosition());
window.addEventListener("scroll", () => this.#adjustPosition()); window.addEventListener("scroll", () => this.#adjustPosition());
// Observe when a dropdown is expanded to apply a style that allows the dropdown to be visible, since we can't have the element both visible and the toolbar scrollable. // Observe when a dropdown is expanded to apply a style that allows the dropdown to be visible, since we can't have the element both visible and the toolbar scrollable.
@ -95,13 +98,13 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget {
} }
} }
#onDropdownStateChanged(e) { #onDropdownStateChanged(e: MutationRecord[]) {
const dropdownActive = e.map((e) => e.target.ariaExpanded === "true").reduce((acc, e) => acc && e); const dropdownActive = e.map((e) => (e.target as any).ariaExpanded === "true").reduce((acc, e) => acc && e);
this.$widget[0].classList.toggle("dropdown-active", dropdownActive); this.$widget[0].classList.toggle("dropdown-active", dropdownActive);
} }
#adjustPosition() { #adjustPosition() {
let bottom = window.innerHeight - window.visualViewport.height; let bottom = window.innerHeight - (window.visualViewport?.height || 0);
if (bottom === 0) { if (bottom === 0) {
// The keyboard is not visible, align it to the launcher bar instead. // The keyboard is not visible, align it to the launcher bar instead.
@ -125,11 +128,11 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget {
return false; return false;
} }
if (this.note.type !== "text") { if (!this.note || this.note.type !== "text") {
return false; return false;
} }
if (await this.noteContext.isReadOnly()) { if (await this.noteContext?.isReadOnly()) {
return false; return false;
} }