diff --git a/frontend/app.js b/frontend/app.js index f9a19f8..52ce08b 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -466,7 +466,7 @@ function noteApp() { this.loadSyntaxHighlightSetting(); // Parse URL and load specific note if provided - this.loadNoteFromURL(); + this.loadItemFromURL(); // Set initial homepage state ONLY if we're actually on the homepage if (window.location.pathname === '/') { @@ -490,6 +490,9 @@ function noteApp() { this.searchResults = []; this.clearSearchHighlights(); } + } else if (e.state && e.state.mediaPath) { + // Navigating to a media file + this.viewMedia(e.state.mediaPath, null, false); } else { // Navigating back to homepage this.currentNote = ''; @@ -1886,47 +1889,7 @@ function noteApp() { // Then, render notes and images in this folder (after subfolders) if (folder.notes && folder.notes.length > 0) { folder.notes.forEach(note => { - // Check if it's a media file or a note - const isMediaFile = note.type !== 'note'; - const isCurrentNote = this.currentNote === note.path; - const isCurrentMedia = this.currentMedia === note.path; - const isCurrent = isMediaFile ? isCurrentMedia : isCurrentNote; - - // Icon based on media type, share icon for shared notes - const isShared = !isMediaFile && this.isNoteShared(note.path); - const shareIcon = isShared ? '' : ''; - const icon = this.getMediaIcon(note.type); - - html += ` -
- ${shareIcon}${icon}${icon ? ' ' : ''}${esc(note.name)} - -
- `; + html += this.renderNoteItem(note); }); } @@ -1937,6 +1900,60 @@ function noteApp() { return html; }, + // Render a single note/media item (used by both folders and root level) + renderNoteItem(note) { + const esc = (s) => this.escapeHtmlAttr(s); + const isMediaFile = note.type !== 'note'; + const isCurrentNote = this.currentNote === note.path; + const isCurrentMedia = this.currentMedia === note.path; + const isCurrent = isMediaFile ? isCurrentMedia : isCurrentNote; + + // Share icon for shared notes + const isShared = !isMediaFile && this.isNoteShared(note.path); + const shareIcon = isShared ? '' : ''; + const icon = this.getMediaIcon(note.type); + + return ` +
+ ${shareIcon}${icon}${icon ? ' ' : ''}${esc(note.name)} + +
+ `; + }, + + // Render root-level items (notes and media not in any folder) + renderRootItems() { + const root = this.folderTree['__root__']; + if (!root || !root.notes || root.notes.length === 0) { + return ''; + } + return root.notes.map(note => this.renderNoteItem(note)).join(''); + }, + // Toggle folder expansion toggleFolder(folderPath) { if (this.expandedFolders.has(folderPath)) { @@ -2362,6 +2379,9 @@ function noteApp() { const fileName = mediaPath.split('/').pop(); document.title = `${fileName} - ${this.appName}`; + // Expand folder tree to show the media file + this.expandFolderForNote(mediaPath); + // Update browser URL if (updateHistory) { // Encode each path segment to handle special characters @@ -2752,9 +2772,9 @@ function noteApp() { } }, - // Load note from URL path - loadNoteFromURL() { - // Get path from URL (e.g., /folder/note or /note) + // Load item (note or media) from URL path + loadItemFromURL() { + // Get path from URL (e.g., /folder/note or /folder/image.png) let path = window.location.pathname; // Strip .md extension if present (for MKdocs/Zensical integration) @@ -2772,12 +2792,12 @@ function noteApp() { // Remove leading slash and decode URL encoding (e.g., %20 -> space) const decodedPath = decodeURIComponent(path.substring(1)); - // Check if this is an image path (check if it exists in notes list as an image) + // Check if this is a media file (image, audio, video, PDF) const matchedItem = this.notes.find(n => n.path === decodedPath); - if (matchedItem && matchedItem.type === 'image') { - // It's an image, view it - this.viewImage(decodedPath, false); // false = don't update history (we're already at this URL) + if (matchedItem && matchedItem.type !== 'note') { + // It's a media file, view it + this.viewMedia(decodedPath, matchedItem.type, false); // false = don't update history } else { // It's a note, add .md extension and load it const notePath = decodedPath + '.md'; diff --git a/frontend/index.html b/frontend/index.html index 32b7242..306ee5e 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1529,35 +1529,8 @@
- - + +