From 838dc521b17f3eb892eb9e6957ef62fb775fbc03 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Mon, 23 Dec 2024 11:00:10 +0200 Subject: [PATCH] chore(client/ts): port services/note_list_renderer --- src/public/app/entities/fnote.ts | 8 ++--- src/public/app/services/link.ts | 4 +-- ...list_renderer.js => note_list_renderer.ts} | 34 ++++++++++++++----- src/public/app/services/utils.ts | 22 ++++++------ src/public/app/types.d.ts | 6 ++++ 5 files changed, 48 insertions(+), 26 deletions(-) rename src/public/app/services/{note_list_renderer.js => note_list_renderer.ts} (93%) diff --git a/src/public/app/entities/fnote.ts b/src/public/app/entities/fnote.ts index 7c38aa9f0..f0b28fc4d 100644 --- a/src/public/app/entities/fnote.ts +++ b/src/public/app/entities/fnote.ts @@ -89,7 +89,7 @@ class FNote { // Managed by Froca. searchResultsLoaded?: boolean; - highlightedTokens?: unknown; + highlightedTokens?: string[]; constructor(froca: Froca, row: FNoteRow) { this.froca = froca; @@ -111,7 +111,7 @@ class FNote { this.title = row.title; this.isProtected = !!row.isProtected; this.type = row.type; - + this.mime = row.mime; this.blobId = row.blobId; @@ -478,7 +478,7 @@ class FNote { return true; } - /** + /** * @private */ __filterAttrs(attributes: FAttribute[], type?: AttributeType, name?: string): FAttribute[] { @@ -602,7 +602,7 @@ class FNote { * @param [name] - relation name to filter * @returns all note's relations (attributes with type relation), including inherited ones */ - getRelations(name: string) { + getRelations(name?: string) { return this.getAttributes(RELATION, name); } diff --git a/src/public/app/services/link.ts b/src/public/app/services/link.ts index e14f1a573..d62e90250 100644 --- a/src/public/app/services/link.ts +++ b/src/public/app/services/link.ts @@ -231,14 +231,14 @@ function parseNavigationStateFromUrl(url: string | undefined) { }; } -function goToLink(evt: MouseEvent) { +function goToLink(evt: MouseEvent | JQuery.ClickEvent) { const $link = $(evt.target as any).closest("a,.block-link"); const hrefLink = $link.attr('href') || $link.attr('data-href'); return goToLinkExt(evt, hrefLink, $link); } -function goToLinkExt(evt: MouseEvent, hrefLink: string | undefined, $link: JQuery) { +function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent, hrefLink: string | undefined, $link: JQuery) { if (hrefLink?.startsWith("data:")) { return true; } diff --git a/src/public/app/services/note_list_renderer.js b/src/public/app/services/note_list_renderer.ts similarity index 93% rename from src/public/app/services/note_list_renderer.js rename to src/public/app/services/note_list_renderer.ts index bc986e56b..8da8d6de8 100644 --- a/src/public/app/services/note_list_renderer.js +++ b/src/public/app/services/note_list_renderer.ts @@ -5,6 +5,7 @@ import attributeRenderer from "./attribute_renderer.js"; import libraryLoader from "./library_loader.js"; import treeService from "./tree.js"; import utils from "./utils.js"; +import FNote from "../entities/fnote.js"; const TPL = `
@@ -32,7 +33,7 @@ const TPL = ` .note-list.grid-view .note-book-card { max-height: 300px; } - + .note-list.grid-view .note-book-card img { max-height: 220px; object-fit: contain; @@ -157,10 +158,21 @@ const TPL = `
`; class NoteListRenderer { + + private $noteList: JQuery; + + private parentNote: FNote; + private noteIds: string[]; + private page?: number; + private pageSize?: number; + private viewType?: string | null; + private showNotePath?: boolean; + private highlightRegex?: RegExp | null; + /* * We're using noteIds so that it's not necessary to load all notes at once when paging */ - constructor($parent, parentNote, noteIds, showNotePath = false) { + constructor($parent: JQuery, parentNote: FNote, noteIds: string[], showNotePath: boolean = false) { this.$noteList = $(TPL); // note list must be added to the DOM immediately, otherwise some functionality scripting (canvas) won't work @@ -178,7 +190,7 @@ class NoteListRenderer { $parent.append(this.$noteList); this.page = 1; - this.pageSize = parseInt(parentNote.getLabelValue('pageSize')); + this.pageSize = parseInt(parentNote.getLabelValue('pageSize') || ""); if (!this.pageSize || this.pageSize < 1) { this.pageSize = 20; @@ -186,7 +198,7 @@ class NoteListRenderer { this.viewType = parentNote.getLabelValue('viewType'); - if (!['list', 'grid'].includes(this.viewType)) { + if (!['list', 'grid'].includes(this.viewType || "")) { // when not explicitly set, decide based on the note type this.viewType = parentNote.type === 'search' ? 'list' : 'grid'; } @@ -207,7 +219,7 @@ class NoteListRenderer { } async renderList() { - if (this.noteIds.length === 0) { + if (this.noteIds.length === 0 || !this.page || !this.pageSize) { this.$noteList.hide(); return; } @@ -248,6 +260,10 @@ class NoteListRenderer { renderPager() { const $pager = this.$noteList.find('.note-list-pager').empty(); + if (!this.page || !this.pageSize) { + return; + } + const pageCount = Math.ceil(this.noteIds.length / this.pageSize); $pager.toggle(pageCount > 1); @@ -285,7 +301,7 @@ class NoteListRenderer { $pager.append(`(${this.noteIds.length} notes)`); } - async renderNote(note, expand = false) { + async renderNote(note: FNote, expand: boolean = false) { const $expander = $(''); const {$renderedAttributes} = await attributeRenderer.renderNormalAttributes(note); @@ -330,7 +346,7 @@ class NoteListRenderer { return $card; } - async toggleContent($card, note, expand) { + async toggleContent($card: JQuery, note: FNote, expand: boolean) { if (this.viewType === 'list' && ((expand && $card.hasClass("expanded")) || (!expand && !$card.hasClass("expanded")))) { return; } @@ -351,7 +367,7 @@ class NoteListRenderer { } } - async renderNoteContent(note) { + async renderNoteContent(note: FNote) { const $content = $('
'); try { @@ -366,7 +382,7 @@ class NoteListRenderer { separateWordSearch: false, caseSensitive: false }); - } + } $content.append($renderedContent); $content.addClass(`type-${type}`); diff --git a/src/public/app/services/utils.ts b/src/public/app/services/utils.ts index 13539a635..9fbd929ac 100644 --- a/src/public/app/services/utils.ts +++ b/src/public/app/services/utils.ts @@ -98,7 +98,7 @@ function isMac() { return navigator.platform.indexOf('Mac') > -1; } -function isCtrlKey(evt: KeyboardEvent | MouseEvent) { +function isCtrlKey(evt: KeyboardEvent | MouseEvent | JQuery.ClickEvent) { return (!isMac() && evt.ctrlKey) || (isMac() && evt.metaKey); } @@ -166,7 +166,7 @@ function isMobile() { || (!window.glob?.device && /Mobi/.test(navigator.userAgent)); } -function isDesktop() { +function isDesktop() { return window.glob?.device === "desktop" // window.glob.device is not available in setup || (!window.glob?.device && !/Mobi/.test(navigator.userAgent)); @@ -520,7 +520,7 @@ function createImageSrcUrl(note: { noteId: string; title: string }) { /** * Given a string representation of an SVG, triggers a download of the file on the client device. - * + * * @param nameWithoutExtension the name of the file. The .svg suffix is automatically added to it. * @param svgContent the content of the SVG file download. */ @@ -544,39 +544,39 @@ function downloadSvg(nameWithoutExtension: string, svgContent: string) { * 1 if v1 is greater than v2 * 0 if v1 is equal to v2 * -1 if v1 is less than v2 - * + * * @param v1 First version string * @param v2 Second version string - * @returns + * @returns */ function compareVersions(v1: string, v2: string): number { // Remove 'v' prefix and everything after dash if present v1 = v1.replace(/^v/, '').split('-')[0]; v2 = v2.replace(/^v/, '').split('-')[0]; - + const v1parts = v1.split('.').map(Number); const v2parts = v2.split('.').map(Number); - + // Pad shorter version with zeros while (v1parts.length < 3) v1parts.push(0); while (v2parts.length < 3) v2parts.push(0); - + // Compare major version if (v1parts[0] !== v2parts[0]) { return v1parts[0] > v2parts[0] ? 1 : -1; } - + // Compare minor version if (v1parts[1] !== v2parts[1]) { return v1parts[1] > v2parts[1] ? 1 : -1; } - + // Compare patch version if (v1parts[2] !== v2parts[2]) { return v1parts[2] > v2parts[2] ? 1 : -1; } - + return 0; } diff --git a/src/public/app/types.d.ts b/src/public/app/types.d.ts index 0dde27d54..c6c540d83 100644 --- a/src/public/app/types.d.ts +++ b/src/public/app/types.d.ts @@ -85,6 +85,12 @@ declare global { getSelectedExternalLink(this: HTMLElement): string | undefined; setSelectedExternalLink(externalLink: string | null | undefined); setNote(noteId: string); + markRegExp(regex: RegExp, opts: { + element: string; + className: string; + separateWordSearch: boolean; + caseSensitive: boolean; + }) } var logError: (message: string, e?: Error) => void;