☰

Supercharged Local Directory File Browser (Chrome browsers only)

Make file:/// directory ("Index of...") pages actually useful. Adds navigation links, file preview pane, user-defined shortcuts, filtering, keyboard navigation, more.

目前為 2018-02-24 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         Supercharged Local Directory File Browser (Chrome browsers only)
  3. // @version      1.1
  4. // @description  Make file:/// directory ("Index of...") pages actually useful. Adds navigation links, file preview pane, user-defined shortcuts, filtering, keyboard navigation, more.
  5. // @author       Gaspar Schott
  6. // @match        file:///*
  7. // @require      http://code.jquery.com/jquery-latest.min.js
  8.  
  9. // This script was developed in Vivaldi, running on Mac OS High Sierra. It has been tested in Chromium, Opera Next, Iridium, and in general it should work in all Chrome-based browsers.
  10. // It does not work in Safari because Safari does not allow local directories to be browsed.
  11. // In theory, it should work in Firefox, but because Firefox uses a different DOM for building the Index pages, the script would have to be rewritten.
  12.  
  13. // 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.
  14. // For Greasemonkey, open about:config and change greasemonkey.fileIsGreaseable to true.
  15. // For Tampermonkey, go to Chrome extension page, and tick the 'Allow access to file URLs' checkbox at the Tampermonkey extension section.
  16.  
  17. // @namespace https://greasyfork.org/users/16170
  18. // ==/UserScript==
  19.  
  20. (function() {
  21.     'use strict';
  22.     var $ = jQuery;
  23.  
  24. 	function platformIsMac() {
  25. 	  return navigator.platform.indexOf('Mac') > -1;
  26. 	}
  27. 	function platformIsWin() {
  28. 	  return navigator.platform.indexOf('Win') > -1;
  29. 	}
  30.     // Don't run script in iframes or files (only directories)
  31.     //    if ( window.top != window.self ) {
  32.     if ( window.frameElement !== null ) {
  33.         return;
  34.     } else if ( window.location.pathname.slice(-1) != '/') {
  35.         return;
  36.     }
  37.  
  38. 	// ***** USER SETTINGS ***** //
  39.     	var $settings = {
  40.         	user_name:          // Your user name
  41.         						'MacBookPro',
  42.                                 // Shortcuts: add directories and files here; you may also use your browser's bookmarks, of course
  43. 			root_shortcuts:     // Root directories: add or remove as you please (but at leave empty brackets). These defaults are applicable to Mac OS.
  44.     	    					['Applications','Library','Users','Volumes','Applications/AMPPS/www'],
  45.                                 // ['C:/Users','C:/Program Files','C:/Windows'],
  46. 			user_shortcuts:     // User directories; you must enter your user_name above.
  47.         						['Documents','Documents/02 Library','Documents/02 Library/P Literature','Downloads','Library'],
  48.         	file_shortcuts:     // Add specific file paths, e.g.: 'Users/MyUserName/Documents/MyDocument.html'
  49.         						// These files will be selected automatically when their containing directory is loaded
  50.         						// Limitations: only works for one file per directory; if more than one file per directory is listed, the last item will be selected.
  51. 								['Applications/AMPPS/www/timeline/Timeline.html','Applications/AMPPS/www/invoicing/html5-invoice/index.html'],
  52. 	        hide_invisibles:    // Mac OS only: Files beginning with a "." will be ignored.
  53. 								true,
  54.             ignoreFiles:       	// If true, ignored file types will not be loaded in the content pane;
  55.             					// If false, they will be treated as normal files, meaning the browser will attempt to download file types it can't handle.
  56. 								true,
  57.             ignoreFile_types:   // ignore files with these extensions
  58.             					['exe','.doc','.docx','ppt','pptx','xls','xlsx','odt','odp','msi','dll','rtf','indd','idml','.pages','.tif','.zip','pkg','.swf','.pls','.ics','.ds_store','alias','.dmg','.gz','.qxp','icon.jpg','thumbs.db'], // lowercase
  59.             show_ignored_files: // If true, show ignored files grayed out, if false, don't show them at all.
  60. 								true,
  61.             apps_as_dirs:       // Mac OS only: if true, treat apps as directories; allows app contents to be examined
  62. 								false,
  63.             dark_mode:          // To be implemented
  64. 								false
  65. 	    };
  66. 	// ***** END USER SETTINGS ***** //
  67.  
  68.     // ***** BUILD MENUS ***** //
  69.  
  70.     // PATHS
  71.     var $location = window.location.pathname;
  72.     var $current_dir_path = $location.replace(/%20/g,' ').replace(/\//g,'/<wbr>').replace(/_/g,'_<wbr>').replace(/—/g,'—<wbr>').replace(/\\/g,'/');
  73. 	var $current_dir_name = $location.replace(/%20/g,' ').slice(0,-1);
  74.     $current_dir_name = $current_dir_name.slice($current_dir_name.lastIndexOf('/') + 1);
  75.     var $location_arr = $location.split('/');
  76.     var $parent_dir_link = $location_arr.slice(0,-2).join('/') + '/';
  77.  
  78.     // Parents Link Menu Items
  79.     var $parent_links_arr = function() {
  80. 	    var $paths_arr = [];
  81. 	    for ( var i = 1; i < $location_arr.length - 1; i++ ) {
  82.             $paths_arr[0] = ''; // root
  83.             $paths_arr[i] = $paths_arr[i - 1] + $location_arr[i] + '/';
  84.     	}
  85.     	return $paths_arr;
  86.     };
  87.  
  88.     // function to build menu list items
  89.     function menu_items(x,y,i) {
  90.         var $menu_item = '<li><a href="file:///' + x[i] + '" style="margin:0;padding:4px 6px;display:block;text-indent:0;text-decoration:none;color:#333;">' + y[i] + '</a></li>';
  91.         return $menu_item;
  92.     }
  93.  
  94. 	// Parents Directory Menu Items
  95. 	var $parents_dir_menu_arr = function() {
  96. 	    var $parents_dir_menu_items = [];
  97.     	for ( var i = 1; i < $parent_links_arr().length; i++ ) {
  98.             $parents_dir_menu_items[0] = menu_items('/','/',0); // root
  99. 	        $parents_dir_menu_items[i] = menu_items($parent_links_arr(),$parent_links_arr(),i);
  100.     	}
  101.         $parents_dir_menu_items.pop(); // remove current directory
  102.         $parents_dir_menu_items = $parents_dir_menu_items.reverse().join('').replace(/%20/g,' ');
  103.     	return $parents_dir_menu_items;
  104.     };
  105.  
  106.     // Root Shortcuts Menu Items
  107.     $settings.root_shortcuts = $settings.root_shortcuts.map(i => i + '/'); // add '/'
  108.  
  109.     var $root_shortcuts_menu_arr = function() {
  110.         if ( $settings.root_shortcuts.length ) {
  111.             var $root_shortcut_items = [];
  112.             for ( var i = 0; i < $settings.root_shortcuts.length; i++ ) {
  113.                 $root_shortcut_items[i] = menu_items($settings.root_shortcuts,$settings.root_shortcuts,i);
  114.             }
  115.             $root_shortcut_items = $root_shortcut_items.join('');
  116.             return $root_shortcut_items;
  117.         }
  118. 	};
  119.  
  120.     // User Shortcuts Menu Items
  121.     var $user_shortcuts_display_name = $settings.user_shortcuts.map(i => $settings.user_name + '/' + i + '/' ); // build display names
  122.     $settings.user_shortcuts = $settings.user_shortcuts.map(i => 'users/' + $settings.user_name + '/' + i + '/'); // build link fragments
  123.  
  124.     var $user_shortcuts_menu_arr = function() {
  125. 		if ( $settings.user_name && $settings.user_shortcuts.length ) {
  126. 			var $user_shortcut_items = [];
  127. 			for ( var i = 0; i < $settings.user_shortcuts.length; i++ ) {
  128.                 $user_shortcut_items[i] = menu_items($settings.user_shortcuts,$user_shortcuts_display_name,i);
  129. 			}
  130.             $user_shortcut_items = $user_shortcut_items.join('');
  131.             return $user_shortcut_items;
  132. 		}
  133. 	};
  134.  
  135.     // File Shortcuts Menu Items
  136.     var $file_shortcuts_display_name = $settings.file_shortcuts.map(i => i.split('/').pop()); // get file names from paths
  137.  
  138.     var $file_shortcuts_menu_arr = function() {
  139. 		if ( $settings.file_shortcuts.length ) {
  140. 			var $file_shortcut_items = [];
  141. 			for ( var i = 0; i < $settings.file_shortcuts.length; i++ ) {
  142.                 $file_shortcut_items[i] = menu_items($settings.file_shortcuts,$file_shortcuts_display_name,i);
  143. 			}
  144.             $file_shortcut_items = $file_shortcut_items.join('').replace(/\/<\/a>/g,'<\/a>').replace(/<a /g,'<a class="file_shortcut" ').replace(/%20/g,' ');
  145.             return $file_shortcut_items;
  146. 		}
  147. 	};
  148.  
  149.     // ***** END BUILD MENUS ***** //
  150.  
  151.  
  152.     // ***** BUILD UI ELEMENTS ***** //
  153.  
  154.     // ***** SIDEBAR ELEMENTS ***** //
  155.  
  156. 	// 1. Parent Directory Menu
  157.     var $parent_dir_menu = $(
  158.     	'<nav id="parent_dir_menu" style="margin:0;padding:0;display:table;width:100%;">' +
  159. 	    	'<a href="" style="width:100%;padding:0;display:table-cell;text-align:center;vertical-align:middle;text-decoration:none;">&and;</a>' +
  160.     	'</nav>'
  161.     	);
  162.     $parent_dir_menu.find('a').attr('href',$parent_dir_link);
  163.  
  164.     // 2. Current Directory Name and Parents Directory Menu
  165. 	var $parents_dir_menu = $(
  166. 		'<nav id="parents_dir_menu" style="margin:0;padding:0;text-align:center;">' +
  167. 			'<div style="padding:4px 6px;display:inline-block;text-align:center;vertical-align:middle;overflow:hidden;cursor:pointer;hyphens:none;"></div>' +
  168. 			'<ul class="menu" style="display:none;margin:0;padding:0;position:absolute;top:;right:0;left:0;z-index:100;text-indent:0;text-align:left;background:lightgray;border-top:solid 1px gray;border-bottom:solid 1px gray;list-style-type:none;"></ul>' +
  169. 		'</nav>'
  170. 		);
  171. 	$parents_dir_menu.find('div').append( $current_dir_path );
  172. 	$parents_dir_menu.find('ul').append( $parents_dir_menu_arr() );
  173.  
  174.     // 3. Shortcuts Menu
  175.     var $divider = $(
  176.     	'<li><hr style="margin:0;border-bottom:0;"></li>'
  177.     	);
  178.     var $bookmark_this_dir = $('<li><a id="add_to_bookmarks" href="#" style="margin:0;padding:4px 6px;display:block;text-indent:0;text-decoration:none;color:#333;">Add directory to bookmarks</a></li>');
  179.     var $settings_menu_item = $('<li><a id="show_settings" href="#" style="margin:0;padding:4px 6px;display:block;text-indent:0;text-decoration:none;color:#333;">Settings</a></li>)');
  180. 	var $shortcuts_menu = $(
  181. 		'<nav id="shortcuts_menu" style="margin:0;padding:0;">' +
  182. 			'<div style="width:6em;display:table-cell;text-align:center;vertical-align:middle;font-size:18px;cursor:pointer;">' +
  183. 				'&equiv;' +
  184. 			'</div>' +
  185. 			'<ul class="menu" style="display:none;margin:0;padding:0;position:absolute;right:0;left:0;z-index:100;text-indent:0;text-align:left;background:lightgray;border-top:solid 1px gray;border-bottom:solid 1px gray;list-style-type:none;"></ul>' +
  186. 		'</nav>'
  187. 		);
  188. 	$shortcuts_menu.find('ul').append( $root_shortcuts_menu_arr(), $divider, $user_shortcuts_menu_arr(), $divider.clone(), $file_shortcuts_menu_arr(), $divider.clone(), $bookmark_this_dir, $settings_menu_item );
  189.  
  190.     // 4. Details Button
  191. 	var $details_btn = $(
  192. 		'<button id="details_btn" style="margin:1em 0.5em 0.5em;clear:both" tabindex="-1">' +
  193. 			'<span id="show">Show details</span><span id="hide" style="display:none">' +
  194. 				'Hide details' +
  195. 			'</span>' +
  196. 		'</button>'
  197. 		);
  198.  
  199.     // 5. Invisibles Checkbox
  200. 	var $inv_checkbox = $(
  201. 		'<label id="inv_checkbox" for="inv_checkbox">' +
  202. 			'<input type="checkbox" name="inv_checkbox" tabindex="-1" />' +
  203. 			'Hide Invisibles' +
  204. 		'</label>'
  205. 		);
  206.  
  207.     // 6. Image Grid Button
  208.     var $content_grid_btn = $(
  209.     	'<div id="grid_btn" style="margin:0 0 -0.5em 1em;width:16px;height:16px;display:none;position:absolute;top:1em;right:0.5em;line-height:0;cursor:pointer;outline:0;opacity:0.7;" tabindex="-1" title="Show Image Grid">' +
  210.     		'<span style="width:7px;height:7px;display:inline-block;box-sizing:border-box;border:solid 2px #666;margin-right:2px;margin-bottom:2px;"></span>' +
  211. 	    	'<span style="width:7px;height:7px;display:inline-block;box-sizing:border-box;border:solid 2px #666;margin-bottom:2px;"></span>' +
  212.     		'<span style="width:7px;height:7px;display:inline-block;box-sizing:border-box;border:solid 2px #666;margin-right:2px;"></span>' +
  213.     		'<span style="width:7px;height:7px;display:inline-block;box-sizing:border-box;border:solid 2px #666;"></span>' +
  214. 	    '</div>'
  215. 	    );
  216.  
  217.     // ASSEMBLE SIDEBAR HEADER
  218. 	var $sidebar_header = $(
  219. 		'<table id="sidebar_header" style="width:100%;position:relative;border:0;">' +
  220. 			'<thead>' +
  221. 				'<tr style="border-bottom:solid 1px grey;background-color:#BBB;">' +
  222. 					'<th colspan="3" style="padding:4px;font-weight:normal;font-size:0.875em;letter-spacing:0.5em;cursor:default;">' +
  223. 						'INDEX OF' +
  224. 					'</th>' +
  225. 				'</tr>' +
  226. 			'</thead>' +
  227. 			'<tbody>' +
  228. 				'<tr style="border-bottom:solid 1px grey;background-color:#BBB;">' +
  229. 					'<td style="width:24px;max-width:24px;min-width:24px;padding:0;"></td>' +
  230. 					'<td style="padding:0;border-left:solid 1px grey;border-right:solid 1px grey;"></td>' +
  231. 					'<td style="width:24px;max-width:24px;min-width:24px;padding:0;"></td>' +
  232. 				'</tr>' +
  233. 				'<tr>' +
  234. 					'<td colspan="3" style="position:relative;"></td>' +
  235. 				'</tr>' +
  236. 			'</tbody>' +
  237. 		'</table>'
  238. 	);
  239. 	$sidebar_header.find('tbody tr:nth-child(1)').find('td:nth-child(1)').append( $parent_dir_menu );
  240. 	$sidebar_header.find('tbody tr:nth-child(1)').find('td:nth-child(2)').append( $parents_dir_menu );
  241. 	$sidebar_header.find('tbody tr:nth-child(1)').find('td:nth-child(3)').append( $shortcuts_menu );
  242. 	$sidebar_header.find('tbody tr:last-child td').append( $details_btn, $inv_checkbox, $content_grid_btn );
  243. 	if ( platformIsWin() ) { $inv_checkbox.hide(); 	}
  244.  
  245.     // 7. Sidebar
  246.     var $sidebar = $(
  247.     	'<div id="sidebar" style="background-color:lightgray;height:100%;min-height:100%;overflow-wrap:break-word;box-sizing:border-box;border-right:solid 1px gray;font-size:0.875em;"></div>'
  248.     	);
  249.     $sidebar.append($sidebar_header);
  250.  
  251.     // 8. Resize Handle
  252.     var $handle = $(
  253.     	'<div id="handle" style="width:8px;position:absolute;top:0;right:-4px;bottom:0;z-index:1000;cursor:col-resize"></div>'
  254.     	);
  255.  
  256.     // Assemble Sidebar Elements
  257. 	var $sidebar_wrapper = $(
  258. 		'<td id="sidebar_wrapper" class="focused" style="width:25%;will-change:width;padding:0;position:relative;border:0;background:lightgray"></td>'
  259. 		);
  260. 	$sidebar_wrapper.append( $sidebar, $handle );
  261.  
  262.     // ***** END SIDEBAR ELEMENTS ***** //
  263.  
  264. 	// ***** BUILD CONTENT PANE ELEMENTS ***** //
  265.  
  266.     // 1. Edit Button Element
  267. 	var $content_edit_btn = $(
  268. 		'<td style="width:4em;padding:4px 6px 3px;vertical-align:middle;">' +
  269. 			'<button id="edit_btn" style="display:none;" tabindex="-1">Edit</button>' +
  270. 		'</td>'
  271. 		);
  272.  
  273.     // 2. Title Element
  274.     var $content_title = $(
  275.     	'<td id="content_title" style="padding:4px 1em 3px;vertical-align:middle;word-break:break-word;"></td>'
  276. 	    );
  277.  
  278.     // 3. Close Button Element
  279. 	var $content_close_btn = $(
  280. 		'<td style="width:4em;padding:4px 6px 3px;vertical-align:middle;">' +
  281. 			'<button id="close_btn" tabindex="-1">Close</button>' +
  282. 		'</td>'
  283. 		);
  284.  
  285.     // 4. Content Header Element
  286.     var $content_header = $(
  287. 	    '<header id="content_header" style="width:100%;display:none;position:absolute;top:0;right:0;left:0;z-index:200;background:lightgray;border-bottom:solid 1px #AAA;font-size:0.875em;color:#333;text-align:center;text-transform:uppercase;">' +
  288.     		'<table style="width:100%;padding:7px 12px 5px;"><tbody><tr></tr></tbody></table>' +
  289. 	    '</header>'
  290. 	    );
  291.     $content_header.find('tr').append($content_edit_btn, $content_title, $content_close_btn);
  292.  
  293.     // 5. Content Mask Element
  294.     var $content_mask = $(
  295.     	'<div id="content_mask" style="position:absolute;top:0;right:0;bottom:0;left:0;display:none;z-index:2000;"></div>'
  296.     	);
  297.     	$content_mask.css({'height':window.innerHeight + 'px'});
  298.  
  299.     // 6. Image Grid Element
  300.     var $content_grid = $(
  301.     	'<div id="content_grid" style="width:auto;padding:0;display:none;position:absolute;right:0;bottom:0;left:0;overflow:auto;background:#333;grid-gap:0;grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));grid-template-rows: repeat(auto, 150px);"></div>'
  302.     	);
  303.  
  304.     // 7. Image Element
  305.     var $image = $(
  306. 	   	'<img class="default" style="width:auto;height:auto;max-width:100%;max-height:calc(100% - 3px);cursor:zoom-in;-webkit-user-select:none;position:relative;top:50%;transform:translateY(-50%);" />'
  307.     	);
  308.     var $content_image = $(
  309. 	    '<div id="content_image" style="padding:2em;position:absolute;top:0;right:0;bottom:0;left:0;display:none;background:#333;overflow:auto;text-align:center;"></div>'
  310.     	);
  311.     $content_image.append($image);
  312.  
  313.     // 8. Pdf (embed) Element
  314.     var $content_embed = $(
  315.         '<embed id="content_embed" style="width:100%;height:100%;position:absolute;0;right:0;bottom:0;left:0;display:none;" name="plugin" id="plugin" type="application/pdf" tabindex="0"></embed>'
  316.         );
  317.  
  318.     // 9. Iframe Element
  319.     var $content_iframe = $(
  320.         '<iframe id="content_iframe" style="width:100%;height:100%;padding:0;position:absolute;top:0;right:0;bottom:0;left:0;display:none;border:0;" sandbox="allow-scripts allow-same-origin allow-modals" tabindex="0"></iframe>'
  321.     );
  322.  
  323.     // 10. Object Element
  324. //	var $content_object = $(
  325. //		'<object id="content_object" style="width:100%;height:100%;padding:0;position:absolute;top:0;right:0;bottom:0;left:0;display:none;border:0;" tabindex="0"></object>'
  326. //    );
  327.  
  328.     // 9. Next/Prev Elements
  329.     var $prev_btn = $('<div id="prev_btn" style="padding:0 1em;display:none;position:absolute;top:0;bottom:0;left:0;z-index:100;opacity:0.6;"></div>');
  330.     var $next_btn = $('<div id="next_btn" style="padding:0 1em;display:none;position:absolute;top:0;bottom:0;right:0;z-index:100;opacity:0.6;"></div>');
  331.     var $svg_arrow = 'url("data:image/svg+xml;utf8,<svg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' x=\'0px\' y=\'0px\' width=\'11px\' height=\'16px\' viewBox=\'234.5 248 11 16\' enable-background=\'new 234.5 248 11 16\' xml:space=\'preserve\'><path d=\'M245.5,261l-3,3l-8-8l8-8l3,3l-5,5L245.5,261z\'/></svg>")';
  332.     $prev_btn.css({'filter':'invert(50%)','background':$svg_arrow + ' no-repeat center'});
  333.     $next_btn.css({'filter':'invert(50%)','background':$svg_arrow + ' no-repeat center','transform':'rotate(180deg)'});
  334.  
  335.     // 10. Content container
  336. 	var $content_container = $('<section id="content_container" style="width:100%;height:100%;position:relative;top:0;overflow:visible;"></section>');
  337. 	$content_container.append( $content_header, $content_mask, $content_grid, $content_image, $content_embed, $content_iframe );
  338.  
  339.     // Assemble Content Pane Elements
  340. 	var $content_pane = $('<td id="content_pane" class="unfocused" style="width:75%;will-change:width;padding:0;border:0;background:white;position:relative;"></td>');
  341. 	$content_pane.append( $content_container, $prev_btn, $next_btn );
  342.  
  343. 	// Set content height
  344.     function setContentHeight() {
  345.         var $content_headerHeight = $content_header.outerHeight();
  346.         $content_image.css({'top':$content_headerHeight });
  347.         $content_grid.add($content_embed).add($content_iframe).css({'height':window.innerHeight - $content_headerHeight,'top':$content_headerHeight });
  348.     }
  349.     setContentHeight();
  350.  
  351.     // resize head and content header
  352.     $('window').on('resize', function() {
  353. 		headerHeight();
  354. 		setContentHeight();
  355. 	});
  356.  
  357.     // ***** END BUILD CONTENT PANE ELEMENTS ***** //
  358.  
  359.  
  360.     // ASSEMBLE MAIN CONTENT = SIDEBAR + CONTENT PANE
  361. 	var $main_content = $('<table id="main_content" style="width:100%;height:100%;border:0;"><tbody><tr></tr></tbody></table>');
  362. 	$main_content.find('tr').append( $sidebar_wrapper, $content_pane );
  363.  
  364. 	// END BUILD UI ELEMENTS
  365.  
  366.     // DEFAULT HTML, BODY STYLES
  367.  
  368.     var $body = $('body');
  369.     var $dir_table = $body.find('> table');
  370.  
  371.     $body.find('> h1:contains("Index of"),> #parentDirLinkBox,> #UI_goUp').remove();
  372. 	$body.attr('lang','en').parents('html').addBack().css({'margin':'0','padding':'0','height':'100%','font-family':'lucidagrande,"fira sans",helvetica,sans-serif','font-size':'13px','hyphens':'auto','overflow':'hidden'});
  373.     $body.prepend($main_content);
  374.  
  375.     // SETTINGS
  376.  
  377.     $settings_menu_item.find('a').on('click',function(){
  378. //        GM_config.open();
  379. //        $('#settings_dialog').css({'position':'absolute','top':'4em','left':'15%'});
  380. //        $('#settings_dialog_field_blacklist_terms').focus().add('#gnf_settings_dialog_field_blacklist_sources').css({'font-family':'monospace'});
  381. //        $('#settings_dialog_closeBtn').text('Cancel');
  382. //        return false;
  383.     });
  384.  
  385.  
  386.     // ***** SIDEBAR ***** //
  387.  
  388.     // Sidebar Variables
  389.     var $dir_table_head = $dir_table.find('thead');
  390.     var $dir_table_head_cell = $dir_table_head.find('th');
  391.     var $dir_table_head_name = $dir_table_head_cell.filter(':first-of-type');
  392.     var $dir_table_head_details = $dir_table_head_name.nextAll();
  393.     var $dir_table_body = $dir_table.find('tbody');
  394.     var $dir_table_row = $dir_table_body.find('tr');
  395.     var $dir_table_cell = $dir_table_row.find('td');
  396.     var $dir_table_item_name = $dir_table_cell.filter(':nth-of-type(1)');
  397.     var $dir_table_details = $dir_table_item_name.nextAll();
  398.     var $dir_table_link = $dir_table_item_name.find('a');
  399.  
  400. 	// ***** Sidebar Header ***** //
  401.  
  402.     // Sidebar header menus heights
  403.     function headerHeight() {
  404.         $sidebar_header.find('nav').find('*').addBack().css({'height': 'auto' });
  405.         $shortcuts_menu.find('div').add($parent_dir_menu).find('a').addBack().css({'height': ($shortcuts_menu.closest('tr').height() ) +'px' });
  406.     }
  407.     headerHeight();
  408.  
  409.     // Sidebar header menus hover styles
  410. 	$parents_dir_menu.add($shortcuts_menu).hover(function() {
  411.         $(this).find('.menu:not(:empty)').show();
  412.     }, function() {
  413.         $(this).find('.menu').hide();
  414. 	});
  415.  
  416. 	$parents_dir_menu.add($shortcuts_menu).find('li').hover(function() {
  417.         $(this).css({'background-color':'#BBB'});
  418.     }, function() {
  419.         $(this).css({'background-color':'lightgrey'});
  420. 	});
  421.  
  422.     // Sidebar header invisibles button
  423.     if ( $settings.hide_invisibles === true ) {
  424.         $inv_checkbox.find('input').prop('checked',true);
  425.     }
  426.  
  427.     $inv_checkbox.on('click', function(){
  428.     	if ( $(this).find('input').is(':checked') ) {
  429. 			$(this).find('input').prop('checked',false);
  430. 		} else {
  431. 			$(this).find('input').prop('checked',true);
  432. 		}
  433.         $('.invisible').toggle().filter('.selected').removeClass('selected');
  434.     });
  435.  
  436. 	// Sidebar header details button
  437.     $details_btn.on('click',function() {
  438.         $dir_table_details.add($dir_table_head_details).toggle();
  439.         $dir_table_body.css({'top':$dir_table_head.height() + 1 + 'px'});
  440.         $(this).find('span').toggle();
  441.     });
  442.  
  443.     // ***** Dir_table setup ***** //
  444.  
  445.     $dir_table.detach().attr('id','dir_table');
  446.  
  447.     // Dir_table styles
  448.     $dir_table.css({'width':'100%','min-width':'100px','height':'calc(100% - ' + $sidebar_header.height() + 'px)','border':'0','position':'relative','overflow':'hidden','table-layout':'fixed'});
  449.     $dir_table_head.css({'text-align':'left'});
  450.     $dir_table_head_name.css({'padding-left':'2em'});
  451.     $dir_table_head_cell.css({'padding':'0 24px 4px;'});
  452.     $dir_table_body.css({'width':'100%','position':'absolute','top':'18px','right':'0','bottom':'0','left':'0','overflow-y':'auto','outline':'0'});//.attr('tabindex','0');
  453.     $dir_table_row.css({'display':'block'});
  454.     $dir_table_cell.css({'padding':'0px'});
  455.     $dir_table_link.css({'margin':'0px','display':'block','background-size':'auto 13px','-webkit-padding-start':'2em','padding':'4px 6px 4px 24px','color':'#333','text-decoration':'none','overflow':'hidden','background-position':'6px 4px'});
  456.     $dir_table_item_name.css({'display':'block'});
  457.     $dir_table_details.add($dir_table_head_details).css({'font-size':'0.875em','text-align':'left','height':'1.5em','vertical-align':'top'}).hide();
  458.     $dir_table_details.not('th').css({'padding':'0 24px 4px'});
  459.  
  460.     // Directory Table Hover
  461.     $dir_table_row.hover(function() {
  462.         $(this).not('.selected').css({'background-color':'#BBB'});
  463.         // Highlight corresponding grid item
  464.         if ( $content_grid.hasClass('visible') ) {
  465.             var $this_href = $(this).find('a').attr('href');
  466.             $content_grid.find('a[href="' + $this_href + '"]').parent('div').css({'background':'#555'}).siblings('div:not(".selected")').css({'background':'transparent'});
  467.         }
  468.     }, function() {
  469.         $(this).not('.selected').css({'background-color':'transparent'});
  470.         if ( $content_grid.is(':visible') ) {
  471.             $content_grid.find('div:not(".selected")').css({'background':'transparent'});
  472.         }
  473.     });
  474.  
  475.     // Dir_table link arrays
  476.     var $dir_table_dir_link_arr = [];
  477.     var $dir_table_file_link_arr = [];
  478.     var $dir_table_file_ext_arr = [];
  479.     $dir_table_row.not('.ignore,.invisible').find('a').each(function() {
  480.         var $this_link = $(this).attr('href').toLowerCase();
  481.         if ( $this_link.endsWith('/') ) {
  482.             $dir_table_dir_link_arr.push($this_link);
  483.             return $dir_table_dir_link_arr;
  484.         } else {
  485.             var $this_link_ext = $this_link.slice($this_link.lastIndexOf('.'));
  486.             $dir_table_file_link_arr.push($this_link);
  487.             if ( $dir_table_file_ext_arr.indexOf($this_link_ext) < 0 ) {
  488.                 $dir_table_file_ext_arr.push($this_link_ext);
  489.             }
  490.             return $dir_table_file_link_arr, $dir_table_file_ext_arr;
  491.         }
  492.     });
  493.     // array of all dir_table links
  494.     var $dir_table_link_arr = [];
  495.     $dir_table_link_arr = $dir_table_dir_link_arr.concat($dir_table_file_link_arr);
  496.  
  497.     // array of image types
  498.     var $image_ext_arr = ['.jpg','.jpeg','.png','apng','.gif','.bmp','webp'];
  499.  
  500.     // Classify dir_table items
  501.     $dir_table_row.each(function() {
  502.  
  503.         var $this_href = $(this).find('a').text().toLowerCase();
  504.  
  505.         // Directories or files
  506.         if ( $this_href.endsWith('/') ) {
  507.             $(this).addClass('dir');
  508.         } else {
  509.             $(this).addClass('file');
  510.         }
  511. 		// pdf
  512.         if ( $this_href.endsWith('.pdf') ) {
  513.             $(this).addClass('pdf');
  514.         } else
  515.         // images
  516. 	    if ( $.inArray( $this_href.slice($this_href.lastIndexOf('.') ), $image_ext_arr ) != -1 ) {
  517.             $(this).addClass('img');
  518.         }
  519.  
  520.         // invisibles
  521.         if ( $this_href.startsWith('.') ) {
  522.             $(this).addClass('invisible');
  523.             if ( $settings.hide_invisibles === true ) {
  524.                 $(this).hide();
  525.             }
  526.         }
  527.         // ignored
  528.         if ( $settings.ignoreFiles === true ) {
  529.             for ( var i = 0; i < $settings.ignoreFile_types.length; i++ ) {
  530.                 if ( $this_href.endsWith( $settings.ignoreFile_types[i] ) ) {
  531.                     $(this).addClass('ignore').find('a').css({'color':'#888'});
  532.                     if ( $settings.show_ignored_files === false ) {
  533.                         $(this).hide();
  534.                     }
  535.                 }
  536.             }
  537.         }
  538.         // directories as Files and hide ignored files
  539.         if ( $settings.apps_as_dirs === false ) {
  540.             if ( $this_href.endsWith('.app/') ) {
  541.                 $(this).addClass('ignore app').find('a').css({'color':'#888'});
  542.                 var $app_name = $(this).find('a').text().slice(0,-1);
  543.                 $(this).find('a').text($app_name);
  544.             }
  545.         }
  546.     }); // end classify dir_table items
  547.  
  548.     $dir_table.appendTo('#sidebar');
  549.  
  550.     // ***** End dir_table setup ***** //
  551.  
  552.     // ***************************** //
  553.  
  554.     // ***** SHOW/HIDE CONTENT ***** //
  555.  
  556.     function setContentTitle(el) {
  557.         if ( el == $content_grid ) {
  558.             $content_title.empty().prepend('Images from: /' + $current_dir_name);
  559.         } else {
  560.             $content_title.empty().prepend( $('.selected').find('a').text() );
  561.         }
  562.         if ( $('.selected').hasClass('ignore') ) {
  563.             $content_title.append(' (Ignored content)' );
  564.         }
  565.     }
  566.  
  567.     function getDimensions(link, callback) {
  568.         var img = new Image();
  569.         img.src = link;
  570.         img.onload = function() { callback( this.width, this.height ); };
  571.     }
  572.  
  573.     function showThis(el,link) {
  574.         if ( el == $content_image ) {
  575.             el.find('img').attr('src',link);
  576.             getDimensions( link, function( width, height ) {
  577.                 $content_title.append(' <span style="text-transform:lowercase;">(' + width + 'px &times; ' + height + 'px</span>)' );
  578.             });
  579.         } else if ( el == $content_embed ) {
  580.             el.attr('type','application/pdf').attr('src',link + '?#zoom=100&scrollbar=1&toolbar=1&navpanes=1');
  581.         } else {
  582.             el.attr('src',link);
  583.         }
  584.         unhideThis(el);
  585.     }
  586.  
  587.     function showContentHeader() {
  588. 	    $content_header.css({'display':'table'});
  589. 	}
  590.  
  591.     function showPrevNextBtns() {
  592.         if ( $dir_table.find('.img').length > 1 ) {
  593.             $prev_btn.add($next_btn).css({'display':'block'});
  594.         }
  595.     }
  596.  
  597.     function hidePrevNextBtns() {
  598.         $prev_btn.add($next_btn).css({'display':'none'});
  599.     }
  600.  
  601.     function hideThis(el) {
  602.         el.removeClass('visible').addClass('hidden').css({'z-index':'-1'}).hide();
  603.     }
  604.  
  605.     function unhideThis(el) {
  606.         el.removeClass('hidden').addClass('visible').css({'z-index':'auto'});
  607.         if ( el == $content_grid ) {
  608.             el.css({'display':'grid'});
  609.             showPrevNextBtns();
  610.         } else if ( el == $content_image) {
  611.             el.show();
  612.             showPrevNextBtns();
  613.         } else {
  614.             el.show();
  615.         }
  616.         setContentTitle(el);
  617.         showContentHeader();
  618.     }
  619.  
  620.     function closeThis(el) {
  621.         if ( el == $content_grid ) {
  622.             $content_grid.hide().empty();
  623.         } else if ( el == $content_image ) {
  624.             $content_image.hide().find('img').removeAttr('src');
  625.         } else {
  626.             el.removeClass('visible').hide().removeAttr('src');
  627.             hidePrevNextBtns();
  628.             $content_header.hide();
  629.         }
  630.     }
  631.  
  632.     function emptyContentPane() {
  633.         closeThis($content_image);
  634.         closeThis($content_embed);
  635.         closeThis($content_iframe);
  636.     }
  637.  
  638.     $content_close_btn.on('click',function() {
  639.  
  640.         var $visible = $content_container.find('.visible');
  641.         var $hidden = $content_container.find('.hidden');
  642.  
  643.         if ( $visible == $content_grid && ( $hidden == $content_iframe || $hidden == $content_embed ) ) {
  644.             var $this_content_src = $hidden.attr('src');//.replace(/%20/g,' ');
  645.             $dir_table.find('a[href*="' + $this_content_src + '"]').each(function() {
  646.                 $(this).click();
  647.             });
  648.         } else if ( $visible == $content_image && $hidden == $content_grid ) {
  649.             $content_grid.find('a[href="' + $dir_table.find('.selected').find('a').attr('href') + '"]').parent('div').addClass('selected').css({'background':'#666'}).siblings('div').removeClass('selected').css({'background':'transparent'});
  650.         }
  651.         closeThis( $visible );
  652.         if ( $hidden.length ) {
  653.             unhideThis($hidden);
  654.         }
  655.         scrollSidebar();
  656.  
  657.     });
  658.  
  659.     // ***** MAIN CLICK FUNCTION FOR SHOWING CONTENT ***** //
  660.  
  661.     $dir_table_row.on('click','a',function(e) {
  662.  
  663.         var $this_row = $(this).closest('tr');
  664.         var $this_link = 'file://' + $(this).attr('href');
  665.         $this_link = $this_link.slice($this_link.lastIndexOf('/') + 1 );
  666.  
  667.         if ( $sidebar_wrapper.hasClass('unfocused') ) {
  668. 			sidebarFocus();
  669. 		}
  670.  
  671.         // if app, ignore or treat as directory
  672.         if ( $this_row.hasClass('app') && $settings.apps_as_dirs === false ) {
  673.             e.preventDefault();
  674.         } else if ( $this_row.hasClass('dir') ) {
  675.             return;
  676.         } else {
  677.             e.preventDefault();
  678.  
  679.             selectItem($this_row);
  680.  
  681.             if ( $content_grid.hasClass('visible') ) {
  682.                 hideThis($content_grid);
  683. 			}
  684.             if ( $this_row.hasClass('ignore') ) {
  685.                 emptyContentPane();
  686.                 showContentHeader();
  687.             } else if ( $this_row.hasClass('img') ) {
  688.                 closeThis($content_embed);
  689.                 closeThis($content_iframe);
  690.                 showThis($content_image,$this_link);
  691.                 showPrevNextBtns();
  692.             } else if ( $this_row.hasClass('pdf') ) {
  693.                 emptyContentPane();
  694.                 showThis($content_embed,$this_link);
  695.             } else { // iframe
  696.                 emptyContentPane();
  697.                 showThis($content_iframe,$this_link);
  698. 			}
  699.         }
  700.         setContentTitle();
  701.     	setContentHeight();
  702.     });
  703.  
  704.     // File shortcuts: load directory then auto-select file
  705.     $('.file_shortcut').on('click',function(e) {
  706.     	e.preventDefault();
  707.     	var $this_link = $(this).attr('href');
  708.             var $this_dir = $this_link.slice(0,$this_link.lastIndexOf('/') );
  709.             window.location = $this_dir;
  710. 	});
  711.  
  712.     // END MAIN CLICK FUNCTIONS
  713.  
  714.     // Auto-select file from file shortcut list;
  715.     // Limitations: only loads last file from list found in directory, doesn't know anything about which actual file shortcut was selected
  716.     function autoSelectFile() {
  717.         if ( $settings.file_shortcuts.length ) {
  718.             for ( var i = 0; i < $settings.file_shortcuts.length; i++ ) {
  719.                 if ( $.inArray($settings.file_shortcuts[i], $dir_table_link_arr ) ) {
  720.                     $dir_table.find( 'a[href*="/' + $settings.file_shortcuts[i] + '"]').click();
  721.                 }
  722.             }
  723.         }
  724.     }
  725.     autoSelectFile();
  726.  
  727.     function selectItem(el) {
  728.         $(el).addClass('selected').css({'background-color':'lightsteelblue'}).find('a').css({'font-weight':'bold','color':'#333'});
  729.         $(el).siblings().removeClass('selected').css({'background-color':'transparent'}).find('a').css({'font-weight':'normal'});
  730.         $(el).siblings('.ignore').find('a').css({'color':'#888'});
  731.         // select grid item
  732.         var $selected_link = $(el).find('a').attr('href');
  733.         $content_grid.find('a[href="' + $selected_link + '"]').parent('div').addClass('selected').css({'background':'#666'}).siblings().removeClass('selected').css({'background':'transparent'});
  734.         scrollSidebar();
  735.         scrollGrid();
  736.     }
  737.  
  738.     function selectBlur(el) { $(el).css({'background-color':'#BBB'}).find('a').css({'font-weight':'normal','color':'#444'}); }
  739.  
  740.     function sidebarFocus() {
  741.         $sidebar_wrapper.removeClass('unfocused').addClass('focused');
  742.         $content_pane.removeClass('focused').addClass('unfocused');
  743.         selectItem('.selected');
  744.     }
  745.  
  746.     function contentFocus() {
  747.         $sidebar_wrapper.removeClass('focused').addClass('unfocused');
  748.         $content_pane.removeClass('unfocused').addClass('focused');
  749.         if ( $content_image.find('img').attr('src') !== undefined ) {
  750.            $content_image.focus();
  751.         }
  752.         selectBlur('.selected');
  753.     }
  754.  
  755.     function scrollGrid() {
  756.         if ( $content_grid.hasClass('visible') && $content_grid.find('.selected').length ) {
  757.             $content_grid.find('.selected')[0].scrollIntoView({ behavior:'smooth',block:'nearest',inline:'nearest' });
  758.         }
  759.     }
  760.     function scrollSidebar() {
  761.         if ( $sidebar.find('.selected').length ) {
  762.             $sidebar.find('.selected')[0].scrollIntoView({ behavior:'smooth',block:'nearest',inline:'nearest' });
  763.         }
  764.     }
  765.  
  766.     // Zoom Images
  767.     $content_image.find('img').on('click',function() {
  768.         if ( $(this).hasClass('default') ) {
  769.             $(this).removeClass('default').css({'max-width':'','max-height':'','cursor':'zoom-out','top':'0','transform':'translateY(0%)'});
  770.         } else {
  771.             $(this).addClass('default').css({'max-width':'100%','max-height':'calc(100% - 3px)','cursor':'zoom-in','top':'50%','transform':'translateY(-50%)'});
  772.         }
  773.     });
  774.  
  775.     // Focus content pane on click
  776.     $content_image.add($content_iframe).add($content_embed).on('click',function() {
  777.         contentFocus();
  778.     });
  779.  
  780.     // ***** KEYBOARD EVENTS ***** //
  781.  
  782.     $body.on('keydown',$dir_table,function(e) {
  783.  
  784.         $dir_table_row = $dir_table_row.filter(':visible');
  785.         var $selected = $dir_table_row.filter('.selected');
  786.         var $selected_href = $selected.find('a').attr('href');
  787.         var $first_item = $dir_table_row.first();
  788.         var $last_item = $dir_table_row.last();
  789.         var $prev_item = $selected.prevAll('tr:visible').first();
  790.         var $next_item = $selected.nextAll('tr:visible').first();
  791.         var $prev_image = $selected.prevAll('tr.img:visible').first();
  792.         var $next_image = $selected.nextAll('tr.img:visible').first();
  793.  
  794.         switch ( e.key ) {
  795.  
  796.             case 'ArrowUp':
  797.  
  798.                 // Go to parent folder
  799.                 if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) ) {
  800.                     window.location = $parent_dir_link;
  801.                     break;
  802.                 }
  803.  
  804.                 // Default action when content pane is focused
  805.                 if ( $sidebar_wrapper.hasClass('unfocused') ) {
  806.                     return;
  807.                 }
  808.  
  809.                 if ( $first_item.hasClass('selected') ) {
  810.                     break;
  811.                 } else if ( $selected.length < 1 && $last_item.hasClass('dir') ) {
  812.                     emptyContentPane();
  813.                     selectItem($last_item);
  814.                 } else if ( $prev_item.length && $prev_item.hasClass('dir') ) {
  815.                     emptyContentPane();
  816.                     selectItem($prev_item);
  817.                 } else if ( $selected.length < 1 ) {
  818.                     $last_item.find('a').click();
  819.                 } else {
  820.                     e.preventDefault();
  821.                     $prev_item.find('a').click();
  822.                 }
  823.                 break;
  824.  
  825.             case 'ArrowDown':
  826.  
  827.                 if ( (e.ctrl || e.metaKey) && $selected.hasClass('app') && $settings.apps_as_dirs === false ) {
  828.                     return;
  829.                 } else if ( $sidebar_wrapper.hasClass('unfocused') ) {
  830. 					return;
  831. 				} else if ( (e.ctrl || e.metaKey) && $selected.hasClass('dir') ) {
  832.                     window.location = $selected_href;
  833.                     break;
  834.                 }
  835.  
  836.                 if ( $last_item.hasClass('selected') ) {
  837.                     e.preventDefault();
  838.                 } else if ( $selected.length < 1 && $first_item.hasClass('dir') ) {
  839.                     selectItem($first_item);
  840.                 } else if ( $selected.length < 1 ) {
  841.                     $first_item.find('a').click();
  842.                 } else if ( $next_item.length > 0 && $next_item.hasClass('dir') ) {
  843.                     e.preventDefault();
  844.                     emptyContentPane();
  845.                     selectItem($next_item);
  846.                 } else {
  847.                     e.preventDefault();
  848.                     $next_item.find('a').click();
  849.                 }
  850.                 break;
  851.  
  852.             case 'ArrowLeft':
  853.  
  854.                 if ( (e.ctrl || e.metaKey) || ( e.ctrl && e.metaKey ) ) {
  855.                     return;
  856.                 } else if ( $sidebar_wrapper.hasClass('unfocused') ) {
  857. 					return;
  858.                 }
  859.                 // Navigate Grid or Images
  860.                 if ( $content_grid.hasClass('visible') ) {
  861. 	                if ( $selected.length < 1 ) {
  862. 	                    selectItem($dir_table_row.last('.img') );
  863.     	            } else {
  864.         	            selectItem($prev_image);
  865.                 	}
  866.                 } else if ( $content_image.hasClass('visible') ) {
  867.                     $prev_image.find('a').click();
  868.                 }
  869.                 break;
  870.  
  871.             case 'ArrowRight':
  872.  
  873.                 if ( (e.ctrl || e.metaKey) || ( e.ctrl && e.metaKey ) ) {
  874.                     return;
  875.                 } else if ( $sidebar_wrapper.hasClass('unfocused') ) {
  876. 					return;
  877.                 }
  878.                 // Navigate Grid or Images
  879.                 if ( $content_grid.hasClass('visible') ) {
  880. 	                if ( $selected.length < 1 ) {
  881. 	                    selectItem($dir_table_row.first('.img') );
  882.     	            } else {
  883.         	            selectItem($next_image);
  884.                 	}
  885.                 } else if ( $content_image.hasClass('visible') ) {
  886.                     $next_image.find('a').click();
  887.                 } else // Open directory
  888.                 if ( $selected.hasClass('dir') ) {
  889.                     window.location = $selected_href;
  890.                 }
  891.                 break;
  892.  
  893.             case 'Enter':
  894.                 // Open directories (or ignore)
  895.                 if ( $selected.hasClass('app') && $settings.apps_as_dirs === false ) {
  896.                     break;
  897.                 } else if ( $selected.hasClass('dir') ) {
  898.                     window.location = $selected_href;
  899.                 } else if ( $selected.hasClass('file') ) {
  900.                     $selected.find('a').click();
  901.                 } else {
  902.                     return;
  903.                 }
  904.                 break;
  905.  
  906.             case 'i':
  907.                 // Toggle Invisibles with Command-i
  908.                 if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) ) {
  909.                     e.preventDefault();
  910.                     e.stopPropagation();
  911.                     $inv_checkbox.click();
  912.                 }
  913.                 break;
  914.  
  915.             case 'w':
  916.                 // Close content pane if Close button visible with Command-w
  917.                 if ( (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) && $content_close_btn.is(':visible') ) {
  918.                     e.preventDefault();
  919.                     e.stopPropagation();
  920.                     $content_close_btn.click();
  921.                 }
  922.                 break;
  923.  
  924.             case 'Tab':
  925.                 // Tab cannot blur focussed iframe
  926.                 $(':focus').blur();
  927.                 if ( $sidebar_wrapper.hasClass('focused') ) {
  928.                     contentFocus();
  929.                 } else if ( $sidebar_wrapper.hasClass('unfocused') ) {
  930.                     $('.selected').click();
  931.                     sidebarFocus();
  932.                 }
  933.                 break;
  934.  
  935.         } // end switch
  936.  
  937.         // Show Grid: Cmd/Ctrl + g, with override for default browser binding
  938.         if ( e.key == "g" && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) ) {
  939.             $content_grid_btn.click();
  940.             e.preventDefault();
  941.             e.stopPropagation();
  942.         }
  943.     });
  944.  
  945.     // ***** END KEYBOARD EVENTS ***** //
  946.  
  947.     // ***** IMAGE NAVIGATION ***** //
  948.  
  949.     $prev_btn.on('mouseenter',function() {
  950.         $(this).css({'opacity':'1'});
  951.     }).on('mouseleave',function() {
  952.         $(this).css({'opacity':'0.6'});
  953.     });
  954.  
  955.     $next_btn.on('mouseenter',function() {
  956.         $(this).css({'opacity':'1'});
  957.     }).on('mouseleave',function() {
  958.         $(this).css({'opacity':'0.6'});
  959.     });
  960.  
  961. 	$prev_btn.on( 'click', function(event) {
  962.         var e = $.Event("keydown");
  963.         e.key = 'ArrowLeft';
  964.         $dir_table.trigger(e);
  965.     });
  966.  
  967. 	$next_btn.on( 'click', function(event) {
  968.         var e = $.Event("keydown");
  969.         e.key = 'ArrowRight';
  970.         $dir_table.trigger(e);
  971.     });
  972.  
  973.     // Edit Button -- not implemented
  974. //    $content_edit_btn.on('click',function() {
  975. //        var $selected_url = $('.selected').find('a').attr('href');
  976. //        window.open($selected_url);
  977. //    });
  978.  
  979.     // GRID BUTTON & IMAGE GRID
  980.     // Show grid button only if images are found in directory
  981.     function show_grid_btn() {
  982.         for (var i = 0; i < $image_ext_arr.length; i++ ) {
  983.             if ( $dir_table_file_ext_arr.indexOf($image_ext_arr[i]) != -1 ) {
  984.                 $content_grid_btn.show();
  985.             }
  986.         }
  987.     }
  988.     show_grid_btn();
  989.  
  990.     // Grid Button Hover
  991.     $content_grid_btn.hover(function() {
  992.         $(this).css({'opacity':1});
  993.     }, function() {
  994.         $(this).css({'opacity':0.7});
  995.     });
  996.  
  997.     // create grid items
  998.     var $grid_items_arr = [];
  999.     function gridItems() {
  1000.         $dir_table_link.each(function() {
  1001.             var $this_link = $(this).attr('href');
  1002.             var $this_ext = $this_link.toLowerCase().slice($this_link.lastIndexOf('.'));
  1003.             var $grid_item_el = $(
  1004.             	'<div class="grid_item" style="display:inline-block;width:150px;height:150px;float:left;text-align:center;vertical-align:middle;">' +
  1005.             		'<a href="">' +
  1006.             			'<img src="" style="width:auto;height:auto;max-width:128px;max-height:128px;position:relative;top:50%;transform:translateY(-50%);opacity:0.8;" />' +
  1007. 	            	'</a>' +
  1008. 	            '</div>'
  1009. 	            );
  1010.             if ( $.inArray($this_ext,$image_ext_arr) != -1 ) {
  1011.             	$grid_item_el.find('a').attr('href',$this_link).find('img').attr('src',$this_link);
  1012.                 $grid_items_arr.push($grid_item_el);
  1013.             }
  1014.             return $grid_items_arr;
  1015.         });
  1016.     }
  1017.  
  1018.     // Grid Button Click
  1019.     $content_grid_btn.on('click',function() {
  1020.         $content_grid.empty();
  1021.  
  1022.         gridItems();
  1023.         $content_grid.append( $grid_items_arr );
  1024.         // end create grid items
  1025.  
  1026. 		selectItem( $dir_table.find('.selected') );
  1027.         hideThis($('.visible') );
  1028.         unhideThis($content_grid);
  1029.         setContentHeight();
  1030.     });
  1031.  
  1032.     // GRID ITEMS
  1033.     // Grid Item Hover
  1034.     $content_grid.on('mouseenter','> div:not(".selected")',function() {
  1035.         var $this_link = $(this).find('a').attr('href');
  1036.         $(this).css({'background':'#555'});
  1037.         $dir_table.find('a[href="' + $this_link + '"]').css({'background':'#BBB'});
  1038.     }).on('mouseleave','> div:not(".selected")',function() {
  1039.         var $this_link = $(this).find('a').attr('href');
  1040.         $(this).css({'background':'transparent'});
  1041.         $dir_table.find('a[href="' + $this_link + '"]').css({'background':'transparent'});
  1042.     });
  1043.  
  1044.     // Grid Item Click
  1045.     $content_grid.on('click','> div',function(e) {
  1046.         e.preventDefault();
  1047.         var $this_link = $(this).find('a').attr('href');
  1048.         $dir_table.find('a[href="' + $this_link + '"]').click();
  1049.     });
  1050.  
  1051.  
  1052.     // ***** END IMAGE GRID ***** //
  1053.  
  1054.     // Resize Sidebar/Content Pane
  1055. 	$handle.on('mousedown',function(f) {
  1056.         f.stopPropagation();
  1057.         var $startX = f.pageX;
  1058.         var $sidebar_width = $sidebar_wrapper.width();
  1059.         var $window_width = window.innerWidth;
  1060.         $content_mask.show(); // needed to prevent interactions with iframe
  1061.         $sidebar_wrapper.css({'-webkit-user-select':'none','-moz-user-select':'none','user-select':'none'});
  1062.  
  1063.         $(document).on('mousemove',function(e) {
  1064.             e.stopPropagation();
  1065.             var $deltaX = e.pageX - $startX;
  1066.             if ( e.pageX > 200 && e.pageX < $window_width - 200 ) {
  1067.                 $sidebar_wrapper.css({'width':$sidebar_width + $deltaX + 'px'});
  1068.                 $content_pane.css({'width':($window_width - $sidebar_width) - $deltaX + 'px'});
  1069.             }
  1070.             headerHeight();
  1071.             setContentHeight();
  1072. 		});
  1073.         $(document).on('mouseup',function() {
  1074.             $content_mask.hide();
  1075.             $sidebar_wrapper.css({'-webkit-user-select':'auto','-moz-user-select':'auto','user-select':'auto'});
  1076.             $(document).off('mousemove');
  1077.         });
  1078.     });
  1079.  
  1080. })();