${ warnings }
${ content_help }
';
// Content Font Els
const ContentFontEls = function() {
const sample_string = `ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 [(!@#$%^&*;:)]`; const 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.`; return `
${ sample_string }
Typography
The art of using types to produce impressions on paper, vellum, &c.
S P E C I M E N
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.
${ lorem_string }
${ lorem_string }
${ lorem_string }
Name
Default
Ext
Time
Size
Date
Kind
${ content_audio_els }
`;
// CONTENT containers
const content_els = `
${ ContentFontEls() }
Warning:
Make Playlist/Filelist (.m3u)
Are you sure you want to close the font preview?
You have unsaved changes.
Are you sure you want to clear all your text?
Can\'t load local items from non-local pages.
Please use your browser\'s bookmarks instead or enter the URL manually.
Please use your browser\'s bookmarks instead or enter the URL manually.
Can\'t load local items from non-local pages.
Are you sure you want to close the playlist?
This playlist contains local files.
Please reload this playlist from a local page in order to play them.
Please reload this playlist from a local page in order to play them.
Can’t make playlist: no qualified items found.
SCRIPT HOMEPAGE (openuserjs.org)
| KEYBOARD SHORTCUTS | DESCRIPTION |
| ↑ or ↓ | Select the previous/next sidebar item or previewed directory item. 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 return to load it. |
| ← or → | Select prev/next item of the same kind as the current selection. If current selection is a media file, select and begin playback of the next media item. |
| ⌘/Ctrl + ↑ | Go to parent directory |
| ⌘/Ctrl + ↓ | Open selected sidebar directory |
| ⌘/Ctrl + → | Open selected subdirectory in sidebar. |
| ⌘/Ctrl + ← | Close selected subdirectory in sidebar or jump to parent directory. |
| ⌥ + ← or → | Skip audio/video ±10s |
| ⌥ + ⇧ + ← or → | Skip audio/video ±30s |
| Escape | Close menus and help, unfocus textareas and content pane, etc. |
| Return | Open selected directory, select file, or pause/play media. |
| Space | Pause/Play media files (if media player loaded). |
| Tab | Toggle focus between sidebar and content pane. |
| ⌘/Ctrl + D | Toggle file details (size, date modified, kind) in some index page types. |
| ⌘/Ctrl + E | Toggle main menu. |
| ⇧ + ⌘/Ctrl + E | Show text editor. |
| ⌘/Ctrl + G | Show or reload image or font grids. |
| ⌘/Ctrl + I | Toggle invisible files. |
| ⇧ + ⌘/Ctrl + O | Open selected sidebar item in new window/tab. |
| ⌘/Ctrl + R | Reload grids and previewed content, reset scaled images/fonts, reset media files to beginning. |
| ⌘/Ctrl + W | Close previewed content (doesn't work in all browsers; use close button instead), or close window if no content is being previewed. |
| ⌘/Ctrl + ⇧ + < or > | Scale preview items and grids. |
| ⌘/Ctrl + \\ | Toggle sidebar. |
| ⇧ + ⌘/Ctrl + \\ | Toggle text editor split view. |
MAIN MENU ITEMS (Selected)
- Selecting many of the these menu items will override the hard-coded default preferences in the script by adding an entry to the query string in the browser window URL.
- This makes it more convenient to customize preferences, since defaults changed in the code will be over-written whenever the script is updated.
- BOOKMARK MENU
- For convenience you can add bookmarks to files or directories to this menu by editing the User Preference in the code.
- These items will be over-written when the script is updated, however; to save them, you may wish to "Export User Settings" (see below) before updating the script.
- Of course, you may simply use your browser's bookmarks instead.
- IGNORED ITEMS
- Ignored items include files that the browser cannot handle natively, e.g., common Office and graphics files, various binary files, and many others.
- Although they are visible in the sidebar by default, and ignored when selected, they can be hidden here.
- Also, normal browser behavior for handling such files can be restored by unchecking "Ignore Ignored Files", but it is recommended that this preference be left checked.
- OPEN PLAYLIST/FILELIST
- The script supports basic .m3u playlists of audio or video files. Click to load a local .m3u file.
- The script also has custom support for "filelists," which are standard .m3u files that contain links to directories and any file type supported by the script or browser.
- Note: if you change the extension of an ordinary .m3u file to .txt, the script will read it normally as an editable text file.
Double-clicking the selected file in the sidebar, or typingCmd/Ctr + Down ArroworCmd/Ctr + Return, will open the playlist/filelist in the sidebar.
NOTE: The text must begin with #EXTM3U for this work.
- SAVE PLAYLIST/FILELIST
- Save the files in the current sidebar directory as an .m3u playlist/filelist. Choose audio, video, all media, all non-media, all items, directories or files only.
- OPEN FONT FILE
- Load a local font file and view information about the font and a grid of its complete glyph repertoire.
- Glyph grids can be navigated with the arrow keys. Individual glyphs can be selected by clicking them or pressing Return.
- Individual glyphs may be saved as .svg files.
- DEFAULT USER SETTINGS
- This will remove the query string from the browser window URL, so that the default user settings from the code will be used instead.
- EXPORT USER SETTINGS
- Save a file containing the User Settings from the code, including custom bookmarks and other settings.
OTHER SCRIPT FUNCTIONS
- NAVIGATION
- Sidebar displays list of items in current directory. Select a sidebar item to show it in the content pane.
- Click a directory icon in the sidebar or select it and type Cmd/Ctrl Right Arrow to open subdirectory; click again to close or type Cmd/Ctrl Left Arrow.
- IMAGES, FONTS, FONT GLYPHS
- Previewed items can be scaled with Cmd/Ctr +/– keys.
- IMAGE AND FONT GRIDS
- If a directory contains images and/or font files, the "Show Grid" icon will appear in the sidebar. Click it (or type Cmd/Ctr+G) to show a grid of the available items.
- Grids can be navigated with the arrow keys, and individual grid items may be viewed by clicking them or pressing Return.
- When a grid item is being viewed, the grid can still be navigated with the arrow keys.
- Closing a selected grid item will show the grid again.
- CUE SHEETS
- When a media file (audio or video) is loaded, the script will look for a .cue file in the same directory with EXACTLY the same name as the media file.
- If it finds one, it will load the Track ID, the PERFORMER, the TITLE, and the INDEX (time position) into a menu next to the audio player; there is no support for other commands.
- Tracks can be selected by clicking the item, and played or paused by clicking the selected item.
- .cue files can also be selected independently in the sidebar and edited and saved (locally). This may be handy for creating "on the fly" bookmarks for a long media track before closing the page.
- Note that you can also create and save (locally) a new .cue file by using the Text Editor.
- Note (MacOS): If you prefer not to clutter the sidebar with .cue files, you may make them invisible by adding a dot to beginning of the file name; the script will still find them.
'+items+'
';
return items;
}
// Create Playlist items
function convertPlaylist(items) {
let prepped_index = []; let prepped_row = []; let rows, type;
items = items.replace(/\s*#EXTM3U.*\s*/g,'').replace(/^\*\n{2,}/gm,'\n').replace(/\.pdf\?.+?\n/g,'.pdf\n'); // remove header comment and multiple returns
switch(true) { // determine playlist type;
case ( /#EXTINF:/.test(items) ): type = 'extm3u'; rows = items.split('#EXTINF:'); break; // rows made by splitting at "#EXTIMG:" prefix
default: type = 'm3u'; rows = items.split('\n'); break; // rows are just naked links
}
let rows_length = rows.length;
for ( let i = 0; i < rows_length; i++ ) {
let row = rows[i];
switch(true) { // get entry information: title, link, etc.
case type === 'extm3u': row = row.trim().split('\n'); prepped_row = row[1]; break; // split row into info ( = row[0] ) and link, but we're only using the link anyway....
case type === 'm3u': prepped_row = row; break; // m3u with urls only
}
if ( row.length > 1 ) { prepped_index.push([prepped_row]); }
}
return prepped_index;
}
// 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 = convertErrorType(items); break;
}
return converted;
}
// INDEX PREP: Build new Index from prepped rows
function buildNewIndex(id,prepped_index,sort,type) {
let new_index_items = [], body_classes = new Set();
let new_row, item, item_info = [], item_link, item_name, item_sort_name, item_size_and_date, item_size, item_sort_size, item_date, item_sort_date, item_ext, item_sort_kind, item_kind, item_classes;
let name_span, cell_link, cell_name, cell_size, cell_date, cell_kind, cell_ext, cell_time, prepped_index_length = prepped_index.length, item_disabled;
let stats_classes = [], stats_kinds = [];
let parent_id = ( getSearchParam('parent_id') || '' ), connector = ( getSearchParam('parent_id') ? '_' : '' ), level = ( Number(getSearchParam('level')) || 0 ); // ensure unique ids for subdirectory items
// add body classes according to index type
switch(type) {
case 'error': body_classes.add('is_error'); break;
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;
}
for ( let i = prepped_index_length; i--; ) {
item = prepped_index[i];
item_info = getLinkInfo(item[0]); // = [link,name,ext,kind,item_classes,body_classes];
item_link = item_info[0].trim();
item_name = item_info[1].replace(/^\s/m,'\ ').replace(/^\//m,'').replace(/([-_——])/g,'$1| ${ total } Items: ${ total_dirs } Directories, ${ total_files } Files | ||||||
|---|---|---|---|---|---|---|
| ${ total } Items (${ total_dirs_invisible + total_files_invisible } ignored or invisible) | ||||||
| Dirs (${ total_dirs_invisible } ignored or invisible) | ||||||
| Files (${ total_files_invisible } ignored or invisible) | ||||||
${ display_name.toUpperCase() } ${ display_name.slice(0,font_family.lastIndexOf(".")) }` ); 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 = $(''); let $glyph_canvas_el = $(''); let $glyph_info_el = $(''); 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 let glyph, glyph_width, context_X, bounding_box, glyph_unicode, $glyph_container, this_glyph, context, $glyph_info; for ( let i = 0; i < glyphs.length; i++ ) { glyph = glyphs.glyphs[i]; // Glyph width bounding_box = glyph.getBoundingBox(); glyph_width = bounding_box.x2 - bounding_box.x1; context_X = (60 - glyph_width/24); // Add glyph info and append elements glyph_unicode = ( glyph.unicode !== undefined ? '#'+ glyph.unicode : glyph.unicode ); $glyph_container = $glyph_container_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 this_glyph = document.getElementById('glyph_'+ glyph.index); $(this_glyph).data('contextX',context_X); 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 = $('
'+ name +': | '+ value +' | numGlyphs: | '+ num_glyphs +' | '+ text_editing_UI_els +' '+ warnings +' '); // add the UI
$('#text_source').val(source_text); // set the source text value
// no break
case $('#text_source').val().trim().startsWith('#EXTM3U'): // playlists and filelists
content = $('#text_source').val().trim(); // get m3u.txt file for processing
sendMessage('top','iframe_playlist','',content);
break;
}
switch(true) { // assemble text editing body classes
case getSearchParam('enable_text_editing') === 'false': // text editing disabled
$('body').removeClass('split_view preview_text preview_html');
body_classes.push('text_editing_disabled source_text'); // show the source text
$('#text_source').prop('disabled','disabled'); // diable textarea editing
break;
default:
if ( getSearchParam('split_view') === 'true' ) { body_classes.push('split_view'); }
if ( getSearchParam('sync_scroll') === 'true' ) { body_classes.push('sync_scroll'); $('#sync_scroll input').click(); }//$('#sync_scroll input').prop({'checked':true}); }
if ( getSearchParam('default_text_view') === 'preview_source' ) { body_classes.push('source_text'); }
if ( getSearchParam('default_text_view') === 'preview_text' ) { body_classes.push('preview_text'); }
if ( getSearchParam('default_text_view') === 'preview_html' ) { body_classes.push('preview_html'); }
if ( getSearchParam('editor_theme') === 'default' )
{ body_classes.push('editor_theme_'+ getSearchParam('theme')); } else { body_classes.push( 'editor_theme_'+ getSearchParam('editor_theme') ); }
}
$('body').addClass( body_classes.join(' ') ); // add text editor body classes
focusTextEditorPanes();
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
// 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;
}
}
// Select Textarea Content
function selectTextareaContent(id) {
let $textarea = document.getElementById(id);
$textarea.focus();
$textarea.select();
$textarea.scrollTop = 0;
}
function saveBtn(id) {
let data, ext, file_name;
switch(true) {
case $('#content_pane').attr('data-content') === 'has_text_editor': file_name = 'untitled'; break;
default: file_name = decodeURIComponentSafe(window.location.pathname.split('/').reverse()[0]);
file_name = file_name.slice(0,file_name.lastIndexOf('.'));
}
switch(true) {
case id === 'save_text': data = $('#text_source').val(); ext = '.md'; break;
case id === 'save_HTML': data = MDprepHTML($('#text_preview').html()); ext = '.html';
}
saveMD( data, file_name + ext );
}
$('#content_text').on('click','#save_btn li',function() { saveBtn($(this).attr('id')); }); // save text editor content
// MD SAVE SOURCE or HTML
function MDprepHTML(data) {
const save_HTML_open = `"/g,' ')
.replace(/^ | ||