SUPERCHARGED LOCAL DIRECTORY FILE BROWSER

If you like this script, please consider buying me a coffee or making a donation, leaving a rating, or sending me a comment to let me know what you think. Thank you!

This script works on local directories as well as many remote server-generated index pages ("open directories"). Remote server URLs can be added in the script settings provided by your userscript manager (e.g., greasemonkey or tampermonkey). Because server configurations vary, the script may not work perfectly (or at all) on some sites (in particular, it does not work with servers "Powered by h5ai" or "Directory Lister"). Very large directories (> 1000 items) may cause the browser to choke. Please let me know if you encounter any problems.

NOTE: This script was developed in the latest version of Vivaldi, running on MacOS. It has been minimally tested in other Chrome-based browsers, Safari, and Firefox, and has been not been tested in any other browsers or OSes. No effort has been made to ensure compatibility with older browsers. Please report any issues.

VERSION 7.0.1 (2022-05-15): Bugfixes

IMPROVED: Close button behavior with font previews.
FIXED: A few other bugs and UI issues with font previews.
FIXED: Buy me a Coffee link didn't work. (SMH)
FIXED: Clicking parent links didn't work.
FIXED: Hovering grid items did not highlight the corresponding sidebar item.
FIXED: Various bugs involving grid functions when the grid contains items from closed subdirectories.
FIXED: Links in previewed HTML files were not being handled correctly.

VERSION 7.0.0 (2022-02-26): Major internal changes

IMPROVED: Removed jQuery dependency.
IMPROVED: Greatly improved efficiency of initial page processing.
ADDED: Option to show image thumbnails in sidebar and previewed directories. (Enabling this option may slow down page load.)
ADDED: Option to show or hide item details in previewed directories.
ADDED: Buy me a Coffee link
IMPROVED Font preview and font file glyph display

• ADDED: Ability to display OpenType font-features, font-variants, and stylistic sets of previewed fonts.
• ADDED: View grids of Unicode character ranges using previewed fonts.
• IMPROVED: Previewed glyphs can be resized and repositioned by dragging.

OTHER:

• FIXED: A bunch of long-standing HTML errors.
• FIXED: A long-standing bug whereby fonts with spaces in the file name could not be previewed.
• FIXED: A stupid bug that prevented audio files with double-quoted text in the file name from playing.
• Completely rewrote CSS for improved efficiency and modularity. More to come.
• Completely rewrote arrow key navigation code; many other functions rewritten or simplified.
• SVG UI icon optimizations.
• Improved functionality and accuracy of stats; now shows number of hidden items in unexpanded view; stats update when toggling visibility of invisible or ignored items; other improvements.
• Many other UI tweaks and improvements.
• Fixes for Safari and Firefox.
• And of course, other bugfixes many & various.

Still to do:

• Improve installation and usage instructions.
• More bugfixes. (Please report any you find.)

BEFORE

AFTER with dark theme and image grid

MEDIA PLAYBACK with dark theme and cover art

MARKDOWN editing and preview, with subdirectory browsing

FONT GRID

ABOUT
This script transforms the default local directory page (and many server-generated index pages) into a full-featured file browser, with a resizable sidebar and preview pane. (See screenshots below.)

If you like this script, please consider buying me a coffee or making a donation to encourage development. Thanks!

FEATURES INCLUDE:

• Resizable sidebar and directory/file preview pane.
• Arrow navigation in sidebar:
  • Up and Down Arrows select next/prev item.
  • Left and Right Arrows select next/prev item of same type.
• Navigate sidebar by typed string.
• Show/Hide file details (size (if avail), date modified (if avail), kind, extension).
• Sort sidebar items by name or file details.
  • Default sort = sort by name with folders on top.
