☰

Supercharged Local Directory File Browser

Makes file:/// directory ("Index of...") pages (and many server-generated index pages) actually useful. Adds sidebar and preview pane; keyboard navigation and sorting; media playback with shuffle, loop, and playlist (m3u) support; preview, edit, and save markdown/plain text files; preview images and fonts, with grid view; user-defined bookmarks; more.

Versione datata 22/09/2019. Vedi la nuova versione l'ultima versione.

  1. // ==UserScript==
  2. // @name              Supercharged Local Directory File Browser
  3. // @version           4.1.3.2
  4. // @description       Makes file:/// directory ("Index of...") pages (and many server-generated index pages) actually useful. Adds sidebar and preview pane; keyboard navigation and sorting; media playback with shuffle, loop, and playlist (m3u) support; preview, edit, and save markdown/plain text files; preview images and fonts, with grid view; user-defined bookmarks; more.
  5. // @author            gaspar_schot
  6. // @license           GPL-3.0-or-later
  7. // @homepageURL       https://openuserjs.org/scripts/gaspar_schot/Supercharged_Local_Directory_File_Browser
  8. // @contributionURL   https://paypal.me/mschrauzer
  9. // @include           file://*
  10. // @include           about:blank
  11.  
  12. // @require      https://code.jquery.com/jquery-latest.min.js
  13.  
  14. // @require https://cdnjs.cloudflare.com/ajax/libs/markdown-it/9.0.1/markdown-it.js
  15. // @require https://cdnjs.cloudflare.com/ajax/libs/markdown-it-footnote/3.0.2/markdown-it-footnote.min.js
  16. // @require https://cdn.jsdelivr.net/npm/markdown-it-toc-done-right@2.1.0/dist/markdown-it-toc-made-right.min.js
  17. // @require https://cdn.jsdelivr.net/npm/markdown-it-sub@1.0.0/dist/markdown-it-sub.min.js
  18. // @require https://cdn.jsdelivr.net/npm/markdown-it-sup@1.0.0/dist/markdown-it-sup.min.js
  19. // @require https://cdn.jsdelivr.net/npm/markdown-it-deflist@2.0.3/dist/markdown-it-deflist.min.js
  20. // @require https://cdn.jsdelivr.net/npm/markdown-it-multimd-table@3.2.3/dist/markdown-it-multimd-table.min.js
  21. // @require https://cdn.jsdelivr.net/npm/markdown-it-center-text@1.0.4/dist/markdown-it-center-text.min.js
  22.  
  23. // @require https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js
  24.  
  25. // UPDATE URL
  26.  
  27. // NOTE: This script was developed in Vivaldi, running on Mac OS High Sierra. It has been tested in various Chrome and Gecko-based browsers.
  28. // It has been minimally tested on Windows and not at all on other OSes. It should work, but please report any issues.
  29. // The script does not work on local directories in Safari because Safari does not allow local directories to be browsed, but it will work on remote directories (or on local directories through a local server).
  30.  
  31. // NOTE: By default, Greasemonkey and Tampermonkey will not run scripts on file:/// urls, so for this script to work, you will have to enable it first.
  32. // For Tampermonkey, go to Chrome extension page, and tick the 'Allow access to file URLs' checkbox at the Tampermonkey extension section.
  33. // For Greasemonkey, open about:config and change greasemonkey.fileIsGreaseable to true.
  34.  
  35. // @namespace https://greatest.deepsurf.us/users/16170
  36. // ==/UserScript==
  37.  
  38. (function() {
  39. 	'use strict';
  40. 	const $ = window.jQuery;
  41.  
  42.     // ***** USER SETTINGS ***** //
  43.  
  44. 	const $settings = {
  45. 		// Paste your exported settings between the two lines below:
  46. 		//--------------------------------------------------------//
  47.  
  48. 		bookmarks: // N.B.: Directory links must end with "/", file links must end with another character.
  49. 		// You may add as many menus and links as you like; just copy the example below and edit as needed.
  50. 		// Local directory bookmarks must begin with "file:///"; external bookmarks must begin with the correct protocol ("http://" or "ftp://", etc.).
  51. 		// Note that because of same-origin security concerns, the browser will not allow you to navigate from an external webpage to a local directory.
  52. 		// But see this page for possible workarounds: https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource
  53. 		[
  54.             {
  55.                 "menu_title":"My Sample Menu",
  56.                 "links":
  57.                 [
  58.                     { "link_name":"My Directory Link 1", "link":"file:///Path/To/My/Directory/" },
  59.                     { "link_name":"My Directory Link 2", "link":"file:///Path/To/My/Directory_2/" },
  60.                     { "link_name":"My External Link", "link":"https://www.mywebpage.com/" },
  61.                     { "link_name":"My File Link", "link":"file:///Path/To/My/File.ext" },
  62.                 ]
  63.             },
  64.             {
  65.                 "menu_title":"My Second Sample Menu",
  66.                 "links":
  67.                 [
  68.                     { "link_name":"My Directory Link 1", "link":"file:///Path/To/My/Directory/" },
  69.                     { "link_name":"My Directory Link 2", "link":"file:///Path/To/My/Directory_2/" },
  70.                     { "link_name":"My External Link", "link":"https://www.mywebpage.com/" },
  71.                     { "link_name":"My File Link", "link":"file:///Path/To/My/File.ext" },
  72.                 ]
  73.             },
  74.         ],
  75. 		// GENERAL USER SETTINGS
  76. 		alternate_background:  true,       // If true (default true), alternate sidebar row background color.
  77. 		apps_as_dirs:         false,       // Un*x/Mac OS only: if true, treat apps as directories; allows app contents to be browsed. This is the default behavior for Chrome.
  78.                                               // If false (default), treat apps as ignored files.
  79. 		autoload_media:        true,       // If true (default: true), the first audio or video file found in a directory will be automatically selected and loaded for playback; also, cover art (if any, will be loaded in the preview pane).
  80. 		autoload_index_files: false,       // If true (default: false), automatically select first "index.xxx" (.xxx !== .htm) file found in directory.
  81.                                               // Note: the browser will automatically load any index.html files it finds in the directory, so the script will not work properly in such cases.
  82. 		theme:              'light',       // Options: 'light' or 'dark'
  83. 		sort_by:          'default',       // Choose from: 'name', 'size', 'date', 'kind', 'ext', 'default'.
  84.                                               // default = Chrome sorting: dirs on top, files alphabetical.
  85. 		dirs_on_top:          false,       // If true, directories will always be listed firs except when sorting by "name" (since otherwise sorting by "name" would equal "default").
  86.                                               // If false (default), directories and files will be sorted together. (In practice, dirs will typically still be separated when sorting by size, kind, and extension.)
  87. 		grid_font_size:           1,       // Default = 1
  88. 		grid_image_size:        184,       // Default = 184 (200px - 16px)
  89. 		show_details:          true,       // If true (default), hide file and directory details; if false, show them.
  90. 		show_ignored_files:   false,       // If true, ignored files will appear greyed-out.
  91.                                               // If false (default), ignored files will be completely hidden from the file list;
  92. 		ignore_ignored_files:  true,       // If true (default), ignored files (see "$row_settings" below, after Keybindings and Changelog) will be greyed-out (default) in the file list and will not be loaded in the content pane when selected;
  93.                                               // If false, ignored files will be treated like normal files, so if they are selected, the browser will attempt to download any file types it can't handle (which makes keyboard navigation inconvenient but may be useful in some circumstances).
  94. 		show_invisibles:       true,       // Un*x/Mac OS only: If true (default), files or directories beginning with a "." will be hidden.
  95. 		show_numbers:          true,       // If true (default true), number index items
  96. 		UI_font: 'system-ui, sans-serif',  // Choose an installed font for the UI; if undefined, use browser defaults instead.
  97. 		UI_font_size:        '13px',       // Choose a default UI font size; use any standard CSS units.
  98. 		use_custom_icons:      true,       // if true (default), use custom icons for dirs and files
  99.                                               // if false, use browser/server default icons
  100. 		// TEXT EDITING SETTINGS
  101. 		enable_text_editing:   true,       // If true (default), allow plain text files to be edited.
  102. 		default_text_view: 'preview_text', // Options: 'source_text' or 'preview_text' for text editor.
  103.                                               // Note that split_view = true overrides this setting.
  104. 		split_view:            true,       // If true, show split view on plain text file load.
  105.                                               // if true (default), use default preview_text setting.
  106. 		sync_scroll:           true        // If true (default: true), show split view on plain text file load
  107.                                               // if false, use default preview_text setting.
  108. 		//--------------------------------------------------------//
  109. 		// Paste your exported settings between the above two lines.
  110. 	};
  111.  
  112. 	// $ROW_TYPES:
  113. 	// DO NOT DELETE ANY EXISTING CATEGORIES!
  114. 	// Add file extensions for sorting and custom icon display to the existing categories.
  115. 	// You can also define your own new categories, but do not add an extension to more than one row_type category.
  116. 	// Do not add leading "." to the extensions.
  117. 	const $row_types = {
  118. 		// myRowType: ['ext1','ext2'],
  119. 		dir:      ['/'],
  120. 		app:      ['app/','app','bat','cgi','com','exe','jar','msi','wsf'],
  121. 		alias:    ['alias','desktop','directory','lnk','symlink'],
  122. 		archive:  ['7z','archive','b6z','bin','bzip','bz2','cbr','dmg','gz','iso','mpkg','pkg','rar','sit','sitx','tar','tar.gz','zip','zipx'],
  123. 		audio:    ['aac','aif','aiff','ape','flac','m4a','mp3','ogg','opus','wav'],
  124. 		bin:      ['a','dll','dylib','icc','msi','o'],
  125. 		code:     ['bak','bash','bash_profile','bashrc','c','cfg','cnf','codes','coffee','conf','csh','cshrc','cson','css','custom_aliases','default','dist','editorconfig','emacs','example','gemspec','gitconfig','gitignore','gitignore_global','h','hd','ini','js','json','jsx','less','list','local','login','logout','lua','mkshrc','old','php','pl','plist','pre-oh-my-zsh','profile','pth','py','rb','rc','rdoc','sass','settings','sh','strings','taskrc','tcl','viminfo','vimrc','vue','xml','yaml','yml','zlogin','zlogout','zpreztorc','zprofile','zsh','zshenv','zshrc'],
  126. 		database: ['accdb','db','dbf','mdb','pdb','sql', 'sqlite','sqlitedb','sqlite3'],
  127. 		ebook:    ['azw','azw1','azw3','azw4','epub','ibook','kfx','mobi','tpz'],
  128. 		font:     ['otf','ttf','woff','woff2','afm','pfb','pfm','tfm'],
  129. 		graphics: ['afdesign','ai','book','dtp','eps','fm','icml','idml','indd','indt','inx','mif','pmd','pub','qxb','qxd','qxp','sla','swf'],
  130. 		htm:      ['htm','html','xhtm','xhtml'],
  131. 		image:    ['apng','bmp','gif','ico','jpeg','jpg','png','svg','webp'],
  132. 		ignored_image: ['ai','arw','cr2','dng','eps','jpf','nef','psd','psd','raw','tif','tiff'],
  133. 		markdown: ['md','markdown','mdown','mkdn','mkd','mdwn','mdtxt','mdtext'],
  134. 		office:   ['csv','doc','docx','epub','key','numbers','odf','ods','odt','pages','rtf','scriv','wpd','wps','xlr','xls','xlsx','xlm'],
  135. 		pdf:      ['pdf'],
  136. 		system:   ['DS_Store','ds_store','icon','ics'],
  137. 		text:     ['log','nfo','txt','m3u'],
  138. 		video:    ['m4v','mov','mp4','mpeg','webm']
  139. 	};
  140.  
  141. 	// $ROW_SETTINGS: Ignore or Exclude files by extension
  142. 	const $row_settings = {
  143. 		// Ignore: $row_types or files with extensions added here will not be loaded if selected in the sidebar (prevents the browser from attempting to download the file).
  144. 		ignore: $row_types.archive.concat( 'alias', $row_types.bin, $row_types.database, $row_types.graphics, $row_types.ignored_image, $row_types.office, $row_types.system),
  145. 		// Exclude: Files with these exensions will not be inverted in dark mode
  146. 		exclude: ['htm','html','xhtm','xhtml']
  147. 	};
  148.  
  149. 	// ***** END USER SETTINGS ***** //
  150.  
  151. 	// ## FEATURES INCLUDE:
  152. 	// - Resizable sidebar and directory/file preview pane.
  153. 	// - Arrow navigation in sidebar:
  154. 	//   - Up and Down Arrows select next/prev item.
  155. 	//   - Left and Right Arrows select next/prev item of same type.
  156. 	// - Navigate sidebar by typed string.
  157. 	// - Show/Hide file details (size (if avail), date modified (if avail), kind, extension).
  158. 	// - Sort sidebar items by name or file details.
  159. 	//   - Default sort = sort by name with folders on top.
  160. 	// - Preview all file types supported by browser (html, text, images, pdf, audio, video, etc.) and preview fonts.
  161. 	// - Preview and edit markdown and plain text files, with option to save files locally.
  162. 	//   - Markdown rendered with markdownit.js ( https://github.com/markdown-it/markdown-it ).
  163. 	//   - Uses Github Markdown styles for preview ( https://github.com/sindresorhus/github-markdown-css ), with a few customizations.
  164. 	//   - Support for:
  165. 	//     - TOC creation ( `${toc}` ) ( https://github.com/nagaozen/markdown-it-toc-done-right )
  166. 	//     - Multimarkdown table syntax ( https://github.com/RedBug312/markdown-it-multimd-table )
  167. 	//     - Live checkboxes ( `\[ ], [x]` ), allowed in lists and deflists.
  168. 	//     - Superscript ( `^sup^` ) ( https://github.com/markdown-it/markdown-it-sup )
  169. 	//     - Subscript ( `~sub~` ) ( https://github.com/markdown-it/markdown-it-sub )
  170. 	//     - Definition lists ( https://github.com/markdown-it/markdown-it-deflist; for syntax, see http://pandoc.org/MANUAL.html#definition-lists )
  171. 	//     - Centered text ( `->centered<-` ) ( https://github.com/jay-hodgson/markdown-it-center-text )
  172. 	//     - Footnotes ( https://github.com/markdown-it/markdown-it-footnote )
  173. 	//   - View source text, preview, or split pane with proportional sync scroll.
  174. 	//   - Save edited source text or previewed HTML.
  175. 	// - Create and edit text in separate text editor.
  176. 	// - Audio and video playback, with shuffle, loop, skip audio +/- 10 or 30 sec via keyboard.
  177. 	//   - Preview other files (e.g., lyrics or cover art) in same directory while playing audio.
  178. 	//   - User setting to autoload cover art (if any images in directory, load "cover.ext" or first image found)
  179. 	//   - Grid view for images and fonts.
  180. 	// - 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):
  181. 	//   - Light or Dark theme.
  182. 	//   - Bookmarks for local or remote directories.
  183. 	//   - Default image grid size.
  184. 	//   - Default UI font size and font-family.
  185. 	//   - Default UI font and font-size.
  186. 	//   - Default file sorting.
  187. 	//   - Sort with directories on top.
  188. 	//   - Treat apps as directories (MacOS and *nix only)
  189. 	//   - Show or hide invisible files.
  190. 	//   - Show or hide ignored files in the ignored files list (see $row_settings in code below $settings).
  191. 	//   - Show or hide file details.
  192. 	//   - Use custom file icons or browser defaults.
  193. 	//   - Autoload index.ext files.
  194. 	//   - Autoload cover art in directories with audio files.
  195. 	//   - Text editing default view: split, source, or preview.
  196. 	//   - Text editing sync scroll: on or off.
  197.  
  198. 	// ## KEYBINDINGS (These don't work in all browsers):
  199.  
  200. 	// - <kbd>Arrow Up/Down</kbd>: Select prev/next item.
  201. 	//   - 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.
  202. 	// - <kbd>Arrow Left/Right</kbd>: Select prev/next row of the same kind as the current selection.
  203. 	//   - If current selection is a media file, select and begin playback of the next media item.
  204. 	// - <kbd>Opt/Alt + Arrow Left/Right</kbd>: Skip audio ±10s
  205. 	// - <kbd>Opt/Alt + Shift + Arrow Left/Right</kbd>: Skip audio ±30s
  206. 	// - <kbd>Cmd/Ctrl + Arrow Up</kbd>: Go to parent directory
  207. 	// - <kbd>Cmd/Ctrl + Arrow Down</kbd>: Open selected directory
  208. 	// - <kbd>Return</kbd>: Open selected directory, select file, or pause/play media.
  209. 	// - <kbd>Space</kbd>: Pause/Play media files
  210. 	// - <kbd>Cmd/Ctrl + D</kbd>: Toggle file details (size, date modified) in some index page types.
  211. 	// - <kbd>Cmd/Ctrl + E</kbd>: Show text editor.
  212. 	// - <kbd>Cmd/Ctrl + G</kbd>: Show or Reset Grid.
  213. 	// - <kbd>Cmd/Ctrl + I</kbd>: Toggle Invisibles.
  214. 	// - <kbd>Cmd/Ctrl + Shift + O</kbd>: Open selected item in new window/tab.
  215. 	// - <kbd>Cmd/Ctrl + R</kbd>: Reload grids and previewed content, reset scaled images/fonts, reset media files to beginning.
  216. 	// - <kbd>Cmd/Ctrl + W</kbd>: Close previewed content (doesn't work in all browsers; use close button instead), or close window if no content is being previewed.
  217. 	// - <kbd>Cmd/Ctrl + Shift + < or ></kbd>: Scale preview items and grids.
  218.  
  219. 	// CHANGELOG:
  220.  
  221.     // **VERSION 4.1.3.2**
  222.     // **FIXED:** Image grid didn't show SVG files if width and height were set to 100%.
  223.     // **FIXED:** Up/Down arrow navigation didn't work for images with hidden grid.
  224.     // Added custom folder favicon for local directories.
  225.     // Other small style tweaks.
  226.  
  227.     // **VERSION 4.1.3.1**
  228.     // **FIXED:** Images couldn't be scaled to less than 24 x 24px.
  229.  
  230.     // **VERSION 4.1.3**
  231.     // **FIXED:** _Finally_ fixed image scaling and zooming. Sorry for the delay.
  232.     // **IMPROVED:** Allow image scaling > 100%.
  233.     // **IMPROVED:** Show image scale percentage in the content title bar.
  234.     // **IMPROVED:** Show custom file icons in content title bar.
  235.     // **IMPROVED:** Highlight grid button when grid is loaded (or hidden).
  236.     // **FIXED:** Invisible files were being selected even if "Show invisibles" was unchecked.
  237.     // Various other small fixes and style tweaks.
  238.  
  239.     // **VERSION 4.1.2**
  240.     // **FIXED, CHANGED, & IMPROVED:** Image, font, and font glyph grids.
  241.     //   - 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.
  242.     //   - Also added arrow navigation for font glyphs, and :hover and selected styles.
  243.     //   - Fixed a deeply-buried bug that prevented the selected grid item from scrolling into view with arrow navigation.
  244.     //   - Fixed a stupid bug that prevented the first font in the directory from being included in the grid.
  245.     //   - Fixed some problems with normal font file browsing after viewing font glyphs.
  246.     //   - Improved styling for previewed and zoomed images.
  247.     //
  248.     // **FIXED and IMPROVED:** Playlists.
  249.     //   - Window title and sidebar head are now reset to indicate presence of playlist.
  250.     //   - First track wasn't being selected when "autoload_media" = true.
  251.     //   - Directory stats weren't being reset after closing a playlist.
  252.     //   - Grid button and "show invisibles" checkbox are hidden with open playlist.
  253.     //
  254.     // **IMPROVED:** Currently selected sidebar item will now scroll into view after various events, like sorting change, showing/hiding details, resizing sidebar, etc.
  255.     // **FIXED:** Several menu items weren't working: Default User Settings, Export User settings, Contact, and [Donate](https://paypal.me/mschrauzer) (that might explain a few things...).
  256.     // **FIXED:** Document title didn't include entire path.
  257.     // Many other small bug fixes and style tweaks, including some specifically for Firefox and Safari.
  258.  
  259.     // **VERSION 4.1.1**
  260.     // A few small fixes and style tweaks.
  261.  
  262.     // **VERSION 4.1.0**
  263.     // **NEW:** Basic support for media playlists (.m3u and .m3u8).
  264.     // - Added "Open Playlist..." item to the main menu.
  265.     // - 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.
  266.     // - Playlist can be closed via the "Close" button or shortcut, and the previous directory contents will be loaded.
  267.     // - Streaming links are not supported.
  268.     // - 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.
  269.     // - 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.
  270.     // **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.)
  271.     // - Added "Open Font..." item in the menu item.
  272.     // - View individual glyphs and save as SVG.
  273.     // **FIXED:** Apps weren't being properly classified in the index.
  274.     // **FIXED:** An issue with formatting the current directory name in the sidebar header.
  275.     // **IMPROVED:** Refreshed UI colors and icons; added icons for more file types.
  276.     // **IMPROVED:** Many styling adjustments, including setting numbers (for sizes and date, etc.) to tabular spacing.
  277.     // **CHANGED:** Renamed "shortcuts" user setting to "bookmarks"; if you use exported settings, you'll have to change this in your code.
  278.     // **INTERNALS:** Prettified and modularized some code. Removed some newly-unnecessary functions. Began to prune CSS.
  279.     // - Updated markdown-it to 9.1.0.
  280.  
  281.     // ***** GENERAL SETUP ***** //
  282.  
  283. 	// ************************************ //
  284. 	// DON'T EDIT ANYTHING BELOW THIS LINE. //
  285. 	// ************************************ //
  286.  
  287.     // PATHS
  288. 	// Fix "%" error in file name; see https://stackoverflow.com/questions/7449588/why-does-decodeuricomponent-lock-up-my-browser
  289.  	function decodeURIComponentSafe(s) {
  290.  		if ( !s ) { return s; }
  291.         return decodeURIComponent(s.replace(/%(?![0-9a-fA-F]{2})/g, '%25') ); // replace % with %25 if not followed by two a-f/number
  292.  	}
  293.     const $protocol = window.location.protocol;
  294. 	const $origin = $protocol +'//'+ window.location.host;
  295. 	const $location = decodeURIComponentSafe( [location.protocol, '//', location.host, location.pathname].join('') );
  296. 	const $current_dir_path = $location.replace(/([\/|_|—])/g,'$1<wbr>').replace(/\\/g,'/'); // URL w/o query string for display
  297.  
  298.     function escapeStr(str) { str = str.replace(/([\^\$\|\?\*\+\(\)\[])/g,'\$1'); }
  299.  
  300. 	// if URL is a file, change window location to parent dir, add querystring of file name; then autoload file.
  301. 	function loadFile() {
  302. 		if ( $location.slice($location.lastIndexOf('/')).indexOf('.') !== -1 && !$location.endsWith('/') && window.top === window.self ) {
  303. 			let $query_prefs = getQueryPrefs();
  304. 			$query_prefs.set( 'file', $location.slice($location.lastIndexOf('/') + 1) );
  305. 			window.location = $location.slice(0,$location.lastIndexOf('/') + 1) +'?'+ $query_prefs;
  306. 			return;
  307. 		}
  308. 	}
  309. 	loadFile();
  310.  
  311. 	// QUERY PREFS
  312. 	function getQueryPrefs() { return new URL(window.location).searchParams; }
  313.     // const initialQueryPrefs = getQueryPrefs();
  314. 	// set query key/value
  315. 	function setQuery(key, value) {
  316. 		let $query_prefs = getQueryPrefs();
  317. 		$query_prefs.set( key, value );
  318. 		updateQuery($query_prefs);
  319. 	}
  320. 	// get query value
  321. 	function getQuery(key) {
  322. 		let $query_prefs = getQueryPrefs();
  323. 		let value = '';
  324. 		if ( key === 'width' ) {
  325. 			value = ( !$query_prefs.has(key) ? 30 : Math.round(100 * Number.parseInt($query_prefs.get('width'))/window.innerWidth) ); // number string
  326. 		} else {
  327. 			value = ( $query_prefs.has(key) ? $query_prefs.get(key) : $settings[key] !== undefined ? $settings[key].toString() : '' );
  328.             value = value.replace('%2F','').replace('/',''); // some servers add a '/' to end of query string
  329. 		}
  330. 		return value;
  331. 	}
  332. 	// toggle query key
  333. 	function toggleQuery(key) {
  334. 		let $query_prefs = getQueryPrefs();
  335. 		let nonBoolPrefs = {
  336. 			'theme_light':     {'theme':'dark'},
  337. 			'theme_dark':      {'theme':'light'},
  338. 			'source_text':     {'default_text_view':'preview_text'},
  339. 			'preview_text':    {'default_text_view':'source_text'},
  340. 			'sort_by_default': {'sort_by':'default'},
  341. 			'sort_by_name':    {'sort_by':'name'},
  342. 			'sort_by_size':    {'sort_by':'size'},
  343. 			'sort_by_date':    {'sort_by':'date'},
  344. 			'sort_by_kind':    {'sort_by':'kind'},
  345. 			'sort_by_ext':     {'sort_by':'ext'}
  346. 		};
  347. 		var value, queryValue, settingsValue;
  348. 		if ( nonBoolPrefs[key] !== undefined ) {
  349. 			value = Object.values(nonBoolPrefs[key]).toString();
  350. 			key = Object.keys(nonBoolPrefs[key]).toString(); // must come after value: i.e., don't redefine key before getting value
  351. 			if ( $settings[key] === value ) { $query_prefs.delete( key ); } else { $query_prefs.set( key, value ); }
  352. 		} else {
  353. 			queryValue = $query_prefs.get(key);
  354. 			settingsValue = $settings[key];
  355. 			value = ( queryValue === null ? settingsValue.toString() : queryValue.toString() );
  356. 			value = ( value === 'true' ? 'false' : 'true' );
  357. 			if ( ( queryValue !== null && queryValue !== settingsValue ) ) {
  358. 				$query_prefs.delete( key );
  359. 			} else {
  360. 				$query_prefs.set( key, value );
  361. 			}
  362. 		}
  363. 		updateQuery($query_prefs);
  364. 	}
  365. 	// remove query key
  366. 	function removeQuery(key) {
  367. 		let $query_prefs = getQueryPrefs();
  368. 		$query_prefs.delete(key);
  369. 		updateQuery($query_prefs);
  370. 	}
  371. 	// update query string
  372. 	function updateQuery(querystr) {
  373.         querystr = querystr.toString().replace('%2F','').replace('/','');
  374. 		window.history.replaceState({}, document.title, window.location.pathname +'?'+ querystr);
  375. 		updateParentLinks();
  376. 	}
  377.  
  378. 	// ***** SET UP UI ELEMENTS ***** //
  379.  
  380. 	// SIDEBAR ELEMENTS
  381. 	// ***** BUILD MENUS ***** //
  382. 	// Parent and Parents Menus
  383. 	function updateQueryStr(str) {
  384. 		str = str.replace(/([^\?]*)selected=[^&]*(.*)$/m,'$1$2') // delete current selected query, if any
  385. 			.replace(/([^\?]*)history=(\d+)\+*([^&]*)(&*)(.*)/m,'$1$4$5&selected=$2&history=$3').replace(/&{2,}/g,'&').replace(/\?&/m,'\?'); // format query with selected and history at end
  386. 		if ( str.endsWith('&history=') ) { str = str.replace(/(.+)&history=$/m,'$1'); } // if no history, delete query
  387. 		return str;
  388. 	}
  389.     // create links
  390. 	function createParentLinks() {
  391. 		let $links = [];
  392. 		let str = decodeURIComponentSafe(window.location.search);
  393.             str = str.replace('/','').replace('%2F','');
  394. 		let $linkPieces = $location.split('/');
  395.    		    $linkPieces = $linkPieces.slice(2,-2); // remove beginning and ending empty elements and current directory
  396. 		while ( $linkPieces.length > 0 ) { // while there are link pieces...
  397. 			str = updateQueryStr(str); // update selected and history
  398. 			let link = $protocol +'//'+ $linkPieces.join('/') +'/'+ str; // assemble link
  399. 			$links.push(link); // add to link array
  400. 			$linkPieces.pop(); // remove last link piece and repeat...
  401. 		}
  402. 		return $links;
  403. 	}
  404.     // create menu items
  405. 	function createParentLinkItems() {
  406. 		let $parent_link_menu_items = [];
  407. 		let $links = createParentLinks();
  408.         $('#parent_dir_menu').find('a').attr( 'href', $links[0] ); // set parent link
  409. 		for ( let i = 0; i < $links.length; i++ ) {
  410.             let display_name = $links[i].slice(0,$links[i].lastIndexOf('?') - 1);
  411.                 display_name = display_name.replace(/\//g,'\/<wbr>');
  412. 			let menu_item = '<li><a href="'+ $links[i] +'">' + display_name + '/</a></li>';
  413. 			$parent_link_menu_items.push(menu_item);
  414. 		}
  415. 		return $parent_link_menu_items; // return parents link items
  416. 	}
  417. 	function updateParentLinks() { $('#parents_dir_menu').siblings('ul').empty().append( createParentLinkItems() ); }
  418.  
  419. 	// MENUS: User bookmarks
  420. 	function bookmarksMenuItems() {
  421. 		const $bookmarks = $settings.bookmarks;
  422.           let menu_items = [];
  423.           let $links_arr = [];
  424.           let $links_arr_str = '';
  425.           let $links;
  426.         if ( $bookmarks.length > 0 ) {
  427. 			for ( let i = 0; i < $bookmarks.length; i+=1 ) {
  428. 				$links = $bookmarks[i].links;
  429. 				// make array of links
  430. 				for ( let j = 0; j < $links.length; j+=1 ) {
  431. 					if ( !$links[j].link.endsWith('/') ) {
  432. 						$links[j].link = $links[j].link.slice(0,$links[j].link.lastIndexOf('/') + 1) + '?file=' + $links[j].link.slice($links[j].link.lastIndexOf('/') + 1) ;
  433. 					}
  434.                     $links[j].link_name = $links[j].link_name.split('/').join('/<wbr>');
  435. 					$links_arr[j] = '<li><a href="'+ $links[j].link +'">' + $links[j].link_name + '</a></li>';
  436. 				}
  437. 				$links_arr_str = $links_arr.join('');
  438. 				menu_items[i] = '<li class="bookmarks has_submenu"><a>'+ $bookmarks[i].menu_title +'</a><ul>'+ $links_arr_str +'</ul></li>';
  439. 			}
  440. 			menu_items = menu_items.join('');
  441. 		}
  442. 		return menu_items;
  443. 	}
  444. 	// MENUS: Other menu items
  445.     const MenuItems = function() {
  446.            let sort_by =              '<li class="has_submenu rule" id="sort_by"><span>Sort by&hellip;</span><ul id="sort_menu"><li id="name"><span>Name</span></li><li id="size"><span>Size</span></li><li id="date"><span>Date</span></li><li id="kind"><span>Kind</span></li><li id="ext"><span>Extension</span></li><li id="default"><span>Default</span></li></ul>';
  447.            let autoload_media =       '<li class="toggle_UI_pref rule" id="autoload_media"><span id="autoload_media_menu">Autoload Media</span></li>';
  448.            let theme =                '<li><span id="theme" class="toggle_UI_pref"><span id="theme_dark">Dark Theme</span><span id="theme_light">Light Theme</span></span></li>';
  449.            let alternate_background = '<li class="toggle_UI_pref" id="alternate_background"><span>Alternate Backgrounds</span></li>';
  450.            let show_numbers =         '<li class="toggle_UI_pref rule" id="show_numbers"><span>Show Numbers</span></li>';
  451.            let text_editing =         '<li class="has_submenu" id="text_editing"><span>Text Editing</span><ul id="text_editing_menu"><li id="text_editor_menu_item" class="rule"><span id="text_editor">Toggle Text Editor</span></li><li id="split_view" class="toggle_UI_pref rule"><span id="toggle_split_view">Split View</span></li><li id="preview_text_menu_item"><span class="toggle_UI_pref" id="source_text">Source Text</span><span class="toggle_UI_pref" id="preview_text">Preview Text</span></li></ul>';
  452.            let disable_text_editing = '<li class="rule"><span class="toggle_UI_pref" id="enable_text_editing">Disable Text Editing</span></li>';
  453.            let open_playlist =        '<li class="rule"><label id="open_playlist_label" for="open_playlist">Open Playlist&hellip;</label><input type="file" id="open_playlist" name="open_playlist" accept=".m3u,.m3u8"></input></li>';
  454.            let open_font =            '<li class="rule"><label id="open_font_label" for="open_font">Open Font&hellip;</label><input type="file" id="open_font" name="open_font" accept=".otf,.ttf,.woff"></input></li>';
  455.            let default_settings =     '<li><a href="#" id="default_settings" title="Delete URL query string and reload page.">Default User Settings</a></li>';
  456.            let export_settings =      '<li class="rule"><a href="#" id="export_settings" title="Export user settings to text file.">Export User Settings</a></li>';
  457.            let contact_link =         '<li><a id="contact" href="mailto:mshroud@vivaldi.net">Contact</a></li>';
  458.            let donate_link =          '<li><a id="donate" href="https://paypal.me/mschrauzer" target="_blank" rel="noopener">Donate</a></li>';
  459.         return sort_by + theme + alternate_background + show_numbers + autoload_media + text_editing + disable_text_editing + open_playlist + open_font + default_settings + export_settings + contact_link + donate_link;
  460.     };
  461.     const SidebarHeaderEls = function() {
  462.            let parent_link_items =    createParentLinkItems();
  463.            let parent_link =          $(parent_link_items[0]).find('a').attr('href');
  464.                parent_link_items =    parent_link_items.toString().replace(/<\/li>,<li>/g,'</li><li>');
  465.            let parent_dir_menu =     '<nav id="parent_dir_menu"><a href="'+ parent_link +'">&nbsp;</a></nav>';
  466.            let parents_dir_menu =    '<nav id="parents_dir_menu"><div>'+ $current_dir_path +'</div></nav><ul class="menu">'+ parent_link_items +'</ul>';
  467.            let bookmarks_menu =      '<nav id="bookmarks_menu"><div>&nbsp;</div></nav><ul id="bookmarks" class="menu">'+ bookmarksMenuItems() + MenuItems() +'</ul>';
  468.            let show_details =        '<button class="toggle_UI_pref" id="show_details" tabindex="-1"><span>Show details</span><span>Hide details</span></button>';
  469.            let inv_checkbox =        '<label><input class="toggle_UI_pref" type="checkbox" id="show_invisibles" for="inv_checkbox" name="inv_checkbox" tabindex="-1" />Show Invisibles</label>';
  470.            let grid_btn =            '<td id="grid_btn" tabindex="-1" title="Show Grid"><ul class="menu"><li id="show_image_grid">Show Image Grid</li><li id="show_font_grid">Show Font Grid</li></ul></td>';
  471.            let sorting =             '<tr class="header"><th id="sorting" colspan="4"><div><div class="toggle_UI_pref name sorting" id="sort_by_name" colspan="2"><span><input id="play_toggle" type="checkbox" tabindex="-1" checked="true" />Name</span></div><div class="toggle_UI_pref sorting" id="sort_by_default" colspan="2"><span>Default</span></div><div class="toggle_UI_pref details sorting" id="sort_by_size"><span>Size</span></div><div class="toggle_UI_pref details sorting" id="sort_by_date"><span>Date</span></div><div class="toggle_UI_pref details sorting" id="sort_by_kind"><span>Kind</span></div><div class="toggle_UI_pref details sorting" id="sort_by_ext"><span>Ext</span></div></div></th></tr>';
  472.            let text_editor_row =     '<tr id="text_editor_row"><th colspan="4"><a href="#" title="Toggle Text Editor">Text Editor</a></th></tr>';
  473.            let sidebar_header =      '<table id="sidebar_header"><thead><tr id="sidebar_title"><th colspan="4"></th></tr></thead><tbody><tr id="sidebar_menus"><td>'+ parent_dir_menu +'</td><td colspan="2">'+ parents_dir_menu +'</td><td id="bookmarks_menu_container">'+ bookmarks_menu +'</td></tr><tr id="sidebar_buttons"><td colspan="3">'+ show_details + inv_checkbox +'</td>'+ grid_btn +'</tr>'+ sorting + text_editor_row +'</tbody></table>';
  474.            let sidebar_header_els =   sidebar_header;
  475.         return sidebar_header_els;
  476.     };
  477.     // Dir List Elements
  478.     const SidebarDirListEls = function() {
  479.            let dir_list_body =       '<tbody id="tbody"></tbody>';
  480.            let dir_list_foot =       '<tfoot id="tfoot"><tr id="index_stats"><td id="stats"></td><td id="toggle_info" data-kind="info" title="View current directory index source">&nbsp;</td></tr></tfoot>';
  481.            let sidebar_dir_list_els = '<table id="dir_list">'+ dir_list_body + dir_list_foot +'</table>';
  482.         return sidebar_dir_list_els;
  483.     };
  484.     // CONTENT PANE ELEMENTS
  485.     const ContentHeaderEls = function() {
  486.            let title_buttons_left =  '<td id="title_buttons_left"><button id="reload_btn" tabindex="-1"><span>Reload</span></button><button id="prev_next_btns" class="split_btn"><span id="prev_btn"><span>&nbsp;</span></span><span id="next_btn"><span>&nbsp;</span></span></button></td>';
  487.            let title =               '<td id="title"><span></span></td>';
  488.            let title_buttons_right = '<td id="title_buttons_right"><button id="scale" class="split_btn"><span id="decrease">&nbsp;</span><span id="increase">&nbsp;</span></button><button id="close_btn" tabindex="-1"><span>Close</span></button></td>';
  489.            let content_title =       '<tr id="content_title">'+ title_buttons_left + title + title_buttons_right +'</tr>';
  490.            let content_header_els =  '<header id="content_header"><table><tbody>'+ content_title + ContentAudioEls() +'</tbody></table></header>';
  491.         return content_header_els;
  492.     };
  493.     // Content containers
  494.     const ContentEls = function() {
  495.            let content_grid =        '<div id="content_grid" data-grid-scale-factor="1" data-kind="grid"></div>';
  496.            let content_text =        '<div id="content_text"></div>';
  497.            let content_font =        '<div id="content_font" class="content" spellcheck="false" data-kind="font">'+ ContentFontEls() +'</div>';
  498.            let content_image =       '<div id="content_image" class="content" data-kind="image"><img /></div>';
  499.            let content_video =       '<video id="content_video" class="content media" controls data-kind="video">Your browser does not support the video tag.</video>';
  500.            let content_pdf =         '<embed id="content_pdf" class="content" name="plugin" tabindex="0" data-kind="pdf"></embed>';
  501.            let content_iframe =      '<iframe id="content_iframe" class="content" name="content_iframe" sandbox="allow-scripts allow-same-origin allow-modals" tabindex="0" data-kind="file"></iframe>';
  502.            let content_els =         '<section id="content_container">'+ content_grid + content_text + content_font + content_image + content_pdf + content_video + content_iframe +'</section>';
  503.         return content_els;
  504.     };
  505.     // Content Audio Els
  506.     const ContentAudioEls = function() {
  507.            let prev_track =          '<div id="prev_track" class="prev_next_track_btn" title="Previous track">&nbsp;</div>';
  508.            let next_track =          '<div id="next_track" class="prev_next_track_btn" title="Next track">&nbsp;</div>';
  509.            let audio_player =        '<audio id="audio" preload="auto" tabindex="0" controls >Sorry, your browser does not support HTML5 audio.</audio>';
  510.            let loop =                '<label><input type="checkbox" id="loop" for="loop" name="loop" tabindex="0" />Loop</label>';
  511.            let shuffle =             '<label><input type="checkbox" id="shuffle" for="shuffle" name="shuffle" tabindex="0" />Shuffle</label>';
  512.            let checkbox_cont =       '<div id="checkbox_div">'+ loop + shuffle +'</div>';
  513.            let close_audio =         '<div id="close_audio" title="Close audio"></div>';
  514.            let content_audio_title = '<tr id="content_audio_title"><td colspan="3"></td></tr>';
  515.            let content_audio_els =    content_audio_title +'<tr id="content_audio"><td colspan="3"><div id="audio_container">'+ prev_track + next_track + audio_player + close_audio +'</div>'+ checkbox_cont +'</td></tr>';
  516.         return content_audio_els;
  517.     };
  518.     // Content Font Els
  519.     const ContentFontEls = function() {
  520.            let sample_string =       'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />0123456789 [(!@#$%^&*;:)]';
  521.            let specimen =            '<div class="specimen" contenteditable="true" style="font-size:4em;word-break: break-all;line-height: 1.2;">'+ sample_string +'</div>';
  522.            let hamburger_string =    '<h1 style="font-size:8em">Typography</h1><h4 style="font-size:1.618em">The art of using types to produce impressions on paper, vellum, &amp;c.</h4><h2 style="font-size:6em;text-align:justify;">S P E C I M E N</h2><h3 style="font-size:2em">Typography is the work of typesetters (also known as compositors), typographers, graphic designers, art directors, manga artists, comic book artists, graffiti artists, and, now, anyone who arranges words, letters, numbers, and symbols for publication, display, or distribution.</h3>';
  523.            let lorem_string =        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
  524.            let lorem =               '<div class="lorem" style="text-align:justify;font-size:1em;line-height: 1.4;column-gap:1.5em;overflow-wrap: normal;word-break: normal;" contenteditable="true">'+ lorem_string +'</div>';
  525.            let lorem2 =              lorem.replace('style="','style="columns:2;');
  526.            let lorem3 =              lorem.replace('style="','style="columns:3;');
  527.            let hamburger =           '<div class="hamburger" style="text-align:justify" contenteditable="true">'+ hamburger_string +'</div>'+ lorem + lorem2 + lorem3 +'</div>';
  528.            let font_specimen =       '<div id="font_specimen">'+ specimen + hamburger + ContentFontViewer() +'</div>';
  529.         return font_specimen;
  530.     };
  531.     const ContentFontViewer = function() {
  532.         let glyphs_container =    '<div id="glyphs_container"></div>';
  533.         let glyph_viewer =        '<div id="glyph_viewer"><div id="glyph_viewer_info" style="height:18px;line-height:1.6;"><button id="save_svg_hidden" style="visibility:hidden;float:left;">Save SVG</button><div></div><button id="save_svg" style="float:right;">Save SVG</button></div></div>';
  534.         let font_viewer =         '<div id="font_viewer" style="font-family:unset">'+ glyphs_container + glyph_viewer +'</div>';
  535.         return font_viewer;
  536.     }
  537.     // ASSEMBLE SIBEBAR & CONTENT PANE ELEMENTS
  538.     const MainContent = function() {
  539.            let handle =              '<div id="handle"></div>';
  540.            let toggle_sidebar =      '<div id="toggle_sidebar"></div>';
  541.            let warnings =            '<div id="warnings"><h3>Warning:</h3><p id="warning_unsaved">You have unsaved changes.</p><p id="warning_clear">Are you sure you want to clear all your text?</p><p id="warning_local">Can\'t load local directories or files from non-local web pages. Use your browser\'s bookmarks or enter the URL manually.</p><div><button id="warning_ignore_btn">Don\'t Save</button><button id="warning_cancel_btn" >Cancel</button><button id="warning_clear_btn">Clear</button><button id="warning_save_btn">Save</button><button id="warning_ok_btn">OK</button></div></div>';
  542.            let overlay =             '<div id="overlay"></div>';
  543.            let sidebar =             '<div id="sidebar">'+ SidebarHeaderEls() + SidebarDirListEls() +'</div>';
  544.            let sidebar_wrapper =     '<td id="sidebar_wrapper">'+ sidebar + handle + toggle_sidebar +'</td>';
  545.            let content_pane =        '<td id="content_pane" class="">'+ ContentHeaderEls() + ContentEls() +'</td>';
  546.  
  547.            let main_head =           '<thead><tr><th>'+ warnings + overlay +'</th></tr></thead>';
  548.            let main_body =           '<tbody><tr>'+ sidebar_wrapper + content_pane +'</tr></tbody>';
  549.            let main_foot =           '<tfoot></tfoot>';
  550.            let main_content =        '<table id="main_content">'+ main_head + main_body + main_foot +'</table>';
  551.         return $(main_content);
  552.     };
  553.     // DEFINE Content Elements
  554.     const $main_content = MainContent();
  555.     // DIR LIST
  556.     const $dir_list_body =        $main_content.find('#tbody');
  557.     const $dir_list =             $main_content.find('#dir_list');
  558.     // CONTENT
  559.     const $content_pane =         $main_content.find('#content_pane');
  560.     const $audio_player =         $main_content.find('#audio');
  561.     const $content_text =         $main_content.find('#content_text');
  562.     const $content_grid =         $main_content.find('#content_grid');
  563.     const $content_font =         $main_content.find('#content_font');
  564.     const $content_image =        $main_content.find('#content_image');
  565.     const $content_pdf =          $main_content.find('#content_pdf');
  566.     const $content_video =        $main_content.find('#content_video');
  567.     const $content_iframe =       $main_content.find('#content_iframe');
  568.  
  569. 	// SVG UI ICONS
  570.     function SVG_UI_Icon(icon_name) {
  571.         let svg = '';
  572.         if ( icon_name.endsWith('_dark') ) {
  573.             icon_name = icon_name.slice(0,-5);
  574.             svg = SVG_UI_Icons[icon_name];
  575.             svg = svg.replace(/4{6}/g,'BBBBBB');
  576.         } else {
  577.             svg = SVG_UI_Icons[icon_name];
  578.         }
  579.         return 'url("data:image/svg+xml;utf8,'+ svg +'")';
  580.     }
  581.     const SVG_UI_Icons = {
  582.         'arrow':                   '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23444444\' d=\'M4 4l12 6-12 6z\' /></svg>',
  583.         'bookmark':                '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23444444\' d=\'M2 2c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v18l-8-4-8 4V2zm2 0v15l6-3 6 3V2H4z\' /></svg>',
  584.         'check_mark':              '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 12 09\'><g transform=\'matrix(0.55,5.55112e-17,-5.55112e-17,0.55,0.578932,-1.01245)\'><path d=\'M-0.071,10.929L2.5,8.358L7,12.857L17.285,2.572L19.856,5.144L7,18L-0.071,10.929Z\' style=\'fill:rgb(68,68,68);fill-rule:nonzero;\'/></g></svg>',
  585.         'chevron_up':              '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 12 08\'><g transform=\'matrix(1,0,0,1,-3.843,-5.843)\'><path d=\'M10.707,7.05L10,6.343L4.343,12L5.757,13.414L10,9.172L14.243,13.414L15.657,12L10.707,7.05Z\' style=\'fill:rgb(68,68,68);fill-rule:nonzero;\'/></g></svg>',
  586.         'chevron_right':           '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 08 12\'><g transform=\'matrix(1,0,0,1,-6.086,-4)\'><path d=\'M12.95,10.707L13.657,10L8,4.343L6.586,5.757L10.828,10L6.586,14.243L8,15.657L12.95,10.707Z\' style=\'fill:rgb(68,68,68);fill-rule:nonzero;\'/></g></svg>',
  587.         'chevron_down':            '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 12 08\'><g transform=\'matrix(1,0,0,1,-4,-6.157)\'><path d=\'M9.293,12.95L10,13.657L15.657,8L14.243,6.586L10,10.828L5.757,6.586L4.343,8L9.293,12.95Z\' style=\'fill:rgb(68,68,68);fill-rule:nonzero;\'/></g></svg>',
  588.         'chevron_left':            '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 08 12\'><g transform=\'matrix(1,0,0,1,-5.843,-4)\'><path d=\'M7.05,9.293L6.343,10L12,15.657L13.414,14.243L9.172,10L13.414,5.757L12,4.343L7.05,9.293Z\' style=\'fill:rgb(68,68,68);fill-rule:nonzero;\'/></g></svg>',
  589.         'document':                '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23444444\' d=\'M4 18h12V6h-4V2H4v16zm-2 1V0h12l4 4v16H2v-1z\' /></svg>',
  590.         'error':                   '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23FFB636\' id=\'Layer_2\' d=\'M1.075,18.05l8.146,-16.683c0.236,-0.484 0.924,-0.491 1.169,-0.011l8.537,16.683c0.223,0.435 -0.093,0.952 -0.582,0.952l-16.683,0c-0.483,0 -0.799,-0.507 -0.587,-0.941Z\' style=\'fill-opacity:0.75;fill-rule:nonzero;\'/><path id=\'Layer_3\' d=\'M11.055,7.131l-0.447,6.003c-0.034,0.45 -0.425,0.787 -0.874,0.753c-0.408,-0.03 -0.724,-0.356 -0.753,-0.753l-0.447,-6.003c-0.052,-0.696 0.47,-1.302 1.167,-1.354c0.696,-0.052 1.302,0.47 1.354,1.166c0.005,0.061 0.004,0.129 0,0.188Zm-1.26,8.037c-0.641,0 -1.159,0.518 -1.159,1.158c0,0.641 0.518,1.159 1.159,1.159c0.64,0 1.158,-0.518 1.158,-1.159c0,-0.64 -0.518,-1.158 -1.158,-1.158Z\' style=\'fill:%23444;fill-opacity:0.75;fill-rule:nonzero;\'/></svg>',
  591.         'folder':                  '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23444444\' d=\'M0 4c0-1.1.9-2 2-2h7l2 2h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2 2v10h16V6H2z\' /></svg>',
  592.         'grid':                    '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23444444\' d=\'M0 0h9v9H0V0zm2 2v5h5V2H2zm-2 9h9v9H0v-9zm2 2v5h5v-5H2zm9-13h9v9h-9V0zm2 2v5h5V2h-5zm-2 9h9v9h-9v-9zm2 2v5h5v-5h-5z\' /></svg>',
  593.         'grid_loaded':             '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23118888\' d=\'M0 0h9v9H0V0zm2 2v5h5V2H2zm-2 9h9v9H0v-9zm2 2v5h5v-5H2zm9-13h9v9h-9V0zm2 2v5h5V2h-5zm-2 9h9v9h-9v-9zm2 2v5h5v-5h-5z\' /></svg>',
  594.         'grid_loaded_dark':        '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23AA4444\' d=\'M0 0h9v9H0V0zm2 2v5h5V2H2zm-2 9h9v9H0v-9zm2 2v5h5v-5H2zm9-13h9v9h-9V0zm2 2v5h5V2h-5zm-2 9h9v9h-9v-9zm2 2v5h5v-5h-5z\' /></svg>',
  595.         'ignored':                 '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23444444\' d=\'M0 10a10 10 0 1 1 20 0 10 10 0 0 1-20 0zm16.32-4.9L5.09 16.31A8 8 0 0 0 16.32 5.09zm-1.41-1.42A8 8 0 0 0 3.68 14.91L14.91 3.68z\' opacity=\'0.25\' /></svg>',
  596.         'menu':                    '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23444444\' d=\'M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z\' /></svg>',
  597.         'minus':                   '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><rect fill=\'%23444444\' x=\'1\' y=\'8\' width=\'18\' height=\'4\' /></svg>',
  598.         'multiply':                '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23444444\' d=\'M10,7l6,-6l3,3l-6,6l6,6l-3,3l-6,-6l-6,6l-3,-3l6,-6l-6,-6l3,-3l6,6Z\'/></svg>',
  599.         'music':                   '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23888888\' d=\'M15.987,13.982c0,0.906 -0.413,1.664 -1.239,2.274c-0.757,0.554 -1.604,0.831 -2.541,0.831c-0.548,0 -0.998,-0.129 -1.348,-0.388c-0.389,-0.295 -0.583,-0.708 -0.583,-1.238c0,-0.838 0.398,-1.574 1.192,-2.209c0.752,-0.597 1.559,-0.896 2.421,-0.896c0.727,0 1.257,0.145 1.59,0.434l0,-9.489l-6.755,1.82l0,10.774c0,0.906 -0.413,1.663 -1.238,2.273c-0.758,0.555 -1.605,0.832 -2.541,0.832c-0.549,0 -0.998,-0.13 -1.35,-0.388c-0.388,-0.296 -0.582,-0.709 -0.582,-1.238c0,-0.838 0.398,-1.574 1.192,-2.209c0.752,-0.597 1.559,-0.896 2.421,-0.896c0.727,0 1.257,0.145 1.589,0.434l0,-11.605l7.772,-2.098l0,12.982Z\' style=\'fill-opacity:0.4;fill-rule:nonzero;\'/></svg>',
  600.         'plus':                    '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23444444\' d=\'M8.001,1l3.999,0l0,7l7,0l0,4l-7,0l-0.001,7l-3.999,0l0,-7l-7,0l0,-4l7,0l0.001,-7Z\'/></svg>',
  601.         'prev_next_track':         '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23444444\' d=\'M13,5l2,0l0,10l-2,0l0,-10Zm-8,0l8,5l-8,5l0,-10Z\'/></svg>',
  602.         'prev_next_track_ff':      '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23FFFFFF\' d=\'M12.8,14l-10.8,-7l10.8,-7l0,14Z\'\'/><rect x=\'0\' y=\'0\' width=\'2\' height=\'14\' style=\'fill:%23fff;\'/></svg>',
  603.         'spinner':                 '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 40 40\'><g><g transform=\'translate(1 1)\'><circle style=\'fill:none;stroke:%23666666;stroke-width:4;stroke-opacity:0.5;\' cx=\'18\' cy=\'18\' r=\'18\'/><path style=\'fill:none;stroke:%23AAAAAA;stroke-width:4;\' d=\'M36,18c0-9.94-8.061-18-18-18 \'><animateTransform type=\'rotate\' fill=\'remove\' repeatCount=\'indefinite\' attributeName=\'transform\' restart=\'always\' dur=\'1s\' from=\'0 18 18\' calcMode=\'linear\' to=\'360 18 18\' accumulate=\'none\' additive=\'replace\'></animateTransform></path></g></g></svg>',
  604.         'toggle':                  '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23444444\' d=\'M10.207,9.293l-0.707,0.707l5.657,5.657l1.414,-1.414l-4.242,-4.243l4.242,-4.243l-1.414,-1.414l-4.95,4.95Z\' /><path fill=\'%23444444\' d=\'M4.207,9.293l-0.707,0.707l5.657,5.657l1.414,-1.414l-4.242,-4.243l4.242,-4.243l-1.414,-1.414l-4.95,4.95Z\'/></svg>',
  605.     };
  606.  
  607.     function SVG_UI_File_Icon(icon_name) {
  608.         if ( icon_name === 'file_icon_dir_default' ) { // default chrome icons
  609.             return 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII= ")';
  610.         } else if ( icon_name === 'file_icon_file_default' ) {
  611.             return 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ")';
  612.         } else { // custom icons
  613.             return 'url("data:image/svg+xml;utf8,'+ SVG_UI_File_Icons[icon_name] +'")';
  614.         }
  615.     }
  616.     const SVG_UI_File_Icons = {
  617.         'file_icon_alias':         '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><rect x=\'0\' y=\'0\' width=\'14\' height=\'14\' style=\'fill:%23808080;fill-rule:nonzero;\'/><path d=\'M3,12.5c0,-3.863 2.253,-7.5 6.259,-7.5\' style=\'fill:none;stroke:%23fc6;stroke-width:3px;\'/><path d=\'M13,5l-4,-4l0,8l4,-4Z\' style=\'fill:%23fc6;\'/></svg>',
  618.         'file_icon_archive':       '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><path d=\'M11,8.5l0,-1l2,0l0,2l-5,1l-2,0l0,1.5l4,0l0,1l-4,0l0,1l-3,0l0,-1l-2,0l0,-1l2,0l0,-1.5l-2,0l0,-2l2,0l0,-6.5l-2,0l0,-2l7,0l5,1l0,2l-2,0l0,-1l-5,0l0,6.5l5,0Z\' style=\'fill:%23999;\'/></svg>',
  619.         'file_icon_app':           '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><path id=\'rect6894\' d=\'M6.125,0l-0.292,1.859c-0.587,0.135 -1.146,0.38 -1.64,0.693l0,-0.018l-1.532,-1.094l-1.221,1.221l1.094,1.532l0.018,0c-0.313,0.495 -0.559,1.051 -0.693,1.64l-1.859,0.292l0,1.75l1.859,0.292c0.134,0.589 0.38,1.145 0.693,1.64l-0.018,0l-1.094,1.532l1.221,1.221l1.532,-1.094l0,-0.018c0.494,0.313 1.053,0.558 1.64,0.693l0.292,1.859l1.75,0l0.292,-1.859c0.596,-0.137 1.14,-0.372 1.64,-0.693l1.532,1.112l1.221,-1.221l-1.112,-1.532c0.309,-0.492 0.523,-1.057 0.656,-1.64l1.896,-0.292l0,-1.75l-1.896,-0.292c-0.133,-0.583 -0.347,-1.148 -0.656,-1.64l0.018,0l1.094,-1.532l-1.221,-1.221l-1.532,1.094l0,0.018c-0.5,-0.321 -1.044,-0.556 -1.64,-0.693l-0.292,-1.859l-1.75,0Zm0.875,4.667c1.288,0 2.333,1.036 2.333,2.333c0,1.297 -1.045,2.333 -2.333,2.333c-1.288,0 -2.333,-1.036 -2.333,-2.333c0,-1.297 1.045,-2.333 2.333,-2.333Z\' style=\'fill:%237a7ab8;\'/></svg>',
  620.         'file_icon_audio':         '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><g id=\'Layer1\'><circle cx=\'7\' cy=\'7\' r=\'7\' style=\'fill:%230f8a8a;\'/></g><path d=\'M11,9.5l0,0c-0.019,0.681 -0.796,1.339 -1.75,1.475c-0.966,0.138 -1.75,-0.31 -1.75,-1c0,-0.69 0.784,-1.362 1.75,-1.5c0.268,-0.038 0.523,-0.031 0.75,0.013l0,-4.488l-4,0l0,6.5l0,0c-0.019,0.681 -0.796,1.339 -1.75,1.475c-0.966,0.138 -1.75,-0.31 -1.75,-1c0,-0.69 0.784,-1.362 1.75,-1.5c0.268,-0.038 0.523,-0.031 0.75,0.013l0,-6.488l6,-1l0,7.5Z\' style=\'fill:%23fff;\'/><path d=\'M11,2l-6,1l0,2l6,-1l0,-2Z\' style=\'fill:%23fff;\'/></svg>',
  621.         'file_icon_binary':        '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><rect x=\'0\' y=\'0\' width=\'14\' height=\'14\' style=\'fill:%23808080;fill-rule:nonzero;\'/><g><path d=\'M1.247,6.495l3.263,0l0,-1.067l-0.881,0l0,-3.835l-0.974,0c-0.371,0.232 -0.727,0.371 -1.284,0.479l0,0.82l0.928,0l0,2.536l-1.052,0l0,1.067Z\' style=\'fill:%23CCC;fill-rule:nonzero;\'/><path d=\'M7,6.588c1.082,0 1.825,-0.89 1.825,-2.567c0,-1.67 -0.743,-2.521 -1.825,-2.521c-1.082,0 -1.825,0.843 -1.825,2.521c0,1.677 0.743,2.567 1.825,2.567Zm0,-1.021c-0.309,0 -0.572,-0.247 -0.572,-1.546c0,-1.299 0.263,-1.5 0.572,-1.5c0.309,0 0.572,0.201 0.572,1.5c0,1.299 -0.263,1.546 -0.572,1.546Z\' style=\'fill:%23CCC;fill-rule:nonzero;\'/><path d=\'M9.598,6.495l3.263,0l0,-1.067l-0.882,0l0,-3.835l-0.974,0c-0.371,0.232 -0.727,0.371 -1.283,0.479l0,0.82l0.927,0l0,2.536l-1.051,0l0,1.067Z\' style=\'fill:%23CCC;fill-rule:nonzero;\'/><path d=\'M2.825,12.588c1.082,0 1.824,-0.89 1.824,-2.567c0,-1.67 -0.742,-2.521 -1.824,-2.521c-1.083,0 -1.825,0.843 -1.825,2.521c0,1.677 0.742,2.567 1.825,2.567Zm0,-1.021c-0.31,0 -0.572,-0.247 -0.572,-1.546c0,-1.299 0.262,-1.5 0.572,-1.5c0.309,0 0.572,0.201 0.572,1.5c0,1.299 -0.263,1.546 -0.572,1.546Z\' style=\'fill:%23CCC;fill-rule:nonzero;\'/><path d=\'M5.423,12.495l3.263,0l0,-1.067l-0.882,0l0,-3.835l-0.974,0c-0.371,0.232 -0.727,0.371 -1.284,0.479l0,0.82l0.928,0l0,2.536l-1.051,0l0,1.067Z\' style=\'fill:%23CCC;fill-rule:nonzero;\'/><path d=\'M11.175,12.588c1.083,0 1.825,-0.89 1.825,-2.567c0,-1.67 -0.742,-2.521 -1.825,-2.521c-1.082,0 -1.824,0.843 -1.824,2.521c0,1.677 0.742,2.567 1.824,2.567Zm0,-1.021c-0.309,0 -0.572,-0.247 -0.572,-1.546c0,-1.299 0.263,-1.5 0.572,-1.5c0.31,0 0.572,0.201 0.572,1.5c0,1.299 -0.262,1.546 -0.572,1.546Z\' style=\'fill:%23CCC;fill-rule:nonzero;\'/></g></svg>',
  622.         'file_icon_code':          '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><path d=\'M14,0l-14,0l0,14l14,0l0,-14Z\' style=\'fill:%2372d;fill-rule:nonzero;\'/><g><path d=\'M5.923,12.965c-1.049,0 -1.784,-0.161 -2.209,-0.48c-0.425,-0.317 -0.638,-0.82 -0.638,-1.503l0,-2.067c0,-0.446 -0.146,-0.764 -0.438,-0.95c-0.292,-0.188 -0.709,-0.281 -1.256,-0.281l0,-1.368c0.547,0 0.967,-0.094 1.259,-0.28c0.292,-0.186 0.438,-0.5 0.438,-0.938l0,-2.092c0,-0.675 0.217,-1.172 0.65,-1.491c0.432,-0.32 1.164,-0.479 2.195,-0.479l0,1.312c-0.401,0.01 -0.718,0.09 -0.952,0.24c-0.233,0.15 -0.348,0.426 -0.348,0.827l0,1.985c0,0.876 -0.511,1.396 -1.532,1.559l0,0.083c1.021,0.154 1.532,0.67 1.532,1.544l0,1.997c0,0.41 0.116,0.688 0.349,0.835c0.233,0.146 0.55,0.223 0.951,0.232l-0.001,1.315Z\' style=\'fill:%23fff;fill-rule:nonzero;\'/><path d=\'M8.076,12.965l0,-1.313c0.392,-0.009 0.706,-0.089 0.944,-0.239c0.236,-0.15 0.355,-0.426 0.355,-0.829l0,-1.996c0,-0.867 0.511,-1.382 1.531,-1.545l0,-0.084c-1.02,-0.164 -1.53,-0.679 -1.53,-1.546l0,-1.997c0,-0.41 -0.116,-0.688 -0.349,-0.834c-0.232,-0.146 -0.549,-0.224 -0.951,-0.233l0,-1.313c1.049,0 1.785,0.159 2.21,0.479c0.423,0.319 0.637,0.821 0.637,1.505l0,2.065c0,0.447 0.146,0.765 0.438,0.951c0.292,0.187 0.711,0.28 1.257,0.28l0,1.367c-0.546,0.012 -0.967,0.107 -1.259,0.287c-0.293,0.183 -0.438,0.5 -0.438,0.945l0,2.08c0,0.674 -0.217,1.172 -0.65,1.491c-0.432,0.319 -1.165,0.479 -2.195,0.479Z\' style=\'fill:%23fff;fill-rule:nonzero;\'/></g></svg>',
  623.         'file_icon_database':      '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><path d=\'M14,2.5l0,9c0,1.38 -3.137,2.5 -7,2.5c-3.863,0 -7,-1.12 -7,-2.5l0,-9\' style=\'fill:%23808080;\'/><path d=\'M13,2.5l0,9c0,0.828 -2.689,1.5 -6,1.5c-3.311,0 -6,-0.672 -6,-1.5l0,-9\' style=\'fill:%23b4b4b4;\'/><path d=\'M14,8.5c0,1.38 -3.137,2.5 -7,2.5c-3.863,0 -7,-1.12 -7,-2.5\' style=\'fill:%23808080;\'/><path d=\'M13,8.5c0,0.828 -2.689,1.5 -6,1.5c-3.311,0 -6,-0.672 -6,-1.5\' style=\'fill:%23b4b4b4;\'/><path d=\'M14,5.5c0,1.38 -3.137,2.5 -7,2.5c-3.863,0 -7,-1.12 -7,-2.5\' style=\'fill:%23808080;\'/><path d=\'M13,5.5c0,0.828 -2.689,1.5 -6,1.5c-3.311,0 -6,-0.672 -6,-1.5\' style=\'fill:%23b4b4b4;\'/><ellipse cx=\'7\' cy=\'2.5\' rx=\'7\' ry=\'2.5\' style=\'fill:%23808080;\'/><ellipse cx=\'7\' cy=\'2.5\' rx=\'5.5\' ry=\'1.5\' style=\'fill:%23b4b4b4;\'/></svg>',
  624.         'file_icon_dir':           '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><path d=\'M6,2.5l-1,-1.5l-5,0l0,12l14,0l0,-10.5l-8,0Z\' style=\'fill:%2339f;fill-rule:nonzero;\'/><rect x=\'1.5\' y=\'4\' width=\'11\' height=\'7.5\' style=\'fill:%239cf;\'/></svg>',
  625.         'file_icon_dir_invisible': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><path d=\'M6,2.5l-1,-1.5l-5,0l0,12l14,0l0,-10.5l-8,0Z\' style=\'fill:%23888;fill-rule:nonzero;\'/><rect x=\'1.5\' y=\'4\' width=\'11\' height=\'7.5\' style=\'fill:%23bbb;\'/><circle cx=\'7\' cy=\'7.5\' r=\'1.5\' style=\'fill:%23888;\'/></svg>',
  626.         'file_icon_ebook':         '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><path d=\'M2.668,-0.001c1.705,0.001 3.492,0.35 4.332,1.257c0.84,-0.908 2.627,-1.256 4.332,-1.257l2.668,0c0,4.112 0,8.43 0,12.541c-0.818,0 -2.181,0.005 -3,0.023c-1.184,0.026 -3.008,0.42 -3,1.437l-1,-0.017l-1,0.017c0.008,-1.017 -2,-1.437 -3,-1.437c-0.819,0 -2.182,-0.023 -3,-0.023l0,-12.541l2.668,0Z\' style=\'fill:%23808080;\'/><path d=\'M1.5,1.499l0,9.501l1.286,0c1.086,0.025 2.213,0.081 3.204,0.568l0.01,0.006c0,-2.859 0,-5.717 0,-8.576c0,-1.136 -1.49,-1.398 -2.336,-1.47c-0.708,-0.059 -1.438,-0.029 -2.164,-0.029Z\' style=\'fill:%23cdcdcd;\'/><path d=\'M12.5,1.499l0,9.501l-1.286,0c-1.086,0.025 -2.213,0.081 -3.204,0.568l-0.01,0.006c0,-2.859 0,-5.717 0,-8.576c0,-1.136 1.49,-1.398 2.336,-1.47c0.708,-0.059 1.438,-0.029 2.164,-0.029Z\' style=\'fill:%23cdcdcd;\'/></svg>',
  627.         'file_icon_file':          '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><g><path d=\'M8.3,0l-6.8,0l0,14l11,0l0,-9.8l-4.2,-4.2Z\' style=\'fill:%23888;fill-rule:nonzero;\'/><path d=\'M11,12.5l-8,0l0,-11l3.8,0l0,4.2l4.2,0l0,6.8Z\' style=\'fill:%23fff;fill-rule:nonzero;\'/><path d=\'M8.3,4.2l1.9,0l-1.9,-2l0,2Z\' style=\'fill:%23fff;fill-rule:nonzero;\'/></g></svg>',
  628.         'file_icon_invisible':     '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><g><path d=\'M8.3,0l-6.8,0l0,14l11,0l0,-9.8l-4.2,-4.2Z\' style=\'fill:%23888;fill-rule:nonzero;\'/><path d=\'M11,12.5l-8,0l0,-11l3.8,0l0,4.2l4.2,0l0,6.8Z\' style=\'fill:%23bbb;fill-rule:nonzero;\'/><path d=\'M8.3,4.2l1.9,0l-1.9,-2l0,2Z\' style=\'fill:%23bbb;fill-rule:nonzero;\'/></g><circle cx=\'7\' cy=\'9\' r=\'1.5\' style=\'fill:%23878787;\'/></svg>',
  629.         'file_icon_font':          '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><path d=\'M14,0l-14,0l0,14l14,0l0,-14Z\' style=\'fill:%23709;fill-rule:nonzero;\'/><path d=\'M4.678,11.179l1.393,0l0,-8.266l-2.616,0l0,1.052l-1.455,0l0,-2.553l10,0l0,2.554l-1.456,0l0,-1.053l-2.599,0l0,8.266l1.347,0l0,1.409l-4.614,0l0,-1.409Z\' style=\'fill:%23fff;fill-rule:nonzero;\'/></svg>',
  630.         'file_icon_graphics':      '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><rect x=\'0\' y=\'0\' width=\'14\' height=\'14\' style=\'fill:%23808080;fill-rule:nonzero;\'/><path d=\'M7.774,8.285l4.726,4.715l-8,-3.525l-1.5,-4.975l-2,0l0,-3.5l3.525,0l-0.025,2l5,1.5l3.5,8l-4.7,-4.752c0.127,-0.22 0.2,-0.476 0.2,-0.748c0,-0.828 -0.672,-1.5 -1.5,-1.5c-0.828,0 -1.5,0.672 -1.5,1.5c0,0.828 0.672,1.5 1.5,1.5c0.283,0 0.548,-0.079 0.774,-0.215Z\' style=\'fill:%23CCC;fill-rule:nonzero;\'/></svg>',
  631.         'file_icon_htm':           '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><path d=\'M6.967,0.5c-3.553,0.018 -6.467,2.947 -6.467,6.5c0,3.566 2.934,6.5 6.5,6.5c3.566,0 6.5,-2.934 6.5,-6.5c0,-3.553 -2.914,-6.482 -6.467,-6.5l-0.066,0Zm0.033,0l0,13m6.5,-6.5l-13,0m1.467,-4c3.004,2.143 7.062,2.143 10.066,0m0,8c-3.004,-2.143 -7.062,-2.143 -10.066,0m4.533,-10.333c-1.874,1.582 -2.957,3.914 -2.957,6.366c0,2.453 1.083,4.785 2.957,6.367m1,0c1.874,-1.582 2.957,-3.914 2.957,-6.367c0,-2.452 -1.083,-4.784 -2.957,-6.366\' style=\'fill:%23fff;fill-rule:nonzero;stroke:%23E44D26;stroke-width:1px;\'/></svg>',
  632.         'file_icon_ignored':       '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><path d=\'M7,0c-3.9,0 -7,3.1 -7,7c0,3.9 3.1,7 7,7c3.9,0 7,-3.1 7,-7c0,-3.9 -3.1,-7 -7,-7Z\' style=\'fill:%23999;fill-rule:nonzero;\'/><path d=\'M7,2c2.8,0 5,2.2 5,5c0,2.8 -2.2,5 -5,5c-2.8,0 -5,-2.2 -5,-5c0,-2.8 2.2,-5 5,-5\' style=\'fill:%23ddd;fill-rule:nonzero;\'/><path d=\'M10.695,1.774l-8.839,8.839l1.626,1.626l8.839,-8.839l-1.626,-1.626Z\' style=\'fill:%23999;\'/></svg>',
  633.         'file_icon_image':         '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><path d=\'M0.369,9.141c-0.252,-0.678 -0.369,-1.396 -0.369,-2.141c0,-3.863 3.137,-7 7,-7c3.863,0 7,3.137 7,7l-0.137,1.353l-3.853,-3.853l-3.5,3.5l-2.5,-2.5l-3.641,3.641Z\' style=\'fill:%238080ff;\'/><path d=\'M0.839,10.151l-0.47,-1.01l3.641,-3.641l2.5,2.5l3.5,-3.5l3.853,3.853c-0.076,0.395 -0.201,0.778 -0.341,1.147l-10.371,3.345c-0.293,-0.194 -0.579,-0.416 -0.838,-0.651l-1.474,-2.043Z\' style=\'fill:%23fff;\'/><g><path d=\'M13.522,9.5c-0.99,2.64 -3.539,4.5 -6.522,4.5c-1.426,0 -2.753,-0.421 -3.849,-1.155l6.859,-6.866l3.512,3.521Z\' style=\'fill:%2333c;\'/><path d=\'M0.839,10.151l3.171,-3.172l1.761,1.761l-3.459,3.454c-0.591,-0.632 -1.079,-1.313 -1.473,-2.043Z\' style=\'fill:%2333c;\'/></g><circle cx=\'6\' cy=\'3.5\' r=\'1.5\' style=\'fill:%23fff;\'/></svg>',
  634.         'file_icon_ignored_image': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><path d=\'M0.369,9.141c-0.252,-0.678 -0.369,-1.396 -0.369,-2.141c0,-3.863 3.137,-7 7,-7c3.863,0 7,3.137 7,7l-0.137,1.353l-3.853,-3.853l-3.5,3.5l-2.5,-2.5l-3.641,3.641Z\' style=\'fill:%23808080;\'/><path d=\'M0.839,10.151l-0.47,-1.01l3.641,-3.641l2.5,2.5l3.5,-3.5l3.853,3.853c-0.076,0.395 -0.201,0.778 -0.341,1.147l-10.371,3.345c-0.293,-0.194 -0.579,-0.416 -0.838,-0.651l-1.474,-2.043Z\' style=\'fill:%23fff;\'/><g><path d=\'M13.522,9.5c-0.99,2.64 -3.539,4.5 -6.522,4.5c-1.426,0 -2.753,-0.421 -3.849,-1.155l6.859,-6.866l3.512,3.521Z\' style=\'fill:%23808080;\'/><path d=\'M0.839,10.151l3.171,-3.172l1.761,1.761l-3.459,3.454c-0.591,-0.632 -1.079,-1.313 -1.473,-2.043Z\' style=\'fill:%23808080;\'/></g><circle cx=\'6\' cy=\'3.5\' r=\'1.5\' style=\'fill:%23fff;\'/></svg>',
  635.         'file_icon_markdown':      '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><path d=\'M14,0l-14,0l0,14l14,0l0,-14Z\' style=\'fill:%236a6a95;fill-rule:nonzero;\'/><path d=\'M12,11.5l-2.5,0l0,-5.143l-2.5,2.948l-2.5,-2.948l0,5.143l-2.5,0l0,-9l2.273,0l2.721,3.377l2.733,-3.377l2.273,0l0,9Z\' style=\'fill:%23DDD;fill-rule:nonzero;\'/></svg>',
  636.         'file_icon_office':        '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><rect x=\'0\' y=\'0\' width=\'14\' height=\'14\' style=\'fill:%23808080;fill-rule:nonzero;\'/><rect x=\'10\' y=\'1.5\' width=\'2.5\' height=\'1\' style=\'fill:%23cdcdcd;\'/><rect x=\'10\' y=\'4\' width=\'2.5\' height=\'1\' style=\'fill:%23cdcdcd;\'/><rect x=\'10\' y=\'6.5\' width=\'2.5\' height=\'1\' style=\'fill:%23cdcdcd;\'/><rect x=\'10\' y=\'9\' width=\'2.5\' height=\'1\' style=\'fill:%23cdcdcd;\'/><rect x=\'10\' y=\'11.5\' width=\'2.5\' height=\'1\' style=\'fill:%23cdcdcd;\'/><rect x=\'6.5\' y=\'1.5\' width=\'2.5\' height=\'1\' style=\'fill:%23cdcdcd;\'/><rect x=\'6.5\' y=\'4\' width=\'2.5\' height=\'1\' style=\'fill:%23cdcdcd;\'/><rect x=\'6.5\' y=\'6.5\' width=\'2.5\' height=\'1\' style=\'fill:%23cdcdcd;\'/><rect x=\'6.5\' y=\'9\' width=\'2.5\' height=\'1\' style=\'fill:%23cdcdcd;\'/><rect x=\'6.5\' y=\'11.5\' width=\'2.5\' height=\'1\' style=\'fill:%23cdcdcd;\'/><rect x=\'1.5\' y=\'1.5\' width=\'4\' height=\'11\' style=\'fill:%23cdcdcd;\'/></svg>',
  637.         'file_icon_pdf':           '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><rect x=\'0\' y=\'0\' width=\'14\' height=\'14\' style=\'fill:%23d20000;fill-rule:nonzero;\'/><path d=\'M12.69,9.115c-0.075,0.048 -0.291,0.076 -0.428,0.076c-0.443,0 -0.99,-0.204 -1.762,-0.534c0.297,-0.022 0.568,-0.031 0.811,-0.031c0.446,0 0.575,0 1.012,0.109c0.433,0.108 0.438,0.333 0.367,0.38Zm-7.72,0.069c0.172,-0.303 0.349,-0.622 0.526,-0.961c0.44,-0.83 0.719,-1.484 0.923,-2.017c0.413,0.749 0.926,1.383 1.525,1.894c0.077,0.063 0.157,0.125 0.242,0.189c-1.224,0.246 -2.283,0.539 -3.216,0.895Zm1.428,-7.856c0.244,0 0.384,0.612 0.395,1.191c0.011,0.573 -0.121,0.974 -0.29,1.277c-0.141,-0.445 -0.205,-1.14 -0.205,-1.596c0,-0.001 -0.01,-0.872 0.1,-0.872Zm-4.788,11.025c0.142,-0.378 0.687,-1.124 1.494,-1.788c0.051,-0.038 0.177,-0.157 0.292,-0.266c-0.843,1.35 -1.412,1.885 -1.786,2.054Zm11.312,-4.029c-0.242,-0.241 -0.789,-0.367 -1.615,-0.377c-0.56,-0.008 -1.23,0.041 -1.942,0.139c-0.315,-0.184 -0.641,-0.381 -0.9,-0.622c-0.689,-0.646 -1.262,-1.539 -1.621,-2.521c0.021,-0.095 0.044,-0.173 0.062,-0.256c0,0 0.387,-2.208 0.283,-2.954c-0.015,-0.105 -0.021,-0.132 -0.051,-0.212l-0.033,-0.089c-0.104,-0.243 -0.313,-0.502 -0.639,-0.488l-0.19,-0.006l-0.003,0c-0.362,0 -0.661,0.186 -0.736,0.461c-0.236,0.872 0.007,2.171 0.448,3.856l-0.114,0.275c-0.315,0.768 -0.711,1.542 -1.058,2.225l-0.048,0.09c-0.365,0.717 -0.7,1.328 -1,1.843l-0.313,0.167c-0.021,0.014 -0.556,0.294 -0.681,0.37c-1.064,0.634 -1.77,1.356 -1.887,1.929c-0.037,0.181 -0.009,0.414 0.18,0.525l0.302,0.15c0.13,0.064 0.272,0.097 0.41,0.097c0.757,0 1.637,-0.941 2.845,-3.053c1.4,-0.457 2.994,-0.836 4.39,-1.045c1.062,0.6 2.369,1.015 3.194,1.015c0.147,0 0.274,-0.013 0.377,-0.042c0.156,-0.04 0.29,-0.13 0.372,-0.256c0.158,-0.238 0.193,-0.569 0.148,-0.91c-0.01,-0.1 -0.093,-0.226 -0.18,-0.311Z\' style=\'fill:%23fff;fill-rule:nonzero;\'/></svg>',
  638.         'file_icon_system':        '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><rect x=\'0\' y=\'0\' width=\'14\' height=\'14\' style=\'fill:%23808080;fill-rule:nonzero;\'/><g><path d=\'M1.247,6.495l3.263,0l0,-1.067l-0.881,0l0,-3.835l-0.974,0c-0.371,0.232 -0.727,0.371 -1.284,0.479l0,0.82l0.928,0l0,2.536l-1.052,0l0,1.067Z\' style=\'fill:%23CCC;fill-rule:nonzero;\'/><path d=\'M7,6.588c1.082,0 1.825,-0.89 1.825,-2.567c0,-1.67 -0.743,-2.521 -1.825,-2.521c-1.082,0 -1.825,0.843 -1.825,2.521c0,1.677 0.743,2.567 1.825,2.567Zm0,-1.021c-0.309,0 -0.572,-0.247 -0.572,-1.546c0,-1.299 0.263,-1.5 0.572,-1.5c0.309,0 0.572,0.201 0.572,1.5c0,1.299 -0.263,1.546 -0.572,1.546Z\' style=\'fill:%23CCC;fill-rule:nonzero;\'/><path d=\'M9.598,6.495l3.263,0l0,-1.067l-0.882,0l0,-3.835l-0.974,0c-0.371,0.232 -0.727,0.371 -1.283,0.479l0,0.82l0.927,0l0,2.536l-1.051,0l0,1.067Z\' style=\'fill:%23CCC;fill-rule:nonzero;\'/><path d=\'M2.825,12.588c1.082,0 1.824,-0.89 1.824,-2.567c0,-1.67 -0.742,-2.521 -1.824,-2.521c-1.083,0 -1.825,0.843 -1.825,2.521c0,1.677 0.742,2.567 1.825,2.567Zm0,-1.021c-0.31,0 -0.572,-0.247 -0.572,-1.546c0,-1.299 0.262,-1.5 0.572,-1.5c0.309,0 0.572,0.201 0.572,1.5c0,1.299 -0.263,1.546 -0.572,1.546Z\' style=\'fill:%23CCC;fill-rule:nonzero;\'/><path d=\'M5.423,12.495l3.263,0l0,-1.067l-0.882,0l0,-3.835l-0.974,0c-0.371,0.232 -0.727,0.371 -1.284,0.479l0,0.82l0.928,0l0,2.536l-1.051,0l0,1.067Z\' style=\'fill:%23CCC;fill-rule:nonzero;\'/><path d=\'M11.175,12.588c1.083,0 1.825,-0.89 1.825,-2.567c0,-1.67 -0.742,-2.521 -1.825,-2.521c-1.082,0 -1.824,0.843 -1.824,2.521c0,1.677 0.742,2.567 1.824,2.567Zm0,-1.021c-0.309,0 -0.572,-0.247 -0.572,-1.546c0,-1.299 0.263,-1.5 0.572,-1.5c0.31,0 0.572,0.201 0.572,1.5c0,1.299 -0.262,1.546 -0.572,1.546Z\' style=\'fill:%23CCC;fill-rule:nonzero;\'/></g></svg>',
  639.         'file_icon_text':          '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><path d=\'M14,0l-14,0l0,14l14,0l0,-14Z\' style=\'fill:%236A6A95;fill-rule:nonzero;\'/><rect x=\'6.5\' y=\'1.5\' width=\'6\' height=\'1\' style=\'fill:%23fff;\'/><rect x=\'1.5\' y=\'1.5\' width=\'3.5\' height=\'3.5\' style=\'fill:%23fff;\'/><rect x=\'1.5\' y=\'6.5\' width=\'11\' height=\'1\' style=\'fill:%23fff;\'/><rect x=\'6.5\' y=\'4\' width=\'6\' height=\'1\' style=\'fill:%23fff;\'/><rect x=\'1.5\' y=\'11.5\' width=\'8\' height=\'1\' style=\'fill:%23fff;\'/><rect x=\'1.5\' y=\'9\' width=\'11\' height=\'1\' style=\'fill:%23fff;\'/></svg>',
  640.         'file_icon_video':         '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'><g id=\'Layer1\'><path d=\'M14,14l0,-14l-14,0l0,14l14,0Z\'/><path d=\'M9.5,3l0,-2l-2,0l0,2l2,0Z\' style=\'fill:%23fff;\'/><path d=\'M3.5,3l0,-2l-2,0l0,2l2,0Z\' style=\'fill:%23fff;\'/><path d=\'M6.5,3l0,-2l-2,0l0,2l2,0Z\' style=\'fill:%23fff;\'/><path d=\'M12.5,3l0,-2l-2,0l0,2l2,0Z\' style=\'fill:%23fff;\'/><path d=\'M9.5,13l0,-2l-2,0l0,2l2,0Z\' style=\'fill:%23fff;\'/><path d=\'M3.5,13l0,-2l-2,0l0,2l2,0Z\' style=\'fill:%23fff;\'/><path d=\'M6.5,13l0,-2l-2,0l0,2l2,0Z\' style=\'fill:%23fff;\'/><path d=\'M12.5,13l0,-2l-2,0l0,2l2,0Z\' style=\'fill:%23fff;\'/><path d=\'M12.5,10l0,-6l-11,0l0,6l11,0Z\' style=\'fill:%23eda412;\'/></g></svg>',
  641.     };
  642.     // Programatically add File icon CSS rules
  643.     function CSS_UI_Icon_Rules(el) {
  644.         let class_name;
  645.         let selector;
  646.         let kinds = ['dir','dir_invisible','file','alias','code','font','audio','video','htm','image','pdf','text','markdown','app','invisible','ignore','archive','bin','database','ebook','graphics','ignored_image','office','system'];
  647.         let rules = '';
  648.         if ( el === 'body' ) {
  649.             rules += '#bookmarks ul a { background-image:'+ SVG_UI_File_Icon('file_icon_file') +'; }';
  650.             rules += '#bookmarks ul a[href^="file"] { background-image:'+ SVG_UI_File_Icon('file_icon_dir') +'; }';
  651.             rules += '#bookmarks ul a[href^="http"] { background-image:'+ SVG_UI_File_Icon('file_icon_htm') +'; }';
  652.             rules += 'body:not(.use_custom_icons) #dir_list tr.dir a.icon span { background-image:'+ SVG_UI_File_Icon('file_icon_dir_default') + '; background-size:auto 13px; }';
  653.             rules += 'body:not(.use_custom_icons) #dir_list tr.file:not(.app) a.icon span { background-image:'+ SVG_UI_File_Icon('file_icon_file_default') + '; background-size:auto 13px; }';
  654.         } else {
  655.             rules += '#iframe_body:not(.use_custom_icons) #dir_list tr.dir td.name a::before { background:'+ SVG_UI_File_Icon('file_icon_dir_default') +'; }';
  656.             rules += '#iframe_body:not(.use_custom_icons) #dir_list tr.file td.name a::before { background:'+ SVG_UI_File_Icon('file_icon_file_default') +'; }';
  657.         }
  658.         for ( let kind of kinds ) {
  659.             class_name = kind;
  660.             switch(kind) {
  661.                 case 'dir': class_name = 'dir:not(.app)'; break;
  662.                 case 'dir_invisible': class_name = 'dir.invisible'; break;
  663.             }
  664.             if ( el === 'body' ) {
  665.                 selector = el +'.use_custom_icons #dir_list tr.'+ class_name +':not(.media) a.icon span ';
  666.                 // selectors for iframe content kinds, icons in content titlebar
  667.                 if ( kind !== undefined && !['audio','dir','font','ignored','image','pdf','video'].includes(kind) ) {
  668.                     selector += ', #content_pane.has_iframe #title span.has_'+ kind +'::before, #content_pane.has_ignored #title span.has_'+ kind +'::before'
  669.                 }
  670.             } else {
  671.                 selector = el +'.use_custom_icons #dir_list tr.'+ class_name +' td.name a::before ';
  672.             }
  673.             let background_image = '{ background-image: url("data:image/svg+xml;utf8,'+ SVG_UI_File_Icons['file_icon_'+kind] +'"); }' ;
  674.             let rule = selector + background_image;
  675.             rules += rule;
  676.         }
  677.         return rules;
  678.     }
  679. 	//***** STYLES *****//
  680.  
  681. 	// DEFINE STYLES
  682. 	var $main_style_rules =
  683.     '#content_pane.has_image #content_image                 { align-items: center; justify-content: center; }' +
  684.     '.image_grid_item a                                     { align-self: center;  justify-self: center; }' +
  685.     '#sidebar_wrapper, body.theme_light #sidebar, body.theme_light #sidebar ul, body.theme_light  #preview_text, body.theme_light  #source_text, body.theme_light #content_header' +
  686.                                                            '{ background-color: lightgray; }' +
  687.         // light non-media ("light cyan")
  688.     'body.theme_light #dir_list tr.selected:not(.playing), body.theme_light #dir_list tr.selected.loaded:not(.playing), body.theme_light #dir_list tr.selected.loaded:hover'+
  689.                                                            '{ background-color: rgba(172,202,235,1.00) !important; }' +
  690.     'body.theme_light #dir_list tr.loaded:not(.selected), body.theme_light #dir_list tbody tr:not(.media):hover, body.theme_light.alternate_background #dir_list #tbody tr:not(.media):hover, body.theme_light #dir_list .hovered:not(.media), body.theme_light.alternate_background #dir_list #tbody tr.hovered:not(.media)'+
  691.                                                            '{ background-color: rgba(172,202,235,0.60); }' +
  692.         // light media ("light aqua")
  693.     'body.theme_light #dir_list tr.media.playing            { background-color: rgba(130,196,196,1); }' + // #82C4C4
  694.     'body.theme_light #dir_list tr.media.selected:not(.playing)'+
  695.                                                            '{ background-color: rgba(116,190,190,0.60) !important; }' +
  696.     'body.theme_light #dir_list tr.media.selected:not(.playing):hover, body.theme_light #dir_list tr.media:not(.selected):hover'+
  697.                                                            '{ background-color: rgba(116,190,190,0.40) !important; }' +
  698.         // dark non-media ("dark cyan")
  699.     'body.theme_dark #dir_list tr.selected:not(.playing), body.theme_dark #dir_list tr.selected.loaded:not(.playing), body.theme_dark #dir_list tr.selected.loaded:hover'+
  700.                                                            '{ background-color: rgba(101,140,179,1.00) !important; }' + //#658CB3
  701.     'body.theme_dark #dir_list tr.loaded:not(.selected), body.theme_dark #dir_list tbody tr:not(.media):hover, body.theme_dark.alternate_background #dir_list #tbody tr:not(.media):hover, body.theme_dark #dir_list .hovered:not(.media), body.theme_dark.alternate_background #dir_list #tbody tr.hovered:not(.media)'+
  702.                                                            '{ background-color: rgba(101,140,179,0.66); }' +
  703.         // dark media ("dark aqua")
  704.     'body.theme_dark #dir_list tr.media.playing             { background-color: rgba(076,143,143,1.00) !important; }' +
  705.     'body.theme_dark #dir_list tr.media.selected:not(.playing)'+
  706.                                                            '{ background-color: rgba(076,143,143,0.70) !important; }' +
  707.     'body.theme_dark #dir_list tr.media.selected:not(.playing):hover, body.theme_dark #dir_list tr.media:not(.selected):hover'+
  708.                                                            '{ background-color: rgba(076,143,143,0.45) !important; }' +
  709.         // text editor row ("purple")
  710.     'body.theme_light.has_text #text_editor_row, body.theme_light.edited #text_editor_row' +
  711.                                                            '{ background-color: rgba(160,160,230,1.00); }' + // #A0A0E6
  712.     'body.theme_dark.has_text #text_editor_row, body.theme_dark.edited #text_editor_row' +
  713.                                                            '{ background-color: rgba(100,100,160,1.00); }' + // #6464A0
  714.         // other UI elements
  715.     'body.theme_dark #content_pane.has_grid #content_container, body.theme_dark #content_grid > div:hover, body.theme_dark #content_grid > div.hovered, body.theme_dark #content_grid > div.selected, body.theme_dark .glyph_container:hover, body.theme_dark .glyph_container.selected' +
  716.                                                            '{ background-color: #262626; }' +
  717.     'body.theme_dark #content_pane, body.theme_dark #content_pane.has_image, body.theme_dark #content_pane.has_grid #content_grid::after, body.theme_dark #content_grid > div, body.theme_dark #content_font, .split_btn::after' +
  718.                                                            '{ background-color: #333; }' +
  719.     'body.theme_dark #sidebar ul, body.theme_dark #preview_text_menu_item span, body.theme_dark #sidebar_header thead, body.theme_dark #sidebar_menus, body.theme_dark #preview_text, body.theme_dark  #source_text, body.theme_dark.alternate_background #dir_list tbody tr:nth-of-type(odd):not(.selected):not(.playing):not(.loaded), body.theme_dark.alternate_background #dir_list tbody tr:nth-of-type(odd):not(.loaded), body.theme_dark #tfoot, body.theme_dark .playlist_item:nth-of-type(odd), body.theme_dark #font_info, body.theme_dark #glyph_viewer_info' +
  720.                                                            '{ background-color: #444; }' +
  721.     'body.theme_dark #sidebar, body.theme_dark #dir_list #tbody, body.theme_dark #content_header, body.theme_dark .font_grid_item:hover, body.theme_dark .font_grid_item.hovered, body.theme_dark .image_grid_item:hover, body.theme_dark .image_grid_item.hovered' +
  722.                                                            '{ background-color: #555; }' +
  723.     'body.theme_dark #sidebar ul li:not(#preview_text_menu_item):hover, body.theme_dark li.has_submenu:hover, body.theme_dark #preview_text_menu_item span:hover, body.theme_dark #preview_text:hover, body.theme_dark #source_text:hover' +
  724.                                                            '{ background-color: #666; }' +
  725.     'body.theme_dark #sidebar .hovered, body.theme_dark #dir_list tbody tr:hover, body.theme_dark.alternate_background #dir_list #tbody tr:hover, body.theme_dark.alternate_background #dir_list #tbody tr:nth-of-type(odd).hovered, body.theme_dark #content_iframe[href^="/"]' +
  726.                                                            '{ background-color: #777; }' +
  727.     'body.theme_dark #grid_btn .menu li:hover               { background-color: #888 !important; }' +
  728.     'body.theme_dark #grid_btn .menu, body.theme_dark #grid_btn .menu li' +
  729.                                                            '{ background-color: #AAA; }' +
  730.     'body.theme_light #sidebar_header thead tr, body.theme_light #sidebar_menus, #parents_dir_menu + ul li:hover, #bookmarks li:hover, body.theme_light #preview_text_menu_item span:hover, body.theme_light #preview_text:hover, body.theme_light #source_text:hover, body.theme_light #grid_btn .menu li:hover' +
  731.                                                            '{ background-color: #BBB; }' +
  732.     'body.theme_light #grid_btn .menu li, body.theme_light.alternate_background #dir_list tbody tr:nth-of-type(odd):not(.selected):not(.playing):not(.loaded), body.theme_light #tfoot, body.theme_light .playlist_item:nth-of-type(odd), body.theme_dark #glyph_viewer' +
  733.                                                            '{ background-color: #CCC; }' +
  734.     'body.theme_light #dir_list tbody                       { background-color: #DFDFDF !important; }' +
  735.     'body.theme_light #content_grid > div, #warnings, body.theme_light #content_pane.has_grid #content_grid::after, body.theme_light #font_info, body.theme_light #glyph_viewer_info' +
  736.                                                            '{ background-color: #EEE; }' +
  737.     'body.theme_light #content_pane, body.theme_light #content_grid, body.theme_light #content_grid div.selected, body.theme_light #content_pane.has_image, #content_font, #content_iframe, #scale, body.theme_light #content_grid div:hover, body.theme_light #content_grid div.hovered, body.theme_light #glyph_viewer, body.is_safari button, body.theme_light .glyph_container:hover, body.theme_light .glyph_container.selected' +
  738.                                                            '{ background-color: #FFF; }' +
  739.     'body.is_chrome #audio_container                        { background-color: rgb(241, 243, 244); }' +
  740.     '#warnings button:focus,#warnings button.focus          { background-color: #0E4399; }' +
  741.     '#bookmarks_menu div                                    { background-image:'+ SVG_UI_Icon('menu') + '; }' +
  742.     'body.theme_light .bookmarks > a::before                { background-image:'+ SVG_UI_Icon('bookmark') +'; }' +
  743.     'body.theme_dark .bookmarks > a::before                 { background-image:'+ SVG_UI_Icon('bookmark_dark') +'; }' +
  744.     'body.theme_light li.has_submenu                        { background-image:'+ SVG_UI_Icon('arrow') +'; }' +
  745.     'body.theme_dark li.has_submenu                         { background-image:'+ SVG_UI_Icon('arrow_dark') +'; }' +
  746.     '#theme::before, body.sort_by_default #default span::before, body.sort_by_name #name span::before, body.sort_by_size #size span::before, body.sort_by_date #date span::before, body.sort_by_kind #kind span::before, body.sort_by_ext #ext span::before, body.alternate_background #alternate_background span::before, body.show_numbers #show_numbers span::before, body.autoload_media #autoload_media span::before, body.split_view #split_view_menu_item, body.split_view #split_view span::before, body:not(.enable_text_editing) #enable_text_editing::before, body.source_text:not(.preview_text) #source_text::before, body.preview_text:not(.source_text) #preview_text::before, body.sort_by_default #sort_by_default span::before, body.sort_by_name #sort_by_name span::before, body.sort_by_size #sort_by_size span::before, body.sort_by_date #sort_by_date span::before, body.sort_by_kind #sort_by_kind span::before, body.sort_by_ext #sort_by_ext span::before'+
  747.                                                            '{ background-image:'+ SVG_UI_Icon('check_mark') +'; }' +
  748.     '#parent_dir_menu a, body.sort_by_default #sort_by_default span::after, body.sort_by_name #sort_by_name span::after, body.sort_by_size #sort_by_size span::after, body.sort_by_date #sort_by_date span::after, body.sort_by_kind #sort_by_kind span::after, body.sort_by_ext #sort_by_ext span::after'+
  749.                                                            '{ background-image:'+ SVG_UI_Icon('chevron_up') +'; }' +
  750.     '#prev_btn                                              { background-image:'+ SVG_UI_Icon('chevron_left') + '; }' +
  751.     '#next_btn                                              { background-image:'+ SVG_UI_Icon('chevron_right') + '; }' +
  752.     'body.is_error #content_pane, #warnings h3::before      { background-image:'+ SVG_UI_Icon('error') +'; }' +
  753.     'body.has_fonts #grid_btn, body.has_images #grid_btn, #grid_btn .menu'+
  754.                                                            '{ background-image:'+ SVG_UI_Icon('grid') +'; }' +
  755.     'body #content_pane.has_ignored:not(.has_grid)          { background-image:'+ SVG_UI_Icon('ignored') +'; }' +
  756.     'body.theme_dark #content_pane.has_ignored:not(.has_grid){ background-image:'+SVG_UI_Icon('ignored_dark') +'; }' +
  757.     '#decrease                                              { background-image:'+ SVG_UI_Icon('minus') +'; }' +
  758.     '#close_audio                                           { background-image:'+ SVG_UI_Icon('multiply') +'; }' +
  759.     'body.has_audio #content_pane:not(.has_image):not(.has_video):not(.has_ignored):not(.has_grid):not(.has_zoom_image)'+
  760.                                                            '{ background-image:'+ SVG_UI_Icon('music') +'; }' +
  761.     '#increase                                              { background-image:'+ SVG_UI_Icon('plus') +'; }' +
  762.     '#prev_track, #next_track                               { background-image:'+ SVG_UI_Icon('prev_next_track') +'; }' +
  763.     '#toggle_sidebar, #toggle_info                          { background-image:'+ SVG_UI_Icon('toggle') +'; }' +
  764.  
  765.      CSS_UI_Icon_Rules('body') + // FILE & DIR ICONS, plus additions:
  766.     '#content_pane #title span::before                      { width:14px; height:14px; display:inline-block; margin:0 5px -3px 2px; }' +
  767.     '#content_pane.has_dir #title span::before, #content_pane.has_grid #title span::before, #content_pane.has_font_grid #title span::before, #content_pane.has_image_grid #title span::before'+
  768.                                                            '{ background-image: url("data:image/svg+xml;utf8,'+ SVG_UI_File_Icons['file_icon_dir'] +'"); }' +
  769.     '#content_pane.has_font #title span::before             { background-image: url("data:image/svg+xml;utf8,'+ SVG_UI_File_Icons['file_icon_font'] +'"); }' +
  770.     '#content_pane.has_image #title span::before, #content_pane.has_zoom_image #title span::before'+
  771.                                                            '{ background-image: url("data:image/svg+xml;utf8,'+ SVG_UI_File_Icons['file_icon_image'] +'"); }' +
  772.     '#content_pane.has_ignored #title span::before          { background-image: url("data:image/svg+xml;utf8,'+ SVG_UI_File_Icons['file_icon_ignored'] +'"); }' +
  773.     '#content_pane.has_iframe #title span.has_other::before { background-image: url("data:image/svg+xml;utf8,'+ SVG_UI_File_Icons['file_icon_file'] +'"); }' +
  774.     '#content_audio_title td:before                         { background-image: url("data:image/svg+xml;utf8,'+ SVG_UI_File_Icons['file_icon_audio'] +'"); height:14px !important; }' +
  775.     '#content_pane.has_pdf #title span::before              { background-image: url("data:image/svg+xml;utf8,'+ SVG_UI_File_Icons['file_icon_pdf'] +'"); }' +
  776.     '#content_pane.has_video #title span::before            { background-image: url("data:image/svg+xml;utf8,'+ SVG_UI_File_Icons['file_icon_video'] +'"); }' +
  777.     'body.theme_light #grid_btn.has_grid, body.theme_light #grid_btn.has_grid:hover ul'+
  778.                                                            '{ background-image: url("data:image/svg+xml;utf8,'+ SVG_UI_Icons['grid_loaded'] +'") !important; opacity:1 !important; }' +
  779.     'body.theme_dark #grid_btn.has_grid, body.theme_dark #grid_btn.has_grid:hover ul'+
  780.                                                            '{ background-image: url("data:image/svg+xml;utf8,'+ SVG_UI_Icons['grid_loaded_dark'] +'") !important; opacity:1 !important; }' +
  781.  
  782.     '#parent_dir_menu a, #bookmarks_menu div, #bookmarks li a::before, #bookmarks li.toggle_UI_pref span::before, #theme::before, #enable_text_editing::before, #sort_menu span::before, #preview_text_menu_item span::before, #sorting div span::before, #sorting div span::after, #toggle_sidebar, #toggle_info, #content_pane, #close_audio, #prev_track, #next_track, #glyph_viewer' +
  783.                                                            '{ background-position: center; }' +
  784.     '#prev_next_btns span, #scale span                      { background-position: center 36%; }' +
  785.     '.toggle_UI_pref, .bookmarks > a                        { background-position: 5px center; }' +
  786.     '#dir_list tbody a                                      { background-position: 6px 4px; }' +
  787.     '#dir_list a.icon span                                  { background-position: 6px 0; }' +
  788.     '#bookmarks ul a                                        { background-position: 8px center; }' +
  789.     '#bookmarks > li                                        { background-position: right 6px center; }' +
  790.     '#grid_btn,#grid_btn .menu                              { background-position: right 5px top 6px; }' +
  791.     '#content_audio_title td:before                         { background-position: right 4px center; }' +
  792.     '#bookmarks li a::before, .toggle_UI_pref, #toggle_sidebar, #grid_btn, #grid_btn .menu, #toggle_info, #main_content a, a, div, li, span, span::before, span::after, #dir_list a.icon span, #content_pane, #glyph_viewer, #warnings h3::before, #content_audio_title td:before'+
  793.                                                            '{ background-repeat: no-repeat; }' +
  794.     '#glyph_viewer                                          { background-size: contain; }' +
  795.     '.toggle_UI_pref, th .sorting, #scale span              { background-size: 10px; }' +
  796.     '.bookmarks > a, li.has_submenu, #parent_dir_menu a     { background-size: 12px; }' +
  797.     '#dir_list tbody a, #dir_list a.icon span, #bookmarks ul a, #close_audio, #grid_btn, #grid_btn .menu'+
  798.                                                            '{ background-size: 14px; }' +
  799.     '#toggle_sidebar, #toggle_info                          { background-size: 18px; }' +
  800.     '#warnings h3::before                                   { background-size: 24px; }' +
  801.     '#prev_next_btns span                                   { background-size: 33%; }' +
  802.     '#content_pane                                          { background-size: 50%; }' +
  803.     ':root, html, body, #sidebar_wrapper, #sidebar_header, #dir_list, #main_content, #content_pane, #content_pdf, #content_iframe' +
  804.                                                            '{ border: 0 !important; }' +
  805.     'body.theme_dark ul                                     { border: solid 1px #222; }' +
  806.     'button                                                 { border: solid 1px #333; }' +
  807.     'body.theme_light #sidebar ul                           { border: solid 1px gray; }' +
  808.     'body.theme_dark #sidebar_header .menu, body.theme_dark #text_editor_row, body.theme_dark:not(.is_error) #dir_list #tbody, body.theme_dark #tfoot' +
  809.                                                            '{ border-top: solid 1px #111; }' +
  810.     'body.theme_light #dir_list tbody, #grid_btn .menu, body.theme_light #bookmarks, body.theme_light #text_editor_row, #tfoot, .font_grid_item:not(:first-of-type), .image_grid_item + .font_grid_item, #font_info th, #font_info td' +
  811.                                                            '{ border-top: solid 1px grey; }' +
  812.     '#sort_by, tr.sorted, tr:not(.invisible) ~ tr.invisible + tr:not(.invisible)' + // , tr.dir ~ tr:not(.dir,.invisible,.ignore)
  813.                                                            '{ border-top: solid 1px #999; }' +
  814.     'body.theme_dark #grid_btn ul.menu                      { border-top: solid 1px #EEE; }' +
  815.     '#parents_dir_menu + ul, #bookmarks_menu + ul, #grid_btn ul.menu'+
  816.                                                            '{ border-right: 0 !important; }' +
  817.     'body.theme_dark #parents_dir_menu, body.theme_dark #sidebar, body.theme_dark #warnings' +
  818.                                                            '{ border-right: solid 1px #111; }' +
  819.     '#sidebar, body.theme_light #parents_dir_menu, body.theme_light #grid_btn .menu li, .image_grid_item, div.glyph_container, #font_info td:first-of-type' +
  820.                                                            '{ border-right: solid 1px grey; }' +
  821.     'body.theme_dark #grid_btn .menu li                     { border-right: solid 1px #EEE; }' +
  822.     'body.theme_dark #sidebar_title, body.theme_dark #sidebar_menus, body.theme_dark #sidebar_header .menu, body.theme_dark #content_header, body.theme_dark #content_pane.has_audio #content_title, body.theme_dark #warnings' +
  823.                                                            '{ border-bottom: solid 1px #111; }' +
  824.     'body.theme_light #sidebar_header thead tr, body.theme_light #bookmarks, body.theme_light #sidebar_menus, body.theme_light #grid_btn .menu li#show_image_grid, #grid_btn .menu, .specimen, .font_grid_item:last-of-type, .image_grid_item, div.glyph_container, #glyph_viewer_info' +
  825.                                                            '{ border-bottom: solid 1px grey; }' +
  826.     'body.theme_light #content_title, body.theme_light #content_pane.has_audio #content_header' +
  827.                                                            '{ border-bottom: solid 1px #888; }' +
  828.     '#bookmarks_menu + ul > li.has_submenu.ruled, .rule     { border-bottom: solid 1px #999; }' +
  829.     'body.theme_dark #content_pane.has_font #content_font hr, .hamburger h4'+
  830.                                                            '{ border-bottom: solid 1px #CCC; }' +
  831.     'body.theme_dark #grid_btn ul.menu, body.theme_dark #grid_btn .menu li#show_image_grid'+
  832.                                                            '{ border-bottom: solid 1px #EEE; }' +
  833.     '#parents_dir_menu + ul, #bookmarks_menu + ul           { border-left:0; }' +
  834.     'body.theme_dark #parents_dir_menu, body.theme_dark  #grid_btn ul.menu, body.theme_dark #warnings' +
  835.                                                            '{ border-left: solid 1px #111; }' +
  836.     'body.theme_light #parents_dir_menu, #grid_btn .menu    { border-left: solid 1px grey; }' +
  837.     'body.theme_dark #grid_btn ul.menu                      { border-left: solid 1px #EEE; }' +
  838.     'table                                                  { border-collapse: collapse; }' +
  839.     'html, body, :root                                      { border-radius: 0; }' +
  840.     'button                                                 { border-radius: 3px; }' +
  841.     '#warnings                                              { border-radius: 0 0 3px 3px; }' +
  842.     'body.theme_light #sidebar ul                           { box-shadow: 0px 2px 3px -2px #888; }' +
  843.     'body.theme_dark #sidebar ul                            { box-shadow: 0px 2px 3px -2px #111; }' +
  844.     '#warnings                                              { box-shadow: 0px 2px 12px 0 #111; }' +
  845.     'body.theme_dark  #grid_btn ul.menu                     { box-shadow: none; }' +
  846.     'html, body, :root, #sidebar, #grid_btn .menu li, #content_container, #content_source, #content_preview' +
  847.                                                            '{ box-sizing: border-box; }' +
  848.     '#checkbox_div label, #grid_btn .menu li, #content_grid .font_grid_item'+
  849.                                                            '{ clear: both; }' +
  850.     '#dir_list tbody .name                                  { clear: right; }' +
  851.     'body.theme_light #sidebar, body.theme_light #sidebar a, #content_header, body.theme_light #content_font, body.theme_light .font_grid_item a, body.theme_light .image_grid_item p, body.theme_light #content_font, body.theme_light .font_grid_item p, body.theme_light .font_grid_item a, body.theme_light .image_grid_item p, .split_btn span, body #warnings, body.theme_dark #grid_btn .menu li' +
  852.                                                            '{ color: #111 }' +
  853.     'body.theme_light #sidebar #tfoot tr                    { color: #444 }' +
  854.     'body.theme_light #dir_list tr.ignore a, body.theme_light #dir_list tr.ignore.app a, .glyph_info' +
  855.                                                            '{ color: #777 }' +
  856.     '#sort_menu .disabled span, #dir_list th.disabled       { color: #999 }' +
  857.     'body.theme_dark #dir_list tr.ignore td, body.theme_dark #dir_list tr.file.ignore a, body.theme_dark #sidebar #tfoot td' +
  858.                                                            '{ color: #BBB }' +
  859.     'body.theme_dark #sidebar th:not(.disabled), body.theme_dark #sidebar td, body.theme_dark #sidebar a, body.theme_dark #error_message *, body.theme_dark #content_header tr, body.theme_dark #content_header tr a, body.theme_dark #content_font, body.theme_dark .font_grid_item p, body.theme_dark .font_grid_item a, body.theme_dark .image_grid_item p, #warnings button:focus, #warnings button.focus' +
  860.                                                            '{ color: #EEE }' +
  861.     '#warnings h3::before, #bookmarks li > a::before, #bookmarks li > span::before, #preview_text_menu_item span::before, #sorting div span::before, #sorting div span::after, body.has_hidden_sidebar #handle, #dir_list tr:empty, #dir_list .audio td.icon, #dir_list .video td.icon, tr.invisible, body.hide_ignored .ignore, .split_btn::after, #content_pane.has_grid #content_grid::after, #title span::before' +
  862.                                                            '{ content: "" }' +
  863.     '#content_pane.has_image:not(.has_grid) #title::after, #content_pane.has_zoom_image:not(.has_grid) #title::after'+
  864.                                                            '{ content: attr(data-after) }' +
  865.     '#content_pane.has_font #title::before                  { content: "Font: " }' + // font and image grid
  866.     '#content_pane.has_grid:not(.has_ignored) #title::before{ content: "Fonts and Images from: " }' + // font and image grid
  867.     'body:not(.has_images) #content_pane.has_grid:not(.has_ignored) #title::before, #content_pane.has_grid #title.font_grid::before' +
  868.                                                            '{ content: "Fonts from: " }' + // font grid
  869.     '#glyph_viewer_info div::before                         { content: "Glyph " }' +
  870.     '#content_pane.has_ignored:not(.has_grid) #title::before{ content: "Ignored content: " }' + // .ignored
  871.     'body:not(.has_fonts) #content_pane.has_grid:not(.has_ignored) #title::before, #content_pane.has_grid #title.image_grid::before' +
  872.                                                            '{ content: "Images from: " }' + // image grid
  873.     '#content_pane.has_dir:not(.has_grid) #title::before    { content: "Index of: " }' + // .dir
  874.     'body:not(.has_playlist) #sidebar_title th:before       { content: "INDEX OF"; }' +
  875.     '#content_pane.has_audio #content_audio_title td::before, body #content_pane.has_video #title::before' +
  876.                                                            '{ content: "Playing: " }' + // .audio, .video
  877.     'body.has_playlist #sidebar_title th:before             { content: "PLAYLIST"; }' +
  878.     'body#top.edited #warnings.unloading h3::before         { content: "Text Editor: " }' +
  879.     'body#top.edited #text_editor_row a:after               { content: " (edited)"; }' +
  880.     'body.edited.has_text #title::after, body.iframe_edited:not(.has_text) #content_pane.has_iframe #title::after' +
  881.                                                            '{ content: " (edited)"; }' + // .ignored
  882.     'body.show_numbers #tbody                               { counter-reset: row; }' +
  883.     'body.show_numbers #tbody tr td.name a::before          { counter-increment: row;  content:counter(row);}' +
  884.     '#sidebar_title th, #sort_menu .disabled span, #dir_list .disabled'+
  885.                                                            '{ cursor: default; }' +
  886.     '#sidebar_menus td:hover, #parents_dir_menu div, #bookmarks_menu div, .menu label, #grid_btn, #sorting .toggle_UI_pref, #toggle_info, .split_btn span' +
  887.                                                            '{ cursor: pointer; }' +
  888.     '#handle                                                { cursor: col-resize; }' +
  889.     '#content_pane:not(.has_zoom_image) #content_image img  { cursor: zoom-in; }' +
  890.     '#content_pane.has_zoom_image #content_image img        { cursor: zoom-out; }' +
  891.     '#sidebar_menus ul, #show_details span, body.has_playlist #grid_btn, body.has_playlist #sidebar_buttons td > label, #grid_btn .menu, body:not(.has_media) #sorting .name input, #bookmarks li#theme span span, #preview_text::before, #source_text::before, #sidebar_buttons td.up::before, body:not(.show_details) #sorting .details.sorting, #dir_list tr::before, #tbody tr td:not(.name), #text_editor_row, body.has_hidden_sidebar #handle, body.has_hidden_sidebar #sidebar, #dir_list tr:empty, #dir_list tr.audio td.icon, #dir_list tr.video td.icon, tr.invisible, body.hide_ignored #tbody tr.ignore, #content_title::before, #content_pane #content_audio_title, .split_btn, #content_pane #content_audio, #content_pane #content_text, #content_pane .content, #content_pane.has_grid .content, #content_pane:not(.has_hidden_grid) #content_grid, #content_pane.has_grid.has_zoom_image #content_image, #font_specimen, #font_viewer, body.has_text .content:not(#content_text), body.theme_light #theme_dark, body.theme_dark #theme_light, body.use_custom_icons #dir_list img, #dir_list tr.file.audio a img, #dir_list tr.file.video a img, #warnings, #warnings p, #warnings button, #clear_warning, #overlay, #glyph_viewer, #font_info tbody' +
  892.                                                            '{ display: none; }' +
  893.     'body.is_error #sorting, body.is_error #sidebar_buttons, body.is_error #text_editor_row, body.is_error #content_pane.has_iframe #content_iframe.has_content' +
  894.                                                            '{ display: none !important; }' +
  895.     '#sidebar li, #parent_dir_menu, #parent_dir_menu a, #parents_dir_menu + ul li a, #bookmarks_menu + ul li a, #bookmarks_menu + ul li > span, #bookmarks_menu + ul > li:hover > ul, #bookmarks_menu + ul > li > ul:hover, .menu label, body.show_details #show_details span:last-of-type, body:not(.show_details) #show_details span:first-of-type, #sort_by_default, #dir_list tbody a, #dir_list tfoot tr, #content_header, #content_pane.has_font:not(.has_grid) #content_font, #content_pane.has_font:not(.has_grid) #content_font:not(.has_font_viewer) #font_specimen, #content_pane.has_font:not(.has_grid) #content_font.has_font_viewer #font_viewer,  #content_pane.has_pdf:not(.has_grid) #content_pdf, body.has_text #content_pane:not(.has_grid) #content_text, #content_pane.has_video:not(.has_grid) #content_video, body:not(.has_text) #content_pane.has_iframe:not(.has_grid) #content_iframe, #content_pane.has_dir:not(.has_grid) #content_iframe, #content_pane.has_grid #content_grid.has_grid, #content_pane.has_grid #content_grid.has_font_grid, #content_pane.has_grid .nav_btn, #content_pane.has_font .nav_btn, .font_grid_item a, .image_grid_item a, #checkbox_div label, body.theme_dark #theme_dark, body.theme_light #theme_light, body:not(.has_hidden_sidebar) #dir_list .name, body.has_warning #warnings, body.has_warning #warnings.unloading p#warning_unsaved, body.has_warning #warnings.clear #warning_clear, body.has_warning #warnings.local p#warning_local, body.has_warning #overlay' +
  896.                                                            '{ display: block; }' +
  897.     '#parents_dir_menu div, body.has_images.has_fonts #grid_btn:hover ul.menu, #font_info:hover tbody' +
  898.                                                            '{ display:block !important; }' +
  899.     '#parents_dir_menu div, #bookmarks li > a::before, #bookmarks li > span::before, #bookmarks li#theme > span::before, body.theme_dark #bookmarks #theme_dark, body:not(.theme_dark) #bookmarks #theme_light, body.preview_text #preview_text::before, body.source_text #source_text::before, #sorting div span::before, #enable_text_editing::before, #sorting div span::after, body.show_details #dir_list td.details:not(.name):not(.ext), body.show_numbers #tbody tr td.name a::before, #title, #checkbox_div, #audio_container, #prev_track, #next_track, #close_audio, #warnings h3::before, body.has_warning #warnings.unloading #warning_ignore_btn, body.has_warning #warnings.unloading #warning_cancel_btn, body.has_warning #warnings.unloading #warning_save_btn, body.has_warning #warnings.clear #warning_clear_btn, body.has_warning #warnings.clear #warning_cancel_btn, body.has_warning #warnings.local #warning_ok_btn, #glyph_viewer_info div' +
  900.                                                            '{ display: inline-block; }' +
  901.     'body:not(.is_gecko) #dir_list tr td.name span, #content_pane.has_image:not(.has_grid) #content_container, #content_pane.has_video:not(.has_grid) #content_container, #content_pane.has_image:not(.has_grid) #content_image, #content_pane.has_zoom_image #content_image, #font_info tbody tr' +
  902.                                                            '{ display: flex; }' +
  903.     '#content_pane.has_grid .split_btn, #content_pane.has_image .split_btn, #content_pane.has_zoom_image .split_btn, #content_pane.has_font .split_btn, .split_btn span' +
  904.                                                            '{ display: inline-flex; }' +
  905.     'body.is_gecko #dir_list tr td.name span                { display: flow-root; }' +
  906.     'body.has_text #text_editor_row, body.show_details #text_editor_row, body.has_hidden_text #text_editor_row, #content_pane.has_audio #content_audio_title, #content_pane.has_audio #content_audio' +
  907.                                                            '{ display: table-row !important; }' +
  908.     '#bookmarks_menu div, #content_pane, #content_pane.has_audio #content_audio td' +
  909.                                                            '{ display: table-cell; }' +
  910.     '#sorting > div                                         { display: grid; grid-gap:0; grid-template-columns: 1fr 1fr 1fr 1fr; }' +
  911.     '#sort_by_name                                          { grid-column: 1 / span 2; }' +
  912.     '#sort_by_default                                       { grid-column: 3 / span 2; }' +
  913.         // display grid: dir_list rows and cells
  914.     '#dir_list #tbody tr:not(.invisible), body.show_invisibles #tbody tr.invisible, body.show_details #dir_list tr td.details' +
  915.                                                            '{ display: grid; grid-gap:0; grid-template-columns:  minmax(auto,7rem) 1fr minmax(auto,8rem); }' +
  916.         'td.name                                            { grid-column: 1 / span 3; }' +
  917.         'td.size                                            { grid-column: 1; grid-row: 2; }' +
  918.         'td.date                                            { grid-column: 2; grid-row: 2; }' +
  919.         'td.kind                                            { grid-column: 3; grid-row: 2; }' +
  920.     // display grid: content pane grids
  921.     '#content_pane.has_grid #content_grid                   { display: grid !important; grid-gap:0; grid-template-columns: repeat(auto-fill, minmax('+ ( $settings.grid_image_size + 16) +'px, auto)); grid-auto-rows: minmax(min-content, max-content); }' +
  922.     '#content_grid .image_grid_item                         { grid-column: auto; display:flex; align-items: center; justify-content: center; }' +
  923.     '#content_grid .font_grid_item                          { grid-column: 1 / -1; }' +
  924.      // glyphs container
  925.     '#content_font div#glyphs_container                     { display:grid; grid-gap:0; grid-template-columns:repeat(auto-fill, minmax(120px,auto)); }' +
  926.     'body.theme_dark #bookmarks li > span::before, body.theme_dark #grid_btn, body.theme_dark #parent_dir_menu, body.theme_dark #bookmarks_menu, body.theme_dark #toggle_sidebar, body.theme_dark #toggle_info, body.theme_dark .glyph_container canvas, body.theme_dark #glyph_viewer:not(#glyph_viewer_info), body.theme_dark #glyph_viewer #glyph_viewer_info, body.theme_dark #sorting span::before, body.theme_dark #sorting span::after, body.is_gecko.theme_dark #prev_track, body.is_gecko.theme_dark #next_track, body.is_gecko.theme_dark #close_audio, body.is_safari.theme_dark #prev_track, body.is_safari.theme_dark #next_track, body.is_safari.theme_dark #close_audio ' +
  927.                                                            '{ filter:invert(1); }' +
  928.     '.menu input, #dir_list tr td.name a::before, #title_buttons_left button, #checkbox_div label, #prev_track, #next_track, #scale, #close_btn, #save_svg, #warnings h3::before, #warnings h3::before' +
  929.                                                            '{ float: left; }' +
  930.     'html, body, :root                                      { font-family:'+ $settings.UI_font +'; }' +
  931.     'body, :root, #content_text                             { font-size: '+ $settings.UI_font_size +'; }' +
  932.     '#sidebar, #sidebar_header, #dir_list, #tfoot, #content_header, #content_header table, #warnings, #font_info td, #font_info th, #glyph_viewer_info' +
  933.                                                            '{ font-size: 0.875rem; }' +
  934.     '#content_grid, .font_grid_item p, #error_message h1, #error_message h2' +
  935.                                                            '{ font-size: 1rem; }' +
  936.     '#content_grid .font_grid_item h2                       { font-size: '+ $settings.grid_font_size * 4 +'em; }' +
  937.     '#content_font                                          { font-size: '+ $settings.grid_font_size +'em; }' +
  938.     '.lorem.first:first-line                                { font-size: '+ $settings.grid_font_size * 1.33 +'em; }' +
  939.     'td.name, td.name a::before, td.size, td.date           { font-variant-numeric: tabular-nums; }'+
  940.     '.lorem.first:first-line                                { font-variant: small-caps }' +
  941.     '#sidebar_title th, h1, h2, h3, h4, h5, h6, #font_info th'+
  942.                                                            '{ font-weight: normal }' +
  943.     '#dir_list .selected a, body.has_text #text_editor_row, body.edited:not(.has_hidden_text) #text_editor_row, #font_info td:first-of-type' +
  944.                                                            '{ font-weight: bold }' +
  945.     'html, body, :root, #parent_dir_menu a, #dir_list, #toggle_info, #main_content, #content_pane, #content_pdf, #content_text, #content_iframe, #content_grid img[src$=".svg"]' +
  946.                                                            '{ height: 100%; }' +
  947.     '#sidebar_header, #parents_dir_menu, #parents_dir_menu div, #content_pane:not(.has_zoom_image) #content_image img, #content_grid img' +
  948.                                                            '{ height: auto; }' +
  949.     '.menu input                                            { height: 0; }' +
  950.     '#sorting div span::after                               { height: 8px; }' +
  951.     '#bookmarks .toggle_UI_pref span::before, #theme::before, #sort_menu span::before, #preview_text_menu_item span::before, #sorting div span::before, #enable_text_editing::before'+
  952.                                                            '{ height: 9px; }' +
  953.     '#bookmarks li.bookmarks a::before                      { height: 12px; }' +
  954.     '#toggle_sidebar, #toggle_info                          { height: 14px; }' +
  955.     '#grid_btn, button, #prev_next_btns span, #scale span   { height: 18px; }' +
  956.     '#warnings h3::before                                   { height: 24px; }' +
  957.     '#audio                                                 { height: 32px; }' +
  958.     '#main_content                                          { height: '+ window.innerHeight +'px; }' +
  959.     '#content_pane:not(.has_zoom_image) #content_image img  { max-height: calc(100% - 4em); }' +
  960.     '#font_info tbody                                       { max-height: '+ (window.innerHeight * 0.75) +'px; }' +
  961.     '!#content_pane.has_zoom_image #content_image img       { max-height: none; }' +
  962.     '#content_grid img                                      { max-height: '+ ($settings.grid_image_size) +'px; }' +
  963.     '#title                                                 { min-height: 18px; }' +
  964.     '#sidebar                                               { min-height: 100%; }' +
  965.     '#parents_dir_menu div, #content_header td button, #content_font'+
  966.                                                            '{ hyphens: none; }' +
  967.     'html, body, :root, .hamburger h3, .lorem               { hyphens: auto; }' +
  968.     '#content_container                                     { justify-content: center; }' +
  969.     '.lorem.first:first-line, .font_grid_item p, #font_info th'+
  970.                                                            '{ letter-spacing: 0.1em; text-indent:0.1em; }' +
  971.     '#sidebar_title th                                      { letter-spacing: 0.5em; text-indent:0.5em; }' +
  972.     '.image_grid_item a, button                             { line-height: 0; }' +
  973.     '.split_btn span, .font_grid_item p                     { line-height: 1; }' +
  974.     '#dir_list tr a, #title                                 { line-height: 1.4; }' +
  975.     '#warnings h3                                           { line-height: 2; }' +
  976.     '#sidebar ul, #grid_btn .menu li                        { list-style-type: none; }' +
  977.     'html, body, :root, #sidebar ul, #parent_dir_menu, #parent_dir_menu, #parents_dir_menu, #parents_dir_menu + ul li a, #bookmarks_menu + ul li a, #bookmarks_menu + ul li > span, #bookmarks_menu, #grid_btn, #dir_list tbody a, #content_font .hamburger *, #content_font canvas, #content_grid p, #content_grid  h2, #content_text, #warnings h3' +
  978.                                                            '{ margin: 0; }' +
  979.     '#content_image, #content_image img                     { margin-left: auto; margin-right: auto; }' +
  980.     '.image_grid_item + .font_grid_item                     { margin-top: -1px; }' +
  981.     '#checkbox_div label input, #show_details, body.is_error #tbody h1'+
  982.                                                            '{ margin-top: 0; }' +
  983.     'body.has_audio #dir_list input                         { margin-top: 1px; }' +
  984.     '#increase                                              { margin-right: -4px; }' +
  985.     'th input, tr.media input, #scale                       { margin-right: 8px; }' +
  986.     '#show_details                                          { margin-right: 0.5em; }' +
  987.     '#warning_ignore_btn                                    { margin-right: 2em; }' +
  988.     '#checkbox_div                                          { margin-right: calc(-6em - 4px); }' +
  989.     '#bookmarks li a::before                                { margin-bottom: -2px; }' +
  990.     '#show_details                                          { margin-bottom: 0; }' +
  991.     'body.has_audio #dir_list input                         { margin-bottom: 1px; }' +
  992.     '#content_grid.has_image_grid                           { margin-bottom: 1rem; }' +
  993.     '#decrease                                              { margin-left: -4px; }' +
  994.     'th input                                               { margin-left: 2px; }' +
  995.     'tr.media input                                         { margin-left: 7px; }' +
  996.     '#prev_next_btns                                        { margin-left: 8px; }' +
  997.     '#show_details, #warnings button                        { margin-left: 0.5em; }' +
  998.     '#warnings                                              { margin-left: -12em; }' +
  999.     '#dir_list tbody tr                                     { margin-inline-start: 0; }' +
  1000.     '#sidebar ul                                            { -webkit-margin-before: 0em !important; -webkit-margin-after: 0em !important; -webkit-padding-start:0em; }' +
  1001.     '#open_font                                             { opacity: 0.0; }' +
  1002.     '#content_pane.has_ignored::before, #close_audio::after { opacity: 0.3; }' +
  1003.     '#close_audio:hover::after                              { opacity: 0.6; }' +
  1004.     '#sidebar_menus td:last-of-type:hover > div, #bookmarks_menu_container #bookmarks_menu, #parent_dir_menu, #toggle_sidebar, #grid_btn, #toggle_info, body.use_custom_icons #dir_list tr.file.ignore a.icon::before, .split_btn span' +
  1005.                                                            '{ opacity: 0.7; }' +
  1006.     '#grid_btn:hover, #parent_dir_menu:hover, #bookmarks_menu_container:hover #bookmarks_menu, #prev_next_btns span:hover, #toggle_sidebar:hover, #grid_btn:hover, #toggle_info:hover, .split_btn span:hover' +
  1007.                                                            '{ opacity: 1.0; }' +
  1008.     '#grid_btn, #dir_list tbody, #dir_list tbody a, #audio:focus, #content_grid .font_grid_item, #content_font, #warnings button:focus, #content_video' +
  1009.                                                            '{ outline: none; }' +
  1010.     'html, body, :root, #parents_dir_menu div, #bookmarks_menu, #dir_list, #dir_list tbody a, #dir_list .details.kind, #main_content, #close_audio, .hamburger h1, .hamburger h2, .hamburger h4' +
  1011.                                                            '{ overflow: hidden; }' +
  1012.     '#dir_list tbody, #next_track, #prev_track, #content_container, #content_font, #content_grid, #font_info tbody' +
  1013.                                                            '{ overflow: auto; }' +
  1014.     '#sidebar, #content_font                                { overflow-wrap: break-word; }' +
  1015.     'html, body, :root, #main_content > thead th, #sidebar_wrapper, #sidebar ul, #sidebar_menus > td, #parent_dir_menu, #parent_dir_menu, #parent_dir_menu a, #parents_dir_menu, #bookmarks_menu, #grid_btn, #dir_list .details a, #tfoot, #title_buttons_left button, #content_pane, #reload_btn, #close_btn, #audio_container > div, #content_pdf, #content_iframe, #content_text, audio::-webkit-media-controls-panel' +
  1016.                                                            '{ padding: 0; }' +
  1017.     'div#glyphs_container, div.glyph_container, #glyph_viewer, #glyph_viewer_info div'+
  1018.                                                            '{ padding: 0 !important; }' +
  1019.     '#show_details, #prev_next_btns, #scale                 { padding-top: 0; }' +
  1020.     '#sidebar_title th, #parents_dir_menu div, #parents_dir_menu + ul li a, #grid_btn .menu li, #dir_list tbody a, #stats, #title_buttons_left, #title_buttons_right, #title, body #content_audio_title td, #content_audio td, #content_font div#glyph_viewer_info, #font_info td' +
  1021.                                                            '{ padding-top: 4px; }' +
  1022.     '#sidebar_header tbody tr:last-of-type td, #bookmarks_menu + ul li a, #bookmarks_menu + ul li > span, #bookmarks_menu + ul li div span, .menu label, #sorting .toggle_UI_pref, #sidebar_buttons td, #text_editor_row th, .image_grid_item, .hamburger h4' +
  1023.                                                            '{ padding-top: 6px; }' +
  1024.     '#content_grid .font_grid_item, .font_grid_item p, #content_font div.lorem' +
  1025.                                                            '{ padding-top: 0.5rem; }' +
  1026.     '#error_message, #warnings                              { padding-top: 1rem; }' +
  1027.     'body:not(.has_text) #content_pane.has_image:not(.has_grid) #content_container, #content_font div.specimen' +
  1028.                                                            '{ padding-top: 2rem; }' +
  1029.     '#sidebar_header tbody tr:last-of-type td               { padding-right: 0; }' +
  1030.     'div.glyph_container div.glyph_info                     { padding-right: 2px; }' +
  1031.     '#sidebar_title th, #scale                              { padding-right: 4px; }' +
  1032.     '#parents_dir_menu div, #grid_btn .menu li, #stats, #title_buttons_left, #title_buttons_right, #content_audio td, #audio_container, #content_font div#glyph_viewer_info, #font_info td, .image_grid_item' +
  1033.                                                            '{ padding-right: 6px; }' +
  1034.     '#bookmarks_menu + ul li a, #bookmarks_menu + ul li > span, #bookmarks_menu + ul li div span, .menu label, body.show_numbers #tbody tr td.name a::before, #dir_list tbody a' +
  1035.                                                            '{ padding-right: 8px; }' +
  1036.     '#parents_dir_menu + ul li a, #dir_list td.details, #title, #content_audio_title td'+
  1037.                                                            '{ padding-right: 12px; }' +
  1038.     '#content_audio_title td:before                         { padding-right: 18px; }' +
  1039.     '#grid_btn .menu                                        { padding-right: 24px; }' +
  1040.     '#error_message, #warnings                              { padding-right: 1rem; }' +
  1041.     '.font_grid_item p, .font_grid_item a                   { padding-right: 2rem; }' +
  1042.     'body:not(.has_text) #content_pane.has_image:not(.has_grid) #content_container, #font_specimen' +
  1043.                                                            '{ padding-right: 2.5rem; }' +
  1044.     '#show_details, #prev_next_btns, #scale                 { padding-bottom: 0; }' +
  1045.     'body.is_dirs_on_top #dir_list tbody tr.sorted:not(:last-of-type), div.glyph_container div.glyph_info' +
  1046.                                                            '{ padding-bottom: 2px; }' +
  1047.     '#sorting, #title, body #content_audio_title td, #title_buttons_left, #title_buttons_right' +
  1048.                                                            '{ padding-bottom: 3px;}' +
  1049.     '#sidebar_title th, #parents_dir_menu div, #parents_dir_menu + ul li a, #grid_btn .menu li, #dir_list tbody a, #sidebar .details, #content_font div#glyph_viewer_info, #font_info td' +
  1050.                                                            '{ padding-bottom: 4px; }' +
  1051.     '#sidebar_header tbody tr:last-of-type td, #parents_dir_menu + ul li:last-of-type a, #bookmarks_menu + ul li a, #bookmarks_menu + ul li > span, #bookmarks_menu + ul li div span, .menu label, body:not(.show_details) #sorting, #text_editor_row th, #dir_list tfoot td, #content_audio td, .image_grid_item' +
  1052.                                                            '{ padding-bottom: 6px; }' +
  1053.     '.hamburger h4                                          { padding-bottom: 9px; }' +
  1054.     '.specimen, .font_grid_item p, .font_grid_item a        { padding-bottom: 0.5rem; }' +
  1055.     '#error_message, #warnings                              { padding-bottom: 1rem; }' +
  1056.     'body:not(.has_text) #content_pane.has_image:not(.has_grid) #content_container, #content_font > div.specimen, #content_font .lorem:last-of-type' +
  1057.                                                            '{ padding-bottom: 2rem; }' +
  1058.     '#dir_list #tbody td.name a.icon, #dir_list td.details, #grid_btn .menu, #sidebar_header tbody tr:last-of-type td, #prev_next_btns' +
  1059.                                                            '{ padding-left: 0px; }' +
  1060.     'div.glyph_container div.glyph_info                     { padding-left: 2px; }' +
  1061.     '#sidebar_title th, #bookmarks ul li a, #dir_list .audio a, #dir_list .video a, #checkbox_div, #scale' +
  1062.                                                            '{ padding-left: 4px; }' +
  1063.     '#parents_dir_menu div, #dir_list th#name, #dir_list td.icon, #dir_list .icon + td.name a, #dir_list tfoot td:not(#toggle_info), #checkbox_div #parents_dir_menu div, #grid_btn .menu li, #title_buttons_left, #title_buttons_right, #content_audio td, #audio_container, #content_font div#glyph_viewer_info, #font_info td, .image_grid_item' +
  1064.                                                            '{ padding-left: 6px; }' +
  1065.     '#parents_dir_menu + ul a, #title, #content_audio_title td'+
  1066.                                                            '{ padding-left: 12px; }' +
  1067.     '#text_editor_row a                                     { padding-left: 18px; }' +
  1068.     '.menu label, body.has_hidden_sidebar #title_buttons_left'+
  1069.                                                            '{ padding-left: 24px; }' +
  1070.     '#dir_list #tbody tr:not(.media) a span                 { padding-left: 27px; -webkit-padding-start: 27px; }' +
  1071.     '#bookmarks .bookmarks ul li a                          { padding-left: 28px; }' +
  1072.     '#dir_list #tbody td.details.size, tr.media a.icon      { padding-left: 30px; }' +
  1073.     '#error_message, #warnings                              { padding-left: 1rem; }' +
  1074.     '.font_grid_item p, .font_grid_item a                   { padding-left: 2rem; }' +
  1075.     'body:not(.has_text) #content_pane.has_image:not(.has_grid) #content_container, #font_specimen' +
  1076.                                                            '{ padding-left: 2.5rem; }' +
  1077.     '#dir_list td.name a                                    { -webkit-padding-start: 0; }' +
  1078.     '#dir_list .icon + td.name a                            { -webkit-padding-start: 1em; }' +
  1079.     '#sidebar_wrapper, #sidebar_header, #sidebar_buttons, #sidebar_menus td:first-of-type, #grid_btn, #dir_list, body.show_numbers #tbody tr td.name a::before, #dir_list tr.ignore a, #dir_list tr.ignore.app a, #dir_list tr.ignore td.details, #bookmarks_menu + ul > li.has_submenu, #content_pane, #content_header, #content_text, .glyph_container, #content_pdf, #content_iframe, #close_audio, #content_grid div img, #content_text, .split_btn, #content_pane.has_zoom_image #content_image, #content_image img' +
  1080.                                                            '{ position: relative; }' +
  1081.     '#sidebar ul, #handle, #parent_dir_menu, #toggle_sidebar, #toggle_info, body.has_hidden_sidebar #sidebar_wrapper, #dir_list tbody, #close_audio::after, .split_btn::after, #content_container, #content_grid, #warnings, #overlay, #content_pane.has_grid #content_grid::after, .glyph_info' +
  1082.                                                            '{ position: absolute; }' +
  1083.     '#tfoot, #glyph_viewer, #font_info, #content_pane.has_image #content_image'+
  1084.                                                            '{ position: fixed; }' +
  1085.     '#parent_dir_menu, #overlay, #glyph_viewer, #content_pane.has_zoom_image #content_image, #content_image'+
  1086.                                                            '{ top: 0; right: 0; bottom: 0; left: 0; }' +
  1087.     '#dir_list, #handle, #content_pane.has_grid #content_grid::after, .split_btn::after'+
  1088.                                                            '{ top: 0; bottom: 0; }' +
  1089.     '#sidebar ul, #tbody, .glyph_info, #tfoot               { left: 0; right: 0; }' +
  1090.     '#tbody, #toggle_info, #warnings                        { top: 0 !important; }' +
  1091.     '#bookmarks_menu + ul > li > ul, #grid_btn .menu        { top: -1px !important; }' +
  1092.     'body.has_hidden_sidebar #sidebar_wrapper               { top: 2px; }' +
  1093.     '#toggle_sidebar                                        { top: 4px; }' +
  1094.     '#grid_btn .menu, #content_grid, #content_pane.has_grid #content_grid::after, #toggle_info'+
  1095.                                                            '{ right: 0; }' +
  1096.     '#handle                                                { right: -4px; }' +
  1097.     '#toggle_sidebar                                        { right: 4px; }' +
  1098.     '#dir_list tbody, #tfoot, #content_container, .glyph_info, #font_info'+
  1099.                                                            '{ bottom: 0; }' +
  1100.     'body.has_hidden_sidebar #toggle_sidebar, #content_grid { left: 0; }' +
  1101.     '#grid_btn ul.menu                                      { left: unset; }' +
  1102.     'body.has_hidden_sidebar #sidebar_wrapper               { left: 3px; }' +
  1103.     'body.show_numbers #tbody tr td.name a::before          { left: 6px; }' +
  1104.     '#warnings, .split_btn::after                           { left: 50%; }' +
  1105.     '#bookmarks_menu + ul > li > ul                         { left: 100%; }' +
  1106.     '#sidebar ul, #dir_list tbody, #sort_by_name, #sort_by_size, #text_editor_row, #dir_list tbody .name, #dir_list tr.details, #title_buttons_left, #warnings' +
  1107.                                                            '{ text-align: left; }' +
  1108.     '#parent_dir_menu a, #parents_dir_menu, #parents_dir_menu div, #bookmarks_menu div, #content_header, #content_title, #content_audio_title, #content_audio td, .glyph_container, #glyph_viewer_info, #content_image' +
  1109.                                                            '{ text-align: center; }' +
  1110.     '#grid_btn .menu li, body.show_numbers #tbody tr td.name a::before, #sort_by_default, #sort_by_ext, #dir_list .size, #dir_list .date, #dir_list .kind, #title_buttons_right, #warnings div, .playlist_time, #font_info td:first-of-type' +
  1111.                                                            '{ text-align: right; }' +
  1112.     'a, a:hover                                             { text-decoration: none !important; }' +
  1113.     '#bookmarks .bookmarks ul li a                          { text-indent: -24px; }' +
  1114.     '#dir_list .details.kind                                { text-overflow: ellipsis; }' +
  1115.     '#dir_list, #content_pane                               { transform: scale(1); }' + // needed to establish #dir_list as containing block for thead and tfoot position fixed.
  1116.     'body.has_hidden_sidebar #toggle_sidebar, #sorting div.up span::after, #prev_track, #toggle_info' +
  1117.                                                            '{ transform:rotate(180deg) !important; }' +
  1118.     '#sidebar_header, #content_pane:not(.has_zoom_image) #content_image' +
  1119.                                                            '{ user-select:none; -webkit-user-select:none; }' +
  1120.     '#content_pane, #title_buttons_left, #title_buttons_right, #title'+
  1121.                                                            '{ vertical-align:top; }' +
  1122.     '#content_pane:not(.has_grid) #content_grid             { visibility:hidden; }' +
  1123.     '#sidebar_header tbody tr:last-of-type td, #parents_dir_menu div, #parents_dir_menu + ul li a, #bookmarks_menu + ul li a, #bookmarks_menu + ul li > span, #dir_list tbody a, .specimen, .lorem' +
  1124.                                                            '{ white-space: normal; }' +
  1125.     '#sorting span, #tbody td:not(.name), #grid_btn .menu li, .hamburger h1, .hamburger h2, .hamburger h4' +
  1126.                                                            '{ white-space: pre; }' +
  1127.     'html, body, :root, table, #parent_dir_menu a, #tbody, #tbody tr, #bookmarks_menu + ul > li > ul, #grid_btn .menu li, #content_container, #content_header, #content_grid, #content_text, #content_font svg, #content_pdf, #content_iframe, #content_grid img[src$=".svg"]' +
  1128.                                                            '{ width: 100%; }' +
  1129.     '#sidebar_menus td:nth-of-type(2), #dir_list .date, #title, #content_pane:not(.has_zoom_image) #content_image img, #content_grid img' +
  1130.                                                            '{ width: auto; }' +
  1131.     '.split_btn span                                        { width: 2em; }' +
  1132.     '#content_pane.has_grid #content_grid::after, .split_btn::after' +
  1133.                                                            '{ width: 1px; }' +
  1134.     '#handle                                                { width: 8px; }' +
  1135.     '#sorting div span::before, #sorting div span::after, #toggle_sidebar, #toggle_info' +
  1136.                                                            '{ width: 18px; }' +
  1137.     '#sidebar_menus td:nth-of-type(odd), #bookmarks li a::before, #bookmarks li > span::before, #sort_menu span::before, #preview_text_menu_item span::before, #grid_btn'+
  1138.                                                            '{ width: 24px; }' +
  1139.     '#warnings h3::before                                   { width: 32px; }' +
  1140.     '#prev_track, #next_track, #close_audio                 { width: 2rem; }' +
  1141.     '#content_pane:not(.has_image) #title_buttons_left, #content_pane:not(.has_image) #title_buttons_right, #content_pane:not(.has_zoom_image) #title_buttons_left, #content_pane:not(.has_zoom_image) #title_buttons_right' +
  1142.                                                            '{ width: 4rem; }' +
  1143.     '#bookmarks_menu div, #checkbox_div                     { width: 6em; }' +
  1144.     '#content_pane.has_image #title_buttons_left, #content_pane.has_image #title_buttons_right, #content_pane.has_zoom_image #title_buttons_left, #content_pane.has_zoom_image #title_buttons_right, #content_pane.has_grid #title_buttons_left, #content_pane.has_grid #title_buttons_right, #content_pane.has_font #title_buttons_left, #content_pane.has_font #title_buttons_right' +
  1145.                                                            '{ width: 9.5em; }' +
  1146.     '#warnings                                              { width: 26em; }' +
  1147.     'body.has_hidden_sidebar #sidebar_wrapper, .menu input  { width: 0 !important; }' +
  1148.     '#reload_btn, #close_btn                                { width: 52px; }' +
  1149.     '#font_info td:first-of-type                            { width: 33.33%; }' +
  1150.     '#font_info td:last-of-type                             { width: 66.66%; }' +
  1151.     'body.has_hidden_sidebar #content_pane, #font_info      { width: 100% !important; }' +
  1152.     'body:not(.has_hidden_sidebar) #sidebar_wrapper         { width:'+ getQuery('width').toString() +'%; }' +
  1153.     'body:not(.has_hidden_sidebar) #content_pane            { width:'+ (100 - getQuery('width')).toString() +'%; }' +
  1154.     '#content_video                                         { width: calc(100% - 2rem); }' +
  1155.     'html, body, :root                                      { max-width: 100%; }' +
  1156.     '#content_pane:not(.has_zoom_image) #content_image img  { max-width: calc(100% - 5rem); }' +
  1157.     '!#content_pane.has_zoom_image #content_image img       { max-width: none; }' +
  1158.     '#sidebar_menus td:nth-of-type(odd)                     { max-width: 24px; }' +
  1159.     '#content_grid img                                      { max-width:'+ ($settings.grid_image_size).toString() +'px; }' +
  1160.     'body.show_numbers #tbody tr td.name a::before          { min-width: 17px; }' +
  1161.     'body:not(.has_hidden_sidebar) #sidebar_menus td:nth-of-type(odd)'+
  1162.                                                            '{ min-width: 24px; }' +
  1163.     'body:not(.has_hidden_sidebar) #dir_list                { min-width: 100px; }' +
  1164.     'body:not(.has_hidden_sidebar) #sidebar_wrapper         { min-width: 220px; }' +
  1165.     '#sidebar_wrapper, #content_pane                        { will-change: width }' +
  1166.     '#content_header td button                              { word-break: none; }' +
  1167.     '#title                                                 { word-break: break-word; }' +
  1168.     '#content_pane                                          { z-index: 0; }' +
  1169.     '#handle, #sidebar_wrapper, #glyph_viewer, #font_info   { z-index: 1; }' +
  1170.     '#parents_dir_menu + ul, #content_header                { z-index: 2; }' +
  1171.     '#sidebar_header                                        { z-index: 3; }' +
  1172.     '#toggle_sidebar, #grid_btn                             { z-index: 9997; }' +
  1173.     '#overlay, #bookmarks                                   { z-index: 9998; }' +
  1174.     '#warnings                                              { z-index: 9999; }' +
  1175.     'body.has_hidden_sidebar #sidebar_header                { z-index:unset; }'
  1176.     ;
  1177.     // Gecko Styles:
  1178. 	const $gecko_style_rules =
  1179.         'html, body.is_gecko                                { border: solid 1px gray !important; }' +
  1180.         'body.is_gecko button                               { padding:revert; }' +
  1181.         'body.is_gecko #grid_btn .menu                      { top:-7px; left:-120px; }' +
  1182.         'body.is_gecko thead                                { font-size:100%; }' +
  1183.         'body.is_gecko #dir_list .dir::before               { position:absolute; }' +
  1184.         'body.is_gecko.use_default_icons:not(.is_converted_list) #dir_list .file .name .icon'+
  1185.                                                            '{ padding-left:4px; background:none; }' +
  1186.         'body.is_gecko.use_default_icons #dir_list .file .name .icon img'+
  1187.                                                            '{ margin-right:6px; height:14px; }' +
  1188.         'body.is_gecko #tbody > tr > td:not(:first-of-type) { float:left }' +
  1189.         'body.is_gecko #content_audio_title td              { padding-top: 6px; }' +
  1190.         'body.is_gecko #content_audio_title td              { padding-bottom: 0; }' +
  1191.         'body.is_gecko #audio, body.is_gecko #audio_container { background-color: transparent; }'
  1192.     ;
  1193. 	var $text_editing_style_rules =
  1194.         'html, body, #iframe_body                           { margin:0; padding:0; }' +
  1195.         // toolbar
  1196.         '#toolbar                                           { margin:0; padding:0; height:32px; display:block; position:relative; left:0; right:0; z-index:100; background:#EEE; border:0; border-bottom: solid 1px #999; font-family:'+ $settings.UI_font +'; font-size:'+ parseFloat($settings.UI_font_size) * 0.875 + $settings.UI_font_size.replace(/\d*/,'') +'; -webkit-user-select: none; -moz-user-select: none; user-select:none; }' +
  1197.         '#toolbar li                                        { margin:4px; padding:4px; width:3.5em; display:block; opacity:0.5; list-style-type:none; cursor:pointer; }' +
  1198.         '#toolbar li:hover, .preview_text:not(.split) #toolbar li#show_preview, body.source_text #show_source, .split_view #toolbar li#toggle_split, .edited #save_btn'+
  1199.                                                            '{ opacity:1; }' +
  1200.         '#toolbar li#toggle_split                           { float:left; width:16px; height: 16px; margin: 4px 0 4px 4px; background:url("data:image/svg+xml;utf8,<svg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\'  width=\'16px\' height=\'16px\' viewBox=\'0 0 16 16\' enable-background=\'new 0 0 16 16\' xml:space=\'preserve\'><path fill=\'%23333333\' d=\'M0,0v16h16V0H0z M15,15H8.5V1H15V15z M7.5,15H1V1h6.5V15z\'/></svg>") center no-repeat; }' +
  1201.         '#toolbar li#sync_scroll                            { width:8em; float:left; opacity:1; }' +
  1202.         '#toolbar li#sync_scroll input                      { float:left; }' +
  1203.         '#toolbar li#sync_scroll label                      { width:8em; display:block; font-size:inherit; line-height:1.5; }' +
  1204.         '#toolbar li#clear_text                             { height:16px; float:right; text-align:center; }' +
  1205.         '#toolbar li#save_btn                               { float:right; width:20px; height:16px; background: url("data:image/svg+xml;utf8,<svg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\'  width=\'16px\' height=\'16px\' viewBox=\'0 0 16 16\' enable-background=\'new 0 0 16 16\' xml:space=\'preserve\'><g> <path fill=\'%23333333\' d=\'M16,0v10.02h-1.33V1.33H1.33v8.69H0V0H16z\'/> <path fill=\'%23333333\' d=\'M8.47,16h-0.7l-3.08-3.08l0.94-0.94l1.83,1.83V4.28h1.33v9.53l1.81-1.82l0.94,0.93L8.47,16z\'/></g></svg>") 8px 4px no-repeat; position:relative; }' +
  1206.         '#toolbar li#show_source                            { float:left; width:16px; height: 16px; margin: 4px 0 4px 12px; background:url("data:image/svg+xml;utf8,<svg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\'  width=\'42px\' height=\'16px\' viewBox=\'0 0 42 16\' enable-background=\'new 0 0 42 16\' xml:space=\'preserve\'><g> <path fill=\'%23333333\' d=\'M0.08,7.02L5.94,3.9l0.43,0.78L1.18,7.42l5.19,2.74l-0.43,0.78L0.08,7.82V7.02z\'/> <path fill=\'%23333333\' d=\'M7.84,16.01H6.82L13.78,0h1.02L7.84,16.01z\'/> <path fill=\'%23444444\' d=\'M21.75,7.87l-5.86,3.12l-0.43-0.78l5.19-2.74l-5.19-2.74l0.43-0.78l5.86,3.12V7.87z\'/> <path fill=\'%23333333\' d=\'M30.98,2.65h-3.63V1.58h8.55v1.07h-3.63v9.65h-1.28V2.65z\'/> <path fill=\'%23333333\' d=\'M36.38,4.71h1.3l0.42-2h0.8v2h2.45v0.99h-2.45v4.63c0,0.74,0.27,1.15,0.96,1.15c0.43,0,1.09-0.21,1.39-0.35  l0.18,0.95c-0.42,0.26-1.18,0.45-1.81,0.45c-1.36,0-1.94-0.7-1.94-2.19V5.71h-1.3V4.71z\'/></g></svg>") left 5px no-repeat; }' +
  1207.         '#toolbar li#show_preview                           { float:left; width:16px; height: 16px; margin: 4px 0 4px 4px; background:url("data:image/svg+xml;utf8,<svg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\'  width=\'42px\' height=\'16px\' viewBox=\'0 0 42 16\' enable-background=\'new 0 0 42 16\' xml:space=\'preserve\'><g> <path fill=\'%23333333\' d=\'M0.08,7.02L5.94,3.9l0.43,0.78L1.18,7.42l5.19,2.74l-0.43,0.78L0.08,7.82V7.02z\'/> <path fill=\'%23333333\' d=\'M7.84,16.01H6.82L13.78,0h1.02L7.84,16.01z\'/> <path fill=\'%23444444\' d=\'M21.75,7.87l-5.86,3.12l-0.43-0.78l5.19-2.74l-5.19-2.74l0.43-0.78l5.86,3.12V7.87z\'/> <path fill=\'%23333333\' d=\'M30.98,2.65h-3.63V1.58h8.55v1.07h-3.63v9.65h-1.28V2.65z\'/> <path fill=\'%23333333\' d=\'M36.38,4.71h1.3l0.42-2h0.8v2h2.45v0.99h-2.45v4.63c0,0.74,0.27,1.15,0.96,1.15c0.43,0,1.09-0.21,1.39-0.35  l0.18,0.95c-0.42,0.26-1.18,0.45-1.81,0.45c-1.36,0-1.94-0.7-1.94-2.19V5.71h-1.3V4.71z\'/></g></svg>") -24px 5px no-repeat; }' +
  1208.         '.edited #toolbar li#save_btn                       { background: url("data:image/svg+xml;utf8,<svg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\'  width=\'16px\' height=\'16px\' viewBox=\'0 0 16 16\' enable-background=\'new 0 0 16 16\' xml:space=\'preserve\'><g> <path fill=\'%23DD2222\' d=\'M16,0v10.02h-1.33V1.33H1.33v8.69H0V0H16z\'/> <path fill=\'%23DD2222\' d=\'M8.47,16h-0.7l-3.08-3.08l0.94-0.94l1.83,1.83V4.28h1.33v9.53l1.81-1.82l0.94,0.93L8.47,16z\'/></g></svg>") 8px 4px no-repeat; position:relative; }' +
  1209.         '#toolbar li#save_btn div                           { display:none; position:relative; top:-9px; left:-24px; color:#999; text-align:right; }' +
  1210.         '#toolbar li#save_btn:hover div                     { display:block; }' +
  1211.         '#toolbar li#save_btn span                          { width:6rem; padding:4px 6px; background: #EEE; float:right; display:block; border:solid 1px #999; position:relative; z-index:1; }' +
  1212.         '#toolbar li#save_btn span:first-of-type            { border-bottom-width:0px; }' +
  1213.         '#toolbar li#save_btn span:hover                    { color:#444; }' +
  1214.         // resize handle
  1215.         '.split_view #text_editing_handle                   { width:9px; position:absolute; top:0; bottom:0; left:calc(50% - 4px); cursor:col-resize; z-index:11; }' +
  1216.         '#text_editing_handle                               { z-index:-1; }' +
  1217.         // source
  1218.         '#content_source                                    { margin:0; padding: 14px; width:100%; height:calc(100% - 32px); display:block; line-height:1.2; box-sizing:border-box; z-index:1; border:0; overflow-y:scroll;  background:#EEE; resize:none; font-family:monospace; font-size:'+ parseFloat($settings.UI_font_size) + $settings.UI_font_size.replace(/\d*/,'') +'; }' +
  1219.         '#content_source, #content_preview                  { position:absolute; top:32px; right:0; bottom:0; left:0; }' +
  1220.         '#content_source:focus                              { outline:none; background:#FFF; box-shadow: inset 0 0 4px #888; }' +
  1221.         // preview
  1222.         '#content_preview                                   { margin:0; padding: 14px; box-sizing:border-box; z-index:1; border:0; overflow-y:scroll; background:#FFF; font-size:'+ parseFloat($settings.UI_font_size) + $settings.UI_font_size.replace(/\d*/,'') +'; }' +
  1223.         // split views
  1224.         '.preview_text:not(.split_view) #content_source, .source_text:not(.split_view) #content_preview, li#save_btn div, .comment'+
  1225.                                                            '{ display:none; }' +
  1226.         '.split_view #content_preview                       { border-left:solid 1px #999; }' +
  1227.         '.split_view #content_source                        { width:50%; }' +
  1228.         '.split_view #content_preview                       { left:50%; }' +
  1229.         // preview styles
  1230.         '#content_preview pre                               { border:solid 1px #CCC; border-radius:3px; white-space:pre-wrap; word-break:break-word; font-size:'+ parseFloat($settings.UI_font_size) + $settings.UI_font_size.replace(/\d*/,'') +'; }' +
  1231.         '#content_preview .no_list                          { list-style:none; }' +
  1232.         '#content_preview > .no_list                        { padding:0; }' +
  1233.         '#content_preview .text-align-center                { text-align:center; }' +
  1234.         '#content_preview th, #content_preview td           { vertical-align:top; }' +
  1235.         '#content_preview blockquote                        { margin-top:1em; margin-bottom:1em; color: #555; }' +
  1236.         '#content_preview blockquote + blockquote           { margin-top:0; }' +
  1237.         '.markdown-body input[type="checkbox"]              { margin-top:0.375em; margin-right:6px; float:left; }' +
  1238.         'h1 .uplink,h2 .uplink,h3 .uplink,h4 .uplink,h5 .uplink,h6 .uplink'+
  1239.                                                            '{ margin:0; padding:0; display:inline-block; font-size:0.875em; cursor:pointer; transition: opacity 0.25s; opacity:0; }' +
  1240.         'h1:hover .uplink,h2:hover .uplink,h3:hover .uplink,h4:hover .uplink,h5:hover .uplink,h6:hover .uplink'+
  1241.                                                            '{ transition: opacity 0.25s; opacity:0.5; }' +
  1242.         '#content_preview table                             { font-size:inherit; }' +
  1243.         '#content_preview table th                          { background-color:#EEE; }' +
  1244.         '.markdown-body::before, .markdown-body::after      { display:none !important; background:transparent; }' +
  1245.         // edited warning
  1246.         '#iframe_body #warnings p, #iframe_body #warnings button { display:none; }' +
  1247.         '#iframe_body #warnings                             { width:22em; margin-left:-12.5em; padding:1rem; font-size:0.75rem; border-radius:0 0 3px 3px; display:none; position:absolute; top:0; left:50%; z-index:9999; background:#EEE; box-shadow: 0px 2px 12px 0 #111; }' +
  1248.         '#iframe_body #warnings h3                          { margin:0; font-weight:normal; }' +
  1249.         '#iframe_body #warnings div                         { text-align:right; }' +
  1250.         '#iframe_body #warnings button                      { margin-left:0.5em; }' +
  1251.         '#iframe_body #warnings #warning_ignore_btn         { margin-right:2em; }' +
  1252.         '#iframe_body.has_warning #warnings, #iframe_body.has_warning #warnings.unsaved p#warning_unsaved, #iframe_body.has_warning #warnings.clear p#warning_clear'+
  1253.                                                            '{ display:block; }' +
  1254.         '#iframe_body.has_warning #warnings.clear #warning_clear_btn, #iframe_body.has_warning #warnings.clear #warning_cancel_btn, #iframe_body.has_warning #warnings.unloading p#warning_unsaved, #iframe_body.has_warning #warnings.unloading #warning_ignore_btn, #iframe_body.has_warning #warnings.unloading #warning_cancel_btn, #iframe_body.has_warning #warnings.unloading #warning_save_btn'+
  1255.                                                            '{ display:inline-block; }' +
  1256.         // disabled text editing
  1257.         '#iframe_body.enable_text_editing #toolbar, #iframe_body.enable_text_editing #preview_text, #iframe_body.enable_text_editing #text_editing_handle'+
  1258.                                                            '{ display:none; }' +
  1259.         '#iframe_body.enable_text_editing #content_source.disabled'+
  1260.                                                            '{ top:0; background:white; }'
  1261.     ;
  1262. 	var $iframe_styles =
  1263.         '#iframe_body a.up, #iframe_body #dir_list          { background: transparent; }' +
  1264.         '#iframe_body :root, html, body                     { background-color: #BBB; }' +
  1265.         '#iframe_body #thead, #tbody tr                     { background-color: rgba(221,221,221,0.5); }' +
  1266.         '#iframe_body #thead tr#parent                      { background-color: rgba(144,144,144,0.33); }' +
  1267.         '#iframe_body #tbody tr:nth-of-type(odd)            { background-color: rgba(221,221,221,1); }' +
  1268.         '#iframe_body #tbody tr:not(.media):hover           { background-color: rgba(172,202,235,0.75) !important; }' +
  1269.         '#iframe_body #tbody tr.media:hover                 { background-color: rgba(116,190,190,0.5) !important; }' +
  1270.         '#iframe_body #dir_list tr td.name a::before        { content:""; width:14px; height:14px; margin-right:4px; bottom:-1px; background-position:center; background-repeat:no-repeat; background-size:contain; }' +
  1271.          CSS_UI_Icon_Rules('#iframe_body') + // background icons
  1272.         '#iframe_body #dir_list.sort_by_default #sort_by_default span::before, #iframe_body #dir_list.sort_by_name #sort_by_name span::before, #iframe_body #dir_list.sort_by_size #sort_by_size span::before, #iframe_body #dir_list.sort_by_date #sort_by_date span::before, #iframe_body #dir_list.sort_by_kind #sort_by_kind span::before, #iframe_body #dir_list.sort_by_ext #sort_by_ext span::before'+
  1273.                                                            '{ background-image:'+ SVG_UI_Icon('check_mark') +'; background-repeat: no-repeat; background-size:10px; background-position: center; }' +
  1274.         '#iframe_body #dir_list.sort_by_default #sort_by_default span::after, #iframe_body #dir_list.sort_by_name #sort_by_name span::after, #iframe_body #dir_list.sort_by_size #sort_by_size span::after, #iframe_body #dir_list.sort_by_date #sort_by_date span::after, #iframe_body #dir_list.sort_by_kind #sort_by_kind span::after, #iframe_body #dir_list.sort_by_ext #sort_by_ext span::after'+
  1275.                                                            '{ background-image:'+ SVG_UI_Icon('chevron_up') +'; background-repeat: no-repeat; background-size:10px; background-position: center; }' +
  1276.         '#iframe_body .sorting.down span::after             { transform:rotate(180deg) }' +
  1277.         ':root, html, #iframe_body                          { border:0 !important; }' + // border
  1278.         'html, #iframe_body                                 { border-radius:0; }' +
  1279.         '#iframe_body #dir_list                             { border-collapse:collapse; }' +
  1280.         '#iframe_body #dir_list thead th                    { border-bottom:solid 1px #999; }' +
  1281.         '#iframe_body, iframe_body td.name, iframe_body td.details'+
  1282.                                                            '{ box-sizing:border-box; }' + // box-sizing
  1283.         '#iframe_body a                                     { color:#111111; }' + // color
  1284.         '#iframe_body a:hover                               { color:#000000; }' +
  1285.         '#iframe_body tr.ignore, #iframe_body tr.ignore a   { color:grey; }' +
  1286.         '.sorting span::before,.sorting span::after         { content:""; width:16px; height:8px; display:inline-block; position:relative; }' +// content
  1287.         '#iframe_body tbody                                 { counter-reset: row; }' + // counter
  1288.         '#iframe_body.show_numbers tr td.name::before       { counter-increment: row;  content:counter(row); margin-right:6px; min-width:1.25em; text-align:right;}' +
  1289.         '#iframe_body #dir_list td.name::before, #iframe_body #dir_list a::before, td.size, td.date'+
  1290.                                                            '{font-variant-numeric: tabular-nums; }'+
  1291.         '#iframe_body #dir_list th.sorting                  { cursor: pointer; }' + // cursor
  1292.         '#iframe_body #dir_list tr::before, #iframe_body #dir_list td.name input, #iframe_body td.ext'+
  1293.                                                            '{ display:none; }' + // display
  1294.         '#iframe_body a                                     { display:block; }' +
  1295.         '#parent + tr                                       { display: grid; grid-gap:0; grid-template-columns: 50% 50%; }' +
  1296.         '#iframe_body #dir_list #tbody tr, #sorting_row     { display: grid; grid-gap:0; grid-template-columns: minmax(200px,100%) minmax(auto,6em) minmax(auto,14em) minmax(auto,7em); }' +
  1297.         '#iframe_body td.name, #iframe_body #sort_by_name, #iframe_body #sort_by_ext'+
  1298.                                                            '{ grid-column: 1; }' +
  1299.         '#iframe_body td.size, #iframe_body #sort_by_default, #iframe_body #sort_by_size'+
  1300.                                                            '{ grid-column: 2; }' +
  1301.         '#iframe_body td.date, #iframe_body #sort_by_date   { grid-column: 3; }' +
  1302.         '#iframe_body td.kind, #iframe_body #sort_by_kind   { grid-column: 4; }' +
  1303.         '#iframe_body #dir_list td.name::before, #iframe_body #dir_list a::before'+
  1304.                                                            '{ float:left; }' + // float
  1305.         '#iframe_body                                       { font-family:'+ $settings.UI_font +'; }' + // fonts
  1306.         '#iframe_body                                       { font-size:'+ parseFloat($settings.UI_font_size) * 0.875 + $settings.UI_font_size.replace(/\d*/,'') +'; }' +
  1307.         '#iframe_body #dir_list, #iframe_body #thead        { font-size: 1em; }' +
  1308.         'td.name, td.name a::before, td.size, td.date       { font-variant-numeric: tabular-nums; }'+
  1309.         '#iframe_body, #iframe_body #dir_list               { height:100%; }' + // height
  1310.         '#iframe_body #content_source                       { height:inherit; }' +
  1311.         '#iframe_body #thead                                { height:2em; max-height:2em; }' +
  1312.         '#iframe_body #tbody tr                             { line-height:1.5; }' + // line-height
  1313.         'html, body, #iframe_body                           { margin:0; }' + // margin
  1314.         '#iframe_body .dir::before, #iframe_body .file > img{ margin-inline-end: 6px; }' +
  1315.         '#iframe_body #dir_list tr, #iframe_body #tbody tr:hover { outline:0; }' + // outline
  1316.         '#iframe_body, #iframe_body #dir_list, .details.date, .details.kind'+
  1317.                                                            '{ overflow:hidden; text-overflow: ellipsis; }' + // overflow
  1318.         '#iframe_body #dir_list #tbody                      { overflow:auto; }' +
  1319.         'html, :root, #iframe_body, body                    { padding:0; }' + // padding
  1320.         '#iframe_body #tbody tr td, #iframe_body #thead tr th { padding-top:3px; }' +
  1321.         '#iframe_body #tbody tr td                          { padding-right: 6px; }' +
  1322.         '#iframe_body #tbody tr td, #iframe_body #thead tr th { padding-bottom:3px; }' +
  1323.         '#parent th, #iframe_body #tbody tr td.details.kind { padding-right: 1em; }' +
  1324.         '#iframe_body td.details                            { padding-left: 6px; }' +
  1325.         '#parent th, #tbody tr td.name                      { padding-left:1em; }' +
  1326.         '#iframe_body #dir_list, #iframe_body #dir_list tr td.name a::before'+
  1327.                                                            '{ position:relative; }' + // position
  1328.         '#iframe_body, #iframe_body #dir_list #tbody        { position:absolute; right:0; bottom:0; left:0; }' +
  1329.         '#iframe_body th                                    { text-align:center; }' + // text-align
  1330.         '#iframe_body th:last-of-type, #iframe_body td.details { text-align:right; }' +
  1331.         '#iframe_body th:first-of-type                      { text-align:left; }' +
  1332.         '#iframe_body a, #iframe_body a:hover, #iframe_body td:hover'+
  1333.                                                            '{ text-decoration:none !important; }' + // text-decoration
  1334.         '#iframe_body a.icon                                { text-indent:2px; }' + // text-indent
  1335.         '#iframe_body #thead                                { user-select:none; -webkit-user-select:none; }' +
  1336.         '#iframe_body td.details                            { vertical-align:top; }' +
  1337.         'html, #iframe_body, #iframe_body #dir_list, #iframe_body #dir_list tr'+
  1338.                                                            '{ width:100%; max-width:100%; min-width:100%; }' +
  1339.         '#iframe_body #dir_list td:not(:first-child)        { width:unset; }' +
  1340.         '#iframe_body td:not(.name) { white-space:pre; }'
  1341.     ;
  1342.  
  1343.     // ADD STYLES
  1344. 	const $font_styles = document.createElement('style');
  1345. 	const $font_grid_styles = document.createElement('style');
  1346.  
  1347. 	function addStyles(el) {
  1348. 		el.find('style, link[rel="stylesheet"], link[href$="css"]').remove(); // remove any existing stylesheets
  1349. 		el.append('<style>'+ $main_style_rules +'</style>');
  1350. 		el.append('<style>'+ $gecko_style_rules +'</style>');
  1351. 		el.append($font_styles); // empty until font is previewed
  1352. 		el.append($font_grid_styles); // empty until font grid is made
  1353. 		el.append('<style>'+ $text_editing_style_rules +'</style>');
  1354. 		el.append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css"></link>');
  1355. 	}
  1356. 	// ***** END STYLES ***** //
  1357.  
  1358.     // ***** INDEX PREP ***** //
  1359.     //
  1360.     function getIndexType() {
  1361.         // Try to determine index type from parent directory link container,
  1362.         // with fallbacks for indexes that don't have parent directories,
  1363.         // or for parent directory links that aren't siblings or ancestors of the index itself.
  1364.         let parentLinkParent; // Possible elements: pre, li, td, th, div -- used to determine index type
  1365.         // Try to find parent directory link:
  1366.         let parentLink = $('a:contains("Parent Directory"), a:contains("parent directory"), a[href="../"], a[href="/"], a[href^="?"], img[alt*="PARENTDIR"]');
  1367.         if ( parentLink.length === 0 ) {
  1368.             parentLinkParent = $('body').find('> ul li, > pre, > table:last-of-type tr td');
  1369.         } else {
  1370.             parentLinkParent = parentLink.parent(); // use original found parentLink
  1371.         }
  1372.         // If no parentLinkParent found, type = error; else return parent node name
  1373.         let nodeName = ( parentLinkParent[0] !== undefined ? parentLinkParent[0].nodeName.toLowerCase() : '');
  1374.         if ( parentLinkParent.length === 0 ) {
  1375.             nodeName = 'error';
  1376.         } else if ( $protocol.startsWith('file') ) {
  1377.             if ( navigator.userAgent.indexOf('Firefox') > 0 ) {
  1378.                 nodeName = 'gecko';
  1379.             }
  1380.         }
  1381.         let types = {'gecko':'gecko','li':'list','pre':'pre','th':'table','td':'table','div':'default','error':'error'};
  1382.         let type = types[nodeName];
  1383.  
  1384.         if ( type === 'table' ) {
  1385.             parentLinkParent.closest('table').addClass('PARENTTABLE');
  1386.         }
  1387.         if ( type === 'list' ) {
  1388.             parentLink.closest('ul').addClass('PARENTLIST');
  1389.         }
  1390.         return type;
  1391.     }
  1392.  
  1393.     // Return Index items, Index type, remove parent directory link, and add body class.
  1394.     function getIndexItems(el) {
  1395.         const type = getIndexType();
  1396.         let items;
  1397.  
  1398.         switch(type) {
  1399.             case 'gecko':
  1400.                 $(el).addClass('is_converted_gecko');
  1401.                 items = $('body').find('> table > tbody');
  1402.                 break;
  1403.             case 'list':
  1404.                 $(el).addClass('is_converted_list');
  1405.                 items = $('body').find('> ul');
  1406.                 break;
  1407.             case 'pre':
  1408.                 $(el).addClass('is_converted_pre');
  1409.                 items = $('body').find('> pre').html();
  1410.                 break;
  1411.             case 'table':
  1412.             case 'td':
  1413.                 $(el).addClass('is_converted_table');
  1414.                 if ( $('table.PARENTTABLE > tbody').length === 1 ) {
  1415.                     items = $('table.PARENTTABLE > tbody');
  1416.                 } else {
  1417.                     items = $('table.PARENTTABLE'); // tables without tbody
  1418.                 }
  1419.                 break;
  1420.             case 'default': // local chrome default
  1421.                 $(el).addClass('is_default');
  1422.                 items = $('body').find('> table').find('> tbody');
  1423.                 break;
  1424.             case 'error': // error
  1425.                 $(el).addClass('is_error');
  1426.                 items = $('body').html();
  1427.                 break;
  1428.         }
  1429.         return [items,type];
  1430.     }
  1431.  
  1432. 	// Index Prep: convert rows and return array of rows, with link, size, date-modified
  1433. 	function convertIndexItems(type,items) {
  1434. 		let converted = [];
  1435. 		switch(type) {
  1436.             case 'gecko':
  1437.                 converted = convertGeckoType(items);
  1438.                 break;
  1439.             case 'list':
  1440.                 converted = convertListType(items);
  1441.                 break;
  1442.             case 'pre':
  1443.                 converted = convertPreType(items);
  1444.                 break;
  1445.             case 'table':
  1446.             case 'default': // local chrome indexes
  1447.                 converted = convertTableType(type,items);
  1448.                 break;
  1449.             case 'error':
  1450.                 converted = convertErrorType(items);
  1451.                 break;
  1452.         }
  1453.         return converted;
  1454. 	}
  1455. 	// Index Prep: convert list type function
  1456. 	function convertGeckoType(items) {
  1457. 		let preppedIndex = [];
  1458.         const rows = Array.from(items.find('> tr'));
  1459. 		for ( let row of rows ) {
  1460. 			let preppedRow = [];
  1461.             let cellContents = '';
  1462.             let cells = Array.from( $(row).find('> td') );
  1463.             let link = ($(cells).find('a').attr('href'));
  1464.             for ( let cell of cells ) {
  1465.                 cellContents = cell.innerText;
  1466.                 cellContents = ( cellContents !== undefined ? cellContents.trim() : '');
  1467.                 preppedRow.push(cellContents);
  1468.             }
  1469.             preppedRow[1] = preppedRow[1].replace(' KB','000'); // convert reported size in KB to total bytes
  1470.             preppedRow[2] = preppedRow[2] + ' '+ preppedRow[3];
  1471.             preppedRow = preppedRow.slice(1,-1);
  1472.             if ( link.length > 0 && link !== '/' && link !== '../' ) {
  1473.                 preppedRow.unshift(link);
  1474.             }
  1475.             if ( preppedRow.length > 0 ) { preppedIndex.push(preppedRow); }
  1476.         }
  1477.         return preppedIndex;
  1478. 	}
  1479. 	// Index Prep: convert list type function
  1480. 	function convertListType(items) {
  1481. 		  let preppedIndex = [];
  1482. 		const rows = Array.from(items.find('li'));
  1483.         for ( let row of rows ) {
  1484.             if ( row.innerHTML.indexOf('Parent Directory') === -1 ) {
  1485.                 let preppedRow = [];
  1486.                 let link = $(row).find('a').attr('href');
  1487.                     row = row.innerHTML.replace(/<a .+?<\/a>\s*/,'');
  1488.                 let cells = row.split(' ');
  1489.                 for ( let cell of cells ) {
  1490.                     if ( cell.trim().length > 0 ) {
  1491.                         preppedRow.push(cell);
  1492.                     }
  1493.                 }
  1494.                 if ( link.length > 0 && link !== '/' && link !== '../' ) {
  1495.                     preppedRow.unshift(link);
  1496.                 }
  1497.                 if ( preppedRow.length > 0 ) {
  1498.                     preppedIndex.push(preppedRow);
  1499.                 }
  1500.             }
  1501.         }
  1502.         return preppedIndex;
  1503. 	}
  1504. 	// Index Prep: convert pre type function
  1505. 	function convertPreType(items) {
  1506.         let preppedIndex = [];
  1507.         items = items.replace(/<a /g,'  <a ').replace(/<\/a>/g,'</a>  ') // ensure two spaces after file links
  1508.                      .replace(/\[\s*?\]/g,'[]'); // remove empty 'alt=[   ]'
  1509.         const rows = items.split('\n');
  1510.         const spaces = /\s{2,}/; // assumes pre type only uses spaces between "columns"
  1511.  
  1512.         for ( let row of rows ) {
  1513.             let preppedRow = [];
  1514.                 row = row.replace(/(<a[^>]+?>).+?<\/a>/g,'$1'); // remove link display name because some have 2+ spaces, leading to incorrect split for cells array
  1515.             let cells = row.split(spaces);
  1516.             let link;
  1517.             for ( let cell of cells ) {
  1518.                 if ( cell.trim().length > 0 ) {
  1519.                     if ( cell.indexOf('href="') > 0 && cell.search(/href="[?|\/"]|Parent Directory/) === -1 ) {
  1520.                         link = $(cell).attr('href');
  1521.                     } else {
  1522.                         if ( cell.search(/href="|<img |<hr>/) === -1 ) {
  1523.                             preppedRow.push(cell);
  1524.                         }
  1525.                     }
  1526.                 }
  1527.             }
  1528.             if ( link !== undefined ) { preppedRow.unshift(link); } // add link to front of preppedRow
  1529.             if ( preppedRow.length > 1 ) { preppedIndex.push(preppedRow); }
  1530.         }
  1531. 		return preppedIndex;
  1532. 	}
  1533. 	// Index Prep: convert table type function
  1534. 	function convertTableType(type,items) { // for local chrome indexes and server-generated table-type indexes
  1535. 		  let preppedIndex = [];
  1536.         const rows = Array.from(items.find('> tr:not(.PARENT)'));
  1537.         for ( let row of rows ) {
  1538.             if (row.innerText.search(/Parent Directory/) === -1 ) {
  1539.                 let preppedRow = [];
  1540.                 let cells = Array.from( $(row).find('td') );
  1541.                 let link = $(cells).find('a').attr('href');
  1542.                 for ( let cell of cells ) {
  1543.                     cell = cell.innerHTML.trim();
  1544.                     if ( cell.length > 0 && cell.search(/^&nbsp;$|href="|<img /m) === -1 ) {
  1545.                         preppedRow.push( cell );
  1546.                     }
  1547.                 }
  1548.                 if ( link !== undefined ) { preppedRow.unshift(link); }
  1549.                 if ( preppedRow.length > 1 ) { preppedIndex.push(preppedRow); } // preppedRow.length > 2 in order to omit parent directory row
  1550.             }
  1551.         }
  1552. 		return preppedIndex;
  1553. 	}
  1554. 	// Index Prep: convert error pages (page not found, etc.)
  1555. 	function convertErrorType(items) {
  1556. 		items = items.replace(/ style="[^"]*?"/g,'').replace(/<hr>/g,'');
  1557. 		items = '<div id="error_message"><div id="error_message_icon"></div>'+ items +'</div>';
  1558. 		return items;
  1559. 	}
  1560.  
  1561.     // Index Prep: Build new Index from prepped rows
  1562. 	function buildNewIndex(preppedIndex,sort) {
  1563. 		let newIndexItems = [];
  1564.         let i = 0;
  1565. 		for ( let row of preppedIndex ) {
  1566. 			// Get row attrs and text
  1567. 			const rowLink =       row[0] !== undefined ? row[0].replace(/&amp;/g,'&') : '';//.replace(//,''); // decode some reserved characters
  1568. 			const rowName =       getItemName(rowLink).replace(/^\s/m,'\&nbsp;').replace(/^\//m,'').replace(/([-_——])/g,'$1<wbr>'); // display name, with word breaks added after unbreakable chars
  1569. 			const rowSortName =   getItemName(rowLink).replace(/^\//m,'').replace('/','').toLocaleLowerCase();
  1570. 			const sizesAndDates = getItemSizeAndDate(row);
  1571. 			const rowSize =       sizesAndDates[0];
  1572. 			const rowSortSize =   sizesAndDates[1];
  1573. 			const rowDate =       sizesAndDates[2];
  1574. 			const rowSortDate =   sizesAndDates[3];
  1575. 			const rowExt =        getItemExt(rowLink);
  1576. 			const rowSortKind =   getItemKind(rowExt);
  1577. 			const rowKind =       rowSortKind.slice(0,1).toUpperCase() + rowSortKind.slice(1);
  1578. 			const rowClasses =    getItemClasses(rowName,rowSortKind,rowExt);
  1579.             // Assemble row elements
  1580.               let newRow =   $('<tr></tr>').attr('id','rowid-'+ i).addClass(rowClasses).attr('data-kind',rowSortKind).attr('data-ext',rowExt);
  1581. 			const checkbox = ( rowClasses.indexOf('media') > 0 ? $('<input type="checkbox" tabindex="-1" checked="true" />') : '' );
  1582.             const nameSpan = $('<span></span>').append(checkbox, rowName);
  1583. 			const cellLink = $('<a></a>').addClass('icon').attr('href',rowLink).append(nameSpan);
  1584. 			const cellName = $('<td></td>').addClass('name').attr('data-name',rowSortName).append(cellLink);
  1585. 			const cellSize = $('<td></td>').addClass('size details').attr('data-size',rowSortSize).append(rowSize);
  1586. 			const cellDate = $('<td></td>').addClass('date details').attr('data-date',rowSortDate).append(rowDate);
  1587. 			const cellKind = $('<td></td>').addClass('kind details').attr('data-kind',rowSortKind).append(rowKind);
  1588. 			const cellExt =  $('<td></td>').addClass('ext details').attr('data-ext',rowExt);
  1589. 			// Assemble row
  1590. 			      newRow.append(cellName, cellSize, cellDate, cellKind, cellExt);
  1591. 			      newIndexItems.push(newRow[0]);
  1592.                   i++;
  1593. 		}
  1594.         if ( sort === undefined ) { sort = getQuery('sort_by'); }
  1595. 		let sortedIndexItems = sortDirList($(newIndexItems), 'sort_by_'+ sort, 1); // initial sort
  1596. 		return sortedIndexItems;
  1597. 	}
  1598. 	// Index Prep: get row name
  1599. 	function getItemName(link) {
  1600.           let name;
  1601.           try { name = decodeURIComponentSafe(link); }
  1602.         catch (error) { name = link.replace(/%20/g,' ').replace(/\s{2,}/,' '); }
  1603.  
  1604. 		if ( name.split('/').length > 2 ) { // get name only if x = full path
  1605. 			let arr = name.split('/');
  1606. 			if ( name.startsWith('/') && name.endsWith('/') ) { // dirs
  1607. 				name = arr[arr.length - 2] + '/';
  1608. 			} else {
  1609. 				name = arr[arr.length - 1]; // files
  1610. 			}
  1611. 		}
  1612. 		return name;
  1613. 	}
  1614. 	// Index Prep: get row classes
  1615. 	function getItemClasses(name,kind,ext) {
  1616. 		let itemClasses = [];
  1617. 		    itemClasses.push(kind);
  1618. 		if ( ext.search(/dir|app/) === -1 ) {
  1619. 			itemClasses.push('file');
  1620. 		}
  1621. 		if ( ext === 'app' ) {
  1622.             if ( $settings.apps_as_dirs === false ) {
  1623.                 itemClasses.push('file');
  1624.             } else {
  1625.                 itemClasses.push('dir');
  1626.             }
  1627. 		}
  1628. 		if ( name.endsWith('symlink') || name.endsWith('alias') || name.endsWith('symbolic link') ) {
  1629. 			itemClasses.push('alias');
  1630. 		}
  1631. 		if ( name.indexOf('.') === 0 ) {
  1632. 			itemClasses.push('invisible');
  1633. 		}
  1634. 		if ( !JSON.stringify($row_types).match( escapeStr(ext) ) ) { // else classify as "other" if extension is not in $row_types.
  1635. 			itemClasses.push('other'); //itemType = 'Other'; itemKind = 'other';
  1636. 		} else if ( kind === '' ) {
  1637. 			//            itemClasses.push('code'); //itemType = 'Code'; itemKind = 'code';
  1638. 		} else {
  1639. 			itemClasses.push(ext);
  1640. 		}
  1641. 		if ( $row_settings.ignore.includes( ext ) ) {
  1642. 			itemClasses.push('ignore');
  1643. 		}
  1644. 		if ( $row_settings.exclude.includes( ext ) ) {
  1645. 			itemClasses.push('exclude');
  1646. 		}
  1647. 		if ( kind === 'audio' || kind === 'video' ) {
  1648. 			itemClasses.push('media');
  1649. 		}
  1650. 		itemClasses = Array.from(new Set(itemClasses)); // remove dupe classes
  1651. 		return itemClasses.join(' ');
  1652. 	}
  1653. 	// Index Prep: get formatted row size and date
  1654.     function getItemSizeAndDate(cells) {
  1655.         let sizesAndDates = [];
  1656.         let rowDisplaySize, rowSortSize, rowDisplayDate, rowSortDate;
  1657.         if ( cells.length > 1 ) {
  1658.             if ( cells[1].search(/[-:\/]/) !== -1 ) { // test for typical date/time separators.
  1659.                 rowDisplayDate = cells[1];
  1660.                 rowDisplaySize = cells[2];
  1661.             } else {
  1662.                 rowDisplayDate = cells[2];
  1663.                 rowDisplaySize = cells[1];
  1664.             }
  1665.         }
  1666.         // size
  1667.         let sizeUnits = /[BYTES|B|K|KB|MB|GB|TB|PB|EB|ZB|YB]/;
  1668.         if ( rowDisplaySize === undefined || rowDisplaySize === '' || rowDisplaySize === '-' || rowDisplaySize === ',' ) {
  1669.             rowDisplaySize = '&mdash;'; rowSortSize = '0'; // if no size supplied, use these defaults
  1670.         } else {
  1671.             rowSortSize = getItemSortSize(rowDisplaySize);
  1672.             rowDisplaySize = ( rowDisplaySize.toUpperCase().endsWith('B') ? rowDisplaySize : rowDisplaySize + 'B');
  1673.             if ( !rowDisplaySize.toUpperCase().match(sizeUnits) ) { // if provided size is only numeric
  1674.                 rowDisplaySize = formatBytes(rowDisplaySize,1);
  1675.             } else {
  1676.                 rowDisplaySize = rowDisplaySize.replace('K','k').replace(/(\d+)\s*([A-z])/,'$1 $2');
  1677.             }
  1678.         }
  1679.         // date
  1680.         if ( rowDisplayDate === undefined || rowDisplayDate === '' || rowDisplayDate === '-' ) {
  1681.             rowDisplayDate = '&mdash;'; rowSortDate = '0';
  1682.         } else {
  1683.             rowSortDate = getItemDate(rowDisplayDate);
  1684.         }
  1685.         sizesAndDates.push(rowDisplaySize,rowSortSize,rowDisplayDate,rowSortDate);
  1686.         return sizesAndDates;
  1687.     }
  1688. 	// Index Prep: get row size for sorting
  1689. 	function getItemSortSize(val) {
  1690.         let sortSize;
  1691.         let values = val.replace(/(\d+)\s*([A-z])/,'$1 $2').split(' ');
  1692.         let size = values[0];
  1693.         let unit = values[1];
  1694.         if ( unit !== undefined ) { unit = unit.toUpperCase(); }
  1695.         const factor = { '':1, B:1, K:1000, KB:1000, M:1000000, MB:1000000, G:1000000000, GB:1000000000, T:1000000000000, TB:1000000000000,  P:1000000000000000, PB:1000000000000000, E:1000000000000000000, EB:1000000000000000000, Z:1000000000000000000000, ZB:1000000000000000000000 }; // unit to file size
  1696.         sortSize = size * factor[unit]; // convert byte size to multiplication factor
  1697. 		return sortSize;
  1698. 	}
  1699.     // convert numeric sizes to display format
  1700.     function formatBytes(val, decimals) {
  1701.         if (val === 0) return '0 Bytes';
  1702.         const k = 1024;
  1703.         const dm = decimals < 0 ? 0 : decimals;
  1704.         const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
  1705.         const i = Math.floor(Math.log(val) / Math.log(k));
  1706.         return parseFloat((val / Math.pow(k, i)).toFixed(dm)) +' '+ sizes[i];
  1707.     }
  1708.     // process date
  1709. 	function processDate(match,p1,p2,p3) { //date formats: 2017-10-09 13:12 || 2015-07-25T02:02:57.000Z || 12-Mon-2017 21:11
  1710. 		const mo = 'JanFebMarAprMayJunJulAugSepOctNovDec'.indexOf(p2)/3 + 1; // e.g., convert month into number, or use number
  1711. 		return p3 +'-'+ mo +'-'+ p1;
  1712. 	}
  1713. 	// Index Prep: get row date    2015-07-25T02:22:00.000Z
  1714. 	function getItemDate(val) {
  1715. 		let sortDate = val.replace(/^(\d{2})-(\w{3})-(\d{4})/m, processDate) // convert Month to number
  1716.                           .replace(/\b(\d{1})[-:\/]/g,'0$1/') // add leading 0 for single digit numbers
  1717.                           .replace(/(\d{2})\/(\d{2})\/(\d{2}),/,'$3$1$2') // reorder MM/DD/YY dates
  1718.                           .replace(/-|:|\s+|\//g,''); // remove spacing characters
  1719. 		return sortDate;
  1720. 	}
  1721. 	// Index Prep: get row kind
  1722. 	function getItemKind(ext) {
  1723. 		let kind = '';
  1724. 		if ( ext === 'dir' || ext === 'app' ) {
  1725. 			kind = ext;
  1726. 		} else {
  1727. 			for ( let types in $row_types ) {
  1728. 				if ( $row_types[types].includes( ext ) ) {
  1729. 					kind = types;
  1730. 					return kind;
  1731. 				}
  1732. 			}
  1733. 		}
  1734. 		if ( kind === '' ) { kind = 'other'; }
  1735. 		return kind;
  1736. 	}
  1737. 	// Index Prep: get row extension
  1738. 	function getItemExt(link) {
  1739. 		let ext = '';
  1740. 		if ( link.endsWith('app/') || link.endsWith('exe') ) {
  1741. 			ext = 'app';
  1742. 		} else if ( link.endsWith('/') ) {
  1743. 			ext = 'dir';
  1744. 		} else if ( link.indexOf('.') < 0 ) { // if no '.' in link, ...
  1745. 			ext = link.slice(link.lastIndexOf('/') + 1).toLowerCase();
  1746. 		} else { // find the last . and get the remaining characters
  1747. 			ext = link.slice(link.lastIndexOf('.') + 1).toLowerCase();
  1748. 		}
  1749. 		return ext;
  1750. 	}
  1751. 	// END INDEX PREP
  1752. 	// ***** MAKE NEW INDEX ***** //
  1753. 	function makeNewIndex(el,sort) {
  1754.         const indexItems = getIndexItems(el);
  1755.         const items = indexItems[0];
  1756.         const type = indexItems[1];
  1757.         const convertedIndex = convertIndexItems( type, items ); // = array of rows: ["link","date","size"]
  1758. 		if ( type === 'error' ) {
  1759. 			return [convertedIndex];
  1760. 		} else {
  1761. 			let newIndex = buildNewIndex( convertedIndex, sort );
  1762. 			return [newIndex];
  1763. 		}
  1764. 	}
  1765. 	function appendNewIndex(body_top) { // setUpUI();
  1766.         const newIndex = makeNewIndex(body_top);
  1767.         $dir_list_body.empty().append( newIndex);
  1768.         $dir_list.find('#stats').html(getIndexStats($dir_list.find('#tbody tr')));
  1769.     }
  1770. 	// get and set index stats
  1771. 	function getIndexStats(el) {
  1772.          const total = el.length;
  1773.          const dirs = el.filter('.dir').length;
  1774.          const files = el.filter('.file').length;
  1775.          const stats = total +' items: '+ dirs +' directories, '+ files +' files';
  1776.         return stats;
  1777.     }
  1778. 	// ***** END DIR_LIST SETUP ***** //
  1779.  
  1780.     // ***** UI SETUP ***** //
  1781. 	// Build UI: Append all assembled elements to $body
  1782. 	function buildUI() {
  1783. 		if ( window.self === window.top ) { // if it's an iframe...
  1784. 			$('head').prepend('<meta charset="utf-8">');
  1785.             let prefix = 'data:image/png;base64,';
  1786. //            let favicon = 'iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAAACVBMVEUmRckzmf+ZzP9yAsYbAAAAAXRSTlMAQObYZgAAADhJREFUeAFjoAYIBQEMAQd0gQB0gRB0gVAMAQd0gQB0gRB0AQSgkUDUKiSwFFlgVGBUgE6pcJAAANNZhFSKf6iqAAAAAElFTkSuQmCC';
  1787.             let favicon = 'iVBORw0KGgoAAAANSUhEUgAAAIAAAACAAgMAAAC+UIlYAAAACVBMVEUmRcmZzP8zmf8pVcWPAAAAAXRSTlMAQObYZgAAAFBJREFUeF7tyqERwDAMBEE3mX5UiqDmqwwziTPHjG7xrmzrLFtRaApDIRiKQlMYCsFQFJrCUAiGotAU5hTA1WB4fhkMBsOJwWAwgHvB8CHpBcTbpxy4RZNvAAAAAElFTkSuQmCC';
  1788.             if ( $location.startsWith('file') ) { $('head').prepend('<link href="'+ prefix + favicon +'" rel="icon" sizes="16x16" />'); }
  1789.             $('head #title').removeAttr('id'); // not sure where this id is being added, but it must be removed...
  1790. 			$('body').attr('id','top').attr('lang','en').find('script').remove();
  1791.             addStyles( $('head') );
  1792.             appendNewIndex($('body'));
  1793.             $('body').empty().append($main_content);
  1794. 		} else {
  1795. 			$('body').attr('id','iframe_body');
  1796. 		}
  1797.     }
  1798. 	buildUI();
  1799.  
  1800.     // Define additional UI Element refs
  1801. 	const $body =         $('body#top');
  1802.     const $iframe_body =  $('body#iframe_body');
  1803. 	const $iFrame_head =  $iframe_body.prev('head');
  1804. 	const $dir_list_row = $dir_list_body.find('> tr');
  1805. 	const $audio_files =  $dir_list_body.find('.audio');
  1806. 	const $font_files =   $dir_list_body.find('.font');
  1807. 	const $image_files =  $dir_list_body.find('.image');
  1808. 	const $media_files =  $dir_list_body.find('.media');
  1809. 	const $video_files =  $dir_list_body.find('.video');
  1810.     function $selected_file() { return $dir_list_body.find('.selected'); }
  1811. 	function $playing_file() { return $dir_list_body.find('.playing'); }
  1812.  
  1813.     // UI Setup: build UI and add body classes and other initial settings
  1814. 	function setupUIprefs() {
  1815. 		for ( let key in $settings ) {
  1816. 			if ( getQuery(key) === 'true' ) {
  1817. 				$body.addClass(key);
  1818. 			} else { // non-boolean settings and others
  1819. 				if ( key === 'theme' ) { $body.addClass( 'theme_'+ getQuery('theme') ); }
  1820. 				if ( key === 'sort_by' ) {
  1821. 					$body.addClass( 'sort_by_'+ getQuery(key) );
  1822. 					$('#sorting').find('th[id="sort_by_'+ getQuery(key) +'"]').addClass('up');
  1823. 				}
  1824. 				if ( key === 'default_text_view' ) {
  1825. 					if ( getQuery(key) === 'source_text' ) { $body.addClass('source_text'); } else { $body.addClass('preview_text'); }
  1826. 				}
  1827. 				if ( getQuery('toggle_sidebar') === 'true' ) { $body.addClass( 'has_hidden_sidebar' ); }
  1828. 			}
  1829. 		}
  1830. 		if ( navigator.vendor.indexOf('Google') > -1 ) { $body.addClass('is_chrome'); }
  1831. 		if ( navigator.userAgent.indexOf('Firefox') > -1 ) { $body.addClass('is_gecko'); }
  1832.         if ( navigator.vendor.indexOf('Apple') === 0 ) { $body.addClass('is_safari'); }
  1833. 		if ( $audio_files.length > 0 ) { $body.add($dir_list).addClass('has_audio has_media'); }
  1834. 		if ( $font_files.length > 0 ) { $body.addClass('has_fonts'); }
  1835. 		if ( $image_files.length > 0 ) { $body.addClass('has_images'); }
  1836. 		if ( $video_files.length > 0 ) { $body.add($dir_list).addClass('has_video has_media'); }
  1837. 		// UI Setup: show invisibles
  1838. 		if ( navigator.platform.indexOf('Win') > -1 || $location.indexOf('file:') < 0 ) {
  1839. 			$('#show_invisibles').closest('label').hide();
  1840. 		} else if ( $body.hasClass('show_invisibles') ) {
  1841. 			$('#show_invisibles').attr('checked','checked');
  1842. 		}
  1843. 	}
  1844.     // Get DOMTokenList of body classes
  1845.     function getClassList(id) { return document.getElementById(id).classList; }
  1846.     //
  1847. 	function setUpUI() {
  1848.         if ( window.self === window.top) {
  1849.             setupUIprefs();
  1850.             initMedia();
  1851.             autoSelectFile();
  1852.             autoLoadCoverArt();
  1853.             setContentTitle();
  1854.             setContentHeight();
  1855.         } else {
  1856.             setUpIframeUI( getQuery('enable_text_editing') );
  1857.         }
  1858.         document.title = 'Index of: '+ $location;
  1859. 	}
  1860. 	setUpUI();
  1861.  
  1862. 	// SET UI TO DEFAULT SETTINGS: remove queries;
  1863. 	function defaultSettings() {
  1864. 		let $location = window.location.href;
  1865.             $location = $location.slice(0,$location.lastIndexOf('?'));
  1866. 		window.location.assign($location);
  1867. 	}
  1868. 	$('#default_settings').on('click', function(e) {
  1869.         e.preventDefault();
  1870. 		e.stopPropagation();
  1871.         $('#bookmarks').hide();
  1872. 		if (window.confirm( 'Are you sure you want to reset all your temporary UI settings to the defaults in your user_settings?\nThis action cannot be undone.' ) ) {
  1873. 			defaultSettings();
  1874. 		}
  1875. 	});
  1876. 	// EXPORT SETTINGS
  1877. 	function saveSettings(filename, data) {
  1878. 		const blob = new Blob([data], {type: 'text/html'});
  1879. 		const elem = window.document.createElement('a');
  1880.               elem.href = window.URL.createObjectURL(blob);
  1881.               elem.download = filename;
  1882.         document.body.appendChild(elem);
  1883.               elem.click();
  1884.         document.body.removeChild(elem);
  1885.         URL.revokeObjectURL(blob);
  1886. 	}
  1887. 	$('#export_settings').on('click',function(e) {
  1888. 		e.preventDefault();
  1889. 		e.stopPropagation();
  1890.         $('#bookmarks').hide();
  1891. 		const $settings_string = ( JSON.stringify($settings,null,'\t'));
  1892. 		saveSettings('settings.txt',$settings_string);
  1893.     });
  1894.  
  1895. 	// Click Menu Link (with warning)
  1896. 	function setLocation(link) { window.location = link; }
  1897. 	$('#parent_dir_menu,#parents_dir_menu + .menu,#bookmarks .bookmark').on('click','a',function(e) {
  1898. 		e.preventDefault();
  1899. 		if ( $(this).attr('href').indexOf('file://') > -1 && $protocol !== 'file:' ) {
  1900. 			$body.addClass('has_warning').find('#warnings').addClass('local');
  1901. 		} else {
  1902. 			showWarning( 'setLocation', thisLink($(this)) );
  1903. 		}
  1904. 	});
  1905. 	// Show Menus
  1906. 	function showMenus(el) {
  1907. 		let $position = $(el).position();
  1908. 		$(el).find('> ul').css({'top':$position.top + $(el).innerHeight() + 'px'}).toggle().parent('td').siblings('td').find('.menu').hide();
  1909. 	}
  1910. 	$('#parents_dir_menu').add('#bookmarks_menu').parent('td').on('click',function(e) {
  1911. 		e.stopPropagation();
  1912. 		showMenus(this);
  1913. 	});
  1914. 	// Hide Menus
  1915. 	$(document).on('click', function() { $('.menu').hide(); });
  1916.  
  1917. 	// Toggle UI Preferences
  1918. 	function toggleUIpref(prefID) {
  1919. 		let prefClass = prefID;
  1920. 		if ( prefID === 'split_view' ) {
  1921.             sendMessage('iframe','split_view');
  1922.         }
  1923. 		if ( prefID.startsWith('sort_by') ) {
  1924.             $body.removeClass('sort_by_default sort_by_name sort_by_size sort_by_date sort_by_kind sort_by_ext');
  1925.             $('#bookmarks').hide(); // don't hide menus after click?
  1926.         }
  1927. 		if ( prefID.startsWith('theme') ) {
  1928.             prefID = ( $body.hasClass('theme_dark') ? 'theme_dark' : 'theme_light' );
  1929.             prefClass = 'theme_dark theme_light';
  1930.         }
  1931. 		if ( prefID.endsWith('text') ) {
  1932.             prefClass = 'preview_text source_text';
  1933.             sendMessage('iframe','default_text_view');
  1934.         }
  1935. 		toggleQuery(prefID);
  1936. 		$body.toggleClass(prefClass);
  1937. 		setContentHeight();
  1938.         scrollThis('tbody','selected',false); // true = instant scroll
  1939. 		if ( prefID === 'enable_text_editing' ) {
  1940.             $('.selected.text, .selected.markdown').click();
  1941.         }
  1942. 	}
  1943. 	// Click Toggle UI Pref elements
  1944. 	$('.toggle_UI_pref').on('click',function(e) {
  1945. 		if ( !$(this).is('input') ) {
  1946. 			e.preventDefault(); // allow checkboxes to be checked
  1947. 		}
  1948. 		toggleUIpref( $(this).attr('id') );
  1949. 	});
  1950.  
  1951. 	// Toggle Sidebar
  1952. 	function toggleSidebar() {
  1953. 		$body.toggleClass('has_hidden_sidebar');
  1954. 		if ( $body.hasClass('has_hidden_sidebar') ) { setQuery('toggle_sidebar','true'); } else { removeQuery('toggle_sidebar'); }
  1955. 		setContentHeight();
  1956. 		scrollThis('tbody','selected',true); // true = instant scroll
  1957. 	}
  1958. 	$('#toggle_sidebar').on('click', function() {
  1959. 		toggleSidebar();
  1960. 	});
  1961.  
  1962. 	// RESIZE Sidebar/Content Pane
  1963. 	function resizeSidebar(f) {
  1964. 		f.stopPropagation();
  1965.         const $sidebar_wrapper = $('#sidebar_wrapper');
  1966. 		const $startX = f.pageX;
  1967.           let $window_width = window.innerWidth;
  1968.           let $sidebar_width = $sidebar_wrapper.width();
  1969.         $('#overlay').css({'display':'block','z-index':'1'});
  1970. 		$('#handle').css({'z-index':'9999'});
  1971. 		$body.css({'-webkit-user-select':'none','-moz-user-select':'none','user-select':'none'});
  1972.  
  1973. 		$(document).on('mousemove',function(e) {
  1974. 			e.stopPropagation();
  1975. 			e.preventDefault();
  1976. 			const $deltaX = e.pageX - $startX;
  1977. 			if ( e.pageX > 230 && e.pageX < $window_width - 200 ) {
  1978. 				$sidebar_wrapper.css({'width':$sidebar_width + $deltaX + 'px'});
  1979. 				$content_pane.css({'width':($window_width - $sidebar_width) - $deltaX + 'px'});
  1980. 			}
  1981. 			setContentHeight();
  1982.             scrollThis('tbody','selected',false); // true = instant scroll
  1983. 		});
  1984. 		$(document).on('mouseup',function() {
  1985. 			$('#overlay').css({'display':'none','z-index':'unset'});
  1986. 			$('#handle').css({'z-index':'unset'});
  1987. 			$body.css({'-webkit-user-select':'unset','-moz-user-select':'unset','user-select':'unset'});
  1988. 			$(document).off('mousemove');
  1989. 			$sidebar_width = $sidebar_wrapper.width();
  1990. 			setQuery('width',$sidebar_width);
  1991. 		});
  1992. 	}
  1993. 	$('#handle').on('mousedown', function(f) {
  1994. 		f.stopPropagation();
  1995. 		resizeSidebar(f);
  1996. 	});
  1997.  
  1998. 	// ***** BASIC UI FUNCTIONS ***** //
  1999. 	// Get dir_list item row
  2000. 	function thisRow(x) {
  2001. 		return $(x).closest('#dir_list > tbody > tr').length > 0 ? $(x).closest('#dir_list > tbody > tr') : $(x).closest('#dir_list > li');
  2002. 	}
  2003. 	function thisID(x) {
  2004. 		return thisRow(x).attr('id');
  2005. 	}
  2006. 	// Get row link
  2007. 	function thisLink(x) {
  2008. 		return $(x).find('a').length > 0 ? $(x).find('a').attr('href') : $(x).attr('href');
  2009. 	}
  2010. 	// Get row name
  2011. 	function thisText(x) {
  2012. 		return $(x).find('a span').length > 0 ? decodeURIComponentSafe( $(x).find('a span').text().toLocaleLowerCase() ) : decodeURIComponentSafe( $(x).text().toLocaleLowerCase() );
  2013. 	}
  2014. 	// get row text
  2015. 	function thisExt(x) {
  2016. 		let $this_name = thisText(x);
  2017. 		return $this_name.endsWith('app/') ? 'app' : $this_name.endsWith('/') ? '/' : $this_name.lastIndexOf('.') === -1 ? undefined : $this_name.toLocaleLowerCase().slice( $this_name.lastIndexOf('.') + 1 );
  2018. 	}
  2019. 	function getElById(id) {
  2020. 		return $(document.getElementById(id) );
  2021. 	}
  2022.  
  2023. 	// SET CONTENT HEIGHT
  2024. 	function setContentHeight() {
  2025.         let $title = $('#title');
  2026.         // accommodate multi-line title names in preview pane
  2027. 		if ( $title.outerWidth() > ( $('#content_title').innerWidth() - 2 * $('#title_buttons_left').outerWidth() ) ) {
  2028.             $title.css({'margin-top':'2em'});
  2029.         } else {
  2030.             $title.css({'margin-top':'0'});
  2031.         }
  2032. 		let $window_height = window.innerHeight;
  2033. 		let $content_header_height = $('#content_header').outerHeight();
  2034.  
  2035.         $('#sidebar, #main_content, #content_pane').css({'height':$window_height });
  2036.         $dir_list.css({'height':$window_height - $('#sidebar_header').outerHeight(), 'max-height':$window_height - $('#sidebar_header').outerHeight() });
  2037.         $dir_list_body.css({'bottom': $dir_list.find('tfoot').outerHeight(),'height': $dir_list.innerHeight() - $dir_list.find('tfoot').outerHeight(),'max-height': $dir_list.innerHeight() - $dir_list.find('tfoot').outerHeight() });
  2038.         $('#iframe_body').find('#tbody').css({'top':$('#iframe_body').find('#thead').height() + 1 +'px'});
  2039.         $content_font.css({'padding-bottom': $('#font_info th').outerHeight() +'px' });
  2040.  
  2041.         $('#prev_track, #next_track, #close_audio').css({'height':$('#audio').height() }); // set height of audio controls
  2042.         $('#content_container, #glyph_viewer').css({'top':$content_header_height +'px' });
  2043.         $('#content_pane.has_image #content_image').css({'top':$('#content_header').height() });
  2044.         setDimensions($('tr.image.selected'));
  2045.     }
  2046. 	window.addEventListener('resize', setContentHeight );
  2047.  
  2048. 	// SET CONTENT TITLE
  2049. 	function setContentTitle(kind) {
  2050.         let $title = $('#title span');
  2051. 		let $title_text = '';
  2052. 		if ( $playing_file().hasClass('audio') ) { // set audio player title
  2053. 			$('#content_audio_title').find('td').empty().text( $playing_file().find('td.name a').text() );
  2054. 		}
  2055. 		if ( $content_pane.hasClass('has_grid') ) { // set main title for other content
  2056. 			$title_text = $('#parents_dir_menu').find('> div').html().split('<wbr>').reverse()[1];
  2057. 		} else if ( $('#toggle_info').hasClass('selected') ) {
  2058.             $title_text = 'Source of: '+ $current_dir_path;
  2059. 		} else if ( $body.hasClass('has_text') ) {
  2060. 			$title_text = 'Text Editor';
  2061. 		} else if ( $selected_file().hasClass('audio') ) {
  2062. 			return;
  2063. 		} else if ( !$selected_file().hasClass('audio') || $content_pane.hasClass('has_hidden_text') ) {
  2064. 			$title_text = $selected_file().not('.audio').find('td.name a span').text(); // Assemble title
  2065. 		}
  2066. 		$title.removeClass().empty().html($title_text);
  2067.         if ( kind !== undefined && !['audio','dir','font','image','pdf','video'].includes(kind) ) {
  2068.             $title.addClass('has_'+ kind);
  2069.         }
  2070. 		if ( $title.outerWidth() > ( $('#content_title').innerWidth() - 2 * $('#title_buttons_left').outerWidth() ) ) { $title.css({'margin-top':'2em'}); } else { $title.css({'margin-top':'0'}); }
  2071. 	}
  2072. 	// Get Image Dimensions
  2073. 	function getDimensions(link, callback) {
  2074.         if ( link !== undefined ) {
  2075.             let img = new Image();
  2076.             img.src = link;
  2077.             img.onload = function() { callback( this.width, this.height ); };
  2078.         }
  2079. 	}
  2080. 	function setDimensions(row) {
  2081. 		if ( $content_pane.hasClass('has_image') || $content_pane.hasClass('has_zoom_image') ) {
  2082.             getDimensions( thisLink(row), function( width, height ) {
  2083.                 $('#title').attr('data-after',' (' + width + 'px × ' + height + 'px) ('+ ( ($content_image.find('img').width()/width)*100 ).toFixed(1) +'%)');
  2084.             });
  2085.         } else {
  2086. 			$('#title').removeAttr('data-after'); // remove image dimensions
  2087.         }
  2088. 	}
  2089. 	// Scroll Selected Items
  2090. 	function scrollThis(elID,className,bool) {
  2091. 		let $behavior = 'smooth';
  2092. 		if ( bool !== undefined ) { $behavior = 'instant'; }
  2093. 		let $block = ( $body.hasClass('is_gecko') ? 'start' : 'nearest' );
  2094. 		if ( document.getElementsByClassName(className).length !== undefined && document.getElementsByClassName(className).length > 0 ) {
  2095. 			document.getElementById(elID).getElementsByClassName(className)[0].scrollIntoView({ behavior:$behavior, block:$block, inline:'nearest' });
  2096. 		}
  2097. 		setContentHeight();
  2098. 	}
  2099.  
  2100. 	// ***** SORTING ***** //
  2101. 	function sortIndex(els,id,sortDirection) { // id = sort type
  2102.           let sorted = [];
  2103. 		const newSort = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }); // needs to be above makeNewIndex()
  2104.         sorted = els.removeClass('sorted').sort((a, b) => {
  2105.                 let aName, bName;
  2106.             if ( $('body').hasClass('has_playlist') ) {
  2107.                 aName = $(a).attr('id');
  2108.                 bName = $(b).attr('id');
  2109.             } else {
  2110.                 aName = $(a).find('td.name').data('name');
  2111.                 bName = $(b).find('td.name').data('name');
  2112.             }
  2113.             let aData = $(a).find('td[data-'+ id +']').data(id);
  2114.             let bData = $(b).find('td[data-'+ id +']').data(id);
  2115.             if ( sortDirection === 1 ) { // sort by detail data value, then by name (i.e., if data values are the same, sort by name)
  2116.                 if ( newSort.compare(aData, bData) === 0 ) {
  2117.                     return newSort.compare(aName, bName);
  2118.                 } else {
  2119.                     return newSort.compare(aData, bData);
  2120.                 }
  2121.             } else { // reverse sort
  2122.                 if ( newSort.compare(bData, aData) === 0 ) {
  2123.                     return newSort.compare(bName, aName);
  2124.                 } else {
  2125.                     return newSort.compare(bData, aData);
  2126.                 }
  2127.             }
  2128.         });
  2129.         sorted = sorted.sort((a, b) => { // add sorted style (rules between different rows)
  2130.             if ( id === 'kind' || id === 'ext' && sortDirection === 1 ) {
  2131.                 if ( $(a).find('td[data-'+ id +']').data(id) !== $(b).find('td[data-'+ id +']').data(id) ) { $(a).addClass('sorted'); }
  2132.             }
  2133.             if ( id === 'kind' || id === 'ext' && sortDirection === -1 ) {
  2134.                 if ( $(b).find('td[data-'+ id +']').data(id) !== $(a).find('td[data-'+ id +']').data(id) ) { $(a).addClass('sorted'); }
  2135.             }
  2136.  
  2137.         });
  2138.         return sorted;
  2139. 	}
  2140. 	// Sort the Dir List on click
  2141. 	function sortDirList(rows, id, sortDirection) {
  2142. 		const $sort_all = rows;
  2143. 		const $sort_dirs = $sort_all.filter('.dir:not(.app)');
  2144. 		const $sort_files = $sort_all.filter('.file,.app');
  2145. 		const $sort_id = id.slice(8);// === 'default' ? 'name' : id;
  2146.           let $sorted = [];
  2147.  
  2148. 		if ( $sort_id === 'default' || ( $sort_id !== 'name' && $settings.dirs_on_top === true )) {
  2149.             const $sorted_dirs = sortIndex($sort_dirs, $sort_id, sortDirection);
  2150.             const $sorted_files = sortIndex( $sort_files, $sort_id, sortDirection );
  2151.             if (sortDirection === 1) {
  2152. 				$sorted = $.merge($sorted_dirs,$sorted_files);
  2153. 			} else {
  2154. 				$sorted = $.merge($sorted_files,$sorted_dirs);
  2155. 			}
  2156. 		} else {
  2157. 			$sorted = sortIndex( $sort_all, $sort_id, sortDirection );
  2158. 		}
  2159. 		return $sorted;
  2160. 	}
  2161. 	// Sort on click
  2162. 	function clickSort(id) {
  2163. 		const el = $(getElById(id)); // id from th sort item = 'sort_by_xxx'
  2164.           let sortDirection = ( el.hasClass('up') ? -1 : 1 ); // Only reverse sort order after clicking a sort column once.
  2165. 		// SORT EM!
  2166.           let rows = ( $body.hasClass('has_playlist') ? $('#tbody').find('tr') : $dir_list_row );
  2167. 		const $sorted_index = sortDirList( rows, id, sortDirection );
  2168. 		$dir_list_body.empty().append($sorted_index);
  2169. 		$('div[id="'+ id +'"]').toggleClass('up').siblings().removeClass('up');
  2170. 		if ( $content_grid.hasClass('has_font_grid') ) { $('#show_font_grid').click(); }
  2171. 		if ( $content_grid.hasClass('has_image_grid') ) { $('#show_image_grid').click(); }
  2172. 		if ( $content_grid.hasClass('has_grid') ) { $('#grid_btn').click(); }
  2173. 		setContentHeight();
  2174.         scrollThis('tbody','selected',false); // true = instant scroll
  2175. 	}
  2176. 	// Sort on clicking dir_list sort item
  2177. 	$('#sorting').on('click','div.sorting:not(.disabled)',function(e) {
  2178. 		e.preventDefault();
  2179. 		e.stopPropagation();
  2180. 		clickSort( $(this).attr('id') );
  2181. 	});
  2182. 	// Sort Menu: click the list header that contains the selected menu text.
  2183. 	$('#sort_menu').on('click','li:not(.disabled)',function(e) {
  2184. 		e.preventDefault();
  2185. 		e.stopPropagation();
  2186. 		$('#sorting div[id="sort_by_'+ $(this).attr('id') +'"]').click(); // click corresponding sidebar sort item
  2187. 	});
  2188. 	// ***** END SORTING ***** //
  2189. 	// ***** END BASIC UI FUNCTIONS ***** //
  2190.  
  2191. 	// ***** CONTENT PANE ***** //
  2192. 	// SELECT ROW on click and set classes for $content_pane
  2193. 	function selectThis(rowID) {
  2194.         $('#toggle_info').removeClass('selected');
  2195.         let row = $(getElById(rowID));
  2196. 		const $grid_selected = $content_grid.find('> div[data-id="'+ rowID +'"]');
  2197. 		if ( $content_pane.hasClass('has_grid') || $content_pane.hasClass('has_hidden_grid') ) { // Select corresponding grid item
  2198. 			row.addClass('selected').siblings().removeClass('selected hovered');
  2199. 			$grid_selected.addClass('selected').siblings().removeClass('selected');
  2200.         } else { // remove classes from rows, but leave .audio with playing
  2201.             if ( row.attr('id') === 'toggle_info' ) {
  2202.                 row.toggleClass('selected loaded');
  2203.                 $dir_list.find('#tbody .selected').removeClass('selected');
  2204.             } else {
  2205.                 row.addClass('selected').siblings().removeClass('selected hovered');
  2206.             }
  2207. 		}
  2208.     }
  2209.  
  2210. 	//***** SHOW CONTENT *****//
  2211. 	function showAudio(rowID) {
  2212. 		let row = getElById(rowID);
  2213.         if ( $content_video.hasClass('has_content') ) { $('#title span').empty(); }
  2214. 		closeMedia('video');
  2215.         if ( row.hasClass('audio') ) { row.addClass('playing selected').siblings('.media').removeClass('playing selected'); }
  2216. 		$audio_player.attr('src', thisLink( row ) );
  2217. 		$content_pane.addClass('has_audio');
  2218.         $('#content_audio_title').find('td').empty().text( $playing_file().find('td.name a').text() );
  2219. 		setContentHeight();
  2220. 	}
  2221.  
  2222.     // showTextEditor();
  2223.  
  2224.     // Show Grid
  2225. 	function showGrid() {
  2226. 		$content_pane.removeClass('has_hidden_grid').addClass('has_grid');
  2227.         if ( $body.hasClass('has_text') ) { $body.toggleClass('has_text has_hidden_text'); }
  2228. 		closeMedia('video');
  2229. 		setContentTitle();
  2230. 		setContentHeight();
  2231. 		selectThis( $selected_file().attr('id') );
  2232. 	}
  2233. 	// Show Hidden Editor or Grid
  2234. 	function showHiddenEditorOrGrid() {
  2235.         if ( $content_pane.hasClass('has_hidden_grid') && !$body.hasClass('has_hidden_text') || $content_pane.hasClass('has_hidden_grid') && $body.hasClass('has_hidden_text') ) {
  2236.             $content_pane.toggleClass('has_grid has_hidden_grid'); // show grid preferentially
  2237.         } else if ( !$content_pane.hasClass('has_hidden_grid') && $body.hasClass('has_hidden_text') ) {
  2238.             $body.toggleClass('has_text has_hidden_text');
  2239.         }
  2240.     }
  2241. 	// Hide Editor or Grid
  2242. 	function hideEditorOrGrid() {
  2243. 		if ( $body.hasClass('has_text') ) { $body.toggleClass('has_text has_hidden_text'); }
  2244. 		if ( $content_pane.hasClass('has_grid') ) { $content_pane.toggleClass('has_grid has_hidden_grid'); }
  2245. 	}
  2246.     // showIndexSource();
  2247.  
  2248. 	// Show Font (and create font items)
  2249. 	function showFont(row,bool,sheet) { // bool = true if for show font grid, sheet defined at fontGridItems()
  2250.         $content_font.addClass('has_font').removeClass('has_font_viewer');
  2251.           let fontStyles = $font_styles.sheet;
  2252. 		const $font_family = thisText(row);
  2253. 		const $font_url = thisLink(row);
  2254.         const $font_grid_item_el = $('<div class="font_grid_item" data-id="'+ $(row).attr('id') +'"></div>');
  2255. 		if ( bool === false ) {
  2256. 			if ( fontStyles.cssRules.length > 0 ) { fontStyles.deleteRule(0); } // delete previous @font-face rule
  2257. 			fontStyles.insertRule('@font-face { font-family: "'+ $font_family +'"; src: url("'+ $font_url +'"); }');
  2258. 			$content_font.css({ 'font-family':'"'+ $font_family +'"' }); // set content font style
  2259. 		} else {
  2260.               let grid_item = $font_grid_item_el.clone();
  2261. 			const $display_name = $font_family;
  2262. 			sheet.insertRule('@font-face { font-family: "'+ $font_family +'"; src: url("'+ $font_url +'"); }');
  2263. 			grid_item.append('<p>'+ $display_name.toUpperCase() +'</p><h2 style=\'font-family: "'+ $font_family +'"\'; ><a href="'+ $font_url +'">'+ $display_name.slice(0,$font_family.lastIndexOf('.')) +'</a></h2>' );
  2264. 			return grid_item;
  2265. 		}
  2266. 	}
  2267.  
  2268.     // OPEN FONT
  2269.     /// opentype.js font parsing
  2270.     $('#open_font_label').on('click',function(e) { $('.menu').hide(); });
  2271.     // Open font
  2272.     $('#bookmarks').on('change','#open_font',function(e) {
  2273.         openFont(e);
  2274.     });
  2275.     function openFont(evt) {
  2276.         if (window.File && window.FileReader && window.FileList && window.Blob && window.opentype ) {
  2277.             let files = evt.target.files[0];
  2278.             let reader = new FileReader();
  2279.                 reader.readAsArrayBuffer(files);
  2280.             reader.onload = function(file) {
  2281.                 closeOtherContent();
  2282.                 closeGrid();
  2283.                 hideEditorOrGrid();
  2284.                 $content_pane.addClass('has_font');
  2285.                 $content_font.addClass('has_content has_font_viewer').removeClass('has_font');
  2286.                 parseFont(reader.result);
  2287.                 return true;
  2288.             };
  2289.             $('#open_font').val(''); // reset input to allow same font to be reopened immediately after closing.
  2290.         } else {
  2291.             alert('File APIs are not fully supported in this browser or opentype.js is not available.');
  2292.         }
  2293.     }
  2294.     // Parse font
  2295.     function parseFont(fontblob) {
  2296.             let font = window.opentype.parse(fontblob);
  2297.                 getFontInfo(font);
  2298.             let $glyphs_container = $('#glyphs_container');
  2299.                 $glyphs_container.empty();
  2300.             let $glyph_container =  $('<div class="glyph_container"></div>');
  2301.             let $glyph_canvas =     $('<canvas class="glyph" width="120" height="120"></canvas>');
  2302.             let $glyph_info =       $('<div class="glyph_info" style="font-size:0.75rem"></div>');
  2303.             let $glyph_viewer =     $('#glyph_viewer');
  2304.                 $glyph_viewer.data('data-font-name',font.names.fullName.en);
  2305.             let glyphs = font.glyphs;
  2306.         $content_font.data('data-glyphs',glyphs); // add glyphs data to $content_font
  2307.             // Draw glyphs
  2308.             for ( let i = 0; i < glyphs.length; i++ ) {
  2309.                 let glyph = glyphs.glyphs[i];
  2310.                 // GLyph width
  2311.                 let boundingBox = glyph.getBoundingBox();
  2312.                 let glyphWidth = boundingBox.x2 - boundingBox.x1;
  2313.                 let contextX = (60 - glyphWidth/24);
  2314.                 // Add glyph info and append elements
  2315.                 let glyphUnicode = ( glyph.unicode !== undefined ? '#'+ glyph.unicode : glyph.unicode );
  2316.                 let glyphContainer = $glyph_container.clone();
  2317.                 let glyphCanvas = $glyph_canvas.clone();
  2318.                 let glyphInfo = $glyph_info.clone();
  2319.                     glyphInfo.text(glyph.index +': '+ glyph.name +', '+ glyphUnicode);
  2320.                     glyphContainer.append( glyphCanvas.clone().attr('id','glyph_'+ glyph.index ) ).append(glyphInfo);
  2321.                     $glyphs_container.append( glyphContainer );
  2322.                 // Draw glyph
  2323.                 let thisGlyph = document.getElementById('glyph_'+ glyph.index);
  2324.                     $(thisGlyph).data('contextX',contextX);
  2325.                 let context = thisGlyph.getContext('2d');
  2326.                     glyph.draw(context, contextX, 84, 72);
  2327.             }
  2328.             $('#title').removeAttr('data-after').find('span').empty().html(font.names.fullName.en);
  2329.             setContentHeight();
  2330.     }
  2331.     // Get font info
  2332.     function getFontInfo(font) {
  2333.         let $font_names = font.names;
  2334.         let $font_info = $('<table id="font_info"><thead><tr><th colspan=2>FONT INFO: '+ font.names.fullName.en.toUpperCase() +'</th></tr></thead><tbody></tbody></table>');
  2335.         for (let name in $font_names) {
  2336.             let value = $font_names[name].en;
  2337.             if ( name.endsWith('URL') ) {
  2338.                 let href = value;
  2339.                 if ( !value.startsWith('http') ) {
  2340.                     href = 'http://'+ value;
  2341.                 }
  2342.                 value = '<a href="'+ href +'" target="_blank">'+ value +'</a>';
  2343.             }
  2344.             $font_info.find('tbody').append('<tr><td>'+ name +': </td><td>'+ value +'</td></tr>');
  2345.         }
  2346.         let numGlyphs = font.numGlyphs; // glyph count
  2347.             $font_info.find('tbody').append('<tr><td>numGlyphs: </td><td>'+ numGlyphs +'</td></tr>');
  2348.             $content_font.find('#font_viewer').prepend($font_info);
  2349.     }
  2350.     // Show glyph viewer
  2351.     $content_font.on('click','.glyph',function(e) {
  2352.         e.stopPropagation();
  2353.         let id = $(this).attr('id');
  2354.         $(this).parent('div').addClass('selected').siblings().removeClass('selected');
  2355.         showGlyph( id );
  2356.     });
  2357.     function showGlyph(id) {
  2358.         let $glyph_viewer = $('#glyph_viewer');
  2359.         let glyphX = $('#'+ id).data('contextX');
  2360.             id = id.slice(id.lastIndexOf('_') + 1);
  2361.         let glyphs = $content_font.data('data-glyphs'); // get glyphs
  2362.         let glyph = glyphs.get(id);
  2363.         let glyphName = glyph.name;
  2364.         let glyphPath = glyph.getPath(glyphX,84,72);
  2365.         let glyphSVG = glyphPath.toSVG().replace(/"/g,'\'');
  2366.         // set the background SVG image:
  2367.         let SVGprefix = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' x=\'0px\' y=\'0px\' width=\'120px\' height=\'120px\' viewBox=\'0 0 120 120\' style=\'enable-background:new 0 0 120 120;\' xml:space=\'preserve\' ><g>';
  2368.             $glyph_viewer.show().css({'background-image': SVGprefix + glyphSVG +'</g></svg>")'});
  2369.             $glyph_viewer.data('data-raw-svg',glyphSVG).data('data-glyph-name',glyphName).find('#glyph_viewer_info div').text(id +': '+ glyphName +', #'+ glyph.unicode ); // for saving SVG
  2370.             $content_font.addClass('has_glyph');
  2371.             setContentHeight();
  2372.     }
  2373.     // Save glyph svg
  2374.     $content_font.on('click','#save_svg',function(e) {
  2375.         e.stopPropagation();
  2376.         saveGlyph();
  2377.     });
  2378.     function saveGlyph() {
  2379.         let filename = $('#glyph_viewer').data('data-font-name') +'—'+ $('#glyph_viewer').data('data-glyph-name') +'.svg';
  2380.         let data_prefix = '<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="120px" height="120px" viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;" xml:space="preserve" ><g>';
  2381.         let data_suffix = '</g></svg>';
  2382.         let data = data_prefix +  $('#glyph_viewer').data('data-raw-svg') + data_suffix;
  2383. 		let blob = new Blob([data], {type: 'image/svg+xml'});
  2384. 		let downloadEl = window.document.createElement('a');
  2385. 		    downloadEl.href = window.URL.createObjectURL(blob);
  2386. 		    downloadEl.download = filename;
  2387. 		document.body.appendChild(downloadEl);
  2388. 		    downloadEl.click();
  2389. 		document.body.removeChild(downloadEl);
  2390. 		URL.revokeObjectURL(blob);
  2391.     }
  2392.  
  2393.     // Set Content Pane classes
  2394. 	function setContentClasses(content_el) {
  2395. 		if ( content_el === 'audio' ) {
  2396. 			$content_pane.addClass('has_audio');
  2397. 		} else {
  2398. 			hideEditorOrGrid();
  2399. 			$content_pane.addClass( 'has_'+ content_el ); // remove classes, excluding grid and text classes; add content class
  2400. 		}
  2401. 	}
  2402. 	// Set Content Element Sources and row classes
  2403.     function setContentSources(row,link,kind,content_el) {
  2404.         switch(kind) {
  2405.             case 'audio':
  2406.                 $audio_player.attr('src',link);
  2407.                 break;
  2408.             case 'font':
  2409.                 showFont(row,false);
  2410.                 break;
  2411.             case 'code':
  2412.             case 'markdown':
  2413.             case 'text':
  2414.                 link = thisLink(row) +'?split_view='+ getQuery('split_view') +'&default_text_view='+ getQuery('default_text_view');
  2415.                 if ( !$body.hasClass('enable_text_editing') ) { link += '&enable_text_editing=false'; } else { link += '&enable_text_editing=true'; }
  2416.                 break;
  2417.             case 'dir':
  2418.                 $content_pane.toggleClass('has_iframe has_dir')
  2419.                 link = link + '?sort_by=' + getQuery('sort_by') +'&show_numbers='+ getQuery('show_numbers') +'&use_custom_icons='+ getQuery('use_custom_icons');
  2420.                 break;
  2421.             case 'info':
  2422.                 link = $location + '?sort_by=' + getQuery('sort_by') +'&show_numbers='+ getQuery('show_numbers') +'&view_source=true';
  2423.                 break;
  2424.             case 'pdf':
  2425.                 link = link + '?#view=fitB&scrollbar=1&toolbar=1&navpanes=1';
  2426.                 break;
  2427.         }
  2428.         if ( kind === 'video' ) { row.addClass('playing'); } else { row.addClass('loaded'); }
  2429.         // fix for pdfs not being loaded after setting src attribute (hide and then show)
  2430. 		if ( kind === 'pdf' ) {
  2431.             $content_pdf.hide().addClass('has_content').attr('src','').attr('src',link).show().removeAttr('srcdoc');
  2432.         } else if ( kind === 'image' ) {
  2433.             $('#content_'+ content_el).addClass('has_content').find('img').attr('src',link);
  2434.         } else {
  2435.             $('#content_'+ content_el).addClass('has_content').attr('src',link).removeAttr('srcdoc');
  2436.         }
  2437. 	}
  2438. 	// Show Content
  2439. 	function showContent(id) { // show any content excluding grids on row click
  2440. 		let row = getElById(id);
  2441. 		if ( row.length === -1 ) { return; } // needed for left/right arrow nav when there are no valid items (i.e. images or fonts)
  2442. 		let kind = row.attr('data-kind');
  2443. 		let link = thisLink(row);
  2444.         let content_el = ( row.hasClass('ignore') && $body.hasClass('ignore_ignored_files') ? 'ignored' : !['audio','font','image','pdf','video'].includes(kind) || kind === 'dir' || kind === 'info' ? 'iframe' : kind ); // load dirs and any other kind of content except audio, font, image, pdf, or video into iframe
  2445.         if ( row.hasClass('audio') ) {
  2446. 			showAudio( id );
  2447.         } else {
  2448.             closeOtherContent(row);
  2449.             setContentClasses(content_el);
  2450.             setContentSources(row,link,kind,content_el);
  2451.             setContentTitle(kind);
  2452.             setContentHeight();
  2453.             row.siblings().removeClass('loaded');
  2454.         }
  2455. 	}
  2456.  
  2457. 	//***** CLOSE CONTENT (Close button or Cmd/Ctrl + W) *****//
  2458. 	// Close Audio/Video
  2459. 	function closeMedia(type) { // type === audio || video
  2460. 		let $mediaEl = ( type === 'audio' ? $audio_player : $content_video );
  2461.             $mediaEl.trigger('pause').attr('src','');
  2462. 		$content_pane.removeClass('has_'+ type);
  2463. 		$('.media.playing, .media.loaded').removeClass('playing loaded');
  2464. 		if ( type === 'audio' ) {
  2465.             $('#content_audio_title td').empty();
  2466.         }
  2467. 		if ( type === 'video' ) {
  2468.             $('#content_video').removeClass('has_content');
  2469.         }
  2470. 		setContentHeight();
  2471. 	}
  2472. 	// Close Audio button click
  2473. 	$('#close_audio').on('click',function(e) {
  2474. 		e.stopPropagation();
  2475. 		closeMedia('audio');
  2476. 		$('.audio.selected').removeClass('selected');
  2477.         if ( $('.loaded').length === 1 ) { $('.loaded').addClass('selected'); }
  2478. 	});
  2479.     // Close Playlist
  2480.     function closePlaylist() {
  2481.         $body.removeClass('has_playlist');
  2482.         $('head').find('title').text('Index of: '+ $location); // change window title back to default
  2483.         $('#parents_dir_menu').find('> div').empty().html($current_dir_path);
  2484.         clickSort(getQuery('sort_by'));
  2485.         $dir_list.find('#stats').html(getIndexStats($dir_list.find('#tbody tr')));
  2486.         if ( $('#tbody').find('.audio').length < 1 ) { $body.removeClass('has_audio'); }
  2487.     }
  2488. 	// Close Text Editor
  2489.     function closeTextEditor() {
  2490.         if ( $body.hasClass('edited') ) {
  2491.             showWarning('closeContent');
  2492.         } else {
  2493.             $body.removeClass('has_text');
  2494.             if ( $content_pane.hasClass('has_hidden_grid') ) { $content_pane.toggleClass('has_grid has_hidden_grid'); }
  2495.         }
  2496.     }
  2497.     // Close Grid
  2498. 	function closeGrid() {
  2499. 		$content_pane.removeClass('has_grid');
  2500. 		$content_grid.empty().removeClass().attr('style','').find('.image_grid_item, img').attr('style','');
  2501.         if ( $body.hasClass('has_hidden_text') ) { $body.toggleClass('has_text has_hidden_text'); }
  2502. 	}
  2503.     // Close index source preview
  2504. 	function closeIndexSource() {
  2505.         $('#toggle_info').removeClass('selected loaded');
  2506.         $content_pane.removeClass('has_iframe').find('#content_iframe').removeClass('has_content').removeAttr('src');
  2507.         if ( $('.loaded:not(.audio)').length === 1 || $('.playing').length > 0 ) {
  2508.             $('.loaded:not(.audio)').click();
  2509.             $('.playing').addClass('selected');
  2510.         }
  2511.         if ( $content_pane.hasClass('has_hidden_grid') ) { showGrid(); }
  2512.         setContentTitle();
  2513.     }
  2514. 	// Close .content elements (not #content_audio, #content_text, or #content_grid) when opening new content
  2515. 	function closeOtherContent(row) {
  2516.         if ( $content_pane.hasClass('has_pdf') ) { $('head').find('title').text('Index of: '+ $location); } // change window title back to default
  2517. 		// close audio/video when opening video/audio
  2518. 		if ( row !== undefined ) {
  2519.             if ( row.hasClass('video') ) {
  2520.                 closeMedia('audio');
  2521.             } else if ( row.hasClass('audio') ) {
  2522.                 closeMedia('video');
  2523.             }
  2524.             if ( ( $content_pane.hasClass('has_grid') || $content_pane.hasClass('has_hidden_grid') ) && !row.hasClass('image') && !row.hasClass('font') && !row.hasClass('audio') ) {
  2525.                 closeGrid();
  2526.                 $('#grid_btn').removeClass('has_grid');
  2527.             }
  2528. 		}
  2529. 		// close other content
  2530.         if ( $('.content.has_content').length || $content_pane.hasClass('has_ignored') ) {
  2531. 			let $contentID = $('.content.has_content').attr('id');
  2532. 			switch($contentID) { // specific cases
  2533.                 case 'content_font':
  2534.                     $content_font.attr('style','').find('#font_viewer').remove().end().append(ContentFontViewer());
  2535.                     break;
  2536.                 case 'content_image':
  2537.                     $content_image.removeAttr('style').find('img').removeAttr('style'); // reset image: comment out to retain image scale after loading other content
  2538.                     break;
  2539.                 case 'content_video':
  2540.                     closeMedia('video');
  2541.                     break;
  2542.             }
  2543.             // remove content classes and source attribute
  2544.             $content_pane.removeClass('has_font has_image has_zoom_image has_pdf has_video has_iframe has_dir has_ignored')
  2545.                          .find('.content').removeClass('has_content has_font has_font_viewer').removeAttr('src')
  2546.                          .find('img').removeAttr('src');
  2547.             showHiddenEditorOrGrid();
  2548.         }
  2549.     }
  2550.     // Close Button: close any visible content
  2551. 	function closeContent() {
  2552.         window.stop();
  2553. 		if ( $('#toggle_info').hasClass('selected') ) {
  2554.             closeIndexSource();
  2555.         } else if ( $body.hasClass('has_text') ) {
  2556.             closeTextEditor();
  2557.         } else if ( ( $content_pane.hasClass('has_hidden_grid has_image') || $content_pane.hasClass('has_hidden_grid has_zoom_image') ) && $content_grid.hasClass('has_image_grid') ) {
  2558. 			$('.loaded').removeClass('loaded');
  2559. 			$content_pane.toggleClass('has_hidden_grid has_grid').removeClass('has_image has_zoom_image').find('#content_image').removeClass('has_content').find('img').removeAttr('src');
  2560.             scrollThis('content_grid','selected');
  2561.         } else if ( $content_pane.hasClass('has_grid') ) { // close grid (i.e., don't just hide)
  2562. 			closeGrid();
  2563.             $('#grid_btn').removeClass('has_grid');
  2564.         } else if ($content_font.hasClass('has_glyph') ) {
  2565.             $('#glyph_viewer').hide().attr('style','');
  2566.             $content_font.addClass('has_content').removeClass('has_glyph');
  2567.             scrollThis('glyphs_container','selected');
  2568. 		} else if ( ['has_font','has_image','has_zoom_image','has_pdf','has_video','has_iframe','has_dir','has_ignored'].some( c => $content_pane.attr('class').split(' ').indexOf( c ) >= 0 ) && !$body.hasClass('iframe_edited') ) {
  2569. 			$('tr.selected:not(.audio)').removeClass('selected');
  2570. 			$('.loaded').removeClass('loaded');
  2571.             $('#title').removeAttr('data-after').find('span').empty();
  2572. 			closeOtherContent();
  2573.         } else if ( $body.hasClass('iframe_edited') ) { // warn if iframe edited
  2574. 			showWarning('closeContent');
  2575. 		} else if ( $content_pane.hasClass('has_audio') ) { // close audio last of all
  2576.             closeMedia('audio');
  2577.             $('.selected.audio').removeClass('selected');
  2578.         } else if ( $body.hasClass('has_playlist') ) {
  2579.             closePlaylist();
  2580.         }
  2581. 		if ( $('#font_info').length !== 1 ) { setContentTitle(); }
  2582. 		setContentHeight();
  2583. 	}
  2584. 	$('#close_btn').on('click', function(e) {
  2585. 		e.preventDefault();
  2586. 		closeContent(); // close content unless body.edited or body.iframe_edited
  2587. 	});
  2588.  
  2589. 	//***** RESET CONTENT (Reset button or Cmd/Ctrl + R) *****//
  2590. 	function resetContent() {
  2591. 		if ( $content_pane.attr('class') === '' )       { window.location = window.location.href; } // reload page
  2592. 		if ( $content_pane.hasClass('has_audio') )      { $audio_player.prop('currentTime', 0).trigger('pause'); }
  2593. 		if ( $content_pane.hasClass('has_grid') )       { $('#grid_btn').click(); }
  2594. 		if ( $content_pane.hasClass('has_font') )       { $content_font.css({'font-size':'1em'}); }
  2595. 		if ( $content_pane.hasClass('has_image') || $content_pane.hasClass('has_zoom_image') ) { $content_pane.removeClass('has_zoom_image').addClass('has_image').find('#content_image').removeAttr('style').find('img').removeAttr('style'); }
  2596. 		if ( $content_pane.hasClass('has_video') )      { $content_video.prop('currentTime',0).trigger('pause'); }
  2597. 		if ( $content_pane.hasClass('has_iframe') || $content_pane.hasClass('has_dir') ) { $selected_file().find('a').click(); }
  2598. 		setContentHeight();
  2599. 	}
  2600. 	$('#reload_btn').on('click', function(e) {
  2601. 		e.preventDefault();
  2602. 		showWarning('resetContent');
  2603. 	});
  2604.  
  2605. 	//**********************//
  2606. 	//***** NAVIGATION *****//
  2607. 	function firstRowID(className) {
  2608. 		return ( $('#tbody').find(':visible:not(.unchecked)').filter(className).length ? $('#tbody').find('tr:visible:not(.unchecked)').filter(className).first().attr('id') : null );
  2609. 	}
  2610. 	function prevRowID(className) {
  2611.         let row;
  2612.         if ( ['.audio','.video','.media'].includes(className) ) { row = $playing_file(); } else { row = $selected_file(); }
  2613. 		return ( !row.length || !row.prevAll(':visible:not(.unchecked)').filter(className).length ) ? $('#tbody').find('tr:visible').filter(className).last().attr('id') : row.prevAll(':visible:not(.unchecked)').filter(className).first().attr('id');
  2614. 	}
  2615. 	function nextRowID(className) { // if nothing selected, or if no next row with classname, return first row with classname, else return next row with classname
  2616.         let row;
  2617.         if ( ['.audio','.video','.media'].includes(className) ) { row = $playing_file(); } else { row = $selected_file(); }
  2618. 		return ( !row.length || !row.nextAll(':visible:not(.unchecked)').filter(className).length ) ? $('#tbody').find('tr:visible').filter(className).first().attr('id') : row.nextAll(':visible:not(.unchecked)').filter(className).first().attr('id');
  2619. 	}
  2620. 	// function lastRowID(className) {
  2621. 	// return ( $('#tbody').find(':visible:not(.unchecked)').filter(className).length ? $('#tbody').find('tr:visible:not(.unchecked)').filter(className).last().attr('id') : null );
  2622. 	// }
  2623. 	function selectRowID(className,key) {
  2624. 		let id = '';
  2625. 		if ( key === 'ArrowUp' ) { id = prevRowID('.dir,.file'); }
  2626. 		if ( key === 'ArrowLeft' ) { id = prevRowID(className); }
  2627. 		if ( key === 'ArrowRight' ) { id = nextRowID(className); }
  2628. 		if ( key === 'ArrowDown' ) { id = nextRowID('.dir,.file'); }
  2629. 		return id;
  2630. 	}
  2631. 	// NAVIGATION: select GRID items by left/right arrow keys @ arrowNavigation();
  2632. 	function gridNavigation(key) {
  2633. 		let id; // = grid item data-id = corresponding dir_list item id.
  2634.         let rowLength = 0; // $content_grid.hasClass('has_grid') || $('#content_font').hasClass('has_font_grid')
  2635.         if ( $('#content_grid').hasClass('has_image_grid') ) { rowLength = (Math.round( $('#content_grid').innerWidth() / $('.image_grid_item').outerWidth()) - 1 ) ;}
  2636.         switch(key) {
  2637.             case 'ArrowDown':
  2638.                 if ( $('#content_grid .selected').nextAll().eq(rowLength).length === 1 ) { id = $('#content_grid .selected').nextAll().eq(rowLength).attr('data-id'); } else { id = $('#content_grid > div').first().attr('data-id'); }
  2639.                 break;
  2640.             case 'ArrowUp':
  2641.                 if ( $('#content_grid .selected').prevAll().eq(rowLength).length === 1 ) { id = $('#content_grid .selected').prevAll().eq(rowLength).attr('data-id'); } else { id = $('#content_grid > div').last().attr('data-id'); }
  2642.                 break;
  2643.             case 'ArrowLeft':
  2644.                 if ( $('#content_grid .selected').prev().length === 1 ) { id = $('#content_grid .selected').prev().attr('data-id'); } else { id = $('#content_grid > div').last().attr('data-id'); }
  2645.                 break;
  2646.             case 'ArrowRight':
  2647.                 if ( $('#content_grid .selected').next().length === 1 ) { id = $('#content_grid .selected').next().attr('data-id'); } else { id = $('#content_grid > div').first().attr('data-id'); }
  2648.                 break;
  2649.         }
  2650.         if ( $content_pane.hasClass('has_hidden_grid') ) {
  2651.             $('#content_grid > div[data-id="'+ id +'"]').click();
  2652.         } else {
  2653.             selectThis(id);
  2654.         }
  2655.     }
  2656. 	// NAVIGATION: FONTS and IMAGES by prev/next buttons
  2657. 	$content_pane.on( 'click','#prev_btn, #next_btn', function(e) {
  2658. 		e.stopPropagation();
  2659. 		e.preventDefault();
  2660. 		let key = $(this).attr('id') === 'prev_btn' ? 'ArrowLeft' : 'ArrowRight';
  2661.         if ( $('#content_font').hasClass('has_font_viewer') ) {
  2662.             glyphNavigation(key);
  2663.         } else {
  2664.             clickRow( selectRowID('.font,.image',key));
  2665.         }
  2666. 	});
  2667.     // glyph navigation
  2668.     function glyphNavigation(key) {
  2669.         let rowLength = Math.round( $('#glyphs_container').innerWidth() / $('.glyph_container').outerWidth() - 1 );
  2670.         if ( $('#glyphs_container > .glyph_container.selected').length === 0 ) {
  2671.             if ( key === 'ArrowRight' || key === 'ArrowDown' ) { $('.glyph_container').first().addClass('selected').siblings().removeClass('selected'); }
  2672.             if ( key === 'ArrowLeft' || key === 'ArrowUp' ) { $('.glyph_container').last().addClass('selected').siblings().removeClass('selected'); }
  2673.         } else if ( $('#glyphs_container > .glyph_container.selected').length === 1 ) {
  2674.             if ( key === 'ArrowRight' ) { $('.glyph_container.selected').nextAll('.glyph_container').first().addClass('selected').siblings().removeClass('selected'); }
  2675.             if ( key === 'ArrowLeft' ) { $('.glyph_container.selected').prevAll('.glyph_container').first().addClass('selected').siblings().removeClass('selected'); }
  2676.             if ( key === 'ArrowDown' ) { if ( $('.glyph_container.selected').nextAll('.glyph_container').eq(rowLength).length === 1 ) { $('.glyph_container.selected').nextAll('.glyph_container').eq(rowLength).addClass('selected').siblings().removeClass('selected'); } else { $('.glyph_container').last().addClass('selected').siblings().removeClass('selected'); } }
  2677.             if ( key === 'ArrowUp' ) { if ( $('.glyph_container.selected').prevAll('.glyph_container').eq(rowLength).length === 1 ) { $('.glyph_container.selected').prevAll('.glyph_container').eq(rowLength).addClass('selected').siblings().removeClass('selected'); } else { $('.glyph_container').first().addClass('selected').siblings().removeClass('selected'); } }
  2678.         }
  2679.         if ( $('#content_font').hasClass('has_glyph') ) { $('.glyph_container.selected .glyph').click(); } // show the selected glyph
  2680.     }
  2681. 	// NAVIGATION: MEDIA tracks by arrow left/right @ leftRightArrowNavigation() & button click; // handle shuffle or loop play, as well as normal continuous playback after end of track with ArrowRight
  2682. 	function playPrevNextTrack(key) {
  2683.         if ( $('.playing').length === 0 ) { // Arrow L/R selects first/last audio file if nothing selected
  2684.             clickRow( selectRowID('.media',key) );
  2685. 			playMedia('play');
  2686.         } else if ( $('.playing').length === 1 ) {
  2687. 			let mediaClass = ( $('.playing').hasClass('audio') ? '.audio' : '.video' );
  2688.             // If shuffle play...
  2689. 			if ( $body.hasClass('shuffle_audio') ) {
  2690. 				let trackRowID = $audio_player.data('shufflelist').pop();
  2691. 				if ( trackRowID !== undefined ) { // if shuffle list is not empty...
  2692. 					showAudio( trackRowID ); // load audio...
  2693. 					playMedia('play'); // and play
  2694. 				} else if ( trackRowID === undefined ) { // if end of shufflelist...
  2695. 					if ( $body.hasClass('loop_audio') ) { // and if loop audio, update the shufflelist and play
  2696. 						updateShuffleList();
  2697. 						playMedia('play');
  2698. 					} else { // else load the first track
  2699. 						showAudio( firstRowID( mediaClass ));
  2700. 					}
  2701. 				}
  2702.             // else if there is another media file selected, play it next
  2703.             } else if ( $(mediaClass).filter('.selected').length === 1 && !$('.media.selected').hasClass('playing') ) {
  2704.                 showAudio( $('.media.selected').attr('id') );
  2705.                 playMedia('play');
  2706.             } else {
  2707.                 if ( $body.hasClass('loop_audio') || nextRowID( mediaClass ) !== firstRowID( mediaClass ) ) {
  2708.                     showAudio( selectRowID( mediaClass,key ) );
  2709.                     playMedia('play');
  2710.                 } else {
  2711.                     showAudio( selectRowID( mediaClass,key ) );
  2712.                 }
  2713.             }
  2714.         }
  2715.     }
  2716.         // NAVIGATION: Audio by prev/next audio buttons
  2717. 	$('.prev_next_track_btn').on('click',function() {
  2718. 		let key = ( $(this).attr('id') === 'prev_track' ? 'ArrowLeft' : 'ArrowRight' );
  2719. 		playPrevNextTrack(key);
  2720. 	});
  2721. 	// NAVIGATION: Prev/Next Audio or Prev/Next File of same data-kind by arrow left/right
  2722. 	function leftRightArrowNavigation(className,key) {
  2723. 		if ( $('.selected').hasClass('audio') && $('.playing').length === 1 ) {
  2724.             playPrevNextTrack(key);
  2725. 		} else if ( $('#toggle_info').hasClass('selected') ) { // if previewing directory source
  2726.             if ( $('#tbody .loaded').length > 0 ) { clickRow( $('#tbody .loaded').attr('id') ); } else { clickRow( selectRowID('.dir,.file',key) ); }
  2727.         } else {
  2728. 			if ( $('.selected').length === 0 ) { // else select first/last row
  2729.                 clickRow( selectRowID('.dir,.file',key) );
  2730. 			} else { // else select prev/next row of same data-kind
  2731. 				clickRow( selectRowID('.'+ $('.loaded,.video.playing').attr('data-kind'),key) );
  2732. 			}
  2733.             if (className === 'video') { playMedia('play'); }
  2734. 		}
  2735. 	}
  2736.     function upDownArrowNavigation(key) {
  2737.         let row = $(document.getElementById(selectRowID('.dir,.file',key)));
  2738.         if ( row.hasClass('audio') && $('.audio.playing').length === 1 ) { // just select audio file if another audio is playing
  2739.             selectThis( row.attr('id') );
  2740. 		} else if ( $('#toggle_info').hasClass('selected') ) {
  2741.             if ( $('#tbody .loaded').length > 0 ) {
  2742.                 clickRow( $('#tbody .loaded').attr('id') );
  2743.             } else {
  2744.                 clickRow( selectRowID('.dir,.file:visible',key) );
  2745.             }
  2746.         } else {
  2747.             clickRow( selectRowID('.dir,.file',key) );
  2748. 		}
  2749.     }
  2750. 	// NAVIGATE directory index items by arrow up/down or left/right keys, with/without grid @ indexNavigation()
  2751. 	function arrowNavigation(className,key) {
  2752.         if ( $content_pane.hasClass('has_grid') || $content_pane.hasClass('has_hidden_grid') ) { // Grid navigation: L/R arrow selects images and fonts only
  2753.             gridNavigation(key);
  2754.             if ( !$content_pane.hasClass('has_hidden_grid') ) { scrollThis('content_grid','selected'); }
  2755. 		} else if ( $('#content_font').hasClass('has_font_viewer') ) { // if previewing font glyphs
  2756.             glyphNavigation(key);
  2757.             scrollThis('content_container','selected');
  2758.         } else if ( key === 'ArrowUp' || key === 'ArrowDown' ) {
  2759.             upDownArrowNavigation(key);
  2760.             scrollThis('tbody','selected');
  2761. 		} else { // key === 'ArrowLeft" || key === 'ArrowRight'
  2762.             leftRightArrowNavigation(className,key);
  2763.             scrollThis('tbody','selected');
  2764. 		}
  2765. 	}
  2766.     // NAVIGATION: Main navigation by arrow keys
  2767. 	function indexNavigation(key) {
  2768. 		let className = ( $('.selected[data-kind]') === undefined ? $dir_list.find('tbody tr:visible').first().attr('data-kind') : $('.selected[data-kind]').attr('data-kind') );
  2769. 		arrowNavigation(className,key);
  2770. 	}
  2771.  
  2772. 	// NAVIGATE items by typed string
  2773. 	var str = '';
  2774. 	function timeoutID() {
  2775. 		return window.setTimeout( function() { str = ''; }, 1500 );
  2776. 	}
  2777. 	function alphaNav(e) { // Select Dir_List row by typed string; Todo: select next row by nearest letter
  2778. 		let timer = timeoutID();
  2779. 		if ( typeof timer === 'number' ) {
  2780. 			window.clearTimeout( timer );
  2781. 			timer = 0; // id
  2782. 		}
  2783. 		timeoutID();
  2784. 		str += e.key;
  2785. 		str = str.toLowerCase();
  2786. 		if ( $('#dir_list').find('td.name[data-name^="'+ str +'"]').length ) {
  2787. 			$('#dir_list').find('td.name[data-name^="'+ str +'"]').first().find('a').click();
  2788.             scrollThis('tbody','selected');
  2789. 			// } else {
  2790. 			// null; // replace this with some sort of fuzzy match function? TBD
  2791. 		}
  2792. 	}
  2793. 	//***** END NAVIGATION *****//
  2794.  
  2795. 	//***** CLICK TO SELECT/SHOW CONTENT *****//
  2796.  
  2797. 	// CLICK element by id
  2798. 	function clickThis(id) {
  2799. 		let el = $(document.getElementById(id));
  2800. 		if ( el.find('a').length > 0 ) { el.find('a').click(); } else { el.click(); }
  2801. 	}
  2802. 	// CLICK Row
  2803. 	function clickRow(id) {
  2804. 		selectThis(id);
  2805. 		showContent(id);
  2806. 	}
  2807. 	$body.find('#tbody').on('click','tr', function(e) {
  2808. 		e.preventDefault();
  2809. 		e.stopPropagation();
  2810.         if ( $(this).hasClass('playing') ) {
  2811.             playPauseMedia();
  2812.         } else {
  2813.             showWarning( 'clickRow', $(this).attr('id') );
  2814.         }
  2815. 	});
  2816.     // Show current dir source in $content_iframe
  2817.     $('#toggle_info').on('click',function(e) {
  2818. 		e.stopPropagation();
  2819.         if ( $(this).hasClass('selected') ) {
  2820.             $('#close_btn').click();
  2821.         } else {
  2822.             showWarning( 'clickRow', $(this).attr('id') );
  2823.         }
  2824.     });
  2825.  
  2826.     // DOUBLE-CLICK Row to open directory
  2827. 	function doubleClickRow(id) { // row.dir only
  2828.         let row = getElById(id);
  2829. 		let $query_str = decodeURIComponentSafe(window.location.search);
  2830. 		if ( $query_str === '' ) { $query_str = '?'; }
  2831. 		const $current_index = row.prevAll('.dir:visible').length;
  2832. 		if ( $query_str.indexOf('history') !== -1 ) {
  2833. 			$query_str = $query_str.replace(/&selected=\d+/,'').replace(/&history=/,'&history='+ $current_index +'+');
  2834. 		} else {
  2835. 			$query_str = $query_str.replace(/&selected=\d+/,'') + '&history='+ $current_index;
  2836. 		}
  2837. 		window.location = row.find('a').attr('href') + $query_str;
  2838. 	}
  2839. 	$('#tbody').find('tr.dir').on('dblclick', function(e) {
  2840. 		e.preventDefault();
  2841. 		e.stopPropagation();
  2842. 		showWarning( 'doubleClickRow', $(this).attr('id') );
  2843. 	});
  2844. 	// CLICK grid item
  2845. 	$content_grid.on('click','div', function(e) {
  2846. 		e.preventDefault();
  2847.         let id = $(this).attr('data-id');
  2848.         $(this).addClass('selected').siblings().removeClass('selected');
  2849.         getElById(id).click();
  2850. 	});
  2851.  
  2852. 	// HOVER Grid Item
  2853. 	$content_grid.on('mouseenter','> div:not(.selected)',function() {
  2854. 		thisRow($dir_list.find('a[href*="'+ thisLink(this) +'"]')).addClass('hovered');
  2855. 	}).on('mouseleave','> div:not(.selected)',function() {
  2856. 		thisRow($dir_list.find('a[href*="'+ thisLink(this) +'"]')).removeClass('hovered');
  2857. 	});
  2858. 	// HOVER Dir_list_row and highlight corresponding grid item
  2859. 	$dir_list_row.hover(function() {
  2860. 		if ( $content_grid.is(':visible') ) {
  2861. 			$content_grid.find('[href*="'+ thisLink(this) +'"]').closest('div').addClass('hovered');
  2862. 		}
  2863. 	}, function() {
  2864. 		if ( $content_grid.is(':visible') ) {
  2865. 			$content_grid.find('.hovered').removeClass('hovered');
  2866. 		}
  2867. 	});
  2868.  
  2869. 	//***** AUTOLOAD CONTENT: index files or files from the file shortcut list *****//
  2870. 	function autoSelectFile() {
  2871. 		let $query_prefs = getQueryPrefs();
  2872. 		let $UI_pref_selected = ( $query_prefs.get('selected') === null ? '' : $query_prefs.get('selected') );
  2873. 		if ( getQuery('file') !== undefined && getQuery('file').length > 0 && window.top == window.self ) { // load individual files
  2874. 			clickRow( $dir_list.find('a[href*="'+ getQuery('file') +'"]').closest('tr').attr('id') );
  2875. 			removeQuery('file');
  2876. 		} else if ( $UI_pref_selected !== '' ) {
  2877. 			clickRow( $dir_list.find('tr.dir:visible').eq($UI_pref_selected).attr('id') );
  2878.         } else if ( $body.hasClass('autoload_index_files') && $dir_list.find( 'a[href*="/index."]').length > 0 ) { // else load index file
  2879. 			clickRow( $dir_list.find('a[href*="/index."]').closest('tr').attr('id') );
  2880. 		} else if ( !$body.hasClass('has_media') ) { // else select first non-media item
  2881. //			clickRow( $dir_list.find('#tbody tr:visible:not(.media):not(.invisible):not(.ignored)').first(0).attr('id') );
  2882. 		}
  2883. 		if ( $body.hasClass('autoload_media') && $body.hasClass('has_media') ) { // else if audio and images, load cover art
  2884. 			clickRow( firstRowID('.audio,.video') );
  2885. 			if ( $playing_file() ) { scrollThis('tbody','playing'); }
  2886. 		}
  2887. 		if ( $selected_file() ) { scrollThis('tbody','selected'); }
  2888. 	}
  2889.  
  2890. 	// Autoload Cover Art
  2891. 	function getImageNames() {
  2892. 		let image_names = [];
  2893. 		$image_files.each(function() {
  2894. 			let name = $(this).find('td.name').attr('data-name');
  2895. 			name = name.slice(0,name.lastIndexOf('.'));
  2896. 			image_names.push( name );
  2897. 		});
  2898. 		return image_names;
  2899. 	}
  2900. 	function getCoverArtID() {
  2901. 		const cover_names = ['cover','front'];
  2902. 		const image_names = getImageNames();
  2903. 		for ( let cover_name of cover_names ) {
  2904. 			if ( image_names.includes(cover_name) ) { // file name = a cover name
  2905. 				return $image_files.eq( image_names.indexOf(cover_name) ).attr('id');
  2906. 			} else if ( image_names.some( name => name.startsWith(cover_name)) ) { // file name starts with a cover name
  2907. 				return $image_files.find('td.name[data-name^="'+ cover_name +'"]').closest('tr').attr('id');
  2908. 			} else if ( image_names.some( name => name.indexOf(cover_name) > 0 ) ) { // file name includes a cover name
  2909. 				return $image_files.find('td.name[data-name*="'+ cover_name +'"]').closest('tr').attr('id');
  2910. 			} else { // else use first image
  2911. 				return $image_files.first().attr('id');
  2912. 			}
  2913. 		}
  2914. 	}
  2915. 	function autoLoadCoverArt() { // autoload cover art for audio if dir contains audio and images, and audio is loaded and non-image content is not loaded
  2916.         let bodyClasses = getClassList('top');
  2917.         if ( bodyClasses.contains( 'has_audio','has_images','autoload_media' ) && !getElById( firstRowID('.media') ).hasClass('video') ) {
  2918. 			let $coverID = getCoverArtID();
  2919. 			if ( $coverID !== undefined ) {
  2920. 				let row = getElById($coverID);
  2921. 				showContent($coverID);
  2922. 				row.addClass('loaded');
  2923.                 $('#title span').html(row.find('.name').attr('data-name'));
  2924.                 setDimensions($('.loaded.image'));
  2925.             }
  2926. 		}
  2927. 	}
  2928.  
  2929. 	//***** KEYBOARD EVENTS *****//
  2930. 	$body.on('keydown',$dir_list,function(e) {
  2931. 		const $selected = ( $('#content_font').hasClass('has_font_viewer') ? $('.glyph_container.selected .glyph') : $selected_file() );
  2932.  
  2933. 		if ( $('#content_source').is(':focus') || $('#content_font div').is(':focus') && e.key !== 'Escape' ) {
  2934. 			return;
  2935. 		}
  2936. 		// Disable all keydown events except return and tab when warning is shown
  2937. 		if ( $('body').hasClass('has_warning') ) {
  2938. 			if (e.key !== 'Enter' && e.key !== 'Tab' && e.key !== 'Shift' ) {
  2939. 				e.preventDefault();
  2940. 				return false;
  2941. 			}
  2942. 			if ( e.key === 'Enter' ) {
  2943. 				e.preventDefault();
  2944. 				e.stopPropagation();
  2945. 				$('#warnings').find('button.focus').click();
  2946. 			}
  2947. 			if ( e.key === 'Tab' ) {
  2948. 				e.preventDefault();
  2949. 				e.stopPropagation();
  2950. 				if ( $('#warnings').find('button.focus').length === 0 || $('#warnings').find('button.focus').prev('button').length === 0 ) {
  2951. 					$('#warnings').find('button').last('button').focus().addClass('focus').siblings().removeClass('focus').blur();
  2952. 				} else {
  2953. 					$('#warnings').find('button.focus').prev('button').focus().addClass('focus').siblings().removeClass('focus').blur();
  2954. 				}
  2955. 			}
  2956. 		}
  2957.  
  2958. 		$(':focus').blur(); // Need this to able to select grid items after clicking close button (or other buttons).
  2959.  
  2960. 		switch ( e.key ) {
  2961. 		case 'ArrowUp':
  2962. 			if ( (navigator.platform.match('Mac') ? e.metaKey && !e.ctrlKey : e.ctrlKey) && !e.shiftKey && !e.altKey ) { // Cmd/Ctrl + up arrow = go to parent directory
  2963. 				if ( $('#parents_dir_menu + ul a').length < 1 ) {
  2964. 					return;
  2965. 				} else {
  2966. 					showWarning( 'clickThis', $('#parent_dir_menu').attr('id') );
  2967. 				}
  2968. 				break;
  2969. 			}
  2970. 			if ( $('*[contentEditable="true"]').is(':focus') ) { // Allow arrow navigation within content_editable elements
  2971. 				return;
  2972. 			}
  2973. 			e.preventDefault();
  2974. 			showWarning( 'indexNavigation', 'ArrowUp' );
  2975. 			break;
  2976. 		case 'ArrowDown':
  2977. 			if ( (navigator.platform.match('Mac') ? e.metaKey && !e.ctrlKey : e.ctrlKey) && !e.shiftKey && !e.altKey && $selected.hasClass('app') && $settings.apps_as_dirs === false ) { // Ignore Cmd/Ctrl + arrow or if focused element is content editable or open dir
  2978. 				return;
  2979. 			} else if ( $('*[contentEditable="true"]' ).is(':focus') ) {
  2980. 				return;
  2981. 			} else if ( (e.ctrl || e.metaKey) && $selected.hasClass('dir') ) {
  2982. 				$selected.find('a').trigger('dblclick');
  2983. 				break;
  2984. 			}
  2985. 			e.preventDefault();
  2986. 			showWarning( 'indexNavigation', 'ArrowDown' );
  2987. 			break;
  2988. 		case 'ArrowLeft':
  2989. 			if ( (e.ctrl || e.metaKey) || (e.ctrl && e.metaKey) ) {
  2990. 				return;
  2991. 			} else if ( $('*[contentEditable="true"]').is(':focus') ) { // Ignore Cmd/Ctrl + arrow or if focused element is content editable
  2992. 				return;
  2993. 			}
  2994. 			if ( (e.altKey && e.shiftKey) || e.altKey && !e.metaKey && !e.ctrlKey ) { // Skip audio 30s/10s: Opt-Shift-Arrow/Opt-Arrow
  2995. 				mediaSkip(e);
  2996. 				return;
  2997. 			} else {
  2998. 				showWarning( 'indexNavigation','ArrowLeft' );
  2999. 			}
  3000. 			break;
  3001. 		case 'ArrowRight':
  3002. 			if ( e.metaKey && !e.altKey && !e.shiftKey && $selected.hasClass('dir') ) { // Open dir with Cmd/Ctrl + Right Arrow
  3003. 				$selected.find('a').trigger('dblclick');
  3004. 				return;
  3005. 			}
  3006. 			if ( (e.ctrl || e.metaKey) || (e.ctrl && e.metaKey) ) { // Ignore Cmd/Ctrl + arrow or if focused element is content editable
  3007. 				return;
  3008. 			} else if ( $('*[contentEditable="true"]').is(':focus') || $selected.hasClass('dir ignore') ) {
  3009. 				return;
  3010. 			}
  3011. 			if ( (e.altKey && e.shiftKey) || e.altKey && !e.metaKey && !e.ctrlKey ) { // Skip audio 30s/10s: Opt-Shift-Arrow/Opt-Arrow
  3012. 				mediaSkip(e);
  3013. 				return;
  3014. 			} else {
  3015. 				showWarning( 'indexNavigation','ArrowRight' );
  3016. 			}
  3017. 			break;
  3018. 		case ' ': // space
  3019. 			if ( $content_pane.hasClass('has_audio') || $content_pane.hasClass('has_video') ) { // Play/pause media (space bar)
  3020. 				e.preventDefault();
  3021. 				playPauseMedia();
  3022. 			} else {
  3023. 				alphaNav(e);
  3024. 			}
  3025. 			break;
  3026. 		case 'Enter': // Open directories (or ignore)
  3027. 			if ( $selected.hasClass('app') && $settings.apps_as_dirs === false ) {
  3028. 				break;
  3029. 			} else {
  3030. 				if ( $selected.hasClass('dir') ) {
  3031. 					$selected.find('a').trigger('dblclick');
  3032. 				} else if ( $selected.hasClass('playing') || $selected.hasClass('video') ) { // content_audio or content_video
  3033. 					playPauseMedia();
  3034. 				} else {
  3035.                     $selected.click();
  3036. 				}
  3037. 			}
  3038. 			break;
  3039. 			// Alphabetical navigation
  3040. 		case 'A': case 'B': case 'C': case 'D': case 'E': case 'F': case 'G': case 'H': case 'I': case 'J': case 'K': case 'L': case 'M': case 'N': case 'O': case 'P': case 'Q': case 'R': case 'S': case 'T': case 'U': case 'V': case 'W': case 'X': case 'Y': case 'Z':
  3041. 		case 'a': case 'b': case 'c':                     case 'f':           case 'h':           case 'j': case 'k': case 'l': case 'm': case 'n':           case 'p': case 'q':           case 's': case 't': case 'u': case 'v':           case 'x': case 'y': case 'z':
  3042. 		case '0': case '1': case '2': case '3': case '4': case '5': case '6': case '7': case '8': case '9':           case '`': case '~': case '!': case '@': case '#': case '$': case '%': case '^': case '&': case '*': case '(': case ')':           case '+': case '[': case ']': case '{': case '}': /*case '\\':*/ case '|': case '/': case '.': case ',': case '?': case '–': case '—': case '\'': case '"': case '“': case '”': case '‘': case '’': case '…': case 'π':
  3043. 		case '∫': case '∂': case 'ƒ': case '©': case '˙': case '∆': case '˚': case 'µ': case '®': case 'ß': case '†': case '√': case '∑': case '≈': case '¥': case 'Ω': case '¡': case '™': case '£': case '¢': case '∞': case '§': case '¶': case '•': case 'ª': case 'º': case '≠':
  3044. 		case '⁄': case '€': case '‹': case '›': case 'fl': case '‡': case '°': case '·': case '‚': case '±': case '¯': case '˘': case '¿':
  3045. 		case 'ı': case '': case '´': case '˝': case 'ˆ': case '': case '˜': case '‰': case 'ˇ': case '¨': case '◊': case '„': case '˛': case '¸':
  3046. 			//            case 'α': case 'β': case 'γ': case 'δ': case 'ε': case 'ζ': case 'η': case 'θ': case 'ι': case 'κ': case 'λ': case 'μ': case 'ν': case 'ξ': case 'ο': case 'π': case 'ρ': case 'ς': case 'σ': case 'τ': case 'υ': case 'φ': case 'χ': case 'ψ': case 'ω': case 'ϑ': case 'ϒ': case 'ϖ':
  3047. 			//            case 'Α': case 'Β': case 'Γ': case 'Δ': case 'Ε': case 'Ζ': case 'Η': case 'Θ': case 'Ι': case 'Κ': case 'Λ': case 'Μ': case 'Ν': case 'Ξ': case 'Ο': case 'Π': case 'Ρ': case 'Σ': case 'Σ': case 'Τ': case 'Υ': case 'Φ': case 'Χ': case 'Ψ': case 'Ω': case 'Θ': case 'ϒ':
  3048. 			if ( !e.metaKey && !e.ctrlKey && !e.altKey ) {
  3049. 				alphaNav(e);
  3050. 			}
  3051. 			break;
  3052. 		case 'd': // Cmd/Ctrl + D: Toggle Details
  3053. 			if ( (navigator.platform.match('Mac') ? e.metaKey && !e.ctrlKey : e.ctrlKey) && !e.shiftKey && !e.altKey ) {
  3054. 				e.preventDefault();
  3055. 				$('#show_details').click();
  3056. 			} else {
  3057. 				alphaNav(e);
  3058. 			}
  3059. 			break;
  3060. 		case 'e': // Cmd/Ctrl + E: Show Text Editor
  3061. 			if ( (navigator.platform.match('Mac') ? e.metaKey && !e.ctrlKey : e.ctrlKey) && !e.shiftKey && !e.altKey ) {
  3062. 				e.preventDefault();
  3063. 				$('#text_editor_row').find('a').click();
  3064. 			} else {
  3065. 				alphaNav(e);
  3066. 			}
  3067. 			break;
  3068. 		case 'g': // Cmd/Ctrl + G: Show image Grid
  3069. 			if ( (navigator.platform.match('Mac') ? e.metaKey && !e.ctrlKey : e.ctrlKey) && !e.shiftKey && !e.altKey ) {
  3070. 				e.preventDefault();
  3071. 				$('#grid_btn').click();
  3072. 			} else {
  3073. 				alphaNav(e);
  3074. 			}
  3075. 			break;
  3076. 		case 'i': // Cmd/Ctrl + I: Toggle Invisibles
  3077. 			if ( (navigator.platform.match('Mac') ? e.metaKey && !e.ctrlKey : e.ctrlKey) && !e.shiftKey && !e.altKey ) {
  3078. 				e.preventDefault();
  3079. 				$('#show_invisibles').find('input').click();
  3080. 			} else {
  3081. 				alphaNav(e);
  3082. 			}
  3083. 			break;
  3084. 		case 'o': // Cmd/Ctrl + Shift + O: Open selected item in new window
  3085. 			if ( (navigator.platform.match('Mac') ? e.metaKey && !e.ctrlKey : e.ctrlKey) && e.shiftKey && !e.altKey ) {
  3086. 				window.open( thisLink($selected_file()) );
  3087. 			} else {
  3088. 				alphaNav(e);
  3089. 			}
  3090. 			break;
  3091. 		case 'r': // Cmd/Ctrl + Shift + R: Refresh
  3092. 			if ( (navigator.platform.match('Mac') ? e.metaKey && !e.ctrlKey : e.ctrlKey) && !e.shiftKey && !e.altKey ) {
  3093. 				e.preventDefault();
  3094. 				$('#reload_btn').click();
  3095. 			} else {
  3096. 				alphaNav(e);
  3097. 			}
  3098. 			break;
  3099. 		case 'w': // Close content pane if Close button visible with Cmd/Crtl + W
  3100. 			if ( (navigator.platform.match('Mac') ? e.metaKey && !e.ctrlKey : e.ctrlKey) && !e.shiftKey && !e.altKey ) {
  3101. 				if ( $content_pane.attr('class').indexOf('has_') > -1 || $('#toggle_info').hasClass('selected') || $body.hasClass('has_playlist') ) {
  3102. 					e.preventDefault();
  3103. 					$('#close_btn').click();
  3104. 				}
  3105. 			} else {
  3106. 				alphaNav(e);
  3107. 			}
  3108. 			break;
  3109. 		case '\\':
  3110. 			if ( (navigator.platform.match('Mac') ? e.metaKey && !e.ctrlKey : e.ctrlKey) && !e.shiftKey && !e.altKey ) {
  3111. 				e.preventDefault();
  3112. 				$('#toggle_split_view').click();
  3113. 			} else {
  3114. 				alphaNav(e);
  3115. 			}
  3116. 			break;
  3117. 		case '=':
  3118. 			if ( (navigator.platform.match('Mac') ? e.metaKey && !e.ctrlKey : e.ctrlKey) && !e.shiftKey && !e.altKey ) {
  3119. 				e.preventDefault();
  3120. 				$('#increase').click();
  3121. 			} else {
  3122. 				alphaNav(e);
  3123. 			}
  3124. 			break;
  3125. 		case '-':
  3126. 			if ( (navigator.platform.match('Mac') ? e.metaKey && !e.ctrlKey : e.ctrlKey) && !e.shiftKey && !e.altKey ) {
  3127. 				e.preventDefault();
  3128. 				$('#decrease').click();
  3129. 			} else {
  3130. 				alphaNav(e);
  3131. 			}
  3132. 			break;
  3133. 		case 'tab':
  3134. 			break;
  3135. 		case 'Escape':
  3136. 			$('*:focus').blur();
  3137. 			break;
  3138. 		} // end switch
  3139. 	});
  3140. 	// ***** END KEYBOARD EVENTS ***** //
  3141.  
  3142. 	// ***** GRID SETUP ***** //
  3143. 	// Create Font Grid Items
  3144. 	function fontGridItems() {
  3145. 		let $font_grid_items_arr = [];
  3146. 		let $font_files = $dir_list_body.find('.font');
  3147. 		let fontGridStyles = $font_grid_styles.sheet;
  3148. 		for ( let i = 0; i < $font_files.length; i++ ) {
  3149. 			let newGridItem = showFont($font_files[i],true,fontGridStyles);
  3150. 			$font_grid_items_arr.push( newGridItem );
  3151. 		}
  3152. 		return $font_grid_items_arr;
  3153. 	}
  3154. 	// Create Image Grid Items
  3155. 	function imageGridItems() {
  3156. 		let $image_grid_items_arr = [];
  3157. 		let $image_files = $dir_list_body.find('.image:not(.ignore)');
  3158. 		for ( let i = 0; i < $image_files.length; i++ ) {
  3159.             const id = $image_files.eq(i).attr('id');
  3160. 			const $this_link = thisLink($image_files[i]);
  3161. 			const exts = $row_types.image.filter( ext => $.inArray(ext, $row_settings.ignore) == -1 ); // decide which image files can be displayed
  3162. 			const $title_name = $this_link.slice($this_link.lastIndexOf('/') + 1);
  3163. 			if ( $.inArray( thisExt($image_files[i]), exts ) > -1 ) { // if this row file ext is in the image extension array
  3164. 				let item = '<div class="image_grid_item" data-ID="'+ id +'" data-index="'+ i +'"><a href="'+$this_link+'"><img src="'+$this_link+'" title="'+$title_name+'" loading="lazy" /></a></div>';
  3165. 				$image_grid_items_arr.push( item );
  3166. 			}
  3167. 		}
  3168. 		return $image_grid_items_arr;
  3169. 	}
  3170. 	// Make Grids
  3171. 	function makeGrids(id) {
  3172. 		closeGrid();
  3173.         let $title = $('#title');
  3174. 		$content_pane.removeClass('has_hidden_grid').addClass('has_grid');
  3175. 		if ( id === 'show_font_grid' || !$body.hasClass('has_images') ) { // only show font grid
  3176. 			$title.removeClass().addClass('font_grid');
  3177. 			$content_grid.addClass('has_font_grid');
  3178. 			$content_grid.append( fontGridItems() );
  3179. 		} else if ( id === 'show_image_grid' || !$body.hasClass('has_fonts') ) { // only show image grid
  3180. 			$title.removeClass().addClass('image_grid');
  3181. 			$content_grid.addClass('has_image_grid');
  3182. 			$content_grid.append( imageGridItems() );
  3183. 		} else { // show grid of both images and fonts
  3184. 			$title.removeClass();
  3185. 			if ( $body.hasClass() ) { $content_grid.addClass('has_image_grid'); } else { $content_grid.addClass('has_grid'); }
  3186. 			$content_grid.append( imageGridItems(), fontGridItems() );
  3187. 		}
  3188. 	}
  3189. 	// Click grid button
  3190. 	$('#sidebar_header').on('click', '#grid_btn, #show_font_grid, #show_image_grid', function(e) {
  3191. 		e.stopPropagation();
  3192.         // if ( $content_pane.hasClass('has_grid') && $(this).attr('id') === 'grid_btn' ) {
  3193.             // closeGrid();
  3194.         // } else {
  3195.         $('#grid_btn').addClass('has_grid');
  3196.         makeGrids($(this).attr('id'));
  3197.         showGrid();
  3198.         // }
  3199.     });
  3200.  
  3201. 	// ***** SCALE PREVIEWED IMAGES & FONTS ***** //
  3202. 	// Scale Fonts
  3203. 	function scaleFonts(e, incr, id) {
  3204. 		const $em = parseInt(getComputedStyle(document.body).fontSize); // pts/em
  3205. 		const getFontSize = function(el) { return parseFloat(el.css('font-size')); };
  3206. 		if ( id === 'decrease' ) { incr = 1/incr; }
  3207. 		if ( $content_pane.hasClass('has_grid') && ( $content_grid.hasClass('has_font_grid') || $content_grid.hasClass('has_grid') ) ) {
  3208. 			$content_grid.css({'font-size':( getFontSize($content_grid)/$em * incr ) +'em'});
  3209. 			return;
  3210. 		}
  3211. 		if ( $content_pane.hasClass('has_font') ) {
  3212. 			$content_font.css({'font-size':( getFontSize($content_font)/$em * incr ) +'em'});
  3213. 			return;
  3214. 		}
  3215.         scrollThis('content_container','content_font')
  3216. 	}
  3217.     function scaleGridImages(incr,id) {
  3218.         if ( id === 'decrease' ) { incr = 1/incr; }
  3219.         const $imageGridItem = $('.image_grid_item img');
  3220. 			let $image_grid_item_width = Number.parseFloat( $imageGridItem.width(),10) * incr;
  3221. 			let $image_grid_item_height = Number.parseFloat( $imageGridItem.height(),10) * incr;
  3222. 			let $image_grid_item_maxwidth = Number.parseFloat( $imageGridItem.css('maxWidth'),10) * incr;
  3223. 			let $image_grid_item_maxheight = Number.parseFloat( $imageGridItem.css('maxHeight'),10) * incr;
  3224. 			// prevent reducing grid image size on first scale click:
  3225. 			if ( $image_grid_item_width < $image_grid_item_maxwidth ) { $image_grid_item_width = $image_grid_item_maxwidth; }
  3226. 			if ( $image_grid_item_height < $image_grid_item_maxheight ) { $image_grid_item_height = $image_grid_item_maxheight; }
  3227. 			// set grid properties
  3228. 			$content_grid.css({'grid-template-columns':'repeat(auto-fill, minmax('+ ($image_grid_item_width +16) +'px, auto ) )'});
  3229. 			$content_grid.find('img').css({'max-width':( $image_grid_item_width ) +'px', 'max-height':( $image_grid_item_height ) +'px'});
  3230. 			return;
  3231.     }
  3232.     // Zoom Images on click
  3233.     function scaleImages(e,incr,id) {
  3234.         const $this_image = $content_image.find('img');
  3235.         const $this_link = $this_image.attr('src');
  3236.         const $content_container = $('#content_container');
  3237.         let CC_width = function() { return Math.round($content_container.width()) };
  3238.         let CC_height = function() { return Math.round($content_container.height()) };
  3239.         const $this_width = Math.round($this_image.width());
  3240.         const $this_height = Math.round($this_image.height());
  3241.         // scale grid images
  3242.         if ( $content_pane.hasClass('has_grid') && ( $content_grid.hasClass('has_image_grid') || $content_grid.hasClass('has_grid') ) ) {
  3243.             scaleGridImages(incr,id);
  3244.         } else { // scale single images
  3245.             getDimensions( $this_link, function( width, height ) {
  3246.                 const $this_outer_width = Math.round($this_image.outerWidth(true));
  3247.                 // scale images by increment
  3248.                 if ( incr !== undefined && id !== undefined ) {
  3249.                     $content_pane.addClass('has_zoom_image').removeClass('has_image'); // remove zoom classes in case window resized after zoom
  3250.                     if ( id === 'increase' ) {// && $this_width < width && $this_height < height) {
  3251.                         $content_image.add($this_image).css({'width':$this_width * incr, 'height': 'auto', 'max-width':'none', 'max-height':'none' });
  3252.                     }
  3253.                     if ( id === 'decrease' && ( $this_width >= 1 && $this_height >= 1 ) ) {
  3254.                         $content_image.add($this_image).css({'width':$this_width / incr, 'height': 'auto', 'max-width':'none', 'max-height':'none' });
  3255.                     }
  3256.                     // keep images centered when scaling
  3257.                     if ( Math.round($this_image.width()) >= CC_width() ) {
  3258.                         $content_container.scrollLeft( ( Math.round( ( $this_image.outerWidth(true) ) - CC_width() ) )/2 ) ;
  3259.                     }
  3260.                     if ( Math.round($this_image.height()) <= CC_height() ) {
  3261.                         $content_image.css({ 'top':( CC_height() - Math.round( $this_image.height() ) )/2 });
  3262.                     } else {
  3263.                         $content_image.css({ 'top':0 });
  3264.                         $content_container.scrollTop( ( Math.round($this_image.outerHeight(true)) - CC_height())/2 ) ;
  3265.                     }
  3266.                 // else zoom single image on click
  3267.                 } else {
  3268.                     $content_image.removeAttr('style').find('img').removeAttr('style');
  3269.                     setContentHeight(); // needed to ensure current element positions/dimensions are set (for some reason; w/o, img_offset, etc. are inaccurate)
  3270.                     // but don't zoom small images:
  3271.                     if ( width <= CC_width() && height <= CC_height() ) {
  3272.                         $content_pane.removeClass('has_zoom_image').addClass('has_image');
  3273.                         $content_image.css({'top':$('#content_header').height()}).find('img').css({'cursor':'pointer'});
  3274.                         return;
  3275.                     }
  3276.  
  3277.                     const $CC_offset = $content_container.offset();
  3278.                     const $img_offset = $this_image.offset();
  3279.                     // x,y coordinates of zoom click as percentage of image width/height
  3280.                     const percentX = (e.pageX - $img_offset.left)/$this_width;
  3281.                     const percentY = (e.pageY - $img_offset.top)/$this_height;
  3282.                     // calculate scroll by pixel coordinates of full-size image - click coordinates and content_container offsets
  3283.                     const scrollX = (width * percentX) - e.pageX + $CC_offset.left;
  3284.                     const scrollY = (height * percentY) - e.pageY + $CC_offset.top;
  3285.                     $content_pane.toggleClass('has_image has_zoom_image');
  3286.                     if ( width > CC_width() && height < CC_height() || $this_width < CC_width() ) {
  3287.                         $content_container.scrollLeft( scrollX );
  3288.                         $content_image.css({ 'top':( CC_height() - Math.round( $this_image.height() ) )/2 });
  3289.                     }
  3290.                     if ( width < CC_width() && height > CC_height() ) {
  3291.                         $content_image.css({ 'top': 0 });
  3292.                         $content_container.scrollTop( scrollY );
  3293.                     }
  3294.                     if ( width > CC_width() && height > CC_height() ) {
  3295.                         $content_image.css({ 'top': 0 });
  3296.                         $content_container.scrollLeft( scrollX ) ;
  3297.                         $content_container.scrollTop( scrollY );
  3298.                     }
  3299.                     if ( $content_pane.hasClass('has_image') ) {
  3300.                         $content_image.css({'top':$('#content_header').height() });
  3301.                     }
  3302.                 }
  3303.                 setDimensions($('.selected.image,.loaded.image'));
  3304.             });
  3305.         }
  3306.     }
  3307.  
  3308.     // Soom single image on click
  3309. 	$content_image.on('click','img', function(e) {
  3310.         scaleImages(e);
  3311.     });
  3312. 	// Scale Fonts and Images
  3313. 	function scalePreviewItems(e,id) { // combine scaling into one function
  3314. 		scaleImages(e, 1.125, id );
  3315. 		scaleFonts(e, 1.125, id );
  3316. 	}
  3317. 	// Scale Button
  3318. 	$('#scale').on('click','span',function(e) {
  3319. 		e.preventDefault();
  3320. 		e.stopPropagation();
  3321. 		let id = $(this).attr('id');
  3322. 		scalePreviewItems(e,id);
  3323. 	});
  3324. 	// ***** END SCALE PREVIEW ITEMS ***** //
  3325.  
  3326.  
  3327. 	// ***** AUDIO CONTENT ***** //
  3328. 	// Update Playlist
  3329. 	function updatePlaylist() {
  3330. 		let playlist = [];
  3331. 		$audio_files.not('.unchecked').each(function() {
  3332. 			playlist.push( thisID( $(this) ) );
  3333. 		});
  3334. 		return playlist;
  3335. 	}
  3336. 	// Randomize Shuffle List
  3337. 	function shuffleArray(array) {
  3338. 		for ( let i = array.length - 1; i > 0; i-- ) {
  3339. 			const j = Math.floor(Math.random() * (i + 1));
  3340. 			[array[i], array[j]] = [array[j], array[i]];
  3341. 		}
  3342. 		return array;
  3343. 	}
  3344.     // Attach Shuffle List data to $audio_player
  3345. 	function updateShuffleList(id) {
  3346. 		if ( !$body.hasClass('shuffle_audio') ) {
  3347. 			return;
  3348. 		} else if ( id !== undefined ) { // don't include .playing and .unchecked track in shufflelist
  3349. 			let shuffleList = $audio_player.data('shufflelist');
  3350. 			if ( $(document.getElementById(id)).hasClass('unchecked') || $(document.getElementById(id)).hasClass('playing') ) {
  3351. 				shuffleList.splice(shuffleList.indexOf(id), 1);
  3352. 				$audio_player.data('shufflelist',shuffleList);
  3353. 			} else {
  3354. 				shuffleList.push(id);
  3355. 				shuffleList = shuffleArray( shuffleList );
  3356. 			}
  3357. 		} else {
  3358. 			let shuffleList = shuffleArray( updatePlaylist() );
  3359. 			$audio_player.data('shufflelist',shuffleList);
  3360. 		}
  3361.     }
  3362. 	// Check/Uncheck Audio/Video Files
  3363. 	function toggleChecked(e) {
  3364. 		e.stopPropagation();
  3365. 		$(this).blur();
  3366. 		thisRow(this).toggleClass('unchecked');
  3367. 		updateShuffleList(thisRow(this).attr('id'));
  3368. 	}
  3369. 	$media_files.on('click','input', toggleChecked );
  3370. 	// Check/Uncheck all Audio/Video Files
  3371. 	function toggleAllChecked(e) {
  3372. 		e.stopPropagation();
  3373. 		$dir_list_row.find('input').trigger('click');
  3374. 		updateShuffleList();
  3375. 	}
  3376. 	$dir_list.find('#play_toggle').on('click', toggleAllChecked );
  3377.  
  3378. 	// Is Playing
  3379. 	function isPlaying(el) {
  3380. 		return (el !== undefined && el.get(0).currentTime > 0 && !el.get(0).paused && !el.get(0).ended); // returns true if all conditions are true
  3381. 	}
  3382. 	// Play Media
  3383. 	function playMedia(task) {
  3384. 		if ( $playing_file().hasClass('audio') ) { $audio_player.trigger(task); } else { $content_video.trigger(task); }
  3385. 	}
  3386. 	// Skip media tracks +/-10/30 seconds
  3387. 	function mediaSkip(e) {
  3388. 		const factor = ( e.key === 'ArrowLeft' ? -1 : 1 ); // forward or backward?
  3389. 		const skip = ( e.altKey && e.shiftKey ? 30 : e.altKey ? 10 : null ); // 30s or 10s?
  3390. 		const $player = ( $playing_file().hasClass('audio') ? $audio_player : $content_video ); // audio or video?
  3391. 		const time = $player.prop('currentTime'); // current time
  3392. 		$player.prop('currentTime', time + factor*(skip)); // set time
  3393. 	}
  3394.  
  3395. 	// Play/Pause Audio/Video
  3396. 	function playPauseMedia() {
  3397. 		let $player = ( $content_pane.hasClass('has_audio') ? $('#audio') : $('#content_video') );
  3398. 		if ( isPlaying( $player ) ) { $player.trigger('pause'); } else { $player.trigger('play'); }
  3399. 	}
  3400. 	// Play Next Track
  3401. 	function playPrevNextTrackBtn(el) {
  3402. 		let key = ( el.attr('id') === 'prev_track' ? 'ArrowLeft' : 'ArrowRight' );
  3403. 		playPrevNextTrack(key);
  3404. 	}
  3405. 	// Prev/Next Track buttons
  3406. 	$('.prev_next_track_btn').on( 'click', function() { playPrevNextTrackBtn( $(this) ); });
  3407.  
  3408. 	// Toggle Shuffle Play
  3409. 	$('#checkbox_div').on('click','#shuffle', function() {
  3410. 		$body.toggleClass('shuffle_audio');
  3411. 		updateShuffleList();
  3412. 		if ( $body.hasClass('shuffle_audio') && $('.playing').length === 0 ) {
  3413. 			playPrevNextTrack('ArrowRight');
  3414. 		} else {
  3415. 			// do nothing: i.e., allow current track to continue playing
  3416. 		}
  3417. 	});
  3418. 	// Toggle Loop Play
  3419. 	$('#checkbox_div').on('click','#loop', function() {
  3420. 		$body.toggleClass('loop_audio');
  3421. 		document.getElementById('audio').toggleAttribute('loop');
  3422. 	});
  3423.  
  3424. 	// Initialize Audio
  3425. 	function initMedia() {
  3426. 		$('#audio, #content_video').on('ended', function() {
  3427. 			playPrevNextTrack('ArrowRight');
  3428. 			scrollThis('tbody','playing');
  3429. 		});
  3430. 	}
  3431. 	// ***** END AUDIO PLAYBACK ***** //
  3432.  
  3433. 	// ***** IFRAME SETUP ***** //
  3434. 	// For directory display or editable text files
  3435. 	// If row is a directory, set up iFrameDirUI(); if it's an editable text document, set up iFrameTextEditingUI().
  3436. 	function setUpIframeUI(bool) {
  3437. 		if ( window.self !== window.top ) {
  3438. 			const $textFiles = $row_types.markdown.concat($row_types.text, $row_types.code); // define which files are editable
  3439. 			// if selected index item is a directory, set up the directory UI....
  3440. 			if ( window.location.pathname.endsWith('/') ) {
  3441. 				iFrameDirUI( $('#iframe_body') );
  3442. 			}
  3443. 			if ( JSON.parse(bool) === true && $textFiles.includes( window.location.pathname.slice( window.location.pathname.lastIndexOf('.') + 1 ) ) ) {
  3444. 				$iFrame_head.append('<style>'+ $text_editing_style_rules +'</style>');
  3445. 				$iFrame_head.append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css"></link>');
  3446.                 let splitClass = ( getQuery('split_view') === 'true' ? 'split_view' : '' );
  3447. 				let viewClass = getQuery('default_text_view');
  3448.                 let warnings = '<div id="warnings"><h3>Warning:</h3><p id="warning_unsaved">You have unsaved changes.</p><p id="warning_clear">Are you sure you want to clear all your text?</p><p id="warning_local">Can\'t load local directories or files from non-local web pages. Use your browser\'s bookmarks or enter the URL manually.</p><div><button id="warning_ignore_btn">Don\'t Save</button><button id="warning_cancel_btn" >Cancel</button><button id="warning_clear_btn">Clear</button><button id="warning_save_btn">Save</button><button id="warning_ok_btn">OK</button></div></div>';
  3449.  
  3450. 				TextEditing( '#iframe_body' );
  3451. 				$('#iframe_body').removeClass().addClass(splitClass).addClass(viewClass).prepend(warnings);
  3452. 				$('#content_source').removeClass().prop('disabled',false);
  3453. 			}
  3454. 		}
  3455. 	}
  3456. 	// IFRAME DIRECTORY Prep
  3457. 	function iFrameDirUI(el) { // el = iframeBody
  3458. 		let parentLink = decodeURIComponentSafe(window.location.pathname);
  3459.             parentLink = parentLink.split('/').slice(0,-2).join('/') + window.location.search;
  3460.         let queryPrefs = window.location.search;
  3461.             queryPrefs = queryPrefs.slice(1).split('&');
  3462.             queryPrefs = queryPrefs.map(x => x.split('='));
  3463.         let prefs = Object.fromEntries(queryPrefs); // convert query array of arrays to object
  3464.         let sortPref = prefs.sort_by; // sort determined by parent's current sorting pref
  3465.         let numbersPref = prefs.show_numbers;
  3466.         let viewSourcePref = prefs.view_source;
  3467.         let iconsPref = prefs.use_custom_icons;
  3468.         if ( viewSourcePref === 'true' ) {
  3469.             return; // show raw directory index
  3470.         } else {
  3471.             if ( numbersPref === 'true' ) {
  3472.                 $('#iframe_body').addClass('show_numbers');
  3473.             }
  3474.             if ( iconsPref === 'true' ) {
  3475.                 $('#iframe_body').addClass('use_custom_icons');
  3476.             }
  3477.             $iFrame_head.find('style').remove();
  3478.             $iFrame_head.append('<style>'+ $iframe_styles +'</style>');
  3479.  
  3480.             const parentLinkCell = '<tr id="parent"><th colspan=4><a href="'+ parentLink +'">Parent Directory</a></th></tr>';
  3481.             const sortingRow = '<tr><th class="sorting" id="sort_by_name" colspan="2"><span>Name</span></th><th class="sorting" id="sort_by_default" colspan="2"><span>Default</span></th></tr><tr id="sorting_row"><th class="sorting" id="sort_by_ext"><span>Ext</span></th><th class="sorting" id="sort_by_size"><span>Size</span></th><th class="sorting" id="sort_by_date"><span>Date</span></th><th class="sorting" id="sort_by_kind"><span>Kind</span></th></tr>';
  3482.             const preppedIndex = makeNewIndex($('#iframe_body'),sortPref);
  3483.             const iFrameTable = $('<table id="dir_list"><thead id="thead">'+ parentLinkCell + sortingRow +'</thead><tbody id="tbody"></tbody></table>');
  3484.             // append prepped index
  3485.             el.empty().append(iFrameTable).find('tbody').append(preppedIndex);
  3486.             $('#iframe_body').find('#tbody').css({'top':$('#iframe_body').find('#thead').height() +'px'});
  3487.             $('#iframe_body').data('sort_direction',1).find('#dir_list').addClass('sort_by_'+ sortPref); // initial directory sort
  3488.         }
  3489.     }
  3490.  
  3491.     // IFRAME Directory sorting
  3492.     $('#iframe_body').on('click','.sorting', function() {
  3493.         const $dir_list_row = $('#iframe_body').find('#tbody').find('tr');
  3494.         const id = $(this).attr('id');
  3495.         if ( $('#iframe_body').data('sorting') !== id ) { // if clicking sorting item for the first time
  3496.             $('#iframe_body').data('sorting',id);
  3497.             $('#iframe_body').data('sorting',id).data('sort_direction', 1 );
  3498.             $(this).removeClass('down');
  3499.         } else { // clicking the same sorting item again -- reverse sort order
  3500.             $('#iframe_body').data('sort_direction', $('#iframe_body').data('sort_direction') * -1 );
  3501.             $(this).toggleClass('down');
  3502.         }
  3503.         const sort_direction = $('#iframe_body').data('sort_direction');
  3504. 		const $sorted_index = sortDirList( $dir_list_row, id, sort_direction );
  3505.         $('#iframe_body').find('#dir_list').removeClass().addClass(id).find('#tbody').empty().append($sorted_index);
  3506.     });
  3507.     // ensure that iframe directory links include query string
  3508.     $('#iframe_body').on('click','#dir_list tr.dir a', function(e) {
  3509.         e.preventDefault();
  3510.         let link = $(this).attr('href') + window.location.search;
  3511.         window.location = link;
  3512.     });
  3513.     //***** TEXT EDITING PANE *****//
  3514. 	function textEditorUI() { //
  3515. 		if ( $content_text.children().length === 0 ) { // only add UI once
  3516. 			$body.addClass('has_text');
  3517. 			$content_pane.removeClass('has_dir');
  3518. 			if ( $content_pane.hasClass('has_grid') ) { $content_pane.toggleClass('has_grid has_hidden_grid'); }
  3519. 			TextEditing('#content_text');
  3520. 			$content_text.find('#content_preview').html($content_text.find('#content_source').val()); // make sure any source text is also previewed.
  3521. 			if ( getQuery('split_view') === 'true' || getQuery('default_text_view') === 'source_text' ) { $content_text.find('#content_source').focus(); }
  3522. 		} else { // show text editor
  3523.             if ( !$body.hasClass('has_text') ) {
  3524.                 $body.addClass('has_text');
  3525.             } else if ( $body.hasClass('has_text') || $body.hasClass('has_hidden_text') ) {
  3526.                 $body.toggleClass('has_text has_hidden_text');
  3527.             }
  3528. 			if ( $content_pane.hasClass('has_grid') ) { $content_pane.toggleClass('has_grid has_hidden_grid'); }
  3529. 			if ( $content_pane.hasClass('has_hidden_grid ') ) { $content_pane.toggleClass('has_grid has_hidden_grid'); }
  3530. 		}
  3531. 		setContentTitle();
  3532. 		setContentHeight();
  3533. 	}
  3534. 	// show text editor pane
  3535. 	$('#text_editor, #text_editor_row').on('click', function(e) {
  3536. 		e.preventDefault();
  3537. 		textEditorUI();
  3538. 	});
  3539.  
  3540. 	// Main Text Editing Function
  3541. 	function TextEditing(id) { // container_el = $content_text or $content_iframe body
  3542.         let container_el = $(id);
  3543. 		const $srctxt = ( container_el.find('> pre').length ? container_el.find('> pre').text() : container_el.html() ); // source text equals file content or nothing
  3544.  
  3545. 		MDbuildUI(id);
  3546.  
  3547. 		const $toolbar = container_el.find('#toolbar');
  3548. 		const $source = container_el.find('#content_source');
  3549. 		const $preview = container_el.find('#content_preview');
  3550. 		const $MDhandle = container_el.find('#text_editing_handle');
  3551.  
  3552. 		MDsetupTextEditingUI(id,$srctxt);
  3553. 		// Toolbar button functions
  3554. 		$toolbar.on('click','li,span',function(e) {
  3555. 			e.stopPropagation();
  3556. 			MDtoolBarFunctions($(this).attr('id'));
  3557. 		});
  3558. 		$(window).on('resize',function() {
  3559. 			$source.add($preview).add($MDhandle).attr('style','');
  3560. 		});
  3561. 		$('body#top').on('input', '#content_source', function() {
  3562. 			$source.add($preview).css({'height':$('#main_content').height() - $('#content_header').height() - 32 });
  3563. 		});
  3564.  
  3565. 		// Resize
  3566. 		$MDhandle.on('mousedown', function(e) {
  3567. 			e.stopPropagation();
  3568. 			MDresizeSplit($MDhandle,$source,$preview);
  3569. 		});
  3570. 		// Click labels to toggle checkboxes
  3571. 		$preview.add($toolbar).on('click','label', function(e) {
  3572. 			e.stopPropagation();
  3573. 			$(this).siblings('input').click();
  3574. 		});
  3575. 		// Sync scroll
  3576. 		$source.on('scroll',function() { MDsyncScroll(this); });
  3577. 		$preview.on('scroll',function() { MDsyncScroll(this); });
  3578.  
  3579. 		// TEXT EDITING
  3580. 		// Generate Preview
  3581. 		const $source_text = ( $source.length === 0 ? '' : $source.val() );
  3582. 		MDmarkdown( $source_text, $preview );
  3583.  
  3584. 		// Live preview update, and set edited classes for unsaved warning
  3585. 		$source.on('input', function() {
  3586. 			if ( !$('body').hasClass('edited') && $(this).parents('#top').length === 1 ) {
  3587. 				$('body#top').addClass('edited');
  3588. 			}
  3589. 			if ( !$('body').hasClass('edited') && $(this).parents('#iframe_body').length === 1 ) {
  3590. 				$('body#iframeBody').addClass('edited');
  3591. 				sendMessage('top','iframe_edited','','');
  3592. 			}
  3593. 			MDlivePreview($source,$preview);
  3594. 		});
  3595. 		// Checklists
  3596. 		MDsetChecklistClass();
  3597. 		// Live checkboxes
  3598. 		$preview.on('click','.checklist input',function(e) {
  3599. 			e.stopPropagation();
  3600. 			MDliveCheckBoxes($(this),$source,$preview);
  3601. 		});
  3602. 		// Preview TOC click navigation
  3603. 		$preview.on('click','.table-of-contents a',function(e) {
  3604. 			e.preventDefault();
  3605. 			MDtocClick($(this),$preview);
  3606. 		});
  3607. 		$preview.on('click','.uplink',function(e) {
  3608. 			e.stopPropagation();
  3609. 			MDheaderClick($preview);
  3610. 		});
  3611. 	}
  3612. 	///// END MAIN MD FUNCTION
  3613.  
  3614. 	// MARKDOWN Functions
  3615. 	// MD Build UI
  3616. 	function MDbuildUI(id) {
  3617. 		const toggleSplitBtn = $('<li id="toggle_split" title="Toggle Split"></li>');
  3618. 		const syncScrollEl = $('<li id="sync_scroll"><input name="sync_scroll" type="checkbox"><label for="sync_scroll">Sync Scroll</label></li>');
  3619. 		const toggleSrcBtn = $('<li id="show_source" title="Show Source"></li>');
  3620. 		const togglePreviewBtn = $('<li id="show_preview" title="Show Preview"></li>');
  3621. 		const clearTextBtn = $('<li id="clear_text" title="Clear Text">Clear</li>');
  3622. 		const saveBtn = $('<li id="save_btn" title=""><div><span id="save_text"><a target="_blank">Save Source</a></span><span id="save_HTML">Save HTML</span></div></li>');
  3623. 		const buttonsCont = $('<ul id="toolbar"></ul>');
  3624. 		      buttonsCont.append(toggleSrcBtn, togglePreviewBtn, toggleSplitBtn, syncScrollEl, saveBtn, clearTextBtn);
  3625. 		const textEditingUI = '<textarea id="content_source"></textarea><div id="content_preview" class="markdown-body"></div><div id="text_editing_handle"></div>';
  3626. 		// append the UI to the container_el
  3627. 		$(id).prepend(buttonsCont).append(textEditingUI);
  3628. 	}
  3629.  
  3630. 	// MD Set up UI
  3631. 	function MDsetupTextEditingUI(id,sourceText) {
  3632. 		$(id).find('pre').first().remove();
  3633. 		$(id).find('#content_source').val(sourceText); // set source text from pre
  3634. 		if ( getQuery('split_view') === 'true' ) { $('body').addClass('split_view'); } else { $('body').removeClass('split_view'); }
  3635. 		if ( getQuery('default_text_view') === 'preview' ) { $('body').addClass('preview_text').removeClass('source_text'); } else { $('body').addClass('source_text').removeClass('preview_text'); }
  3636. 		if ( getQuery('sync_scroll') === 'true' ) { $('#sync_scroll input').prop({checked:true}); }
  3637. 	}
  3638. 	// MD UI Buttons functions
  3639. 	function MDtoolBarFunctions(id) {
  3640. 		let $thisFileName;
  3641. 		let container_el = $(getElById(id)).closest('body');
  3642. 		let sourceEl = container_el.find('#content_source');
  3643. 		let previewEl = container_el.find('#content_preview');
  3644. 		if ( $body.hasClass('has_text') ) {
  3645. 			$thisFileName = 'untitled';
  3646. 		} else {
  3647. 			$thisFileName = decodeURI(window.location.pathname.slice(window.location.pathname.lastIndexOf('/') + 1));
  3648. 		}
  3649. 		const $saveHTMLOpen = '<!DOCTYPE html><html><head><title></title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css"></link><style></style><script></script></head><body lang="en" class="markdown-body">';
  3650. 		const $saveHTMLClose = '</body></html>';
  3651. 		switch (id) {
  3652.             case 'toggle_split':
  3653.                 $('body').toggleClass('split_view').find('#content_source,#content_preview,#text_editing_handle').attr('style','');
  3654.                 if ( container_el.hasClass('source_text') ) {
  3655.                     sourceEl.focus();
  3656.                     document.getElementById('content_source').setSelectionRange(0,0);
  3657.                 }
  3658.                 break;
  3659.             case 'show_source':
  3660.                 container_el.removeClass('split_view preview_text').addClass('source_text').find('#content_source,#content_preview,#text_editing_handle').attr('style',''); // remove styles in case split has been resized
  3661.                 sourceEl.css({'width':'100%'}).focus();
  3662.                 document.getElementById('content_source').setSelectionRange(0,0);
  3663.                 break;
  3664.             case 'show_preview':
  3665.                 container_el.removeClass('split_view source_text').addClass('preview_text').find('#content_source,#content_preview,#text_editing_handle').attr('style','');
  3666.                 break;
  3667.             case 'clear_text':
  3668.                 container_el.addClass('has_warning').find('#warnings').removeClass().addClass('clear');
  3669.                 break;
  3670.             case 'save_text':
  3671.                 saveMD( $thisFileName, sourceEl.val() );
  3672.                 break;
  3673.             case 'save_HTML':
  3674.                 saveMD( $thisFileName.slice(0,$thisFileName.lastIndexOf('.') + 1) + 'html', $saveHTMLOpen + MDprepHTML(previewEl.html()) + $saveHTMLClose );
  3675.                 break;
  3676.         }
  3677. 	}
  3678. 	// MD Custom pre- and post-processing for text.
  3679. 	function MDaddHeaderIDs(match, p1, p2, p3, offset, string) { // create header ids for TOC
  3680. 		return '<h'+ p1 +' id="'+ p3.toLowerCase().replace(/\s/g,'-') +'" ' + p2 +'>'+ p3;
  3681. 	}
  3682. 	function MDcustomPreProcess(src) {
  3683. 		return src; // we're not doing anything here just yet...
  3684. 	}
  3685. 	function MDcustomPostProcess(html) {
  3686. 		html = html.replace(/<(p|li|dt|dd)>\-*\s*\[\s*x\s*\]\s*(.+?)<\/(p|li|dt|dd)>$/gm,'<$1 class="checklist"><input type="checkbox" checked><label>$2</label></$3>') // checkboxes in p,li,dt,dd
  3687. 			.replace(/<(p|li|dt|dd)>-*\s*\[\s{1,}\]\s*(.+?)<\/(p|li|dt|dd)>$/gm,'<$1 class="checklist"><input type="checkbox"><label>$2</label></$3>') // checkboxes
  3688. 		//                .replace(/<li><p class="checklist">"/g,'<li class="checklist"><p>')
  3689. 			.replace(/^<h(\d)([^>]*)>([^<]+)/gm, MDaddHeaderIDs) // add header IDs;
  3690. 			.replace(/<\/h(\d)>/g,'<span class="uplink">&uarr;</span></h$1>');
  3691. 		return html;
  3692. 	}
  3693. 	//MD Render markdown from preprocessed source text
  3694. 	function MDmarkdown(sourceText,previewEl) {
  3695. 		const MDit = window.markdownit({linkify:false,typography:false,html:true})
  3696. 			.use(window.markdownitMultimdTable, {enableMultilineRows: true})
  3697. 			.use(window.markdownitSub)
  3698. 			.use(window.markdownitSup)
  3699. 			.use(window.markdownitFootnote)
  3700. 			.use(window.markdownitCentertext)
  3701. 			.use(window.markdownitDeflist)
  3702. 			.use(window.markdownitTocDoneRight)
  3703.         ;
  3704. 		let MDpreview = MDit.render( MDcustomPreProcess( sourceText ) );
  3705. 		previewEl.html( MDcustomPostProcess( MDpreview ) ); // set previewed html
  3706. 	}
  3707. 	// MD Live preview, add edited warning
  3708. 	function MDlivePreview(sourceEl,previewEl) {
  3709. 		MDmarkdown( sourceEl.val(),previewEl );
  3710. 		MDsetChecklistClass();
  3711. 	}
  3712.  
  3713. 	// MD Live Checkboxes prep: find each instance of [ ] or [x] and replace text in index = to clicked checkbox in Preview.
  3714. 	function MDreplaceAt(str, replacement, position) {
  3715. 		str = str.substring(0, position) + replacement + str.substring(position + replacement.length);
  3716. 		return str;
  3717. 	}
  3718. 	function MDreplaceNthSubStr(str,substr,replacement,index) {
  3719. 		let count = 0;
  3720. 		let found = substr.exec(str);
  3721. 		while ( found !== null ) {
  3722. 			if ( count === index ) {
  3723. 				return MDreplaceAt(str, replacement, found.index );
  3724. 			} else {
  3725. 				count++;
  3726. 				found = substr.exec(str);
  3727. 			}
  3728. 		}
  3729. 	}
  3730. 	// MD Live Checkboxes
  3731. 	function MDliveCheckBoxes(checkbox,sourceEl,previewEl) {
  3732. 		$('.checklist').removeClass('clicked');
  3733. 		checkbox.closest('p,li,dt,dd').addClass('clicked');
  3734. 		const thisIndex = previewEl.find('.checklist').index( $('.clicked') );
  3735. 		const srctext = sourceEl.val();
  3736. 		const substr = new RegExp(/\[\s*.\s*\]/g);
  3737. 		const replacement = ( checkbox.is(':checked') ? '[x]' : '[ ]' );
  3738. 		sourceEl.val( MDreplaceNthSubStr(srctext, substr, replacement, thisIndex) );
  3739. 	}
  3740. 	// MD Checkbox list class: Prevent checkbox lists from having list bullets
  3741. 	function MDsetChecklistClass() {
  3742. 		$('input[type="checkbox"]').closest('ul').addClass('no_list');
  3743. 	}
  3744.  
  3745. 	// MD Resize Split View
  3746. 	function MDresizeSplit(handle,sourceEl,previewEl) {
  3747. 		let $sidebarWidth = $('#sidebar').outerWidth();
  3748. 		let $pageWidth = window.innerWidth;
  3749.  
  3750. 		$(document).on('mousemove',function(e) {
  3751. 			e.stopPropagation();
  3752. 			e.preventDefault();
  3753. 			let pageX = e.pageX;
  3754. 			if ( pageX > $sidebarWidth + 100 && pageX < $pageWidth - 100 ) { // min widths
  3755. 				handle.css({'left': pageX - $sidebarWidth - 4 + 'px'});
  3756. 				sourceEl.css({'width': pageX - $sidebarWidth + 'px'});
  3757. 				previewEl.css({'left': sourceEl.outerWidth() + 'px'});
  3758. 			}
  3759. 		});
  3760. 		handle.on('mouseup',function() {
  3761. 			$(document).off('mousemove');
  3762. 		});
  3763. 	}
  3764. 	// MD UI Sync Scroll
  3765. 	function MDpercentage(el) { return (el.scrollTop / (el.scrollHeight - el.offsetHeight)); }
  3766. 	function MDsyncScroll(el1) {
  3767. 		let el2 = ( el1.getAttribute('id') === 'content_preview' ? document.getElementById('content_source') : document.getElementById('content_preview') );
  3768. 		if ( document.querySelector('input[name="sync_scroll"').checked ) {
  3769. 			el2.scrollTo( 0, (MDpercentage(el1) * (el2.scrollHeight - el2.offsetHeight)).toFixed(0) ); // toFixed(0) prevents scrolling feedback loop
  3770. 		}
  3771. 	}
  3772. 	// click TOC anchors
  3773. 	function MDtocClick(el,previewEl) {
  3774. 		let thisId = el.attr('href');
  3775. 		if ( thisId ) {
  3776. 			previewEl.scrollTop( $(thisId).offset().top - 48 );
  3777. 		}
  3778. 	}
  3779. 	// click Headers to return to TOC or top
  3780. 	function MDheaderClick(previewEl) {
  3781. 		if ( previewEl.find('.table-of-contents').length > 0 ) {
  3782. 			document.getElementsByClassName('table-of-contents')[0].scrollIntoView(true);
  3783. 		} else {
  3784. 			document.getElementById('preview').scroll(0,0);
  3785. 		}
  3786. 	}
  3787. 	// MD Clear text source
  3788. 	function clearText(container_el) {
  3789. 		if ( window.top !== window.self ) { // if iframe, send message to top (to remove iframe_edited class)
  3790. 			sendMessage('top','clear');
  3791. 		}
  3792. 		container_el.find('#content_source').show().focus().val('');
  3793. 		container_el.find('#content_preview').empty();
  3794. 		container_el.removeClass('edited has_warning');
  3795. 	}
  3796. 	// MD SAVE SOURCE or HTML
  3797. 	function MDprepHTML(data) {
  3798. 		data = data.replace(/<span\sclass="uplink">.<\/span>/g,'');
  3799. 		return data;
  3800. 	}
  3801. 	function saveMD(filename, data) {
  3802. 		let blob = new Blob([data], {type: 'text/plain'});
  3803. 		let downloadEl = window.document.createElement('a');
  3804. 		    downloadEl.href = window.URL.createObjectURL(blob);
  3805. 		    downloadEl.download = filename;
  3806. 		document.body.appendChild(downloadEl);
  3807. 		    downloadEl.click();
  3808. 		document.body.removeChild(downloadEl);
  3809. 		URL.revokeObjectURL(blob);
  3810. 		if ( window.top !== window.self ) { // if iframe, send message to top
  3811. 			sendMessage('top','clear');
  3812. 		}
  3813. 		$('body,#content_source,#content_text').removeClass('edited');
  3814. 	}
  3815. 	// list of functions to remember while sending messages and then execute after warning button click
  3816. 	function doFunction(funcName,args) {
  3817. 		var funcDictionary = { 'setLocation':setLocation, 'resetContent':resetContent, 'closeContent':closeContent, 'clickThis':clickThis, 'clickRow':clickRow, 'doubleClickRow':doubleClickRow, 'indexNavigation':indexNavigation, 'clearText':clearText, 'null':null };
  3818. 		return funcName === 'null' ? null : funcDictionary[funcName](args);
  3819. 	}
  3820. 	// Show warning after certain user actions if text editor or iframe has edited text; otherwise do the action.
  3821. 	function showWarning(funcName,args) {
  3822. 		// Don't show the warning if func = indexNavigation or clickRow; i.e., just hide text editor;
  3823. 		// In other words, only show warning when changing directories or if iframe content has been edited
  3824. 		if ( ( $('body').hasClass('edited') && funcName !== 'indexNavigation' && funcName !== 'clickRow' ) || $('body').hasClass('iframe_edited') ) {
  3825. 			if ( $('body').hasClass('edited') ) { // show warning and text editor (if hidden)
  3826. 				$body.addClass('has_warning').find('#warnings').removeClass().addClass('unloading');
  3827. 				$body.removeClass('has_hidden_text').addClass('has_text');
  3828. 			}
  3829. 			if ( $('body').hasClass('iframe_edited') ) { // if iframe is edited, send unloading message
  3830. 				sendMessage('iframe','unloading',funcName,args); // upon receipt of message, iframe will show its warning message, based on the funcName
  3831. 			}
  3832. 		} else {
  3833. 			doFunction(funcName,args);
  3834. 		}
  3835. 	}
  3836. 	// Send a message to iframe or parent
  3837. 	function sendMessage(target,message,funcName,args) {
  3838. 		var messageObj = { 'messageContent': message, 'functionName': funcName, 'arguments': args };
  3839. 		if ( target === 'iframe' ) {
  3840. 			let contentIFrame = document.getElementById('content_iframe');
  3841. 			contentIFrame.contentWindow.postMessage( messageObj, '*' );
  3842. 		}
  3843. 		if ( target === 'top' ) {
  3844. 			window.parent.postMessage( messageObj, '*');
  3845. 		}
  3846. 	}
  3847. 	// Receive a message from iframe or parent, do appropriate action
  3848. 	function receiveMessage(e) {
  3849. 		if ( e.origin === 'null' || e.origin === $origin ) {
  3850. 			let $message = e.data.messageContent;
  3851. 			let funcName = e.data.functionName;
  3852. 			let args = e.data.arguments;
  3853.  
  3854. 			if ( $message === 'split_view' ) {
  3855. 				$iframe_body.toggleClass('split_view');
  3856. 			}
  3857. 			if ( $message === 'default_text_view' ) {
  3858. 				$iframe_body.toggleClass('preview_text source_text').removeClass('split_view');
  3859. 			}
  3860. 			// warn iframe that user wants to change iframes
  3861. 			if ( $message === 'unloading' && !$iframe_body.hasClass('has_warning') ) {
  3862. 				$iframe_body.addClass('has_warning').find('#warnings').removeClass().addClass('unloading').attr('data-function_name',funcName).attr('data-args',args);
  3863. 			}
  3864. 			// let top know iframe text has been edited
  3865. 			if ( $message === 'iframe_edited' && !$('body#top').hasClass('iframe_edited') ) {
  3866. 				$('body#top').addClass('iframe_edited');
  3867. 			}
  3868. 			if ( $message === 'ignore' || $message === 'clear' ) {
  3869. 				$('body#top').removeClass('iframe_edited');
  3870. 				if ( $message === 'ignore' ) { doFunction(funcName,args); }
  3871. 			}
  3872. 		}
  3873. 	}
  3874. 	window.addEventListener('message',receiveMessage,false);
  3875.  
  3876. 	// Edited Warning buttons: what to do when the user clicks a warning button
  3877. 	function editedWarningButtons(id) {
  3878. 		let btn = $(document.getElementById(id));
  3879. 		let container_el = btn.closest('body');
  3880. 		let func = $('#warnings').attr('data-function_name');
  3881. 		let args = $('#warnings').attr('data-args');
  3882. 		switch(id) {
  3883. 		case 'warning_ignore_btn': // do the user initiated func without saving the edited text
  3884. 			if ( window.self !== window.top ) { // if iframe, send message to top
  3885. 				sendMessage('top','ignore',func,args);
  3886. 			}
  3887. 			container_el.removeClass('edited has_text has_warning');
  3888. 			clearText(container_el);
  3889. 			break;
  3890. 		case 'warning_cancel_btn': // cancel the func
  3891. 			container_el.removeClass('has_warning').find('#warnings').removeClass();
  3892. 			break;
  3893. 		case 'warning_clear_btn': // clear the text editor
  3894. 			clearText(container_el);
  3895. 			break;
  3896. 		case 'warning_save_btn': // save the text
  3897. 			if ( window.top !== window.self ) { // if iframe, send message to top
  3898. 				sendMessage('top','clear');
  3899. 			}
  3900. 			container_el.removeClass('edited has_warning');
  3901. 			$('#save_text').click();
  3902. 			break;
  3903. 		case 'warning_ok_btn': // clear the text editor
  3904. 			$('body').removeClass('has_warning').find('#warnings').removeClass('local');
  3905. 			break;
  3906. 		}
  3907. 	}
  3908. 	$('#warnings').on('click','button',function(e) {
  3909. 		e.preventDefault();
  3910. 		editedWarningButtons( $(this).attr('id') );
  3911. 	});
  3912. 	// Edited Warning overlay: prevent user clicks on rest of UI
  3913. 	$('#overlay').on('click mousedown mouseup',function(e) {
  3914. 		e.preventDefault();
  3915. 		e.stopPropagation();
  3916. 		return;
  3917. 	});
  3918.  
  3919. 	// END Text Editing
  3920.  
  3921.     // EXPERIMENTAL: Open playlist
  3922.     $('#open_playlist_label').on('click',function(e) { $('.menu').hide(); });
  3923.     // Open font
  3924.     $('#bookmarks').on('change','#open_playlist',function(e) {
  3925.         openPlaylist(e);
  3926.     });
  3927.     function convertPlaylist(items) {
  3928.         let preppedIndex = '';
  3929.         let preppedRow = '';
  3930.         let id = 0, rows, info, title, time = '0', display_time = '—', link, kind = '', display_kind, ext;
  3931.         items = items.replace(/\s*#EXTM3U.*\n/,'\n').replace(/^\*\n{2,}/gm,'\n');
  3932.         if ( items.indexOf('#EXTINF:') !== -1 ) {
  3933.             rows = items.split('#EXTINF:');
  3934.         } else {
  3935.             rows = items.split('\n');
  3936.         }
  3937.         for ( let row of rows ) {
  3938.             if ( row.indexOf('\n') !== -1 && row.trim().length > 0 ) {
  3939.                 row = row.trim().split('\n');
  3940.                 info = row[0];
  3941.                 time = info.slice(0,info.indexOf(','));
  3942.                 display_time = new Date(time * 1000).toISOString().substr(11, 8);
  3943.                 title = info.slice(info.indexOf(',') + 1);
  3944.                 link = row[1];
  3945.             } else {
  3946.                 title = decodeURIComponentSafe(row.slice(row.lastIndexOf('/') + 1));
  3947.                 link = row;
  3948.             }
  3949.             ext = link.slice(link.lastIndexOf('.') + 1);
  3950.  
  3951.             if ( $row_types.audio.includes( ext ) ) {
  3952.                 kind = 'audio';
  3953.                 display_kind = 'Audio';
  3954.             } else if ( $row_types.video.includes( ext ) ) {
  3955.                 kind = 'video';
  3956.                 display_kind = 'Video';
  3957.             }
  3958.             if ( kind !== '' ) { // only allow supported media types
  3959.                 preppedRow = '<tr id="rowid-'+ id +'" class="file media '+ kind +'" data-ext="'+ ext +'"><td class="name" data-name="'+ title +'"><a class="icon" href="'+ link +'"><span><input type="checkbox" tabindex="-1" checked="true">'+ title +'</span></a></td><td class="size details" data-size="'+ time +'">'+ display_time +'</td><td class="date details" data-date="0">—</td><td class="kind details" data-kind="'+ kind +'">'+ display_kind +'</td><td class="ext details" data-ext="'+ ext +'"></td></tr>';
  3960.                 preppedIndex += preppedRow;
  3961.             }
  3962.             id++;
  3963.         }
  3964.         closeGrid();
  3965.         closeContent();
  3966.         closeOtherContent();
  3967.         $dir_list.find('tbody').empty().addClass('playlist').append(preppedIndex);
  3968.         $dir_list.find('#stats').html(getIndexStats($dir_list.find('#tbody tr')));
  3969.         $body.addClass('has_playlist has_audio');
  3970.         if ( $body.hasClass('autoload_media') ) { $('#rowid-1').click(); }
  3971.         setContentTitle();
  3972.         setContentHeight();
  3973.         scrollThis('tbody','selected',false);
  3974.     }
  3975.     function openPlaylist(evt) {
  3976.         if (window.File && window.FileReader && window.FileList && window.Blob) {
  3977.             var files = evt.target.files;
  3978.             var reader = new FileReader();
  3979.             reader.onload = function(file) {
  3980.                 convertPlaylist(file.target.result);
  3981.                 return true;
  3982.             };
  3983.             reader.readAsText(files[0]);
  3984.             document.title = "Playlist: "+ files[0].name;
  3985.             $('#parents_dir_menu').find('> div').empty().html( files[0].name );
  3986.             $('#open_playlist').val('');
  3987.         } else {
  3988.             alert('File APIs are not fully supported in this browser.');
  3989.         }
  3990.     }
  3991.  
  3992. })();
  3993. // THE END!