/* eslint-disable no-mixed-spaces-and-tabs */
/* eslint-disable no-useless-escape */
/* eslint-disable no-fallthrough */
/* eslint-disable indent */
// ==UserScript==
// @name Supercharged Local Directory File Browser
// @version 5.0.2
// @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; grid views for images and fonts; user-defined bookmarks; more.
// @author gaspar_schot
// @license GPL-3.0-or-later
// @homepageURL https://openuserjs.org/scripts/gaspar_schot/Supercharged_Local_Directory_File_Browser
// @contributionURLhttps://paypal.me/mschrauzer
// @include file://*
// @include about:blank
// @require https://code.jquery.com/jquery-latest.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it-footnote.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it-toc-made-right.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it-sub.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it-sup.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it-deflist.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it-multimd-table.min.js
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it-center-text.min.js
// @require https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js
// UPDATE URL
// NOTE: This script was developed in Vivaldi, running on Mac OS Mojave. It has been tested in various Chrome and Gecko-based browsers.
// It has been minimally tested on Windows and not at all on other OSes. It should work, but please report any issues.
// 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).
// 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.
// For Tampermonkey, go to Chrome extension page, and tick the 'Allow access to file URLs' checkbox at the Tampermonkey extension section.
// For Greasemonkey, open about:config and change greasemonkey.fileIsGreaseable to true.
// @namespace https://greasyfork.org/users/16170
// ==/UserScript==
(function() {
'use strict';
const $ = window.jQuery;
// ***** USER SETTINGS ***** //
const $settings = {
// NOTE: These settings will be overwritten whenever the script is updated. Use the "Export User Settings" menu item to save them.
// You can paste the exported settings between the two lines below:
//--------------------------------------------------------//
bookmarks: // N.B.: Directory links must end with "/", file links must end with another character.
// You may add as many menus and links as you like; just copy the example below and edit as needed.
// Local directory bookmarks must begin with "file:///"; external bookmarks must begin with the correct protocol ("http://" or "ftp://", etc.).
[
// { 'menu_title':'My Sample Menu',
// 'links': [
// { 'link_name':'My Directory Link 1', 'link':'file:///Path/To/My/Directory/' },
// { 'link_name':'My Directory Link 2', 'link':'file:///Path/To/My/Directory_2/' },
// { 'link_name':'My External Link', 'link':'https://www.mywebpage.com/' },
// { 'link_name':'My File Link', 'link':'file:///Path/To/My/File.ext' },
// ]},
{ 'menu_title':'My Sample Menu',
'links': [
{ 'link_name':'My Directory Link 1', 'link':'file:///Path/To/My/Directory/' },
{ 'link_name':'My Directory Link 2', 'link':'file:///Path/To/My/Directory_2/' },
{ 'link_name':'My External Link', 'link':'https://www.mywebpage.com/' },
{ 'link_name':'My File Link', 'link':'file:///Path/To/My/File.ext' },
]},
],
// GENERAL USER SETTINGS
alternate_background: true, // If true (default true), alternate sidebar row background color.
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.
// If false (default), treat apps as ignored files.
autoload_media: true, // If true (default), the first audio or video file found in a directory will be automatically selected and loaded for playback.
// Also, cover art files (if any) will be loaded in the preview pane.
// Files with 'cover','front','album','jacket','sleeve','cd','disc','insert','liner','notes' in the title will be loaded first in that order, with exact matches having preference.
// Note that there can be false positives because a file will be matched whenever there is no exact match and one of these words appears in an image name.
// Otherwise the first image file in directory will be loaded.
autoload_index_files: false, // If true (default: false), automatically select first "index.xxx" (.xxx !== .htm) file found in directory.
// 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.
theme: 'light', // Options: 'light' or 'dark'
editor_theme: 'light', // Options: if not set (default), uses "theme" setting; otherwise 'light' or 'dark'.
sort_by: 'default', // Choose from: 'name', 'size', 'date', 'kind', 'ext', 'default'.
// default = Chrome sorting: dirs on top, files alphabetical.
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").
// 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.)
grid_font_size: 1, // Default = 1
grid_image_size: 184, // Default = 184 (200px - 16px)
show_details: true, // If true (default), hide file and directory details; if false, show them.
hide_ignored_items: false, // If true, ignored files (= files the browser cannot natively open, e.g., common office and graphics files) will be hidden.
// If false (default), ignored files will appear greyed-out.
ignore_ignored_items: true, // If true (default), clicking ignored file types (see $row_settings below) in the directory list will not cause the browser to attempt to open the file.
// It is recommended to leave the default unchanged.
// Ignored items can still be downloaded with ctrl-click or right-click.
show_invisibles: true, // Un*x/Mac OS only: If true (default), files or directories beginning with a "." will be hidden.
show_numbers: true, // If true (default true), number index items
UI_font: 'system-ui, sans-serif', // Choose an installed font for the UI; if undefined, use browser defaults instead.
UI_font_size: '13px', // Choose a default UI font size; use any standard CSS units.
use_custom_icons: true, // if true (default), use custom icons for dirs and files
// if false, use browser/server default icons
// TEXT EDITING SETTINGS
disable_text_editing: false, // If false (default), allow plain text files to be edited.
default_text_view: 'preview_text', // Options: 'source_text' or 'preview_text' for text editor.
// Note that split_view = true overrides this setting.
split_view: true, // If true, show split view on plain text file load.
// if true (default), use default preview_text setting.
sync_scroll: true // If true (default: true), show split view on plain text file load
// if false, use default preview_text setting.
//--------------------------------------------------------//
// Paste your exported settings between the above two lines.
};
// $ITEM_KIND:
// DO NOT DELETE ANY EXISTING CATEGORIES!
// Add file extensions for sorting and custom icon display to the existing categories.
// You can also define your own new categories, but do not add an extension to more than one row_type category.
// Do not add leading "." to the extensions.
const $item_kind = {
// myRowType: ['ext1','ext2'],
dir: ['/'], // loaded in iframe#content_iframe
app: ['app/','app','bat','cgi','com','exe','jar','msi','wsf'], // generally ignored; apps may be opened as directories
alias: ['alias','desktop','directory','lnk','symlink','symlink/'],
archive: ['7z','archive','b6z','bin','bzip','bz2','cbr','dmg','gz','iso','mpkg','pkg','rar','sit','sitx','tar','tar.gz','zip','zipx','zxp'], // ignored
audio: ['aac','aif','aiff','ape','flac','m4a','mp3','ogg','opus','wav'], // loaded in audio#audio
bin: ['a','bundle','dll','dyld','dylib','gem','icc','msi','pyc','pyo','o','rakefile','ri','so','xml','2'], // ignored
code: ['bak','bash','bash_profile','bashrc','c','cfg','cnf','codes','coffee','conf','csh','cshrc','cson','css','custom_aliases','d','default','dist','editorconfig','emacs','example','gemspec','gitconfig','gitignore','gitignore_global','h','hd','ini','js','json','jsx','less','list','local','login','logout','lua','mkshrc','old','pc','php','pl','plist','pre-oh-my-zsh','profile','pth','py','rb','rc','rdoc','sass','settings','sh','strings','taskrc','tcl','viminfo','vimrc','vue','yaml','yml','zlogin','zlogout','zpreztorc','zprofile','zsh','zshenv','zshrc'], // treated as text, opened in iframe#content_iframe text editor
database: ['accdb','db','dbf','mdb','pdb','sql', 'sqlite','sqlitedb','sqlite3'], // ignored
ebook: ['azw','azw1','azw3','azw4','epub','ibook','kfx','mobi','tpz'], // ignored
font: ['otf','ttf','woff','woff2','afm','pfb','pfm','tfm'], // opened in div#content_font
graphics: ['afdesign','afpub','ai','book','dtp','eps','fm','icml','idml','indd','indt','inx','mif','pmd','pub','qxb','qxd','qxp','sla','swf'], // ignored
htm: ['htm','html','xhtm','xhtml'], // opened in iframe#content_iframe
image: ['apng','bmp','gif','ico','jpeg','jpg','png','svg','webp'],
ignored_image: ['ai','arw','cr2','dng','eps','jpf','nef','psd','psd','raw','tif','tiff'], // ignored
link: ['url','webloc','inetloc'],
markdown: ['md','markdown','mdown','mkdn','mkd','mdwn','mdtxt','mdtext'], // treated as text, opened in iframe#content_iframe text editor
office: ['csv','doc','docx','epub','key','numbers','odf','ods','odt','pages','rtf','scriv','wpd','wps','xlr','xls','xlsx','xlm'], // ignored
pdf: ['pdf'], // open in embed#content_pdf
system: ['DS_Store','ds_store','icon','ics','spotlight-v100/','temporaryitems/','documentrevisions-v100/','trashes/','fseventsd/','dbfseventsd','file','localized','programdata'], // ignored system items
text: ['log','nfo','txt'], // opened in iframe#content_iframe text editor
video: ['m4v','mov','mp4','mpeg','webm'] // loaded in video#content_video
};
// $ROW_SETTINGS: Ignore or Exclude files by extension
const $row_settings = {
// ignored: $item_kind or files with extensions added here will not be loaded if selected in the sidebar (prevents the browser from attempting to download the file).
ignored: $item_kind.archive.concat( 'alias', $item_kind.bin, $item_kind.database, $item_kind.graphics, $item_kind.ignored_image, $item_kind.office, $item_kind.system),
// Exclude: Files with these exensions will not be inverted in dark mode
exclude: ['htm','html','xhtm','xhtml']
};
// ***** END USER SETTINGS ***** //
// ## FEATURES INCLUDE:
// - Resizable sidebar and directory/file preview pane.
// - Arrow navigation in sidebar:
// - Up and Down Arrows select next/prev item.
// - Left and Right Arrows select next/prev item of same type.
// - Navigate sidebar by typed string.
// - Show/Hide file details (size (if avail), date modified (if avail), kind, extension).
// - Sort sidebar items by name or file details.
// - Default sort = sort by name with folders on top.
// - Preview all file types supported natively by browser (html, text, images, pdf, audio, video, etc.) and preview fonts.
// - Preview and edit markdown (if your browser supports it) and plain text files, with option to save files locally.
// - Markdown rendered with markdownit.js ( https://github.com/markdown-it/markdown-it ).
// - Uses Github Markdown styles for preview ( https://github.com/sindresorhus/github-markdown-css ), with a few customizations.
// - Support for:
// - TOC creation ( `${toc}` ) ( https://github.com/nagaozen/markdown-it-toc-done-right )
// - Multimarkdown table syntax ( https://github.com/RedBug312/markdown-it-multimd-table )
// - Live checkboxes ( `\[ ], [x]` ), allowed in lists and deflists.
// - Superscript ( `^sup^` ) ( https://github.com/markdown-it/markdown-it-sup )
// - Subscript ( `~sub~` ) ( https://github.com/markdown-it/markdown-it-sub )
// - Definition lists ( https://github.com/markdown-it/markdown-it-deflist; for syntax, see http://pandoc.org/MANUAL.html#definition-lists )
// - Centered text ( `->centered<-` ) ( https://github.com/jay-hodgson/markdown-it-center-text )
// - Footnotes ( https://github.com/markdown-it/markdown-it-footnote )
// - View source text, preview, or split pane with proportional sync scroll.
// - Save edited source text or previewed HTML.
// - Create and edit text in separate text editor.
// - Audio and video playback, with shuffle, loop, skip audio +/- 10 or 30 sec via keyboard.
// - Preview other files (e.g., lyrics or cover art) in same directory while playing audio.
// - User setting to autoload cover art (if any images in directory, load "cover.ext" or first image found)
// - Grid views for images and fonts.
// - Playlists and filelists.
// - Open standard .m3u media files; save .m3u file of all media items in current directory.
// - Open and save custom .m3u files that may contain directories and _any_ file type.
// - Click file or audio title to display .m3u listing for that item.
// - User settings (see $settings in code; some settings can be changed via the main menu in the UI and will be remembered in URL query):
// - Light or Dark theme.
// - Bookmarks for local or remote directories.
// - Default image grid size.
// - Default UI font size and font-family.
// - Default UI font and font-size.
// - Default file sorting.
// - Sort with directories on top.
// - Treat apps as directories (MacOS and *nix only)
// - Show or hide invisible files.
// - Show or hide ignored files in the ignored files list (see $row_settings in code below $settings).
// - Show or hide file details.
// - Use custom file icons or browser defaults.
// - Autoload index.ext files.
// - Autoload cover art in directories with audio files.
// - Text editing default view: split, source, or preview.
// - Text editing sync scroll: on or off.
// CHANGELOG:
// **VERSION 5.0.2:** Lots of bug fixes.
// **ADDED:** Experimental support for opening .webloc and .url files: select file in sidebar and use double-click, Cmd/Ctr-Return, or Cmd/Ctr-ArrowDown to load the link.
// Note: This is untested on Windows; please report any problems.
// Note: Behavior for link files located on remote servers can be unpredictable, depending on server configuration.
// Specifically, link files with .com, .org, or .net in their names (e.g., www.example.com.webloc) may not work.
// **FIXED & IMPROVED:** Completely overhauled handling of invisible and ignored files and directories.
// - (Ignored files are those which the browser typically cannot open natively, like common office or graphics files.)
// - Added a new "Ignored Items" menu item with "Hide Ignored Items" and "Ignore Ignored Items" items.
// - By default, ignored items are visible.
// - If "Ignored Ignored Items" is checked (default), ignored items can be selected in the sidebar, but will not be downloaded. Uncheck it in order to restore the default browser behavior. It is recommended to leave the default setting unchanged.
// - Visibility of items that are both invisible and ignored can be toggled with the "Show Invisibles" checkbox.
// **FIXED:** Several problems with tabbing into previewed text documents.
// **FIXED:** An issue with arrow key behaviour when the text editor was open.
// **FIXED:** Various issues with keydown events in textareas and contenteditable elements.
// **FIXED:** Main menu: toggling default text editor view wasn't working, and default settings weren't being honored; fixed some styling issues.
// **FIXED:** Help window wasn't styled correctly.
// **FIXED:** Long-standing issues with autoloading cover art. Many times the incorrect file was loaded; selection should be much more robust now.
// - Image files with 'cover','front','album','jacket','sleeve','cd','disc','insert','liner','notes' in the title will be loaded first in that order, with exact matches having preference;
// - Otherwise the first image found will be loaded.
// - Note that there can be false positives because a file will be matched whenever there is no exact match and one of these words appears in an image name.
// **IMPROVED:** Prevent annoying FOUC ("flash of unstyled content") when loading directories in content pane. This makes me happy.
// **IMPROVED:** Also show loading spinner while directory preview is loading; if a directory is inaccessible (perhaps because its permissions deny browser access) the spinner will remain visible.
// **IMPROVED:** Clicked link handling in HTML files. After clicking a same-origin link, the item will open in the preview pane; closing the item will return to original HTML file.
// - Non-same-origin links will open in a new tab/window.
// **IMPROVED:** When sidebar is focused, content pane directory previews will be dimmed.
// **IMPROVED:** Allow tab key to focus links and form elements in previewed html documents (including text editor preview).
// **IMPROVED:** Show/Hide Invisibles from focused content pane with <kbd>Cmd/Ctr + I</kbd>.
// **IMPROVED:** Content pane title now updates correctly when navigating history state for directories or txt/html files.
// **ADDED:** Warning when attempting to open local links from a non-local page from an html file.
// **CHANGED:** "Show Ignored Files" pref default to "true" because it could be confusing when using the script for the first time if those items were invisible.
// **UPDATED:** markdown-it.js > 11.0.0, markdown-it-multimd-table.js > 4.0.2.
// Many more fixes and improvements.
// **VERSION 5.0.1:**
// **FIXED:** Parent Directory link for previewed directories wasn't working.
// **IMPROVED:** Content pane title didn't update after clicking same-origin links in previewed html.
// **VERSION 5.0.0** Lotsa stuff....
// **MAJOR INTERNAL CHANGES**
// - Converted many "if ... else" conditional statements to "switch" statements for clarity and efficiency.
// - Converted most <code><table></code> HTML elements in the UI to flex box <code><divs></code>, because it's 2020....
// - Converted css to selector-based system and pruned many unneeded styles.
// **IMPROVED:** Significantly improved performance of initial directory processing; this is especially noticable for directories with many items.
// **CONTENT PANE:**
// **PREVIEWED DIRECTORIES**
// **ADDED:** Keyboard navigation for previewed directories.
// - Use <kbd>Tab</kbd> to toggle focus between sidebar and content pane (for images, fonts, grids, html and text files, and the text editor).
// - Use <kbd>Escape</kbd> to focus sidebar from content pane.
// - Use arrow keys to navigate items as in sidebar.
// - Use <kbd>Cmd/Ctrl</kbd> + <kbd>ArrowUp</kbd> to go to parent directory in content pane.
// - Previewed directories honor "show invisibles" and "ignore ignored files" pref.
// **ADDED:** Double-click or (<kbd>Cmd/Ctr + Return) items in previewed directories to open them.
// **ADDED:** Continuous audio playback from previewed directories.
// **ADDED:** Dark theme for directory preview.
// **ADDED:** "Open in Content Pane" and "View Directory Source" links in sidebar footer.
// - "Open in Content Pane" will show the current directory in the content pane.
// - (This is useful in situations were the currently previewed directory contains only files and you want to navigate directories in the content pane.)
// **IMPROVED:** Directory list now uses custom file icons for media files, because otherwise it's difficult to tell audio and video files apart.
// **HTML CONTENT:**
// **FIXED:** Clicking links in previewed html files didn't do anything. Now internal #links or same-origin links will open in the content pane; links to external sites will load in a new tab/window.
// **PLAYLISTS**
// **ADDED:** "Make Playlist" menu item. Download a basic (no timings) .m3u playlist of the media files in the current directory (with options for audio or video files only).
// **ADDED:** Click audio player title to show an m3u playlist entry for the current media file.
// **IMPROVED:** Added warning when opening a playlist with local files from a non-local page.
// - Playlist will open, but local files will be disabled.
// **ADDED:** Custom support for directories and _any_ file type in .m3u playlists.
// - "Make Playlist" menu item has options for all files and directories, all non-media files, files only, and directories only.
// - You can also click the content pane title to show an m3u playlist entry for the selected file.
// **TEXT EDITING**
// **ADDED:** New user pref to use light or dark theme for text editor instead of main UI theme.
// - Text editor theme can be toggled with new button in text editor toolbar.
// **ADDED:** Keyboard shortcut to toggle text editor split view: <kbd>Cmd/Ctrl + \</kbd>.
// **IMPROVED:** Text editor now remembers insertion/caret position or selection range (until page is reloaded or URL changes).
// - Position and range are remembered even if you close the text editor and view other content in the current directory, or if you navigate to another directory from within the preview pane.
// **IMPROVED:** Better handling of unicode text.
// **KEYBOARD SHORTCUTS:**
// **CHANGED:**
// - <kbd>Cmd|Ctrl + E</kbd>: Toggle main menu.
// - <kbd>Cmd|Ctrl + Shift + E</kbd>: Show text editor.
// **ADDED:** <kbd>Cmd|Ctrl + \</kbd>: toggle sidebar.
// **IMPROVED:** <kbd>Escape</kdb> now also closes menus.
// **IMPROVED:** Allow normal <kbd>Cmd|Ctrl + +/–</kbd> behavior if no scalable content (images, grids, etc.) is visible; allows scaling of browser window contents.
// **UI**
// **ADDED:** Keyboard navigation for the main menu.
// - Use Up/Down Arrows to select items, Left/Right Arrows to open submenus.
// - <kbd>Return/Enter</kbd>: Choose selected item.
// **ADDED:** Toggle "Ignore ignored files" menu item.
// **ADDED:** Basic Help menu item (shows keyboard shortcuts, etc.)
// **ADDED:** More tooltips for various UI elements.
// **IMPROVED:** Completely overhauled warnings html and styles.
// **IMPROVED:** Added more info to stats in sidebar footer:
// - On hover, show total number of each kind of file or dir, and how many are hidden.
// - Live updates when show/hide invisibles or show/hide ignored files settings are changed.
// - Stats update when playlist is loaded.
// **IMPROVED:** Tab key behavior; tab now also toggles focus of previewed images, font specimen text, and text editor, as well as html and .txt/.md files.
// **ADDED:** Allow arrow keys to scroll scaled/zoomed images when focused.
// **FIXED:** Allow sidebar arrow navigation when sidebar is hidden.
// **FIXED:** Toggle media checkbox wasn't working.
// **FIXED:** An issue with <kbd>?</kbd>s in file names.
// **FIXED:** <kdb>Cmd|Ctrl + W</kbd> now closes tab/window if no content is being previewed.
// **FIXED:** Arrow navigation for sidebar and previewed directories sometimes used default arrow behavior, preventing proper scroll into view behavior.
// **IMPROVED:** Workaround for Chrome bug with scroll into view multiple elements simultaneously (e.g., scrolling selected sidebar and grid items); scrolling is "instant" instead of "smooth."
// **CHANGED:** "Ignore ignored files" pref behavior.
// - If "true", ignored files will be hidden. If "false", ignored files will be shown, but will not be downloaded when clicked or navigated to.
// **FIXED:** Unchecked media files would be selected and played in some circumstances.
// **FIXED & IMPROVED:** Various style changes and fixes.
// - Increased UI contrast overall.
// - Improved UI icon visibility.
// - File icons weren't visible in the preview titlebar in some circumstances.
// **IMPROVED:** Warn before closing previewed font files and playlists.
// **IMPROVED:** Reloading previously-selected directory when navigating to parent folder now uses row id and so is not affected is the sort is changed.
// **IMPROVED:** Directory list now remembers sort direction.
// **IMPROVED:** HTTP error pages now load in the content pane and with original formatting.
// **FIXED:** PDFs now load correctly if a pdf has already been loaded.
// **OTHER:**
// - Various fixes for Firefox.
// - Choosing "Default User Settings" now does not remove history from query string.
// - Removed m3u from "Text" file types.
// - Many, many other fixes and improvements.
//
// **KNOWN ISSUES:**
// **Chrome:** Smooth scroll (for scrollIntoView() ) seems to be broken in the latest releases.
// **Firefox:** Clicking media checkboxes (to toggle selection) causes page reload.
// **Firefox:** Tabbing into previewed directories in content pane doesn't work; click in content pane instead in order to use arrow navigation.
// ************ J + M + J ************* //
// ************************************ //
// DON'T EDIT ANYTHING BELOW THIS LINE. //
// ************************************ //
// ***** GENERAL SETUP ***** //
function getBrowser() {
switch(true) {
case navigator.userAgent.search('Chrome') >= 0: return 'is_chrome';
case navigator.userAgent.search('Firefox') >= 0: return 'is_gecko';
case navigator.userAgent.search('MSIE') >= 0: return 'is_explorer';
case navigator.userAgent.search('Opera') >= 0: return 'is_opera';
case navigator.userAgent.search('Safari') >= 0 && navigator.userAgent.search('Chrome') < 0: return 'is_safari';
}
}
function getOS() { // modded from https://stackoverflow.com/questions/38241480/detect-macos-ios-windows-android-and-linux-os-with-js
var platform = window.navigator.platform, macos_platforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'], windows_platforms = ['Win32', 'Win64', 'Windows', 'WinCE'], os = null;
switch(true) {
case macos_platforms.indexOf(platform) !== -1: os = 'macos'; break;
case windows_platforms.indexOf(platform) !== -1: os = 'windows'; break;
// case iosPlatforms.indexOf(platform) !== -1: os = 'ios'; break; // just in case;
// case /Android/.test(userAgent): os = 'android'; break; // just in case;
case !os && /Linux/.test(platform): os = 'linux'; break;
}
return os;
}
// OTHER
// var context = new AudioContext(); // needed to allow continuous playback of audio
// PATHS
const newURL = function(link) {
try { return new URL(link,document.baseURL); }
catch(error) { return; } //console.log('This link is invalid. Please check the file.'); }
};
function decodeURIComponentSafe(str) { // Fix "%" error in file name; see https://stackoverflow.com/questions/7449588/why-does-decodeuricomponent-lock-up-my-browser
if ( !str ) { return str; }
try {
return decodeURIComponent(str.replace(/%(?![0-9a-fA-F]{2})/g, '%25') ); // replace % with %25 if not followed by two a-f/number
} catch(e) {
return str;
}
}
const $protocol = window.location.protocol;
const $origin = $protocol +'//'+ window.location.host;
let current_location = decodeURIComponentSafe( [location.protocol, '//', location.host, location.pathname].join('') );
const current_dir_path = current_location.replace(/([/|_|—])/g,'$1<wbr>').replace(/\\/g,'/'); // URL w/o query string for display
const current_dir = current_location.split('/').slice(-2,-1).toString();
function escapeStr(str) { str = str.replace(/([$?*+()[]|^])/g,'\\$1'); return str; }
// if URL is a file, change window location to parent dir, add querystring of file name; then autoload file.
function loadFile() {
let query_prefs = getQueryPrefs();
query_prefs.set( 'file', current_location.slice(current_location.lastIndexOf('/') + 1) );
window.location = current_location.slice(0,current_location.lastIndexOf('/') + 1) +'?'+ query_prefs;
return;
}
if ( current_location.slice(current_location.lastIndexOf('/')).indexOf('.') !== -1 && !current_location.endsWith('/') && window.top === window.self ) {
loadFile();
}
// QUERY PREFS
function getQueryPrefs() { return new URL(window.location).searchParams; }
// const initialQueryPrefs = getQueryPrefs();
// set query key/value
function setQuery(key, value) { let query_prefs = getQueryPrefs(); query_prefs.set( key, value ); updateQuery(query_prefs); }
// get query value
function getQuery(key) {
let query_prefs = getQueryPrefs(), value = '';
if ( key === 'width' ) { // set the stored sidebar width or use 30%
value = ( !query_prefs.has(key) || window.innerWidth === 0 ? 30 : Math.round(100 * Number.parseInt(query_prefs.get('width'))/window.innerWidth) ); // percentage
} else { // if the query_string has a key/value pair, use it, otherwise use the key/value pair from the $settings
value = ( query_prefs.has(key) ? query_prefs.get(key) : $settings[key] !== undefined ? $settings[key].toString() : '' );
value = value.replace('%2F','').replace('/',''); // some servers add a '/' to end of query string
}
return value;
}
// toggle query key
function toggleQuery(key) {
let query_prefs = getQueryPrefs(), non_bool_prefs = {
'theme_light': {'theme':'dark'},
'theme_dark': {'theme':'light'},
'source_text': {'default_text_view':'preview_text'},
'preview_text': {'default_text_view':'source_text'},
'sort_by_default': {'sort_by':'default'},
'sort_by_name': {'sort_by':'name'},
'sort_by_size': {'sort_by':'size'},
'sort_by_date': {'sort_by':'date'},
'sort_by_kind': {'sort_by':'kind'},
'sort_by_ext': {'sort_by':'ext'}
};
var value, query_value, settings_value;
if ( non_bool_prefs[key] !== undefined ) {
value = Object.values(non_bool_prefs[key]).toString();
key = Object.keys(non_bool_prefs[key]).toString(); // must come after value: i.e., don't redefine key before getting value
if ( $settings[key] === value ) { query_prefs.delete( key ); } else { query_prefs.set( key, value ); }
} else {
query_value = query_prefs.get(key);
settings_value = $settings[key];
value = ( query_value === null ? settings_value.toString() : query_value.toString() );
value = ( value === 'true' ? 'false' : 'true' );
if ( ( query_value !== null && query_value !== settings_value ) ) {
query_prefs.delete( key );
} else {
query_prefs.set( key, value );
}
}
updateQuery(query_prefs);
}
// remove query key
function removeQuery(key) { let query_prefs = getQueryPrefs(); query_prefs.delete(key); updateQuery(query_prefs); }
// update query string
function updateQuery(query_str) {
query_str = query_str.toString().replace('%2F','').replace('/','');
if ( query_str.length > 0 ) { window.history.replaceState({}, document.title, window.location.pathname +'?'+ query_str); }
updateParentLinks();
}
// ***** SET UP UI ELEMENTS ***** //
// Parent and Parents Menus
// UTILITIES
function updateParentQueryStr(str) { // decrement selected and history values
let query_str = new URLSearchParams(str); // make new search params from window.location.search
let history = ( query_str.has('history') ? query_str.get('history') : undefined );
if ( history !== undefined ) {
history = history.split(' ');
switch(true) {
case history.length > 1: query_str.set('selected',history[0]); history.shift(); query_str.set('history',history.join('+')); break;
case history.length === 1: query_str.set('selected',history[0]); history.shift(); query_str.delete('history'); break;
}
} else {
query_str.delete('selected');
}
str = decodeURIComponentSafe(query_str.toString());
return str;
}
// create links
function updateParentLinks() { $('#parents_dir_nav').siblings('ul').empty().append( createParentLinkItems() ); }
function createParentLinks() {
let link, links = [], query_str = window.location.search.toString().slice(1);
let link_pieces = current_location.split('/'); // make array of parent directories
link_pieces = link_pieces.slice(2,-2); // remove beginning and ending empty elements and current directory
while ( link_pieces.length > 0 ) { // while there are link pieces...
query_str = updateParentQueryStr(query_str); // update selected and history
link = $protocol +'//'+ link_pieces.join('/') + '/?' + query_str; // assemble link
links.push(link); // add to link array
link_pieces.pop(); // remove last link piece and repeat...
}
return links;
}
// create menu items
function createParentLinkItems() {
let parent_link_menu_items = [], links = createParentLinks();
$('#parent_dir_nav').find('a').attr( 'href', links[0] ); // set parent link
for ( let i = 0; i < links.length; i++ ) {
let display_name = links[i].split('/?')[0];
display_name = display_name.replace(/\//g,'\/<wbr>');
let menu_item = '<li><a href="'+ links[i] +'" class="text_color_111">' + display_name + '/</a></li>';
parent_link_menu_items.push(menu_item);
}
return parent_link_menu_items; // return parents link items
}
// MENUS: User bookmarks
function bookmarksMenuItems() {
const bookmarks = $settings.bookmarks;
let menu_items = [], links_arr = [], links_arr_str = '', links;
if ( bookmarks.length > 0 ) {
for ( let i = 0; i < bookmarks.length; i+=1 ) {
links = bookmarks[i].links;
// make array of links
for ( let j = 0; j < links.length; j+=1 ) {
if ( !links[j].link.endsWith('/') ) {
links[j].link = links[j].link.slice(0,links[j].link.lastIndexOf('/') + 1) + '?file=' + links[j].link.slice(links[j].link.lastIndexOf('/') + 1) ;
}
links[j].link_name = links[j].link_name.split('/').join('/<wbr>');
links_arr[j] = '<li><a class="menu_item has_icon_before text_color_111" href="'+ links[j].link +'">' + links[j].link_name + '</a></li>';
}
links_arr_str = links_arr.join('');
menu_items[i] = '<li class="bookmark has_submenu"><a class="menu_item text_color_111">'+ bookmarks[i].menu_title +'</a><ul class="submenu background_color_D0_50 border_all">'+ links_arr_str +'</ul></li>';
}
menu_items = menu_items.join('');
}
return menu_items;
}
// MENUS: Other menu items
// #menu li a::before, .toggle_UI_pref, a, a:, div, li, span, span::before, span::after, #dir_list a.icon span, #warnings h3::before, #content_audio_title td:before
const SidebarMenuItems = function() {
let sort_by = '<li id="sort_by" class="has_submenu border_top border_bottom"><span class="menu_item">Sort by…</span><ul id="sort_menu" class="submenu background_color_D0_50 border_all text_color_111"><li id="name"><span class="menu_item">Name</span></li><li id="size"><span class="menu_item">Size</span></li><li id="date"><span class="menu_item">Date</span></li><li id="kind"><span class="menu_item">Kind</span></li><li id="ext"><span class="menu_item">Extension</span></li><li id="default"><span class="menu_item">Default</span></li></ul>';
let autoload_media = '<li id="autoload_media" class="toggle_UI_pref border_bottom" title="Automatically select and load the first media item in a directory."><span id="autoload_media_menu" class="menu_item">Autoload Media</span></li>';
let theme = '<li title="Set the main UI theme (light or dark)."><span id="theme" class="menu_item toggle_UI_pref"><span> Theme</span></span></li>';
let alternate_background = '<li id="alternate_background" class="toggle_UI_pref" title="Alternate backgrounds of directory items."><span class="menu_item">Alternate Backgrounds</span></li>';
let show_numbers = '<li id="show_numbers" class="toggle_UI_pref border_bottom" title="Number directory list items."><span class="menu_item">Show Numbers</span></li>';
let ignored_files = '<li id="ignored_files" class="has_submenu border_bottom"><span class="menu_item">Ignored Items</span><ul id="" class="submenu background_color_D0_50 border_all"><li id="hide_ignored_items" class="toggle_UI_pref border_bottom" title="Show/hide ignored items (from the list of ignored file types in the user settings)."><span class="menu_item">Hide Ignored Items</span></li><li id="ignore_ignored_items" class="toggle_UI_pref border_bottom" title="If checked, the browser will not attempt to load ignored items (from the list of ignored file types in the user settings). It is recommended to leave this checked."><span class="menu_item">Ignore Ignored Items</span></li></ul></li>';
let text_editing = '<li id="text_editing" class="has_submenu"><span class="menu_item">Text Editing</span><ul id="text_editing_menu" class="submenu background_color_D0_50 border_all"><li id="text_editor_menu_item" class="border_bottom" title="Toggle the main text editor."><span id="text_editor" class="menu_item">Toggle Text Editor </span></li><li id="split_view" class="toggle_UI_pref border_bottom" title="Toggle display of default text view and both source and rendered text."><span id="toggle_split_view" class="menu_item">Split View</span></li><li id="preview_text_menu_item" title="Set the default text view for non-split view."><span class="toggle_UI_pref menu_item" id="source_text">Source Text</span><span class="toggle_UI_pref menu_item" id="preview_text">Preview Text</span></li></ul>';
let disable_text_editing = '<li class="border_bottom" title="Enable/disable editing of plain text files. Does not effect main text editor."><span class="menu_item toggle_UI_pref" id="disable_text_editing"><span id="disable">Text Editing </span></span></li>';
let open_playlist = '<li><label id="open_playlist_label" class="menu_item" for="open_playlist" title="Open local .m3u playlist/filelist file.">Open Playlist/Filelist…</label><input type="file" id="open_playlist" name="open_playlist" accept=".m3u,.m3u8"></input></li>';
let make_playlist = '<li class="border_bottom"><a id="make_playlist" class="menu_item text_color_111" href="#" title="Make an .m3u playlist/filelist of the items in the current directory (if any).">Make Playlist/Filelist…</a></li>';
let open_font = '<li class="border_bottom"><label id="open_font_label" class="menu_item" for="open_font" title="Open font file (.oft, .ttf, .woff) to view glyph repertoire and font info; save individual glyphs as .svg.">Open Font…</label><input type="file" id="open_font" name="open_font" accept=".otf,.ttf,.woff"></input></li>';
let default_settings = '<li><a id="default_settings" class="menu_item text_color_111" href="#" title="Delete UI prefs stored in the URL query string and reload page.">Default User Settings</a></li>';
let export_settings = '<li class="border_bottom"><a id="export_settings" class="menu_item text_color_111" href="#" title="Export hard-coded user settings and bookmarks to text file.">Export User Settings</a></li>';
let about_link = '<li id="about"><a class="menu_item text_color_111" href="https://openuserjs.org/scripts/gaspar_schot/Supercharged_Local_Directory_File_Browser" target="_blank">About</a></li>';
let help_link = '<li id="show_help"><span class="menu_item text_color_111">Help</span></li>';
let contact_link = '<li id="contact"><a class="menu_item text_color_111" href="mailto:[email protected]">Contact</a></li>';
let donate_link = '<li id="donate"><a class="menu_item text_color_111" href="https://paypal.me/mschrauzer" target="_blank" rel="noopener">Donate</a></li>';
return sort_by + theme + alternate_background + show_numbers + ignored_files + autoload_media + text_editing + disable_text_editing + open_playlist + make_playlist + open_font + default_settings + export_settings + about_link + help_link + contact_link + donate_link;
};
const SidebarHeaderEls = function() {
let checked = '';
if ( getQuery('show_invisibles') === 'true' ) { checked = 'checked'; }
let parent_dir_nav = '<nav id="parent_dir_nav" class="invert"><a class="menu_item" href="" title="Parent Directory"> </a></nav>';
let parents_dir_nav = '<nav id="parents_dir_nav" class="border_right border_left"><div id="current_dir_path" title="Parent Directories">'+ current_dir_path +'</div></nav><ul id="parents_links" class="menu background_color_D0_50 border_bottom"></ul>';
let menu_nav = '<nav id="menu_nav" class="invert"><div> </div></nav><ul id="menu" class="menu background_color_D0_50 border_bottom">'+ bookmarksMenuItems() + SidebarMenuItems() +'</ul>';
let show_details = '<button id="show_details" class="toggle_UI_pref" tabindex="-1" title="Toggle display of directory item detail information"><span id="show"> details</span></button>'; // "Show/Hide" prefixed in pseudo-element
let inv_checkbox = '<label id="show_invisibles_container"><input class="toggle_UI_pref" type="checkbox" id="show_invisibles" for="inv_checkbox" name="inv_checkbox" tabindex="-1" '+ checked +' /><span class="text_color_111">Show Invisibles</span></label>';
let grid_btn = '<div id="grid_btn" class="has_background" tabindex="-1" title="Show Grid"><ul class="menu has_popout_menu"><li id="show_image_grid" class="border_right border_bottom">Show Image Grid</li><li id="show_font_grid" class="border_right">Show Font Grid</li></ul></div>';
let sorting = '<div id="sorting" class="background_color_C0_40"><div id="sorting_row_1" class="container"><div class="toggle_UI_pref name sorting" id="sort_by_name" title="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" title="Default sort" colspan="2"><span>Default</span></div></div><div id="sorting_row_2"><div class="toggle_UI_pref details sorting" id="sort_by_size" title="Sort by size"><span>Size</span></div><div class="toggle_UI_pref details sorting" id="sort_by_date" title="Sort by size"><span>Date</span></div><div class="toggle_UI_pref details sorting" id="sort_by_kind" title="Sort by kind"><span>Kind</span></div><div class="toggle_UI_pref details sorting" id="sort_by_ext" title="Sort by extension"><span>Ext</span></div></div></div>';
let text_editor_row = '<div id="text_editor_row" class="border_top background_color_C0_40"><a href="#" class="text_color_111" title="Toggle Text Editor">Text Editor</a></div>';
let sidebar_header_head = '<div id="sidebar_title" class="border_bottom background_color_B0_30"><div></div></div>';
let sidebar_menus = '<div id="sidebar_menus" class="background_color_B0_30 border_bottom"><div id="parent_dir_menu">'+ parent_dir_nav +'</div><div id="parents_dir_menu">'+ parents_dir_nav +'</div><div id="menu_container" title="Main menu">'+ menu_nav +'</div></div>';
let sidebar_buttons = '<div id="sidebar_buttons" class="background_color_C0_40 border_bottom"><div id="sidebar_buttons_left" colspan="3">'+ show_details + inv_checkbox +'</div>'+ grid_btn +'</div>';
let sidebar_header_body = '<div id="sidebar_header_body" class="border_bottom">'+ sidebar_menus + sidebar_buttons + sorting + text_editor_row +'</div>';
let sidebar_header_els = '<section id="sidebar_header" class="text_color_111">'+ sidebar_header_head + sidebar_header_body +'</section>';
return sidebar_header_els;
};
// Sidebar Footer (Stats)
const SidebarFooterEls = function() {
const stats_summary = '<div id="stats_summary" class="background_color_C0_40"> </div>';
const stats_summary_detailed_total = '<div id="stats_summary_detailed_total" class="summary_detailed border_bottom background_color_C0_40"></div>';
const stats_summary_detailed_dirs = '<div id="stats_summary_detailed_dirs" class="dir summary_detailed"></div>';
const stats_summary_detailed_files = '<div id="stats_summary_detailed_files" class="file summary_detailed border_bottom"></div>';
const stats_summary_playlist_container = '<div id="stats_summary_playlist_container" class="background_color_C0_40"><div id="stats_summary_playlist_files" class="summary_detailed"></div></div>';
const stats_summary_detailed_container = '<div id="stats_summary_detailed_container" class="background_color_E0_50">' + stats_summary_detailed_total + stats_summary_detailed_dirs + stats_summary_detailed_files +'</div>';
const stats_details_container = '<div id="stats_details_container" class="background_color_E0_50"></div>';
const stats = stats_summary + stats_summary_detailed_container + stats_summary_playlist_container + stats_details_container;
let dir_list_foot = '<section id="tfoot" class="background_color_D0_50 border_top"><div id="stats" class="text_color_111" title="Click to toggle additional information">'+ stats +'</div><div id="footer_links" class="has_background invert"> <ul class="has_popout_menu invert"><li id="open_in_content_pane" class="border_bottom text_color_111">Open Sidebar in Content Pane</li><li id="view_directory_source" class="text_color_111" data-kind="view_directory_source">View Sidebar Directory Source</li></ul></div></section>';
return dir_list_foot;
};
// Dir List Elements
const SidebarDirListEls = function() {
let dir_list_body = '<tbody id="tbody" class="background_color_DD_44 text_color_111" tabindex="0"></tbody>';
let sidebar_dir_list_els = '<section id="dir_list_wrapper"><table id="dir_list">'+ dir_list_body +'</table></section>';
return sidebar_dir_list_els;
};
// CONTENT PANE ELEMENTS
const ContentHeaderEls = function() {
let title_buttons_left = '<div id="title_buttons_left" class="title_left"><button id="reload_btn" tabindex="-1"><span></span></button><button id="prev_next_btns" class="split_btn" tabindex="-1"><span id="prev_btn"><span> </span></span><span id="next_btn"><span> </span></span></button></div>';
let title = '<div id="title" class=""><span></span></div>';
let title_buttons_right = '<div id="title_buttons_right" class="title_right"><button id="close_btn" tabindex="-1"><span></span></button><button id="scale" class="split_btn" tabindex="-1"><span id="decrease"> </span><span id="increase"> </span></button></div>';
let content_playlist = '<div id="content_playlist" class="playlist_entry_container border_bottom"><textarea id="content_playlist_textarea" rows="3" spellcheck="false" /></div>';
let content_title = '<div id="content_title" class="title border_bottom">'+ title_buttons_left + title + title_buttons_right +'</div>'+ content_playlist;
let content_header_els = '<header id="content_header"><div class="text_color_111 background_color_B0_30"><div>'+ content_title + ContentAudioEls() +'</div></div></header>';
return content_header_els;
};
// Content containers
const ContentEls = function() {
let content_grid = '<div id="content_grid" data-kind="grid"></div>';
let content_text = '<div id="content_text" class="background_color_DD_33"></div>';
let content_font = '<div id="content_font" class="content background_color_FF_11 text_color_111" spellcheck="false" data-kind="font">'+ ContentFontEls() +'</div>';
let content_image = '<div id="content_image_container" class="content background_color_FF_11" data-kind="image"><img id="content_image" tabindex="0"/></div>';
let content_video = '<video id="content_video" class="content background_color_FF_11 media" controls data-kind="video">Your browser does not support the video tag.</video>';
let content_pdf = '<embed id="content_pdf" class="content" name="plugin" tabindex="0" data-kind="pdf"></embed>';
let content_iframe = '<iframe id="content_iframe" class="content" name="content_iframe" sandbox="allow-scripts allow-same-origin allow-modals allow-popups" tabindex="0"></iframe>';
let content_els = '<div id="content_container" class="background_color_EE_22">'+ content_grid + content_text + content_font + content_image + content_pdf + content_video + content_iframe +'</div>';
return content_els;
};
// Content Audio Els
const ContentAudioEls = function() {
let prev_track = '<div id="prev_track" class="prev_next_track_btn audio_controls" title="Previous track"> </div>';
let next_track = '<div id="next_track" class="prev_next_track_btn audio_controls" title="Next track"> </div>';
let audio_player = '<audio id="audio" preload="auto" tabindex="0" controls controlsList="nofullscreen" >Sorry, your browser does not support HTML5 audio.</audio>';
// let audio_player = '<iframe id="audio_iframe" sandbox="allow-scripts allow-same-origin allow-modals allow-popups"></iframe>';
let loop = '<label id="loop_label"><input type="checkbox" id="loop" for="loop" name="loop" tabindex="0" />Loop</label>';
let shuffle = '<label id="shuffle_label"><input type="checkbox" id="shuffle" for="shuffle" name="shuffle" tabindex="0" />Shuffle</label>';
let audio_options = '<div id="audio_options">'+ loop + shuffle +'</div>';
let close_audio = '<div id="close_audio" class="audio_controls" title="Close audio"></div>';
let content_audio_playlist ='<div id="content_audio_playlist" class="playlist_entry_container border_bottom"><textarea id="content_audio_playlist_textarea" rows="3" spellcheck="false" /></div>';
let content_audio_title = '<div id="content_audio_title" title="Click to toggle .m3u playlist entry."><span></span></div>';
let content_audio_els = content_audio_title +'<div id="content_audio" class="border_bottom"><div id="audio_container">'+ prev_track + next_track + audio_player + close_audio +'</div>'+ audio_options +'</div>'+ content_audio_playlist;
return content_audio_els;
};
// Content Font Els
const ContentFontEls = function() {
let sample_string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />0123456789 [(!@#$%^&*;:)]';
// let sample_string = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />0123456789.,:;&@!#$%‰\'\"“‘”’()[]{}<>| ¦*/\^-–—_~…<br />ÆÁÂÀÄÃÅÇÐÉÊËÈÍÎÌÏÓÔÒÖÕŒÚÛÙÜÝŸ<br />æáâàäãåçðéêëèíîìïóôòöõœúûùüýÿfiflƒñÑßþÞ<br />†‡£¢¥Øø©®™¿¡«»¯´¶§•ªº¹³²‚„˜˛¸`·¯˘°¨⁄‹›<br />ı½¼¾+±×÷√=≈≠¬∞¤≤≥◊∆∂µ∏π∑Ω<br />■░▒▓│┤╣║╗╝┐└┴┬├─┼╚╔╩╦╠═╬┘┌█▄▀‗';
let specimen = '<div id="specimen" class="specimen border_bottom_x" contenteditable="true" tabindex="0">'+ sample_string +'</div>';
let specimen_2 = '<h1 id="specimen_2">Typography</h1><h4 id="specimen_2H4">The art of using types to produce impressions on paper, vellum, &c.</h4>';
let specimen_3 = '<h2 id="specimen_3">S P E C I M E N</h2>';
let specimen_3H3 = '<h3 id="specimen_3H3">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>';
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.';
let lorem = '<div id="lorem" class="lorem">'+ lorem_string +'</div>';
let lorem_2 = '<div id="lorem_2" class="lorem">'+ lorem_string +'</div>';
let lorem_3 = '<div id="lorem_3" class="lorem">'+ lorem_string +'</div>';
let specimen_strings = '<div id="specimen_string_2" class="hamburger border_bottom_x" contenteditable="true" tabindex="0">'+ specimen_2 +'</div><div id="specimen_string_3" class="hamburger border_bottom_x" contenteditable="true">'+ specimen_3 + specimen_3H3 +'</div><div id="lorem_strings" contenteditable="true" tabindex="0">'+ lorem + lorem_2 + lorem_3 +'</div>';
let font_specimen = '<div id="font_specimen">'+ specimen + specimen_strings +'</div>';
let glyph_viewer_info = '<div id="glyph_viewer_info" class="background_color_D0_50 border_bottom_x invert"><button id="save_svg_hidden">Save SVG</button><div></div><button id="save_svg">Save SVG</button></div>';
let glyph_viewer = '<div id="glyph_viewer" class="background_color_11_FF invert">'+ glyph_viewer_info +'</div>';
let content_font_els = font_specimen + ContentFontViewer() + glyph_viewer;
return content_font_els;
};
// Font Viewer
const ContentFontViewer = function() {
let glyphs_container = '<div id="glyphs_container"></div>';
let font_viewer = '<div id="font_viewer">'+ glyphs_container +'</div>';
return font_viewer;
};
// Iframe Dir Elements
const ContentIframeDirEls = function(parentLink) {
let parent_link_cell = '<div id="change_dirs" class="border_bottom background_color_B0_30 text_color_111"><span id="parent"><a href="'+ parentLink +'" class="text_color_111" style="padding-left:16px;" title="Go to parent directory">Parent Directory</a></span><span id="open_in_sidebar"><a href="" class="text_color_111" style="padding-right:16px;" title="Open this directory in sidebar">Open in Sidebar</a></span></div>';
let sorting_row = '<div id="sorting_row_1" class="border_bottom text_color_111 background_color_C0_40"><div class="sorting" id="sort_by_name" title="Sort by name"><span>Name</span></div><div class="sorting" id="sort_by_default" title="Default sort"><span>Default</span></div></div><div id="sorting_row_2" class="border_bottom background_color_C0_40 text_color_111"><div class="sorting" id="sort_by_ext" title="Sort by extension"><span>Ext</span></div><div class="sorting" id="sort_by_size" title="Sort by size"><span>Size</span></div><div class="sorting" id="sort_by_date" title="Sort by date"><span>Date</span></div><div class="sorting" id="sort_by_kind" title="Sort by kind"><span>Kind</span></div></div>';
let iframe_dir_els = '<header id="thead">'+ parent_link_cell + sorting_row +'</header><section id="iframe_dir_list_wrapper"><table id="dir_list"><tbody id="tbody" class="background_color_DD_44 text_color_111"></tbody></table></section>';
return iframe_dir_els;
};
// Warnings
const Warnings = function() {
let warning_close_font = '<div id="warning_close_font" class="warning">Are you sure you want to close the font preview?</div>';
let warning_unsaved_text = '<div id="warning_unsaved_text" class="warning">You have unsaved changes.</div>';
let warning_clear_text = '<div id="warning_clear_text" class="warning">Are you sure you want to clear all your text?</div>';
let warning_local_bookmark = '<div id="warning_local_bookmark" class="warning">Can\'t load local items from non-local pages. <br /> Please use your browser\'s bookmarks instead or enter the URL manually.</div>';
let warning_local_file = '<div id="warning_local_file" class="warning">Can\'t load local items from non-local pages.</div>';
let warning_close_playlist = '<div id="warning_close_playlist" class="warning">Are you sure you want to close the playlist?</div>';
let warning_local_playlist = '<div id="warning_local_playlist" class="warning">This playlist contains local files. <br /> Please reload this playlist from a local page in order to play them.</div>';
let warning_no_playlist = '<div id="warning_no_playlist" class="warning">Can’t make playlist: no qualified items found.</div>';
let warning_make_playlist = '<div id="warning_make_playlist" class="warning"><form id="make_playlist_form" action="#"><fieldset><div><input name="make_playlist" type="radio" id="media_files_only" checked><label for="media_files_only">All media files</label></div><div class="indent"><input name="make_playlist" type="radio" id="audio_files_only"><label for="audio_files_only">Audio files only</label></div><div class="indent"><input name="make_playlist" type="radio" id="video_files_only"><label for="video_files_only">Video files only</label></div><div><input name="make_playlist" type="radio" id="all_non_media_files"><label for="all_non_media_files">All non-media items</label></div><div><input name="make_playlist" type="radio" id="all_items"><label for="all_items">All items</label></div><div class="indent"><input name="make_playlist" type="radio" id="directories_only"><label for="directories_only">Directories only</label></div><div class="indent"><input name="make_playlist" type="radio" id="files_only"><label for="files_only">Files only</label></div></fieldset></form></div>';
let warning_buttons = '<div id="warning_buttons"><button id="warning_btn_dont_save">Don\'t Save</button><button id="warning_btn_cancel" >Cancel</button><button id="warning_btn_clear">Clear</button><button id="warning_btn_save">Save</button><button id="warning_btn_ok">OK</button></div>';
let warnings = '<div id="warnings_header" class="text_color_111 background_color_D0_50"><h3 id="warning_header"><span>Warning:</span></h3><h3 id="make_playlist_header"><span>Make Playlist/Filelist</span></h3></div><div id="warnings" class="text_color_111 background_color_D0_50">'+ warning_close_font + warning_unsaved_text + warning_clear_text + warning_local_bookmark + warning_local_file + warning_close_playlist + warning_local_playlist + warning_no_playlist + warning_make_playlist +'</div><div id="warning_buttons_container" class="background_color_E0_60">'+ warning_buttons +'</div>';
return warnings;
};
// Help
const $content_help = `
<header class="title text_color_111 border_bottom_x background_color_B0_30"><span>HELP</span><button id="close_help" class="focus"><span>Close</span></button></header>
<section><p style="text-align:center; font-weight:bold;"><a href="https://openuserjs.org/scripts/gaspar_schot/Supercharged_Local_Directory_File_Browser" target="_blank">Script Homepage (openuserjs.org)</a></p></section>
<table id="content_help" class="background_color_C0_40 text_color_111 border_top_x border_right_x border_left_x">
<tbody class="">
<tr><td class="kbd_shortcut text_color_111 border_right_x">KEY</td><td class="help_description text_color_111">DESCRIPTION</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">↑</kbd> or <kbd class="background_color_E0_60">↓</kdb></kbd></td><td class="help_description text_color_111">Select the previous/next sidebar item or previewed directory item.<br />
If audio is playing, and the previous/next file is also audio, the file will be highlighted but not loaded in the audio player; press <kbd class="background_color_E0_60">return</kbd> to load it.</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">←</kbd> or <kbd class="background_color_E0_60">→</kbd></kbd></td><td class="help_description text_color_111">Select prev/next item of the same kind as the current selection.<br />
If current selection is a media file, select and begin playback of the next media item.</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">⌥</kbd> + <kbd class="background_color_E0_60">←</kbd> or <kbd class="background_color_E0_60">→</kbd></kbd></td><td class="help_description text_color_111">Skip audio/video ±10s</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">⌥</kbd> + <kbd class="background_color_E0_60">⇧</kbd> + <kbd class="background_color_E0_60">←</kbd> or <kbd class="background_color_E0_60">→</kbd></kbd></td><td class="help_description text_color_111">Skip audio/video ±30s</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">⌘/Ctrl</kbd> + <kbd class="background_color_E0_60">↑</kbd></kbd></td><td class="help_description text_color_111">Go to parent directory</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">⌘/Ctrl</kbd> + <kbd class="background_color_E0_60">↓</kbd></kbd></td><td class="help_description text_color_111">Open selected sidebar directory</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">Escape</kbd></td><td class="help_description text_color_111">Close menus and help, unfocus textareas and content pane, etc.</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">Return</kbd></td><td class="help_description text_color_111">Open selected directory, select file, or pause/play media.</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">Space</kbd></td><td class="help_description text_color_111">Pause/Play media files (if media player loaded).</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">Tab</kbd></td><td class="help_description text_color_111">Toggle focus between sidebar and content pane.</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">⌘/Ctrl</kbd> + <kbd class="background_color_E0_60">D</kbd></td><td class="help_description text_color_111">Toggle file details (size, date modified, kind) in some index page types.</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">⌘/Ctrl</kbd> + <kbd class="background_color_E0_60">E</kbd></td><td class="help_description text_color_111">Toggle main menu.</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">⇧</kbd> + <kbd class="background_color_E0_60">⌘/Ctrl</kbd> + <kbd class="background_color_E0_60">E</kbd></td><td class="help_description text_color_111">Show text editor.</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">⌘/Ctrl</kbd> + <kbd class="background_color_E0_60">G</kbd></td><td class="help_description text_color_111">Show or reload image or font grids.</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">⌘/Ctrl</kbd> + <kbd class="background_color_E0_60">I</kbd></td><td class="help_description text_color_111">Toggle invisible files.</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">⇧</kbd> + <kbd class="background_color_E0_60">⌘/Ctrl</kbd> + <kbd class="background_color_E0_60">O</kbd></td><td class="help_description text_color_111">Open selected sidebar item in new window/tab.</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">⌘/Ctrl</kbd> + <kbd class="background_color_E0_60">R</kbd></td><td class="help_description text_color_111">Reload grids and previewed content, reset scaled images/fonts, reset media files to beginning.</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">⌘/Ctrl</kbd> + <kbd class="background_color_E0_60">W</kbd></td><td class="help_description text_color_111">Close previewed content (doesn't work in all browsers; use close button instead), or close window if no content is being previewed.</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">⌘/Ctrl</kbd> + <kbd class="background_color_E0_60">⇧</kbd> + <kbd class="background_color_E0_60"><</kbd> or <kbd class="background_color_E0_60">></kbd></td><td class="help_description text_color_111">Scale preview items and grids.</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">⌘/Ctrl</kbd> + <kbd class="background_color_E0_60">\\</kbd></td><td class="help_description text_color_111">Toggle sidebar.</td></tr>
<tr><td class="kbd_shortcut text_color_111 border_right_x"><kbd class="background_color_E0_60">⇧</kbd> + <kbd class="background_color_E0_60">⌘/Ctrl</kbd> + <kbd class="background_color_E0_60">\\</kbd></td><td class="help_description text_color_111">Toggle text editor split view.</td></tr>
</tbody>
</table>
<div>Main Menu
<dl>
<dt>Open Playlist/Filelist</dt>
<dd>The script supports basic .m3u playlists of audio or video files, as well as custom "filelists" which can include directories and any file types supported by the browser.</dd>
</dl>
</div>`;
// MD Build UI
const TextEditingUIEls = function() {
const toggle_theme_btn = '<li id="toggle_theme" class="toolbar_icon has_background" title="Toggle Editor Theme"></li>';
const toggle_split_btn = '<li id="toggle_split" class="toolbar_icon has_background" title="Toggle Split"></li>';
const toggle_src_btn = '<li id="show_source" class="toolbar_icon has_background" title="Toggle Source"></li>';
const toggle_preview_btn = '<li id="show_preview" class="toolbar_icon has_background" title="Toggle Preview"></li>';
const toggle_HTML_btn = '<li id="show_html" class="toolbar_icon has_background" title="Toggle HTML"></li>';
const sync_scroll_el = '<li id="sync_scroll"><input name="sync_scroll" type="checkbox"><label for="sync_scroll">Sync Scroll</label></li>';
const clear_text_btn = '<li id="clear_text" title="Clear Text">Clear</li>';
const save_btn = '<li id="save_btn" title=""><ul class="menu has_popout_menu"><li id="save_text" class="border_right border_bottom" title="Save source text"><span id="save_text_link" target="_blank">Save Source</span></li><li id="save_HTML" class="border_right" title="Save rendered html"><span id="save_HTML_link" target="_blank">Save HTML</span></li></ul></li>';
const toolbar = '<table id="toolbar"><tbody><tr><td><ul id="toolbar_buttons">'+ toggle_theme_btn + toggle_src_btn + toggle_preview_btn + toggle_split_btn + toggle_HTML_btn + sync_scroll_el + save_btn + clear_text_btn +'</ul></td></tr></tbody></table>';
const text_source = '<textarea id="text_source" class="background_color_DD_33 text_color_111" tabindex="0"></textarea>';
const text_preview = '<div id="text_preview" class="background_color_DD_33 text_color_111 markdown-body" tabindex="0"></div>';
const html_preview = '<div id="html_preview" class="background_color_DD_33 text_color_111" tabindex="0"></div>';
const text_editing_UI = toolbar +'<div id="text_container">'+ text_source + text_preview + html_preview +'<div id="text_editing_handle"></div></div>';
return text_editing_UI;
};
// ASSEMBLE SIBEBAR & CONTENT PANE ELEMENTS
const MainContent = function() {
let width = Number(getQuery('width'));
let handle = '<div id="handle"></div>';
let toggle_sidebar = '<div id="toggle_sidebar" class="invert" title="Toggle Sidebar"></div>';
let sidebar = '<div id="sidebar" class="background_color_C0_40">' + SidebarDirListEls() + SidebarFooterEls() +'</div>';
let sidebar_wrapper = '<section id="sidebar_wrapper" class="border_right" style="width:'+ width +'%">'+ SidebarHeaderEls() + sidebar + handle + toggle_sidebar +'</section>';
let content_pane = '<section id="content_pane" style="width:'+ ( 100 - width ) +'%">'+ ContentHeaderEls() + ContentEls() +'</section>';
let utilities = '<section id="utilities"><div id="warnings_container" class="">'+ Warnings() +'</div><div id="help_container" class="background_color_E0_60">'+ $content_help +'</div></section>';
let main_content = '<main id="main_content">'+ sidebar_wrapper + content_pane + utilities +'</main>';
return $(main_content);
};
// DEFINE Content Elements
const $main_content = MainContent();
const $dir_list_body = $main_content.find('#tbody');
const $dir_list = $main_content.find('#dir_list');
const $content_pane = $main_content.find('#content_pane');
const $audio_player = $main_content.find('#audio');
const $content_grid = $main_content.find('#content_grid');
const $content_font = $main_content.find('#content_font');
const $content_image_container = $main_content.find('#content_image_container');
const $content_image = $content_image_container.find('img');
const $content_video = $main_content.find('#content_video');
const $content_iframe = $main_content.find('#content_iframe');
// SVG UI ICONS
// auto format dark icon colr
function SVG_UI_Icon(icon_name) {
let svg = SVG_UI_Icons[icon_name];
return 'url("data:image/svg+xml;utf8,'+ svg +'")';
}
const SVG_UI_Icons = {
'arrow': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23222222\' d=\'M4 4l12 6-12 6z\' /></svg>',
'arrow_dark': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23DDDDDD\' d=\'M4 4l12 6-12 6z\' /></svg>',
'bookmark': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23222222\' d=\'M2 2c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v18l-8-4-8 4V2zm2 0v15l6-3 6 3V2H4z\' /></svg>',
'bookmark_dark': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23DDDDDD\' d=\'M2 2c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v18l-8-4-8 4V2zm2 0v15l6-3 6 3V2H4z\' /></svg>',
'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>',
'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(16,16,16);fill-rule:nonzero;\'/></g></svg>',
'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(16,16,16);fill-rule:nonzero;\'/></g></svg>',
'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(16,16,16);fill-rule:nonzero;\'/></g></svg>',
'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(16,16,16);fill-rule:nonzero;\'/></g></svg>',
'document': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23222222\' d=\'M4 18h12V6h-4V2H4v16zm-2 1V0h12l4 4v16H2v-1z\' /></svg>',
'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>',
'folder': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23222222\' 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>',
'grid': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23222222\' d=\'M0 0h9v9H0V0zm2 2v5h5V2H2zm-2 9h9v9H0v-9zm2 2v5h5v-5H2zm9-13h9v9h-9V0zm2 2v5h5V2h-5zm-2 9h9v9h-9v-9zm2 2v5h5v-5h-5z\' /></svg>',
'grid_dark': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23DDDDDD\' d=\'M0 0h9v9H0V0zm2 2v5h5V2H2zm-2 9h9v9H0v-9zm2 2v5h5v-5H2zm9-13h9v9h-9V0zm2 2v5h5V2h-5zm-2 9h9v9h-9v-9zm2 2v5h5v-5h-5z\' /></svg>',
'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>',
'grid_loaded_dark': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%2344BBBB\' d=\'M0 0h9v9H0V0zm2 2v5h5V2H2zm-2 9h9v9H0v-9zm2 2v5h5v-5H2zm9-13h9v9h-9V0zm2 2v5h5V2h-5zm-2 9h9v9h-9v-9zm2 2v5h5v-5h-5z\' /></svg>',
'ignored': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23222222\' 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>',
'ignored_dark': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23BBBBBB\' 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>',
'menu': '<svg width=\'100%\' height=\'100%\' viewBox=\'0 0 13 10\' version=\'1.1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' xml:space=\'preserve\' xmlns:serif=\'http://www.serif.com/\' style=\'fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;\'> <rect x=\'0\' y=\'0\' width=\'13\' height=\'2\' style=\'fill:rgb(34,34,34);\'/><rect x=\'0\' y=\'4\' width=\'13\' height=\'2\' style=\'fill:rgb(34,34,34);\'/><rect x=\'0\' y=\'8\' width=\'13\' height=\'2\' style=\'fill:rgb(34,34,34);\'/></svg>',
'minus': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><rect fill=\'%23222222\' x=\'1\' y=\'8\' width=\'18\' height=\'4\' /></svg>',
'multiply': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23222222\' d=\'M10,7l6,-6l3,3l-6,6l6,6l-3,3l-6,-6l-6,6l-3,-3l6,-6l-6,-6l3,-3l6,6Z\'/></svg>',
'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>',
'plus': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23222222\' 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>',
'prev_next_track': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23222222\' d=\'M13,5l2,0l0,10l-2,0l0,-10Zm-8,0l8,5l-8,5l0,-10Z\'/></svg>',
'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>',
'spinner': '<?xml version=\'1.0\' encoding=\'utf-8\'?><svg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' style=\'margin: auto; background: none; display: block; shape-rendering: auto;\' width=\'200px\' height=\'200px\' viewBox=\'0 0 100 100\' preserveAspectRatio=\'xMidYMid\'><g transform=\'translate(50 50)\'><g transform=\'rotate(44.0329)\'><animateTransform attributeName=\'transform\' type=\'rotate\' values=\'0;45\' keyTimes=\'0;1\' dur=\'0.25s\' repeatCount=\'indefinite\'/><path d=\'M29.491524206117255 -5.5 L37.491524206117255 -5.5 L37.491524206117255 5.5 L29.491524206117255 5.5 A30 30 0 0 1 24.742744050198738 16.964569457146712 L24.742744050198738 16.964569457146712 L30.399598299691117 22.621423706639092 L22.621423706639096 30.399598299691114 L16.964569457146716 24.742744050198734 A30 30 0 0 1 5.5 29.491524206117255 L5.5 29.491524206117255 L5.5 37.491524206117255 L-5.499999999999997 37.491524206117255 L-5.499999999999997 29.491524206117255 A30 30 0 0 1 -16.964569457146705 24.742744050198738 L-16.964569457146705 24.742744050198738 L-22.621423706639085 30.399598299691117 L-30.399598299691117 22.621423706639092 L-24.742744050198738 16.964569457146712 A30 30 0 0 1 -29.491524206117255 5.500000000000009 L-29.491524206117255 5.500000000000009 L-37.491524206117255 5.50000000000001 L-37.491524206117255 -5.500000000000001 L-29.491524206117255 -5.500000000000002 A30 30 0 0 1 -24.742744050198738 -16.964569457146705 L-24.742744050198738 -16.964569457146705 L-30.399598299691117 -22.621423706639085 L-22.621423706639092 -30.399598299691117 L-16.964569457146712 -24.742744050198738 A30 30 0 0 1 -5.500000000000011 -29.491524206117255 L-5.500000000000011 -29.491524206117255 L-5.500000000000012 -37.491524206117255 L5.499999999999998 -37.491524206117255 L5.5 -29.491524206117255 A30 30 0 0 1 16.964569457146702 -24.74274405019874 L16.964569457146702 -24.74274405019874 L22.62142370663908 -30.39959829969112 L30.399598299691117 -22.6214237066391 L24.742744050198738 -16.964569457146716 A30 30 0 0 1 29.491524206117255 -5.500000000000013 M0 -20A20 20 0 1 0 0 20 A20 20 0 1 0 0 -20\' fill=\'%237c7c7c\'/></g></g></svg>',
'toggle': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 20 20\'><path fill=\'%23222222\' 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=\'%23222222\' 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>',
};
function SVG_UI_File_Icon(icon_name) {
switch(icon_name) {
case 'favicon':
return 'iVBORw0KGgoAAAANSUhEUgAAAIAAAACAAgMAAAC+UIlYAAAACVBMVEUmRcmZzP8zmf8pVcWPAAAAAXRSTlMAQObYZgAAAFBJREFUeF7tyqERwDAMBEE3mX5UiqDmqwwziTPHjG7xrmzrLFtRaApDIRiKQlMYCsFQFJrCUAiGotAU5hTA1WB4fhkMBsOJwWAwgHvB8CHpBcTbpxy4RZNvAAAAAElFTkSuQmCC';
case 'file_icon_dir_default': // default chrome dir and file icons
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= ")';
case 'file_icon_file_default':
return 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ")';
default:
return 'url("data:image/svg+xml;utf8,'+ SVG_UI_File_Icons[icon_name] +'")';
}
}
const SVG_UI_File_Icons = { // n.b.: order is important
'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>',
'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>',
'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>',
'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>',
'file_icon_dirinvisible': '<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>',
'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>',
'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>',
'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>',
'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>',
'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>',
'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>',
'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>',
'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>',
'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>',
'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>',
'file_icon_ignoredimage': '<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>',
'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>',
'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>',
'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>',
'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>',
'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>',
'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>',
// the following are the same:
'file_icon_bin': '<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>',
'file_icon_other': '<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>',
'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>'
};
// Programatically add File icon CSS rules
function CSS_UI_Icon_Rules() {
let rules = '', kind, class_name;
rules += '#menu ul a::before { background-image:'+ SVG_UI_File_Icon('file_icon_file') +'; }';
rules += '#menu ul a[href^="file"]::before { background-image:'+ SVG_UI_File_Icon('file_icon_dir') +'; }';
rules += '#menu ul a[href^="http"]::before { background-image:'+ SVG_UI_File_Icon('file_icon_htm') +'; }';
rules += 'body:not(.use_custom_icons) #dir_list tr.dir a.icon span::before { background-image:'+ SVG_UI_File_Icon('file_icon_dir_default') + '; background-size:auto 13px; }';
rules += 'body:not(.use_custom_icons) #dir_list tr.file:not(.app) a.icon span::before { background-image:'+ SVG_UI_File_Icon('file_icon_file_default') + '; background-size:auto 13px; }';
for ( let icon in SVG_UI_File_Icons ) {
kind = icon.slice(icon.lastIndexOf('_') + 1);
class_name = kind;
// exceptions
if ( kind === 'dirinvisible' ) { class_name = 'dir.invisible'; }
if ( kind === 'ignoredimage' ) { class_name = 'ignored_image'; }
if ( /alias|symlink/.test(kind) ) { class_name = 'link'; }
// add rules for dir_list items, content_header, stats details:
rules += 'body.use_custom_icons #dir_list tr.'+ class_name +' a.icon span::before, #content_pane[data-content="has_'+ class_name +'"] #title span::before, body.use_custom_icons #stats .stats_kind.'+ class_name +' span.has_icon_before::before { background-image: url("data:image/svg+xml;utf8,'+ SVG_UI_File_Icons['file_icon_'+kind] +'"); }';
}
return rules;
}
// Text Editing UI Icons
function SVG_Text_Editing_UI_Icon(icon_name) {
let svg = SVG_Text_Editing_UI_Icons[icon_name];
return 'url("data:image/svg+xml;utf8,'+ svg +'")';
}
const SVG_Text_Editing_UI_Icons = {
'toggle_theme': '<svg viewBox=\'0 0 16 16\' xmlns=\'http://www.w3.org/2000/svg\' fill-rule=\'evenodd\' clip-rule=\'evenodd\' stroke-linejoin=\'round\' stroke-miterlimit=\'2\'><path d=\'M8 0c4.415 0 8 3.585 8 8s-3.585 8-8 8-8-3.585-8-8 3.585-8 8-8zm0 2c3.311 0 6 2.689 6 6s-2.689 6-6 6V2z\' fill=\'%23333\'/></svg>',
'show_markdown': '<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'100\' height=\'60\'><g fill=\'%23333\'><path d=\'M42.215 60l.17-46.24h-.255L30.06 60h-7.99L10.255 13.76H10L10.169 60H.905V-.18H14.59l11.56 44.03h.34L37.794-.18H52.16V60h-9.945zM99.589 29.996c0 9.519-1.997 16.901-5.992 22.142C89.602 57.38 83.722 60 75.959 60H60.914V-.18h15.13c7.706 0 13.558 2.65 17.553 7.948 3.995 5.299 5.992 12.708 5.992 22.228zm-10.2 0c0-3.57-.326-6.686-.978-9.35-.651-2.663-1.572-4.873-2.762-6.63-1.19-1.756-2.607-3.073-4.25-3.953-1.645-.878-3.43-1.317-5.355-1.317h-4.845v42.33h4.845c1.926 0 3.711-.438 5.355-1.317 1.643-.878 3.06-2.195 4.25-3.953 1.189-1.756 2.11-3.952 2.762-6.587.651-2.637.978-5.709.978-9.223z\'/></g></svg>',
'show_source': '<svg viewBox=\'0 0 22 14\' xmlns=\'http://www.w3.org/2000/svg\' fill-rule=\'evenodd\' clip-rule=\'evenodd\' stroke-linejoin=\'round\' stroke-miterlimit=\'2\'><path fill=\'none\' d=\'M0 0h21.996v14H0z\'/><clipPath id=\'a\'><path d=\'M0 0h21.996v14H0z\'/></clipPath><g clip-path=\'url(%23a)\' fill=\'%23333\'><path d=\'M0 7.393v-.786l6.062-3.5.75 1.3L2.32 7l4.492 2.593-.75 1.3L0 7.393zM21.996 6.607v.786l-6.062 3.5-.75-1.3L19.676 7l-4.492-2.593.75-1.3 6.062 3.5zM15.15 1.313l-1.3-.75-7 12.124 1.3.75 7-12.124z\'/></g></svg>',
'show_preview': '<svg viewBox=\'0 0 16 16\' xmlns=\'http://www.w3.org/2000/svg\' fill-rule=\'evenodd\' clip-rule=\'evenodd\' stroke-linejoin=\'round\' stroke-miterlimit=\'2\'><path d=\'M10 2.5V1H0v1.5h4V15h2V2.5h4zM9 6.5V8h2v4.053c0 2.211 1.547 3.442 3 3.442.989 0 1.556-.258 2-.495v-1.5c-.565.257-.882.376-1.507.376-.847 0-1.493-.474-1.493-1.876V8h2.5V6.5H13v-3h-1.98v3H9z\' fill=\'%23333\' fill-rule=\'nonzero\'/></svg>',
'show_html': '<svg viewBox=\'0 0 22 16\' xmlns=\'http://www.w3.org/2000/svg\' fill-rule=\'evenodd\' clip-rule=\'evenodd\' stroke-linejoin=\'round\' stroke-miterlimit=\'2\'><path fill=\'none\' d=\'M0 0h21.022v16H0z\'/><clipPath id=\'a\'><path d=\'M0 0h21.022v16H0z\'/></clipPath><g clip-path=\'url(%23a)\' fill=\'%23333\'><path d=\'M7.732.222L9.5 1.99 3.49 8l6.01 6.01-1.768 1.768L-.046 8 7.732.222zM13.268 15.778L11.5 14.01 17.51 8 11.5 1.99 13.268.222 21.046 8l-7.778 7.778z\'/></g></svg>',
'toggle_split': '<svg viewBox=\'0 0 16 16\' xmlns=\'http://www.w3.org/2000/svg\' fill-rule=\'evenodd\' clip-rule=\'evenodd\' stroke-linejoin=\'round\' stroke-miterlimit=\'2\'><path d=\'M0 0v16h16V0H0zm14 14H9V2h5v12zm-7 0H2V2h5v12z\' fill=\'%23333\' fill-rule=\'nonzero\'/></svg>',
'save_btn': '<svg viewBox=\'0 0 16 16\' xmlns=\'http://www.w3.org/2000/svg\' fill-rule=\'evenodd\' clip-rule=\'evenodd\' stroke-linejoin=\'round\' stroke-miterlimit=\'2\'><g fill=\'%23333\'><path d=\'M16 0v10.02L14 10V2H2v8l-2 .02V0h16z\' fill-rule=\'nonzero\'/><path d=\'M7 5h2v9H7z\'/><path d=\'M3.757 11.757l1.415-1.414L8 13.172l2.828-2.829 1.415 1.414L8 16l-4.243-4.243z\'/></g></svg>',
'save_btn_edited': '<svg viewBox=\'0 0 16 16\' xmlns=\'http://www.w3.org/2000/svg\' fill-rule=\'evenodd\' clip-rule=\'evenodd\' stroke-linejoin=\'round\' stroke-miterlimit=\'2\'><g fill=\'%23DD2222\'><path d=\'M16 0v10.02L14 10V2H2v8l-2 .02V0h16z\' fill-rule=\'nonzero\'/><path d=\'M7 5h2v9H7z\'/><path d=\'M3.757 11.757l1.415-1.414L8 13.172l2.828-2.829 1.415 1.414L8 16l-4.243-4.243z\'/></g></svg>'
};
//***** END UI ELEMENTS
//***** STYLES *****//
// DEFINE STYLES
const $warning_styles =
// WARNINGS
'#warnings_container { width:26em; transform:translate(-50%, 0); display:none; flex-direction:column; border-radius:0 0 3px 3px; position:absolute; top:0; left:50%; z-index:9999; box-shadow:0px 2px 12px 0 #333; font-size:0.875em; color:#111; overflow:hidden; }' + // table
'body.has_warning #warnings_container { display:flex; }' +
// warnings thead
'#warnings_header { padding:1rem 1.5rem; background-position:left 1.25rem center; background-repeat:no-repeat; background-size:24px; }' +
'#warnings_container:not(.warning_make_playlist) #warnings_header { background-image:'+ SVG_UI_Icon('error') +'; }' +
'#warnings_header h3 { display:none; margin:0; text-indent:2.25em; }' +
'#warnings_container:not(.warning_make_playlist) h3#warning_header, #warnings_container.warning_make_playlist h3#make_playlist_header { display:block;}' +
'body#top.edited #warnings_container.unloading h3::before { content: "Text Editor: " }' +
// warnings tbody
'#warnings .warning { padding: 0 1.5rem 1rem; display:none; hyphens:none; }' + // tbody
// warnings tfoot
'#warning_buttons_container { padding:1rem 1.5rem; }' +
'#warning_buttons { display:flex; flex-direction:row; }' +
'#warning_buttons button { min-width:4em; display:none; font-size:1em; }' +
'button.focus, button:focus { background-color: #0E4399; color: #EEE; outline:none; }' +
'#warning_btn_dont_save { margin-right: auto; }' + // button
'#warning_btn_cancel, #warning_btn_clear, #warning_btn_save { margin-left: 0.5rem; }'+ // button
'#warning_btn_ok { margin-left:auto; }'+ // button
'#warnings_container.warning_close_font #warning_close_font, #warnings_container.warning_close_playlist #warning_close_playlist, #warnings_container.unloading #warning_unsaved_text, #warnings_container.unloading #warning_btn_dont_save, #warnings_container.unloading #warning_btn_cancel, #warnings_container.unloading #warning_btn_save { display:inline-block; }'+ // button
'#warnings_container.clear #warning_buttons { justify-content:space-between; }'+
'#warnings_container.clear #warning_clear_text, #warnings_container.clear #warning_btn_cancel, #warnings_container.clear #warning_btn_clear { display:inline-block; }'+
'#warnings_container.warning_local_bookmark #warning_local_bookmark, #warnings_container.warning_local_bookmark #warning_btn_ok { display:inline-block; margin-left:auto; }'+
'#warnings_container.warning_local_file #warning_local_file, #warnings_container.warning_local_file #warning_btn_ok { display:inline-block; margin-left:auto; }'+
'#warnings_container.warning_close_font #warning_btn_ok { display:inline-block; margin-left:auto; }'+
'#warnings_container.warning_close_font #warning_btn_cancel { display:inline-block; }'+
'#warnings_container.warning_close_playlist #warning_btn_ok { display:inline-block; margin-left:auto; }'+
'#warnings_container.warning_close_playlist #warning_btn_cancel { display:inline-block; }'+
'#warning_make_playlist fieldset { margin:0; padding:0; border:0; }'+
'#warning_make_playlist fieldset div { padding:0 0 2px; }'+
'#warning_make_playlist .indent { text-indent:2em; }'+
'#warning_make_playlist input { margin-right:6px; }'+
'#warnings_container.warning_make_playlist #warning_make_playlist { display:flex; flex-direction:column; }'+
'#warnings_container.warning_make_playlist #warning_btn_ok, #warnings_container.warning_make_playlist #warning_btn_cancel { display: inline-block; }' +
'#warnings_container.warning_no_playlist #warning_no_playlist, #warnings_container.warning_no_playlist #warning_btn_ok { display: inline-block; }' +
'#warnings_container.warning_local_playlist #warning_local_playlist, #warnings_container.warning_local_playlist #warning_btn_ok { display:inline-block; margin-left:auto; }'
;
var $main_styles =
':root, html, body { margin:0; padding:0; width:100%; max-width:100%; height:100vh; overflow:hidden; border:0; border-radius:0; font-family:'+ $settings.UI_font +'; font-size:'+ $settings.UI_font_size +'; hyphens:auto; display:flex; }' +
'table { width:100%; border:0; border-collapse: collapse; }' +
'#sidebar_wrapper li, #toolbar li { list-style:none; }' + //
'a, a:hover { text-decoration: none !important; }' +
'button { padding:2px 6px; border:solid 1px #333; border-radius:3px; cursor:pointer; height:18px; font-family:'+ $settings.UI_font +' !important; font-size:1em !important; line-height:0; }' +
'button:focus, textarea:focus, audio:focus { outline:none; }' +
'#main_content { width:100%; display:flex; flex-direction:row; overflow:hidden; }' + // table with initial height
'#handle { position:absolute; top:0; bottom:0; z-index:1; cursor:col-resize; right:-4px; width:7px; }' +
// OVERLAY
'body.has_overlay #handle { z-index:9999; }' +
'body.has_warning::before, body.has_overlay::before { content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:9998; -webkit-user-select:none; -moz-user-select:none; user-select:none; }' +
// WARNING STYLES
$warning_styles +
// HELP STYLES
'#help_container { display:none; padding: 0 1em 1em; overflow:scroll; position:absolute; top:0; right:0; bottom:0; left:0; z-index:9998; contain:strict; }' + // tr
'#help_container header { font-size:0.875rem; text-align:center; margin-right:calc(-1em - 2px); margin-left:calc(-1em - 2px); }' + //
'#help_container header > span { display:inline-block; padding:6px; font-weight:bold; }' + //
'#help_container tr { display:flex !important; border-bottom:solid 1px #666; }' + // td
'#help_container td { vertical-align:top; }' + // td
'#content_help { margin:1em auto; width:auto; overflow:auto; }' + // table
'#close_help { float:right; margin-left:-100% !important; margin:4px 6px; }' + //
'#content_help tbody { font-size:0.875rem; padding:8px; overflow:auto; }' + //
'#content_help td.kbd_shortcut { text-align:right; width:33%; padding:4px 9px 4px 6px; }' + // td
'#content_help td.help_description { width:66%; padding:4px 6px 4px 12px; }' + // td
'#content_help kbd { display:inline-block; min-width:1em; margin:2px; padding:2px 6px; border:solid 1px #888; border-radius: 3px; text-align:center; font-family:inherit; font-size:0.875em; }' +
//***** SIDEBAR STYLES *****//
'#sidebar_wrapper { min-width:220px; padding:0; position:relative; z-index:1; display:flex; flex-direction:column; }' +
'#sidebar { overflow:hidden; font-size:0.875rem; display:flex; flex-direction:column; flex-basis:100%; }' +
'#sidebar_header { font-size:0.875rem; position:relative; z-index:3; user-select:none; -webkit-user-select:none; display:flex; flex-direction:column; }' +
'#sidebar_title { font-weight:normal; display:flex; flex-direction:row; }' +
'#sidebar_title div { padding: 4px 6px; text-align:center; letter-spacing:0.5em; text-indent:0.75em; flex-basis:100%; }' +
'#sidebar_header_body { display:flex; flex-direction:column; }' +
'#toggle_sidebar { position:absolute; top:0; right:0; cursor:pointer; width:24px; height:21px; z-index:9997; background-image:'+ SVG_UI_Icon('toggle') +'; background-size:18px; background-position:center; }' +
'#sidebar ul { -webkit-margin-before:0em !important; -webkit-margin-after:0em !important; -webkit-padding-start:0em; }' +
'#sidebar_menus { cursor:pointer; display:flex; flex-direction:row; }' +
// PARENT MENU
'#parent_dir_menu { flex-basis:24px; max-width:24px; min-width:24px; padding:0; position:relative; }' +
'#parent_dir_nav { margin:0; padding:0; display:block; position:absolute; top:0; right:0; bottom:0; left:0; }' +
'#parent_dir_nav a { height:100%; padding:0; text-align:center; background-position:center; background-repeat:no-repeat; background-size:12px; }' +
// PARENTS MENU
'#parents_dir_menu { padding:0; flex-grow:1; }' +
'#parents_dir_nav { margin:0; padding:0; display:block; line-height:1.4; }' + // nav
'#current_dir_path { cursor:pointer; font-weight:bold; hyphens:none; padding:4px 6px 4px 6px; text-align:center; word-break:break-word; z-index:9998; }' +
'#parents_links { margin:0; padding:0; display:none; position:absolute; right:0; left:0; box-shadow: 0px 4px 6px -3px #333; z-index:9998; }' + // ul
'#parents_links a { margin:0; padding:4px 8px; display:block; }' +
// MAIN MENU
'#menu_container { display:flex; flex-direction:column; justify-content:center; flex-basis:24px; max-width:24px; min-width:24px; padding:0; }' +
'#menu_nav { margin:0; padding:0; display:block; cursor:pointer; }' + // nav
'#menu_nav div { width:24px; background-image:'+ SVG_UI_Icon('menu') + '; background-position:center; background-repeat:no-repeat; background-size:13px; }' +
'#menu { display:none; margin:0; padding:0; position:absolute; right:0;left:0; zindex:9998; box-shadow: 0px 4px 6px -3px #333; z-index:9998; }' + // ul
'#menu li.has_submenu { position:relative; background-position:right 6px center; background-repeat:no-repeat; background-size:12px; }' + // right triangle icon
'#menu li.bookmark a::before { content:""; width:24px; height: 12px; background-size:12px; }' + // bookmark icon
'.submenu { display:none; margin:0; padding:0; position:absolute; top:-1px !important; left:100%; right:0; width:100%; box-shadow:0px 4px 6px -3px #333; width:100%; max-width: 240px; }' + // ul
'#menu ul.submenu li a { margin:0; padding:6px 8px 6px 0; }' +
'#menu input { width:0; float:left; }' +
'.menu_item { margin:0; padding:6px 8px 6px 0; display:flex; }' +
'.menu_item::before { content:""; width:24px; height:9px; margin:2px 0 -2px; display:inline-block; background-position:center; background-repeat:no-repeat; }' +
// SIDEBAR BUTTONS
'#sidebar_buttons { position:relative; display:flex; flex-direction:row; }' +
'#sidebar_buttons_left { padding:6px; }' +
'#show_details { margin-top:0; margin-right:0.5em; padding:0 4px 0 4px; }' +
'#show::before { content:"Show "; }' +
'#show_invisibles_container { cursor:pointer; display:inline-flex; vertical-align:text-top; padding:0; height:100%; }' +
'#show_invisibles { cursor:pointer; margin:0 4px 0 0; }' +
'#show_invisibles:hover span { font-weight:bold; }' +
// Grid Btn
'#grid_btn { display:none; margin:0 0 0 auto; padding:0; width:24px; position:relative; z-index:9997; background-color:inherit; background-position:center; background-size:14px; cursor:pointer; outline:none; }' +
'#grid_btn ul { display:none; margin:0; padding:0; padding-right:24px; padding-left:0px; position:absolute; top:-1px; right:-1px; background-position:right 5px top 8px; background-repeat:no-repeat; background-size:14px; box-shadow:0px 4px 6px -3px #333; }' +
'#grid_btn ul li { padding:4px 6px; text-align:right; width:100%; white-space:pre; box-sizing:border-box; }' +
// SORTING ITEMS
'#sorting_row_1 { display:flex; cursor:pointer; justify-content:space-between; flex-direction:row; }' +
'#sorting_row_2 { display:none; cursor:pointer; justify-content:space-between; flex-direction:row; }' +
'#sorting_row_1 div { width:50%; }' +
'#sorting_row_2 div { width:25%; }' +
'#sorting_row_1 div, #sorting_row_2 div { flex-grow:1; padding:0; }' +
'#sorting .sorting { white-space:pre; }' +
'#sorting_row_1 span { display:inline-block; padding:6px 0; }' +
'#sorting_row_2 span { display:inline-block; padding:0 0 6px 0; }' +
'.sorting:hover span { font-weight:bold; }' + //
'.sorting span::before, .sorting span::after { content:""; width:16px; height:8px; display:inline-block; position:relative; color:#CCC; background-position:center; background-repeat:no-repeat; background-size:10px; }' +// content
'.sorting.down span::after { transform:rotate(180deg) }' +
'#sort_by_name input { display:none; margin:0 4px 0 2px; }' +
'#sort_by_name, #sort_by_size { text-align:left; }' +
'#sort_by_date, #sort_by_kind { text-align:center; }' +
'#sort_by_default, #sort_by_ext { text-align:right; }' +
'#sorting div.up span::after { transform:rotate(180deg) !important; }' +
// TEXT EDITOR ROW
'#text_editor_row { display:none; }' +
'#text_editor_row a { padding:6px 0 6px 16px; text-align:left; font-weight:bold; }' +
//***** DIR_LIST STYLES *****//
'#dir_list_wrapper { overflow:scroll; position:relative; }' +
'#dir_list { overflow:hidden; position:relative; font-size:0.875rem; }' +
'#tbody { counter-reset:row; height:100%; overflow:hidden; transition:opacity .125s; background-position:center; background-repeat:no-repeat; background-size:50%; }' +
'#tbody > tr { margin-inline-start:0; display:none; grid-gap:0; grid-template-columns:minmax(auto,5rem) 1fr minmax(auto,7em); }' + // tr
'.tbody_row_cell { padding:0; }' + // td
'.tbody_row_cell_name { grid-column: 1 / span 3; font-variant-numeric:tabular-nums; }' +
'.tbody_row_cell_name_a { display:flex; text-decoration:none; -webkit-padding-start:0; -moz-padding-start:0; }' + // td.name a.icon
'.tbody_row_cell_name_a::before { display:none; counter-increment:row; content:counter(row); width:28px; min-width:28px; height:14px; max-height:14px; min-height:14px; text-align:right; padding-right:1px; }' + // numbers
'.tbody_row_cell_name_a_span { display:flex; line-height:1.4; text-align:left; word-break:break-word; }' + // req: .has_background_before
'.tbody_row_cell_name_a_span input { display:none; margin:2px 6px 0 0; }' + // media checkboxes
'.tbody_row_cell_details { display:none; text-align:right; white-space:pre; max-height:1em; font-variant-numeric:tabular-nums; }' +
'.tbody_row_cell_details.size { grid-column: 1; grid-row: 2; padding:0 8px 3px 8px; }' +
'.tbody_row_cell_details.date { grid-column: 2; grid-row: 2; text-align:right; overflow:hidden; overflow-wrap:break-word; text-overflow:""; padding-right:8px; }' +
'.tbody_row_cell_details.date span { white-space:pre; display:inline-block; }' +
'.tbody_row_cell_details.kind { grid-column: 3; grid-row: 2; overflow:hidden; text-overflow:ellipsis; }' +
'.tbody_row_cell_name_a { padding:5px 8px 5px 0; }' + //
'.tbody_row_cell_name_a::before { margin-top:1px; }' + //
'.tbody_row_cell_details { padding:0 16px 3px 0; }' + // padding:4px 8px 4px 0;
'tr:hover a, tr.selected a, tr.playing a { font-weight:bold; }' +
'tr.disabled, tr.disabled a, tr.disabled span, tr.ignored, tr.ignored a { cursor:not-allowed; }' +
// PLAYLIST ITEMS
'body[class$="list"] #tbody tr { display: grid; grid-gap:0; grid-template-columns: 48px minmax(8rem,18rem) minmax(auto,8rem); }' +
'body[class$="list"] #tbody td.name { grid-column: 1 / span 4; }' +
'body[class$="list"] #tbody td.size { grid-column: 1 / span 2; grid-row: 2; padding:0 8px 6px 8px; text-align:left; text-indent: 40px; }' +
'body[class$="list"] tbody td.kind { grid-column: 3 / span 2; grid-row: 2; padding:0 8px 6px 8px; }' +
'body[class$="list"] #tbody td.details.ext { display:none; }' +
'body.show_numbers[class$="list"] #tbody td.size { text-indent: 48px; }' +
//***** SIDEBAR FOOTER *****//
'#tfoot { margin-top:auto; padding:0; position:relative; font-size:0.875rem; user-select:none; -webkit-user-select:none; display:flex; flex-direction:column; }' +
'#tfoot:hover { box-shadow: 0px 4px 6px 3px #333; }' + // tr
// STATS
'#stats { cursor:pointer; float:left; width:100%; overflow:hidden; flex-direction:column; line-height:1.6; font-size:0.875rem; }' + // td
'#stats_summary, #stats_summary_playlist_container { padding:2px 8px; overflow:hidden; white-space:pre; }' + // tr
'#stats_summary div > div { padding:0 6px; }' + // tr
'#stats_summary_playlist_container, #stats_summary_detailed_container, #stats_details_container { display:none; flex-direction:column; }' + // tbody
'#stats_summary_playlist_container > div, #stats_summary_detailed_container > div, #stats_details_container > div { flex-direction:row; }' + // tbody
'.summary_detailed { display:none; }' +
'.stats_count { display:inline-block; padding:2px 2px 2px 6px; text-align:right; min-width: 22px; }' +
'.stats_kind { display:inline-block; padding:2px 6px 2px 0; }' +
'#stats_summary_detailed_total { padding-left:4px; font-weight:bold; }' +
'#stats_summary_detailed_dirs span { padding-bottom:0; }' +
'#stats_summary_detailed_dirs .stats_kind::before { background-image:'+ SVG_UI_File_Icon('file_icon_dir_default') +'; }' +
'#stats_summary_detailed_files .stats_kind::before { background-image:'+ SVG_UI_File_Icon('file_icon_file_default') +'; }' +
'#stats_details_container > div:first-of-type span { padding-top:4px; }' +
'#stats_details_container > div:last-of-type span { padding-bottom:4px; }' +
'#stats_summary_detailed_dirs .stats_kind, #stats_summary_detailed_files .stats_kind { display:flex; }' +
'#stats_summary_detailed_dirs:hover, #stats_summary_detailed_files:hover, #stats_details_container div:hover { font-weight:bold; }' +
// SIDEBAR FOOTER LINKS
'#footer_links { margin-top:-1px; position:absolute; z-index:1; right:0; cursor:pointer; float:right; width:24px; height:100%; background-image:'+ SVG_UI_Icon('toggle') +'; transform:rotate(180deg) !important; background-size:18px; background-position:2px center; }' + // td
'#footer_links ul { display:none; padding:0; position:absolute; top:calc(100% - 1px); right:unset; left:calc(100% - 27px); white-space:pre; box-shadow:-0px -3px 6px -3px #333; transform:rotate(180deg) !important; }' + // ul
'#open_in_content_pane { padding:4px 6px; text-align:right; }' +
'#view_directory_source { padding:4px 6px; text-align:right; }' +
// CLASSES AND ELEMENTS
'.has_icon_before::before { content:""; display:block; float:left; width:28px; min-width:28px; height:14px; max-height:14px; min-height:14px; margin-top:1px; background-position:center; background-repeat:no-repeat; background-size:14px; }' +
'.has_checkmark_before::before { content:""; height:9px; background-position:center; background-repeat:no-repeat; }' +
'ul.has_popout_menu, .editor_theme_light #toolbar ul.has_popout_menu { background-color:#C0C0C0; border:solid 1px #666; }' +
'ul.has_popout_menu li { background-color:#D0D0D0; }' +
'ul.has_popout_menu li:hover { background-color:#E0E0E0; }' +
'.theme_dark #sidebar_wrapper ul.has_popout_menu { border:solid 1px #111; }' +
'.theme_dark #sidebar_wrapper ul.has_popout_menu, .theme_dark #sidebar_wrapper ul.has_popout_menu li { background-color:#505050; }' +
'.editor_theme_dark #toolbar ul.has_popout_menu li { background-color:#C0C0C0; }' +
'.theme_dark #sidebar_wrapper ul.has_popout_menu li:hover { background-color:#686868; }' +
//***** END SIDEBAR STYLES *****//
//***** CONTENT STYLES *****//
'#content_pane { height:100%; padding:0; position:relative; transform:scale(1); vertical-align:top; display:flex; flex-direction:column; contain:strict; }' + // td
'#content_header { display:block; font-size:0.875rem; position:relative; z-index:3; }' + // header
'#content_header table { font-size:0.875rem; z-index:2; }' +
'#content_title { text-align:center; display:flex; flex-direction:row; justify-content:space-between; }' + // tr
// CONTENT TITLE BUTTONS LEFT
'#title_buttons_left { padding:4px 6px; text-align:left; width:4rem; max-width:9.5em; vertical-align:top; }' + // td
'#reload_btn { float:left; width:52px; }' +
'#reload_btn::before { content:"Reload"; }' +
'#prev_next_btns { margin-left:8px; cursor:pointer; float:left; line-height:1; padding:0; position:relative; }' + // button
'#prev_next_btns span { width:2em; height:18px; }' +
'#prev_btn, #next_btn { background-position:center 36%; background-repeat:no-repeat; background-size:33%; }' +
'#prev_btn { background-image:'+ SVG_UI_Icon('chevron_left') + '; }' +
'#next_btn { background-image:'+ SVG_UI_Icon('chevron_right') + '; }' +
// CONTENT TITLE
'#title { line-height:1.4; min-width:10em; min-height:18px; padding:4px 8px; text-align:center; word-break:break-word; vertical-align:top; cursor:pointer; }' + // td
'#title span { font-weight:bold; hyphens:none; }' +
'#title span::before { content:""; margin-top:1px; margin-bottom:-2px; width:24px; height:14px; display:inline-block; background-position:center; background-repeat:no-repeat; font-weight:normal; }' +
'#title span::after { font-weight:bold; }' +
'#content_pane[data-content="has_image"] #title span::after { font-weight:normal; }' +
// CONTENT TITLE BUTTONS RIGHT
'#title_buttons_right { padding:4px 6px; text-align:right; width:4rem; max-width:9.5em; vertical-align:top; }' + // td
'#scale { cursor:pointer; float:right; line-height:1; margin-right:8px; padding:0 4px; position:relative; background-color:#FFF; }' + // button
'#scale span { width:2em; height:18px; background-position:center 36%; background-repeat:no-repeat; background-size:10px; }' +
'#decrease { margin-left:-4px; background-image:'+ SVG_UI_Icon('minus') +'; }' +
'#increase { margin-right:-4px; background-image:'+ SVG_UI_Icon('plus') +'; }' +
'#close_btn { float:right; padding:0px; width:52px; }' + // close button
'#close_btn::before { content:"Close"; }' + //
'.split_btn { display:none; }' +
'.split_btn span { display:inline-flex; }' +
'.split_btn::after { content:""; position: absolute; top: 0; bottom: 0; left: 50%; }' +
// CONTENT AUDIO TITLE
'#content_audio_title { display:none;}' + // tr
'#content_audio_title span { display:block; width:100%; cursor:pointer; padding:4px 6px 6px; text-align:center; line-height:1.4; }' + // td
'#content_audio_title span::before { content:""; padding-right:18px; font-weight:normal; background-position:center; background-position:right 4px center; background-repeat:no-repeat; }' + // td
// CONTENT AUDIO PLAYER
'#content_audio { display:none; justify-content:center; padding-bottom:6px; }' + // tr
'#content_audio > div > div { text-align:center; font-weight:bold;}' + // td
'#audio_container { padding:0 4px; height:32px; display:flex; background-color:rgb(241, 243, 244); flex-direction:row; }' + // div; background-color is for chrome browsers
'#prev_track, #next_track { width:2rem; padding:0; display:inline-block; overflow:auto; background-image:'+ SVG_UI_Icon('prev_next_track') +'; background-position:center; background-repeat:no-repeat; }' + // div
'#prev_track { transform:rotate(180deg) !important; }' + // div
'#audio { height:32px; }' + // audio
// 'body:not(.is_gecko) #audio { margin-top: -9px; }' + // hacky fix for PIP button in Vivaldi
'#close_audio { width:2rem; padding:0; position:relative; display:inline-block; background-image:'+ SVG_UI_Icon('multiply') +'; background-position:center; background-repeat:no-repeat; background-size:14px; }' + // div , .audio_controls, #glyph_viewer_info div
'#audio_options { margin-top:0; margin-right:calc(-6em - 8px); padding:0 4px; width:6em; display:flex; flex-direction:column; justify-content:center; }' + // div
'#loop_label input { margin:0px 4px 2px}' + // input
'#shuffle_label input { margin:2px 4px 0px}' + // input
'#audio_iframe { margin:0; padding:0; border:0; }' +
// CONTENT TITLE PLAYLIST ENTRY (#content_playlist and #content_audio_playlist)
'.playlist_entry_container { display:none; padding:4px 6px; text-align:center; flex-direction:row; }' + // td
'.playlist_entry_container textarea { width:100%; padding:0 6px; border:0; resize:vertical; }' + // tr
// CONTENT_CONTAINER (section)
'#content_container { box-sizing:border-box; justify-content:center; padding:0; position:relative; bottom:0; overflow:auto; width:100%; background-position:center; background-repeat:no-repeat; background-size: 50%; display:flex; flex-basis:100%; contain:strict; }' + // section
'.content { display:none; overflow:scroll; width:100%; height:100% }' + // hide content by default
// CONTENT GRID (div)
'#content_grid { display:none; position:absolute; padding:0; width:100%; font-size:1rem; 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); }' +
'#content_grid::after { content:""; width:1px; position:absolute; top:0; right:0; bottom:0; }' +
'#content_grid a { display:block; }' +
// Image Grid Items
'.image_grid_item { padding:6px; grid-column:auto; display:flex; align-items:center; justify-content:center; line-height:0; }' +
'.image_grid_item img { width:auto; max-width:'+ ($settings.grid_image_size).toString() +'px; max-height:'+ ($settings.grid_image_size) +'px; position:relative; }' +
'.image_grid_item img[src$=".svg"] { width: 100%; height:100%; }' +
// Font Grid Items
'.font_grid_item { line-height:1; padding:8px 20px; grid-column: 1 / -1; }' +
'.font_grid_item p { margin:0; padding:0 0 6px 0; line-height:1; font-size:1rem; letter-spacing:0.1em; text-indent:0.1em; }' +
'.font_grid_item h2 { margin:0; font-weight:normal; font-size:'+ $settings.grid_font_size * 4 +'em; }' +
'.image_grid_item + .font_grid_item { margin-top:-1px; }' + // mask double borders
// CONTENT TEXT EDITOR
'#content_text { display:none; width:100%; max-width:100%; height:100%; overflow:hidden; padding:0; position:absolute; z-index:1; flex-direction:column; }' + // div
// CONTENT FONT.content
'#content_font { hyphens:none; padding:0; position:relative; font-size:'+ $settings.grid_font_size +'em; overflow-wrap:break-word; }' + // div
'#font_specimen { max-width:100%; display:none; line-height:1.2; flex-direction:column; }' + // div
'#specimen { padding: 20px; font-size:4em; word-break:break-all; line-height:1.2; }' + // div
'#specimen_2 { margin:0; font-weight:normal; font-size:8em; overflow:hidden; text-overflow:ellipsis; white-space:pre; }' +
'#specimen_2H4 { margin:0; font-weight:normal; font-size:1.618em; overflow:hidden; text-overflow:ellipsis; }' +
'#specimen_3 { margin:0; font-weight:normal; font-size:6em; text-align:justify; overflow:hidden; text-overflow:ellipsis; white-space:pre; }' +
'#specimen_3H3 { margin:0; font-size:2em; hyphens:auto; }' +
'#specimen_string_2 { padding:20px; text-align:justify; hyphens:auto; }' + // div
'#specimen_string_3 { padding:20px; text-align:justify; }' + // div
'.lorem { text-align:justify; hyphens:auto; font-size:1em; line-height:1.4; column-gap:1.5em; overflow-wrap:normal; word-break:normal; }' + // div
'#lorem { padding:20px 20px 0; }' + // div
'#lorem::first-line { letter-spacing:0.1em; text-indent:0.1em; font-size:'+ $settings.grid_font_size * 1.33 +'em; font-variant:small-caps; }' +
'#lorem_2 { padding:12px 20px 0; columns:2; }' + // div
'#lorem_3 { padding:12px 20px 40px; columns:3; }' + // div
// FONT GLYPHS
'#font_viewer { display:none; position:relative; font-family:unset; width:100%; }' + // div
'#content_pane[data-content="has_font_file"] #font_viewer { overflow-y:auto; }' + // div
'#content_pane[data-content="has_glyph"] #font_viewer { overflow:auto; }' +
'#content_pane[data-content="has_glyph"] #glyphs_container { visibility:hidden; }' +
'#glyphs_container { padding:0; position:relative; text-align:center; display:grid; grid-gap:0; grid-template-columns:repeat(auto-fill, minmax(120px,auto)); }' + // div
'.glyph_container { padding:0; position:relative; }' + // div
'.glyph_info { padding:2px; position:absolute; right:0; bottom:0; left:0; font-size:0.75rem; }' +
'#glyph_viewer { display:none; padding:0; z-index:1; position:absolute; top:0; right:0; bottom:0; left:0; background-color:#FFF; background-position:center; background-repeat:no-repeat; background-size:contain; }' + // div
'#glyph_viewer_info { padding:4px 6px; position:fixed; right:0; left:0; text-align:center; height:18px; line-height:1.6; font-size:0.875rem; }' + // div
'#content_font svg { width: 100%; }' +
'#save_svg_hidden { float:left; visibility:hidden; }' + // button
'#glyph_viewer_info div { padding:0; display:inline-block; }' + // button
'#glyph_viewer_info div::before { content:"Glyph "; }' +
'#save_svg { float:right; }' + // button
'#font_info { max-height:'+ (window.innerHeight * 0.75) +'px; font-size:0.875rem; position:fixed; bottom:0; z-index:2; }' +
'#font_info:hover { box-shadow:0px 4px 6px 3px #333; }' + // tr
'#font_info th { padding:4px 6px 5px; letter-spacing:0.1em; text-indent:0.1em; }' +
'#font_info_body { display:none; max-height:'+ ((window.innerHeight * 0.75) - 64) +'px; font-size:0.875rem; overflow:auto; }' +
'.font_info_name { padding:4px 6px; text-align:right; font-weight:bold; width:33%; }' +
'.font_info_value { padding:4px 6px; width_66%; }' +
'.font_info_value a { font-weight:bold; }' +
// CONTENT IMAGE.content
'#content_image_container { display:none; margin:0; padding:2rem 2.5rem; position:relative; overflow:auto; box-sizing:border-box; }' + // div
'#content_image { margin:auto; width:auto; max-width:100%; max-height:100%; position:relative; object-fit:contain; cursor:zoom-in; }' + // img
'#content_pane.has_zoom_image #content_image_container { padding:0; }' + // div
// OTHER CONTENT ELEMENTS
'#content_pdf { height:100%; padding:0; position:relative; width:100%; }' + // embed.content
'#content_video { padding:0; position:absolute; background:transparent; }' + // video.content
'#content_iframe { display:none; width:100%; height:100%; padding:0; position:relative; background:white; border:0; }' // iframe.content
;
var $color_and_background_styles = // added to #top and #iframe_body
// BACKGROUND COLORS
// 'body.theme_light .background_color_A0_20 { background-color: #A0A0A0; }' +
// 'body.theme_dark .background_color_A0_20 { background-color: #202020; }' +
'body.theme_light, body.theme_light .background_color_B0_30 { background-color: #B0B0B0; }' +
'body.theme_dark, body.theme_dark .background_color_B0_30 { background-color: #303030; }' +
'body.theme_light .background_color_C0_40 { background-color: #C0C0C0; }' +
'body.theme_dark .background_color_C0_40 { background-color: #404040; }' +
'body.theme_light .background_color_D0_50 { background-color: #D0D0D0; }' +
'body.theme_dark .background_color_D0_50 { background-color: #505050; }' +
'body.theme_light .background_color_E0_60 { background-color: #E0E0E0; }' +
'body.theme_dark .background_color_E0_60 { background-color: #606060; }' +
'body.theme_light .background_color_DD_44 { background-color: #DDDDDD; }' + // tbody background
'body.theme_dark .background_color_DD_44 { background-color: #383838; }' +
'body.theme_light:not(.editor_theme_dark) .background_color_DD_33, body.editor_theme_light .background_color_DD_33 { background-color: #DDDDDD; }' +
'body.theme_dark:not(.editor_theme_light) .background_color_DD_33, body.editor_theme_dark .background_color_DD_33 { background-color: #333333; }' +
'body.theme_light .background_color_EE_22, body.editor_theme_light .background_color_DD_33:focus, body.theme_light #content_container:hover, body.theme_light #content_grid::after { background-color: #EEEEEE; }' +
'body.theme_dark .background_color_EE_22, body.editor_theme_dark .background_color_DD_33:focus, body.theme_dark #content_container:hover, body.theme_dark #content_grid::after { background-color: #222222; }' +
'body.theme_light .background_color_FF_11 { background-color: #EFEFEF; }' +
'body.theme_dark .background_color_FF_11 { background-color: #0F0F0F; }' +
'body.theme_light .background_color_EE_22:hover, body.theme_light .background_color_EE_22.hovered, body.theme_light .background_color_EE_22.selected { background-color: #FFFFFF; }' +
'body.theme_dark .background_color_EE_22:hover, body.theme_dark .background_color_EE_22.hovered, body.theme_dark .background_color_EE_22.selected { background-color: #000000; }' +
'body.theme_light .background_color_22_EE { background-color: #222222; }' +
'body.theme_dark .background_color_22_EE { background-color: #EEEEEE; }' +
'body.theme_light .background_color_11_FF, body.theme_light .background_color_22_EE:hover, body.theme_light .background_color_22_EE.hovered { background-color: #0F0F0F; }' +
'body.theme_dark .background_color_11_FF, body.theme_dark .background_color_22_EE:hover, body.theme_dark .background_color_22_EE.hovered { background-color: #EFEFEF; }' +
// DIR LIST ROWS: .alternate_background
'body.theme_dark.alternate_background #tbody tr:nth-of-type(odd) { background-color: #505050; }' +
'body.theme_light.alternate_background #tbody tr:nth-of-type(odd) { background-color: #D0D0D0; }' +
'body.theme_dark.alternate_background #tbody tr:nth-of-type(even) { background-color: #404040; }' +
'body.theme_light.alternate_background #tbody tr:nth-of-type(even) { background-color: #E8E8E8; }' +
'body.theme_dark #content_help tr:nth-of-type(even) { background-color: #484848; }' +
'body.theme_light #content_help tr:nth-of-type(even) { background-color: #CCCCCC; }' +
// NON-MEDIA ROWS .selected, .loaded, :hover ("light cyan")
'body.theme_light tr:not(.media).selected, body.theme_light tr:not(.media).selected.loaded, body.theme_light tr.selected.loaded:hover, body.theme_light #menu li.selected'+
'{ background-color: rgba(172,202,235,1.00) !important; }' +
'body.theme_light tr:not(.media).loaded, body.theme_light #tbody tr:not(.media):hover, body.theme_light.alternate_background #tbody tr:not(.media):hover, body.theme_light tr:not(.media).hovered'+
'{ background-color: rgba(172,202,235,0.60) !important; }' +
'body.theme_dark tr:not(.media).selected, body.theme_dark tr:not(.media).selected.loaded, body.theme_dark tr.selected.loaded:hover, body.theme_dark #menu li.selected'+
'{ background-color: rgba(101,140,179,0.80) !important; }' + //#658CB3
'body.theme_dark tr:not(.media).loaded, body.theme_dark #tbody tr:not(.media):hover, body.theme_dark.alternate_background #tbody tr:not(.media):hover, body.theme_dark tr:not(.media).hovered'+
'{ background-color: rgba(101,140,179,0.60) !important; }' +
// MEDIA ROWS .playing, .selected, :hover
'body.theme_light tr.media.playing { background-color: rgba(130,196,196,1) !important; }' + // #82C4C4
'body.theme_light tr.media.selected:not(.playing), body.theme_light tr.media.hovered' +
'{ background-color: rgba(116,190,190,0.60) !important; }' +
'body.theme_light tr.media:not(.playing):hover { background-color: rgba(116,190,190,0.40) !important; }' +
'body.theme_dark tr.media.playing { background-color: rgba(076,143,143,0.75) !important; }' +
'body.theme_dark tr.media.selected:not(.playing), body.theme_dark tr.media.hovered' +
'{ background-color: rgba(076,143,143,0.55) !important; }' +
'body.theme_dark tr.media:hover { background-color: rgba(076,143,143,0.45) !important; }' +
// text editor row ("purple")
'body.theme_light #text_editor_row.has_text_editor, body.theme_light.edited #text_editor_row { background-color: rgba(160,160,230,1.00); }' + // #A0A0E6
'body.theme_dark #text_editor_row.has_text_editor, body.theme_dark.edited #text_editor_row { background-color: rgba(100,100,160,1.00); }' + // #6464A0
// menu items :hover, with exceptions for default text editor view
'body.theme_dark .menu li:hover, body.theme_light .menu li#preview_text_menu_item span:hover { background-color: #686868; }' +
'body.theme_light .menu li:hover, body.theme_light .menu li#preview_text_menu_item span:hover { background-color: #B8B8B8; }' +
'body.theme_light .menu li#preview_text_menu_item:hover, body.theme_light .menu li#preview_text_menu_item:hover { background-color: initial; }' +
// BACKGROUND IMAGES
'.has_background, .has_background_before::before, .has_background_after::after { background-repeat:no-repeat; background-position:center; background-color:transparent !important; }' +
'body.theme_light .bookmark > a::before { background-image: '+ SVG_UI_Icon('bookmark') +'; }' +
'body.theme_dark .bookmark > a::before { background-image: '+ SVG_UI_Icon('bookmark_dark') +'; }' +
'body.theme_light li.has_submenu { background-image: '+ SVG_UI_Icon('arrow') +'; }' +
'body.theme_dark li.has_submenu { background-image: '+ SVG_UI_Icon('arrow_dark') +'; }' +
'.background_color_check_mark::before, #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.source_text #source_text::before, body.preview_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, body.hide_ignored_items #hide_ignored_items span::before, body.ignore_ignored_items #ignore_ignored_items span::before, #disable_text_editing::before'+
'{ background-image:'+ SVG_UI_Icon('check_mark') +'; }' +
'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'+
'{ background-image:'+ SVG_UI_Icon('chevron_down') +'; }' +
'#parent_dir_nav a { background-image:'+ SVG_UI_Icon('chevron_up') +'; }' +
'body.is_error #tbody { background-image: '+ SVG_UI_Icon('error') +'; }' +
'body.theme_light #content_pane[data-content="has_ignored"] #content_container'+
'{ background-image:'+ SVG_UI_Icon('ignored') +'; background-size:25%; }' +
'body.theme_dark #content_pane[data-content="has_ignored"] #content_container'+
'{ background-image:'+ SVG_UI_Icon('ignored_dark') +'; background-size:25%; }' +
'body.has_audio #content_pane:not([data-content^="has_"]):not([data-loaded="unloaded"]) #content_container'+
'{ background-image:'+ SVG_UI_Icon('music') +'; }' +
CSS_UI_Icon_Rules() +
'body.theme_light #grid_btn:not(.has_grid), body.theme_light #grid_btn:not(.has_grid) .menu'+
'{ background-image:'+ SVG_UI_Icon('grid') +'; }' +
'body.theme_dark #grid_btn:not(.has_grid), body.theme_dark #grid_btn:not(.has_grid) .menu'+
'{ background-image:'+ SVG_UI_Icon('grid_dark') +'; }' +
'body.theme_light #grid_btn.has_grid, body.theme_light #grid_btn.has_grid .menu'+
'{ background-image:'+ SVG_UI_Icon('grid_loaded') +'; }' +
'body.theme_dark #grid_btn.has_grid, body.theme_dark #grid_btn.has_grid .menu'+
'{ background-image:'+ SVG_UI_Icon('grid_loaded_dark') +'; }' +
'#content_pane[data-content="has_text_editor"] #title span::before { background-image: '+ SVG_UI_File_Icon('file_icon_markdown') +'; }' +
'#content_pane[data-content="has_font_file"] #title span::before { background-image: '+ SVG_UI_File_Icon('file_icon_font') +'; }' +
'#content_audio_title span::before { background-image: '+ SVG_UI_File_Icon('file_icon_audio') +'; height:14px !important; }' +
'#content_pane[data-content="has_grid"] #title span::before { background-image: '+ SVG_UI_File_Icon('file_icon_dir') +'; height:14px !important; }' +
'#content_pane[data-content="has_view_directory_source"] #title span::before { background-image: '+ SVG_UI_File_Icon('file_icon_dir_default') +'; height:14px !important; background-size:contain; }' +
// BORDERS
'body.theme_dark .border_all { border: solid 1px #111; }' +
'body.theme_light .border_all { border: solid 1px #666; }' +
'body.theme_dark .border_top { border-top: solid 1px #111; }' +
'body.theme_light .border_top { border-top: solid 1px #666; }' +
'body.theme_dark .border_right { border-right: solid 1px #111; }' +
'body.theme_light .border_right { border-right: solid 1px #666; }' +
'body.theme_dark .border_bottom, body.theme_dark #tbody tr:last-of-type:not(.invisible) { border-bottom: solid 1px #111; }' +
'body.theme_light .border_bottom, body.theme_light #tbody tr:not(.invisible):last-of-type { border-bottom: solid 1px #666; }' +
'body.theme_dark .border_left { border-left: solid 1px #111; }' +
'body.theme_light .border_left { border-left: solid 1px #666; }' +
'.border_top_x { border-top: solid 1px #666; }' + // "x" = inverted for theme_dark
'.border_right_x { border-right: solid 1px #666; }' +
'.border_bottom_x { border-bottom: solid 1px #666; }' +
'.border_left_x { border-left: solid 1px #666; }' +
'.split_btn::after { border-left: solid 1px #333; }' +
// TEXT COLORS
'body.theme_light a.text_color_111:hover, body.theme_light .text_color_111.selected, body.theme_light .selected .text_color_111 { color: #000; }' +
'body.theme_dark a.text_color_111:hover, body.theme_dark .text_color_111.selected, body.theme_dark .selected .text_color_111 { color: #FFF; }' +
'body.theme_light .text_color_111, body.editor_theme_light #content_text .text_color_111 { color: #111; }' +
'body.theme_dark .text_color_111, body.editor_theme_dark #content_text .text_color_111 { color: #EEE; }' +
'body.theme_light .text_color_333 { color: #333; }' +
'body.theme_dark .text_color_333 { color: #CCC; }' +
'body.theme_light .ignored, body.theme_light .ignored a { color: #555 !important; }' +
'body.theme_dark .ignored, body.theme_dark .ignored a { color: #AAA !important; }'
;
var $conditional_styles =
// PSEUDO-ELEMENTS
'#content_pane[data-content="has_image"] #title span::after { content: attr(data-after); }' +
'#content_pane[data-content="has_font"] #title::before { content: "Font:" }' +
'#content_pane[data-content="has_font_file"] #title::before { content: "Glyphs from font:" }' +
'body.has_directory_source #title::before { content: "Source of: " }' +
'#content_pane[data-content="has_grid"] #title::before { content: "Fonts and Images from:"; }' +
'#content_pane[data-content="has_grid"].has_font_grid #title::before { content: "Fonts from:"; }' +
'#content_pane[data-content="has_grid"].has_image_grid #title::before { content: "Images from:"; }' +
'#content_pane[data-content="has_grid"] #title::after { content: "'+ current_dir +'"; }' +
'#content_pane[data-content="has_ignored"] #title::before { content: "Ignored content:"; }' +
'#content_pane[data-content="has_dir"] #title::before { content: "Index of:"; }' +
'#content_pane[data-loaded="unloaded"] #content_container { background-image:'+ SVG_UI_Icon('spinner') +'; background-repeat:no-repeat; background-position:center; background-size:32px; }' +
'body #sidebar_title div:before { content: "INDEX OF"; }' +
'body.has_playlist #sidebar_title div:before { content: "PLAYLIST"; }' +
'body.has_filelist #sidebar_title div:before { content: "FILELIST"; }' +
'#content_pane.has_audio #content_audio_title span::before, body #content_pane[data-content="has_video"] #title::before' +
'{ content: "Playing: "; }' +
'#reload_btn.reset::before, #content_pane.has_zoom_image #reload_btn::before, #content_pane.has_scaled_image #reload_btn::before { content: "Reset"; }' + // reload button
'#content_pane[data-content="has_text_editor"] #close_btn::before { content: "Hide"; }' + // close button
'#content_pane[data-content="has_text_editor"] #title::after { content: "Text Editor"; }' +
'#content_pane[data-content="has_text_editor"].edited #title::after { content: "Text Editor (edited)"; }' +
'body.edited #text_editor_row a:after, body.iframe_edited:not(.has_text_editor) #content_pane.has_iframe #title::after' +
'{ content: " (edited)"; }' +
'body.theme_light #theme span::before { content: "Light "; }' +
'body.theme_dark #theme span::before { content: "Dark "; }' +
'body.show_details #show::before { content: "Hide "; }' +
'#disable::after { content: "Enabled"; }' +
'body.disable_text_editing #disable::after { content: "Disabled"; }' +
'#disable::after { content: "Enabled"; }' +
// DISPLAY
'body.has_hidden_sidebar #handle, body.has_stats #stats_summary, body[class$="list"] #stats_summary, body.has_stats #footer_links, body[class$="list"] #footer_links, body[class$="list"] #sidebar_buttons label, body.is_error #sidebar_header_body > div:not(:first-of-type), body.is_error #tfoot, body.is_non_local #show_invisibles_container, tr.invisible, tr.ignored, body.hide_ignored_items #tbody tr.ignored, body.hide_ignored_items #tbody tr.ignored, body.hide_ignored_items:not(.show_invisibles) #tbody tr.ignored.invisible, body.hide_ignored_items:not(.show_invisibles) #tbody tr.ignored.invisible, body:not(.show_invisibles) #tbody tr.invisible' +
'{ display:none; }' +
'body.has_media #play_toggle, body[class$="list"] #play_toggle, .media .tbody_row_cell_name_a_span input, body.theme_dark #theme_dark, body.theme_light #theme_light, body.show_details .tbody_row_cell_details, #content_pane[class^="has_"] #close_btn, #content_pane[data-content="has_text_editor"] #close_btn, body[class$="list"] #close_btn' +
'{ display:unset; }' +
'#font_info:hover #font_info_body { display:table-row-group; }' +
'body[class$="list"] #stats_summary_playlist_files, body.has_help #help_container' +
'{ display:table-row; }' +
'body.has_images #grid_btn, body.has_fonts #grid_btn' +
'{ display:table-cell; }' +
'body.has_menu #menu, body.has_menu_parents #parents_links, #sidebar_menus .has_submenu:hover .submenu, #menu .has_submenu.hovered .submenu, #footer_links:hover ul, body.has_images.has_fonts #grid_btn:hover ul.menu, #content_pane[data-content="has_font_file"] #font_viewer, #content_pane[data-content="has_glyph"] #font_viewer, #tfoot tr, body.has_warning #overlay_container' +
'{ display:block; }' +
'body.show_details #dir_list td.details, body.show_numbers .tbody_row_cell_name_a::before, #content_pane[data-content="has_grid"] .split_btn, #content_pane[data-content="has_image"] .split_btn, #content_pane[data-content="has_font"] .split_btn, #content_pane[data-content="has_font_file"] #title_buttons_left .split_btn, #content_pane[data-content="has_glyph"] #title_buttons_right .split_btn' +
'{ display:inline-block; }' +
'#tbody tr:not(.ignored):not(.invisible), body.show_invisibles #tbody tr.invisible, body.has_stats #tbody tr.invisible, body.has_stats #tbody tr.ignored, body.has_stats #tbody tr.ignored.hovered, body.hide_ignored_items.has_stats #tbody tr.ignored, body:not(.hide_ignored_items) #tbody tr.ignored:not(.invisible)' +
'{ display:grid; }' +
'body.show_details #sorting_row_2, body.show_details #text_editor_row, #text_editor_row.has_text_editor, #content_pane.has_audio #content_audio_title, #content_pane.has_audio #content_audio, .playlist_entry_container.has_content, #content_pane .content.has_content:not(#content_iframe), #content_pane[data-loaded="loaded"] #content_iframe, #content_pane[data-content="has_text_editor"] #content_text, #content_pane[data-content="has_font"] #font_specimen, #content_pane[data-content="has_image"] #content_container, #content_pane[data-content="has_image"] #content_image_container, #content_pane[data-content="has_video"] #content_container, body.has_stats #stats_summary_detailed_container, body.has_stats #stats_details_container, body.has_stats .summary_detailed, body[class$="list"] #stats_summary_playlist_container' +
'{ display:flex; }' +
'#content_pane[data-content="has_text_editor"] .content.has_content, #content_pane[data-content="has_text_editor"] #content_grid, #content_pane[data-content="has_grid"] #content_text, #content_pane[data-content="has_grid"] .content.has_content' +
'{display:none !important; }'+
'body.theme_dark .invert, body.theme_dark #menu li > span::before, body.theme_dark #sorting span::before, body.theme_dark #sorting span::after' +
'{ filter:invert(1); }' +
'#content_pane[data-content="has_ignored"]::before { opacity:0.3; }' +
'body.has_warning #sidebar_wrapper, body.has_warning #content_pane, #close_audio:hover::after, body.has_menu_parents #tbody, body.has_menu #tbody, body.faded:not(.has_stats) #tbody tr:not(.hovered), body.has_stats:not(.faded) #tbody tr:not(.hovered), #parent_dir_menu:not(:hover), #menu_container:not(:hover) nav, #toggle_sidebar, #grid_btn, #dir_list.has_dir:not(:hover), #footer_links, .split_btn span, .disabled, body.focus_content #tbody tr:not(.hovered)' +
'{ opacity: 0.6; }' +
'#grid_btn:hover, #prev_next_btns span:hover, #toggle_sidebar:hover, #grid_btn:hover, #footer_links:hover, .split_btn span:hover' +
'{ opacity: 1.0; }' +
// HAS HIDDEN SIDEBAR
'body.has_hidden_sidebar #toggle_sidebar { left:2px; transform:rotate(180deg); }' +
'body.has_hidden_sidebar #sidebar_wrapper { width:0 !important; min-width:0; position:absolute; top:2px; left:-1px; }' +
'body.has_hidden_sidebar #sidebar_header { z-index:unset; display:none; }' +
'body.has_hidden_sidebar #sidebar { visibility:hidden; }' + // allows hidden sidebar to still be navigated by arrows
'body.has_hidden_sidebar #dir_list { min-width:0; }' +
'body.has_hidden_sidebar #content_pane { width:100% !important; }' +
'body.has_hidden_sidebar #title_buttons_left { padding-left:24px; }' +
// HAS GRID
'#content_pane[data-content="has_grid"] #content_grid { display: grid; }' +
'#content_pane.has_hidden_grid #content_grid { max-height:100%; display:grid; overflow:hidden; }' +
// HAS ZOOM IMAGE
'#content_pane.has_scaled_image #content_image_container { display:grid; padding:0; }' +
'#content_pane.has_zoom_image #content_image { width:unset; max-width:unset; max-height:unset; cursor: zoom-out; }' +
// FIGURE OUT HOW TO DELETE THESE:
'#content_pane[data-content="has_image"] #title_buttons_left, #content_pane[data-content="has_image"] #title_buttons_right, #content_pane[data-content="has_grid"] #title_buttons_left, #content_pane[data-content="has_grid"] #title_buttons_right, #content_pane[data-content^="has_font"] #title_buttons_left, #content_pane[data-content^="has_font"] #title_buttons_right, #content_pane[data-content^="has_glyph"] #title_buttons_right { min-width: 9.5em; }'
;
var $text_editor_styles =
'html, body, #iframe_body { margin:0; padding:0; height:100%; position:relative; font-family:'+ $settings.UI_font +'; font-size: '+ $settings.UI_font_size +'; }' +
'#iframe_body { display:flex; flex-direction:column; position:relative; overflow:hidden; }' +
'#iframe_body #content_text { display:flex; height:100%; padding:0; position:absolute; z-index:1; width:100%; overflow:hidden; flex-direction:column; }' + // div
'.editor_theme_dark .border_right { border-right: solid 1px #111; }' +
'.editor_theme_light .border_right { border-right: solid 1px #666; }' +
'.editor_theme_dark .border_bottom { border-bottom: solid 1px #111; }' +
'.editor_theme_light .border_bottom { border-bottom: solid 1px #666; }' +
'ul.has_popout_menu, .editor_theme_light #toolbar ul.has_popout_menu { background-color:#C0C0C0; border:solid 1px #666; }' +
'ul.has_popout_menu link { background-color:#D0D0D0; }' +
'ul.has_popout_menu li:hover { background-color:#E0E0E0; }' +
'.editor_theme_dark #toolbar ul.has_popout_menu li { background-color:#C0C0C0; }' +
$warning_styles +
// TOOLBAR
'#toolbar { width:100%; background:#C0C0C0; position:relative; z-index:100; border-bottom: solid 1px #999; border-collapse:collapse; 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; position:relative; }' + // table
'#toolbar td { padding:2px 0 0; }' +
'#toolbar_buttons { margin:0; padding:0; list-style:none; }' + // ul
'.toolbar_icon { margin:0 4px; padding:4px; width:16px; height:16px; float:left; background-size:14px; background-repeat:no-repeat; background-position:center; cursor:pointer; display:block; opacity:0.6; color:#444; }' + // li
'#toggle_theme { background-image:'+ SVG_Text_Editing_UI_Icon('toggle_theme') +'; }' +
'#show_source { background-image:'+ SVG_Text_Editing_UI_Icon('show_markdown') +'; background-size:18px; }' +
'#show_preview { background-image:'+ SVG_Text_Editing_UI_Icon('show_preview') +'; }' +
'#show_html { background-image:'+ SVG_Text_Editing_UI_Icon('show_html') +'; background-size:20px; }' +
'#toggle_split { background-image:'+ SVG_Text_Editing_UI_Icon('toggle_split') +'; }' +
'#sync_scroll { padding:4px; float:left; opacity:1 !important; }' + // li
'#sync_scroll input { float:left; }' + //
'#sync_scroll label { width:8em; display:block; font-size:inherit; line-height:1.5; }' + //
'#save_btn { margin:0; padding:4px 4px 4px 8px; width:20px; height:16px; float:right; position:relative; z-index:9997; background-repeat:no-repeat; background-position:center right 7px; background-image:'+ SVG_Text_Editing_UI_Icon('save_btn') +'; background-size:16px; cursor:pointer; outline:none; }' +
'#save_btn ul { display:none; margin:0; padding:0 32px 0 0; position:absolute; top:-4px; right:-2px; list-style:none; box-shadow:0px 4px 6px -3px #333; background-repeat:no-repeat; background-position:right 8px top 7px; background-image:'+ SVG_Text_Editing_UI_Icon('save_btn') +'; background-size:16px; background-color:#C0C0C0; }' +
'.edited #save_btn, .edited #save_btn ul { background-image:'+ SVG_Text_Editing_UI_Icon('save_btn_edited') +'; }' +
'#save_btn ul li { margin:0; padding:4px 6px; text-align:right; width:100%; white-space:pre; box-sizing:border-box; }' +
'#save_btn a { font-weight:normal; }' +
'#save_btn:hover ul { display:block; }' +
'#save_btn li:hover { background-color:#DDDDDD !important; }' +
'.editor_theme_dark #save_btn ul { border-color:#EEE; box-shadow:0px 4px 6px -3px #EEE;}' +
'.editor_theme_dark #save_btn li { border-color:#EEE; color:#111; background-color:#AEAEAE !important; }' +
'.editor_theme_dark #save_btn li:hover { background-color:#989898 !important; }' +
'.editor_theme_dark #save_text { border-color:#EEE; color:#111; }' +
'#clear_text { margin:0 4px; padding:4px; height:16px; float:right; cursor:pointer; }' + // li
'#toolbar li:hover, .preview_text:not(.split) #show_preview, body.source_text #show_source, .split_view #toggle_split, .edited #save_btn'+
'{ opacity:1; }' +
// TEXT CONTENT CONTAINERS
'#text_container { display:flex; flex-grow:1; overflow:hidden; }' + // li
'#text_source { margin:0; padding:1em; display:block; border:0; line-height:1.2; overflow-y:scroll; resize:none; font-family:monospace; box-sizing:border-box; z-index:1; font-size:'+ parseFloat($settings.UI_font_size) + $settings.UI_font_size.replace(/\d*/,'') +'; }' + // textarea
'#text_preview, #html_preview { margin:0; padding:1em; overflow-y:scroll; box-sizing:border-box; z-index:1; }' + // div
'#html_preview { display:none; white-space:pre-wrap; word-break:break-word; font-family:monospace; }' +
'body.preview_html #html_preview { display:block; }' +
// RESIZE HANDLE
'#text_editing_handle { display:none; width:7px; position:absolute; top:0; bottom:0; left:calc(50% - 4px); cursor:col-resize; z-index:3; }' + //
'.split_view #text_editing_handle { display:block; }' +
// TEXT SOURCE
'#text_source, #text_preview, #html_preview { height:100%; }' +
'#text_source:focus, #text_preview:focus, #html_preview:focus { outline:none; }' +
'#text_source:focus { box-shadow: inset 0 0 4px #666; }' +
'.editor_theme_dark #text_source:focus { box-shadow: inset 0 0 6px #000; }' +
// TEXT PREVIEW
'#text_preview, #html_preview { padding: 14px; box-sizing:border-box; z-index:1; overflow-y:scroll; font-size:'+ parseFloat($settings.UI_font_size) + $settings.UI_font_size.replace(/\d*/,'') +'; }' +
// dark theme
'.editor_theme_dark #toolbar { background: #404040; color:#EEEEEE; border-bottom: solid 1px #111; }' +
'.editor_theme_dark.split_view #text_preview, .editor_theme_dark.split_view #html_preview { border-left: solid 1px #111; }' +
'.editor_theme_dark #toolbar .has_background:not(#save_btn), .editor_theme_dark:not(.edited) #save_btn, .editor_theme_dark.edited #save_btn li' +
'{ filter: invert(1); }' +
'body.theme_light:not(.editor_theme_dark) .background_color_DD_33, body.editor_theme_light .background_color_DD_33 { background-color: #DDDDDD; }' +
'body.theme_dark:not(.editor_theme_light) .background_color_DD_33, body.editor_theme_dark .background_color_DD_33 { background-color: #333333; }' +
'body.theme_light .background_color_EE_22, body.editor_theme_light .background_color_DD_33:focus, body.theme_light #content_container:hover, body.theme_light #content_grid::after { background-color: #EEEEEE; }' +
'body.theme_dark .background_color_EE_22, body.editor_theme_dark .background_color_DD_33:focus, body.theme_dark #content_container:hover, body.theme_dark #content_grid::after { background-color: #222222; }' +
// SPLIT VIEWS
'.preview_text:not(.split_view) #text_source, .preview_html:not(.split_view):not(.source_text) #text_source, .source_text:not(.split_view) #text_preview, .source_text:not(.split_view) #html_preview, body.preview_html #text_preview, #html_preview, li#save_btn div, .comment'+
'{ display:none; }' +
'.preview_text:not(.split_view) #text_preview, .source_text:not(.split_view) #text_source, .source_text:not(.split_view) #html_preview, .preview_html.preview_text:not(.split_view) #html_preview'+
'{ width:100% !important; }' +
'.split_view #text_preview, .split_view #html_preview { width:50%; border-left:solid 1px #999; }' +
'.split_view #text_source { width:50%; }' +
// custom previewed text styles
'#text_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*/,'') +'; }' +
'#text_preview th, #text_preview td { vertical-align:top; }' +
'#text_preview blockquote { margin-top:1em; margin-bottom:1em; color: #555; }' +
'#text_preview blockquote + blockquote { margin-top:0; }' +
'.markdown-body input[type="checkbox"] { margin-top:0.375em; margin-right:6px; float:left; }' +
'h1 .uplink,h2 .uplink,h3 .uplink,h4 .uplink,h5 .uplink,h6 .uplink'+
'{ display:inline-block; font-size:0.875em; transition: opacity 0.25s; opacity:0; cursor:pointer; margin:0; padding:0; }' +
'h1:hover .uplink,h2:hover .uplink,h3:hover .uplink,h4:hover .uplink,h5:hover .uplink,h6:hover .uplink'+
'{ transition: opacity 0.25s; opacity:0.5; }' +
'#text_preview table { font-size:inherit; }' +
'#text_preview table th { background-color:#EEE; }' +
'.markdown-body::before, .markdown-body::after { display:none !important; background:transparent; }' +
// disabled text editing
'#iframe_body.text_editing_disabled #toolbar, #iframe_body.text_editing_disabled #preview_text, #iframe_body.text_editing_disabled #text_editing_handle'+
'{ display:none; }' +
'#iframe_body.text_editing_disabled #text_source.disabled { top:0; background:white; }' +
'#iframe_body.editor_theme_light .background_color_D0_50 { background-color: #D0D0D0; }' +
'#iframe_body.editor_theme_dark .background_color_D0_50 { background-color: #505050; }' +
'#iframe_body.editor_theme_light .background_color_E0_60 { background-color: #E0E0E0; }' +
'#iframe_body.editor_theme_dark .background_color_E0_60 { background-color: #606060; }' +
'#iframe_body.editor_theme_light .text_color_111, #iframe_body.editor_theme_light #content_text .text_color_111 { color: #111; }' +
'#iframe_body.editor_theme_dark .text_color_111, #iframe_body.editor_theme_dark #content_text .text_color_111 { color: #EEE; }' +
'#iframe_body.has_warning::after { content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.33); z-index:9998; }'
;
var $iframe_dir_styles =
':root, html, body { margin:0; padding:0; width:100%; max-width:100%; height:100%; border:0; border-radius:0; font-family:'+ $settings.UI_font +'; font-size:'+ $settings.UI_font_size +'; hyphens:auto; overflow:hidden; }' +
'#iframe_body { width:100%; display:flex; flex-direction:column; font-size:'+ (parseFloat($settings.UI_font_size) * 0.875) + $settings.UI_font_size.replace(/\d*/,'') +'; }' + //
'#iframe_body.theme_dark { background-color:#333; }' +
'a, a:hover { text-decoration: none !important; }' +
// iframe header
'#thead { flex-direction:row; font-size: 0.875rem; user-select:none; -webkit-user-select:none; }' +
'#change_dirs { display:flex; flex-direction:row; justify-content:space-between; white-space:pre; }' +
'#change_dirs a { padding-right:0 !important; padding-left:0 !important;}' +
'#change_dirs span:hover { font-weight:bold; }' +
'#parent { padding:5px 3px 5px 0; text-align:left; flex-grow:1; }' +
'#open_in_sidebar { padding:5px 0 5px 3px; text-align:right; flex-grow:1; }' +
'#parent a::before, #open_in_sidebar a::after { content:""; width:16px; height:10px; display:inline-block; }' +
'#open_in_sidebar a::after { background-image:'+ SVG_UI_Icon('chevron_left') +'; background-repeat: no-repeat; background-size:6px; background-position: center; }' +
'.theme_dark #parent a::before, .theme_dark #open_in_sidebar a::after { filter:invert(1); }' +
// sorting
'#sorting_row_1 div, #sorting_row_2 div { flex-grow:1; padding:0; }' +
'#sorting_row_1 { display:flex; cursor:pointer; justify-content:space-between; flex-direction:row; }' +
'#sorting_row_1 div { width:50%; }' +
'.sorting span { display:inline-block; padding:3px 0; }' +
'.sorting:hover span { font-weight:bold; }' + //
'.sorting span::before, .sorting span::after { content:""; width:16px; height:8px; display:inline-block; position:relative; color:#CCC; background-repeat:no-repeat; background-position:center; background-size:10px; }' +
'.sorting.down span::after { transform:rotate(180deg) }' +
'.theme_dark .sorting span::before, .theme_dark .sorting span::after { filter:invert(1); }' +
'#sort_by_name, #sort_by_ext { text-align:left; }' +
'#sort_by_size, #sort_by_date, #sort_by_default, #sort_by_kind { text-align:right; }' +
// iframe dir list
'#iframe_dir_list_wrapper { width:100%; height:100%; display:block; position:relative; overflow:scroll; }' + //
'#dir_list { width:100%; height:100%; line-height:1.5; position:relative; overflow:hidden; border-collapse:collapse; }' + //
'#tbody { font-size:0.875rem; counter-reset:row; height:100%; overflow:hidden; }' + //
'#tbody tr, #sorting_row_2 { display: grid; grid-gap:0; grid-template-columns: minmax(24em,100%) minmax(5.5em,8em) minmax(6.5em,14em) minmax(5.5em,5.5em); }' +
'.tbody_row_cell_details { white-space:pre; font-variant-numeric:tabular-nums; padding:3px 0; }' +
'.tbody_row_cell_name_a { padding:3px 0; }' +
'.tbody_row_cell_name_a::before { display:none; counter-increment:row; content:counter(row); width:28px; min-width:28px; height:14px; max-height:14px; min-height:14px; margin-top:2px; padding:0; float:left; text-align:right; font-variant-numeric:tabular-nums; }' +
'.show_numbers #tbody td.name a::before { display:inline-block; }' +
'.tbody_row_cell_name_a_span { display:flex; padding:2px 0; word-break:break-word; }' +
'.tbody_row_cell_name_a_span input { margin:2px 6px 0 0; }' +
'.tbody_row_cell_details.name { grid-column: 1; text-align:left; }' +
'.tbody_row_cell_details.size { grid-column: 2; padding-right:16px; padding-left:0; text-align:right; }' +
'.tbody_row_cell_details.date { grid-column: 3; padding-right:16px; padding-left:0; white-space:normal; overflow:hidden; max-height:1em; overflow-wrap:break-word; text-align:right; }' +
'.tbody_row_cell_details.date span { white-space:pre; display:inline-block; }' +
'.tbody_row_cell_details.kind { grid-column: 4; text-align:right; padding-right:16px; }' +
'.tbody_row_cell_details.ext { display:none; }' +
'tr:hover .tbody_row_cell_name_a, tr.selected .tbody_row_cell_name_a, tr.playing .tbody_row_cell_name_a { font-weight:bold; }' +
'tr.ignored, tr.ignored a { cursor:not-allowed; }' +
'tr.invisible, tr.ignored, body.hide_ignored_items #tbody tr.ignored, body.hide_ignored_items #tbody tr.ignored, body.hide_ignored_items:not(.show_invisibles) #tbody tr.ignored.invisible, body.hide_ignored_items:not(.show_invisibles) #tbody tr.ignored.invisible, body:not(.show_invisibles) #tbody tr.invisible { display:none !important; }' + // display
'body.show_invisibles tr.invisible, #tbody tr:not(.ignored):not(.invisible), body.show_invisibles #tbody tr.invisible, body.has_stats #tbody tr.invisible, body.has_stats #tbody tr.ignored, body.has_stats #tbody tr.ignored.hovered, body.hide_ignored_items.has_stats #tbody tr.ignored, body:not(.hide_ignored_items) #tbody tr.ignored:not(.invisible)' +
'{ display:grid !important; }' +
'#iframe_body.is_blurred #dir_list { opacity:0.75; }' +
'#iframe_body tr.is_blurred { background-color: rgba(172,202,235,0.66) !important; }' +
CSS_UI_Icon_Rules() + // background icons
'.has_icon_before::before { content:""; display:block; float:left; width:28px; min-width:28px; height:14px; max-height:14px; min-height:14px; margin-top:1px; background-position:center; background-repeat:no-repeat; background-size:14px; }' +
'#dir_list.sort_by_default #sort_by_default span::before, #dir_list.sort_by_name #sort_by_name span::before, #dir_list.sort_by_size #sort_by_size span::before, #dir_list.sort_by_date #sort_by_date span::before, #dir_list.sort_by_kind #sort_by_kind span::before, #dir_list.sort_by_ext #sort_by_ext span::before'+
'{ content:""; height:9px; background-image:'+ SVG_UI_Icon('check_mark') +'; background-repeat: no-repeat; background-size:10px; background-position: center; }' +
'#dir_list.sort_by_default #sort_by_default span::after, #dir_list.sort_by_name #sort_by_name span::after, #dir_list.sort_by_size #sort_by_size span::after, #dir_list.sort_by_date #sort_by_date span::after, #dir_list.sort_by_kind #sort_by_kind span::after, #dir_list.sort_by_ext #sort_by_ext span::after, #parent a::before'+
'{ background-image:'+ SVG_UI_Icon('chevron_up') +'; background-repeat: no-repeat; background-size:10px; background-position: center; }' +
// GECKO STYLES:
'body.is_gecko #dir_list tr td { min-width:calc(100% - 24px); }' +
'body.is_gecko #dir_list tr td.name span { display:-webkit-box; width:calc(100% - 64px); }' +
'body.is_gecko .dir::before { content:"" !important; display:none !important; }'
;
// Gecko Styles:
const $gecko_style_rules =
'html, body.is_gecko { border: solid 1px gray !important; }' +
'.dir::before { content:"" !important; display:none !important; }' +
'body.is_gecko button { padding:revert; }' +
'body.is_gecko #grid_btn .menu { top:-7px; left:-120px; }' +
'body.is_gecko thead { font-size:100%; }' +
'body.is_gecko #dir_list .dir::before { position:absolute; }' +
'body.is_gecko #dir_list tr td.name span { display:-webkit-box; width:calc(100% - 56px); }' +
'body.is_gecko.use_default_icons:not(.is_converted_list) #dir_list .file .name .icon { padding-left:4px; background:none; }' +
'body.is_gecko.use_default_icons #dir_list .file .name .icon img { margin-right:6px; height:14px; }' +
'body.is_gecko #tbody > tr > td:not(:first-of-type){ float:left }' +
'body.is_gecko #content_audio_title span { padding-top: 6px;, padding-bottom: 0; }' +
'body.is_gecko #audio,body.is_gecko #audio_container { background-color: transparent; }' +
'body.is_gecko.theme_dark #prev_track, body.is_gecko.theme_dark #next_track, body.is_gecko.theme_dark #close_audio { filter: invert(1); }' +
'body.is_gecko #content_pane.has_zoom_image #content_image_container { display:block !important;}'
;
const $safari_style_rules =
'body.is_safari button { background-color: #FFF; }' +
'body.is_safari.theme_dark #prev_track, body.is_safari.theme_dark #next_track, body.is_safari.theme_dark #close_audio { filter: invert(1); }'
;
// ADD STYLES
const $font_styles = document.createElement('style');
const $font_grid_styles = document.createElement('style');
function addStyles(el) {
el.find('style, link[rel="stylesheet"], link[href$="css"]').remove(); // remove any existing stylesheets
el.append('<style id="conditional_styles">'+ $conditional_styles +'</style><style id="color_and_background_styles">'+ $color_and_background_styles +'</style><style id="main_styles">'+ $main_styles +'</style>');
el.append($font_styles); // empty until font is previewed
el.append($font_grid_styles); // empty until font grid is made
if ( getBrowser() === 'is_gecko' ) { el.append('<style id="gecko_style_rules">'+ $gecko_style_rules +'</style>'); }
if ( getBrowser() === 'is_safari' ) { el.append('<style id="safari_style_rules">'+ $safari_style_rules +'</style>'); }
}
// ***** END STYLES ***** //
// ***** INDEX PREP ***** //
// Try to determine index type from parent directory link container, with fallbacks for indexes that don't have parent directories, or for parent directory links that aren't siblings or ancestors of the index itself.
function getIndexType() {
let parent_link_parent, type; // Possible elements: pre, li, td, th, div -- used to determine index type
// Try to find parent directory link:
let parent_link = $('a:contains("Parent Directory"), a:contains("parent directory"), a[href="../"], a[href="/"], a[href^="?"], img[alt*="PARENTDIR"]');
if ( parent_link.length === 0 ) {
parent_link_parent = document.querySelectorAll('body > ul li, body > pre, body > table:last-of-type tr td');
} else {
parent_link_parent = parent_link.parent(); // use original found parent_link
}
// If no parent_link_parent found, type = error; else return parent node name
let node_name = ( parent_link_parent[0] !== undefined ? parent_link_parent[0].nodeName.toLowerCase() : '');
switch(true) {
case parent_link_parent.length === 0: node_name = 'error'; break;
case $protocol.startsWith('file'): if ( getBrowser() === 'is_gecko' ) { node_name = 'gecko'; } break;
}
let types = {'gecko':'gecko','li':'list','pre':'pre','th':'table','td':'table','div':'default','error':'error','permission_denied':'permission_denied'};
type = types[node_name];
return type;
}
// Return Index items, Index type, remove parent directory link, and add body class.
function getIndexItems() {
let type = getIndexType(), items;
switch(type) {
case 'gecko': items = $('body').find('> table > tbody'); break;
case 'list': items = $('body').find('> ul'); break;
case 'pre': items = $('body').find('> pre').html(); break;
case 'table':
case 'td':
if ( $('table > tbody').length === 1 ) {
items = $('body').find('table > tbody');
} else {
items = $('body').find('table'); // tables without tbody
}
items.find('tr th, tr td:contains(Parent Directory), a[href="../"], hr').parent('tr').remove();
break;
case 'default': items = $('body').find('> table').find('> tbody'); break;
case 'error': items = $('body').html(); break;
}
return [items,type];
}
// Index Prep: convert rows and return array of rows, with link, size, date-modified
function convertIndexItems(type,items) {
let converted = [];
switch(type) {
case 'gecko': converted = convertGeckoType(items); break;
case 'list': converted = convertListType(items); break;
case 'pre': converted = convertPreType(items); break;
case 'table': case 'default': converted = convertTableType(type,items); break;
case 'error': converted = ''; break;
}
return converted;
}
// Index Prep: convert list type function
function convertGeckoType(items) {
let prepped_index = [];
const rows = Array.from(items.find('> tr'));
for ( let row of rows ) {
let prepped_row = [], cellContents = '', cells = Array.from( $(row).find('> td') ), link = ($(cells).find('a').attr('href'));
for ( let cell of cells ) {
cellContents = cell.innerText;
cellContents = ( cellContents !== undefined ? cellContents.trim() : '');
prepped_row.push(cellContents);
}
prepped_row[1] = prepped_row[1].replace(/\s*KB/,'000'); // convert reported size in KB to total bytes
prepped_row[2] = prepped_row[2] + ' '+ prepped_row[3];
prepped_row = prepped_row.slice(1,-1);
if ( link.length > 0 && link !== '/' && link !== '../' ) { prepped_row.unshift(link); }
if ( prepped_row.length > 0 ) { prepped_index.push(prepped_row); }
}
return prepped_index;
}
// Index Prep: convert list type function
function convertListType(items) {
let prepped_index = [];
const rows = items[0].children;
for ( let i = rows.length; i--; ) {
let row = rows[i];
if ( row.innerHTML.indexOf('Parent Directory') === -1 ) {
let prepped_row = [];
let link = $(row).find('a').attr('href');
row = row.innerHTML.replace(/<a .+?<\/a>\s*/,'');
let cells = row.split(' ');
for ( let cell of cells ) {
if ( cell.trim().length > 0 ) { prepped_row.push(cell); }
}
if ( link.length > 0 && link !== '/' && link !== '../' ) { prepped_row.unshift(link); }
if ( prepped_row.length > 0 ) { prepped_index.push(prepped_row); }
}
}
return prepped_index;
}
// Index Prep: convert pre type function
function convertPreType(items) {
let prepped_index = [];
const spaces = /\s{2,}/;
items = items.replace(/\[\s*?\]/g,'[]') // remove empty 'alt=[ ]'
.replace(/\s*<(hr|img[^>])>\s*/g,'') // remove hr and images
.replace(/\s*<a href="[^>]+?>\s*Parent Directory\s*<\/a>\s*/g,'') // remove parent links
.replace(/\s*<a href="\?[^>]+?>[^<]+?<\/a>\s*/g,'') // remove sorting links (href beginning with "?")
.replace(/(<a [^>]+?>)[^<]+?<\/a>/g,' $1</a> ') // remove link display text and add two spaces after
.replace(/(\%20){2,}/g,'\%20'); // remove extra spaces in hrefs
const rows = items.split('\n'); // create array of rows from items
for ( let i = rows.length; i--; ) {
let row = rows[i];
let prepped_row = [];
let cells = row.split(spaces); // assumes pre-type only uses two or more spaces between "columns"
let link;
for ( let j = cells.length; j--; ) {
let cell = cells[j];
if ( cell.trim().length > 0 ) {
if ( !cell.startsWith('<a ') ) { prepped_row.push(cell); } else { link = cell.split('"')[1]; } // extract link
}
}
if ( link !== undefined ) { prepped_row.unshift(link); } // add link to front of prepped_row
if ( prepped_row.length > 1 ) { prepped_index.push(prepped_row); } // add prepped row to index
}
return prepped_index;
}
// Index Prep: convert table type function
function convertTableType(type,items) { // for local chrome indexes and server-generated table-type indexes
let prepped_index = [];
const rows = items[0].children;
for ( let i = rows.length; i--; ) {
let row = rows[i], prepped_row = [], link, cell, cells = row.cells;
for ( let j = cells.length; j--; ) {
switch(true) {
case cells[j].children[0] !== undefined && cells[j].children[0].nodeName === 'A':
link = cells[j].children[0].attributes.href.value;
break;
case cells[j].innerHTML !== ' ' && cells[j].innerHTML.indexOf('<img') === -1:
cell = cells[j].innerHTML.trim().replace(/^-$/m,'—');
if ( cell.length > 0 ) { prepped_row.push( cell ); }
break;
}
}
if ( link !== undefined ) { prepped_row.unshift(link); }
if ( prepped_row.length > 1 ) { prepped_index.push(prepped_row); } // prepped_row.length > 2 in order to omit parent directory row
}
return prepped_index;
}
// Index Prep: Build new Index from prepped rows
function buildNewIndex(id,prepped_index,sort,type) {
let new_index_items = [], body_classes = new Set(), row_link_prefix = '';
if (type === 'gecko' ) { row_link_prefix = document.baseURI; } // because FF only uses the
let stats = { total:0, dir:0, file:0, hidden:0, invisible:0, ignored:0, dir_ignore:0, dir_invisible:0, file_invisible:0, file_ignore:0 };
let selected = ( getQuery('selected').length > 0 ? Number(getQuery('selected')) : null);
for ( let i = prepped_index.length; i--; ) {
let row = prepped_index[i];
// Get row attrs and text
const row_link = row[0] !== undefined ? row[0].replace(/&/g,'&') : '';// .replace(//,''); // decode some reserved characters
const row_name = getItemName(row_link).replace(/^\s/m,'\ ').replace(/^\//m,'').replace(/([-_——])/g,'$1<wbr>'); // display name, with word breaks added after unbreakable chars
const row_sort_name = getItemName( escapeStr( row_link.toLocaleLowerCase() ) );
const sizes_and_dates = getItemSizeAndDate(row);
const row_size = sizes_and_dates[0];
const row_sort_size = sizes_and_dates[1];
const row_date = sizes_and_dates[2];
const row_sort_date = sizes_and_dates[3];
const row_ext = getItemExt(row_sort_name);
const row_sort_kind = getItemKind(row_ext);
const row_kind = row_sort_kind.slice(0,1).toUpperCase() + row_sort_kind.slice(1);
let row_classes = getItemClasses(row_sort_name,row_sort_kind,row_ext);
if ( window.self === window.top && selected !== undefined && ( prepped_index.length - i ) === selected ) { row_classes += ' selected'; } // autoSelect file
// Assemble row elements
const checkbox = ( /media/.test(row_classes) ? '<input type="checkbox" tabindex="-1" checked />' : '');
const name_span = '<span class="tbody_row_cell_name_a_span has_icon_before">'+ checkbox + row_name +'</span>';
const cell_link = '<a href="'+ row_link_prefix + row_link +'" class="icon tbody_row_cell_name_a text_color_111">'+ name_span +'</a>';
const cell_name = '<td class="tbody_row_cell tbody_row_cell_name name" data-name="'+ row_sort_name.split('/')[0] +'">'+ cell_link +'</td>';
const cell_size = '<td class="tbody_row_cell_details size details" data-size="'+ row_sort_size +'">'+ row_size +'</td>';
const cell_date = '<td class="tbody_row_cell_details date details" data-date="'+ row_sort_date +'">'+ row_date +'</td>';
const cell_kind = '<td class="tbody_row_cell_details kind details" data-kind="'+ row_sort_kind +'">'+ row_kind +'</td>';
const cell_ext = '<td class="tbody_row_cell_details ext details" data-ext="'+ row_ext +'"></td>';
// Assemble row
let new_row = '<tr id="rowid-'+ (prepped_index.length - i) +'" class="'+ row_classes+'" data-kind="'+ row_sort_kind +'" data-ext="'+ row_ext +'">'+ cell_name + cell_size + cell_date + cell_kind + cell_ext +'</tr>';
new_index_items.push($(new_row)[0]);
// body classes (set object: unique values)
switch(row_sort_kind) {
case 'audio': body_classes.add('has_media').add('has_audio'); break;
case 'video': body_classes.add('has_media').add('has_video'); break;
case 'font' : body_classes.add('has_fonts'); break;
case 'image': body_classes.add('has_images'); break;
}
switch(type) {
case 'gecko': body_classes.add('is_converted_gecko'); break;
case 'list': body_classes.add('is_converted_list'); break;
case 'pre': body_classes.add('is_converted_pre'); break;
case 'table':
case 'td': body_classes.add('is_converted_table'); break;
case 'default': body_classes.add('is_default'); break;
case 'error': body_classes.add('is_error'); break;
}
// Stats for visible files
stats.total = ++stats.total; // increment total number of items
if ( row_sort_kind === 'dir' ) { ++stats.dir; } else { ++stats.file; } // increment total number of dirs or files
if ( !stats[row_kind] && !/invisible|ignored/.test(row_classes) ) { stats[row_kind] = 1; } else { ++stats[row_kind]; } // increment row_kind or add it to the stats if it is not already there
// stats for invisible/ignored files
if ( /invisible|ignored/.test(row_classes) ) { // if it's invisible or ignored --> why is this so complicated?
++stats.hidden;
if ( /invisible/.test(row_classes) ) { // if it's invisible...
++stats.invisible; // increment the invisible count
if ( !stats[row_kind +'_invisible'] ) { stats[row_kind +'_invisible'] = 1; } else { ++stats[row_kind +'_invisible']; } // increment row_kind or add it
if ( /dir/.test(row_classes) ) { // if it's an invisible directory...
if ( !stats.dir_invisible ) { stats.dir_invisible = 1; } else { ++stats.dir_invisible; } // increment count or add it to the list
} else { // or an invisible file
if ( !stats.file_invisible ) { stats.file_invisible = 1; } else { ++stats.file_invisible; } // increment count or add it to the list
}
} else { // else it is ignored
++stats.ignored; // increment the ignored count
if ( !stats[row_kind +'_ignore'] ) { stats[row_kind +'_ignore'] = 1; } else { ++stats[row_kind +'_ignore']; }
if ( /dir/.test(row_classes) ) { // if it's an ignored directory... (is there such a thing?)
if ( !stats.dir_ignore ) { stats.dir_ignore = 1; } else { ++stats.dir_ignore; }
} else { // on an ignored file...
if ( !stats.file_ignore ) { stats.file_ignore = 1; } else { ++stats.file_ignore; }
}
}
}
}
$('body').addClass(Array.from(body_classes).join(' ')).data('stats',stats); // add stats data to body and body classes
if ( sort === undefined ) { sort = getQuery('sort_by'); } // get sorting pref
let sort_direction = ( getQuery('sort_direction') === 'up' ? -1 : 1 ); // get sort direction
let sorted_index_items = sortDirList($(new_index_items), 'sort_by_'+ sort, sort_direction); // make initial sort
return sorted_index_items;
}
// Index Prep: get row name
function getItemName(link) {
let name, url;
try { name = decodeURIComponentSafe(link); }
catch (error) { name = link.replace(/%20/g,' ').replace(/\s{2,}/,' '); }
if ( name.split('/').length > 2 ) { // get name only if x = full path
let arr = name.split('/');
if ( name.startsWith('/') && name.endsWith('/') ) { // dirs
name = arr[arr.length - 2] + '/';
} else {
name = arr[arr.length - 1]; // files
}
}
return name;
}
// Index Prep: get row classes
function getItemClasses(name,kind,ext) {
if ( ext === undefined ) { ext = ''; }
let item_classes = [];
item_classes.push(kind);
if ( !/dir|app/.test(ext) ) { item_classes.push('file'); }
if ( ext === 'app' ) { $settings.apps_as_dirs === false ? item_classes.push('file') : item_classes.push('dir') }
if ( name.endsWith('symlink') || name.endsWith('alias') || name.endsWith('symbolic link') ) { item_classes.push('alias'); }
if ( name.startsWith('.') ) { item_classes.push('invisible'); }
for ( let item_kind_system of $item_kind.system ) { if ( name.endsWith(item_kind_system) ) { item_classes.push('ignored'); } } // ignore various system items
switch(true) {
case !JSON.stringify( $item_kind).match( escapeStr(ext) ) : // else classify as "other" if extension is not in $item_kind.
item_classes.push('other'); //itemType = 'Other'; itemKind = 'other';
break;
case kind === '':
// item_classes.push('code'); //itemType = 'Code'; itemKind = 'code';
break;
case kind === 'system':
item_classes.push('ignored');
default:
item_classes.push(ext);
}
if ( $row_settings.ignored.includes( ext ) ) { item_classes.push('ignored'); }
if ( $row_settings.exclude.includes( ext ) ) { item_classes.push('exclude'); }
if ( kind === 'audio' || kind === 'video' ) { item_classes.push('media'); }
item_classes = Array.from(new Set(item_classes)); // remove dupe classes
return item_classes.join(' ');
}
// Index Prep: get formatted row size and date
function getItemSizeAndDate(cells) {
let sizes_and_dates = [], row_display_size, row_sort_size, row_display_date, row_sort_date, size_units = /[BYTES|B|K|KB|MB|GB|TB|PB|EB|ZB|YB]/;
if ( cells.length > 1 ) {
if ( cells[1].search(/[-:\/]/) !== -1 ) { // test for typical date/time separators.
row_display_date = cells[1]; row_display_size = cells[2];
} else {
row_display_date = cells[2]; row_display_size = cells[1];
}
}
// size
if ( /undefined|—|-|,/.test(row_display_size) || row_display_size === '' ) { // if size is undefined, empty, or punctuation
row_display_size = '—'; row_sort_size = '0'; // if no size supplied, use these defaults
} else {
row_sort_size = getItemSortSize(row_display_size);
if ( !row_display_size.toUpperCase().match(size_units) ) { // if provided size is only numeric
row_display_size = formatBytes(row_display_size,1); // format byte size
} else {
row_display_size = row_display_size.replace('K','k').replace(/(\d+)\s*([A-z])/,'$1 $2'); // ensure display size has space between number and units
}
}
// date
if ( [undefined,'','-'].includes(row_display_date) ) { row_display_date = '—'; row_sort_date = '0'; } else { row_sort_date = getItemDate(row_display_date); }
row_display_date = row_display_date.replace(/, (.+)/,'<span>, $1</span>'); // add span for short date
sizes_and_dates.push( row_display_size, row_sort_size, row_display_date, row_sort_date );
return sizes_and_dates;
}
// Index Prep: get row size for sorting
function getItemSortSize(val) {
let sort_size, values = val.replace(/(\d+)\s*([A-z]+)/,'$1 $2').split(' '), size = values[0], unit = values[1];
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
if ( unit !== undefined ) { unit = unit.toUpperCase(); }
sort_size = size * factor[unit]; // convert byte size to multiplication factor
return sort_size;
}
// convert numeric sizes to display format
function formatBytes(val, decimals) {
if (val === 0) return '0 Bytes';
const k = 1024, dm = (decimals < 0 ? 0 : decimals), sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(val) / Math.log(k));
return parseFloat((val / Math.pow(k, i)).toFixed(dm)) +' '+ sizes[i];
}
// process date
function processDate(match,p1,p2,p3) { //date formats: 2017-10-09 13:12 || 2015-07-25T02:02:57.000Z || 12-Mon-2017 21:11
const mo = 'JanFebMarAprMayJunJulAugSepOctNovDec'.indexOf(p2)/3 + 1; // e.g., convert month into number, or use number
return p3 +'-'+ mo +'-'+ p1;
}
// Index Prep: get row date 2015-07-25T02:22:00.000Z
function getItemDate(val) {
let sort_date = val.replace(/^(\d{2})-(\w{3})-(\d{4})/m, processDate) // convert Month to number
.replace(/\b(\d{1})[-:/]/g,'0$1/') // add leading 0 for single digit numbers
.replace(/(\d{2})\/(\d{2})\/(\d{2}),/,'$3$1$2') // reorder MM/DD/YY dates
.replace(/-|:|\s+|\//g,''); // remove spacing characters
return sort_date;
}
// Index Prep: get row kind
function getItemKind(ext) {
let kind = '';
switch(true) {
case ( /dir|app/.test(ext) ): kind = ext; break; // directories and apps
case ( /url|url\/|.*webloc|.*webloc\//.test(ext) ): kind = 'link'; break; // links
default: // categorize everything else by $item_kind
for ( let types in $item_kind ) { if ( $item_kind[types].includes( ext ) ) { kind = types; return kind; } else { kind = 'other'; } }
}
return kind;
}
// Index Prep: get row extension
function getItemExt(item_sort_name) {
let ext = '';
switch(true) {
case item_sort_name.endsWith('app/'): case item_sort_name.endsWith('exe'): ext = 'app'; break; // apps
case item_sort_name.endsWith('symlink'): ext = 'symlink'; break;
case item_sort_name.endsWith('/'): ext = 'dir'; break; // directories
case !/\./.test(item_sort_name): ext = item_sort_name; // if no '.' in link (typical for bin files), ...
default: // find the last . and get the remaining characters
ext = item_sort_name.slice(item_sort_name.lastIndexOf('.') + 1);
if ( /\?/.test(ext) ) { ext = ext.slice(0,ext.indexOf('?')); }
}
return ext;
}
// END INDEX PREP
// ***** MAKE NEW INDEX ***** //
function makeNewIndex(el,sort) {
const index_items = getIndexItems(el), items = index_items[0], type = index_items[1];
const converted_index = convertIndexItems( type, items ); // = array of rows: ["link","date","size"]
switch(type) {
case 'error': return [converted_index]; break;
default: let new_index = buildNewIndex( $(el).attr('id'), converted_index, sort, type ); return [new_index];
}
}
// get and set index stats
function sortObject(obj) { return Object.keys(obj).sort().reduce((r, k) => (r[k] = obj[k], r), {}); }
function getIndexStats() {
if ( $('body').data('stats') === undefined ) { return; }
var stats = $('body').data('stats'), i = 1, padding_style = '';
stats = sortObject(stats); // sort by kind
const total_hidden = '('+ stats.hidden +' invisible or ignored)';
const hidden_dirs = ' ('+ (stats.dir_invisible + stats.dir_ignore) +' invisible or ignored)';
const hidden_files = ' ('+ (stats.file_invisible + stats.file_ignore) +' invisible or ignored)';
const dirs_label = ( stats.dir === 1 ? ' Directory' : ' Directories' );
const files_label = ( stats.file === 1 ? ' File' : ' Files' );
let details_rows = '';
var display_name = '', hidden_name = '';
for ( let stat in stats ) {
if ( i !== 1 ) { padding_style = 'first'; }
if ( Number.isNaN(stats[stat]) ) { stats[stat] = 0; }
display_name = stat.replace(/_(.+)/,' ($1)');
if ( !/total|dir|file|^hidden|^invisible|^ignored/m.test(stat) ) { // don't include these stats in details rows
details_rows += (`<div class="${stat.toLowerCase()}"><span class="stats_count ${padding_style}">${stats[stat]} </span><span class="stats_kind ${stat.replace('_',' ').toLowerCase()} ${padding_style}"><a class="icon"><span class="has_icon_before">${display_name}${hidden_name}</span></a></span></div>`); // create list of kinds and counts
}
i = 0;
}
$('#stats_summary').html(stats.total +' Items: '+ stats.dir + dirs_label +', '+ stats.file + files_label);
$('#stats_summary_detailed_total').html( '<span class="stats_count ">'+ stats.total +' Items '+ total_hidden +'</span>' );
$('#stats_summary_detailed_dirs').html( '<span class="stats_count">'+ stats.dir +'</span><span class="stats_kind dir has_icon_before">'+ dirs_label + hidden_dirs +'</span>' );
$('#stats_summary_detailed_files').html( '<span class="stats_count">'+ stats.file +'</span><span class="stats_kind file has_icon_before">'+ files_label + hidden_files +'</span>' );
$('#total').html( stats.total +' Items' );
$('#total_hidden').html( total_hidden );
$('#dirs_length').html( stats.dir );
$('#dirs_label_hidden_dirs').html( dirs_label + hidden_dirs );
$('#files_length').html( stats.file );
$('#files_label_hidden_files').html( files_label + hidden_files );
$('#stats_details_container').empty().append( details_rows );
}
// ***** END DIR_LIST SETUP ***** //
const $body = $('body');
// ***** UI SETUP ***** //
// UI Setup: build UI and add body classes and other initial settings
function setupUIprefs() {
if ( window.location.href.endsWith('?') ) { window.location.href = window.location.href.slice(0,-1) } // fix for situations where the query isn't completely removed
for ( let key in $settings ) {
switch(true) {
case getQuery(key) === 'true': // only add body class for $settings whose value is true
$body.addClass(key);
if ( getQuery('toggle_sidebar') === 'true' ) { $body.addClass( 'has_hidden_sidebar' ); }
if ( getQuery('show_invisibles') === 'true' ) { $('#show_invisibles').attr('checked','checked'); }
if ( getQuery('default_text_view') === 'true' ) { $body.addClass($settings.default_text_view.toString()); }
break;
default: // non-boolean settings and others
switch(true) {
case key === 'theme':
$body.addClass( 'theme_'+ getQuery('theme') );
break;
case key === 'sort_by':
$body.addClass( 'sort_by_'+ getQuery(key) );
$('#sort_by_'+ getQuery(key) ).addClass('selected');
if ( getQuery('sort_direction') === 'up' ) { $('#sort_by_'+ getQuery(key) ).addClass('up'); }
break;
case key === 'default_text_view':
if ( getQuery(key) === 'source_text' ) { $body.addClass('source_text'); } else { $body.addClass('preview_text'); }
break;
case getQuery('editor_theme') !== '':
$body.addClass( 'editor_theme_'+ getQuery('editor_theme'));
break;
}
}
}
switch( getBrowser() ) {
case 'is_chrome': $body.addClass('is_chrome'); break;
case 'is_gecko': $body.addClass('is_gecko'); break;
case 'is_safari': $body.addClass('is_safari'); break;
}
if ( navigator.platform.indexOf('Win') > -1 ) { $body.addClass('is_windows'); }
// if ( $protocol !== 'file:' ) { $body.addClass('is_non_local'); }
}
// Build UI: Append all assembled elements to $body
function buildUI() {
switch(true) {
case window.self === window.top: // if it's not an iframe...
document.title = 'Index of: '+ current_location;
$('head').prepend('<meta charset="utf-8"><base href="'+ document.baseURI +'">');// .find('#title').removeAttr('id');
if ( current_location.startsWith('file') ) { // add favicon for local directories
$('head').prepend('<link href="data:image/png;base64,' + SVG_UI_File_Icon('favicon') +'" rel="icon" sizes="16x16" />');
}
const new_index = makeNewIndex('body'); // make index
// setup
switch(true) {
case $('body').hasClass('is_error'):
$('#content_pane').addClass('has_iframe');
$('#content_iframe').attr('src',current_location +'/?is_error=true').addClass('has_content');
break;
default:
$main_content.find('#tbody').append(new_index); // append index to body
$('body').empty().attr('id','top').attr('lang','en').append($main_content);
getIndexStats();
setupUIprefs();
updateParentLinks();
addStyles( $('head') );
initMedia();
autoLoadFile();
}
break;
case window.self !== window.top && !window.location.pathname.endsWith('.pdf'):
setUpIframeUI();
break;
}
}
buildUI();
// SET UI TO DEFAULT SETTINGS: remove queries;
function defaultSettings() {
let query_str = '';
if ( getQuery('selected') !== undefined ) { query_str += 'selected='+ getQuery('selected'); }
if ( getQuery('history') !== undefined ) { query_str += 'history='+ getQuery('history'); }
if ( query_str.length > 0 ) { query_str = '?' + query_str.replace(/\s/g,'+'); }
window.location.assign(current_location + query_str);
}
$('#default_settings').on('click', function(e) {
e.preventDefault(); e.stopPropagation();
$('body').removeClass('has_menu');
if (window.confirm( 'Are you sure you want to remove all your temporary UI settings from the URL query string?' ) ) { defaultSettings(); }
});
// SAVE USER SETTINGS
function saveSettings(file_name, data) { saveFile(data,'application/json',file_name); }
$('#export_settings').on('click',function(e) {
e.preventDefault(); e.stopPropagation();
$('body').removeClass('has_menu');
const settings_string = ( JSON.stringify($settings,null,'\t'));
saveSettings('settings.json',settings_string);
});
// Show/Close Help
function showHelp() { $('body#top').addClass('has_help'); }
$('#show_help').on('click','span', function(e) { e.stopPropagation(); showHelp(); });
$('#close_help').on('click', function(e) { e.preventDefault(); $('body').removeClass('has_help'); });
$('#help_container').on('click', function(e) { e.stopPropagation(); });
// Click Menu Bookmark (with warning)
function setLocation(link) { window.location = link; }
$('#parent_dir_nav, #parents_dir_nav + .menu, #menu .bookmark').on('click','a', function(e) {
e.preventDefault();
switch(true) {
case $(this).attr('href').indexOf('file://') > -1 && $protocol !== 'file:':
$body.addClass('has_warning').find('#warnings_container').addClass('warning_local_bookmark'); $('#warning_btn_ok').focus(); break;
case $body.hasClass('has_playlist'): case $body.hasClass('has_filelist'): closePlaylist(); break;
default: showWarning( 'setLocation', $(this).attr('href') );
}
});
// Show Menus
function showMenus(el) {
sendMessage('iframe','top_has_menu');
$('body').removeClass('has_hidden_sidebar');
let position = $(el).position(), id = $(el).attr('id');
if ( $('body').hasClass('has_stats') ) { $('#stats').click(); }
$(el).find('> ul').css({'top':position.top + $(el).innerHeight() + 1 + 'px'});
switch(id) {
case 'parents_dir_menu':
switch(true) {
case $('body').hasClass('has_menu_parents'): $('body').removeClass('has_menu_parents'); break;
default: $('body').addClass('has_menu_parents').removeClass('has_menu');
}
break;
case 'menu_container':
switch(true) {
case $('body').hasClass('has_menu'): $('body').removeClass('has_menu'); sendMessage('iframe','top_closed_menu'); break;
default: $('body').addClass('has_menu').removeClass('has_menu_parents'); sendMessage('iframe','top_has_menu');
}
}
}
$('#parents_dir_menu, #menu_container').on('click',function(e) { e.stopPropagation(); showMenus($(this)); });
// Click menu
function clickMenu() {
$('#menu').find('.selected:not(.hovered)').removeClass('selected').find('a,> span,label').click();
$('#menu').find('.hovered').removeClass('selected hovered');
$('body').removeClass('has_menu');
if ( $('body').hasClass('focus_content') ) { sendMessage('iframe','close_menu'); $('#content_iframe').focus(); }
if ( $body.hasClass('focus_content') ) { focusContent(); }
}
// Close menus
function closeMenus() {
switch(true) {
case !$('body').hasClass('has_menu') && !$('body').hasClass('has_menu_parents') && !$('body').hasClass('has_stats'): break;
default: $('body').removeClass('has_menu has_menu_parents faded has_stats has_help');
}
}
// Show Stats
function showStats() { $('body').addClass('has_stats').removeClass('has_menu has_menu_parents'); }
$('#stats_summary').on('click', function(e) { e.stopPropagation(); showStats(); });
$(document).on('click', function(e) { e.stopPropagation(); closeMenus(); });
// Toggle UI Preferences
function toggleUIpref(pref_ID) {
let pref_class = pref_ID;
if ( $body.hasClass('preview_text') && pref_ID ==='preview_text' || $body.hasClass('source_text') && pref_ID ==='source_text' ) { return; }
switch(pref_ID) {
case 'sort_by_name': case 'sort_by_default': case 'sort_by_size': case 'sort_by_date': case 'sort_by_kind': case 'sort_by_ext': // sorting
$('body').removeClass('has_menu sort_by_default sort_by_name sort_by_size sort_by_date sort_by_kind sort_by_ext');
break;
case 'theme': // theme
if ( $('body').hasClass('theme_dark') ) { pref_ID = 'theme_dark'; } else { pref_ID = 'theme_light'; }
pref_class = 'theme_dark theme_light';
sendMessage('iframe',pref_ID);
break;
case 'source_text':
case 'preview_text': // text editing default view
pref_class = 'preview_text source_text';
pref_ID = 'default_text_view';
sendMessage('iframe',pref_ID);
break;
case 'split_view': case 'alternate_background': case 'hide_ignored_items': case 'show_invisibles': case 'show_numbers':
sendMessage('iframe',pref_ID);
break;
}
toggleQuery(pref_ID);
$('body#top').toggleClass(pref_class);
if ( pref_ID === 'disable_text_editing' ) { // needs to be here and not in switch above
$('.selected.text, .selected.markdown, .selected.code').find('a').click();
}
scrollThis('tbody','selected',false); // true = instant scroll
$('#stats').html(getIndexStats($('#dir_list').find('#tbody tr')));
if ( $('body').hasClass('focus_content') ) { focusContent(); }
}
// Click Toggle UI Pref elements
$('.toggle_UI_pref').on('click',function(e) {
if ( !$(this).is('input') ) { e.preventDefault(); } // allow checkboxes to be checked
if ( !$(this).hasClass('disabled') ) { toggleUIpref( $(this).attr('id') ); }
});
// Toggle Sidebar
function toggleSidebar() {
$body.toggleClass('has_hidden_sidebar');
if ( $body.hasClass('has_hidden_sidebar') ) { setQuery('toggle_sidebar','true'); } else { removeQuery('toggle_sidebar'); }
if ( $body.hasClass('focus_content') ) { focusContent(); }
scrollThis('tbody','selected',true); // true = instant scroll
}
$('#toggle_sidebar').on('click', function(e) { e.stopPropagation(); toggleSidebar(); });
// RESIZE Sidebar/Content Pane
function resizeSidebar(f) {
f.stopPropagation();
let $sidebar_wrapper = $('#sidebar_wrapper'), startX = f.pageX, window_width = window.innerWidth, sidebar_width = $sidebar_wrapper.width();
$('body').addClass('has_overlay'); // prevent interference from the rest of ui
$(document).on('mousemove',function(e) {
e.stopPropagation(); e.preventDefault();
let deltaX = e.pageX - startX;
if ( e.pageX > 230 && e.pageX < window_width - 200 ) {
$sidebar_wrapper.css({'width':sidebar_width + deltaX + 'px'});
$content_pane.css({'width':(window_width - sidebar_width) - deltaX + 'px'});
}
scrollThis('tbody','selected',false); // true = instant scroll
});
$(document).on('mouseup',function() {
$('body').removeClass('has_overlay'); // remove the overlay
$(document).off('mousemove'); // remove eventlistener
setQuery('width',$sidebar_wrapper.width()); // set the sidebar width query
if ( $body.hasClass('focus_content') ) { focusContent(); } // refocus content if necessary
});
}
$('#handle').on('mousedown', function(f) { f.stopPropagation(); resizeSidebar(f); });
// ***** BASIC UI FUNCTIONS ***** //
// getElementById alias
function getElById(id) { return $(document.getElementById(id) ); }
// Scroll Selected Items
function scrollThis(container_ID, scroll_el_class, bool) {
let $container = document.getElementById(container_ID);
if ( $container.height === 0 ) { return; } // don't scroll hidden elements
let $scroll_el = ( scroll_el_class !== undefined ? $container.getElementsByClassName(scroll_el_class) : null );
let scroll_behavior = ( ( bool !== undefined || bool === true || $content_pane.attr('data-content') === 'has_grid' ) ? 'instant' : 'smooth' ); // instant allows sidebar & grid to scroll simultaneously
let scroll_block = ( $('body').hasClass('is_gecko') ? 'start' : 'nearest' );
if ( $scroll_el !== undefined && $scroll_el.length === 1 ) {
$scroll_el[0].scrollIntoView({ behavior:scroll_behavior, block:scroll_block, inline:'nearest' });
}
}
// ***** SORTING ***** //
function sortIndex(els,id,sort_direction) { // id = sort type
let sorted = [];
const new_sort = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }); // needs to be above makeNewIndex()
sorted = els.removeClass('sorted border_top').sort((a, b) => {
let aName, bName;
if ( $('body').hasClass('has_playlist') || $('body').hasClass('has_filelist') ) {
aName = $(a).attr('id'); bName = $(b).attr('id');
} else {
aName = $(a).find('td.name').data('name'); bName = $(b).find('td.name').data('name');
}
let aData = $(a).find('td[data-'+ id +']').data(id);
let bData = $(b).find('td[data-'+ id +']').data(id);
if ( sort_direction === 1 ) { // sort by detail data value, then by name (i.e., if data values are the same, sort by name)
if ( new_sort.compare(aData, bData) === 0 ) { return new_sort.compare(aName, bName); } else { return new_sort.compare(aData, bData); }
} else { // reverse sort
if ( new_sort.compare(bData, aData) === 0 ) { return new_sort.compare(bName, aName); } else { return new_sort.compare(bData, aData); }
}
});
sorted = sorted.sort((a, b) => { // add sorted style (rules between different rows)
if ( id === 'kind' || id === 'ext' && sort_direction === 1 ) {
if ( $(a).find('td[data-'+ id +']').data(id) !== $(b).find('td[data-'+ id +']').data(id) ) { $(a).addClass('sorted border_top'); }
}
if ( id === 'kind' || id === 'ext' && sort_direction === -1 ) {
if ( $(b).find('td[data-'+ id +']').data(id) !== $(a).find('td[data-'+ id +']').data(id) ) { $(a).addClass('sorted border_top'); }
}
});
return sorted;
}
// Sort the Dir List on click
function sortDirList(rows, id, sort_direction) {
let $sorted = [], $sort_all = rows, $sort_dirs = $sort_all.filter('.dir:not(.app)'), $sort_files = $sort_all.filter('.file,.app'), sort_id = id.slice(8);// === 'default' ? 'name' : id;
if ( sort_id === 'default' || ( sort_id !== 'name' && $settings.dirs_on_top === true )) {
const $sorted_dirs = sortIndex($sort_dirs, sort_id, sort_direction);
const $sorted_files = sortIndex( $sort_files, sort_id, sort_direction );
if (sort_direction === 1) {
$sorted = $.merge($sorted_dirs,$sorted_files);
} else {
$sorted = $.merge($sorted_files,$sorted_dirs);
}
} else {
$sorted = sortIndex( $sort_all, sort_id, sort_direction );
}
return $sorted;
}
// Sort on click
function clickSort(id) {
const el = $(getElById(id)); // id from th sort item = 'sort_by_xxx'
let sort_direction, query_sort_direction;
switch(true) {
case !el.hasClass('selected'): // el is not selected
$('#sorting_row_1,#sorting_row_2').find('> div').removeClass('up selected');
el.addClass('selected');
sort_direction = 1;
break;
case el.hasClass('selected'):
switch(true) {
case !el.hasClass('up'): el.addClass('up'); sort_direction = -1; break;
case el.hasClass('up'): el.removeClass('up'); sort_direction = 1; break;
}
}
query_sort_direction = ( sort_direction !== -1 ? 'default' : 'up' );
setQuery('sort_direction',query_sort_direction);
// SORT EM!
let rows = $('#tbody').find('tr'), $sorted_index = sortDirList( rows, id, sort_direction );
$dir_list_body.empty().append($sorted_index);
switch(true) {
case $content_pane.hasClass('has_playlist'): case $content_pane.hasClass('has_filelist'): break;
case $content_pane.hasClass('has_font_grid'): $('#show_font_grid').click(); break;
case $content_pane.hasClass('has_image_grid'): $('#show_image_grid').click(); break;
case $content_pane.attr('data-content') === 'has_grid': $('#grid_btn').click(); break;
}
scrollThis('tbody','selected',false); // true = instant scroll
}
// Sort on clicking dir_list sort item
$('#sorting').on('click','.sorting, #play_toggle',function(e) {
e.preventDefault(); e.stopPropagation();
switch(true) {
case $(this).attr('id') === 'play_toggle': toggleAllChecked(); break; // toggle media checkboxes
case !$(this).hasClass('disabled'): clickSort( $(this).attr('id') ); break; // sort dir_list
}
});
// Sort Menu: click the list header that contains the selected menu text.
$('#sort_menu').on('click','li:not(.disabled)',function(e) {
e.preventDefault(); e.stopPropagation();
$('#sorting div[id="sort_by_'+ $(this).attr('id') +'"]').click(); // click corresponding sidebar sort item
});
// ***** END SORTING ***** //
// ***** END BASIC UI FUNCTIONS ***** //
// ***** CONTENT PANE ***** //
// Focus Sidebar
function focusSidebar() {
document.activeElement.blur();
closeMenus();
sendMessage('iframe','blur_iframe');
$('body').removeClass('faded focus_content').find('#sidebar').focus();
}
// Focus content
function focusContent(id,e) {
$('body').addClass('focus_content');
closeMenus();
switch(true) {
case $content_pane.attr('data-content') === 'has_font': $('#specimen').focus(); break;
case document.activeElement.id.toLowerCase() === 'text_preview' && getFocusableEls('#text_preview').length > 0: getFocusableEls('#text_preview').first().focus(); break;
case $content_pane.attr('data-content') === 'has_text_editor': focusTextEditorPanes(); break; // focus text editor
case ( /has_text|has_markdown|has_code|has_htm|has_dir|has_app/.test($content_pane.attr('data-content') ) ): // no break; focus iframe text editor
case $content_iframe.hasClass('has_content'): // focus iframe and/or iframe text editor
$('#content_iframe').focus(); if ( e !== undefined && e.shiftKey ) { sendMessage('iframe','shift_focus_iframe'); } else { sendMessage('iframe','focus_iframe'); } break;
case ( /has_video|has_pdf/.test($content_pane.attr('data-content') ) ): // no break; video, pdf
case $content_pane.attr('data-content') === undefined: // no break; data-content undefined
case $('body').hasClass('has_playlist'): $('body').removeClass('focus_content'); break; // don't focus content in this and the above two cases
case $content_pane.attr('data-content') === 'has_grid': $('#content_grid').focus(); break; // grids
case $content_pane.attr('data-content') === 'has_image': $('#content_image').focus(); break; // images
case id !== undefined: document.getElementById(id).focus(); break;
}
}
// get focusable elements
function getFocusableEls(id) {
let focusableEls = ( id !== undefined ? $(id).find('a,button,input,select,textarea,div[contenteditable]').filter(':visible') : $('a,button,input,select,textarea,div[contenteditable]').filter(':visible') );
return focusableEls;
}
// focus focusable elements in iframe files or text editor preview
function focusFocusableEls(e,id) {
e.preventDefault();
let els = Array.from(getFocusableEls(id));
switch(true) {
case e.shiftKey: // tab + shift: focus prev
switch(true) {
case els.indexOf(document.activeElement) === 0: sendMessage('top','focus_sidebar'); break;
case !els.includes(document.activeElement): els[els.length - 1].focus(); break; // if nothing focused...focus last el
default: els[els.indexOf(document.activeElement) - 1].focus(); // else focus previous
}
break;
case document.activeElement === els[els.length - 1]: sendMessage('top','focus_sidebar'); break; // if last focussable el, focus sidebar
default: els[els.indexOf(document.activeElement) + 1].focus(); // tab: select next focusable element
}
}
// focus button (for warnings)
function focusButton(id) { let el = document.getElementById(id); el.classList.add('focus'); el.focus(); }
//***** SHOW INDIVIDUAL CONTENT TYPES *****//
// Show Grid
function showGrid(id) {
if ( id !== undefined ) { makeGrids(id); } // initial make grid items; otherwise, just unhide existing grid (see below)
closeContent();
const selected_ID = $('#tbody').find('.selected.image, .selected.font').attr('id');
$('#grid_btn').addClass('has_grid');
$('#content_pane').removeClass('has_hidden_grid').attr('data-content','has_grid').find('div[data-id="'+ selected_ID +'"]').addClass('selected').siblings().removeClass('selected hovered');
focusContent();
}
// Hide Grid
function hideGrid() { if ( $content_pane.attr('data-content') === 'has_grid' ) { $content_pane.removeAttr('data-content').addClass('has_hidden_grid'); } }
// Show Hidden Grid
function showHiddenGrid() { if ( $content_pane.hasClass('has_hidden_grid') ) { showGrid(); } }
// Close Grid (remove grid elements, etc.)
function closeGrid() {
$('#grid_btn').removeClass('has_grid');
if ( $content_pane.attr('data-content') === 'has_grid' ) { $content_pane.removeAttr('data-content'); }
$content_pane.removeClass('has_image_grid has_font_grid').find('#content_grid').attr('style','').empty();
}
// Show Text Editor
function showTextEditor() {
switch(true) {
case $content_pane.attr('data-content') === 'has_text_editor': // hide open text editor
hideTextEditor();
break;
case !$body.hasClass('has_text_editor_UI'): // add the text editor UI if loading text editor for first time
setUpTextEditorUI();
default: // show editor
closeContent();
$content_pane.removeClass('has_hidden_text_editor').attr('data-content','has_text_editor'); // empty title
$('#text_editor_row').addClass('has_text_editor');
focusContent();
}
}
// Hide Text Editor
function hideTextEditor() { if ( $content_pane.attr('data-content') === 'has_text_editor' ) { $content_pane.removeAttr('data-content').addClass('has_hidden_text_editor'); } }
// Show Hidden Text Editor
function showHiddenTextEditor() { if ( $content_pane.hasClass('has_hidden_text_editor') ) { showTextEditor(); } }
// showIndexSource();
// Show Audio
function showAudio(id,iframe_audio_link) {
closeMedia('video');
let row, link, title;
if ( id === 'content_iframe_file' ) { // clicked iframe audio files
link = decodeURIComponentSafe(iframe_audio_link);
title = link.slice(link.lastIndexOf('/') + 1);
$content_pane.addClass('has_audio has_iframe_audio');
} else { // dir_list audio files
row = getElById(id);
row.addClass('playing selected').siblings('.media').removeClass('playing selected');
link = row.find('a').attr('href');
title = row.find('.name').find('.tbody_row_cell_name_a_span').text();
$content_pane.addClass('has_audio').removeClass('has_iframe_audio');
}
$audio_player.attr('src', link );
$('#content_audio_title').find('span').empty().text( title );
$('#content_audio_playlist').removeClass('has_content');
}
// Show Font (and create font items) row
function setContentFontSource(id,bool,sheet,link) { // bool = true if for show font grid, sheet defined at fontGridItems(); link = from previewed directory
let font_styles = $font_styles.sheet;
const font_family = ( link !== undefined ? link.slice(link.lastIndexOf('/') + 1,link.lastIndexOf('.')) : getElById(id).find('.name').attr('data-name') );
const font_url = ( link !== undefined ? link : getElById(id).find('a').attr('href') );
if ( bool === false ) { // just show selected font
if ( font_styles.cssRules.length > 0 ) { font_styles.deleteRule(0); } // delete previous @font-face rule
font_styles.insertRule('@font-face { font-family: "'+ font_family +'"; src: url("'+ font_url +'"); }');
$content_font.css({ 'font-family':'"'+ font_family +'"' }); // set content font style
} else { // else make font grid items
const $font_grid_item_el = $('<div class="font_grid_item border_top_x background_color_EE_22" data-id="'+ id +'"></div>');
let $grid_item = $font_grid_item_el.clone();
const display_name = font_family;
sheet.insertRule('@font-face { font-family: "'+ font_family +'"; src: url("'+ font_url +'"); }');
$grid_item.append('<p class="text_color_111">'+ display_name.toUpperCase() +'</p><h2 style=\'font-family: "'+ font_family +'"\'; ><a class="text_color_111" href="'+ font_url +'">'+ display_name.slice(0,font_family.lastIndexOf('.')) +'</a></h2>' );
return $grid_item;
}
}
// OPen Font File (req: opentype.js font parsing)
$('#open_font_label').on('click',function(e) { e.stopPropagation(); });
// Open font
$('#menu').on('change','#open_font',function(e) { $('body').removeClass('has_menu faded'); openFile(e,'font'); });
// Open Font File
function openFontFile(files,reader) {
closeContent();
hideGrid();
$content_pane.attr('data-content','has_font_file');
$content_font.addClass('has_content');
parseFont(reader.result);
$('#title span').html( files.name );
$('#open_font').val(''); // reset input to allow same font to be reopened immediately after closing.
focusContent();
}
// Parse font (req opentype.js)
function parseFont(fontblob) {
let font = window.opentype.parse(fontblob);
getFontInfo(font);
let $glyphs_container = $('#glyphs_container');
$glyphs_container.empty();
let $glyph_container_el = $('<div class="glyph_container background_color_EE_22 border_right_x border_bottom_x"></div>');
let $glyph_canvas_el = $('<canvas class="glyph invert" width="120" height="120"></canvas>');
let $glyph_info_el = $('<div class="glyph_info text_color_333"></div>');
let $glyph_viewer = $('#glyph_viewer');
$glyph_viewer.data('data-font-name',font.names.fullName.en);
let glyphs = font.glyphs;
$content_font.data('data-glyphs',glyphs); // add glyphs data to $content_font
// Draw glyphs
for ( let i = 0; i < glyphs.length; i++ ) {
let glyph = glyphs.glyphs[i];
// Glyph width
let bounding_box = glyph.getBoundingBox(), glyph_width = bounding_box.x2 - bounding_box.x1, context_X = (60 - glyph_width/24);
// Add glyph info and append elements
let glyph_unicode = ( glyph.unicode !== undefined ? '#'+ glyph.unicode : glyph.unicode );
let $glyph_container = $glyph_container_el.clone(), $glyph_canvas = $glyph_canvas_el.clone(), $glyph_info = $glyph_info_el.clone();
$glyph_info.text(glyph.index +': '+ glyph.name +', '+ glyph_unicode);
$glyph_container.attr('id','glyph_container_'+ glyph.index ).attr('data-id','glyph_container_'+ glyph.index);
$glyph_container.append( $glyph_canvas_el.clone().attr('id','glyph_'+ glyph.index ) ).append($glyph_info);
$glyphs_container.append( $glyph_container );
// Draw glyph
let this_glyph = document.getElementById('glyph_'+ glyph.index);
$(this_glyph).data('contextX',context_X);
let context = this_glyph.getContext('2d');
glyph.draw(context, context_X, 84, 72);
}
}
// Get font info
function getFontInfo(font) {
let font_names = font.names;
let $font_info = $('<table id="font_info" class="background_color_C0_40"><thead><tr><th colspan=2 class="border_top text_color_111">FONT INFO: '+ font.names.fullName.en.toUpperCase() +'</th></tr></thead><tbody id="font_info_body" class="background_color_D0_50 border_top"></tbody></table>');
for ( let name in font_names ) {
let value = font_names[name].en;
if ( name.endsWith('URL') ) {
let href = value;
if ( !value.startsWith('http') ) { href = 'http://'+ value; } // in case url without protocol is used
value = '<a class="text_color_111" href="'+ href +'" target="_blank">'+ value +'</a>';
}
$font_info.find('tbody')
.append('<tr><td class="font_info_name border_right border_bottom text_color_111">'+ name +': </td><td class="font_info_value border_bottom text_color_111">'+ value +'</td></tr>');
}
let num_glyphs = font.numGlyphs; // glyph count
$font_info.find('tbody')
.append('<tr><td class="font_info_name border_bottom border_right text_color_111">numGlyphs: </td><td class="font_info_value border_bottom text_color_111">'+ num_glyphs +'</td></tr>');
$content_font.find('#font_viewer').prepend($font_info);
}
// Show glyph viewer
$content_font.on('click','.glyph',function(e) {
e.stopPropagation();
let id = $(this).attr('id');
$(this).parent('div').addClass('selected').siblings().removeClass('selected');
showFontGlyph(id);
});
function showFontGlyph(id) {
let $glyph_viewer = $('#glyph_viewer');
let glyphX = $('#'+ id).data('contextX');
id = id.slice(id.lastIndexOf('_') + 1); // convert id to number only
let glyphs = $content_font.data('data-glyphs'); // get glyphs
let glyph = glyphs.get(id);
let glyph_name = glyph.name;
let glyph_path = glyph.getPath(glyphX,84,72);
let glyph_SVG = glyph_path.toSVG().replace(/"/g,'\'');
// set the background SVG image:
let SVG_prefix = '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>';
$glyph_viewer.show().css({'background-image': SVG_prefix + glyph_SVG +'</g></svg>")'});
$glyph_viewer.data('data-raw-svg',glyph_SVG).data('data-glyph-name',glyph_name).find('#glyph_viewer_info div').text(id +': '+ glyph_name +', #'+ glyph.unicode ); // for saving SVG
$content_pane.attr('data-content','has_glyph');
}
// Save glyph svg
function saveGlyph() {
let file_name = $('#glyph_viewer').data('data-font-name') +'—'+ $('#glyph_viewer').data('data-glyph-name') +'.svg';
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>';
let data_suffix = '</g></svg>';
let data = data_prefix + $('#glyph_viewer').data('data-raw-svg') + data_suffix;
saveFile(data,'image/svg+xml',file_name);
}
$content_font.on('click','#save_svg',function(e) { e.stopPropagation(); saveGlyph(); });
// END OPEN FONT FILE Operations
// Create new #content_pdf
function setupContentPDF() {
let $embed = '<embed id="content_pdf" class="content" name="plugin" tabindex="0" data-kind="pdf"></embed>';
$('#content_pdf').remove();
$content_image_container.after($embed);
}
// OPEN LINK FILES (webloc, url)
function openLink(ext) {
let link;
let content = ( $protocol === 'file:' ? $('#iframe_body pre').text() : document.getElementsByTagName('iframe')[0].contentWindow.document.children[0].children[1].innerHTML );
switch(true) {
case content === undefined: break;
case ext === 'webloc': case 'inetloc': link = content.split('<string>')[1].split('</string>')[0]; break;
case ext === 'url': link = content.split('URL=')[1].split('\n')[0];
}
let url = ( link.startsWith('file') ? link : newURL(link) );
switch(true) {
case url === undefined: break;
case link.startsWith('file') && window.location.protocol !== 'file:': // local files and links
$body.addClass('has_warning').find('#warnings_container').addClass('warning_local_file'); $('#warning_btn_ok').focus();
break;
case link.startsWith('file') && window.location.protocol === 'file:': // local files and links
case url.origin === window.location.origin: // same origin
sendMessage('top','show_content','',[link,getItemKind(getItemExt(link))]);
break;
default:
window.open(link,'_blank'); // open non-local links in new tab
}
}
// END SHOW INDIVIDUAL CONTENT TYPES
// ***** MAIN SHOW CONTENT FUNCTIONS ***** //
// Set Content Pane classes
function setContentClasses(id, kind, content_el) {
switch(true) { // add loaded or playing classes
case kind === 'audio': case kind === 'video':
getElById(id).addClass('playing').siblings('.media').removeClass('playing');
break;
default: // non-media items
getElById(id).addClass('loaded').siblings().removeClass('loaded');
}
switch(kind) {
case 'audio':
if ( id === 'content_iframe_file' ) { $content_pane.addClass('has_iframe_audio'); } else { $content_pane.addClass('has_audio'); }
break;
case 'app': case 'dir':
if ( id === 'content_iframe_file' ) { $content_pane.attr('data-content','has_dir').addClass('has_iframe_dir'); }
else { $content_pane.attr('data-content','has_dir').addClass('has_dir').removeClass('has_iframe_dir has_iframe_file'); }
break;
default:
if ( id === 'content_iframe_file' ) { $content_pane.removeClass('has_dir').addClass('has_iframe_file').attr('data-content','has_'+ kind);}
else { $content_pane.attr('data-content','has_'+ kind).removeClass('has_dir has_iframe_dir has_iframe_file'); }
}
$('#content_'+ content_el).addClass('has_content');
}
// get query string for various content kinds
function makeSearchParams(params) {
let query_str = new URLSearchParams();
for ( let param of params ) { query_str.append(param,getQuery(param)); }
return query_str;
}
function getLinkQueries(kind) {
let query_str, params;
switch(true) {
case kind === 'view_directory_source':
query_str = '?&view_directory_source=true';
break;
case kind === 'pdf': // pdfs
query_str = '#view=fitB&scrollbar=1&toolbar=1&navpanes=1';
break;
case kind === 'code': case kind === 'markdown': case kind === 'text': // editable text files
params = ['split_view','default_text_view','theme','editor_theme','disable_text_editing'];
query_str = '?'+ makeSearchParams(params).toString();
break;
case kind === 'app': case kind === 'dir': // apps and directories
params = ['sort_by','sort_direction','show_numbers','use_custom_icons','show_invisibles','hide_ignored_items','ignore_ignored_items','alternate_background','theme'];
query_str = '?'+ makeSearchParams(params).toString();
}
return query_str;
}
// CREATE LINKS FOR VARIOUS CONTENT KINDS
function setContentSources(id, kind, link, content_el) {
switch(true) { // make source link for content elements; default is link
case kind === 'font':
setContentFontSource(id,false,'',link);
break;
case kind === 'view_directory_source': // make link for viewing directory source
link = current_location + '?&view_directory_source=true';
break;
}
$('#content_'+ content_el).attr('src',link); // set source for content element
}
// GET CONTENT SRC AND NAME
function getContentLinkAndName(kind,link) {
let prepped_link = decodeURIComponentSafe( link.split('/?')[0] ); // remove protocol and query string, if any
prepped_link = prepped_link.split('://').reverse()[0];
let prepped_name;// = prepped_link.split('/').reverse();
if ( /app|dir/.test(kind) ) { (
!prepped_link.endsWith('/') ? prepped_link += '/' : null ); prepped_name = prepped_link.split('/').reverse()[1] + '/';
} else {
prepped_name = prepped_link.split('/').reverse()[0];
}
return [prepped_link,prepped_name];
}
// SET CONTENT TITLE
function setContentTitle(kind,link) {
let $title = $('#title span'), title_text;
let $selected = $('#tbody tr.selected'), selected_items, selected_link, selected_name, content_items, content_link, content_name, iframe_items, iframe_link, iframe_name;
if ( $selected.length === 1 ) { // selected sidebar item
selected_items = getContentLinkAndName($selected.attr('data-kind'),$selected.find('a').attr('href'));
selected_link = selected_items[0];
selected_name = selected_items[1];
}
let $content_el = $('#content_container .has_content:not(#content_iframe)');
if ( $content_el.length === 1 ) { // content element source
content_items = getContentLinkAndName('',$content_el.attr('src') );
content_link = content_items[0];
content_name = content_items[1];
}
if ( link !== undefined ) { // iframe source
iframe_items = getContentLinkAndName(kind,link);
iframe_link = iframe_items[0];
iframe_name = iframe_items[1];
}
switch(true) {
case iframe_link === undefined && content_link === undefined: title_text = selected_name; break; // title for selected sidebar item
case iframe_link === undefined && selected_link !== content_link: title_text = content_link; break;
case selected_link === iframe_link: title_text = iframe_name; break;
case kind === 'image' && $('body').hasClass('autoload_media') && $('body').hasClass('has_audio') && $('body').hasClass('has_images'): // autoload media images
case selected_link === content_link: title_text = content_name; break;
case selected_link !== iframe_link: title_text = window.location.protocol + '//'+ iframe_link; break; // --> if not file://, need to use full path
}
title_text = title_text.split('/').join('/<wbr>').split('_').join('_<wbr>'); // allow nice breaks in title
if ( kind === 'image' ) { setImageDimensions(); } // set image dimensions
$title.empty().html(decodeURIComponentSafe(title_text)); // set text
}
// Get Image Dimensions
function getImageDimensions(link, callback) {
if ( link !== undefined ) {
let img = new Image();
img.src = link;
img.onload = function() { callback( this.width, this.height ); };
}
}
function setImageDimensions() {
if ( window.top !== window.self ) {
return;
} else if ( $content_pane.attr('data-content') === 'has_image' ) {
let link = $content_image.attr('src');
getImageDimensions( link, function( width, height ) {
$('#title span').attr('data-after',' (' + width + 'px × ' + height + 'px) ('+ ( ($content_image.width()/width)*100 ).toFixed(1) +'%)');
});
} else {
$('#title span').removeAttr('data-after'); // remove image dimensions
}
}
// SHOW IFRAME CONTENT called when iframe loads
function showIframeContent(args) {
let link = args[0]; // full link with querys
let kind = $content_iframe.attr('data-kind');
$content_pane.attr('data-loaded','loaded'); // show iframe, hide loading spinner
switch(true) { // make source link for content elements; default is link
case kind === 'app': case kind === 'dir':
$content_pane.attr('data-content','has_dir');//.addClass('has_iframe_dir').removeClass('has_iframe_file');
break;
default:
$content_pane.attr('data-content','has_'+kind);//.removeClass('has_iframe_dir');//.removeClass('has_iframe_file');
}
setContentTitle(kind,link);
}
// SHOW OTHER CONTENT
function showContent(id, args) { // show any content on row click; last two arguments are only from clicking iframe links; args = [link,kind]
let row, link, kind, name = '', src = $content_iframe.attr('src');
switch(true) { // set vars and content_iframe attributes for iframe content or sidebar content
case id === 'open_sidebar_in_content_pane':
case id === 'content_iframe_dir': // prep for iframe dirs
$('body').addClass('focus_content')
link = args[0]; kind = args[1];
$content_pane.addClass('has_iframe_dir').removeClass('has_iframe_file');
$content_iframe.removeAttr('data-iframe_file_src');
break
case id === 'content_iframe_file': // prep for iframe files
$('body').addClass('focus_content')
link = args[0]; kind = args[1];
if ( kind === 'audio' ) {
$content_pane.addClass('has_iframe_audio');
} else {
$content_pane.addClass('has_iframe_file');
$content_iframe.attr('data-iframe_file_src',$content_iframe.attr('src')); //
}
break;
case id !== '': // show content from sidebar items or iframe items (from above) and get link, kind
row = getElById(id); link = row.find('a').attr('href'); kind = row.attr('data-kind');
break;
}
let content_el = ( ['audio','font','image','pdf','video'].includes(kind) ? kind : 'iframe' );
switch(true) {
case window.top !== window.self:
break; // don't attempt to show content for iframe items when navigating
case row !== undefined && row.hasClass('ignored') && getQuery('ignore_ignored_items') === 'false': // try to open ignored files if they are not to be ignored
window.location = row.find('a').attr('href');
break;
case row !== undefined && row.hasClass('ignored') && getQuery('ignore_ignored_items') === 'true': // don't open ignored files if they are to be ignored
// case row.hasClass('dir') && row.hasClass('invisible') && row.hasClass('ignored'):
closeContent();
setContentTitle();
$content_pane.attr('data-content','has_ignored');
break;
case kind === 'link':
closeContent();
$content_pane.attr('data-loaded','loaded');
$content_iframe.addClass('has_content').attr('src',link).attr('data-kind',kind);
break;
case id === 'text_editor' || id === 'text_editor_row': showTextEditor(); break; // show the text editor
case id === 'grid_btn' || id === 'show_image_grid' || id === 'show_font_grid': showGrid(id); break; // show grid
case kind === 'audio': showAudio(id,link); break; // show audio
case kind === 'video': closeMedia('audio'); // close audio when showing video ???? test if needed?
case ['font','image','pdf','video'].includes(kind):
closeContent(); // Close all open content
setContentSources(id, kind, link, content_el); // Set the src attribute for the content element
setContentClasses(id, kind, content_el); // Add "data=has_<kind>" to content_pane; test id for content_iframe
setContentTitle(kind); // Set the title for non-iframe content
break;
// case ( /code|text|markdown/.test('kind') ): // send stored text selection data to iframe --> NOT IMPLEMENTED YET
// sendMessage('iframe','get_text_selection','',[row.attr('data-selection_start'),row.attr('data-selection_end')]);
// break;
case id === 'view_directory_source':
kind = 'view_directory_source'; link = args[0]; // no break;
case kind === 'dir' && id !== 'content_iframe_dir':
case kind === 'app' && id !== 'content_iframe_dir':
link = link + getLinkQueries(kind); // set link for sidebar directories; no break
case content_el === 'iframe': // set iframe source and hide until iframe loaded
closeContent(); // Close all open content
$content_pane.attr('data-loaded','unloaded'); // hide iframe until loaded, show loading spinner
$content_iframe.addClass('has_content').attr('src',link).attr('data-kind',kind);
break;
}
if ( $('body').hasClass('focus_content') || id === 'content_iframe' ) { sendMessage('iframe','focus_iframe'); }
}
// Show source of current sidebar dir in content pane
function showDirectorySource() {
switch(true) {
case $body.hasClass('has_directory_source'): $('#close_btn').click(); break; // close if open
default: $body.addClass('has_directory_source'); showContent('view_directory_source',[current_location]);
}
}
$('#view_directory_source').on('click',function(e) { e.stopPropagation(); showWarning( 'showDirectorySource' ); }); // toggle show directory source
// Show current sidebar dir in content pane
function openSidebarInContentPane() { showContent('open_sidebar_in_content_pane',[current_location,'dir']); focusContent(); }
$('#open_in_content_pane').on('click',function() { showWarning( 'openSidebarInContentPane' ); });
// Open Previewed Dir in Sidebar (@ receiveMessage() )
function openIframeDirInSidebar(args) {
let query_str = getQueryPrefs();
if (query_str.has('selected') ) { query_str.delete('selected'); }
if (query_str.has('history') ) { query_str.delete('history'); }
window.location = args.slice(0,args.lastIndexOf('/?')+1) +'?'+ query_str.toString();
}
//***** CLOSE CONTENT (Close button or Cmd/Ctrl + W) *****//
// Close Audio/Video
function closeMedia(type) { // type === audio || video
let $media_el = ( type === 'audio' ? $audio_player : $content_video );
$media_el.trigger('pause').removeAttr('src');
switch(true) {
case type === 'audio':
$('tr.audio.playing').removeClass('playing');
$('#content_audio_title span').empty();
$('#content_audio_playlist').removeClass('has_content');
if ( $content_pane.hasClass('has_iframe_audio') ) {
focusContent('content_iframe');
}
$content_pane.removeClass('has_audio has_iframe_audio');
sendMessage('iframe','close_iframe_audio');
break;
case type === 'video' && $('#content_pane').attr('data-content') === 'has_video':
$('tr.video.playing').removeClass('playing');
$('#content_pane').removeAttr('data-content').find('#content_video').removeClass('has_content');
setContentTitle(type);
break;
}
}
$('#close_audio').on('click',function(e) { e.stopPropagation(); closeMedia('audio'); }); // Close Audio button click
// Close Playlist
function closePlaylist() {
$('#tbody').empty().html($('#tbody').data('dir_list')); // restore original dir_list
$body.removeClass('has_playlist has_filelist has_media has_audio has_video has_fonts has_images')
.addClass( $('#tbody').data('data_classes').join(' ') ).find('#sort_by_date,li#date').removeClass('disabled'); // restore orignal body "has" classes
$('head').find('title').text('Index of: '+ current_location); // change window title back to default
$('#parents_dir_nav').find('> div').empty().html(current_dir_path);
$dir_list.find('#stats').html(getIndexStats($dir_list.find('#tbody tr')));
if ( $('#tbody').find('.media').length < 1 ) { $body.removeClass('has_media has_audio has_video'); }
}
// Close index source preview
function closeIndexSource() {
$body.removeClass('has_directory_source');
$('.dir.loaded').click();
}
// Close opened font file
function closeFontFile() {
$body.removeClass('faded focus_content');
$content_pane.removeAttr('data-content').find('#glyphs_container').empty();
$('#font_viewer').remove().end().append(ContentFontViewer());
$('tr.loaded:not(.audio)').click();
}
// Close glyph
function closeGlyph() {
$('#glyph_viewer').hide().attr('style','');
$content_pane.attr('data-content','has_font_file');
$content_font.addClass('has_content');
scrollThis('glyphs_container','selected');
}
// Close all .content elements before opening any new .content from sidebar; leave grid and text editor hidden.
function closeContent() {
switch(true) {
case window.top !== window.self:
break;
default: // remove sources, data-content, styles, and classes from #content_pane
$('#title span').removeAttr('data-after').empty(); // empty content title
hideGrid(); hideTextEditor(); // hide grid and texteditor
$content_pane.removeClass('has_zoom_image has_scaled_image').removeAttr('data-content').removeAttr('data-loaded'); // remove content_pane classes and data
$content_pane.find('.has_content').removeClass('has_content').removeAttr('src').removeAttr('style'); // remove .content classes, data, and attributes
$content_font.find('#font_viewer').remove().end().append(ContentFontViewer());
closeMedia('video');
setupContentPDF();
$('.playlist_entry_container').removeClass('has_content').find('textarea').val('');
}
}
//////// NEW CLOSE BUTTON FUNCTION: replaces OLDcloseContent()
function closeButton() {
switch(true) {
// CLOSE GRIDS & TEXT EDITOR
case $content_pane.attr('data-content') === 'has_grid': // close grid
closeGrid();
if ( $content_pane.hasClass('has_hidden_text_editor') ) { showHiddenTextEditor(); } else { focusSidebar(); }
break;
case $content_pane.attr('data-content') === 'has_text_editor': // hide text editor
hideTextEditor();
if ( $content_pane.hasClass('has_hidden_grid') ) { showHiddenGrid(); } else { focusSidebar(); }
break;
case $body.hasClass('iframe_edited'): // close edited iframe file
sendMessage('iframe','unloading');
break;
// CLOSE FILES AND DIRECTORIES
case $content_pane.hasClass('has_iframe_file') && $content_pane.hasClass('has_iframe_dir'): { // close iframe file and reopen navigated container directory
let kind = ( $content_pane.attr('data-content') !== 'has_dir' ? 'htm' : 'dir' ); // needed to set correct title
showContent('content_iframe_dir',[$content_iframe.attr('data-iframe_file_src'),'dir']);
sendMessage('iframe','focus_iframe');
break;
}
case $content_pane.hasClass('has_iframe_file') && !$content_pane.hasClass('has_iframe_dir'):
// close iframe file opened from previewed sidebar directory (not navigated directory) and reopen selected sidebar directory
$content_pane.removeClass('has_iframe_file').removeAttr('data-content');
// no break;
case $content_pane.hasClass('has_iframe_dir'): // close navigated iframe directory and reopen selected sidebar directory
$content_pane.removeClass('has_iframe_dir');
clickRow($('#tbody tr.selected').attr('id')); // click selected sidebar item
sendMessage('iframe','focus_iframe');
break;
case $content_pane.attr('data-content') === 'has_dir': // close selected sidebar directory
$('tr.selected:not(.audio)').removeClass('selected loaded');
$content_pane.removeAttr('data-content').removeAttr('data-loaded'); //
$content_iframe.removeAttr('src'); // remove iframe src
$('#title span').empty(); // empty content title
focusSidebar();
break;
case $body.hasClass('has_directory_source'): // close directory source
closeIndexSource();
break;
// CLOSE FONTS & GLYPHS
case $content_pane.attr('data-content') === 'has_glyph': // close glyph
showWarning( 'closeGlyph' );
break;
case $content_pane.attr('data-content') === 'has_font_file': // close font file preview
showWarning( 'closeFontFile' );
break;
// CLOSE ALL OTHER CONTENT EXCEPT AUDIO
case $content_pane.attr('data-content') === 'has_ignored': // close ignored content
case $('#content_container .content').hasClass('has_content'): // close all other content
case $('#content_image').hasClass('has_content'): // close all other content
$('tr.selected:not(.audio),tr.loaded:not(.audio)').removeClass('selected loaded');
$content_iframe.removeAttr('data-iframe_file_src').removeAttr('data-kind');
closeContent(); // false = show hidden text editor or grid after closing other content
focusSidebar();
switch(true) {
case $content_pane.hasClass('has_hidden_grid'): showGrid(); break;
case $content_pane.hasClass('has_hidden_text_editor'): showTextEditor(); break;
}
break;
// CLOSE AUDIO & PLAYLISTS
case $content_pane.hasClass('has_audio'): // close audio
closeMedia('audio'); focusSidebar();
break;
case $body.hasClass('has_playlist'): // close playlist
case $body.hasClass('has_filelist'): // close filelist
showWarning( 'closePlaylist' );
break;
}
// show hidden texteditor or grid
}
$('#close_btn').on('click', function(e) { e.stopPropagation(); e.preventDefault(); showWarning('closeButton'); $(this).blur(); });
//***** RESET CONTENT (Reset button or Cmd/Ctrl + R) *****//
function reloadImage() {
$content_pane.removeClass('has_zoom_image has_scaled_image').find('#content_image_container,#content_image').removeAttr('style');
$('#content_image').removeAttr('src');
$('#tbody').find('.image.selected,.image.loaded').find('a').click(); // clicking allows changed content to be reloaded instead of just being reset
}
function resetContent() {
switch(true) {
case $content_pane.hasClass('has_audio'): // pause and reset media
$audio_player.prop('currentTime', 0).trigger('pause');
reloadImage();
break;
case $content_pane.attr('data-content') === 'has_video':
$content_video.prop('currentTime',0).trigger('pause');
break;
}
switch(true) {
case $content_pane.attr('data-content') === 'has_grid':
$('#grid_btn').click();
break;
case $content_pane.attr('data-content') === 'has_glyph':
$('#glyph_viewer').css({'width':'100%','height':'100%','background-size':'100%'}).attr('data-scale',1);
break;
case $content_pane.attr('data-content') === 'has_font':
$content_font.css({'font-size':'1em'});
break;
case $body.hasClass('has_playlist'):
case $content_pane.hasClass('has_audio'):
case $content_pane.hasClass('has_video'):
case $content_pane.attr('data-content') === 'has_text_editor':
break; // don't do anything else for audio, video, text editor, playlist content.
case $content_pane.attr('data-content') === 'has_image':
reloadImage();
break;
case $content_pane.hasClass('has_iframe') || $content_pane.hasClass('has_dir'):
case $content_pane.attr('data-content') === 'has_iframe' || $content_pane.attr('data-content') === 'has_dir':
$('#tbody').find('.selected').find('a').click(); // clicking allows changed content to be reloaded instead of just being reset
break;
case $content_pane.attr('data-content') === 'has_ignored':
case $content_pane.attr('data-content') === undefined:
window.location = window.location.href;
break;
}
}
$('#reload_btn').on('click', function(e) { e.stopPropagation(); e.preventDefault(); showWarning('resetContent'); $(this).blur().removeClass('reset'); });
//**********************//
//***** NAVIGATION *****//
function firstRowID(class_name) { return ( $('#tbody').find('> tr:visible').filter(class_name).length ? $('#tbody').find('> tr:visible').filter(class_name).first().attr('id') : null ); }
function prevRowID(class_name) {
let $selected, row_ID;
if ( /audio|video|media/.test(class_name) ) { $selected = $('#tbody').find('> tr.playing'); } else { $selected = $('#tbody').find('> tr.selected'); }
if ( !$selected.length || !$selected.prevAll('tr:visible:not(.disabled)').filter(class_name).length ) {
row_ID = $('#tbody').find('> tr:visible:not(.disabled)').filter(class_name).last().attr('id'); // select last item if nothing selected or selected is first item
} else {
row_ID = $selected.prevAll('tr:visible:not(.disabled)').filter(class_name).first().attr('id');
}
return row_ID;
}
function nextRowID(class_name) { // if nothing selected, or if no next row with class_name, return first row with class_name, else return next row with class_name
let $selected, row_ID;
if ( /audio|video|media/.test(class_name) ) { $selected = $('tr.playing'); } else { $selected = $('#tbody').find('.selected'); }
if ( !$selected.length || !$selected.nextAll('tr:visible:not(.disabled)').filter(class_name).length ) {
row_ID = $('#tbody').find('> tr:visible:not(.disabled)').filter(class_name).first().attr('id'); // select last item if nothing selected or selected is first item
} else {
row_ID = $selected.nextAll('tr:visible:not(.disabled)').filter(class_name).first().attr('id');
}
return row_ID;
}
// get selected row id
function selectRowID(class_name,key) {
let id = '';
switch(key) {
case 'ArrowUp': id = prevRowID('.dir,.file'); break;
case 'ArrowLeft': id = prevRowID(class_name); break;
case 'ArrowRight': id = nextRowID(class_name); break;
case 'ArrowDown': id = nextRowID('.dir,.file'); break;
}
return id;
}
// NAVIGATION: Menu Arrow Navigation
function menuNavigation(key) {
switch(key) {
case 'ArrowUp':
switch(true) {
case $('#menu').find('.hovered').length > 0: // if submenu visible
if ( !$('#menu').find('ul li.selected').length ) { // if no menu item selected, select last submenu item
$('#menu').find('ul li:last-of-type').addClass('selected');
} else { // else select previous submenu item
$('#menu').find('ul li.selected').removeClass('selected').prev('li').addClass('selected');
}
break;
case !$('#menu').find('.selected').length:
$('#menu').find('> li:last-of-type').addClass('selected');
break; // select last item
default:
$('#menu').find('.selected:not(.hovered)').removeClass('selected').prev('li').addClass('selected');
}
break;
case 'ArrowDown':
switch(true) {
case $('#menu').find('.hovered').length > 0: // if submenu visible
if ( !$('#menu').find('ul li.selected').length ) { // if no menu item selected, select first submenu item
$('#menu').find('ul li:first-of-type').addClass('selected');
} else { // else select next submenu item
$('#menu').find('ul li.selected').removeClass('selected').next('li').addClass('selected');
}
break;
case !$('#menu').find('.selected').length:
$('#menu').find('> li:first-of-type').addClass('selected');
break;
default:
$('#menu').find('.selected:not(.hovered)').removeClass('selected').next('li').addClass('selected');
}
break;
case 'ArrowLeft':
switch(true) {
case !$('#menu').find('.selected').length:
$('#menu').find('> li:last-of-type').addClass('selected');
break;
case $('#menu').find('li.selected').hasClass('hovered'):
$('#menu').find('.hovered').removeClass('hovered'); $('#menu').find('ul li').removeClass('selected');
break;
}
break;
case 'ArrowRight':
switch(true) {
case !$('#menu').find('.selected').length:
$('#menu').find('> li:first-of-type').addClass('selected');
break;
case $('#menu').find('li.selected').hasClass('has_submenu') && !$('.submenu').find('.selected').length:
$('#menu').find('.selected').addClass('hovered').find('ul li:first-of-type').addClass('selected');
break;
}
break;
}
}
// NAVIGATION: select GRID items by left/right arrow keys @ arrowNavigation();
function gridNavigation(elId,key) {
const $container_el = $(elId);
let $selected = $container_el.find('> .selected');
let grid_item_id; // = grid item data-id = corresponding dir_list item id.
let row_length = 0; // $content_grid.hasClass('has_grid') || $('#content_font').hasClass('has_font_grid')
row_length = ( Math.round( $container_el.innerWidth() / $container_el.find('> div').outerWidth()) - 1 );
switch(true) {
case $selected.length === 0: // nothing selected
switch(true) {
case key === 'ArrowRight': case key === 'ArrowDown': $container_el.find('> div').first().addClass('selected'); break;
case key === 'ArrowLeft': case key === 'ArrowUp': $container_el.find('> div').last().addClass('selected'); break;
}
grid_item_id = $container_el.find('.selected').attr('data-id');
break;
case key === 'ArrowDown':
switch(true) {
case $selected.nextAll().eq(row_length).length === 1: grid_item_id = $selected.nextAll().eq(row_length).attr('data-id'); break;
case $container_el.find('> div').length - 1 === row_length: gridNavigation(elId,'ArrowRight'); break; // for single grid row, select next item
default: grid_item_id = $container_el.find('> div').first().attr('data-id'); break;
}
break;
case key === 'ArrowUp':
switch(true) {
case $selected.prevAll().eq(row_length).length === 1: grid_item_id = $selected.prevAll().eq(row_length).attr('data-id'); break;
case $container_el.find('> div').length - 1 === row_length: gridNavigation(elId,'ArrowLeft'); break; // for single grid row, select prev item
default: grid_item_id = $container_el.find('> div').last().attr('data-id'); break;
}
break;
case key === 'ArrowLeft':
switch(true) {
case $selected.prev().length === 1: grid_item_id = $selected.prev().attr('data-id'); break;
default: grid_item_id = $container_el.find('> div').last().attr('data-id'); break;
}
break;
case key === 'ArrowRight':
switch(true) {
case $selected.next().length === 1: grid_item_id = $selected.next().attr('data-id'); break;
default: grid_item_id = $container_el.find('> div').first().attr('data-id'); break;
}
break;
}
selectThis(grid_item_id);
switch(true) {
case $content_pane.attr('data-content') === 'has_glyph': $('.glyph_container.selected .glyph').click(); break; // show the selected glyph
case $content_pane.hasClass('has_hidden_grid'): $('#content_grid > div[data-id="'+ grid_item_id +'"]').click(); break;
}
}
// NAVIGATION: FONTS and IMAGES by prev/next buttons
$content_pane.on( 'click','#prev_btn, #next_btn', function(e) {
e.stopPropagation(); e.preventDefault();
let key = $(this).attr('id') === 'prev_btn' ? 'ArrowLeft' : 'ArrowRight';
if ( $content_pane.attr('data-content') === 'has_font_viewer' ) {
gridNavigation('#glyphs_container',key);
} else {
clickRow( selectRowID('.font,.image',key));
}
if ( $('body').hasClass('focus_content') ) { focusContent(); }
});
// 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
function playPrevNextTrack(key) {
switch(true) {
case $('#audio').attr('src') === 'unknown' && $('tr.selected').hasClass('audio'):
showAudio( $('tr.selected').attr('id') );
break;
case $content_pane.hasClass('has_iframe_audio'): // play track from navigated directory
sendMessage('iframe','play_prev_next_iframe_audio','',key);
break;
case $('.playing').length === 0: // Arrow L/R selects first/last audio file if nothing selected
clickRow( selectRowID('.media:not(.unchecked)',key) ); playMedia('play');
break;
case $('.playing').length === 1: {
let media_class = ( $('.playing').hasClass('audio') ? '.audio:not(.unchecked)' : '.video:not(.unchecked)' );
switch(true) {
case $body.hasClass('shuffle_audio'): { // If shuffle play...
let trackRowID = $audio_player.data('shufflelist').pop(); // remove track from list
if ( trackRowID !== undefined ) { // if shuffle list is not empty...
showAudio( trackRowID ); playMedia('play'); // load media and play
} else if ( trackRowID === undefined ) { // if end of shufflelist...
if ( $body.hasClass('loop_audio') ) { // and if loop audio, update the shufflelist and play
updateShuffleList(); playMedia('play');
} else { // else just load the first track
showAudio( firstRowID( media_class ));
}
}
break;
}
case $(media_class).filter('.selected').length === 1 && !$('.media.selected').hasClass('playing'): // else if there is another media file selected, play it next:
showAudio( $('.media.selected').attr('id') ); playMedia('play');
break;
default:
switch(true) {
case selectRowID( media_class,key ) !== firstRowID( media_class ): // show and play next track if next track !== first track
case $body.hasClass('loop_audio'): // if loop audio, always show and play
showAudio( selectRowID( media_class,key ) );
playMedia('play');
break;
case selectRowID( media_class,key ) === firstRowID( media_class ): // if next track is first track, just show it
showAudio( selectRowID( media_class,key ) );
break;
}
break;
}
}
}
}
// NAVIGATION: Audio by prev/next audio buttons
$('.prev_next_track_btn').on('click',function() { let key = ( $(this).attr('id') === 'prev_track' ? 'ArrowLeft' : 'ArrowRight' ); playPrevNextTrack(key); });
function upDownArrowNavigation(e) {
switch(true) {
case ( /a|button|input|select|textarea/.test(document.activeElement.tagName.toLowerCase() ) && window.top !== window.self ):
case ( /text_preview|html_preview/.test(document.activeElement.id) ):
return; // don't navigate if text editor previews are focussed
default:
document.activeElement.blur();
}
e.preventDefault();
let row_ID = selectRowID('.dir:visible,.file:visible',e.key);
let row = $(document.getElementById(row_ID));
let $selected = $('#tbody').find('.selected');
switch(true) {
case cmdKey(e) && e.key === 'ArrowUp': // Cmd/Ctrl + up arrow
switch(true) {
case window.self !== window.top:
$('#iframe_body #parent').find('a').click(); // go to iframe parent
break;
case window.self === window.top && $('body').hasClass('focus_content'): // fallback for go to iframe parent in case top is incorrectly focused
sendMessage('iframe','open_iframe_parent_dir');
break;
default:
showWarning( 'clickThis', $('#parent_dir_nav').attr('id') ); // go to parent (with warning)
break;
}
break;
case cmdKey(e) && e.key === 'ArrowDown': // Cmd/Ctrl + down arrow
switch(true) {
case window.self === window.top && $selected.hasClass('file') && !$selected.hasClass('link'): // do nothing for #top files
case window.self === window.top && $selected.hasClass('dir') && $selected.hasClass('app') && $settings.apps_as_dirs === false: // do nothing for apps if not viewing as dirs
break;
default: // else double-click directories and all iframe items to open them
$selected.find('a').trigger('dblclick');
break;
}
break;
case $body.hasClass('has_directory_source'): // if viewing directory source, arrows will reopen selected sidebar item
if ( $('#tbody .loaded').length > 0 ) { clickRow( $('#tbody .loaded').attr('id') ); } else { clickRow( row_ID ); }
scrollThis('tbody','selected');
break;
case cmdKey(e) && window.self !== window.top: // iframe && cmdKey
switch(true) {
case $('#iframe_body #dir_list').length === 0:
break;
}
break;
case window.top === window.self && $('body').hasClass('focus_content'):
focusContent();
sendMessage('iframe','iframe_arrow_navigation','',e.key);
$('#iframe_body a').click();
break;
default: // click prev/next item
selectThis(row_ID); // don't use $selected after this
switch(true) { // don't show content for media; only select row
case row.hasClass('audio'):
case row.hasClass('video') && $('.playing').hasClass('video'):
break;
default: showContent(row_ID);
}
if ( $('.selected').length ) { scrollThis('tbody','selected'); }
}
}
// NAVIGATION: Prev/Next Audio or Prev/Next File of same data-kind by arrow left/right
function leftRightArrowNavigation(class_name,e) {
switch(true) {
case ( /a|button|input|select|textarea/.test(document.activeElement.tagName.toLowerCase() ) && window.top !== window.self ):
case ( /text_preview|html_preview/.test(document.activeElement.id) ):
return; // don't navigate if text editor previews are focussed
default:
document.activeElement.blur();
}
if ( cmdAltKey(e) && e.key === 'ArrowLeft' || cmdAltKey(e) && e.key === 'ArrowRight' ) { // don't start audio tracks when changing tabs
return;
} else {
e.preventDefault();
let $selected = $('#tbody').find('.selected');
switch(true) {
case e.altKey && e.shiftKey:
case e.altKey && !e.metaKey && !e.ctrlKey: { // Skip audio 30s/10s: Opt-Shift-Arrow/Opt-Arrow
let args = [e.key];
if ( e.shiftKey ) { args.push(30); } else { args.push(10); }
switch(true) {
case window.top !== window.self: sendMessage('top','mediaSkip','mediaSkip',args); break;
default: mediaSkip(e);
}
break;
}
case $('#content_pane').hasClass('has_audio') && window.top === window.self: playPrevNextTrack(e.key); break; // play prev/next audio track
case $body.hasClass('has_directory_source'): // if viewing directory source
if ( $('#tbody .loaded').length > 0 ) { clickRow( $('#tbody .loaded').attr('id') ); } else { clickRow( selectRowID('.dir,.file',e.key) ); }
scrollThis('tbody','selected');
break;
default:
switch(true) {
case $selected.length === 0: clickRow( selectRowID('.dir,.file',e.key) ); break; // click first/last row
case $selected.hasClass('audio'): clickRow( selectRowID('.audio',e.key) ); break; // click audio
case !$selected.hasClass('audio'): clickRow( selectRowID('.'+ $selected.attr('data-kind'),e.key) ); break;
}
if (class_name === 'video') { playMedia('play'); }
scrollThis('tbody','selected');
}
}
}
// NAVIGATE directory index items by arrow up/down or left/right keys, with/without grid @ indexNavigation()
function arrowNavigation(e) {
switch(true) {
case window.top !== window.self && document.activeElement.getAttribute('id') === 'iframe_body' && $('#iframe_body').find('#dir_list').length === 0: // allow arrows to work normally in iframes (but not iframe dirs)
case ( /img|textarea|embed/.test( document.activeElement.tagName.toLowerCase() ) ): // allow arrows to work normally in images and textareas
case document.activeElement.hasAttribute('contentEditable'): // allow arrows to work normally in contentEditable elements
break;
default:
e.preventDefault(); // otherwise prevent default arrow behavior
$('button').blur(); // Need this to able to select grid items after clicking close button (or other buttons).
case $('body').hasClass('has_menu'): // menu navigation
if ( window.top !== window.self ) { sendMessage('top','menu_navigation','menuNavigation',e.key); } else { menuNavigation(e.key); }
break;
case $content_pane.attr('data-content') === 'has_grid' && $('body').hasClass('focus_content') && !cmdKey(e): // navigate grid
case $content_pane.attr('data-content') === 'has_image' && $content_pane.hasClass('has_hidden_grid') && !cmdKey(e): // navigate hidden grid
case $content_pane.attr('data-content') === 'has_font' && $content_pane.hasClass('has_hidden_grid') && !cmdKey(e): // navigate hidden grid
gridNavigation('#content_grid',e.key);
if ( !$content_pane.hasClass('has_hidden_grid') ) { scrollThis('content_grid','selected'); }
scrollThis('tbody','selected');
break;
case $content_pane.attr('data-content') === 'has_font_file' && !cmdKey(e): // navigate font file glyphs
case $content_pane.attr('data-content') === 'has_glyph' && !cmdKey(e): // navigate font file glyphs
if ( $('body').hasClass('focus_content') ) {
gridNavigation('#glyphs_container',e.key);
scrollThis('content_container','selected');
} else {
showWarning('warning_close_font','warning_btn_cancel'); // show close font warning if sidebar focused
}
break;
case e.key === 'ArrowUp' || e.key === 'ArrowDown': // up/down arrow navigation
upDownArrowNavigation(e);
break;
case e.key === 'ArrowLeft' || e.key === 'ArrowRight': { // left/right arrow navigation
let class_name = ( $('.selected[data-kind]') === undefined ? $('#dir_list').find('tbody tr:visible').first().attr('data-kind') : $('.selected[data-kind]').attr('data-kind') );
leftRightArrowNavigation(class_name,e);
break;
}
}
}
// NAVIGATION: by typed string
var str = '';
function timeoutID() { return window.setTimeout( function() { str = ''; }, 1500 ); }
function alphaNav(e) { // Select Dir_List row by typed string; Todo: select next row by nearest letter
if ( document.activeElement.tagName.toLowerCase() === 'textarea' || document.activeElement.getAttribute('contentEditable') === true ) {
return;
} else {
let timer = timeoutID();
if ( typeof timer === 'number' ) {
window.clearTimeout( timer );
timer = 0; // id
}
timeoutID();
str += e.key;
str = str.toLowerCase();
if ( $('#dir_list').find('td.name[data-name^="'+ str +'"]').length ) {
$('#dir_list').find('td.name[data-name^="'+ str +'"]').first().find('a').click();
scrollThis('tbody','selected');
// } else {
// null; // replace this with some sort of fuzzy match function? TBD
}
}
}
//***** END NAVIGATION *****//
// SELECT ROW on click and set classes for $content_pane
function selectThis(row_ID) {
let row = $(getElById(row_ID));
switch(true) {
case row.hasClass('disabled'):
break;
case $content_pane.attr('data-content') === 'has_grid':
case $content_pane.hasClass('has_hidden_grid'): {// Select corresponding grid item
const $grid_selected = $content_grid.find('> div[data-id="'+ row_ID +'"]');
row.addClass('selected').siblings().removeClass('selected hovered');
$grid_selected.addClass('selected').siblings().removeClass('selected');
break;
}
default:
$body.removeClass('has_directory_source');
row.addClass('loaded').siblings().removeClass('loaded');
row.addClass('selected').siblings().removeClass('selected hovered'); // remove classes from sibling, but leave .audio with playing
row.siblings('.video').removeClass('playing');
}
}
// CLICK element by id
function clickThis(id) { let el = $(document.getElementById(id)); if ( el.find('a').length > 0 ) { el.find('a').click(); } else { el.click(); } }
// CLICK Row to show content
function clickRow(id) {
selectThis(id);
showContent(id);
}
// On click row, play/pause media or clickRow
$('#top #tbody').on('click','tr', function(e) {
e.preventDefault(); e.stopPropagation();
focusSidebar();
if ( $(this).hasClass('playing') ) {
playPauseMedia();
} else {
showWarning( 'clickRow', $(this).attr('id') );
}
});
// DOUBLE-CLICK Row to open directory
function doubleClickRow(args) { // row.dir only
let row = document.getElementById(args[0]);
if ( row.classList.contains('dir') && row.classList.contains('invisible') && row.classList.contains('ignored') ) { return } // don't attempt to open ignored invisible dirs (chiefly system dirs)
let id = args[0].slice(args[0].indexOf('-') + 1), href = args[1];
let query_str = decodeURIComponentSafe(window.location.search);
if ( query_str === '' ) { query_str = '?'; }
if ( query_str.indexOf('history') !== -1 ) {
query_str = query_str.replace(/&selected=\d+/,'').replace(/&history=/,'&history='+ id +'+');
} else {
query_str = query_str.replace(/&selected=\d+/,'') + '&history='+ id;
}
window.location = href + query_str;
}
$('#top').on('dblclick', '#tbody tr.dir,#tbody tr.link', function(e) {
e.preventDefault(); e.stopPropagation();
switch(true) {
case $(this).hasClass('link'):
if ( $protocol === 'file:' ) { sendMessage('iframe','open_link_file','',$(this).attr('data-ext')); } else { openLink($(this).attr('data-ext')); }
break;
default:
showWarning('doubleClickRow', [$(this).attr('id'), $(this).find('a').attr('href')] );
}
});
// click content header or audio to remove faded body class
$('#sidebar_title,#sidebar_buttons,#sidebar,#sorting .sorting').on('click',function(e) { focusSidebar(); });
// CLICK grid item
$content_grid.on('click','div', function(e) {
e.preventDefault();
let id = $(this).attr('data-id');
$(this).addClass('selected').siblings().removeClass('selected');
hideGrid();
getElById(id).click();
});
// HOVER Grid Item and highlight dir_list row
$content_grid.on('mouseenter','> div:not(.selected)',function() {
document.getElementById(this.getAttribute('data-id')).classList.add('hovered');
}).on('mouseleave','> div:not(.selected)',function() {
document.getElementById(this.getAttribute('data-id')).classList.remove('hovered');
});
// HOVER Dir_list_row: highlight corresponding grid item
$dir_list_body.on('mouseenter','> tr', function() {
if ( $content_pane.attr('data-content') === 'has_grid' ) { $content_grid.find('> div[data-id="'+ $(this).attr('id') +'"]').addClass('hovered'); }
}).on('mouseleave','> tr', function() {
if ( $content_pane.attr('data-content') === 'has_grid' ) { $content_grid.find('> div[data-id="'+ $(this).attr('id') +'"]').removeClass('hovered'); }
});
// HOVER Footer Links: Fade dir_list
$('#footer_links').on('mouseenter',function() {
$('body:not(.has_menu), body:not(.has_menu_parents)').addClass('faded');
}).on('mouseleave',function() {
$('body:not(.has_menu), body:not(.has_menu_parents)').removeClass('faded');
});
// HOVER Stats Items: highlight dir_list items
$('#stats').on('mouseenter','#stats_details_container > div, #stats_summary_detailed_dirs, #stats_summary_detailed_files', function() {
let this_class = $(this).attr('class');
switch(true) {
case $(this).attr('id') === 'stats_summary_detailed_dirs': this_class = '.dir'; break;
case $(this).attr('id') === 'stats_summary_detailed_files': this_class = '.file'; break;
case /_/.test(this_class): this_class = '.'+ this_class.replace('_','.'); break;
default: this_class = '.'+ this_class +':not(.invisible):not(.ignored)';
}
$('#tbody').find(this_class).addClass('hovered');
}).on('mouseleave','div',function() {
$('#tbody tr').removeClass('hovered').removeAttr('style');
});
// END CLICK & HOVER EVENTS
//***** AUTOLOAD CONTENT: index files or files from the file shortcut list *****//
function autoLoadFile() {
let selected_ID = ( getQuery('selected').length > 0 ? 'rowid-'+ getQuery('selected') : undefined);
switch(true) {
case $('body').hasClass('has_audio') && getQuery('autoload_media') === 'true': // load audio; must be above next case
clickRow( $('.audio').first().attr('id') ); // load audio
if ( $('body').hasClass('has_images') ) { autoLoadCoverArt(); } else if ( selected_ID !== undefined ) { clickRow( selected_ID ); } // autoload cover art or select dir
break;
case document.getElementById(selected_ID) === null: // in case item with selected id is not found (e.g., item has been deleted, error in updating query_str, etc.)
case window.self !== window.top: // do nothing for iframes
break;
case $('body').hasClass('has_video') && getQuery('autoload_media') === 'true': // load video (if no audio)
clickRow( firstRowID('.video') );
break;
case getQuery('file') !== undefined && getQuery('file').length > 0: // load files (from bookmark or url)
clickRow( $dir_list.find('a[href*="'+ getQuery('file') +'"]').closest('tr').attr('id') );
removeQuery('file');
break;
case getQuery('autoload_index_files') === 'true' && $dir_list.find( 'a[href*="/index."]').length > 0: // else load index file
clickRow($('a[href*="/index."]').closest('tr').attr('id'));
break;
case selected_ID !== undefined:
showContent( selected_ID );
break;
}
if ( $('#tbody').find('.selected').length > 0 ) { scrollThis('tbody','selected'); }
}
// get cover art names
function getImageNames() {
let images = $dir_list_body.find('.image'), image_names = [], image_id, image_name;
for ( let i = 0; i < images.length; i++ ) {
image_id = images.eq(i).attr('id');
image_name = images.eq(i).find('.name').attr('data-name');
image_name = image_name.slice(0,image_name.lastIndexOf('.') ); // remove extension
image_names.push({'id':image_id,'name':image_name}); // add id and name
}
return image_names;
}
// get cover art id
function getCoverArtID() {
const cover_names = ['cover','front','album','jacket','sleeve','cd','disc','insert','liner','notes'];
const image_names = getImageNames();
let id, exact_match, match, cover_name;
for ( cover_name of cover_names ) { // test available image names against cover names
exact_match = image_names.filter( el => el.name === cover_name ); // check for exact match (w/o extension)
match = image_names.filter( el => el.name.indexOf(cover_name) > -1 ); // check for partial match
if ( exact_match.length > 0 ) { return id = exact_match[0].id; }
else if ( match.length > 0 ) { return id = match[0].id; }
}
if (id === undefined ) { return id = image_names[0].id; } // if no matches, return first image id
}
// Autoload Cover Art
function autoLoadCoverArt() { // autoload cover art for audio if dir contains audio and images, and audio is loaded and non-image content is not loaded
let cover_ID = getCoverArtID();
if ( cover_ID !== undefined ) {
let row = getElById(cover_ID);
row.addClass('loaded');
$content_pane.attr('data-content','has_image').find('#content_image').addClass('has_content').attr('src',row.find('a').attr('href'));
setContentTitle('image',decodeURIComponentSafe(row.find('.name a').attr('href')));
}
}
//***** KEYBOARD EVENTS *****//
function metaKey(e) { return ( navigator.platform.match('Mac') ? e.metaKey && !e.ctrlKey : e.ctrlKey); }
function cmdKey(e) { return ( metaKey(e) && !e.altKey && !e.shiftKey ); }
function cmdAltKey(e) { return ( metaKey(e) && e.altKey && !e.shiftKey ); }
// function cmdAltShiftKey(e) { return ( metaKey(e) && e.altKey && e.shiftKey ); }
function cmdShiftKey(e) { return ( metaKey(e) && !e.altKey && e.shiftKey ); }
$('#top, #iframe_body').on('keydown', function(e) {
const $selected = ( $('#content_pane').attr('data-content') === 'has_font_file' ? $('.glyph_container.selected .glyph') : $('#tbody').find('.selected') );
switch(true) { // Disable all keydown events except return and tab when help or warning is shown, or when textarea is focused
case document.activeElement.hasAttribute('contentEditable') && !/Escape|Tab/.test(e.key) && !( cmdKey(e) && e.key === 'w'):
case ( /button|input|select|textarea/.test(document.activeElement.tagName.toLowerCase() ) && !/escape|tab|shiftkey|metakey|altkey/.test(e.key.toLowerCase()) ):
case ($('body').hasClass('has_warning') || $('body').hasClass('has_help') ) && !( cmdKey(e) || metaKey(e) || (/shiftkey|tab|enter|escape/.test(e.key.toLowerCase()) ) ):
return;
}
// MAIN KEYDOWN EVENTS
switch ( e.key ) {
case 'shiftKey':
switch(true) {
case $('body').hasClass('has_warning') || $('body').hasClass('has_help'):
if (e.key !== 'Enter' && e.key !== 'Tab') { e.preventDefault(); return false; }
break;
}
break;
case 'ArrowUp': case 'ArrowDown': case 'ArrowLeft': case 'ArrowRight':
showWarning( 'arrowNavigation',e ); // arrow navigation
break;
case ' ': // space
if ( $('#content_pane').hasClass('has_audio') || $('#content_pane').attr('data-content') === 'has_video' ) { // Play/pause media (space bar)
e.preventDefault(); e.stopPropagation(); playPauseMedia();
} else if ( window.top !== window.self && $('tr.audio.playing').length === 1 ) {
e.preventDefault(); e.stopPropagation(); sendMessage('top','playPauseMedia');
} else {
alphaNav(e);
}
break;
case 'Enter': // Open directories (or ignored)
switch(true) {
case $('body').hasClass('has_warning') || $('body').hasClass('has_help'):
e.preventDefault();
$('button.focus, button:focus').click(); // click focused warning button in #top or #iframe
break;
case window.self !== window.top: // if iframe...
switch(true) {
case $('body').hasClass('has_menu'):
sendMessage('top','clickMenu'); // close main menu
break;
case $('tr.selected').hasClass('dir') && cmdKey(e):
case $('tr.selected').hasClass('file') && cmdKey(e): // open iframe dir or file
case $('tr.selected').hasClass('link') && cmdKey(e): // webloc or url file
$('tr.selected').find('a').trigger('dblclick');
break;
case !$('.audio.selected').hasClass('playing'):
$('.audio.selected').find('a').trigger('dblclick');
break;
case $('.audio.playing').length === 1 && !$('.selected').hasClass('playing'): // play/pause media
e.preventDefault(); e.stopPropagation(); playPauseMedia();
break;
}
break;
case $('body').hasClass('has_menu'):
e.preventDefault(); clickMenu(); sendMessage('iframe','close_menu'); // click selected menu item
break;
case $selected.hasClass('app') && $settings.apps_as_dirs === false: // don't open app folders
break;
default:
switch(true) {
case $selected.hasClass('.disabled'):
case $content_pane.attr('data-content') === 'has_text_editor':
break;
case $selected.hasClass('media') && !$selected.hasClass('playing'): // load selected media file
$('.media.selected a').click();
break;
case $selected.hasClass('media'): // else play/pause playing media
e.preventDefault(); e.stopPropagation(); playPauseMedia();
break;
case $selected.hasClass('link'):
case $selected.hasClass('dir'): // else open dir
case $('tr.selected').hasClass('link') && cmdKey(e): // webloc or url file
$selected.find('a').trigger('dblclick');
break;
default:
$selected.click();
}
}
break;
// Alphabetical navigation
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 'X': case 'Y': case 'Z':
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':
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 '∫': 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 'fl': 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 'λ': 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 'Π': case 'Ρ': case 'Σ': case 'Σ': case 'Τ': case 'Υ': case 'Φ': case 'Χ': case 'Ψ': case 'Ω': case 'Θ': case 'ϒ':
if ( !e.metaKey && !e.ctrlKey && !e.altKey ) { alphaNav(e); }
break;
case 'd': // Cmd/Ctrl + D: Toggle Details
if ( cmdKey(e) && !$body.hasClass('has_warning') ) { e.preventDefault(); $('#show_details').click(); } else { alphaNav(e); }
break;
case 'e': // Cmd/Ctrl + E: Toggle Main Menu or Text Editor
switch(true) {
case $body.hasClass('has_warning'): break;
case cmdShiftKey(e): // toggle text editor
e.preventDefault();
if ( window.self !== window.top ) { sendMessage('top','toggle_text_editor'); } else { $('#text_editor_row').find('a').click(); }
$('body').addClass('faded');
break;
case cmdKey(e): // toggle main menu
e.preventDefault();
if ( window.self !== window.top ) { sendMessage('top','toggle_menu'); } else { $('#menu_container').click(); }
break;
default:
alphaNav(e);
}
break;
case 'g': // Cmd/Ctrl + G: Show image Grid
if ( cmdKey(e) && ( $('#top').hasClass('has_images') || $('#top').hasClass('has_fonts') ) ) { e.preventDefault(); $('#grid_btn').click(); } else { alphaNav(e); }
break;
case 'i': // Cmd/Ctrl + I: Toggle Invisibles
switch(true) {
case cmdKey(e):
e.preventDefault();
if ( window.self !== window.top ) { sendMessage('top','toggle_invisibles'); } else { $('#show_invisibles_container').find('input').click(); }
break;
default: alphaNav(e);
}
break;
case 'o': // Cmd/Ctrl + Shift + O: Open selected item in new window
if ( cmdShiftKey(e) ) { window.open( $('#tbody').find('.selected').find('a').attr('href') ); } else { alphaNav(e); }
break;
case 'r': // Cmd/Ctrl + Shift + R: Refresh
switch(true) {
case cmdKey(e) && window.top !== window.self:
e.preventDefault(); sendMessage('top','reload'); // send reload message to top
break;
case cmdKey(e):
e.preventDefault(); $('#reload_btn').click(); // click reload/reset button
break;
default:
alphaNav(e);
}
break;
case 'w': // Cmd/Crtl + W: if content pane has content, click close button; otherwise default behavior (close tab/window); Firefox does not allow scripts to override this behavior
switch(true) {
case cmdKey(e):
switch(true) {
case window.top !== window.self:
e.preventDefault();
sendMessage('top','close'); // send close message to top
break;
case $content_pane.hasClass('has_audio'):
case $content_pane.attr('data-content') !== undefined:
e.preventDefault();
$('#close_btn').click(); // click close button
break;
default:
return true; // else close window (or normal behavior)
}
break;
default:
alphaNav(e);
}
break;
case '=': // equals sign
switch(true) {
case cmdKey(e) && /has_grid|has_image|has_font|has_glyph|has_font_file/.test($content_pane.attr('data-content')):
e.preventDefault(); $('#increase').click();
break;
case cmdKey: // allow normal Cmd + behavior
return;
default:
alphaNav(e);
break;
}
break;
case '-': // hyphen
switch(true) {
case cmdKey(e) && /has_grid|has_image|has_font|has_glyph|has_font_file/.test($content_pane.attr('data-content')):
e.preventDefault(); $('#decrease').click();
break;
case cmdKey: // allow normal Cmd - behavior
return;
default:
alphaNav(e);
break;
}
break;
case '\\': // \ backslash
switch(true) {
case cmdShiftKey(e): // Cmd Shift + \ : toggle split
switch(true) {
case window.top === window.self && $content_pane.attr('data-content') === 'has_iframe':
sendMessage('iframe','toggle_split'); // send toggle split message to top
break;
case $('#toggle_split').height() > 0:
$('#toggle_split').click(); // click toggle split
break;
}
break;
case cmdKey(e): // Cmd + \ : toggle sidebar
if ( window.top !== window.self ) { sendMessage('top','toggle_sidebar'); } else { $('#toggle_sidebar').click(); }
break;
}
break;
case 'Tab':
e.preventDefault();
switch(true) {
case $('body').hasClass('has_warning'):
tabWarningButtons(e); break; // focus warning buttons
case document.activeElement.id === 'content_image':
focusSidebar(); break; // focus sidebar from image
case $content_pane.attr('data-content') === 'has_text_editor':
focusTextEditorPanes(); break; // focus text editor
case (/has_markdown|has_text|has_code|has_htm/.test($content_pane.attr('data-content')) && window.top === window.self ):
$('body').addClass('focus_content'); sendMessage('iframe','focus_iframe'); break; // focus iframe text editor or htm files from top
case ( /text_preview|html_preview|text_source/.test(document.activeElement.id) ):
toggleTextEditorPanes(); break; // toggle focused text editor panes
case $(document.activeElement).closest('#text_preview').length === 1:
focusFocusableEls(e,'#text_preview'); break; // focus focusable elements in text preview
case $(document.activeElement).closest('#font_specimen').length === 1:
focusFocusableEls(e,'#font_specimen'); break; // focus focusable elements in font specimen
case document.activeElement.hasAttribute('contenteditable'):
case window.top !== window.self: // If iframe is focused, focus sidebar, dim selected iframe dir list item
e.preventDefault();
switch(true) {
case $('#iframe_dir_list_wrapper').length === 1:
case !/a|button|input|select|textarea/.test(document.activeElement.tagName.toLowerCase() ): // allow form elements to be focused
$('#iframe_body,#dir_list tr.selected').addClass('is_blurred'); // dim iframe dir_list
sendMessage('top','tab'); // focus sidebar
break;
case $('a,button,input,select,textarea').length > 0: // allow tabbing to form elements and textareas (e.g., in previewed html pages)
if ( $('body').hasClass('has_text_editor_UI') ) { focusFocusableEls(e,'#text_container'); } else { focusFocusableEls(e); }
break;
}
break;
case window.top === window.self: // Either focus sidebar or refocus content pane (after clicking menu, for example)
switch(true) {
case $('body').hasClass('focus_content') && $('body').hasClass('has_menu'): case !$('body').hasClass('focus_content'): focusContent('',e); break;
case $('body').hasClass('focus_content'): case $('body').hasClass('has_menu'): focusSidebar(); break;
}
break;
}
break;
case 'Escape': // remove text selections, close warnings or help, close menus (and refocus content), or focus sidebar.
window.getSelection().removeAllRanges();
$('#content_playlist, #content_audio_playlist').removeClass('has_content');
$('#warning_btn_cancel,#close_help').click();
if ( window.top !== window.self ) { $('#iframe_body').addClass('is_blurred'); sendMessage('top','escape'); } else { focusSidebar(); }
break;
case '.':
switch(true) {
case cmdKey(e):
if ( $('body').hasClass('has_warning') ) {
e.preventDefault();
$('#warning_btn_cancel,#close_help').click(); // click cancel buttons
}
break;
default:
break;
}
} // end switch
});
// ***** END KEYBOARD EVENTS ***** //
// ***** GRID SETUP ***** //
// Create Font Grid Items
function fontGridItems() {
let $font_grid_items_arr = [], $font_files = $dir_list_body.find('.font'), new_grid_item, font_grid_styles = $font_grid_styles.sheet;
for ( let i = $font_files.length; i--; ) {
new_grid_item = setContentFontSource( $font_files.eq(i).attr('id'), true, font_grid_styles );
$font_grid_items_arr.unshift( new_grid_item );
}
$font_grid_items_arr[$font_grid_items_arr.length - 1].addClass('border_bottom_x'); // add bottom border to last
return $font_grid_items_arr;
}
// Create Image Grid Items
function imageGridItems() {
let $image_grid_items_arr = [], $image_files = $dir_list_body.find('.image:not(.ignored)'), classes = 'image_grid_item border_right_x border_bottom_x';
for ( let i = $image_files.length; i--; ) {
const id = $image_files.eq(i).attr('id');
const this_link = $image_files.eq(i).find('a').attr('href');
const exts = $item_kind.image.filter( ext => $.inArray(ext, $row_settings.ignored) == -1 ); // decide which image files can be displayed
const title_name = this_link.slice(this_link.lastIndexOf('/') + 1);
if ( $.inArray( $image_files.eq(i).attr('data-ext'), exts ) > -1 ) { // if this row file ext is in the image extension array
let item = '<div class="'+ classes +' background_color_EE_22" data-ID="'+ id +'" data-index="'+ i +'"><a href="'+this_link+'"><img src="'+this_link+'" title="'+title_name+'" loading="lazy" /></a></div>';
$image_grid_items_arr.unshift( item );
}
}
return $image_grid_items_arr;
}
// Make Grids
function makeGrids(id) {
closeGrid(); // remove previous grid items
$content_pane.removeClass('has_hidden_grid has_image_grid has_font_grid'); // reset content_pane grid classes
switch(true) {
case id === 'show_font_grid' || !$body.hasClass('has_images'): // only show font grid
$content_pane.addClass('has_font_grid'); $content_grid.append( fontGridItems() );
break;
case id === 'show_image_grid' || !$body.hasClass('has_fonts'): // only show image grid
$content_pane.addClass('has_image_grid'); $content_grid.append( imageGridItems() );
break;
default: // show grid of both images and fonts
$content_grid.append( imageGridItems(), fontGridItems() );
}
}
// Click grid button: make grid and show grid
$('#sidebar_header').on('click', '#grid_btn, #show_font_grid, #show_image_grid', function(e) {
e.stopPropagation(); showContent($(this).attr('id'));
});
// ***** SCALE PREVIEWED IMAGES & FONTS ***** //
// Scale Fonts
function scaleFonts(e, incr, id) {
const font_size = parseInt(getComputedStyle(document.body).fontSize); // pts/em
const getFontSize = function(el) { return parseFloat(el.css('font-size')); };
if ( id === 'decrease' ) { incr = 1/incr; }
if ( $content_pane.attr('data-content') === 'has_grid' ) {
$content_grid.css({'font-size':( getFontSize($content_grid)/font_size * incr ) +'em'});
return;
}
if ( $content_pane.attr('data-content') === 'has_font' ) {
$content_font.css({'font-size':( getFontSize($content_font)/font_size * incr ) +'em'});
return;
}
scrollThis('content_container','content_font');
}
// Scale Glyphs
function scaleGlyphs(e, incr, id) {
if ( id === 'decrease' ) { incr = 1/incr; }
let scale = ( $('#glyph_viewer').attr('data-scale') === undefined ? incr : incr * $('#glyph_viewer').attr('data-scale') );
if ( scale >= 1 ) {
$('#glyph_viewer').css({'width': scale * 100 +'%','height': scale * 100 +'%'});
document.getElementById('content_font').scrollLeft = -( Math.round( $('#font_viewer').outerWidth(true) - $('#glyph_viewer').width() ) / 2 );
document.getElementById('content_font').scrollTop = -( Math.round( $('#font_viewer').outerHeight(true) - $('#glyph_viewer').height() ) / 2 );
}
$('#glyph_viewer').css({'background-size': scale * 100 +'%'}).attr('data-scale',scale.toFixed(2));
}
// Scale Image Grid items
function scaleGridImages(incr,id) {
if ( id === 'decrease' ) { incr = 1/incr; }
const $image_grid_item = $('.image_grid_item img');
let image_grid_item_width = Number.parseFloat( $image_grid_item.width(),10) * incr;
let image_grid_item_height = Number.parseFloat( $image_grid_item.height(),10) * incr;
let image_grid_item_max_width = Number.parseFloat( $image_grid_item.css('maxWidth'),10) * incr;
let image_grid_item_max_height = Number.parseFloat( $image_grid_item.css('maxHeight'),10) * incr;
// prevent reducing grid image size on first scale click:
if ( image_grid_item_width < image_grid_item_max_width ) { image_grid_item_width = image_grid_item_max_width; }
if ( image_grid_item_height < image_grid_item_max_height ) { image_grid_item_height = image_grid_item_max_height; }
// set grid properties
$content_grid.css({'grid-template-columns':'repeat(auto-fill, minmax('+ (image_grid_item_width +16) +'px, auto ) )'});
$content_grid.find('img').css({'max-width':( image_grid_item_width ) +'px', 'max-height':( image_grid_item_height ) +'px'});
return;
}
// Zoom Images on click
function scaleImages(e,incr,id) {
const $content_container = ( $('#iframe_body > img').length === 1 ? $('#iframe_body') : $('#content_container') );
const $this_image = ( $('#iframe_body > img').length === 1 ? $('#iframe_body > img') : $content_image );
const this_link = $this_image.attr('src');
let CC_width = function() { return Math.round($content_container.width()); };
let CC_height = function() { return Math.round($content_container.height()); };
const this_width = Math.round($this_image.width());
const this_height = Math.round($this_image.height());
const iframe_delta = ( $('#iframe_body > img').length === 1 ? Number.parseInt($('#iframe_body').css('padding')) : 0 );
// scale grid images
if ( $content_pane.attr('data-content') === 'has_grid' ) {
scaleGridImages(incr,id);
} else { // scale single images
getImageDimensions( this_link, function( width, height ) {
if ( incr !== undefined && id !== undefined ) { // scale images by increment
$content_pane.addClass('has_scaled_image').removeClass('has_zoom_image'); // remove zoom classes in case window resized after zoom
if ( id === 'increase' ) {// && this_width < width && this_height < height) {
$this_image.css({'width':this_width * incr, 'height': this_height * incr});
$this_image.css({'width':this_width * incr, 'height': 'auto', 'max-width':'none', 'max-height':'none' });
}
if ( id === 'decrease' && ( this_width >= 1 && this_height >= 1 ) ) {
$this_image.css({'width':this_width / incr, 'height': 'auto', 'max-width':'none', 'max-height':'none' });
}
// keep images centered when scaling
if ( Math.round($this_image.width()) >= CC_width() ) {
$content_image_container.scrollLeft( ( Math.round( ( $this_image.outerWidth(true) ) - CC_width() ) )/2 ) ;
}
if ( Math.round($this_image.height()) <= CC_height() ) {
$content_image_container.scrollTop( ( CC_height() - Math.round( $this_image.height() ) )/2 );
} else {
$content_image_container.scrollTop( ( Math.round($this_image.outerHeight(true)) - CC_height())/2 ) ;
}
} else { // else zoom single image on click
$this_image.removeAttr('style');
if ( width <= CC_width() && height <= CC_height() ) { // but don't zoom small images:
$content_pane.removeClass('has_zoom_image has_scaled_image');
return;
} // otherwise, zoom image:
const $CC_offset = $content_container.offset();
const $img_offset = $this_image.offset();
// x,y coordinates of zoom click as percentage of image width/height
const percentX = (e.pageX - $img_offset.left)/this_width;
const percentY = (e.pageY - $img_offset.top)/this_height;
// calculate scroll by pixel coordinates of full-size image - click coordinates and content_container offsets
const scrollX = (width * percentX) - e.pageX + $CC_offset.left - (iframe_delta * width / this_width);
const scrollY = (height * percentY) - e.pageY + $CC_offset.top - (iframe_delta * height / this_height);
$content_pane.removeClass('has_scaled_image').toggleClass('has_zoom_image' );
$content_image_container.scrollLeft( scrollX );
$content_image_container.scrollTop( scrollY );
}
});
setImageDimensions();
}
}
// Zoom single image on click
$content_image_container.on('click','img', function(e) { scaleImages(e); focusContent('content_image_container'); });
// Scale Fonts and Images
function scalePreviewItems(e,id) { // combine scaling into one function
if ( $content_pane.attr('data-content') === 'has_glyph' ) { scaleGlyphs(e, 1.125, id); return; }
scaleImages(e, 1.125, id );
scaleFonts(e, 1.125, id );
}
// Scale Buttons
$('#scale').on('click','span', function(e) {
e.preventDefault(); e.stopPropagation();
scalePreviewItems(e, $(this).attr('id') );
$('#reload_btn').addClass('reset');
if ( $('body').hasClass('focus_content') ) { focusContent(); }
});
// ***** END SCALE PREVIEW ITEMS ***** //
// ***** AUDIO CONTENT ***** //
// Update Playlist
function updatePlaylist() {
let playlist = [];
$dir_list_body.find('.audio').not('.unchecked').not('.disabled').each(function() { playlist.push( $(this).attr('id') ); });
return playlist;
}
// Randomize Shuffle List
function shuffleArray(array) {
for ( let i = array.length - 1; i > 0; i-- ) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Attach Shuffle List data to $audio_player
function updateShuffleList(id) {
let shuffle_list;
switch(true) {
case !$body.hasClass('shuffle_audio'):
break;
case id !== undefined: // don't include .playing and .unchecked track in shufflelist
shuffle_list = $audio_player.data('shufflelist');
switch(true) {
case $(document.getElementById(id)).hasClass('unchecked') || $(document.getElementById(id)).hasClass('playing'):
shuffle_list.splice(shuffle_list.indexOf(id), 1); $audio_player.data('shufflelist',shuffle_list); break;
default:
shuffle_list.push(id); shuffle_list = shuffleArray( shuffle_list );
}
break;
default:
shuffle_list = shuffleArray( updatePlaylist() );
$audio_player.data('shufflelist',shuffle_list);
}
}
// Check/Uncheck single Audio/Video Files and update shufflelist
function toggleChecked(el) { $(el).blur(); $(el).closest('tr').toggleClass('unchecked'); updateShuffleList($(el).closest('tr').attr('id')); }
$('#tbody').on('click','.media input', function(e) { e.stopPropagation(); toggleChecked($(this)); });
// Check/Uncheck all Audio/Video Files and update shufflelist
function toggleAllChecked() { $dir_list_body.find('> tr').find('input').trigger('click'); updateShuffleList(); }
// Is Playing; returns true if all conditions are true
function isPlaying(el) { return (el !== undefined && el.get(0).currentTime > 0 && !el.get(0).paused && !el.get(0).ended); }
// Play Media
function playMedia(task) {
if ( $content_pane.hasClass('has_audio') ) { $audio_player.trigger(task); } else { $content_video.trigger(task); }
}
// Skip media tracks +/-10/30 seconds
function mediaSkip(e,args) {
let factor, skip;
switch(true) {
case e !== undefined: // from top
factor = ( e.key === 'ArrowLeft' ? -1 : 1 ); // forward or backward?
skip = ( e.altKey && e.shiftKey ? 30 : e.altKey ? 10 : null ); // 30s or 10s?
break;
case args !== undefined: // from iframe
factor = ( args[0] === 'ArrowLeft' ? -1 : 1 ); // forward or backward?
skip = args[1]; // 30s or 10s?
break;
}
const $player = ( $('#content_pane').hasClass('has_audio') ? $audio_player : $content_video ); // audio or video?
const time = $player.prop('currentTime'); // current time
$player.prop('currentTime', time + factor*(skip)); // set time
}
// Play/Pause Audio/Video
function playPauseMedia() {
let $player = $('#audio');
if ( $content_pane.attr('data-content') === 'has_video' ) { $player = $('#content_video'); }
if ( isPlaying( $player ) ) { $player.trigger('pause'); } else { $player.trigger('play'); }
}
// Toggle Audio Playback Options (shuffle, loop)
function audioPlaybackOptions(id) {
if ( id === 'shuffle' ) {
$body.toggleClass('shuffle_audio');
updateShuffleList();
if ( $body.hasClass('shuffle_audio') && $('.playing').length === 0 ) { playPrevNextTrack('ArrowRight'); } else { /* do nothing: i.e., allow current track to continue playing */ }
} else {
$body.toggleClass('loop_audio');
document.getElementById('audio').toggleAttribute('loop');
}
}
// click loop or shuffle audio options
$('#audio_options').on('click','input', function() { audioPlaybackOptions( $(this).attr('id') ); });
// Initialize Media: play next track on ended and scroll to playing item
function initMedia() { $('#audio, #content_video').on('ended', function() {
$('#next_track').click();
scrollThis('tbody','playing'); });
}
// ***** END AUDIO PLAYBACK ***** //
// ***** IFRAME SETUP ***** //
function setUpIframeUI() { // set up iframe directory UI or iframe text editor
let link = decodeURIComponentSafe(window.location.href);
$('body').attr('id','iframe_body'); // add iframe body id
$('video').css({'width':'100%'});
const text_files = $item_kind.markdown.concat($item_kind.text, $item_kind.code); // define which files are editable
switch(true) {
case window.location.pathname.endsWith('/'): // set up iframe directory
setUpIframeDirUI(link);
break;
case text_files.includes( window.location.pathname.slice( window.location.pathname.lastIndexOf('.') + 1 ) ): // else set up iframe text editor
setUpTextEditorUI();
break;
default: break; // all other iframe content (e.g., html files)
}
sendMessage('top','iframe_loaded','',[link,'',window.location.pathname,window.location.protocol +'//']);
}
// IFRAME DIRECTORY Prep
function setUpIframeDirUI(link) { // set up iframe dir_list UI
let parent_link = link.split('/').slice(0,-2).join('/') +'/';//+ window.location.search;
let query_str = new URLSearchParams(window.location.search.toString().slice(1));
// let sort_direction = ( getQuery('sort_direction') === 'up' ? -1 : 1 ); // get sort direction
let $iframe_body = $('#iframe_body'), $iframe_head = $('head');
let body_classes = []; // make array of classes to add all at once
switch(true) {
case query_str.get('view_directory_source') === 'true':
case query_str.get('is_error') === 'true':
break; // show raw directory index if error or viewing directory source
default: // else set up iframe directory
for ( let key of query_str.keys() ) {
switch(true) {
case query_str.get(key) === 'true': // add body classes for boolean params
body_classes.push(key);
break;
case query_str.get(key) !== 'false': // = non-boolean params (theme, sort, sort_direction)
body_classes.push(key+'_'+getQuery(key));
break;
}
}
if ( getBrowser() === 'is_gecko' ) { body_classes.push('is_gecko'); } // add body class for firefos
// $iframe_body.data('sort_direction',sort_direction); // initial directory sort
$iframe_head.find('style').remove(); // remove any existing directory index styles
$iframe_head.append('<style id="iframe_dir_styles">'+ $iframe_dir_styles +'</style><style id="color_and_background_styles">'+ $color_and_background_styles +'</style>');
let iframe_table = ContentIframeDirEls(parent_link); // get iframe directory UI elements
const prepped_index = makeNewIndex($iframe_body, query_str.get('sort_by')); // prepare directory index
$iframe_body.removeAttr('style').addClass( body_classes.join(' ') ).empty().append(iframe_table).find('#tbody').append(prepped_index); // append UI and prepped index
}
}
// IFRAME Directory sorting
function iframeSorting(el) {
const $iframe_dir_list_rows = $('#iframe_body').find('#tbody').find('tr');
const id = el.attr('id'); // = new sort class
let current_sort = document.getElementById('iframe_body').classList.value.match(/sort_by_\w+/)[0];
if ( $('#iframe_body').data('sorting') !== id ) { // if clicking sorting item for the first time
$('#iframe_body').data('sorting',id).data('sort_direction', 1 );
el.removeClass('up');
} else { // clicking the same sorting item again -- reverse sort order
$('#iframe_body').toggleClass('sort_direction_default sort_direction_up').data('sort_direction', $('#iframe_body').data('sort_direction') * -1 );
el.toggleClass('up');
}
const sort_direction = $('#iframe_body').data('sort_direction');
const $sorted_index = sortDirList( $iframe_dir_list_rows, id, sort_direction );
$('#iframe_body').removeClass(current_sort).addClass(id).find('#tbody').empty().append($sorted_index);
}
$('#iframe_body').on('click','.sorting', function(e) { e.preventDefault(); iframeSorting($(this)); });
// IFRAME Click
$('#iframe_body, #iframe_body #toolbar, #iframe_body #toolbar li, #iframe_body #tbody').on('click', function() {
$('body').removeClass('is_blurred'); sendMessage('top','iframe_click'); // tell top to close menus, focus content
});
// IFRAME Select iframe row on click or play/pause iframe audio
function iframeSelectRow(row) {
$('body').removeClass('is_blurred');
row.addClass('selected').removeClass('is_blurred').siblings('tr').removeClass('is_blurred selected'); // set selected classes
if ( row.hasClass('audio') && row.hasClass('playing') ) {
sendMessage('top','iframe_play_pause_media'); // play/pause media
}
}
$('#iframe_body').on('click','#tbody tr', function(e) { e.preventDefault(); iframeSelectRow($(this)); });
// IFRAME Click links from html files (should really combine with iframeDoubleClickRow())
function iframeClickLink(e,link,id) {
let url, kind = getItemKind(getItemExt(link));
if ( !link.startsWith('#') ) { e.preventDefault(); url = newURL(link); }
switch(true) {
case id === 'tbody':
case url === undefined:
case link.startsWith('#'): // default link fragment behavior
break;
case id === 'parent': // open parent directory in iframe
sendMessage('top','show_iframe_dir','',[link + window.location.search,'dir']); // adds data:iframe_link to $content_iframe
break;
case url.protocol === 'file:' && window.location.protocol !== 'file:': // show warning when attempting to open local links from non-local pages
alert("Can't open local links from non-local pages.");
break;
case url.protocol !== 'file:' && window.location.protocol === 'file:': // open remote link from local file in new tab/window
window.open(link,'_blank');
break;
case url.protocol === 'file:' && window.location.protocol === 'file:': // open local links on local files in iframe
case url.protocol === 'about:': // document #link fragments
case RegExp(url.hostname).test(window.location.hostname): // same origin links (might not include TLD) (just covering bases here)
case RegExp(window.location.hostname).test(url.hostname): // same origin links (might not include TLD) (just covering bases here)
if ( /dir|app/.test(kind) ) { sendMessage('top','show_iframe_dir','',[link + getLinkQueries('dir'),kind] ); } else { sendMessage('top','show_iframe_file','',[link,kind] ); }
break;
default:
window.open(link,'_blank'); // else open external document links in new tab
break;
}
}
$('#iframe_body').on('click','a', function(e) { iframeClickLink(e,$(this).attr('href'),$(this).closest('span,tbody').attr('id')); });
// IFRAME Doubleclick iframe dir_list items (files and dirs)
function iframeDoubleClickRow(row) {
let kind = row.closest('tr').attr('data-kind'); // get item kind
if ( kind === 'audio' ) { row.closest('tr').addClass('playing selected').siblings('.audio').removeClass('playing selected'); }
let link = row.attr('href'); // get item link
switch(true) {
case ( /dir|app/.test(kind) ): // clicked item is a dir
sendMessage('top','show_iframe_dir','',[link + window.location.search,kind]); break;// tell top what to open; ignore ignored files when dblclicked
default: // clicked is a file
sendMessage('top','show_iframe_file','',[link,kind]); // tell top what to open; ignore ignored files when dblclicked
}
}
$('#iframe_body').on('dblclick','#tbody tr:not(.ignored) a', function(e) { e.preventDefault(); e.stopPropagation(); iframeDoubleClickRow($(this)); });
// Open IFRAME directory in sidebar
function openDirInSidebar() { let link = decodeURIComponentSafe($('#open_in_sidebar').find('a').attr('href')); sendMessage('top','open_iframe_dir_in_sidebar','',link); }
$('#open_in_sidebar').on('click',function(e) { e.preventDefault(); openDirInSidebar(); });
//***** TEXT EDITING PANE *****//
function setUpTextEditorUI() {
let source_text, body_classes = [];
if ( !$('body').hasClass('has_text_editor_UI') ) { // add classes, styles, and scripts; only add once
$('head').append('<style id="text_editor_styles">'+ $text_editor_styles +'</style>');
$('head').append('<link id="github_markdown_css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css"></link>');
$('#title span').empty().text('Text Editor');
}
switch(true) { // get source text and append UI elements
case window.self === window.top: // top level text editor
if ( !$('body').hasClass('has_text_editor_UI') ) {
$('body').addClass('has_text_editor_UI');
$('#content_text').append( TextEditingUIEls() );
if ( getQuery('sync_scroll') === 'true' ) { $('#sync_scroll input').prop({checked:true}); }
focusTextEditorPanes();
}
$('#content_pane').on('click','#content_text',function(){ $('body').addClass('focus_content'); });
break;
case window.self !== window.top: // iframe text editing UI
$('head').prepend('<meta charset="utf-8" /><meta http-equiv="Content-Type" content="text/plain; charset="utf-8">');
source_text = decodeURIComponentSafe($('body').find('> pre').text()); // get source text and decode Unicode chars.
body_classes.push('has_text_editor_UI');
if ( getQuery('disable_text_editing') === 'true' ) {
$body.removeClass('split_view source_text');
body_classes.push('text_editing_disabled preview_text');
} else {
if ( getQuery('split_view') === 'true' ) { body_classes.push('split_view'); }
if ( getQuery('default_text_view') === 'preview_text' ) { body_classes.push('preview_text'); } else { body_classes.push('source_text'); }
}
if ( getQuery('editor_theme') !== '') { body_classes.push('editor_theme_'+ getQuery('editor_theme')); } else { body_classes.push('editor_theme_'+ getQuery('theme')); }
// add text editor ui and warnings
$('head').append('<style id="warning_styles">'+ $warning_styles +'</style>');
$('body').addClass( body_classes.join(' ') )
.empty().append('<div id="content_text" class="background_color_DD_33">'+ TextEditingUIEls() +' </div><div id="warnings_container" class="">'+ Warnings() +'</div>');
$('#text_source').val(source_text); // set the source text value
if ( getQuery('sync_scroll') === 'true' ) { $('#sync_scroll input').prop({checked:true}); }
break;
}
TextEditing(); // call text editing functions
}
// setup and show top level text editor
$('#text_editor, #text_editor_row').on('click', function(e) { e.preventDefault(); showContent( $(this).attr('id') ); });
// Main Text Editing Function
function TextEditing() {
let $toolbar = $('#toolbar'), $source = $('#text_source'), $preview = $('#text_preview'), $html = $('#html_preview'), $MDhandle = $('#text_editing_handle');
// Toolbar button functions
$toolbar.on('mousedown', function(e) { e.preventDefault(); }); // prevent textarea from losing focus when clicking sidebar
$toolbar.on('click','li,span', function(e) { e.stopPropagation(); MDtoolBarFunctions($(this).attr('id')); });
// Resize
$MDhandle.on('mousedown', function(e) { e.stopPropagation(); MDresizeSplit($MDhandle,$source); });
$(window).on('resize', function() { $source.add($preview).add($MDhandle).attr('style',''); }); // reset split to 50/50 on window resize;
// Click labels to toggle checkboxes
$preview.add($toolbar).on('click','label', function(e) { e.stopPropagation(); $(this).siblings('input').click(); });
// Sync scroll
$source.on('scroll', function() { MDsyncScroll(this); });
$preview.on('scroll', function() { MDsyncScroll(this); });
$html.on('scroll', function() { MDsyncScroll(this); });
// Generate Markdown Preview
let source_text = ( $source.length === 0 ? '' : $source.val() );
MDmarkdown( source_text, $preview );
// Live preview update, and set edited classes for unsaved warning
$source.on('input', function() { // only add class or send message once after editing
if ( !$('body').hasClass('edited') ) {
$('body').addClass('edited'); // add edited class
if ( window.top !== window.self ) { sendMessage('top','iframe_edited','',''); } // send edited message to top
}
MDlivePreview($source,$preview);
});
// Checklists
MDsetChecklistClass();
$preview.on('click','.checklist input', function(e) { e.stopPropagation(); MDliveCheckBoxes($(this),$source,$preview); }); // Live checkboxes
$preview.on('click','.table-of-contents a', function(e) { e.preventDefault(); MDtocClick($(this),$preview); }); // Preview TOC click navigation
$preview.on('click','.uplink', function(e) { e.stopPropagation(); MDheaderClick($preview); }); // Click header uplinks
}
///// END MAIN MD FUNCTION
// MARKDOWN Functions
// Focus Text
function focusTextEditorPanes() {
switch(true) {
case $('body').hasClass('split_view'): case $('body').hasClass('source_text'): $('#text_source').focus(); break;
case $('body').hasClass('preview_html'): $('#html_preview').focus(); break;
case $('body').hasClass('preview_text'): $('#text_preview').focus(); break;
}
}
// toggle text editor panes (on tab)
function toggleTextEditorPanes() {
switch(true) {
case document.activeElement.id === 'text_preview' && getFocusableEls('#text_preview').length > 0: // focus focusable elements in text preview
getFocusableEls('#text_preview').first().focus(); break;
case ( /text_preview|html_preview|text_source]/.test(document.activeElement.id) && !$('body').hasClass('split_view') ): // text editor: if not split view, focus sidebar
sendMessage('top','focus_sidebar'); break;
case $('body').hasClass('split_view'):
switch(true) {
case document.activeElement.id === 'text_source': // text editor: if text source has focus with split, focus the other pane
if ( $('body').hasClass('preview_html') ) { $('#html_preview').focus(); } else { $('#text_preview').focus(); } break;
case ( /text_preview|html_preview/.test(document.activeElement.id) ): // text editor: if text preview has focus with split, focus text source
$('#text_source').focus(); break;
}
break;
}
}
// Restore text selection on focus
$('#content_text').on('focus','#text_source',function() {
let selection_start, selection_end;
switch(true) {
case window.self === window.top:
selection_start = $('#text_source').attr('data-selection_start');
selection_end = $('#text_source').attr('data-selection_end');
break;
case window.self !== window.top:
selection_start = $('#text_source').attr('data-selection_start');
selection_end = $('#text_source').attr('data-selection_end');
}
if ( selection_start !== undefined && selection_end !== undefined ) {
document.getElementById('text_source').setSelectionRange(selection_start, selection_end); //, selectionDirection
}
});
// Save text range or cursor location
$('#content_text').on('blur','#text_source',function() {
let selection_start = $(this).prop('selection_start');
let selection_end = $(this).prop('selection_end');
if ( window.self === window.top ) {
$(this).attr('data-selection_start',selection_start).attr('data-selection_end',selection_end);
} else {
sendMessage('top','save_text_selection','',[selection_start,selection_end]);
}
});
// Select Textarea Content
function selectTextareaContent(id) {
let $textarea = document.getElementById(id);
$textarea.focus();
$textarea.select();
$textarea.scrollTop = 0;
}
function MDtoolBarFunctions(id) { // MD UI Buttons functions
switch (id) {
case 'toggle_theme': $('body').toggleClass('editor_theme_dark editor_theme_light'); $('#text_source').focus(); break;
case 'toggle_split':
$('body').toggleClass('split_view').find('#text_source,#text_preview,#html_preview,#text_editing_handle').attr('style','');
focusTextEditorPanes();
break;
case 'show_source':
$('body').toggleClass('split_view').removeClass('preview_text').addClass('source_text');
focusTextEditorPanes();
break;
case 'show_preview':
$('body').toggleClass('split_view').removeClass('source_text').addClass('preview_text');
focusTextEditorPanes();
break;
case 'show_html': // toggle html and preview
$('body').removeClass('source_text');
if ( $('body').hasClass('preview_html') ) {
$('body').removeClass('preview_html');
if ( document.getElementById('text_source') !== document.activeElement ) { $('#text_preview').focus(); }
} else {
let source_HTML = $('#text_preview').html().toString();
$('#html_preview').empty().text(source_HTML);
$('body').addClass('preview_html');
if ( document.getElementById('text_source') !== document.activeElement ) { $('#html_preview').focus(); }
}
break;
case 'clear_text':
if ( $('#text_source').val().length > 0 ) {
$('body').addClass('has_warning').find('#warnings_container').removeClass().addClass('clear');
focusButton('warning_btn_cancel');
} else {
focusTextEditorPanes();
}
break;
case 'save_text_link':
case 'save_HTML_link':
saveBtn(id);
break;
}
}
function saveBtn(id) {
let data, ext, file_name;
if ( $('#content_pane').attr('data-content') === 'has_text_editor' ) {
file_name = 'untitled';
} else {
file_name = decodeURIComponentSafe(window.location.pathname.split('/').reverse()[0]);
file_name = file_name.slice(0,file_name.lastIndexOf('.'));
}
if ( id === 'save_text_link' ) {
data = $('#text_source').val(); ext = '.md';
} else {
data = MDprepHTML$('#text_preview').val(); ext = '.html';
}
saveMD( data, file_name + ext );
}
// MD SAVE SOURCE or HTML
function MDprepHTML(data) {
const save_HTML_open = `<!DOCTYPE html><html><head><meta charset="utf-8" /><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">`;
const save_HTML_close = '</body></html>';
data = data.replace(/<span\sclass="uplink">.<\/span>/g,'');
return save_HTML_open + data + save_HTML_close;
}
function saveMD(data,file_name) { // #top must save text, otherwise a new window is opened that contains the blob content
if ( window.top !== window.self ) { sendMessage('top','save_text','',[data,file_name]); } else { saveFile(data,'text/plain',file_name); }
$('body,#text_source,#content_text').removeClass('edited');
}
// MD Custom pre- and post-processing for text.
function MDaddHeaderIDs(match, p1, p2, p3) { return '<h'+ p1 +' id="'+ p3.toLowerCase().replace(/\s/g,'-') +'" ' + p2 +'>'+ p3; } // create header ids for TOC
function MDcustomPreProcess(src) { return src; } // we're not doing anything here just yet...
function MDcustomPostProcess(html) {
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
.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
// .replace(/<li><p class="checklist">"/g,'<li class="checklist"><p>')
.replace(/^<h(\d)([^>]*)>([^<]+)/gm, MDaddHeaderIDs) // add header IDs;
.replace(/<\/h(\d)>/g,'<span class="uplink">↑</span></h$1>');
return html;
}
//MD Render markdown from preprocessed source text
function MDmarkdown(source_text,$preview_el) {
const MDit = window.markdownit({linkify:false, typography:false, html:true})
.use(window.markdownitMultimdTable, {enableMultilineRows: true})
.use(window.markdownitSub)
.use(window.markdownitSup)
.use(window.markdownitFootnote)
.use(window.markdownitCentertext)
.use(window.markdownitDeflist)
.use(window.markdownitTocDoneRight)
;
let MDpreview = MDit.render( MDcustomPreProcess( source_text ) );
$preview_el.html( MDcustomPostProcess( MDpreview ) ); // set previewed html
}
// MD Live preview, add edited warning
function MDlivePreview($source_el,$preview_el) {
MDmarkdown( $source_el.val(),$preview_el );
MDsetChecklistClass();
let source_HTML = $preview_el.html().toString();
$('#html_preview').empty().text(source_HTML);
}
// MD Live Checkboxes prep: find each instance of [ ] or [x] and replace text in index = to clicked checkbox in Preview.
function MDreplaceAt(str, replacement, position) { str = str.substring(0, position) + replacement + str.substring(position + replacement.length); return str; }
function MDreplaceNthSubStr(str,substr,replacement,index) {
let count = 0;
let found = substr.exec(str);
while ( found !== null ) {
if ( count === index ) { return MDreplaceAt(str, replacement, found.index ); } else { count++; found = substr.exec(str); }
}
}
// MD Live Checkboxes
function MDliveCheckBoxes(checkbox,$source_el,$preview_el) {
$('.checklist').removeClass('clicked');
checkbox.closest('p,li,dt,dd').addClass('clicked');
const this_index = $preview_el.find('.checklist').index( $('.clicked') );
const src_text = $source_el.val();
const substr = new RegExp(/\[\s*.\s*\]/g);
const replacement = ( checkbox.is(':checked') ? '[x]' : '[ ]' );
$source_el.val( MDreplaceNthSubStr(src_text, substr, replacement, this_index) );
}
// MD Checkbox list class: Prevent checkbox lists from having list bullets
function MDsetChecklistClass() { $('input[type="checkbox"]').closest('ul').css({'list-style':'none','padding':'0'}); }
// MD Resize Split View
function MDresizeSplit(handle,$source_el) {
let sidebar_width = $('#sidebar').outerWidth();
let page_width = window.innerWidth;
$(document).on('mousemove',function(e) {
e.stopPropagation(); e.preventDefault();
let pageX = e.pageX;
if ( pageX > sidebar_width + 100 && pageX < page_width - 100 ) { // min widths
$('#text_source').css({'width': pageX - sidebar_width + 'px'});
$('#html_preview').css({'width': $('#content_text').outerWidth() - $source_el.outerWidth() + 'px'});
$('#text_preview').css({'width': $('#content_text').outerWidth() - $source_el.outerWidth() + 'px'});
handle.css({'left': $source_el.outerWidth() - 4 + 'px'});
}
});
handle.on('mouseup', function() { $(document).off('mousemove'); focusTextEditorPanes(); });
}
// MD UI Sync Scroll
function MDpercentage(el) { return (el.scrollTop / (el.scrollHeight - el.offsetHeight)); }
function MDsyncScroll(el1) {
let el2; // scroll this element when scrolling el1
switch(true) {
case el1.getAttribute('id') === 'text_source':
el2 = ( $('body').hasClass('preview_html') ? document.getElementById('html_preview') : document.getElementById('text_preview') );
break;
case el1.getAttribute('id') === 'text_preview': case el1.getAttribute('id') === 'html_preview':
el2 = document.getElementById('text_source');
break;
}
if ( document.querySelector('input[name="sync_scroll"').checked ) {
el2.scrollTo( 0, (MDpercentage(el1) * (el2.scrollHeight - el2.offsetHeight)).toFixed(0) ); // toFixed(0) prevents scrolling feedback loop
}
}
// click TOC anchors
function MDtocClick(el,$preview_el) { let thisId = el.attr('href'); if ( thisId ) { $preview_el.scrollTop( $(thisId).offset().top - 48 ); } }
// click Headers to return to TOC or top
function MDheaderClick($preview_el) {
if ( $preview_el.find('.table-of-contents').length > 0 ) {
document.getElementsByClassName('table-of-contents')[0].scrollIntoView(true);
} else {
document.getElementById('preview').scroll(0,0);
}
}
// MD Clear text source
function clearText() {
if ( window.self !== window.top ) { sendMessage('top','iframe_edited'); }
$('body').removeClass('edited');
$('#text_preview,#html_preview').empty();
$('#text_source').val('').show().focus();
}
// END TEXT EDITING
// MESSAGES
// Send a message to iframe or parent
function sendMessage(target,message,funcName,args) {
var messageObj = { 'messageContent': message, 'functionName': funcName, 'arguments': args };
if ( target === 'iframe' ) {
let contentIFrame = document.getElementById('content_iframe');
contentIFrame.contentWindow.postMessage( messageObj, '*' );
}
if ( target === 'top' ) {
window.parent.postMessage( messageObj, '*');
}
}
// Receive a message from iframe or parent, do appropriate action
function receiveMessage(e) {
if ( e.origin === 'null' || e.origin === $origin ) {
let message = e.data.messageContent, funcName = e.data.functionName, args = e.data.arguments;
switch( message ) {
case 'arrowNavigation': arrowNavigation(args); break; // class_name, key
case 'toggle_sidebar': $('#toggle_sidebar').click(); break;
case 'toggle_menu': $('#menu_container').click(); break;
case 'close_menu': // no break
case 'top_closed_menu': $('#iframe_body').removeClass('has_menu is_blurred'); break;
case 'top_has_menu': $('#iframe_body').addClass('has_menu is_blurred'); break; // tell iframe top has menu
case 'menu_navigation': menuNavigation(args); break; // menu navigation from iframe
case 'menu_selection': // no break
case 'clickMenu': e.preventDefault(); e.stopPropagation(); clickMenu(); break; // show menu
case 'toggle_invisibles': $('#show_invisibles_container').find('input').click(); focusContent(); break;
case 'focus_sidebar': focusSidebar(); // no break
case 'escape': // no break
case 'tab': // close menus and refocus content or focus sidebar
switch(true) { case $('#top').hasClass('focus_content') && $('#top').hasClass('has_menu'): focusContent(); break; default: focusSidebar(); } scrollThis('tbody','selected'); break;
case 'shift_focus_iframe':
switch(true) {
case $('#iframe_dir_list_wrapper').length === 1: // if iframe dir_list visible...
$('body').removeClass('is_blurred');
switch(true) {
case $('tr.selected, tr.is_blurred').length > 0: $('tr.is_blurred').removeClass('is_blurred').addClass('selected'); break;
default: $('#tbody').find('tr:visible').last().addClass('selected'); // select last row when tabbing into directory
}
break;
default: getFocusableEls('#iframe_body').last().focus(); break;
}
scrollThis('tbody','selected');
break;
case 'focus_iframe': // after tabbing into iframe
$('body').removeClass('has_menu is_blurred');
switch(true) {
case $('#iframe_dir_list_wrapper').length === 1: // if iframe dir_list visible...
switch(true) {
case $('tr.selected, tr.is_blurred').length > 0: $('tr.is_blurred').removeClass('is_blurred').addClass('selected'); break;
default: $('#tbody').find('tr:visible').first().addClass('selected'); // select first row when tabbing into directory
}
scrollThis('tbody','selected');
break;
case $('body').hasClass('has_text_editor_UI'): // if text editor visible...
switch(true) { case document.activeElement.id === 'iframe_body': focusTextEditorPanes(); break; }
switch(true) { // ... and restore text selection: NOT IMPLEMENTED YET -- but should only be used for text editor, not editable file?
case $('body').hasClass('split_view'):
case $('body').hasClass('source_text'): {
let selection = window.getSelection();
if ( selection.anchorOffset > 0 ) { // restore cursor position or text selection
// document.getElementById('text_source').setSelectionRange(x,y);
// document.getElementById('text_source').scrollTop = [position of x];
// return;
} else { document.getElementById('text_source').setSelectionRange(0,0); document.getElementById('text_source').scrollTop = 0; }
break;
}
}
break;
case document.activeElement.id === 'iframe_body': // focus form elements and textareas in iframe files
getFocusableEls('#iframe_body').first().focus();
}
break;
case 'blur_iframe': $('body').addClass('is_blurred'); break;
case 'iframe_click': closeMenus(); $('body').addClass('focus_content'); break; // close menus and fade sidebar
case 'show_iframe_dir': showContent('content_iframe_dir',args); break; //args[0] === item link, args[1] === item kind
case 'show_iframe_file': showContent('content_iframe_file',args); break; //args[0] === item link, args[1] === item kind
case 'open_iframe_dir_in_sidebar': openIframeDirInSidebar(args); break; // tell top to open iframe directory in sidebar; args === iframe directory url
case 'open_iframe_parent_dir': $('#iframe_body #parent').find('a').click(); break;
case 'iframe_arrow_navigation':
switch(args) {
case 'ArrowUp': $('#tbody').find('tr:visible').last().find('a').click(); break;
case 'ArrowDown': $('#tbody').find('tr:visible').first().find('a').click(); break;
}
break;
case 'reload': $('#reload_btn').click(); break; // reload content
case 'close': $('#close_btn').click(); break; // escape content_iframe and close content
// toggle iframe dir_list UI prefs from main menu:
case 'show_numbers': case 'show_invisibles': case 'alternate_background': case 'hide_ignored_items': case 'ignore_ignored_items': $('#iframe_body').toggleClass(message); break;
// AUDIO MESSAGES
case 'iframe_play_pause_media': playPauseMedia(); break; // tell top to play/pause audio from iframe click
case 'mediaSkip': mediaSkip(undefined,args); break; // tell top to mediaskip from focused iframe
case 'play_prev_next_iframe_audio': // play next iframe track
if ( args === 'ArrowRight' ) {
if ( $('.audio.playing').nextAll('.audio.selected').length === 1 ) {
$('.audio.playing').nextAll('.audio.selected').first().find('a').dblclick();
} else {
$('.audio.playing').nextAll('.audio').first().find('a').dblclick();
}
}
break;
case 'close_iframe_audio': $('.playing').removeClass('playing'); break;
// TEXT EDITING MESSAGES
case 'iframe_edited': if ( !$('body#top').hasClass('iframe_edited') ) { $('body#top').addClass('iframe_edited'); } break; // let top know iframe text has been edited
case 'clear': $('body#top').addClass('iframe_edited'); break; // add edited class after clearing text from edited iframe file
case 'save_text_selection': $('.text.selected,.code.selected,.markdown.selected').attr('data-selection_start',args[0]).attr('data-selection_end',args[1]); break; // from iframe
case 'get_text_selection': $('#content_text').attr('data-selection_start',args[0]).attr('data-selection_end',args[1]); break;
case 'save_text': saveFile(args[0],'text/plain',args[1]); break;
// MESSAGES FROM TOP to IFRAME
case 'theme_light': case 'theme_dark': $('#iframe_body').toggleClass('theme_dark theme_light'); break;
case 'split_view': case 'toggle_split': $('#toggle_split').click(); break;
case 'default_text_view': $('#iframe_body').toggleClass('preview_text source_text').removeClass('split_view'); break;
case 'toggle_text_editor': showTextEditor(); break;
case 'unloading': // warn iframe that user wants to change or close iframe
if ( !$('#iframe_body').hasClass('has_warning') ) {
$('#iframe_body').addClass('has_warning').find('#warnings_container').removeClass().addClass('unloading').attr('data-function_name',funcName).attr('data-args',args); }
break;
case 'dont_save':// from iframe "Don't Save" button
$body.removeClass('iframe_edited'); $('tr.selected:not(.audio),tr.loaded:not(.audio)').removeClass('selected loaded'); closeContent(); focusSidebar(); break;
case 'open_link_file': openLink(args); break; // open webloc and url files
case 'show_content': // mainly for opening webloc and url files
if ( args[1] === 'dir' ) { args[0] = args[0] + getLinkQueries('dir'); showContent('content_iframe_dir',args); } else { showContent('content_iframe_file',args); } break;
case 'iframe_loaded': showIframeContent(args); break; // if message received by top, iframe loaded successfully; otherwise, data-loaded remains 'unloaded'
}
}
}
window.addEventListener('message',receiveMessage,false);
// END MESSAGES
// WARNINGS
// list of functions to remember while sending messages and then execute after warning button click
function doFunction(funcName,args) {
var funcDictionary = { 'arrowNavigation':arrowNavigation, 'clickRow':clickRow, 'doubleClickRow':doubleClickRow, 'null':null, 'clickMenu':clickMenu, 'clickThis':clickThis, 'clearText':clearText,
'closeButton':closeButton, 'closeContent':closeContent, 'closeFontFile':closeFontFile, 'closePlaylist':closePlaylist, 'closeGlyph':closeGlyph, 'mediaSkip':mediaSkip,
'openSidebarInContentPane':openSidebarInContentPane, 'resetContent':resetContent, 'setLocation':setLocation, 'showDirectorySource':showDirectorySource };
return funcName === 'null' ? null : funcDictionary[funcName](args);
}
// Open and Close Warning alert, focus default button
function openWarning(id,buttonid) { $('body').addClass('has_warning').find('#warnings_container').removeClass().addClass(id); focusButton(buttonid); }
function closeWarning() { $('body').removeClass('has_warning').find('#warnings_container, #warning_buttons button').removeClass(); }
// Show warning after in certain conditions (edited text, open playlist, open font file, etc.; otherwise do the action.
function showWarning(funcName,args) {
switch(true) {
case ( /arrowNavigation|clickRow/.test(funcName) ): // warnings for arrow navigation and row clicks
switch(true) {
// upon receipt of message, iframe will show its warning message, based on the funcName
case $('body').hasClass('iframe_edited'): sendMessage('iframe','unloading',funcName,args.key); focusButton('warning_btn_save'); break;
// warn with open font file and focused sidebar
case !$('body').hasClass('focus_content') && /has_font_file|has_glyph/.test( $content_pane.attr('data-content') ): openWarning('warning_close_font','warning_btn_cancel'); break;
default: doFunction(funcName,args); break;
}
break;
case ( !/arrowNavigation|clickRow/.test(funcName) ): // warnings for other functions
switch(true) {
case $content_pane.attr('data-content') === 'has_font_file': openWarning('warning_close_font','warning_btn_cancel'); break; // warn with open font file and close button.
case $('body').hasClass('has_playlist') && $content_pane.attr('data-content') === undefined && !$content_pane.hasClass('has_audio'):
case $('body').hasClass('has_filelist') && $content_pane.attr('data-content') === undefined && !$content_pane.hasClass('has_audio'):
openWarning('warning_close_playlist','warning_btn_cancel'); break;
case $('body').hasClass('edited'):
$('#content_pane').removeClass('has_hidden_text_editor').attr('data-content','has_text_editor'); openWarning('unloading','warning_btn_save'); break;
default: doFunction(funcName,args); break;
}
}
}
// Warning buttons: what to do when the user clicks a warning button
function warningButtons(id) {
let btn = $(document.getElementById(id)), container_el = btn.closest('body');
switch(id) {
case 'warning_btn_dont_save': // do the user initiated func without saving the edited text
switch(true) {
case window.self !== window.top:
if ( $('#warnings_container').hasClass('unloading') ) { clearText(container_el); sendMessage('top','dont_save'); } break;// remove the irame src and body.iframe_edited class ignore
case window.self === window.top:
clearText(container_el); $content_pane.removeAttr('data-content'); $('#content_iframe').removeAttr('src').removeClass('has_content'); $dir_list.find('.dir.selected a').click();
}
closeWarning();
break;
case 'warning_btn_cancel': closeWarning(); if ( $body.hasClass('focus_content') ) { focusContent(); } break;
case 'warning_btn_clear': closeWarning(); clearText(); break; // clear text editor
case 'warning_btn_save': if ( window.top !== window.self ) { sendMessage('top','clear'); } container_el.removeClass('edited'); $('#save_text_link').click(); closeWarning(); break;
case 'warning_btn_ok':
switch(true) {
case $('#warnings_container').hasClass('warning_close_font'): closeFontFile(); closeWarning(); break;
case $('#warnings_container').hasClass('warning_close_playlist'): closePlaylist(); closeWarning(); break;
case $('#warnings_container').hasClass('warning_make_playlist'): makePlaylist(); break;
case $('#warnings_container').hasClass('warning_local_bookmark'): // no break
case $('#warnings_container').hasClass('warning_local_file'): // no break
case $('#warnings_container').hasClass('warning_local_playlist'): // no break
case $('#warnings_container').hasClass('warning_no_playlist'): closeWarning(); break;
}
break;
}
}
// Click Edited Warning Buttons
$('#warnings_container').on('click','button', function(e) { e.preventDefault(); e.stopPropagation(); warningButtons( $(this).attr('id') ); });
// Edited Warning overlay: prevent user clicks on rest of UI
$('body.has_overlay, body.has_warning').on('click mousedown mouseup', function(e) { e.preventDefault(); e.stopPropagation(); return; });
// Tab Warning Buttons (keyboard event)
function tabWarningButtons(e) {
switch(true) {
case e.shiftKey:
if ( !$('#warning_buttons').find(':focus,.focus').length || !$('#warning_buttons').find(':focus,.focus').prevAll('button:visible').length ) {
$('#warning_buttons').find('button:visible').removeClass('focus').last().focus().addClass('focus');
} else {
$('#warning_buttons').find(':focus,.focus').removeClass('focus').prevAll('button:visible').first().addClass('focus').focus();
}
break;
default:
if ( !$('#warning_buttons').find(':focus,.focus').length || !$('#warning_buttons').find(':focus,.focus').nextAll('button:visible').length ) {
$('#warning_buttons').find('button:visible').removeClass('focus').first().focus().addClass('focus');
} else {
$('#warning_buttons').find(':focus,.focus').removeClass('focus').nextAll('button:visible').first().addClass('focus').focus();
}
}
}
// END WARNINGS
// PLAYLISTS
// Open playlist
$('#menu').on('click','#open_playlist_label', function(e) { e.stopPropagation(); });
$('#menu').on('change','#open_playlist', function(e) { openFile(e,'playlist'); });
// Create Playlist items
function convertPlaylist(items) {
let prepped_index = ''; let prepped_row = ''; let rows, info, title, type, time = '0', display_time = '—', link, url, kind = '', display_kind, ext;
items = items.replace(/\s*#EXTM3U.*\s*/g,'').replace(/^\*\n{2,}/gm,'\n'); // remove header comment and multiple returns
switch(true) { // create rows based on m3u type;
case ( /#EXTINF:/.test(items) ): type = 'extm3u'; rows = items.split('#EXTINF:'); break; // need to add cases for other extm3u directives
default: type = 'm3u'; rows = items.split('\n'); break;
}
for ( let i = 0; i < rows.length; i++ ) {
let row = rows[i], classes = [];
switch(true) { // get entry information: title, link, etc.
case row.length === 0:
break;
case type === 'extm3u' && row.trim().length > 0: // extm3u file
row = row.trim().split('\n');
info = row[0];
time = info.slice(0,info.indexOf(',')).replace('undefined','');
display_time = new Date(time * 1000).toISOString().substr(11, 8);
if ( display_time === '00:00:00' ) { display_time = '—'; }
title = info.slice(info.indexOf(',') + 1);
link = row[1];
break;
default: // m3u with urls only
title = decodeURIComponentSafe(row.slice(row.lastIndexOf('/') + 1));
link = row;
break;
}
if ( link !== undefined ) { url = newURL(link); }
switch(true) {
case url === undefined && i !== 0: // add notice for invalid url and row class
closeMenus();
classes.push('ignored','invalid','disabled');
title += ' [invalid url]';
case url === undefined: break;
case url.search.length: // no break; remove query string from dirs
link = link.replace(/\/\?.+/,'/');
case url.pathname.endsWith('/'): // directory
ext = ' dir'; kind = 'dir'; classes.push('dir');
break;
case /file:/.test(link) && !/file:/.test($protocol):
classes.push('disabled'); // disable local files on non-local pages
case link.indexOf('pdf#') > -1: // remove pdf parameters
link = link.replace(/pdf#.+/,'pdf');
default: // files
ext = url.pathname.slice(url.pathname.lastIndexOf('.') + 1); kind = getItemKind(ext);
switch(true) {
case kind === 'audio':
$('body').addClass('has_media has_audio');
classes.push('file','media',kind,ext);
$body.removeClass('has_filelist').addClass('has_playlist');
break;
case kind === 'video':
$('body').addClass('has_media has_video');
classes.push('file','media',kind,ext);
$body.removeClass('has_filelist').addClass('has_playlist');
break;
case kind === 'image': $('body').addClass('has_images');
case kind === 'font': $('body').addClass('has_fonts');
default: classes.push('file',kind,ext); $body.removeClass('has_playlist').addClass('has_filelist');
}
}
let display_kind = kind.slice(0,1).toUpperCase() + kind.slice(1);
if ( i !== 0 ) { // don't list first item twice
prepped_row = '<tr id="rowid-'+ i +'" class="'+ classes.join(' ') +'" data-kind="'+ kind +'" data-ext="'+ ext +'"><td class="tbody_row_cell tbody_row_cell_name name" data-name="'+ title +'"><a class="tbody_row_cell_name_a icon text_color_111" href="'+ link +'"><span class="tbody_row_cell_name_a_span has_icon_before"><input type="checkbox" tabindex="-1" checked="true">'+ title +'</span></a></td><td class="tbody_row_cell_details size details" data-size="'+ time +'">'+ display_time +'</td><td class="tbody_row_cell_details kind details" data-kind="'+ kind +'">'+ display_kind +'</td><td class="tbody_row_cell_details ext details" data-ext="'+ ext +'"></td></tr>';
prepped_index += prepped_row;
}
}
return prepped_index;
}
// Open Playlist/Filelist
function openPlaylist(files,reader) {
if ( !$body.hasClass('has_playlist') && !$body.hasClass('has_filelist') ) { // store original dir_list and body "has_" classes as data if body does not already have playlist or filelist
let body_classes = document.getElementById('top').classList, data_classes = [];
for ( let bodyClass of body_classes.values() ) { if ( bodyClass.startsWith('has') ) { data_classes.push( bodyClass ); } } // add original body classes to dataclasses
$('#tbody').data('dir_list',$('#tbody').html() ).data('data_classes',data_classes);
$body.removeClass(data_classes.join(' '));
}
closeContent(); // close all existing content, because it shouldn't be navigable or selectable with playlist loaded
let prepped_index = convertPlaylist(reader.result); // get the new index
$('#tbody').empty().append(prepped_index); // append the prepared playlist
$('#top,#content_pane').removeClass('has_menu faded');
if ( !$('#sort_by_name').hasClass('selected' ) ) { $('#sort_by_name').click(); } // sort by name
$('#stats_summary_playlist_files').empty().html('<span>Playlist: '+ $('#tbody tr.media').length +' Files</span>'); // update stats
if ( /file:/.test(prepped_index) && !/file:/.test($protocol) ) { // show warning about local files on non-local page
$body.addClass('has_warning');
$('tbody').addClass('local');
openWarning('warning_local_playlist','warning_btn_ok');
}
if ( $body.hasClass('autoload_media') ) {
$('#tbody tr.media:not(.disabled)').first().click(); // select first item
if ( $body.hasClass('has_images') ) { autoLoadCoverArt(); }
}
scrollThis('tbody','selected',false);
document.title = 'Playlist: '+ files.name;
$('#parents_dir_nav').find('> div').empty().html( files.name );
$('#open_playlist').val('');
}
// Make and save playlist
function makePlaylistLink(link) {
link = link.replace(/\/\?.+/,'/').replace(/\.pdf\#.+/,'pdf');
switch(true) { // we need to handle various cases like this in case the link is being from a loaded playlist which might include links to other pages
case link.startsWith('http'): // no break; remote files
case link.startsWith('file'): link = link; break; // local files
case link.startsWith('/'): link = $protocol +'//' + link; break;
case !link.startsWith('file'): link = $protocol +'//'+ window.location.host + window.location.pathname + link; break;
}
return link;
}
function makePlaylist() {
let items = $('#tbody'), rows, playlist = [], playlistEntry = '';
let playlist_type = $('#make_playlist_form').find('input:checked').attr('id');
switch(playlist_type) {
case 'media_files_only': rows = items.children('tr.media:not(.unchecked)'); break;
case 'audio_files_only': rows = items.children('tr.audio:not(.unchecked)'); break;
case 'video_files_only': rows = items.children('tr.video:not(.unchecked)'); break;
case 'all_non_media_files': rows = items.children('tr:not(.media)'); break;
case 'all_items': rows = items.children('tr'); break;
case 'directories_only': rows = items.children('tr.dir'); break;
case 'files_only': rows = items.children('tr.file'); break;
}
switch(true) { // show warning if no qualifying items found or make playlist
case rows.length === 0:
openWarning('warning_no_playlist','warning_btn_ok');
break;
default:
for ( let i = 0; i < rows.length; i++ ) {
let row = $(rows[i]);
let link = row.find('a').attr('href');
link = makePlaylistLink(link);
let timing = '';
playlistEntry = '#EXTINF:'+ timing +','+ row.find('a').text() +'\n'+ link;
playlist.push(playlistEntry);
}
playlist = '#EXTM3U\n'+ playlist.join('\n'); // add playlist header id
saveFile(playlist,'audio/mpeg-url','untitled.m3u'); // show save file dialogue
closeWarning();
}
}
// Select "Make Playlist" menu item: show make playlist warning list
$('#make_playlist').on('click',function(e) {
e.preventDefault(); e.stopPropagation(); closeMenus(); openWarning('warning_make_playlist','warning_btn_ok');
});
// Get playlist entry
function makePlaylistEntry(id) {
let title, link, duration = '';
switch(true) {
case id === 'title': // make link for non-audio items
title = $('#title span').text();
switch(true) {
case $('.content.has_content').attr('id') === 'content_image_container': // link for images
link = $('.content.has_content').find('img').attr('src');
break;
case $('.content.has_content').attr('id') !== 'content_image_container': // all other content
link = $('.content.has_content').attr('src');
if ($('.content.has_content').attr('id') === 'content_video') { duration = Number.parseInt(getElById('video')[0].duration); }
break;
}
link = makePlaylistLink(link);
$('#content_playlist').find('textarea').val('#EXTINF:'+ duration +','+ title +'\n'+ link +'\n').focus();
break;
case id === 'content_audio_title':
title = $('#content_audio_title span').text();
link = $('#audio').attr('src');
link = makePlaylistLink(link);
duration = Number.parseInt(getElById('audio')[0].duration);
$('#content_audio_playlist').find('textarea').val('#EXTINF:'+ duration +','+ title +'\n'+ link +'\n').focus();
break;
}
}
// Show Playlist Entry
function showPlaylistEntry(id) {
makePlaylistEntry(id);
switch(true) {
case id === 'title':
document.getElementById('content_playlist').classList.toggle('has_content');
selectTextareaContent('content_playlist_textarea');
break;
case id === 'content_audio_title':
document.getElementById('content_audio_playlist').classList.toggle('has_content');
selectTextareaContent('content_audio_playlist_textarea');
break;
}
}
$('#title, #content_audio_title').on('click',function() {
if ( $content_pane.attr('data-content') !== 'has_font_file' && $content_pane.attr('data-content') !== 'has_grid' ) { showPlaylistEntry($(this).attr('id')); }
});
// Open File
function openFile(e,type) { // type: font or playlist.
if (window.File && window.FileReader && window.FileList && window.Blob) {
let files = e.target.files[0];
let reader = new FileReader();
if ( type === 'font' ) { reader.readAsArrayBuffer(files); }
if ( type === 'playlist' ) { reader.readAsText(files); }
reader.onload = function() {
if ( type === 'font' ) { openFontFile(files,reader); }
if ( type === 'playlist' ) { openPlaylist(files,reader); }
return true;
};
} else {
alert('Can\'t open file: file APIs are not fully supported in this browser.');
}
}
// Save File
function saveFile(content,mimetype,file_name) {
let blob = new Blob([content], {type: mimetype});
let $download_el = window.document.createElement('a');
$download_el.style = "display:none";
$download_el.href = window.URL.createObjectURL(blob);
$download_el.download = file_name;
document.body.appendChild($download_el);
$download_el.click();
document.body.removeChild($download_el);
URL.revokeObjectURL(blob);
}
})();
// FINIS! + DEO GRATIAS + //