• Preview all file types supported by browser (html, text, images, pdf, audio, video) plus fonts.
• Preview and edit markdown and plain text files.
  • Markdown rendered with markdownit.js ( https://github.com/markdown-it/markdown-it ).
  • Uses Github Markdown styles for preview ( https://github.com/sindresorhus/github-markdown-css ), with a few customizations.
  • Support for:
    • TOC creation ( ${toc} ) ( https://github.com/nagaozen/markdown-it-toc-done-right )
    • Multimarkdown table syntax ( https://github.com/RedBug312/markdown-it-multimd-table )
    • Live checkboxes ( \[ ], [x] ), allowed in lists and deflists.
    • Superscript ( ^sup^ ) ( https://github.com/markdown-it/markdown-it-sup )
    • Subscript ( ~sub~ ) ( https://github.com/markdown-it/markdown-it-sub )
    • Definition lists ( https://github.com/markdown-it/markdown-it-deflist; for syntax, see http://pandoc.org/MANUAL.html#definition-lists )
    • Centered text ( ->centered<- ) ( https://github.com/jay-hodgson/markdown-it-center-text )
    • Footnotes ( https://github.com/markdown-it/markdown-it-footnote )
  • View source text, preview, or split pane with proportional sync scroll.
  • Save edited source text or previewed HTML.
• Audio and video playback, with shuffle, loop, skip audio +/- 10 or 30 sec via keyboard.
  • Preview other files (e.g., lyrics or cover art) in same directory while playing audio.
  • User setting to autoload cover art (if any images in directory, load "cover.ext" or first image found)
• Open m3u playlists.
• Open fonts and view glyph repertoire.
  • Save glyphs as SVG.
• Grid views for images and/or fonts with keyboard navigation.
• User settings (see $settings in code; some settings can be changed via the main menu in the UI and will be remembered in URL query):
  • Light or Dark theme.
  • Bookmarks for local or remote directories.
  • Default image grid size.
  • Default UI font size and font-family.
  • Default UI font and font-size.
  • Default file sorting.
  • Sort with directories on top.
  • Treat apps as directories (MacOS and *nix only)
  • Show or hide invisible files.
  • Show or hide ignored files in the ignored files list (see $row_settings in code below $settings).
  • Show or hide file details.
  • Use custom file icons or browser defaults.
  • Autoload index.ext files.
  • Autoload cover art in directories with audio files.
  • Text editing default view: split, source, or preview.
  • Text editing sync scroll: on or off.

IMPORTANT NOTES:

• This script was developed in the latest version of Vivaldi, running on Mac OS Mojave. It has been tested in Safari, Firefox, and various Chrome-based browsers, but it has been not been tested in any other browsers or OSes, and no effort has been made to ensure compatibility with older browsers. Please report any issues.

• After installing, you should look at the "User Settings" section in the code near the top of the script (ca. line 60). There you can edit the bookmark menus and set defaults for many UI features. There is additional information about each setting in the comments.

• Userscripts will not run on file:/// urls by default, so for this script to work, you will have to enable it in your browser's extension settings (e.g.: For Tampermonkey in Chrome, go to Chrome the extension page, click the details button on the Tampermonkey pane and check 'Allow access to file URLs'). Safari does not allow local directories to be browsed, so the script will not work on local directories, but it will work on remote directories (or on local directories through a local server).

• This script was developed primarily to work with local files. Because of security concerns, userscripts running in local files are not allowed to set cookies or use local storage. Therefore the User Settings must be hard-coded into the script, which means they will be overwritten every time the script is updated. To ease the inconvenience of this, you can export your settings from the main menu as a text file. However, many user settings can be changed in the UI and will be stored in the URL query string.

• The script works on many server-generated index pages, too. Just add an @include line for each url at the top of the script.

KEYBINDINGS (These don't work in all browsers):

• Arrow Up/Down: Select prev/next item.
  • If audio is playing, and prev/next file is also audio, it will be highlighted but not loaded in the audio player; press return to load it.
• Arrow Left/Right: Select prev/next row of the same kind as the current selection.
  • If current selection is a media file, select and begin playback of the next media item.
• Opt/Alt + Arrow Left/Right: Skip audio ±10s
• Opt/Alt + Shift + Arrow Left/Right: Skip audio ±30s
• Cmd/Ctrl + Arrow Up: Go to parent directory
• Cmd/Ctrl + Arrow Down: Open selected directory
• Return: Open selected directory, select file, or pause/play media.
• Space: Pause/Play media files
• Cmd/Ctrl + D: Toggle file details (size, date modified) in some index page types.
• Cmd/Ctrl + G: Show or Reset Grid
• Cmd/Ctrl + I: Toggle Invisibles
• Cmd/Ctrl + Shift + O: Open selected item in new window/tab
• Cmd/Ctrl + R: Reload grids and previewed content, reset scaled images/fonts, reset media files to beginning.
• Cmd/Ctrl + W: Close previewed content (doesn't work in all browsers; use close button instead), or close window if no content is being previewed.
• Cmd/Ctrl + Shift + < or >: Scale preview items and grids.

CHANGELOG:

VERSION 6.3.3 (2021-08-18)

FIXED: Autoload media (and possibly a few other functions) wasn't working.

VERSION 6.3.2 (2021-08-01)

FIXED: Linked stylesheets weren't being removed from previewed directories.

ADDED: mkv and mka to the list of supported media formats. (N.b.: This script does not enable your browser to play these formats; it may require a plugin to do so.)

OTHER: Minor compatibility improvements and UI tweaks.

VERSION 6.3.1 (2021-06-20)

IMPROVED: Compatibility with additional server configurations

OTHER: A few minor UI fixes.

VERSION 6.3.0 (2021-06-13):

IMPROVED: Compatibility with some server configurations.

FIXED: Some long-standing issues with HTTP error handling. Error pages will now be displayed in the sidebar or content pane, according to context.

ADDED: Clicking items in the stats footer details view will also change the view to sort by kind.

VERSION 6.2.0 (2021-05-28):

ADDED: Add stats footer to content pane for directory previews.

ADDED: Show total media durations in stats footer.

FIXED: Media durations were not showing in subdirectory listings.

FIXED: Sidebar stats footer was not displayed for playlists/filelists

VERSION 6.1.6: (2021-04-10) MINOR UPDATE:

• Added script icon.

• Hopefully fixed some cosmetic issues with scrollbars.

VERSION 6.1.5: (2021-02-13)

FIXED: Cuesheets weren't being processed correctly.

VERSION 6.1.4: (2021-01-29)

FIXED: Media autoplay failed if the next track was of a different kind (e.g., video after audio).
FIXED: Textareas and form elements in HTML pages could not be focussed when clicked.

VERSION 6.1.3: (2021-01-13)

FIXED: Various issues with keyboard navigation in the content pane.
FIXED: Various issues with audio playback from the content pane
FIXED: The Prev/Next buttons did not loose focus after being clicked.
FIXED: A rare bug with processing paths containing a “ (left double quote) followed by a " (straight quote).
OTHER: Updated markdown-it to 12.0.4.

VERSION 6.1.6: (2021-04-10) MINOR UPDATE:

• Added script icon.
• Hopefully fixed some cosmetic issues with scrollbars.

VERSION 6.1.2: (2021-01-04)

FIXED: An issue with media playback when one or more items were unchecked.

VERSION 6.1.1: (2020-12-29)

FIXED: Some issues with the reload button.

VERSION 6.1.0: (2020-12-23)

ADDED: Button to open html files in the text editor.
ADDED: Click an item in the Stats menu to select the first matched item in the directory list.
ADDED: Double-click the resize handle in the text editor to reset the visible panes width to 50%.
FIXED: An issue with tabbing into html files with links or other selectable elements.
FIXED: UI prefs for the text editor weren't being set or honored between sessions.
FIXED: Various issues with sync scroll and resizing the text editor panes.
FIXED: An issue where playlist items with a ? in the pathname were not processed correctly.
FIXED: Long cue sheet menus couldn't be scrolled.
Many other bugfixes.

VERSION 6.0.0 (2020-09-07):

SUBDIRECTORIES! (You can thank me here.) Media additions and improvements: durations, playlists, cue sheets, and more.

(NOTE: Some internal prefs and settings have been changed. If you find that a previously open page doesn't load correctly after updating, try clicking "Default User Settings" in the main menu, or deleting the query string from the page url.)

NEW: Now you can browse subdirectories in directory indexes!

• Click the directory icon to show the subdirectory's contents; click again to close it. You can also use Cmd/Ctrl-Right Arrow to open it and Cmd/Ctrl-Left Arrow to close it. (If this doesn't convince you to send me some love, I don't know what will.)

• For now, sorting of subdirectories is not supported; clicking a new sort will close all open subdirectories.

NEW: Show length/duration of media tracks(!); allow sorting by track duration.

NEW: Basic support for .cue sheet files.

• When a media file (audio or video) is loaded from the sidebar, the script will look for a .cue file in the same directory with EXACTLY the same name as the media file.

• If it finds one, it will load the Track ID, the PERFORMER, the TITLE, and the INDEX (time position) from the cuesheet into a menu next to the audio player or in the title bar for videos; there is no support for other cue sheet commands.

• Selecting one of the tracks will jump media playback to that time.

• Note: .cue files can be selected independently in the sidebar and edited and saved (locally), or created in the Text Editor. This may be handy for creating a bookmark for a long media track when a .cue file is not available (for example, for an audiobook downloaded from YouTube).

• Note (MacOS): If you prefer not to clutter the sidebar with .cue files, you can make them invisible by adding a dot to beginning of the file name; the script will still find them.

IMPROVED: Playlist files: Although .m3u files are just plain text, the browser interprets them as binary and will not open them; this is why the script has the "Open Playlist" menu item.

• However, if you change the playlist extension to .txt, the script will be able to read the file as editable text as usual.

• What's new is that if you select such a renamed playlist in the sidebar and then double-click it or type Cmd/Ctr + Down Arrow or Cmd/Ctr + Return, the script will load the playlist in the sidebar.

• NOTE: The renamed .m3u file must be in EXTM3U format.

ADDED: Option to allow playback of all media files( i.e., audio and video), not just the currently selected media type.

ADDED: "Close Playlist" menu item and button which are visible when a playlist/filelist is open.

FIXED: Cmd+W did not close playlists.

ADDED: Loop and shuffle playback options for video files.

FIXED: Loop audio playback was broken.

ADDED: New menu item: "Media Files", with options to "Play All Media Files," "Loop Media", and "Shuffle Media"; the latter two are useful when viewing video files.

FIXED: Media tracks should scroll into view when track ends and next track begins playback.

FIXED: Playlists: caps in file extensions caused incorrect file type detection.

FIXED: Various issues with closing previewed content.

FIXED: Setting text editing options was broken.

FIXED: Handling of HTTP error pages wasn't working. Oh, the irony.

FIXED: "View Sidebar Directory Source" wasn't working.

FIXED: Some issues with autoloading files from file (i.e., not directory) URLs.

CHANGED: Reorganized main menu to make it more compact.

CHANGED: Audio player now displayed at top of content pane, so that the content title is visually connected to the displayed content.

CHANGED: Added .m3u files to the list of ignored formats.

CHANGED: Disabled media checkboxes in Firefox, because Firefox s*cks.

UPDATED Help menu with additional information.

IMPROVED: If you navigate up to a parent directory that contains audio, images, and directories, and if autoloadmedia === true, and if the script's navigation history includes the parent directory, the parent directory will be selected in the sidebar for navigation, while the audio and image file will be loaded and highlighted in the sidebar.

IMPROVED: .webloc and .url files can be opened from preview pane.

IMPROVED: Hovering specific items in the stats will scroll the first instance of that kind in the sidebar into view. Also limited max-height of stats and allowed scrolling.

OTHER: Completely reworked the code for getting directory stats.

OTHER: A few UI refinements.

OTHER: More performance improvements: Removed a bunch of redundant code and function calls, reduced initial DOM manipulations, converted many strings to template literals for more efficient parsing and concatenation.

OLDER CHANGES

VERSION 4.1.2
FIXED, CHANGED, & IMPROVED: Image, font, and font glyph grids.

• Added up/down arrow navigation. This is a change from the previous behavior, where up/down arrows always navigated the sidebar. This will also work if the grid is hidden after selecting an image or font glyph.
• Also added arrow navigation for font glyphs, and :hover and selected styles.
• Fixed a deeply-buried bug that prevented the selected grid item from scrolling into view with arrow navigation.
• Fixed a stupid bug that prevented the first font in the directory from being included in the grid.
• Fixed some problems with normal font file browsing after viewing font glyphs.
• Improved styling for previewed and zoomed images. Known issue: scaled images aren't positioned properly.

FIXED and IMPROVED: Playlists.

• Window title and sidebar head are now changed to indicate presence of playlist.
• First track wasn't being selected when "autoload_media" = true.
• Directory stats weren't being reset after closing a playlist.
• Grid button and "show invisibles" checkbox are hidden with open playlist.

IMPROVED: Currently selected sidebar item will now scroll into view after various events, like sorting change, showing/hiding details, resizing sidebar, etc.
FIXED: Several menu items weren't working: Default User Settings, Export User settings, Contact, and Donate (that might explain a few things...).
FIXED: Document title didn't include entire path.
Many other small bug fixes and style tweaks, including some specifically for Firefox and Safari.

VERSION 4.1.1
A few small fixes and style tweaks.

VERSION 4.1.0
NEW: Basic support for media playlists (.m3u and .m3u8).

• Added "Open Playlist..." item to the main menu.
• Playlist items will replace the current directory items in the sidebar. Times (if available) will be displayed in the "size" column. "Default" sorting = original playlist sort.
• Playlist can be closed via the "Close" button or shortcut, and the previous directory contents will be loaded.
• Streaming links are not supported.
• Beware of cross-origin limitations. For example, if your playlist includes locally-hosted media files, you will need to load it from a file:/// page in your browser.
• For remote files, if you are using a javascript-blocker (like uMatrix or NoScript), you may have to allow scripts from the hosting site (e.g., archive.org) in order for playback to work.
  NEW: Open local fonts directly and view font information and complete glyph repertoire. (The previous ability to browse fonts in the directory list is unchanged.)
• Added "Open Font..." item in the menu item.
• View individual glyphs and save as SVG.
  FIXED: Apps weren't being properly classified in the index.
  FIXED: An issue with formatting the current directory name in the sidebar header.
  IMPROVED: Refreshed UI colors and icons; added icons for more file types.
  IMPROVED: Many styling adjustments, including setting numbers (for sizes and date, etc.) to tabular spacing.
  CHANGED: Renamed "shortcuts" user setting to "bookmarks"; if you use exported settings, you'll have to change this in your code.
  INTERNALS: Prettified and modularized some code. Removed some newly-unnecessary functions. Began to prune CSS. Updated markdown-it to 9.1.0.

VERSION 4.0.6.1
FIXED: Really updated markdown-it and plugins.

VERSION 4.0.6
FIXED: An issue with video display.
FIXED: Several styling issues in Firefox, including textarea in text editor not expanding to full window height.
FIXED: An issue with some servers that add a trailing '/' to the query string.
IMPROVED: Updated markdown-it to v9.0.1; also updated some markdown-it plugins.
NEWS: Version 4.1, with a new feature of interest to designers, is in development.

VERSION 4.0.5b
IMPROVED: Clicking "Parent Directory" link in previewed directories now remembers sorting and numbering prefs.
FIXED: Hopefully fixed close content behavior.
FIXED: Several bugs with sorting items by size.
FIXED: Various minor styling issues and tweaks.
Known issue: PDFs don't always display when selected; this seems to be an issue with Chrome. I will attempt to address this in future updates.

VERSION 4.0.4b Wrapping things up....
Known Issue: Close button function is buggy, particularly with Text Editor and Grids. Fixes coming.
FIXED: Left/Right arrow key navigation failed for video files
FIXED: Content preview title wasn't being set for autoloaded images.
FIXED: An issue with autoloading media and cover art when the first media file was a video.
FIXED: Various issues with parsing local directory indexes in Firefox.
FIXED: Various issues with parsing, calculating, and displaying file size and date-modified information.
IMPROVED: Attempted to make index-type detection and index prep more generic, so that the script will work with more sites "out of the box."
IMPROVED: Made index prep much more efficient, especially for table-type index pages and directories with many items.
IMPROVED: Better error handling for directories with certain percent-encoded characters in file names.
IMPROVED: Changed order of sorting headers to better align with sort data in list.
OTHER: More minor styling issues and improvements.
Please report any bugs or feature requests to mshroud AT gmail.com.
And please consider buying me a coffee (or just let me know what you think), if you find the script useful. Thanks!

VERSION 4.0.3b
ADDED: Preview current directory index source: click the double-caret icon in the sidebar stats footer to toggle preview. This is useful for server configurations that include information in addition to the index itself and is quicker than opening a separate "View source" tab.
FIXED: An issue with content display caused by the fix for pdf display in the previous version.
FIXED: Up directory navigation didn't correctly account for invisible files and directories when selecting previously selected directory.
FIXED: More issues with prepping "pre"-type index pages.
FIXED: Some issues with Error page display.
FIXED: Various minor styling issues.
CHANGED: Moved "Disable Text Editing" menu item to top level.
Many other small improvements and tweaks.

VERSION 4.0.2b
FIXED: Pdf display (I hope).

VERSION 4.0.1b
FIXED: Audio files weren't being loaded.
FIXED: Script would fail if a file name included a special regex character [\^$.|?*+().
FIXED: Various issues with parsing "pre"-type index pages.
IMPROVED: Sorting and display of items with names beginning with white spaces.
IMPROVED: More efficient and robust index type detection.
ADDED: Sorting for previewed directory contents. Initial sorting is the same as the parent's current sort pref.
ADDED: Custom icons and numbering for previewed directory contents; numbering reflects the parent's current numbering pref.
NOTE: There is an issue with Chrome browsers and pdf file display, so pdfs don't display reliably.
NOTE: Some further fixes and styles tweaks coming.

VERSION 4.0.0b:
Numerous additions, improvements, and massive internal changes. Virtually no line of code has been left untouched. "b" === "bugs" likely; updates will be forthcoming.
IMPORTANT: This version uses a new format for user settings in the code; you will have to re-enter your defaults manually after updating.
- Do NOT use exported settings from any earlier version of the script.
NEW: Added independent text editor pane.

• Invoke with Cmd/Ctrl + E, or in main menu > Text Editing > Toggle Text Editor", or under "Show Details".
• To prevent loss of work (and for convenience, e.g., to refer to a file while writing), previously entered text will not be cleared when the "New" button is clicked again, when the "Close" button is clicked, or when a sidebar item is selected.
• Use the Save button to save the text as a text or html file, which can be previewed and edited as usual by navigating to its saved location.
  ADDED: Option to number index items, with new user setting.
  ADDED: Stats footer in sidebar showing dir and file count.
  ADDED: Icons for shortcuts menu to indicate local vs. remote links.
  ADDED: Text editing: Clear button to empty text editing pane.
  CHANGED: Text editing: Github styling customizations: Make table cells top-aligned, darker blockquote text color.
  IMPROVED: Text editing: When saving rendered HTML, header uplinks will be removed.
  IMPROVED: Text editing: Don't close other previewed content when making new text editing pane.
  IMPROVED: Text editing: Much improved warning system for edited text: now uses postMessage to communicate between iframe and parent.
  IMPROVED: Content display: use the same code to prep and style directory contents in the preview pane.
  IMPROVED: Live sorting of grid items (but images and fonts are still sorted separately).
  IMPROVED: Image zoom positioned accurately under click.
  IMPROVED: Better handling of 404 Errors (Page not found): server error message will appear in sidebar, warning icon in content pane.
  IMPROVED: File URLs: If a file URL (instead of a directory) is entered directly in the browser URL bar, the parent directory will be loaded instead and the file automatically selected.
  IMPROVED: Navigation: modifed highlighting styles to show when a non-audio item is selected for navigation vs. when it is loaded in preview pane but not selected (e.g. click a directory and then click an audio file; the directory item will be dimmed).
  IMPROVED: Audio: Greatly simplified shuffle play code and fixed several bugs; shuffle list now correctly updates when individual audio tracks are checked or unchecked.
  CHANGED: Moved scale buttons and prev/next image buttons to preview title bar.
  CHANGED: Sort by "Name" always sorts files and directories together; "Default" sort always keeps files and directories separate.
  FIXED: Text editing: Some issues with split-pane resizing.
  FIXED: Cmd/Ctr+W (close) should work now: previewed content will be closed first, then audio, then the browser tab itself.
  FIXED: Don't autoload audio cover art when next audio track begins; i.e., leave open whatever file is being previewed, including cover art or lyrics.
  FIXED: An issue with sorting by size.
  FIXED: An issue with the user UI font setting.
  FIXED: Navigation by typed string now correctly scrolls directory list.
  OTHER: Many small style fixes and tweaks. Among others, make the previewed image and image grid background color light in default theme.
  INTERNAL: Complete code overhaul.
• Completely rewrote the code that preps the served directory index for processing by the script.
• Completely rewrote and simplied the sorting code.
• Alphabetized User Settings for easier editing.
• Fixes for additional server index configurations.
  – Performance improvments (e.g., removed multiple calls to various functions, reduced initial DOM manipulation, etc.).
• General code cleanup (e.g., removed unused variables and unnecessary globals, named many formerly anonymous functions, fixed numerous syntax errors, etc.).