Release h5ai v0.27.0.

Added checkboxes selection without mouse option.

.editorconfig

@@ -0,0 +1,34 @@
+# editorconfig.org
+
+root = true
+
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+
+[.travis.yml]
+indent_style = space
+indent_size = 2
+
+
+[*.md]
+trim_trailing_whitespace = false
+
+
+[*.jade]
+trim_trailing_whitespace = false
+
+
+[*.svg]
+insert_final_newline = false

.gitignore

@@ -1,20 +1,4 @@
-
-# Build folders to ignore
 build
-build.local.*
-release
-
-# Sublime
-*.sublime-*
-
-# Numerous always-ignore extensions
-*.diff
-*.err
-*.orig
-*.log
-*.rej
-*.swo
-*.swp
-*.vi
-*~
-*.sass-cache
+local
+node_modules
+test

.jscs.json

@@ -0,0 +1,2 @@
+{
+}

CHANGELOG.md

@@ -0,0 +1,513 @@
+# Changelog
+
+
+## v0.27.0 - *2015-04-06*
+
+* new layout
+* adds editorconfig
+* drops support for IE9 (gets fallback)
+* updates sidebar settings
+* adds info sidebar
+* adds opt-out for click'n'drag selection
+* adds package name option for single selections
+* adds initial support for Peer5
+* adds option to down-sample images for preview
+* adds option for natural sorting in tree sidebar
+* fixes problems with files/folders named `0`
+* changes font from `Ubuntu` to `Roboto` (smaller footprint, clearer for small sizes)
+* switches back to Google Fonts
+* improves PDF thumbnail quality
+* improves drag-select
+* improves image preview
+* prevents listing `_h5ai` folder and subfolders
+* updates build process, now uses [mkr](http://larsjung.de/mkr/) and [fQuery](http://larsjung.de/fquery/)
+* updates `jQuery` to 2.1.3
+* updates `jQuery.qrcode` to 0.11.0
+* updates `Lo-Dash` to 3.6.0
+* updates `Modernizr` to 2.8.3
+* updates `modulejs` to 1.4.0
+* updates `Moment.js` to 2.9.0
+* updates `Prism` to 2015-04-05
+* removes deprecated Google Analytics code
+* removes `jQuery.fracs`
+* removes `jQuery.scrollpanel`
+* removes `jQuery.mousewheel`
+* language updates and additions (`af`, `es`, `ja`, `ko`, `ru`, `zh-cn`)
+
+
+## v0.26.1 - *2014-08-17*
+
+* fixes links
+
+
+## v0.26.0 - *2014-08-16*
+
+* removes True Type fonts
+* outsources themes to [h5ai-themes](https://github.com/lrsjng/h5ai-themes)
+* adds filesize fallback for large files and 32bit PHP
+* fixes server detection
+* adds config file tests to info page
+* removes JSON shim
+* adds caching of command checks
+* updates `jQuery.mousewheel` to 3.1.12
+* updates `jQuery.qrcode` to 0.8.0
+* replaces `markdown` with [`marked`](https://github.com/chjj/marked) 0.3.2
+* updates `modulejs` to 0.4.5
+* updates `Moment.js` to 2.8.1
+* replaces `underscore` with [`Lo-Dash`](https://github.com/lodash/lodash) 2.4.1
+* replaces `SyntaxHighlighter` with [`Prism`](http://prismjs.com) 2014-08-04
+
+
+## v0.25.2 - *2014-07-01*
+
+* adds optional info page protection
+* fixes `short_open_tag` issues for PHP < 5.4.0
+* fixes default folder download (`alwaysVisible` option)
+* minor fixes
+
+
+## v0.25.1 - *2014-06-25*
+
+* fixes broken paths for filenames containing '+' characters
+* fixes Google Universal Analytics
+* fixes file type check
+
+
+## v0.25.0 - *2014-06-22*
+
+* adds sidebar
+* adds initial theme support
+* adds icons from [Evolvere Icon Theme](http://franksouza183.deviantart.com/art/Evolvere-Icon-theme-440718295)
+* adds PHP variant to calc folder sizes
+* adds scroll position reset on location change (issue [#279](https://github.com/lrsjng/h5ai/issues/279))
+* adds option to hide unreadable files
+* adds option where to place folders (top, inplace, bottom)
+* adds markdown support for custom header and footer files
+* adds video and audio preview via HTML5 elements (no fallback, works best in Chrome)
+* adds filter reset on location change
+* adds option to make download button always visible
+* adds Google UA support
+* extends selectable icon sizes (adds 128px, 192px, 256px, 384px)
+* improves preview GUI
+* disable thumbs in `cache` folder
+* fixes QR code URI origin (issue [#287](https://github.com/lrsjng/h5ai/issues/287))
+* replaces PHP backtick operator with `exec`
+* removes server side file manipulation extensions `dropbox`, `delete` and `rename`
+* updates `H5BP` to 4.3.0
+* updates `jQuery` to 2.1.1
+* updates `json2.js` to 2014-02-04
+* updates `markdown-js` to 0.5.0
+* updates `Modernizr` to 2.8.2
+* updates `Moment.js` to 2.6.0
+* updates `Underscore.js` to 1.6.0
+* language updates (`bg`, `ko`, `pt`, `sl`, `sv`, `zh-cn`)
+
+
+## v0.24.1 - *2014-04-09*
+
+* security fixes! (issues [#268](https://github.com/lrsjng/h5ai/issues/268), [#269](https://github.com/lrsjng/h5ai/issues/269))
+* language updates (`fi`, `fr`, `hi`, `it`, `zh-tw`)
+* fixes WinOS command detection
+
+
+## v0.24.0 - *2013-09-04*
+
+* updates image and text preview
+* adds variable icon sizes
+* adds optional natural sort of items
+* adds optional checkboxes to select items
+* adds text preview modes: none, fixed, markdown
+* optionally hide folders in main view
+* makes use of EXIF thumbnails optional
+* fixes file deletion of multiple files
+* fixes `setParentFolderLabels = false`
+* fixes shell-arg and RegExp escape issues
+* cleans code
+* updates info page `/_h5ai`
+* adds `aiff` to `audio` types
+* adds `da` translation by Ronnie Milbo
+* updates to `pl` translation by Mark
+
+
+## v0.23.0 - *2013-07-21*
+
+* removes `aai` mode!
+* drops support for IE7+8 (simple fallback, same as no javascript)
+* uses History API if available (way faster browsing)
+* faster thumbnail generation if EXIF thumbnails available
+* adds optional custom headers/footers that are propageted to all subfolders
+* optional hide parent folder links
+* some fixes on previews
+* speeds up packaged downloads
+* add line wrap and line highlighting (on hover) to text preview
+* new design (colors, images)
+* now uses scalable images for the interface
+* fixes filter (ignore parent folder, display of `no match`)
+* lots of small fixes
+* updates `H5BP` to 4.2.0
+* updates `jQuery` to 2.0.3
+* updates `jQuery.mousewheel` to 3.1.3
+* updates `Moment.js` to 2.1.0
+* updates `markdown-js` to 0.4.0-9c21acdf08
+* updates `json2.js` to 2013-05-26
+* adds `uk` translation by Viktor Matveenko
+* updates to `pl` translation by Mark
+
+
+## v0.22.1 - *2012-10-16*
+
+* bug fix concerning API requests in PHP mode
+* minor changes in responsive styles
+
+
+## v0.22 - *2012-10-14*
+
+* general changes h5ai directory layout and configuration
+* splits configuration file (`config.json`) into files `options.json`, `types.json` and `langs.json`
+* localization now in separate files
+* adds auto-refresh
+* adds drag'n'drop upload (PHP, experimental)
+* adds file deletion (PHP, experimental)
+* cleans and improves PHP code
+* PHP no longer respects htaccess restrictions (so be careful)
+* PHP ignore patterns might include paths now
+* improves separation between aai and php mode
+* improves performance in aai mode
+* adds optional binary prefixes for file sizes
+* improves filter: autofocus on keypress, clear on `ESC`
+* download packages now packaged relative to current folder
+* download package name changable
+* splits type `js` into `js` and `json`
+* prevents some errors with files > 2GB on 32bit OS
+* adds max subfolder size in tree view
+* adds ctrl-click file selection
+* adds Piwik analytics extension
+* temp download packages are now stored in the `cache`-folder and deleted as soon as possible
+* updates translations
+* adds `he` translation by [Tomer Cohen](https://github.com/tomer)
+* updates 3rd party libs
+
+
+## v0.21 - *2012-08-06*
+
+* fixes misaligned image previews
+* adds no JavaScript fallback to PHP version
+* fixes duplicate tree entries and empty main views
+* adds Google Analytics support (async)
+* improves filter (now ignorecase, now only checks if chars in right order)
+* adds keyboard support to image preview (space, enter, backspace, left, right, up, down, f, esc)
+* adds text file preview and highlighting with [SyntaxHighlighter](http://alexgorbatchev.com/SyntaxHighlighter/) (same keys as img preview)
+* adds Markdown preview with [markdown-js](https://github.com/evilstreak/markdown-js)
+* adds new type `markdown`
+* changes language code `gr` to `el`
+* adds localization for filter placeholder
+* adds `hu` translation by [Rodolffo](https://github.com/Rodolffo)
+* updates to [jQuery.qrcode](http://larsjung.de/qrcode/) 0.2
+* updates to [jQuery.scrollpanel](http://larsjung.de/scrollpanel/) 0.1
+* updates to [modulejs](http://larsjung.de/modulejs/) 0.2
+* updates to [Moment.js](http://momentjs.com) 1.7.0
+* updates to [Underscore.js](http://underscorejs.org) 1.3.3
+
+
+## v0.20 - *2012-05-11*
+
+* adds image preview
+* adds thumbnails for video and pdf
+* adds support for lighttpd, nginx and cherokee and maybe other webservers with PHP
+* adds folder size in PHP version via shell `du`
+* fixes some localization problems
+* updates info page at `/_h5ai/`
+* switches to JSHint
+
+
+## v0.19 - *2012-04-19*
+
+* adds lots of config options
+* changes in `config.js` and `h5ai.htaccess`
+* fixes js problems in IE 7+8
+* hides broken tree view in IE < 9, adds a message to the footer
+* removes hash changes since they break logical browser history
+* fixes thumbnail size for portrait images in icon view
+* fixes problems with file type recognition
+* adds an info page at `/_h5ai/`
+* sort order is preserved while browsing
+* removes PHP error messages on thumbnail generation
+* fixes PHP some problems with packed download
+* adds support for tarred downloads
+* changes crumb image for folders with an index file
+* adds `index.php` to use h5ai in non-Apache environments
+* switches from [Datejs](http://www.datejs.com) to [Moment.js](http://momentjs.com)
+* adds [underscore.js](http://underscorejs.org)
+* fixes mousewheel problems, updates [jQuery.mousewheel](https://github.com/brandonaaron/jquery-mousewheel) to 3.0.6
+* updates `lv` translation
+* adds `ro` translation by [Jakob Cosoroabă](https://github.com/midday)
+* adds `ja` translation by [metasta](https://github.com/metasta)
+* adds `nb` translation by [Sindre Sorhus](https://github.com/sindresorhus)
+* adds `sr` translation by [vBm](https://github.com/vBm)
+* adds `gr` translation by [xhmikosr](https://github.com/xhmikosr)
+
+
+## v0.18 - *2012-02-24*
+
+* adds optional QRCode display
+* adds optional filtering for displayed files and folders
+* updates design
+* improves zipped download
+* adds support for zipped download of htaccess restricted files
+* changes h5ai.htaccess
+* custom headers/footers are now optional and disabled by default
+* fixes problems with folder recognition in the JS version
+* fixes include problems in PHP version
+* fixes path problems on servers running on Windows in PHP version
+* fixes broken links in custom headers/footers while zipped download enabled
+* fixes problems with thumbnails for files with single or double quotes in filename
+* improves url hashes
+* updates year in `LICENSE.TXT`
+* updates es translation
+* adds `zh-tw` translation by [Yao Wei](https://github.com/medicalwei)
+* updates `zh-cn` translation
+
+
+## v0.17 - *2011-11-28*
+
+* h5ai is now located in `_h5ai` to reduce collisions
+* switches from HTML5 Boilerplate reset to normalization
+* adds some style changes for small devices
+* configuration (options, types, translations) now via `config.js`
+* icons for JS version are now configured via `config.js`
+* sort order configuration changed
+* sorting is now done without page reload
+* adds `customHeader` and `customFooter` to `config.js`
+* supports restricted folders to some extent
+* some style changes on tree and language menu
+* fixes total file/folder count in status bar
+* adds support for use with userdir (requires some manual changes)
+
+
+## v0.16 - *2011-11-02*
+
+* sorts translations in `options.js`
+* improves HTML head sections
+* refactors JavaScript and PHP a lot
+* improves/fixes file selection for zipped download
+* fixes scrollbar and header/footer link issues (didn't work when zipped download enabled)
+* adds support for ctrl-select
+* `dateFormat` in `options.js` changed, now affecting JS and PHP version
+* `dateFormat` is localizable by adding it to a translation in `options.js`
+* PHP version is now configurable via `php/config.php` (set custom doc root and other PHP related things)
+* image thumbs and zipped download is disabled by default now, but works fine if PHP is configured
+
+
+## v0.15.2 - *2011-09-18*
+
+* adds `it` translation by [Salvo Gentile](https://github.com/SalvoGentile) and [Marco Patriarca](https://github.com/Fexys)
+* switches build process from scripp to wepp
+
+
+## v0.15.1 - *2011-09-06*
+
+* fixes security issues with the zipped download feature
+* makes zipped download optional (but enabled by default)
+
+
+## v0.15 - *2011-09-04*
+
+* adds zipped download for selected files
+* cleans and refactores
+
+
+## v0.14.1 - *2011-09-01*
+
+* display meta information in bottom bar (icon view)
+* adds `zh-cn` translation by [Dongsheng Cai](https://github.com/dongsheng)
+* adds `pl` translation by Radosław Zając
+* adds `ru` translation by Богдан Илюхин
+
+
+## v0.14 - *2011-08-16*
+
+* adds image thumbnails for PHP version
+* new option `slideTree` to turn off auto slide in
+
+
+## v0.13.2 - *2011-08-12*
+
+* changes in `/h5ai/.htaccess` ... PHP configuration ...
+
+
+## v0.13.1 - *2011-08-12*
+
+* fixes initial tree display
+* adds sort order option
+* adds/fixes some translations
+* adds `lv` translation by Sandis Veinbergs
+
+
+## v0.13 - *2011-08-06*
+
+* adds PHP implementation! (should work with PHP 5.2+)
+* adds new options
+* changes layout of the bottom bar to display status information
+* adds language selector to the bottom bar
+* quotes keys in `options.js` to make it valid json
+* changes value of option `lang` from `undefined` to `null`
+* adds some new keys to `h5aiLangs`
+* adds browser caching rules for css and js
+* adds `pt` translation by [Jonnathan](https://github.com/jonnsl)
+* adds `bg` translation by George Andonov
+
+
+## v0.12.3 - *2011-07-30*
+
+* adds `tr` translation by [Batuhan Icoz](https://github.com/batuhanicoz)
+
+
+## v0.12.2 - *2011-07-30*
+
+* adds `es` translation by Jose David Calderon Serrano
+
+
+## v0.12.1 - *2011-07-29*
+
+* fixes unchecked use of console.log
+
+
+## v0.12 - *2011-07-28*
+
+* improves performance
+
+
+## v0.11 - *2011-07-27*
+
+* changes license to MIT license, see `LICENSE.txt`
+
+
+## v0.10.2 - *2011-07-26*
+
+* improves tree scrollbar
+
+
+## v0.10.1 - *2011-07-24*
+
+* fixes problems with ' in links
+
+
+## v0.10 - *2011-07-24*
+
+* fixes problems with XAMPP on Windows (see `dot.htaccess` comments for instructions)
+* fixes tree fade-in-fade-out effect for small displays ([issue #6](https://github.com/lrsjng/h5ai/issues/6))
+* adds custom scrollbar to tree ([issue #6](https://github.com/lrsjng/h5ai/issues/6))
+* fixes broken links caused by URI encoding/decoding ([issue #9](https://github.com/lrsjng/h5ai/issues/9))
+* adds "empty" to localization (hope Google Translate did a good job here)
+
+
+## v0.9 - *2011-07-18*
+
+* links hover states between crumb, extended view and tree
+* fixes size of tree view (now there's a ugly scrollbar, hopefully will be fixed)
+* refactores js to improve performance and cleaned code
+* adds caching for folder status codes and content
+* adds `fr` translation by [Nicolas](https://github.com/Nicosmos)
+* adds `nl` translation by [Stefan de Konink](https://github.com/skinkie)
+* adds `sv` translation by Oscar Carlsson
+
+
+## v0.8 - *2011-07-08*
+
+* removes slashes from folder labels
+* optionally rename parent folder entries to real folder names, see `options.js`
+* long breadcrumbs (multiple rows) no longer hide content
+* error folder icons are opaque now
+* refactores js a lot (again...)
+
+
+## v0.7 - *2011-07-07*
+
+* removes shadows
+* smarter tree side bar
+
+
+## v0.6 - *2011-07-05*
+
+* refactores js
+* adds localization, see `options.js`
+
+
+## v0.5.3 - *2011-07-04*
+
+* refactores js
+* adds basic options support via `options.js`
+* adds comments to `options.js`
+* adds optional tree sidebar
+
+
+## v0.5.2 - *2011-07-02*
+
+* details view adjusts to window width
+* links icon for *.gz and *.bz2
+
+
+## v0.5.1 - *2011-07-01*
+
+* disables tree sidebar for now, since it had unwanted side effects
+
+
+## v0.5 - *2011-07-01*
+
+* adds tree sidebar
+* some refactorings
+
+
+## v0.4 - *2011-06-27*
+
+* adds better fallback, in case JavaScript is disabled
+* rewrites js, fixed middle-button click etc. problems
+* refactors css
+* sorts, adds and moves icons and images
+* updates dot.access
+
+
+## v0.3.2 - *2011-06-24*
+
+* removes lib versions from file names
+* adds 'empty' indicator for icons view
+
+
+## v0.3.1 - *2011-06-24*
+
+* refactores js
+* adds `folderClick` and `fileClick` callback hooks
+* fixes .emtpy style
+
+
+## v0.3 - *2011-06-23*
+
+* includes build stuff, files previously found in the base directory are now located in folder `target`
+* styles and scripts are now minified
+* adds Modernizr 2.0.4 for future use
+* updates jQuery to version 1.6.1
+
+
+## v0.2.3 - *2011-06-17*
+
+* more refactoring in main.js
+
+
+## v0.2.2 - *2011-06-16*
+
+* refactores a lot, adds some comments
+* includes fixes from [NumEricR](https://github.com/NumEricR)
+* adds top/bottom message support, only basicly styled
+
+
+## v0.2.1 - *2011-06-16*
+
+* fixes croped filenames
+* fixes missing .png extension in header
+* adds some color to the links
+* adds changelog
+
+
+## v0.2 - *2011-06-15*
+
+* adds icon view

LICENSE.txt

@@ -1,19 +0,0 @@
-Copyright (c) 2012 Lars Jung, http://larsjung.de
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
-of the Software, and to permit persons to whom the Software is furnished to do
-so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -1,327 +1,71 @@
 # h5ai
 
-Please don't use files from this repository (`src` folder) for installation.
-They need to be preprocessed/compiled to work correctly. You'll find a
-precompiled package on the [project page](http://larsjung.de/h5ai).
+[![license][license-img]][github] [![web][web-img]][web] [![github][github-img]][github]
 
-To report a bug or make a feature request
-please create [a new issue](http://github.com/lrsjng/h5ai/issues/new).
+A modern HTTP web server index for Apache httpd, lighttpd, nginx and Cherokee.
+For bug reports and feature requests please use [issues][github-issues].
 
-* Website with download, docs and demo: <http://larsjung.de/h5ai>
-* Sources: <http://github.com/lrsjng/h5ai>
-* Q&A group: <http://groups.google.com/group/h5ai>
 
-h5ai is provided under the terms of the [MIT License](http://github.com/lrsjng/h5ai/blob/master/LICENSE.txt).
+## Install
 
+Do **not** install any files from the `src` folder, they need to be
+preprocessed to work correctly! Find a preprocessed package and detailed
+install instructions on the [project page][web].
 
-## h5ai profits from these great projects
 
-* [AmplifyJS](http://amplifyjs.com) (MIT/GPL)
-* [Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-173323228) (GPL)
-* [HTML5 ★ Boilerplate](http://html5boilerplate.com)
-* [jQuery](http://jquery.com) (MIT/GPL)
-* [jQuery.fracs](http://larsjung.de/fracs) (MIT)
-* [jQuery.mousewheel](http://github.com/brandonaaron/jquery-mousewheel) (MIT)
-* [modernizr](http://www.modernizr.com) (MIT/BSD)
-* [Moment.js](http://momentjs.com) (MIT)
-* [qrcode](http://www.d-project.com/qrcode/index.html) (MIT)
-* [underscore.js](http://underscorejs.org) (MIT)
+## Build
 
+There are installation ready packages for the latest [releases][release] and
+[dev builds][develop]. But to clone and build **h5ai** yourself run the
+following commands to find a fresh zipball in folder `build` (tested on linux
+only, requires [`git`][git] and [`npm`][npm] to be installed).
 
-## Changelog
+    > git clone git://github.com/lrsjng/h5ai.git
+    > cd h5ai
+    > npm install
+    > npm run build
 
 
-### v0.19 - *2012-04-??*
+## License
 
-* adds lots of config options
-* changes in `config.js` and `h5ai.htaccess`
-* fixes js problems in IE 7+8
-* hides broken tree view in IE < 9, adds a message to the footer
-* removes hash changes since they break logical browser history
-* fixes thumbnail size for portrait images in icon view
-* fixes problems with file type recognition
-* adds an info page at `/_h5ai`
-* sort order is preserved while browsing
-* removes PHP error messages on thumbnail generation
-* fixes PHP some problems with packed download
-* adds support for tarred downloads
-* changes crumb image for folders with an index file
-* adds `index.php` to use h5ai in non-Apache environments
-* switches from [Datejs](http://www.datejs.com) to [Moment.js](http://momentjs.com)
-* adds [underscore.js](http://underscorejs.org)
-* fixes mousewheel problems, updates [jQuery.mousewheel](http://github.com/brandonaaron/jquery-mousewheel) to 3.0.6
-* updates lv translation
-* adds ro translation by [Jakob Cosoroabă](http://github.com/midday)
-* adds ja translation by [metasta](http://github.com/metasta)
-* adds nb translation by [Sindre Sorhus](http://github.com/sindresorhus)
-* adds sr translation by [Goran](http://github.com/vBm)
-* adds gr translation by [xhmikosr](http://github.com/xhmikosr)
+The MIT License (MIT)
 
+Copyright (c) 2015 Lars Jung (http://larsjung.de)
 
-### v0.18 - *2012-02-24*
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
 
-* adds optional QRCode display
-* adds optional filtering for displayed files and folders
-* updates design
-* improves zipped download
-* adds support for zipped download of htaccess restricted files
-* changes h5ai.htaccess
-* custom headers/footers are now optional and disabled by default
-* fixes problems with folder recognition in the JS version
-* fixes include problems in PHP version
-* fixes path problems on servers running on Windows in PHP version
-* fixes broken links in custom headers/footers while zipped download enabled
-* fixes problems with thumbnails for files with single or double quotes in filename
-* improves url hashes
-* updates year in `LICENSE.TXT`
-* updates es translation
-* adds zh-tw translation by [Yao Wei](http://github.com/medicalwei)
-* updates zh-cn translation
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
 
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
 
-### v0.17 - *2011-11-28*
 
-* h5ai is now located in `_h5ai` to reduce collisions
-* switches from HTML5 Boilerplate reset to normalization
-* adds some style changes for small devices
-* configuration (options, types, translations) now via `config.js`
-* icons for JS version are now configured via `config.js`
-* sort order configuration changed
-* sorting is now done without page reload
-* adds `customHeader` and `customFooter` to `config.js`
-* supports restricted folders to some extent
-* some style changes on tree and language menu
-* fixes total file/folder count in status bar
-* adds support for use with userdir (requires some manual changes)
+## References
 
+**h5ai** profits from other projects, all of them licensed under the MIT license
+too. Exceptions are the [Material Design icons][material-design-icons] (CC BY 4.0).
 
-### v0.16 - *2011-11-02*
 
-* sorts translations in `options.js`
-* improves HTML head sections
-* refactors JavaScript and PHP a lot
-* improves/fixes file selection for zipped download
-* fixes scrollbar and header/footer link issues (didn't work when zipped download enabled)
-* adds support for ctrl-select
-* `dateFormat` in `options.js` changed, now affecting JS and PHP version
-* `dateFormat` is localizable by adding it to a translation in `options.js`
-* PHP version is now configurable via `php/config.php` (set custom doc root and other PHP related things)
-* image thumbs and zipped download is disabled by default now, but works fine if PHP is configured
-
-
-### v0.15.2 - *2011-09-18*
-
-* added it translation by [Salvo Gentile](http://github.com/SalvoGentile) and [Marco Patriarca](http://github.com/Fexys)
-* switched build process from scripp to wepp
-
-
-### v0.15.1 - *2011-09-06*
-
-* fixed security issues with the zipped download feature
-* made zipped download optional (but enabled by default)
-
-
-### v0.15 - *2011-09-04*
-
-* added zipped download for selected files
-* cleaned and refactored
-
-
-### v0.14.1 - *2011-09-01*
-
-* display meta information in bottom bar (icon view)
-* added zh-cn translation by [Dongsheng Cai](http://github.com/dongsheng)
-* added pl translation by Radosław Zając
-* added ru translation by Богдан Илюхин
-
-
-### v0.14 - *2011-08-16*
-
-* added image thumbnails for PHP version
-* new option `slideTree` to turn off auto slide in
-
-
-### v0.13.2 - *2011-08-12*
-
-* changes in `/h5ai/.htaccess` ... PHP configuration ...
-
-
-### v0.13.1 - *2011-08-12*
-
-* ~~hopefully fixed that PHP doesn't get interpreted~~ :/
-* fixed initial tree display
-* added sort order option
-* added/fixed some translations
-* added lv translation by Sandis Veinbergs
-
-
-### v0.13 - *2011-08-06*
-
-* added PHP implementation! (should work with PHP 5.2+)
-* added new options
-* changed layout of the bottom bar to display status information
-* added language selector to the bottom bar
-* quoted keys in `options.js` to make it valid json
-* changed value of option `lang` from `undefined` to `null`
-* added some new keys to `h5aiLangs`
-* added browser caching rules for css and js
-* added pt translation by [Jonnathan](http://github.com/jonnsl)
-* added bg translation by George Andonov
-
-
-### v0.12.3 - *2011-07-30*
-
-* added tr translation by [Batuhan Icoz](http://github.com/batuhanicoz)
-
-
-### v0.12.2 - *2011-07-30*
-
-* added es translation by Jose David Calderon Serrano
-
-
-### v0.12.1 - *2011-07-29*
-
-* fixed unchecked use of console.log
-
-
-### v0.12 - *2011-07-28*
-
-* improved performance
-
-
-### v0.11 - *2011-07-27*
-
-* changed license to MIT license, see `LICENSE.txt`
-
-
-### v0.10.2 - *2011-07-26*
-
-* improved tree scrollbar
-
-
-### v0.10.1 - *2011-07-24*
-
-* fixed problems with ' in links
-
-
-### v0.10 - *2011-07-24*
-
-* fixed problems with XAMPP on Windows (see `dot.htaccess` comments for instructions)
-* fixed tree fade-in-fade-out effect for small displays ([issue #6](http://github.com/lrsjng/h5ai/issues/6))
-* added custom scrollbar to tree ([issue #6](http://github.com/lrsjng/h5ai/issues/6))
-* fixed broken links caused by URI encoding/decoding ([issue #9](http://github.com/lrsjng/h5ai/issues/9))
-* added "empty" to localization (hope Google Translate did a good job here)
-
-
-### v0.9 - *2011-07-18*
-
-* linked hover states between crumb, extended view and tree
-* fixed size of tree view (now there's a ugly scrollbar, hopefully will be fixed)
-* refactored js to improve performance and cleaned code
-* added caching for folder status codes and content
-* added fr translation by [Nicolas](http://github.com/Nicosmos)
-* added nl translation by [Stefan de Konink](http://github.com/skinkie)
-* added sv translation by Oscar Carlsson
-
-
-### v0.8 - *2011-07-08*
-
-* removed slashes from folder labels
-* optionally rename parent folder entries to real folder names, see `options.js`
-* long breadcrumbs (multiple rows) no longer hide content
-* error folder icons are opaque now
-* refactored js a lot (again...)
-
-
-### v0.7 - *2011-07-07*
-
-* removed shadows
-* smarter tree side bar
-
-
-### v0.6 - *2011-07-05*
-
-* refactored js
-* added localization, see `options.js`
-
-
-### v0.5.3 - *2011-07-04*
-
-* refactored js
-* added basic options support via `options.js`
-* commented `options.js`
-* optional tree sidebar
-
-
-### v0.5.2 - *2011-07-02*
-
-* details view adjusts to window width
-* linked icon for *.gz and *.bz2
-
-
-### v0.5.1 - *2011-07-01*
-
-* disabled tree sidebar for now, since it had unwanted side effects
-
-
-### v0.5 - *2011-07-01*
-
-* added tree sidebar
-* some refactorings
-
-
-### v0.4 - *2011-06-27*
-
-* added better fallback, in case JavaScript is disabled
-* rewrote js, fixed middle-button click etc. problems
-* refactored css
-* sorted, added and moved icons and images
-* updated dot.access
-
-
-### v0.3.2 - *2011-06-24*
-
-* removed lib versions from file names
-* added 'empty' indicator for icons view
-
-
-### v0.3.1 - *2011-06-24*
-
-* refactored js
-* added `folderClick` and `fileClick` callback hooks
-* fixed .emtpy style
-
-
-### v0.3 - *2011-06-23*
-
-* included build stuff, files previously found in the base directory are now located in folder `target`
-* styles and scripts are now minified
-* added Modernizr 2.0.4 for future use
-* updated jQuery to version 1.6.1
-
-
-### v0.2.3 - *2011-06-17*
-
-* more refactoring in main.js
-* ~~added custom js support, and global includes~~ *removed, only custom top and bottom sections supported*
-
-
-### v0.2.2 - *2011-06-16*
-
-* refactored a lot, added some comments
-* included fixes from [NumEricR](http://github.com/NumEricR)
-* added top/bottom message support, only basicly styled
-
-
-### v0.2.1 - *2011-06-16*
-
-* fixed croped filenames
-* fixed missing .png extension in header
-* added some color to the links
-* added changelog
-
-
-### v0.2 - *2011-06-15*
-
-* added icon view
+[web]: http://larsjung.de/h5ai/
+[github]: https://github.com/lrsjng/h5ai
+[github-issues]: https://github.com/lrsjng/h5ai/issues
+[release]: http://release.larsjung.de/h5ai/
+[develop]: http://release.larsjung.de/h5ai/develop/
+[git]: http://git-scm.com
+[npm]: https://www.npmjs.org
+[material-design-icons]: https://github.com/google/material-design-icons
 
+[license-img]: http://img.shields.io/badge/license-MIT-a0a060.svg?style=flat-square
+[web-img]: http://img.shields.io/badge/web-larsjung.de/h5ai-a0a060.svg?style=flat-square
+[github-img]: http://img.shields.io/badge/github-lrsjng/h5ai-a0a060.svg?style=flat-square

build.properties

@@ -1,22 +0,0 @@
-custom             = true
-
-
-# project
-project.name       = h5ai
-project.version    = 0.19
-
-
-# src
-src.dir            = src
-
-
-# build
-build.dir          = build
-release.dir        = release
-
-
-# tools
-tool.wepp          = wepp
-tool.jslint        = jslint
-tool.jshint        = jshint
-

build.xml

@@ -1,130 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<project
-	name="h5ai"
-	basedir="."
-	default="release"
->
-
-	<target name="init">
-		<property file="build.properties" />
-		<tstamp>
-			<format property="build.stamp" pattern="yyyy-MM-dd-HHmmss" />
-		</tstamp>
-		<property name="build.label" value="${project.name} ${project.version} b${build.stamp}" />
-		<echo>Build: ${build.label}</echo>
-	</target>
-
-	<target name="clean" depends="init">
-		<delete dir="${build.dir}" />
-		<delete dir="${release.dir}" />
-	</target>
-
-	<target name="build-prepare" depends="clean">
-		<mkdir dir="${build.dir}" />
-		<copy todir="${build.dir}">
-			<fileset dir="${src.dir}" />
-			<fileset file="LICENSE.txt" />
-			<fileset file="README.md" />
-		</copy>
-		<replace dir="${build.dir}">
-			<replacefilter token="%BUILD%" value="${build.label}" />
-			<replacefilter token="%BUILD_NAME%" value="${project.name}" />
-			<replacefilter token="%BUILD_VERSION%" value="${project.version}" />
-			<replacefilter token="%BUILD_STAMP%" value="${build.stamp}" />
-		</replace>
-	</target>
-
-	<target name="build" depends="build-prepare">
-		<wepp-dir-min dir="${build.dir}/_h5ai/css" todir="${build.dir}/_h5ai/css" />
-		<wepp-dir-min dir="${build.dir}/_h5ai/js" todir="${build.dir}/_h5ai/js" />
-	</target>
-
-	<target name="build-uncompressed" depends="build-prepare">
-		<wepp-dir dir="${build.dir}/_h5ai/css" todir="${build.dir}/_h5ai/css" />
-		<wepp-dir dir="${build.dir}/_h5ai/js" todir="${build.dir}/_h5ai/js" />
-	</target>
-
-	<target name="release" depends="build">
-		<mkdir dir="${release.dir}" />
-		<zip destfile="${release.dir}/${project.name}-${project.version}.zip" basedir="${build.dir}" />
-	</target>
-
-	<target name="lint" depends="build-prepare">
-		<wepp file="${build.dir}/_h5ai/js/inc/main.js" tofile="${build.dir}/_h5ai/js/inc/main.js" />
-		<jslint files="${build.dir}/_h5ai/js/inc/main.js" />
-	</target>
-
-	<target name="hint" depends="build-prepare">
-		<wepp file="${build.dir}/_h5ai/js/inc/main.js" tofile="${build.dir}/_h5ai/js/inc/main.js" />
-		<jshint files="${build.dir}/_h5ai/js/inc/main.js" />
-	</target>
-
-
-	<macrodef name="wepp-args">
-		<attribute name="args" default="" />
-		<sequential>
-			<exec executable="${tool.wepp}" failonerror="true">
-				<arg line="@{args}" />
-			</exec>
-		</sequential>
-	</macrodef>
-
-	<macrodef name="wepp">
-		<attribute name="file" />
-		<attribute name="tofile" />
-		<sequential>
-			<wepp-args args="--nc --inFile '@{file}' --outFile '@{toFile}'" />
-		</sequential>
-	</macrodef>
-
-	<macrodef name="wepp-min">
-		<attribute name="file" />
-		<attribute name="tofile" />
-		<sequential>
-			<wepp-args args="--inFile '@{file}' --outFile '@{toFile}'" />
-		</sequential>
-	</macrodef>
-
-	<macrodef name="wepp-dir">
-		<attribute name="dir" />
-		<attribute name="todir" />
-		<sequential>
-			<wepp-args args="--nc --inDir '@{dir}' --outDir '@{todir}'" />
-			<delete dir="@{todir}/inc" >
-				<fileset dir="." includes="@{todir}/**/*.less" />
-			</delete>
-		</sequential>
-	</macrodef>
-
-	<macrodef name="wepp-dir-min">
-		<attribute name="dir" />
-		<attribute name="todir" />
-		<sequential>
-			<wepp-args args="--inDir '@{dir}' --outDir '@{todir}'" />
-			<delete dir="@{todir}/inc" >
-				<fileset dir="." includes="@{todir}/**/*.less" />
-			</delete>
-		</sequential>
-	</macrodef>
-
-	<macrodef name="jslint">
-		<attribute name="files" />
-		<sequential>
-			<echo>JSLint @{files}</echo>
-			<exec executable="${tool.jslint}" failonerror="false">
-				<arg line="@{files}" />
-			</exec>
-		</sequential>
-	</macrodef>
-
-	<macrodef name="jshint">
-		<attribute name="files" />
-		<sequential>
-			<echo>JSHint @{files}</echo>
-			<exec executable="${tool.jshint}" failonerror="false">
-				<arg line="@{files}" />
-			</exec>
-		</sequential>
-	</macrodef>
-
-</project>

mkrfile.js

@@ -0,0 +1,208 @@
+/*jshint node: true */
+'use strict';
+
+
+var path = require('path');
+var $ = require('fquery');
+
+var pkg = require('./package.json');
+
+var root = path.resolve(__dirname);
+var src = path.join(root, 'src');
+var build = path.join(root, 'build');
+
+var mapSrc = $.map.p(src, build).s('.less', '.css').s('.jade', '');
+var mapRoot = $.map.p(root, path.join(build, '_h5ai'));
+
+
+function getBuildSuffix(callback) {
+
+    require('child_process').exec('git rev-list v' + pkg.version + '..HEAD', {cwd: root}, function (err, out) {
+
+        try {
+            var lines = out.trim().split(/\r?\n/);
+            callback('+' + ('000' + lines.length).substr(-3) + '~' + lines[0].substring(0, 7));
+        } catch (e) {
+            callback('+X');
+        }
+    });
+}
+
+
+$.fn.autoprefixer = function (options) {
+
+    var autoprefixer = require('autoprefixer-core');
+    var options = {browsers: ['last 2 versions']};
+
+    return this.edit(function (blob) {
+
+        try {
+            blob.content = autoprefixer.process(blob.content, options).css;
+        } catch (e) {
+            $.report({
+                type: 'err',
+                method: 'autoprefixer',
+                message: e.message,
+                fquery: this,
+                blob: blob,
+                err: e
+            });
+        }
+    });
+};
+
+
+$.plugin('fquery-cssmin');
+$.plugin('fquery-handlebars');
+$.plugin('fquery-includeit');
+$.plugin('fquery-jade');
+$.plugin('fquery-jshint');
+$.plugin('fquery-jszip');
+$.plugin('fquery-less');
+$.plugin('fquery-uglifyjs');
+
+
+module.exports = function (suite) {
+
+
+    suite.defaults('release');
+
+
+    suite.target('check-version', [], 'add git info to dev builds').task(function (done) {
+
+        if (!pkg.develop) {
+            done();
+            return;
+        }
+
+        getBuildSuffix(function (result) {
+
+            pkg.version += result;
+            $.report({type: 'info', method: 'check-version', message: 'version set to ' + pkg.version});
+            done();
+        });
+    });
+
+
+    suite.target('clean', [], 'delete build folder').task(function () {
+
+        $(build, {dirs: true}).delete();
+    });
+
+
+    suite.target('lint', [], 'lint all JavaScript files with JSHint').task(function () {
+
+        var jshint = {
+                // Enforcing Options
+                bitwise: true,
+                curly: true,
+                eqeqeq: true,
+                forin: true,
+                latedef: true,
+                newcap: true,
+                noempty: true,
+                plusplus: true,
+                trailing: true,
+                undef: true,
+
+                // Environments
+                browser: true
+            };
+        var globals = {
+                modulejs: true
+            };
+
+        $(src + '/_h5ai/client/js: **/*.js, ! lib/**')
+            .jshint(jshint, globals);
+    });
+
+
+    suite.target('build', ['check-version', 'lint'], 'build all updated files').task(function () {
+
+        var header = '/* ' + pkg.name + ' ' + pkg.version + ' - ' + pkg.homepage + ' */\n';
+        var env = {pkg: pkg};
+
+        $(src + ': _h5ai/client/js/*.js')
+            .newerThan(mapSrc, $(src + ': _h5ai/client/js/**'))
+            .includeit()
+            .uglifyjs()
+            .wrap(header)
+            .write(mapSrc, true);
+
+        $(src + ': _h5ai/client/css/*.less')
+            .newerThan(mapSrc, $(src + ': _h5ai/client/css/**'))
+            .less()
+            .autoprefixer()
+            .cssmin()
+            .wrap(header)
+            .write(mapSrc, true);
+
+        $(src + ': _h5ai/client/css/fonts/**')
+            .newerThan(mapSrc)
+            .write(mapSrc, true);
+
+        $(src + ': **/*.jade')
+            .newerThan(mapSrc)
+            .jade(env)
+            .write(mapSrc, true);
+
+        $(src + ': **, ! _h5ai/client/js/**, ! _h5ai/client/css/**, ! **/*.jade')
+            .newerThan(mapSrc)
+            .handlebars(env)
+            .write(mapSrc, true);
+
+        $(root + ': *.md')
+            .newerThan(mapRoot)
+            .write(mapRoot, true);
+    });
+
+
+    suite.target('build-uncompressed', ['check-version', 'lint'], 'build all updated files').task(function () {
+
+        var header = '/* ' + pkg.name + ' ' + pkg.version + ' - ' + pkg.homepage + ' */\n';
+        var env = {pkg: pkg};
+
+        $(src + ': _h5ai/client/js/*.js')
+            .newerThan(mapSrc, $(src + ': _h5ai/client/js/**'))
+            .includeit()
+            // .uglifyjs()
+            .wrap(header)
+            .write(mapSrc, true);
+
+        $(src + ': _h5ai/client/css/*.less')
+            .newerThan(mapSrc, $(src + ': _h5ai/client/css/**'))
+            .less()
+            .autoprefixer()
+            // .cssmin()
+            .wrap(header)
+            .write(mapSrc, true);
+
+        $(src + ': _h5ai/client/css/fonts/**')
+            .newerThan(mapSrc)
+            .write(mapSrc, true);
+
+        $(src + ': **/*.jade')
+            .newerThan(mapSrc)
+            .jade(env)
+            .write(mapSrc, true);
+
+        $(src + ': **, ! _h5ai/client/js/**, ! _h5ai/client/css/**, ! **/*.jade')
+            .newerThan(mapSrc)
+            .handlebars(env)
+            .write(mapSrc, true);
+
+        $(root + ': *.md')
+            .newerThan(mapRoot)
+            .write(mapRoot, true);
+    });
+
+
+    suite.target('release', ['clean', 'build'], 'create a zipball').task(function () {
+
+        var target = path.join(build, pkg.name + '-' + pkg.version + '.zip');
+
+        $(build + ': **')
+            .jszip({dir: build})
+            .write(target, true);
+    });
+};

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "h5ai",
+  "version": "0.27.0",
+  "develop": false,
+  "description": "a modern HTTP web server index",
+  "homepage": "http://larsjung.de/h5ai/",
+  "bugs": "https://github.com/lrsjng/h5ai/issues",
+  "author": "Lars Jung <lrsjng@gmail.com> (http://larsjung.de)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lrsjng/h5ai.git"
+  },
+  "scripts": {
+    "build": "mkr release",
+    "test": "mocha --recursive test"
+  },
+  "devDependencies": {
+    "autoprefixer-core": "~5.1.8",
+    "fquery": "~0.16.2",
+    "fquery-cssmin": "~0.3.0",
+    "fquery-handlebars": "~0.2.0",
+    "fquery-includeit": "~0.2.0",
+    "fquery-jade": "~0.3.0",
+    "fquery-jshint": "~0.2.0",
+    "fquery-jszip": "~0.4.0",
+    "fquery-less": "~0.2.0",
+    "fquery-uglifyjs": "~0.2.1",
+    "mkr": "~0.6.1"
+  }
+}

src/_h5ai/.htaccess

@@ -1,37 +1,46 @@
 
-Options  -Indexes
-
-AddType  text/html  .php
+DirectoryIndex index.html
 
 
-###########################################
-# if php doesn't get interpreted try to
-# uncomment one of the following lines
-###########################################
-
-#AddHandler  application/x-httpd-php  .php
-#AddHandler  application/x-httpd-php5  .php
-#AddHandler  application/x-httpd-php52  .php
-#AddHandler  application/x-httpd-php53  .php
-#AddHandler  php-script  .php
-#AddHandler  php5-script  .php
-#AddHandler  php52-script  .php
-#AddHandler  php53-script  .php
-
-
-# cache images, css and js for 7 days
-<IfModule headers_module>
-	<FilesMatch "\.png$">
-		Header set Cache-Control "max-age=604800, public"
-	</FilesMatch>
-	<FilesMatch "\.css$">
-		Header set Cache-Control "max-age=604800, public"
-	</FilesMatch>
-	<FilesMatch "\.js$">
-		Header set Cache-Control "max-age=604800, public"
-	</FilesMatch>
-	<FilesMatch "thumb-.*\.jpg$">
-		Header set Cache-Control "max-age=604800, public"
-	</FilesMatch>
+<IfModule mod_autoindex.c>
+    Options -Indexes
 </IfModule>
 
+
+AddDefaultCharset utf-8
+
+
+<IfModule mod_mime.c>
+    AddCharset utf-8 .css .js .json .svg
+</IfModule>
+
+
+<IfModule mod_expires.c>
+    ExpiresActive on
+    ExpiresDefault                                      "access plus 1 month"
+
+    # CSS
+    ExpiresByType text/css                              "access plus 1 week"
+
+    # Data interchange
+    ExpiresByType application/json                      "access plus 0 seconds"
+    ExpiresByType application/xml                       "access plus 0 seconds"
+    ExpiresByType text/xml                              "access plus 0 seconds"
+
+    # Favicon (cannot be renamed!)
+    ExpiresByType image/x-icon                          "access plus 1 week"
+
+    # HTML
+    ExpiresByType text/html                             "access plus 0 seconds"
+
+    # JavaScript
+    ExpiresByType application/javascript                "access plus 1 week"
+
+    # Media
+    ExpiresByType image/jpeg                            "access plus 1 month"
+    ExpiresByType image/png                             "access plus 1 month"
+
+    # Web fonts
+    ExpiresByType application/font-woff                 "access plus 1 month"
+    ExpiresByType image/svg+xml                         "access plus 1 month"
+</IfModule>

src/_h5ai/cache/README.md

@@ -1,7 +1,7 @@
 # Cache
 
 This directory is used for server side caching. To use caching make this
-directory writable for Apache.
+directory writable for your webserver.
 
 There is no critical data in here. You can savely remove any content. This
 will clear the cache.

src/_h5ai/client/css/inc/content.less

@@ -0,0 +1,33 @@
+
+#content {
+    overflow: auto;
+    flex: 1 1 auto;
+    order: 50;
+}
+
+#content-header, #content-footer {
+    margin: 16px;
+    color: @col;
+    // box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
+    // background: #fafafa;
+    // padding: 16px;
+    padding: 8px;
+
+    a, a:active, a:visited {
+        color: @col-link;
+        text-decoration: none;
+        cursor: pointer;
+
+        &:hover {
+            color: #000;
+        }
+    }
+
+    pre, code {
+        font-family: @font-family-mono;
+    }
+
+    h1, h2, h3, h4, h5, h6, p {
+        margin: 0.1em 0;
+    }
+}

src/_h5ai/client/css/inc/contextmenu.less

@@ -0,0 +1,77 @@
+
+.cm-overlay {
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    z-index: 200;
+    // background: rgba(0,0,0,0.1);
+    // background: rgba(255,255,255,0.6);
+}
+
+
+.cm-panel {
+    .popup();
+    .rounded();
+    display: block;
+    position: absolute;
+    left: 100px;
+    top: 100px;
+    background: #fff;
+    color: @col;
+    z-index: 10;
+    overflow: auto;
+    min-width: 200px;
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        text-align: left;
+
+        .cm-label {
+            padding: 8px 16px;
+            white-space: nowrap;
+            font-weight: bold;
+        }
+
+        .cm-entry {
+            padding: 8px 16px;
+            white-space: nowrap;
+            cursor: pointer;
+
+            &:hover {
+                color: @col-hover;
+                background: @col-darkgray;
+            }
+
+            .cm-icon {
+                position: relative;
+                top: -2px;
+
+                img {
+                    width: 20px;
+                    height: 20px;
+                }
+
+                &.no-icon {
+                    opacity: 0;
+                }
+            }
+
+            .cm-text {
+                margin: 0 0 0 12px;
+            }
+        }
+
+        .cm-sep {
+            height: 1px;
+            margin: 8px 0;
+            padding: 0;
+            border-top: 1px solid rgba(0,0,0,0.08);
+        }
+    }
+}

src/_h5ai/client/css/inc/download.less

@@ -0,0 +1,8 @@
+
+#download {
+    display: none;
+
+    &.failed {
+        background-color: @col-error;
+    }
+}

src/_h5ai/client/css/inc/fallback.less

@@ -0,0 +1,104 @@
+
+#fallback {
+    display: none;
+    max-width: 960px;
+    margin: 16px auto;
+    padding: 32px 16px;
+
+    table {
+        display: block;
+        width: 100%;
+        border-collapse: collapse;
+    }
+    th, td {
+        padding: 6px;
+        text-align: left;
+        border: none;
+    }
+    th {
+        color: #ccc;
+        font-weight: lighter;
+        line-height: 48px;
+    }
+    td {
+        overflow: hidden;
+        white-space: nowrap;
+        border-bottom: 1px solid #eee;
+    }
+    a, a:active, a:visited {
+        display: block;
+        color: inherit;
+        text-decoration: none;
+        cursor: pointer;
+
+        &:hover {
+            color: @col-hover;
+        }
+    }
+    .fb-i {
+        width: 24px;
+
+        img {
+            width: 24px;
+            height: 24px;
+        }
+    }
+    .fb-n {
+        width: 682px;
+        max-width: 682px;
+    }
+    .fb-d {
+        text-align: right;
+        width: 160px;
+        min-width: 160px;
+    }
+    .fb-s {
+        text-align: right;
+        width: 70px;
+        min-width: 70px;
+    }
+}
+
+
+#fallback-hints {
+    display: none;
+    overflow: hidden;
+    box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
+    text-align: right;
+    background: @col-lightgray;
+
+    a, a:active, a:visited {
+        display: inline-block;
+        line-height: 48px;
+        color: @col-text-secondary-black;
+        text-decoration: none;
+        .transition(all 0.2s ease-in-out);
+        outline: 0;
+
+        &:hover {
+            color: @col-hover;
+        }
+    }
+
+    .backlink {
+        margin: 0 16px;
+    }
+
+    .noJsMsg, .noBrowserMsg {
+        margin: 0 16px;
+        color: @col-error;
+    }
+}
+
+
+html.no-js, html.no-browser {
+
+    body {
+        position: static;
+        background: #fff;
+    }
+
+    #fallback, #fallback-hints {
+        display: block;
+    }
+}

src/_h5ai/client/css/inc/filter.less

@@ -0,0 +1,24 @@
+
+#filter {
+
+    input {
+        display: none;
+        border: none;
+        font-family: @font-family;
+        font-weight: lighter;
+        font-size: 16px;
+        color: @col;
+        background: transparent;
+        outline: 0;
+        width: 160px;
+        padding: 0 12px 0 4px;
+        line-height: 48px;
+        vertical-align: top;
+    }
+
+    &.active {
+        input {
+            display: inline-block;
+        }
+    }
+}

src/_h5ai/client/css/inc/general.less

@@ -0,0 +1,190 @@
+@col-blue-200: #90caf9;
+@col-blue-400: #42a5f5;
+@col-blue-500: #2196F3;
+@col-blue-700: #1976D2;
+@col-blue-900: #0D47A1;
+@col-green: #4caf50;
+@col-red: #f44336;
+@col-pink-a200: #ff4081;
+
+@col-light: #ffffff;
+@col-lightgray: #fafafa;
+// @col-darkgray: #eeeeee;
+@col-darkgray: #f3f3f3;
+// @col-dark: #333;
+@col-dark: #212121;
+
+@col-text-primary-black: rgba(0,0,0,0.87);
+@col-text-secondary-black: rgba(0,0,0,0.54);
+@col-text-disabled-black: rgba(0,0,0,0.26);
+@col-divider-black: rgba(0,0,0,0.12);
+
+@col-text-primary-white: rgba(255,255,255,1.0);
+@col-text-secondary-white: rgba(255,255,255,0.7);
+@col-text-disabled-white: rgba(255,255,255,0.3);
+@col-divider-white: rgba(255,255,255,0.12);
+
+@col-text-selected: @col-text-primary-white;
+@col-back-selected: @col-blue-400;
+
+@col-text-highlight: #111111;
+
+@col-font-light: @col-light;
+@col-font-dark: @col-dark;
+
+@col-back-light: @col-lightgray;
+@col-back-dark: @col-darkgray;
+
+@col: @col-text-primary-black;
+@col-back: @col-back-dark;
+@col-hover: @col-blue-400;
+@col-border: rgba(0,0,0,0.05);
+@col-border-strong: rgba(0,0,0,0.15);
+@col-border-stronger: rgba(0,0,0,0.3);
+
+@col-okay: @col-green;
+@col-error: @col-red;
+
+@col-link: @col-blue-400;
+@col-link-hover: @col-blue-400;
+
+@col-widget-back: rgb(245,245,245);
+@col-widget-back-highlight: rgba(255,255,255,0.8);
+@col-widget-back-hover: rgba(255,255,255,0.8);
+@col-widget-back-sel: rgba(255,255,255,0.8);
+@col-widget-sep: @col-border;
+
+@col-sb-back: rgba(0,0,0,0.08);
+@col-sb-thumb: rgba(0,0,0,0.15);
+@col-sb-thumb-active: rgba(0,0,0,0.25);
+
+@col-range-back: rgb(224,224,224);
+@col-range-thumb: #555;
+
+@border-widget: 1px solid @col-border;
+@border-widget-sep: 1px solid @col-widget-sep;
+
+@font-family: Roboto, Helvetica, Arial, sans-serif;
+@font-weight: normal;
+@font-size: 13px;
+@font-family-mono: monospace;
+
+// @max-icon-size: 24px;
+@max-icon-size: 32px;
+// @max-icon-size: 48px;
+
+
+::-moz-selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
+::selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
+
+.transition (@transition) {
+    -webkit-transition: @transition;
+    transition: @transition;
+}
+
+.transform (@transform) {
+    -webkit-transform: @transform;
+    -ms-transform: @transform;
+    transform: @transform;
+    zoom: 1;
+}
+
+.card() {
+    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
+}
+
+.raised() {
+    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
+}
+
+.popup() {
+    box-shadow: 0 1px 20px 0 rgba(0,0,0,0.5);
+}
+
+.rounded() {
+    // overflow: hidden;
+    border-radius: 2px;
+}
+
+.el-button() {
+    .card();
+    .rounded();
+    .transition(all 0.2s ease-in-out);
+    color: @col-text-primary-white;
+    background: @col-blue-400;
+    border-radius: 2px;
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+        .raised();
+    }
+}
+
+.el-input() {
+    .card();
+    .rounded();
+    -moz-appearance: none;
+    -ms-appearance: none;
+    -webkit-appearance: none;
+    font-family: @font-family;
+    font-weight: @font-weight;
+    color: @col-text-primary-black;
+    background: @col-light;
+    border: none;
+    outline: none;
+}
+
+
+html {
+    min-height: 100%;
+    overflow: auto;
+
+    &.js .noJsMsg {
+        display: none;
+    }
+    &.browser .noBrowserMsg {
+        display: none;
+    }
+}
+
+body {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+
+    font-family: @font-family;
+    font-size: @font-size;
+    font-weight: @font-weight;
+    color: @col-text-primary-black;
+    background: @col-back;
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: stretch;
+}
+
+#main-row {
+    flex: 1 1 auto;
+    order: 50;
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: stretch;
+
+    // non-webkit fix;
+    height: 0;
+}
+
+*:focus {
+    // outline: 1px solid @col-pink-a200;
+    outline: none;
+}

src/_h5ai/client/css/inc/h5ai-info.less

@@ -0,0 +1,111 @@
+
+body#h5ai-info {
+
+    #content {
+        flex: 1 1 auto;
+        order: 50;
+        color: @col-text-primary-black;
+        text-align: center;
+    }
+
+    code {
+        margin: 0 0.2em;
+        padding: 2px 4px;
+        border-radius: 4px;
+        font-family: @font-family-mono;
+        letter-spacing: 0.05em;
+        background-color: @col-widget-back;
+        border: @border-widget;
+        font-size: 0.9em;
+    }
+
+    #header a {
+        font-size: 4em;
+        font-weight: 300;
+        margin: 0.8em 0 0 0;
+        color: @col-text-primary-black;
+        text-decoration: none;
+        .transition(all 0.2s ease-in-out);
+
+        &:hover {
+            color: @col-hover;
+        }
+    }
+
+    #support {
+        margin: 12px auto 24px auto;
+        padding: 6px 18px;
+        width: 210px;
+        background: #fafafa;
+        border: @border-widget;
+        border-radius: 4px;
+
+        .paypal {
+            margin: 12px 0 0 0;
+        }
+    }
+
+    #pass {
+        .el-input();
+        display: inline-block;
+        margin: 8px;
+        padding: 0 12px;
+        line-height: 28px;
+        width: 200px;
+        vertical-align: top;
+    }
+
+    #login, #logout {
+        .el-button();
+        display: inline-block;
+        margin: 8px;
+        padding: 0 12px;
+        line-height: 28px;
+        vertical-align: top;
+    }
+
+    #hint {
+        margin: 12px auto;
+        width: 380px;
+        font-weight: lighter;
+    }
+
+    #tests {
+        display: inline-block;
+        text-align: left;
+        list-style-type: none;
+        margin: 96px 0;
+        padding: 0;
+
+        .test {
+            .card();
+            .rounded();
+            background: @col-light;
+            margin: 12px 0 0 0;
+            padding: 8px 12px 12px 12px;
+        }
+        .label {
+            display: inline-block;
+            width: 250px;
+            font-size: 1.4em;
+        }
+        .result {
+            display: inline-block;
+            width: 250px;
+            text-align: right;
+            font-size: 1.4em;
+            font-weight: bold;
+
+            &.passed {
+                color: @col-okay;
+            }
+            &.failed {
+                color: @col-error;
+            }
+        }
+        .info {
+            font-weight: lighter;
+            margin: 4px 0 0 0;
+        }
+    }
+}

src/_h5ai/client/css/inc/info.less

@@ -0,0 +1,58 @@
+
+#info {
+    display: none;
+
+    overflow: auto;
+    flex: 0 0 auto;
+    order: 99;
+
+    padding: 16px;
+    border-left: 1px solid @col-border;
+    white-space: nowrap;
+    overflow-x: hidden;
+    width: 240px;
+
+    .icon {
+        width: 240px;
+        height: 180px;
+
+        img {
+            .rounded();
+            display: block;
+            overflow: hidden;
+            margin: 0 auto;
+            width: 180px;
+            height: 180px;
+        }
+
+        .thumb {
+            width: 240px;
+        }
+    }
+
+    .block {
+        border-top: 1px solid @col-border;
+        border-bottom: 1px solid @col-border;
+        margin: 0 0 24px 0;
+        padding: 24px 0;
+    }
+
+    .label {
+        font-size: 16px;
+        margin-bottom: 16px;
+    }
+
+    .time, .size, .content {
+        line-height: 20px;
+        height: 20px;
+    }
+
+    .qrcode {
+        margin: 0 auto;
+        width: 200px;
+
+        canvas {
+            display: block;
+        }
+    }
+}

src/_h5ai/client/css/inc/notify.less

@@ -0,0 +1,13 @@
+
+#notify {
+    position: fixed;
+    left: 50%;
+    width: 200px;
+    margin-left: -100px;
+    z-index: 100;
+    padding: 3px 6px 6px 6px;
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 0 0 4px 4px;
+    text-align: center;
+}

src/_h5ai/client/css/inc/preview-aud.less

@@ -0,0 +1,9 @@
+
+#pv-aud-audio {
+    position: absolute;
+
+    max-width: 100%;
+    max-height: 100%;
+
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
+}

src/_h5ai/client/css/inc/preview-img.less

@@ -0,0 +1,27 @@
+
+@check-white: #f8f8f8;
+@check-black: #e8e8e8;
+#pv-img-image {
+    position: absolute;
+
+    max-width: 100%;
+    max-height: 100%;
+
+    background-color: @check-white;
+    background-image:
+        -webkit-linear-gradient(45deg, @check-black 25%, transparent 25%, transparent 75%, @check-black 75%, @check-black),
+        -webkit-linear-gradient(45deg, @check-black 25%, transparent 25%, transparent 75%, @check-black 75%, @check-black);
+    background-size: 60px 60px;
+    background-position: 0 0, 30px 30px;
+
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
+
+    &.loading {
+        opacity: 0.5;
+        margin-top: 32px;
+        width: 240px;
+        height: 240px;
+        border-radius: 1000px;
+        overflow: hidden;
+    }
+}

src/_h5ai/client/css/inc/preview-txt.less

@@ -0,0 +1,117 @@
+
+#pv-txt-text {
+    max-width: 960px;
+    text-align: left;
+    background-color: #fff;
+    margin: 0 auto;
+    padding: 8px;
+    overflow: auto;
+
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
+
+    &.highlighted {
+
+        code {
+            font-family: @font-family-mono;
+            font-size: @font-size;
+            line-height: 1.2em;
+        }
+
+        a, a:active, a:visited {
+            color: #2080FF;
+            text-decoration: none;
+            cursor: pointer;
+
+            &:hover {
+                color: #68A9FF;
+            }
+        }
+
+        .token.comment,
+        .token.prolog,
+        .token.doctype,
+        .token.cdata {
+            color: #aaa;
+        }
+
+        .token.punctuation {
+            color: #999;
+        }
+
+        .namespace {
+            opacity: .7;
+        }
+
+        .token.property,
+        .token.tag,
+        .token.boolean,
+        .token.number,
+        .token.constant,
+        .token.symbol {
+            color: #905;
+        }
+
+        .token.selector,
+        .token.attr-name,
+        .token.string,
+        .token.builtin {
+            color: #690;
+        }
+
+        .token.operator,
+        .token.entity,
+        .token.url,
+        .language-css .token.string,
+        .style .token.string,
+        .token.variable {
+            color: #a67f59;
+            background: hsla(0,0%,100%,.5);
+        }
+
+        .token.atrule,
+        .token.attr-value,
+        .token.keyword {
+            color: #07a;
+        }
+
+        .token.function {
+            color: #DD4A68;
+        }
+
+        .token.regex,
+        .token.important {
+            color: #e90;
+        }
+
+        .token.important {
+            font-weight: bold;
+        }
+
+        .token.entity {
+            cursor: help;
+        }
+    }
+
+
+    &.markdown {
+        font-size: 1.1em;
+        padding: 8px 24px;
+
+        a, a:active, a:visited {
+            color: #2080FF;
+            text-decoration: none;
+            cursor: pointer;
+
+            &:hover {
+                color: #68A9FF;
+            }
+        }
+
+        pre, code {
+            font-family: @font-family-mono;
+        }
+        code {
+            color: #008200;
+        }
+    }
+}

src/_h5ai/client/css/inc/preview-vid.less

@@ -0,0 +1,14 @@
+
+#pv-vid-video {
+    position: absolute;
+
+    max-width: 100%;
+    max-height: 100%;
+
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3);
+}
+
+#pv-vid-video:-webkit-full-screen {
+    top: auto !important;
+    left: auto !important;
+}

src/_h5ai/client/css/inc/preview.less

@@ -0,0 +1,142 @@
+
+#pv-overlay {
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
+
+    background-color: rgba(0,0,0,0.5);
+    .transition(background-color 0.3s ease-in-out);
+
+    text-align: center;
+}
+
+#pv-overlay.fullscreen {
+    background-color: #111;
+}
+
+#pv-content {
+    position: absolute;
+}
+
+#pv-spinner {
+    position: absolute;
+
+    img {
+        width: 100px;
+        height: 100px;
+        margin: -50px -50px;
+    }
+}
+
+#pv-prev-area, #pv-next-area {
+    position: absolute;
+    top: 50%;
+    cursor: pointer;
+
+    img {
+        display: block;
+        width: 48px;
+        height: 48px;
+        margin: -36px 0;
+        padding: 12px;
+        opacity: 0.5;
+        .transition(all 0.2s ease-in-out);
+    }
+
+    &:hover {
+        img {
+            opacity: 1;
+            background-color: rgba(27,27,27,0.8);
+            box-shadow: 0 0 8px 2px rgba(0,0,0,0.3);
+        }
+    }
+}
+
+#pv-prev-area {
+    left: 0;
+    img {
+        border-radius: 0 8px 8px 0;
+        padding-left: 48px;
+    }
+}
+
+#pv-next-area {
+    right: 0;
+    img {
+        border-radius: 8px 0 0 8px;
+        padding-right: 48px;
+    }
+}
+
+#pv-buttons {
+    list-style: none;
+    list-style-image: none;
+    margin: 0;
+    padding: 0;
+
+    img {
+        position: relative;
+        width: 24px;
+        height: 24px;
+        padding: 12px
+    }
+
+    .bar-label {
+        display: block;
+        color: @col-text-primary-white;
+        height: 48px;
+        line-height: 48px;
+        padding: 0 12px;
+        opacity: 0.7;
+        .transition(all 0.2s ease-in-out);
+    }
+
+    .bar-button {
+        display: block;
+        line-height: 48px;
+        opacity: 0.7;
+        cursor: pointer;
+        .transition(all 0.2s ease-in-out);
+
+        &:hover {
+            opacity: 1.0;
+            background-color: rgba(255,255,255,0.1);
+        }
+    }
+
+    .bar-left {
+        float: left;
+    }
+
+    .bar-right {
+        float: right;
+    }
+}
+
+#pv-bottombar {
+    position: fixed;
+    z-index: 5;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgb(27,27,27);
+    // box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
+    box-shadow: 0 0 8px 2px rgba(0,0,0,0.3);
+}
+
+#pv-overlay.fullscreen {
+
+    #pv-bottombar {
+        opacity: 0.5;
+    }
+}
+
+@media only screen and (max-width: 700px) {
+#pv-prev-area, #pv-next-area, #pv-close-area {
+    display: none !important;
+}
+}

src/_h5ai/client/css/inc/responsive.less

@@ -0,0 +1,31 @@
+
+@media only screen and (max-width: 700px) {
+    #crumbbar {
+        .crumb:not(.active) {
+            display: none;
+        }
+        .crumb.active .sep {
+            width: 0;
+        }
+    }
+    #view.view-details {
+        .header .label, .item .label {
+            margin-right: 80px !important;
+        }
+        .header .date, .item .date {
+            display: none;
+        }
+    }
+    #tree, #info {
+        display: none !important;
+    }
+}
+
+@media print {
+    a[href]:after {
+        content: "" !important;
+    }
+    #toolbar, #download, #sidebar, #tree, #info {
+        display: none !important;
+    }
+}

src/_h5ai/client/css/inc/sidebar.less

@@ -0,0 +1,129 @@
+
+#sidebar {
+    display: none;
+    overflow: auto;
+    flex: 0 0 auto;
+    order: 0;
+    background: #fafafa;
+    border-right: 1px solid rgba(0,0,0,0.08);
+}
+
+#settings {
+    padding: 16px;
+
+    .block {
+        display: block;
+        margin: 0 0 24px 0;
+        width: 168px;
+
+        h1 {
+            font-size: 1em;
+            margin: 2px 0 6px 0;
+        }
+    }
+
+    .button {
+        display: inline-block;
+        margin: 4px;
+        border-radius: 2px;
+        color: @col;
+        cursor: pointer;
+        .transition(all 0.2s ease-in-out);
+
+        &:hover {
+            background: rgba(0,0,0,0.03);
+        }
+
+        &.active {
+            background: rgba(0,0,0,0.03);
+            box-shadow: inset 0 0 4px 0 rgba(0,0,0,0.4);
+        }
+
+        img {
+            width: 24px;
+            height: 24px;
+            padding: 12px;
+        }
+    }
+
+    .select {
+        background: transparent;
+        overflow: hidden;
+        border-radius: 2px;
+        outline: 0;
+        width: 160px;
+        margin: 4px;
+        line-height: 48px;
+    }
+
+    input, select {
+        -moz-appearance: none;
+        -ms-appearance: none;
+        -webkit-appearance: none;
+        font-family: @font-family;
+        font-size: @font-size;
+        font-weight: @font-weight;
+        color: @col;
+        background: transparent;
+        width: 100%;
+        border: 0 solid #000;
+        cursor: pointer;
+        outline: 0;
+
+        &:hover {
+            background: rgba(0,0,0,0.03);
+        }
+    }
+
+    select {
+        width: 182px;
+        padding: 0 8px;
+        height: 48px;
+        line-height: 48px;
+    }
+
+    input[type='range'] {
+        border-radius: 2px;
+        width: 144px;
+        margin: 4px;
+        padding: 8px;
+        vertical-align: middle;
+        height: 32px;
+        line-height: 32px;
+    }
+
+    .range-track() {
+        -moz-appearance: none;
+        -ms-appearance: none;
+        -webkit-appearance: none;
+        border-width: 0;
+        border-radius: 20px;
+        background: @col-range-back;
+        height: 6px;
+    }
+
+    .range-thumb() {
+        -moz-appearance: none;
+        -ms-appearance: none;
+        -webkit-appearance: none;
+        border-width: 0;
+        border-radius: 20px;
+        background: @col-range-thumb;
+        width: 16px;
+        height: 16px;
+    }
+
+    input[type='range']::-webkit-slider-runnable-track { .range-track; }
+    input[type='range']::-moz-range-track { .range-track; }
+    input[type='range']::-ms-track { .range-track; }
+    input[type='range']::-ms-fill-lower { .range-track; }
+    input[type='range']::-ms-fill-upper { .range-track; }
+
+    input[type='range']::-webkit-slider-thumb { .range-thumb; margin-top: -5px; }
+    input[type='range']::-moz-range-thumb { .range-thumb; }
+    input[type='range']::-ms-thumb { .range-thumb; }
+
+    #view-size {
+        display: block;
+    }
+}

src/_h5ai/client/css/inc/topbar.less

@@ -0,0 +1,127 @@
+
+#topbar {
+    overflow: hidden;
+    flex: 0 0 auto;
+    order: 1;
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: stretch;
+
+    background: @col-lightgray;
+    box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+
+#backlink {
+    overflow: hidden;
+    flex: 0 0 auto;
+    order: 99;
+    text-align: center;
+    padding: 6px 12px;
+    max-width: 80px;
+    overflow: hidden;
+    height: 36px;
+    .transition(all 0.2s ease-in-out);
+
+    &, &:active, &:visited {
+        color: @col-text-disabled-black;
+        cursor: pointer;
+        text-decoration: none;
+    }
+    &:hover {
+        color: @col-hover;
+        background: rgba(0,0,0,0.03);
+    }
+    &:focus {
+        outline: 0;
+    }
+
+    div {
+        line-height: 18px;
+        white-space: nowrap;
+    }
+}
+
+
+#toolbar {
+    overflow: hidden;
+    flex: 0 0 auto;
+    order: 1;
+    height: 48px;
+
+    .tool {
+        display: inline-block;
+        cursor: pointer;
+
+        img {
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            padding: 12px;
+            .transition(all 0.2s ease-in-out);
+        }
+
+        &:hover img {
+            background: rgba(0,0,0,0.03);
+        }
+    }
+}
+
+
+#crumbbar {
+    overflow: hidden;
+    flex: 1 1 auto;
+    order: 2;
+    height: 48px;
+    font-size: 16px;
+    padding: 0 8px;
+    // border-left: 1px solid rgba(0,0,0,0.05);
+
+    a, a:active, a:visited {
+        color: @col;
+        cursor: pointer;
+        text-decoration: none;
+
+        &.active {
+            font-weight: bold;
+            color: @col-text-highlight;
+        }
+        &:hover {
+            color: @col-hover;
+        }
+        &:focus {
+            outline: 0;
+        }
+    }
+    .crumb {
+        display: inline-block;
+        .transition(all 0.2s ease-in-out);
+    }
+    .sep {
+        width: 24px;
+        height: 24px;
+        padding: 12px 0;
+        line-height: 48px;
+        display: inline-block;
+        vertical-align: top;
+    }
+    .label {
+        line-height: 48px;
+        display: inline-block;
+        vertical-align: top;
+        padding: 0 8px;
+    }
+    .hint {
+        width: 16px;
+        height: 16px;
+        padding: 16px 4px 16px 0;
+        line-height: 48px;
+        display: inline-block;
+        vertical-align: top;
+    }
+}

src/_h5ai/client/css/inc/tree.less

@@ -0,0 +1,75 @@
+
+#tree {
+    display: none;
+
+    overflow: auto;
+    flex: 0 0 auto;
+    order: 1;
+
+    padding: 16px 16px 16px 8px;
+    border-right: 1px solid @col-border;
+    white-space: nowrap;
+    max-width: 250px;
+    overflow-x: hidden;
+    font-weight: lighter;
+
+    a, a:active, a.visited {
+        display: inline-block;
+        padding: 3px 0;
+        text-decoration: none;
+        color: @col;
+
+        &:hover {
+            color: @col-hover;
+        }
+    }
+
+    .active > a {
+        font-weight: bold;
+    }
+
+    .indicator {
+        display: inline-block;
+        position: relative;
+        top: -2px;
+        cursor: pointer;
+
+        img {
+            width: 20px;
+            height: 20px;
+            .transition(all 0.2s ease-in-out);
+        }
+        &.open {
+            img {
+                .transform(rotate(90deg));
+            }
+        }
+        &.unknown {
+            opacity: 0.3;
+        }
+        &.none {
+            opacity: 0;
+            cursor: inherit;
+        }
+    }
+
+    .icon {
+        position: relative;
+        top: -2px;
+
+        img {
+            width: 20px;
+            height: 20px;
+        }
+    }
+
+    .label {
+        margin: 0 0 0 4px;
+    }
+
+    .content {
+        list-style: none;
+        margin: 0;
+        padding: 0 0 0 20px;
+    }
+}

src/_h5ai/client/css/inc/view-details.less

@@ -0,0 +1,118 @@
+
+.view-details-sized(@size) {
+
+    .item {
+        .label, .date, .size {
+            line-height: @size + 14px;
+        }
+    }
+
+    .square {
+        width: @size;
+        height: @size;
+
+        img {
+            width: @size;
+            height: @size;
+        }
+    }
+
+    .label {
+        margin: 0 246px 0 (@size + 32px);
+    }
+}
+
+
+#view.view-details {
+
+    margin: 16px;
+
+    #items {
+        .rounded();
+        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
+    }
+
+    .header {
+        position: relative;
+        white-space: nowrap;
+        display: list-item;
+        background: #fafafa;
+        border-bottom: 1px solid rgba(0,0,0,0.07);
+        border-radius: 2px 2px 0 0;
+
+        .label, .date, .size {
+            line-height: 46px;
+            opacity: 0.4;
+            outline: 0;
+            .transition(all 0.2s ease-in-out);
+
+            &:hover {
+                opacity: 1;
+                color: @col-hover;
+            }
+        }
+
+        .sort {
+            display: none;
+            position: relative;
+            top: -2px;
+            width: 20px;
+            height: 20px;
+            padding: 0 4px;
+        }
+
+        .ascending .sort {
+            display: inline;
+        }
+
+        .descending .sort {
+            display: inline;
+            .transform(rotate(180deg));
+        }
+    }
+
+    .item {
+        overflow: hidden;
+        border-bottom: 1px solid rgba(0,0,0,0.07);
+
+        &:hover {
+            .raised();
+            z-index: 1;
+        }
+
+        &:last-child {
+            border-radius: 0 0 2px 2px;
+        }
+    }
+
+    .square {
+        display: inline-block;
+        position: absolute;
+        left: 16px;
+        top: -1px;
+        padding: 8px;
+
+        .thumb {
+            .rounded();
+            box-shadow: 0 0 1px 0 rgba(0,0,0,0.2);
+        }
+    }
+
+    .label, .date, .size {
+        padding: 0 8px;
+    }
+
+    .date {
+        position: absolute;
+        right: 116px;
+        top: 0;
+    }
+
+    .size {
+        position: absolute;
+        right: 16px;
+        top: 0;
+    }
+
+    .view-details-sized(16px)
+}

src/_h5ai/client/css/inc/view-grid.less

@@ -0,0 +1,54 @@
+
+.view-grid-sized(@size) {
+
+    .label {
+        line-height: @size;
+    }
+
+    .square {
+        width: @size;
+        height: @size;
+
+        img {
+            width: @size;
+            height: @size;
+        }
+    }
+}
+
+
+#view.view-grid {
+
+    margin: 8px;
+
+    .item {
+        .card();
+        .rounded();
+        overflow: hidden;
+        float: left;
+        margin: 8px;
+
+        &:hover {
+            .raised();
+        }
+    }
+
+    .square {
+        display: inline-block;
+        vertical-align: top;
+        background: #fafafa;
+    }
+
+    .label {
+        display: inline-block;
+        vertical-align: top;
+        width: 180px;
+        padding: 0 8px;
+    }
+
+    .date, .size {
+        display: none;
+    }
+
+    .view-grid-sized(48px);
+}

src/_h5ai/client/css/inc/view-icons.less

@@ -0,0 +1,55 @@
+
+.view-icons-sized(@size) {
+
+    .item {
+        width: @size * 4/3;
+    }
+
+    .landscape {
+        width: @size * 4/3;
+        height: @size;
+
+        img {
+            width: @size;
+            height: @size;
+        }
+
+        .thumb {
+            width: @size * 4/3;
+        }
+    }
+}
+
+
+#view.view-icons {
+
+    margin: 8px;
+
+    .item {
+        .card();
+        .rounded();
+        overflow: hidden;
+        float: left;
+        margin: 8px;
+
+        &:hover {
+            .raised();
+        }
+    }
+
+    .landscape {
+        display: block;
+        background: #fafafa;
+    }
+
+    .label {
+        padding: 0 6px;
+        line-height: 24px;
+    }
+
+    .date, .size {
+        display: none;
+    }
+
+    .view-icons-sized(96px);
+}

src/_h5ai/client/css/inc/view.less

@@ -0,0 +1,149 @@
+
+
+html.drag-select, html.drag-select * {
+    cursor: move !important;
+
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+
+#selection-rect {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+    border: 1px dashed @col-border-strong;
+    background: rgba(0,0,0,0.1);
+}
+
+
+#view {
+    display: none;
+
+    a, a:active, a:visited {
+        display: block;
+        color: inherit;
+        cursor: pointer;
+        text-decoration: none;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .header {
+        display: none;
+    }
+
+    .item {
+        position: relative;
+        white-space: nowrap;
+        background: #fff;
+
+        &:hover {
+            color: @col-hover;
+            background: @col-lightgray;
+            border-color: @col-border;
+
+            .selector {
+                display: block;
+            }
+        }
+
+        &.selected:not(.selecting), &.selecting:not(.selected) {
+            color: @col-text-selected;
+            background: @col-back-selected;
+
+            &:hover {
+                color: @col-text-selected;
+                background: @col-back-selected;
+            }
+
+            .selector {
+                display: block;
+                opacity: 1;
+            }
+        }
+    }
+
+    .folder-parent {
+
+        .date, .size {
+            display: none;
+        }
+    }
+
+    .icon {
+        display: none;
+        text-align: center;
+
+        img {
+            max-width: @max-icon-size;
+            max-height: @max-icon-size;
+            position: relative;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        .thumb {
+            max-width: none;
+            max-height: none;
+        }
+    }
+
+    .label {
+        display: block;
+        overflow: hidden;
+        text-align: left;
+        text-overflow: ellipsis;
+    }
+
+    .date {
+        text-align: right;
+        width: 130px;
+    }
+
+    .size {
+        text-align: right;
+        width: 80px;
+    }
+
+    .selector {
+        display: none;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 22px;
+        height: 22px;
+        background: @col-back-selected;
+        cursor: pointer;
+        border-radius: 0 0 2px 0;
+        opacity: 0.6;
+
+        &:hover {
+            opacity: 0.8;
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .empty, .no-match {
+        display: none;
+        margin-top: 36px;
+        text-align: center;
+        color: @col-border;
+        font-size: 5em;
+        font-weight: bold;
+    }
+}

src/_h5ai/client/css/lib/h5bp-main-footer.less

@@ -0,0 +1,172 @@
+/* ==========================================================================
+   Helper classes
+   ========================================================================== */
+
+/*
+ * Image replacement
+ */
+
+.ir {
+    background-color: transparent;
+    border: 0;
+    overflow: hidden;
+    /* IE 6/7 fallback */
+    *text-indent: -9999px;
+}
+
+.ir:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 150%;
+}
+
+/*
+ * Hide from both screenreaders and browsers: h5bp.com/u
+ */
+
+.hidden {
+    display: none !important;
+    visibility: hidden;
+}
+
+/*
+ * Hide only visually, but have it available for screenreaders: h5bp.com/v
+ */
+
+.visuallyhidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+/*
+ * Extends the .visuallyhidden class to allow the element to be focusable
+ * when navigated to via the keyboard: h5bp.com/p
+ */
+
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto;
+}
+
+/*
+ * Hide visually and from screenreaders, but maintain layout
+ */
+
+.invisible {
+    visibility: hidden;
+}
+
+/*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    `contenteditable` attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+
+.clearfix:before,
+.clearfix:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+/*
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+
+.clearfix {
+    *zoom: 1;
+}
+
+/* ==========================================================================
+   Print styles.
+   Inlined to avoid required HTTP connection: h5bp.com/r
+   ========================================================================== */
+
+@media print {
+    * {
+        background: transparent !important;
+        color: #000 !important; /* Black prints faster: h5bp.com/s */
+        box-shadow: none !important;
+        text-shadow: none !important;
+    }
+
+    a,
+    a:visited {
+        text-decoration: underline;
+    }
+
+    a[href]:after {
+        content: " (" attr(href) ")";
+    }
+
+    abbr[title]:after {
+        content: " (" attr(title) ")";
+    }
+
+    /*
+     * Don't show links for images, or javascript/internal links
+     */
+
+    .ir a:after,
+    a[href^="javascript:"]:after,
+    a[href^="#"]:after {
+        content: "";
+    }
+
+    pre,
+    blockquote {
+        border: 1px solid #999;
+        page-break-inside: avoid;
+    }
+
+    thead {
+        display: table-header-group; /* h5bp.com/t */
+    }
+
+    tr,
+    img {
+        page-break-inside: avoid;
+    }
+
+    img {
+        max-width: 100% !important;
+    }
+
+    @page {
+        margin: 0.5cm;
+    }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    h2,
+    h3 {
+        page-break-after: avoid;
+    }
+}

src/_h5ai/client/css/lib/h5bp-main-header.less

@@ -0,0 +1,87 @@
+/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
+
+/*
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+/* ==========================================================================
+   Base styles: opinionated defaults
+   ========================================================================== */
+
+html,
+button,
+input,
+select,
+textarea {
+    color: #222;
+}
+
+body {
+    font-size: 1em;
+    line-height: 1.4;
+}
+
+/*
+ * Remove text-shadow in selection highlight: h5bp.com/i
+ * These selection rule sets have to be separate.
+ * Customize the background color to match your design.
+ */
+
+::-moz-selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+::selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+/*
+ * A better looking default horizontal rule
+ */
+
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin: 1em 0;
+    padding: 0;
+}
+
+/*
+ * Remove the gap between images, videos, audio and canvas and the bottom of
+ * their containers: h5bp.com/i/440
+ */
+
+audio,
+canvas,
+img,
+video {
+    vertical-align: middle;
+}
+
+/*
+ * Remove default fieldset styles.
+ */
+
+fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+
+textarea {
+    resize: vertical;
+}
+
+/* ==========================================================================
+   Author's custom styles
+   ========================================================================== */

src/_h5ai/client/css/lib/h5bp-normalize.less

@@ -0,0 +1,527 @@
+/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/**
+ * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
+ *    `em` units.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-size: 100%; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Address `font-family` inconsistency between `textarea` and other form
+ * elements.
+ */
+
+html,
+button,
+input,
+select,
+textarea {
+    font-family: sans-serif;
+}
+
+/**
+ * Address margins handled incorrectly in IE 6/7.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/**
+ * Address font sizes and margins set differently in IE 6/7.
+ * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
+ * and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+h2 {
+    font-size: 1.5em;
+    margin: 0.83em 0;
+}
+
+h3 {
+    font-size: 1.17em;
+    margin: 1em 0;
+}
+
+h4 {
+    font-size: 1em;
+    margin: 1.33em 0;
+}
+
+h5 {
+    font-size: 0.83em;
+    margin: 1.67em 0;
+}
+
+h6 {
+    font-size: 0.67em;
+    margin: 2.33em 0;
+}
+
+/**
+ * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+blockquote {
+    margin: 1em 40px;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ * Known issue: no IE 6/7 normalization.
+ */
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 6/7/8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/**
+ * Address margins set differently in IE 6/7.
+ */
+
+p,
+pre {
+    margin: 1em 0;
+}
+
+/**
+ * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    _font-family: 'courier new', monospace;
+    font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+/**
+ * Address CSS quotes not supported in IE 6/7.
+ */
+
+q {
+    quotes: none;
+}
+
+/**
+ * Address `quotes` property not supported in Safari 4.
+ */
+
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Lists
+   ========================================================================== */
+
+/**
+ * Address margins set differently in IE 6/7.
+ */
+
+dl,
+menu,
+ol,
+ul {
+    margin: 1em 0;
+}
+
+dd {
+    margin: 0 0 0 40px;
+}
+
+/**
+ * Address paddings set differently in IE 6/7.
+ */
+
+menu,
+ol,
+ul {
+    padding: 0 0 0 40px;
+}
+
+/**
+ * Correct list images handled incorrectly in IE 7.
+ */
+
+nav ul,
+nav ol {
+    list-style: none;
+    list-style-image: none;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/**
+ * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improve image quality when scaled in IE 7.
+ */
+
+img {
+    border: 0; /* 1 */
+    -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/**
+ * Correct margin displayed oddly in IE 6/7.
+ */
+
+form {
+    margin: 0;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct color not being inherited in IE 6/7/8/9.
+ * 2. Correct text not wrapping in Firefox 3.
+ * 3. Correct alignment displayed oddly in IE 6/7.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0;
+    white-space: normal; /* 2 */
+    *margin-left: -7px; /* 3 */
+}
+
+/**
+ * 1. Correct font size not being inherited in all browsers.
+ * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *    and Chrome.
+ * 3. Improve appearance and consistency in all browsers.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-size: 100%; /* 1 */
+    margin: 0; /* 2 */
+    vertical-align: baseline; /* 3 */
+    *vertical-align: middle; /* 3 */
+}
+
+/**
+ * Address Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
+ *    Known issue: inner spacing remains in IE 6.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+    *overflow: visible;  /* 4 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to content-box in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ * 3. Remove excess padding in IE 7.
+ *    Known issue: excess padding remains in IE 6.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+    *height: 13px; /* 3 */
+    *width: 13px; /* 3 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 3+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

src/_h5ai/client/css/styles.less

@@ -0,0 +1,33 @@
+
+@import "lib/h5bp-normalize";
+@import "lib/h5bp-main-header";
+
+@import "inc/general";
+@import "inc/topbar";
+@import "inc/sidebar";
+@import "inc/download";
+@import "inc/filter";
+@import "inc/tree";
+@import "inc/info";
+@import "inc/preview";
+@import "inc/preview-aud";
+@import "inc/preview-img";
+@import "inc/preview-txt";
+@import "inc/preview-vid";
+@import "inc/notify";
+
+@import "inc/content";
+@import "inc/view";
+@import "inc/view-details";
+@import "inc/view-icons";
+@import "inc/view-grid";
+@import "inc/contextmenu";
+@import "inc/fallback";
+
+@import "inc/responsive";
+
+@import "inc/h5ai-info";
+
+@import "lib/h5bp-main-footer";
+
+@import url(//fonts.googleapis.com/css?family=Roboto:300,400,700);

src/_h5ai/client/images/themes/README.md

@@ -0,0 +1,9 @@
+# Themes
+
+This directory will contain any themes you add. At the moment there are only
+icon themes supported. The folder structure is: `<theme-name>/<type>.<ext>`,
+with `<ext>` one of `svg`, `png` or `jpg`.
+
+To select a theme use the option `view > theme` in file `conf/options.json`.
+
+You will find the previously included icon themes [here](https://github.com/lrsjng/h5ai-themes).

src/_h5ai/client/images/themes/default/ar.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M5 3C3.9 3 3 3.9 3 5L3 19C3 20.1 3.9 21 5 21L19 21C20.1 21 21 20.1 21 19L21 5C21 3.9 20.1 3 19 3L5 3zM10 5L14 5 14 11 10 11 10 5z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/aud.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M6 2C4.9 2 4 2.9 4 4L4 20C4 21.1 4.9 22 6 22L18 22C19.1 22 20 21.1 20 20L20 4C20 2.9 19.1 2 18 2L6 2zM13.1 7.1C15.4 7.6 17 9.6 17 12 17 14.4 15.4 16.4 13.1 16.9L13.1 15.7C14.7 15.2 15.9 13.8 15.9 12 15.9 10.2 14.7 8.8 13.1 8.3L13.1 7.1zM12 7.6L12 16.4 9.2 13.7 7 13.7 7 10.3 9.2 10.3 12 7.6zM13.1 9.8C13.9 10.2 14.5 11 14.5 12 14.5 13 13.9 13.8 13.1 14.2L13.1 9.8z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/bin.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M5 3C3.9 3 3 3.9 3 5L3 19C3 20.1 3.9 21 5 21L19 21C20.1 21 21 20.1 21 19L21 5C21 3.9 20.1 3 19 3L5 3zM10.8 6L13.2 6C13.4 6 13.5 6.1 13.5 6.3L13.8 7.8C14.1 8 14.4 8.2 14.7 8.4L16.2 7.8C16.4 7.8 16.5 7.8 16.6 8L17.8 10C17.9 10.2 17.8 10.3 17.7 10.4L16.5 11.4C16.5 11.6 16.5 11.8 16.5 12 16.5 12.2 16.5 12.4 16.5 12.6L17.7 13.6C17.8 13.7 17.9 13.8 17.8 14L16.6 16C16.5 16.2 16.4 16.3 16.2 16.2L14.7 15.6C14.4 15.8 14.1 16 13.8 16.2L13.5 17.8C13.5 17.9 13.4 18 13.2 18L10.8 18C10.6 18 10.5 17.9 10.5 17.8L10.3 16.2C9.9 16 9.6 15.8 9.3 15.6L7.8 16.2C7.6 16.2 7.5 16.2 7.4 16L6.2 14C6.1 13.8 6.2 13.7 6.3 13.6L7.6 12.6C7.5 12.4 7.5 12.2 7.5 12 7.5 11.8 7.5 11.6 7.6 11.4L6.3 10.4C6.2 10.3 6.1 10.2 6.2 10L7.4 8C7.5 7.8 7.6 7.7 7.8 7.8L9.3 8.4C9.6 8.2 9.9 8 10.3 7.8L10.5 6.3C10.5 6.1 10.6 6 10.8 6zM12 9.9C10.8 9.9 9.9 10.8 9.9 12 9.9 13.2 10.8 14.1 12 14.1 13.2 14.1 14.1 13.2 14.1 12 14.1 10.8 13.2 9.9 12 9.9z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/file.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
+  <path d="m14 2-8 0c-1.1 0-2 0.9-2 2L4 20c0 1.1 0.9 2 2 2L18 22c1.1 0 2-0.9 2-2L20 8zm-1 7 0-5.5 5.5 5.5z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/folder-page.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M4 4C2.9 4 2 4.9 2 6L2 18C2 19.1 2.9 20 4 20L20 20C21.1 20 22 19.1 22 18L22 8C22 6.9 21.1 6 20 6L12 6 10 4 4 4zM19 9L19 17 11 17C11 12.6 14.6 9 19 9z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/folder-parent.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+  <path d="m10 4-6 6 6 6 1.4-1.4L7.8 11 15 11c1.6 0 3 1.3 3 3 0 1.7-1.4 3-3 3l0 2c2.6 0 5-2.2 5-5 0-2.8-2.4-5-5-5l-7.2 0 3.6-3.6z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/folder.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M4 4C2.9 4 2 4.9 2 6l0 2 0 1 0 9c0 1.1 0.9 2 2 2l16 0c1.1 0 2-0.9 2-2L22 8C22 6.9 21.1 6 20 6L12 6 10 4z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/img.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M4 4C2.9 4 2 4.9 2 6l0 12c0 1.1 0.9 2 2 2l16 0c1.1 0 2-0.9 2-2L22 6C22 4.9 21.1 4 20 4zm5 6 4 5 3-2 3 4-14 0z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/txt.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M14 2H6c-1.1 0-2 0.9-2 2L4 20c0 1.1 0.9 2 2 2H18c1.1 0 2-0.9 2-2V8l-6-6zM16 18H8v-2h8v2zm0-4H8v-2h8v2zM13 9v-5.5l5.5 5.5H13z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/vid.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M4 4C2.9 4 2 4.9 2 6l0 12c0 1.1 0.9 2 2 2l16 0c1.1 0 2-0.9 2-2L22 6C22 4.9 21.1 4 20 4zM4 7 6 7 6 9 4 9zm14 0 2 0 0 2-2 0zm-14 4 2 0 0 2-2 0zm14 0 2 0 0 2-2 0zm-14 4 2 0 0 2-2 0zm14 0 2 0 0 2-2 0z" fill="#555"/>
+</svg>

src/_h5ai/client/images/themes/default/x.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" version="1.1">
+  <path d="m14 2-8 0c-1.1 0-2 0.9-2 2L4 20c0 1.1 0.9 2 2 2L18 22c1.1 0 2-0.9 2-2L20 8zm-1 7 0-5.5 5.5 5.5z" fill="#555"/>
+</svg>

src/_h5ai/client/images/ui/back.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M20 11h-12.17l5.59-5.59-1.42-1.41-8 8 8 8 1.41-1.41-5.58-5.59h12.17v-2z" fill="#555"/>
+</svg>

src/_h5ai/client/images/ui/crumb.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M10 6l-1.4 1.4 4.6 4.6-4.6 4.6 1.4 1.4 6-6z" fill="#555"/>
+</svg>

src/_h5ai/client/images/ui/download.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M19 9h-4v-6h-6v6h-4l7 7 7-7zm-14 9v2h14v-2h-14z" fill="#555"/>
+</svg>

src/_h5ai/client/images/ui/filter.svg

@@ -0,0 +1,5 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" version="1.1">
+  <g transform="translate(0,-8)">
+    <path d="m15.8 22.3h-0.8l-0.3-0.3c1-1.1 1.6-2.6 1.6-4.2 0-3.6-2.9-6.5-6.5-6.5-3.6 0-6.5 2.9-6.5 6.5 0 3.6 2.9 6.5 6.5 6.5 1.6 0 3.1-0.6 4.2-1.6l0.3 0.3v0.8l5 5 1.5-1.5-5-5zm-6 0c-2.5 0-4.5-2-4.5-4.5 0-2.5 2-4.5 4.5-4.5 2.5 0 4.5 2 4.5 4.5 0 2.5-2 4.5-4.5 4.5z" fill="#555"/>
+  </g>
+</svg>

src/_h5ai/client/images/ui/info-toggle.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" version="1.1">
+  <path d="M 12 2 C 6.48 2 2 6.48 2 12 C 2 17.52 6.48 22 12 22 C 17.52 22 22 17.52 22 12 C 22 6.48 17.52 2 12 2 z M 11 7 L 13 7 L 13 9 L 11 9 L 11 7 z M 11 11 L 13 11 L 13 17 L 11 17 L 11 11 z" fill="#555"/>
+</svg>

src/_h5ai/client/images/ui/paypal.svg

@@ -0,0 +1,6 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="296" height="76" version="1.1">
+  <g transform="translate(782.29881,-654.4062)">
+    <path d="m-618.9 654.6c-1.8 0-3.5 1.4-3.9 3.1L-634.2 707.6c-0.4 1.7 0.7 3.1 2.4 3.1l8.2 0c1.7 0 3.5-1.4 3.9-3.1L-616.9 695.5c0.4-1.7 2.1-3.1 3.9-3.1l2.3 0c10 0 17.7-2 23.3-6.1 5.5-4.1 8.3-9.5 8.3-16.2 0-2.9-0.5-5.4-1.6-7.3-1-2-2.6-3.6-4.5-4.8-2-1.2-4.4-2.1-7.1-2.6-2.7-0.5-5.9-0.7-9.6-0.7l-17.1 0zm115.3 0.3 0 2.3-0.9 0 0 1.1 0.9 0 0 4.2c0 1 0.2 1.7 0.6 2.1 0.4 0.4 1 0.7 1.8 0.7 0.2 0 0.5 0 0.8-0.1 0.3 0 0.6-0.1 0.8-0.2l0-1.2-0.1 0c-0.1 0-0.3 0.1-0.5 0.2-0.2 0.1-0.5 0.1-0.7 0.1-0.4 0-0.6-0.1-0.8-0.2-0.2-0.1-0.3-0.2-0.4-0.4-0.1-0.2-0.2-0.4-0.2-0.7 0-0.2 0-0.6 0-1l0-3.6 2.8 0 0-1.1-2.7 0 0-2.3-1.3 0zm-17 0.1c-1.7 0-3.4 1.3-3.8 2.9 0 0.1 0 0.1-0.1 0.2 0 0-0.2 0.8-0.5 2.2l-10 45.4c-0.2 1-0.4 1.7-0.4 1.9l0 0c-0.3 1.6 0.6 2.9 2.2 3l0 0 7.6 0c1.7 0 3.3-1.3 3.8-2.9 0-0.1 0.1-0.1 0.1-0.2l10.9-49.4c0.4-1.7-0.7-3.1-2.5-3.1l-7.3 0c0 0 0 0 0 0zm26.6 2c-0.5 0-0.9 0.1-1.3 0.3-0.4 0.2-0.8 0.5-1.2 0.8l0-0.9-1.3 0 0 7.9 1.3 0 0-5.9c0.4-0.3 0.7-0.5 1.1-0.7 0.4-0.2 0.7-0.2 1.1-0.2 0.4 0 0.7 0.1 0.9 0.2 0.2 0.1 0.4 0.2 0.5 0.4 0.1 0.2 0.2 0.5 0.2 0.8 0 0.3 0 0.6 0 1l0 4.5 1.3 0 0-5.1c0-0.1 0-0.3 0-0.4 0-0.1 0-0.3-0.1-0.4 0.4-0.3 0.8-0.5 1.1-0.7 0.4-0.2 0.7-0.3 1.1-0.3 0.4 0 0.7 0.1 0.9 0.2 0.2 0.1 0.4 0.3 0.5 0.5 0.1 0.2 0.2 0.4 0.2 0.8 0 0.3 0 0.6 0 1l0 4.5 1.3 0 0-5.2c0-0.9-0.2-1.7-0.6-2.2-0.4-0.5-1.1-0.8-1.9-0.8-0.5 0-1 0.1-1.4 0.3-0.4 0.2-1 0.5-1.5 1-0.2-0.4-0.5-0.7-0.8-0.9-0.4-0.2-0.8-0.3-1.4-0.3zm-112.8 8 2.7 0c3.1 0 5.5 0.5 7.1 1.6 1.6 1.1 2.3 2.7 2.3 4.9 0 3.3-1.2 5.9-3.7 7.7-2.4 1.8-5.9 2.7-10.3 2.7l-2 0c-1.8 0-2.9-1.4-2.5-3.1l2.4-10.6c0.4-1.7 2.1-3.1 3.9-3.1zm50.8 2.2c-3.3 0-6.6 0.3-9.9 0.8-2.4 0.4-2.7 0.4-4.2 0.8-3.1 0.7-3.6 3.8-3.6 3.8l-1 4.1c-0.6 2.6 0.9 2.5 1.6 2.3 1.4-0.4 2.1-0.8 4.8-1.4 2.6-0.6 5.4-1 7.7-1 3.3 0 5.7 0.3 7.4 1 1.6 0.7 2.5 1.9 2.5 3.7 0 0.4 0 0.8-0.1 1.2-0.1 0.3-0.4 0.6-1.2 0.8-4.7 0.3-8 0.7-12 1.3-4 0.6-7.4 1.5-10.3 2.8-3.1 1.4-5.4 3.2-7 5.5-1.6 2.3-2.3 5.2-2.3 8.5 0 3.2 1.1 5.7 3.3 7.7 2.2 2 5.1 2.9 8.6 2.9 2.2 0 3.9-0.2 5.1-0.5 1.2-0.3 2.5-0.7 3.9-1.3 1-0.4 2.2-1.1 3.4-1.9 1.2-0.8 2-1.3 3.1-2l0 0.1-0.3 1.3c0 0 0 0 0 0l0 0c-0.3 1.6 0.6 2.9 2.2 3l0 0 0.1 0c1 0 4.6 0 6.3 0l1.2 0c0.1 0 0.1 0 0.1 0 1.6-0.2 3.1-1.5 3.5-3.1l6-25.7c0.1-0.6 0.2-1.3 0.3-2.1 0.1-0.8 0.2-1.5 0.1-1.9 0-3.6-1.5-6.3-4.6-8.1-3.1-1.7-7.9-2.6-14.6-2.6zm2.8 23.6c0.3 0 0.4 0.1 0.3 1-0.1 0.5-1.1 4.9-1.6 6.9-0.1 0.6-1 1.5-1.3 1.7-1 0.6-2.1 1.2-3.2 1.6-1.5 0.6-2.9 0.9-4.2 0.9-2 0-3.6-0.3-4.6-0.9-1.1-0.6-1.6-1.6-1.6-3 0-1.7 0.4-3 1.2-4 0.8-1 2-1.8 3.5-2.4 1.5-0.5 3.3-0.9 5.4-1.2 1.9-0.2 5.5-0.7 6-0.7 0.1 0 0.2 0 0.3 0z" fill="#369"/>
+    <path d="m-749.8 654.4-17 0c-1.8 0-3.5 1.4-3.9 3.1l-11.5 49.9c-0.4 1.7 0.7 3.1 2.5 3.1l8.2 0c1.8 0 3.5-1.4 3.9-3.1l2.8-12.1c0.4-1.7 2.1-3.1 3.9-3.1l2.3 0c10 0 17.7-2 23.3-6.1 5.5-4.1 8.3-9.5 8.3-16.2 0-2.9-0.5-5.4-1.6-7.3-1-2-2.5-3.6-4.5-4.8-2-1.2-4.3-2.1-7.1-2.6-2.7-0.5-6-0.7-9.6-0.8zm-4.8 10.4 2.7 0c3.1 0 5.5 0.5 7.1 1.6 1.6 1 2.4 2.7 2.4 4.8 0 3.3-1.2 5.9-3.7 7.7-2.5 1.8-5.9 2.7-10.3 2.7l-2 0c-1.8 0-2.9-1.4-2.5-3.1l2.5-10.6c0.4-1.7 2.1-3.1 3.9-3.1zm50.7 2.3c-3.3 0-6.6 0.2-9.9 0.8-2.4 0.4-2.6 0.5-4.2 0.8-3.1 0.7-3.6 3.8-3.6 3.8l-1 4.1c-0.6 2.6 0.9 2.5 1.6 2.3 1.3-0.4 2.1-0.8 4.8-1.4 2.6-0.6 5.4-1 7.7-1 3.3 0 5.8 0.4 7.4 1.1 1.7 0.7 2.4 1.9 2.4 3.7 0 0.4 0 0.8-0.1 1.2-0.1 0.3-0.4 0.6-1.2 0.8-4.6 0.3-8 0.7-12 1.3-4 0.6-7.4 1.5-10.3 2.8-3.1 1.4-5.4 3.2-7 5.5-1.6 2.3-2.3 5.2-2.3 8.5 0 3.2 1.1 5.8 3.3 7.8 2.2 2 5.1 2.9 8.6 2.9 2.2 0 3.9-0.2 5.1-0.5 1.2-0.3 2.5-0.7 3.9-1.3 1-0.4 2.2-1.1 3.4-1.9 1.2-0.8 2-1.3 3.1-2l0 0.1-0.3 1.3c0 0 0 0 0 0-0.3 1.6 0.6 2.9 2.2 3.1l0 0 0.1 0c1 0 4.6 0 6.3 0l1.2 0c0.1 0 0.1 0 0.1-0.1 1.6-0.2 3.1-1.5 3.5-3l5.9-25.7c0.1-0.6 0.3-1.3 0.3-2.1 0.1-0.8 0.1-1.5 0.1-1.9 0-3.6-1.5-6.3-4.6-8.1-3.1-1.7-7.9-2.6-14.6-2.6zm60.2 0.6c-1.7 0-4 1.4-5.1 3.1 0 0-11.7 20-12.8 22-0.6 1.1-1.2 0.4-1.3 0-0.1-0.5-3.6-21.9-3.6-21.9-0.4-1.7-2.2-3.2-4.4-3.2l-7.3 0c-1.8 0-2.9 1.4-2.5 3.1 0 0 5.6 31.5 6.7 39 0.5 4.1-0.1 4.8-0.1 4.8l-7.2 12.6c-1.1 1.7-0.5 3.1 1.3 3.1l8.4 0c1.7 0 4.1-1.4 5.1-3.1l32.5-54.9c0 0 3.1-4.7 0.2-4.7-2 0-9.8 0-9.8 0zM-701.4 690.8c0.5 0 0.8-0.3 0.6 1-0.1 0.5-1.1 4.9-1.6 6.9-0.1 0.6-0.9 1.5-1.3 1.7-1 0.6-2.1 1.2-3.2 1.7-1.5 0.6-2.9 0.9-4.2 0.9-2 0-3.6-0.3-4.6-0.9-1.1-0.6-1.6-1.6-1.6-3 0-1.7 0.4-3 1.2-4 0.8-1 2-1.8 3.5-2.3 1.5-0.5 3.3-0.9 5.4-1.2 1.9-0.2 5.5-0.7 6-0.7z" fill="#1c3664"/>
+  </g>
+</svg>

src/_h5ai/client/images/ui/preview-close.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M19 6.4l-1.4-1.4-5.6 5.6-5.6-5.6-1.4 1.4 5.6 5.6-5.6 5.6 1.4 1.4 5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6z" fill="#fff"/>
+</svg>

src/_h5ai/client/images/ui/preview-fullscreen.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M7 14h-2v5h5v-2h-3v-3zm-2-4h2v-3h3v-2h-5v5zm12 7h-3v2h5v-5h-2v3zm-3-12v2h3v3h2v-5h-5z" fill="#fff"/>
+</svg>

src/_h5ai/client/images/ui/preview-next.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M10 6l-1.4 1.4 4.6 4.6-4.6 4.6 1.4 1.4 6-6z" fill="#fff"/>
+</svg>

src/_h5ai/client/images/ui/preview-no-fullscreen.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M5 16h3v3h2v-5h-5v2zm3-8h-3v2h5v-5h-2v3zm6 11h2v-3h3v-2h-5v5zm2-11v-3h-2v5h5v-2h-3z" fill="#fff"/>
+</svg>

src/_h5ai/client/images/ui/preview-prev.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M14.6 18 16 16.6 11.4 12 16 7.4 14.6 6l-6 6z" fill="#fff"/>
+</svg>

src/_h5ai/client/images/ui/preview-raw.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M19 9h-4v-6h-6v6h-4l7 7 7-7zm-14 9v2h14v-2h-14z" fill="#fff"/>
+</svg>

src/_h5ai/client/images/ui/selected.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M9 16.2l-4.2-4.2-1.4 1.4 5.6 5.6 12-12-1.4-1.4z" fill="#fff"/>
+</svg>

src/_h5ai/client/images/ui/settings.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M3 18h18v-2h-18v2zm0-5h18v-2h-18v2zm0-7v2h18v-2h-18z" fill="#555"/>
+</svg>

src/_h5ai/client/images/ui/sort.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M18 9.7 16.6 8.3 12 12.9 7.4 8.3 6 9.7l6 6z" fill="#555"/>
+</svg>

src/_h5ai/client/images/ui/spinner.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white">
+  <path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/>
+  <path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z">
+    <animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite" />
+  </path>
+</svg>

src/_h5ai/client/images/ui/tree-indicator.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
+  <path d="M10 6l-1.4 1.4 4.6 4.6-4.6 4.6 1.4 1.4 6-6z" fill="#555"/>
+</svg>

src/_h5ai/client/images/ui/tree-toggle.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M4 3 4 6 7 6 7 3zm5 0 0 3 8 0 0-3zm-3 5 0 3 3 0 0-3zm5 0 0 3 9 0 0-3zm-5 5 0 3 3 0 0-3zm5 0 0 3 6 0 0-3zm-5 5 0 3 3 0 0-3zm5 0 0 3 8 0 0-3z" fill="#555"/>
+</svg>

src/_h5ai/client/images/ui/view-details.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+  <path d="m4 4 0 4 16 0 0-4zm0 6 0 4 16 0 0-4zm0 6 0 4 16 0 0-4z" fill="#555"/>
+</svg>

src/_h5ai/client/images/ui/view-grid.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+  <path d="m4 4 0 4 7 0 0-4zm9 0 0 4 7 0 0-4zm-9 6 0 4 7 0 0-4zm9 0 0 4 7 0 0-4zm-9 6 0 4 7 0 0-4zm9 0 0 4 7 0 0-4z" fill="#555"/>
+</svg>

src/_h5ai/client/images/ui/view-icons.svg

@@ -0,0 +1,3 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+  <path d="m4 4 0 7 7 0 0-7zm9 0 0 7 7 0 0-7zm-9 9 0 7 7 0 0-7zm9 0 0 7 7 0 0-7z" fill="#555"/>
+</svg>

src/_h5ai/client/js/inc/core/event.js

@@ -0,0 +1,46 @@
+modulejs.define('core/event', ['_'], function (_) {
+
+    var slice = Array.prototype.slice;
+    var subscriptions = {};
+
+
+    function sub(topic, callback) {
+
+        if (_.isString(topic) && _.isFunction(callback)) {
+
+            if (!subscriptions[topic]) {
+                subscriptions[topic] = [];
+            }
+            subscriptions[topic].push(callback);
+        }
+    }
+
+    function unsub(topic, callback) {
+
+        if (_.isString(topic) && _.isFunction(callback) && subscriptions[topic]) {
+
+            subscriptions[topic] = _.without(subscriptions[topic], callback);
+        }
+    }
+
+    function pub(topic, data) {
+
+        var args = slice.call(arguments, 1);
+
+        // console.log('EVENT PUB', topic, args);
+        if (_.isString(topic) && subscriptions[topic]) {
+
+            _.each(subscriptions[topic], function (callback) {
+
+                callback.apply(topic, args);
+            });
+        }
+    }
+
+
+    return {
+        sub: sub,
+        unsub: unsub,
+        pub: pub
+    };
+});

src/_h5ai/client/js/inc/core/format.js

@@ -0,0 +1,57 @@
+modulejs.define('core/format', ['_', 'moment'], function (_, moment) {
+
+    var decimalMetric = {
+            t: 1000.0,
+            k: 1000.0,
+            u: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+        };
+    var binaryMetric = {
+            t: 1024.0,
+            k: 1024.0,
+            u: ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+        };
+    var defaultMetric = decimalMetric;
+    var defaultDateFormat = 'YYYY-MM-DD HH:mm';
+
+
+    function setDefaultMetric(useBinaryMetric) {
+
+        defaultMetric = useBinaryMetric ? binaryMetric : decimalMetric;
+    }
+
+    function formatSize(size, metric) {
+
+        metric = metric || defaultMetric;
+
+        if (!_.isNumber(size) || size < 0) {
+            return '';
+        }
+
+        var i = 0;
+        var maxI = metric.u.length - 1;
+
+        while (size >= metric.t && i < maxI) {
+            size /= metric.k;
+            i += 1;
+        }
+        return (i <= 1 ? Math.round(size) : size.toFixed(1)).toString() + ' ' + metric.u[i];
+    }
+
+    function setDefaultDateFormat(dateFormat) {
+
+        defaultDateFormat = dateFormat;
+    }
+
+    function formatDate(millis) {
+
+        return _.isNumber(millis) && millis ? moment(millis).format(defaultDateFormat) : '';
+    }
+
+
+    return {
+        setDefaultMetric: setDefaultMetric,
+        formatSize: formatSize,
+        setDefaultDateFormat: setDefaultDateFormat,
+        formatDate: formatDate
+    };
+});

src/_h5ai/client/js/inc/core/langs.js

@@ -0,0 +1,4 @@
+modulejs.define('core/langs', ['config', '_'], function (config, _) {
+
+    return _.extend({}, config.langs);
+});

src/_h5ai/client/js/inc/core/location.js

@@ -0,0 +1,204 @@
+modulejs.define('core/location', ['_', 'modernizr', 'core/settings', 'core/event', 'core/notify'], function (_, modernizr, allsettings, event, notify) {
+
+    var settings = _.extend({
+            smartBrowsing: true,
+            unmanagedInNewWindow: true
+        }, allsettings.view);
+    var doc = document;
+    var history = settings.smartBrowsing && modernizr.history ? window.history : null;
+    var reUriToPathname = /^.*:\/\/[^\/]*|[^\/]*$/g;
+    var absHref = null;
+
+
+    function forceEncoding(href) {
+
+        return href
+                .replace(/\/+/g, '/')
+
+                .replace(/ /g, '%20')
+                .replace(/!/g, '%21')
+                .replace(/#/g, '%23')
+                .replace(/\$/g, '%24')
+                .replace(/&/g, '%26')
+                .replace(/'/g, '%27')
+                .replace(/\(/g, '%28')
+                .replace(/\)/g, '%29')
+                .replace(/\*/g, '%2A')
+                .replace(/\+/g, '%2B')
+                .replace(/\,/g, '%2C')
+                // .replace(/\//g, '%2F')
+                .replace(/:/g, '%3A')
+                .replace(/;/g, '%3B')
+                .replace(/=/g, '%3D')
+                .replace(/\?/g, '%3F')
+                .replace(/@/g, '%40')
+                .replace(/\[/g, '%5B')
+                .replace(/\]/g, '%5D');
+    }
+
+    function uriToPathname(uri) {
+
+        return uri.replace(reUriToPathname, '');
+    }
+
+    var hrefsAreDecoded = (function () {
+
+            var testpathname = '/a b';
+            var a = doc.createElement('a');
+
+            a.href = testpathname;
+            return uriToPathname(a.href) === testpathname;
+        }());
+
+    function encodedHref(href) {
+
+        var a = doc.createElement('a');
+        var location;
+
+        a.href = href;
+        location = uriToPathname(a.href);
+
+        if (hrefsAreDecoded) {
+            location = encodeURIComponent(location).replace(/%2F/ig, '/');
+        }
+
+        return forceEncoding(location);
+    }
+
+    function getDomain() {
+
+        return doc.domain;
+    }
+
+    function getAbsHref() {
+
+        return absHref;
+    }
+
+    function getItem() {
+
+        return modulejs.require('model/item').get(absHref);
+    }
+
+    function load(callback) {
+
+        modulejs.require('core/server').request({action: 'get', items: true, itemsHref: absHref, itemsWhat: 1}, function (json) {
+
+            var Item = modulejs.require('model/item');
+            var item = Item.get(absHref);
+
+            if (json) {
+
+                var found = {};
+
+                _.each(json.items, function (jsonItem) {
+
+                    var e = Item.get(jsonItem.absHref, jsonItem.time, jsonItem.size, jsonItem.is_managed, jsonItem.content, jsonItem.md5, jsonItem.sha1);
+                    found[e.absHref] = true;
+                });
+
+                _.each(item.content, function (e) {
+
+                    if (!found[e.absHref]) {
+                        Item.remove(e.absHref);
+                    }
+                });
+            }
+            if (_.isFunction(callback)) {
+                callback(item);
+            }
+        });
+    }
+
+    function setLocation(newAbsHref, keepBrowserUrl) {
+
+        event.pub('location.beforeChange');
+
+        newAbsHref = encodedHref(newAbsHref);
+
+        if (absHref !== newAbsHref) {
+            absHref = newAbsHref;
+
+            if (history) {
+                if (keepBrowserUrl) {
+                    history.replaceState({absHref: absHref}, '', absHref);
+                } else {
+                    history.pushState({absHref: absHref}, '', absHref);
+                }
+            }
+        }
+
+        var item = getItem();
+        if (item.isLoaded) {
+            event.pub('location.changed', item);
+            refresh();
+        } else {
+            notify.set('loading...');
+            load(function () {
+                item.isLoaded = true;
+                notify.set();
+                event.pub('location.changed', item);
+            });
+        }
+    }
+
+    function refresh() {
+
+        var item = getItem();
+        var oldItems = _.values(item.content);
+
+        event.pub('location.beforeRefresh');
+
+        load(function () {
+
+            var newItems = _.values(item.content);
+            var added = _.difference(newItems, oldItems);
+            var removed = _.difference(oldItems, newItems);
+
+            event.pub('location.refreshed', item, added, removed);
+        });
+    }
+
+    function setLink($el, item) {
+
+        $el.attr('href', item.absHref);
+
+        if (history && item.isFolder() && item.isManaged) {
+            $el.on('click', function () {
+
+                setLocation(item.absHref);
+                return false;
+            });
+        }
+
+        if (settings.unmanagedInNewWindow && !item.isManaged) {
+            $el.attr('target', '_blank');
+        }
+    }
+
+
+    if (history) {
+        window.onpopstate = function (e) {
+
+            if (e.state && e.state.absHref) {
+                setLocation(e.state.absHref, true);
+            }
+        };
+    }
+
+    event.sub('ready', function () {
+
+        setLocation(document.location.href, true);
+    });
+
+
+    return {
+        forceEncoding: forceEncoding,
+        getDomain: getDomain,
+        getAbsHref: getAbsHref,
+        getItem: getItem,
+        setLocation: setLocation,
+        refresh: refresh,
+        setLink: setLink
+    };
+});

src/_h5ai/client/js/inc/core/notify.js

@@ -0,0 +1,19 @@
+modulejs.define('core/notify', ['$'], function ($) {
+
+    var template = '<div id="notify"/>';
+
+    function set(content) {
+
+        if (content) {
+            $('#notify').stop(true, true).html(content).fadeIn(400);
+        } else {
+            $('#notify').stop(true, true).fadeOut(400);
+        }
+    }
+
+    $(template).hide().appendTo('body');
+
+    return {
+        set: set
+    };
+});

src/_h5ai/client/js/inc/core/resource.js

@@ -0,0 +1,40 @@
+modulejs.define('core/resource', ['_', 'config', 'core/settings'], function (_, config, settings) {
+
+    var imagesHref = settings.appHref + 'client/images/';
+    var uiHref = imagesHref + 'ui/';
+    var themesHref = imagesHref + 'themes/';
+    var defaultThemeHref = themesHref + 'default/';
+    var defaultIcons = ['file', 'folder', 'folder-page', 'folder-parent', 'ar', 'aud', 'bin', 'img', 'txt', 'vid', 'x'];
+
+
+    function image(id) {
+
+        return uiHref + id + '.svg';
+    }
+
+    function icon(id) {
+
+        var baseId = id.split('-')[0];
+        var href = config.theme[id] || config.theme[baseId];
+
+        if (href) {
+            return themesHref + href;
+        }
+
+        if (_.indexOf(defaultIcons, id) >= 0) {
+            return defaultThemeHref + id + '.svg';
+        }
+
+        if (_.indexOf(defaultIcons, baseId) >= 0) {
+            return defaultThemeHref + baseId + '.svg';
+        }
+
+        return defaultThemeHref + 'file.svg';
+    }
+
+
+    return {
+        image: image,
+        icon: icon
+    };
+});

src/_h5ai/client/js/inc/core/server.js

@@ -0,0 +1,55 @@
+modulejs.define('core/server', ['$', '_', 'config', 'core/location'], function ($, _, config, location) {
+
+    var hasApi = config.setup.API === true;
+
+
+    function request(data, callback) {
+
+        if (hasApi) {
+            $.ajax({
+                    url: location.getAbsHref(),
+                    data: data,
+                    type: 'POST',
+                    dataType: 'json'
+                })
+                .done(function (json) {
+
+                    callback(json);
+                })
+                .fail(function () {
+
+                    callback();
+                });
+        } else {
+            callback();
+        }
+    }
+
+    function formRequest(data) {
+
+        if (hasApi) {
+            var $form = $('<form method="post" style="display:none;"/>')
+                            .attr('action', location.getAbsHref());
+
+            _.each(data, function (val, key) {
+
+                $('<input type="hidden"/>')
+                    .attr('name', key)
+                    .attr('value', val)
+                    .appendTo($form);
+            });
+
+            $form.appendTo('body').submit().remove();
+        }
+    }
+
+
+    return {
+        backend: config.setup.BACKEND,
+        api: hasApi,
+        name: config.setup.SERVER_NAME,
+        version: config.setup.SERVER_VERSION,
+        request: request,
+        formRequest: formRequest
+    };
+});

src/_h5ai/client/js/inc/core/settings.js

@@ -0,0 +1,8 @@
+modulejs.define('core/settings', ['config', '_'], function (config, _) {
+
+    return _.extend({}, config.options, {
+        appHref: config.setup.APP_HREF,
+        rootHref: config.setup.ROOT_HREF,
+        currentHref: config.setup.CURRENT_HREF
+    });
+});

src/_h5ai/client/js/inc/core/store.js

@@ -0,0 +1,41 @@
+modulejs.define('core/store', ['modernizr'], function (modernizr) {
+
+    var store = modernizr.localstorage ? window.localStorage : null;
+    var key = '_h5ai';
+
+
+    function load() {
+
+        if (store) {
+            try {
+                return JSON.parse(store[key]);
+            } catch (e) {}
+        }
+        return {};
+    }
+
+    function save(obj) {
+
+        if (store) {
+            store[key] = JSON.stringify(obj);
+        }
+    }
+
+    function put(key, value) {
+
+        var obj = load();
+        obj[key] = value;
+        return save(obj);
+    }
+
+    function get(key) {
+
+        return load()[key];
+    }
+
+
+    return {
+        put: put,
+        get: get
+    };
+});

src/_h5ai/client/js/inc/core/types.js

@@ -0,0 +1,48 @@
+modulejs.define('core/types', ['config', '_'], function (config, _) {
+
+    var reEndsWithSlash = /\/$/;
+    var regexps = {};
+
+
+    function escapeRegExp(sequence) {
+
+        return sequence.replace(/[\-\[\]\/\{\}\(\)\+\?\.\\\^\$]/g, "\\$&");
+        // return sequence.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+    }
+
+    function parse(types) {
+
+        _.each(types, function (patterns, type) {
+
+            var pattern = '^(' + _.map(patterns, function (p) { return '(' + escapeRegExp(p).replace(/\*/g, '.*') + ')'; }).join('|') + ')$';
+            regexps[type] = new RegExp(pattern, 'i');
+        });
+    }
+
+    function getType(sequence) {
+
+        if (reEndsWithSlash.test(sequence)) {
+            return 'folder';
+        }
+
+        var slashidx = sequence.lastIndexOf('/');
+        var name = slashidx >= 0 ? sequence.substr(slashidx + 1) : sequence;
+
+        for (var type in regexps) {
+            if (regexps.hasOwnProperty(type)) {
+                if (regexps[type].test(name)) {
+                    return type;
+                }
+            }
+        }
+
+        return 'file';
+    }
+
+
+    parse(_.extend({}, config.types));
+
+    return {
+        getType: getType
+    };
+});

src/_h5ai/client/js/inc/core/util.js

@@ -0,0 +1,71 @@
+modulejs.define('core/util', [], function () {
+
+
+    function regularCmpFn(val1, val2) {
+
+        if (val1 < val2) {
+            return -1;
+        }
+        if (val1 > val2) {
+            return 1;
+        }
+        return 0;
+    }
+
+    // Natural Sort algorithm for Javascript - Version 0.7 - Released under MIT license
+    // Author: Jim Palmer (based on chunking idea from Dave Koelle)
+    //
+    // Modified to make it work with h5ai
+    function naturalCmpFn(val1, val2) {
+
+        var re = /(^-?[0-9]+(\.?[0-9]*)[df]?e?[0-9]?$|^0x[0-9a-f]+$|[0-9]+)/gi;
+        var sre = /(^[ ]*|[ ]*$)/g;
+        var dre = /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/;
+        var hre = /^0x[0-9a-f]+$/i;
+        var ore = /^0/;
+        // convert all to strings strip whitespace
+        var x = ('' + val1).replace(sre, '');
+        var y = ('' + val2).replace(sre, '');
+        // chunk/tokenize
+        var xN = x.replace(re, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0');
+        var yN = y.replace(re, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0');
+        // numeric, hex or date detection
+        var xD = parseInt(x.match(hre), 10) || (xN.length !== 1 && x.match(dre) && Date.parse(x));
+        var yD = parseInt(y.match(hre), 10) || xD && y.match(dre) && Date.parse(y) || null;
+        var oFxNcL, oFyNcL;
+        // first try and sort Hex codes or Dates
+        if (yD) {
+            if (xD < yD) {
+                return -1;
+            } else if (xD > yD) {
+                return 1;
+            }
+        }
+        // natural sorting through split numeric strings and default strings
+        for(var cLoc=0, numS=Math.max(xN.length, yN.length); cLoc < numS; cLoc += 1) {
+            // find floats not starting with '0', string or 0 if not defined (Clint Priest)
+            oFxNcL = !(xN[cLoc] || '').match(ore) && parseFloat(xN[cLoc]) || xN[cLoc] || 0;
+            oFyNcL = !(yN[cLoc] || '').match(ore) && parseFloat(yN[cLoc]) || yN[cLoc] || 0;
+            // handle numeric vs string comparison - number < string - (Kyle Adams)
+            if (isNaN(oFxNcL) !== isNaN(oFyNcL)) { return (isNaN(oFxNcL)) ? 1 : -1; }
+            // rely on string comparison if different types - i.e. '02' < 2 != '02' < '2'
+            else if (typeof oFxNcL !== typeof oFyNcL) {
+                oFxNcL += '';
+                oFyNcL += '';
+            }
+            if (oFxNcL < oFyNcL) {
+                return -1;
+            }
+            if (oFxNcL > oFyNcL) {
+                return 1;
+            }
+        }
+        return 0;
+    }
+
+
+    return {
+        regularCmpFn: regularCmpFn,
+        naturalCmpFn: naturalCmpFn
+    };
+});

src/_h5ai/client/js/inc/ext/autorefresh.js

@@ -0,0 +1,42 @@
+modulejs.define('ext/autorefresh', ['_', '$', 'core/settings', 'core/event', 'core/location'], function (_, $, allsettings, event, location) {
+
+    var settings = _.extend({
+            enabled: false,
+            interval: 5000
+        }, allsettings.autorefresh);
+    var timeoutId = null;
+
+
+    function heartbeat() {
+
+        location.refresh();
+    }
+
+    function before() {
+
+        clearTimeout(timeoutId);
+    }
+
+    function after() {
+
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(heartbeat, settings.interval);
+    }
+
+    function init() {
+
+        if (!settings.enabled) {
+            return;
+        }
+
+        settings.interval = Math.max(1000, settings.interval);
+
+        event.sub('location.beforeChange', before);
+        event.sub('location.beforeRefresh', before);
+        event.sub('location.changed', after);
+        event.sub('location.refreshed', after);
+    }
+
+
+    init();
+});

src/_h5ai/client/js/inc/ext/contextmenu.js

@@ -0,0 +1,179 @@
+modulejs.define('ext/contextmenu', ['_', '$', 'core/settings', 'core/resource'], function (_, $, allsettings, resource) {
+
+    var settings = _.extend({
+            enabled: false
+        }, allsettings.contextmenu);
+    var templateOverlay = '<div class="cm-overlay"/>';
+    var templatePanel = '<div class="cm-panel"><ul/></div>';
+    var templateSep = '<li class="cm-sep"/>';
+    var templateEntry = '<li class="cm-entry"><span class="cm-icon"><img/></span><span class="cm-text"/></li>';
+    var templateLabel = '<li class="cm-label"><span class="cm-text"/></li>';
+
+
+    function createOverlay(callback) {
+
+        var $overlay = $(templateOverlay);
+
+        $overlay
+            .on('click contextmenu', function (ev) {
+
+                ev.stopPropagation();
+                ev.preventDefault();
+
+                var cmId = $(ev.target).closest('.cm-entry').data('cm-id');
+
+                if (ev.target === $overlay[0] || cmId !== undefined) {
+                    $overlay.remove();
+                    callback(cmId);
+                }
+            });
+
+        return $overlay;
+    }
+
+    function createPanel(menu) {
+
+        var $panel = $(templatePanel);
+        var $ul = $panel.find('ul');
+        var $li;
+
+        _.each(menu, function (entry) {
+
+            if (entry.type === '-') {
+                $(templateSep).appendTo($ul);
+            }
+
+            else if (entry.type === 'l') {
+                $(templateLabel)
+                    .find('.cm-text').text(entry.text).end()
+                    .appendTo($ul);
+            }
+
+            else if (entry.type === 'e') {
+                $li = $(templateEntry)
+                        .data('cm-id', entry.id)
+                        .find('.cm-text').text(entry.text).end()
+                        .appendTo($ul);
+
+                if (entry.icon) {
+                    $li.find('.cm-icon img').attr('src', resource.icon(entry.icon));
+                } else {
+                    $li.find('.cm-icon').addClass('no-icon');
+                }
+            }
+        });
+
+        return $panel;
+    }
+
+    function positionPanel($overlay, $panel, x, y) {
+
+        var margin = 4;
+
+        $panel.css({
+            left: 0,
+            top: 0,
+            opacity: 0
+        });
+        $overlay.show();
+
+        var overlayOffset = $overlay.offset();
+        var overlayLeft = overlayOffset.left;
+        var overlayTop = overlayOffset.top;
+        var overlayWidth = $overlay.outerWidth(true);
+        var overlayHeight = $overlay.outerHeight(true);
+
+        var panelOffset = $panel.offset();
+        var panelLeft = panelOffset.left;
+        var panelTop = panelOffset.top;
+        var panelWidth = $panel.outerWidth(true);
+        var panelHeight = $panel.outerHeight(true);
+
+        var posLeft = x;
+        var posTop = y;
+
+        if (panelWidth > overlayWidth - 2 * margin) {
+            posLeft = margin;
+            panelWidth = overlayWidth - 2 * margin;
+        }
+
+        if (panelHeight > overlayHeight - 2 * margin) {
+            posTop = margin;
+            panelHeight = overlayHeight - 2 * margin;
+        }
+
+        if (posLeft < overlayLeft + margin) {
+            posLeft = overlayLeft + margin;
+        }
+
+        if (posLeft + panelWidth > overlayLeft + overlayWidth - margin) {
+            posLeft = overlayLeft + overlayWidth - margin - panelWidth;
+        }
+
+        if (posTop < overlayTop + margin) {
+            posTop = overlayTop + margin;
+        }
+
+        if (posTop + panelHeight > overlayTop + overlayHeight - margin) {
+            posTop = overlayTop + overlayHeight - margin - panelHeight;
+        }
+
+        $panel.css({
+            left: posLeft,
+            top: posTop,
+            width: panelWidth,
+            height: panelHeight,
+            opacity: 1
+        });
+    }
+
+    function showMenuAt(x, y, menu, callback) {
+
+        var $overlay = createOverlay(callback);
+        var $panel = createPanel(menu);
+        $overlay.append($panel).appendTo('body');
+        positionPanel($overlay, $panel, x, y);
+    }
+
+    function init() {
+
+        if (!settings.enabled) {
+            return;
+        }
+
+        $(document).on('contextmenu', function (ev) {
+
+            ev.stopPropagation();
+            ev.preventDefault();
+            $(ev.target).trigger($.Event('h5ai-contextmenu', {
+                originalEvent: ev,
+                showMenu: function (menu, callback) {
+
+                    showMenuAt(ev.pageX, ev.pageY, menu, callback);
+                }
+            }));
+        });
+
+        // var menu = [
+        //         {type: 'e', id: 'e1', text: 'testing context menus'},
+        //         {type: 'e', id: 'e2', text: 'another entry'},
+        //         {type: 'e', id: 'e3', text: 'one with icon', icon: 'folder'},
+        //         {type: '-'},
+        //         {type: 'e', id: 'e4', text: 'one with icon', icon: 'x'},
+        //         {type: 'e', id: 'e5', text: 'one with icon', icon: 'img'}
+        //     ];
+        // var callback = function (res) {
+
+        //         window.console.log('>> CB-RESULT >> ' + res);
+        //     };
+
+        // $(document).on('h5ai-contextmenu', '#items .item.folder', function (ev) {
+
+        //     window.console.log('CM', ev);
+        //     ev.showMenu(menu, callback);
+        // });
+    }
+
+
+    init();
+});

src/_h5ai/client/js/inc/ext/crumb.js

@@ -0,0 +1,86 @@
+modulejs.define('ext/crumb', ['_', '$', 'core/settings', 'core/resource', 'core/event', 'core/location'], function (_, $, allsettings, resource, event, location) {
+
+    var settings = _.extend({
+            enabled: false
+        }, allsettings.crumb);
+    var template =
+            '<a class="crumb">' +
+                '<img class="sep" src="' + resource.image('crumb') + '" alt=">"/>' +
+                '<span class="label"/>' +
+            '</a>';
+    var pageHintTemplate = '<img class="hint" src="' + resource.icon('folder-page') + '" alt="has index page"/>';
+
+
+    function update(item, force) {
+
+        if (!force && item.$crumb) {
+            return item.$crumb;
+        }
+
+        var $html = $(template);
+
+        $html
+            .addClass(item.isFolder() ? 'folder' : 'file')
+            .data('item', item);
+
+        location.setLink($html, item);
+        $html.find('.label').text(item.label).end();
+
+        if (item.isDomain() || item.isRoot()) {
+            $html.find('.sep').width(0);
+        }
+
+        if (item.isCurrentFolder()) {
+            $html.addClass('active');
+        }
+
+        if (!item.isManaged) {
+            $html.append($(pageHintTemplate));
+        }
+
+        if (item.$crumb) {
+            item.$crumb.replaceWith($html);
+        }
+        item.$crumb = $html;
+
+        return $html;
+    }
+
+    function onLocationChanged(item) {
+
+        var crumb = item.getCrumb();
+        var $crumbbar = $('#crumbbar');
+        var found = false;
+
+        $crumbbar.find('.crumb').each(function () {
+
+            var $html = $(this);
+            if ($html.data('item') === item) {
+                found = true;
+                $html.addClass('active');
+            } else {
+                $html.removeClass('active');
+            }
+        });
+
+        if (!found) {
+            $crumbbar.find('.crumb').remove();
+            _.each(crumb, function (e) {
+
+                $crumbbar.append(update(e, true));
+            });
+        }
+    }
+
+    function init() {
+
+        if (!settings.enabled) {
+            return;
+        }
+
+        event.sub('location.changed', onLocationChanged);
+    }
+
+
+    init();
+});

src/_h5ai/client/js/inc/ext/custom.js

@@ -0,0 +1,61 @@
+modulejs.define('ext/custom', ['_', '$', 'marked', 'core/settings', 'core/server', 'core/event', 'core/resource'], function (_, $, marked, allsettings, server, event, resource) {
+
+    var settings = _.extend({
+            enabled: false
+        }, allsettings.custom);
+    var $header, $footer;
+    var duration = 200;
+
+
+    function onLocationChanged(item) {
+
+        server.request({action: 'get', custom: true, customHref: item.absHref}, function (response) {
+
+            var has_header, has_footer, data, content;
+
+            if (response) {
+                data = response.custom;
+
+                if (data.header) {
+                    content = data.header;
+                    if (data.header_type === 'md') {
+                        content  = marked(content);
+                    }
+                    $header.html(content).stop().slideDown(duration);
+                    has_header = true;
+                }
+
+                if (data.footer) {
+                    content = data.footer;
+                    if (data.footer_type === 'md') {
+                        content  = marked(content);
+                    }
+                    $footer.html(content).stop().slideDown(duration);
+                    has_footer = true;
+                }
+            }
+
+            if (!has_header) {
+                $header.stop().slideUp(duration);
+            }
+            if (!has_footer) {
+                $footer.stop().slideUp(duration);
+            }
+        });
+    }
+
+    function init() {
+
+        if (!settings.enabled) {
+            return;
+        }
+
+        $header = $('<div id="content-header"/>').hide().prependTo('#content');
+        $footer = $('<div id="content-footer"/>').hide().appendTo('#content');
+
+        event.sub('location.changed', onLocationChanged);
+    }
+
+
+    init();
+});

src/_h5ai/client/js/inc/ext/download.js

@@ -0,0 +1,71 @@
+modulejs.define('ext/download', ['_', '$', 'core/settings', 'core/resource', 'core/event', 'core/location', 'core/server'], function (_, $, allsettings, resource, event, location, server) {
+
+    var settings = _.extend({
+            enabled: false,
+            type: 'php-tar',
+            packageName: 'package',
+            alwaysVisible: false
+        }, allsettings.download);
+    var downloadBtnTemplate =
+            '<div id="download" class="tool">' +
+                '<img src="' + resource.image('download') + '" alt="download"/>' +
+            '</div>';
+    var selectedItems = [];
+
+
+    function onSelection(items) {
+
+        var $download = $('#download');
+
+        selectedItems = items.slice(0);
+        if (selectedItems.length) {
+            $download.show();
+        } else if (!settings.alwaysVisible) {
+            $download.hide();
+        }
+    }
+
+    function onClick(event) {
+
+        var type = settings.type;
+        var name = settings.packageName;
+        var extension = (type === 'shell-zip') ? 'zip' : 'tar';
+
+        if (!name) {
+            if (selectedItems.length === 1) {
+                name = selectedItems[0].label;
+            } else {
+                name = location.getItem().label;
+            }
+        }
+
+        var query = {
+                action: 'download',
+                as: name + '.' + extension,
+                type: type,
+                hrefs: _.pluck(selectedItems, 'absHref').join('|:|')
+            };
+
+        server.formRequest(query);
+    }
+
+    function init() {
+
+        if (!settings.enabled) {
+            return;
+        }
+
+        $(downloadBtnTemplate)
+            .on('click', onClick)
+            .appendTo('#toolbar');
+
+        if (settings.alwaysVisible) {
+            $('#download').show();
+        }
+
+        event.sub('selection', onSelection);
+    }
+
+
+    init();
+});

src/_h5ai/client/js/inc/ext/filter.js

@@ -0,0 +1,110 @@
+modulejs.define('ext/filter', ['_', '$', 'core/settings', 'core/resource', 'core/event'], function (_, $, allsettings, resource, event) {
+
+    var settings = _.extend({
+            enabled: false
+        }, allsettings.filter);
+    var template =
+            '<div id="filter" class="tool">' +
+                '<img src="' + resource.image('filter') + '" alt="filter"/>' +
+                '<input type="text" value="" placeholder="filter"/>' +
+            '</div>';
+    var noMatchTemplate = '<div class="no-match l10n-noMatch"/>';
+    var inputIsVisible = false;
+    var $filter, $input, $noMatch;
+
+
+    function filter(re) {
+
+        var match = [];
+        var noMatch = [];
+        var duration = 200;
+
+        if (re) {
+            $('#items .item').not('.folder-parent').each(function () {
+
+                var label = $(this).find('.label').text();
+
+                if (label.match(re)) {
+                    match.push(this);
+                } else {
+                    noMatch.push(this);
+                }
+            });
+        } else {
+            match = $('#items .item').not('.folder-parent');
+        }
+
+        if (match.length) {
+            $noMatch.hide();
+        } else if (noMatch.length) {
+            setTimeout(function () { $noMatch.show(); }, duration);
+        }
+        $(match).fadeIn(duration);
+        $(noMatch).fadeOut(duration);
+    }
+
+    function escapeRegExp(sequence) {
+
+        return sequence.replace(/[\-\[\]{}()*+?.,\\$\^|#\s]/g, '\\$&');
+    }
+
+    function parseFilterSequence(sequence) {
+
+        if (sequence.substr(0, 3) === 're:') {
+            return new RegExp(sequence.substr(3));
+        }
+
+        sequence = $.map($.trim(sequence).split(/\s+/), function (part) {
+
+            return _.map(part.split(''), function (character) {
+
+                return escapeRegExp(character);
+            }).join('.*?');
+        }).join('|');
+
+        return new RegExp(sequence, 'i');
+    }
+
+    function update() {
+
+        if (inputIsVisible) {
+            var val = $input.val();
+            filter(parseFilterSequence(val));
+            $filter.addClass('active');
+            $input.focus();
+        } else {
+            filter();
+            $filter.removeClass('active');
+        }
+    }
+
+    function toggle() {
+
+        inputIsVisible = !inputIsVisible;
+        update();
+    }
+
+    function reset() {
+
+        $input.val('');
+        update();
+    }
+
+    function init() {
+
+        if (!settings.enabled) {
+            return;
+        }
+
+        $filter = $(template).appendTo('#toolbar');
+        $input = $filter.find('input');
+        $noMatch = $(noMatchTemplate).appendTo('#view');
+
+        $filter.on('click', 'img', toggle);
+        $input.on('keyup', update);
+        event.sub('location.changed', reset);
+    }
+
+
+    init();
+});

src/_h5ai/client/js/inc/ext/google-analytics.js

@@ -0,0 +1,48 @@
+modulejs.define('ext/google-analytics-ua', ['_', 'core/settings', 'core/event'], function (_, allsettings, event) {
+
+    var settings = _.extend({
+            enabled: false,
+            id: 'UA-000000-0'
+        }, allsettings['google-analytics-ua']);
+    var win = window;
+    var doc = document;
+    var scriptLiteral = 'script';
+    var id = 'h5ai-ga';
+
+
+    function init() {
+
+        if (!settings.enabled) {
+            return;
+        }
+
+        var el, firstScriptElement;
+
+        win.GoogleAnalyticsObject = id;
+        win[id] = win[id] || function () {
+            (win[id].q = win[id].q || []).push(arguments);
+        };
+        win[id].l = 1 * new Date();
+
+        el = doc.createElement(scriptLiteral);
+        el.async = true;
+        el.src = '//www.google-analytics.com/analytics.js';
+
+        firstScriptElement = doc.getElementsByTagName(scriptLiteral)[0];
+        firstScriptElement.parentNode.insertBefore(el, firstScriptElement);
+
+        win[id]('create', settings.id, 'auto');
+
+        event.sub('location.changed', function (item) {
+
+            var loc = win.location;
+            win[id]('send', 'pageview', {
+                location: loc.protocol + '//' + loc.host + item.absHref,
+                title: _.pluck(item.getCrumb(), 'label').join(' > ')
+            });
+        });
+    }
+
+
+    init();
+});

src/_h5ai/client/js/inc/ext/info.js

@@ -0,0 +1,158 @@
+modulejs.define('ext/info', ['_', '$', 'modernizr', 'core/settings', 'core/resource', 'core/store', 'core/event', 'core/format'], function (_, $, modernizr, allsettings, resource, store, event, format) {
+
+    var settings = _.extend({
+            enabled: false,
+            show: false,
+            qrcode: true,
+            qrColor: "#999"
+        }, allsettings.info);
+    var template =
+            '<div id="info">' +
+                '<div class="icon"><img/></div>' +
+                '<div class="block">' +
+                    '<div class="label"/>' +
+                    '<div class="time"/>' +
+                    '<div class="size"/>' +
+                    '<div class="content">' +
+                        '<span class="folders"/> <span class="l10n-folders"/>, ' +
+                        '<span class="files"/> <span class="l10n-files"/>' +
+                    '</div>' +
+                '</div>' +
+                '<div class="qrcode"/>' +
+            '</div>';
+    var settingsTemplate =
+            '<div class="block">' +
+                '<h1 class="l10n-info">Info</h1>' +
+                '<div id="view-info" class="button view">' +
+                    '<img src="' + resource.image('info-toggle') + '" alt="view-info"/>' +
+                '</div>' +
+            '</div>';
+    var sepTemplate = '<span class="sep"/>';
+    var storekey = 'ext/info';
+    var $img, $label, $time, $size, $content, $folders, $files, $qrcode;
+    var currentFolder;
+
+    // <span class="l10n-folders"/>
+    // <span class="l10n-files"/>
+
+    function updateSettings() {
+
+        if (store.get(storekey)) {
+            $('#view-info').addClass('active');
+            $('#info').show();
+        } else {
+            $('#view-info').removeClass('active');
+            $('#info').hide();
+        }
+    }
+
+    function update(item) {
+
+        var src = item.thumbRational || item.icon;
+        var isThumb = !!item.thumbRational;
+
+        if (item.isCurrentFolder() || !src) {
+            src = resource.icon('folder');
+        }
+
+        $img.attr('src', src);
+        if (isThumb) {
+            $img.addClass('thumb');
+        } else {
+            $img.removeClass('thumb');
+        }
+
+        $label.text(item.label);
+        if (_.isNumber(item.time)) {
+            $time.text(format.formatDate(item.time));
+        } else {
+            $time.text('.');
+        }
+
+        if (_.isNumber(item.size)) {
+            $size.text(format.formatSize(item.size));
+            $size.show();
+        } else {
+            $size.hide();
+        }
+
+        if (item.isContentFetched) {
+            var stats = item.getStats();
+            $folders.text(stats.folders);
+            $files.text(stats.files);
+            $content.show();
+        } else {
+            $content.hide();
+        }
+
+        if (settings.qrcode) {
+            $qrcode.empty().qrcode({
+                render: modernizr.canvas ? 'canvas' : 'div',
+                size: 200,
+                fill: settings.qrColor,
+                background: null,
+                text: window.location.protocol + '//' + window.location.host + item.absHref
+            });
+        }
+    }
+
+    function onMouseenter(item) {
+
+        update(item);
+    }
+
+    function onMouseleave(item) {
+
+        update(currentFolder);
+    }
+
+    function onLocationChanged(item) {
+
+        currentFolder = item;
+        update(currentFolder);
+    }
+
+    function init() {
+
+        if (!settings.enabled) {
+            return;
+        }
+
+        var $info = $(template).appendTo('#main-row');
+        $img = $info.find('.icon img');
+        $label = $info.find('.label');
+        $time = $info.find('.time');
+        $size = $info.find('.size');
+        $content = $info.find('.content');
+        $folders = $info.find('.folders');
+        $files = $info.find('.files');
+        $qrcode = $info.find('.qrcode');
+
+        if (!settings.qrcode) {
+            $qrcode.remove();
+        }
+
+        $(settingsTemplate)
+            .appendTo('#settings')
+            .find('#view-info')
+            .on('click', function (ev) {
+
+                store.put(storekey, !store.get(storekey));
+                updateSettings();
+                ev.preventDefault();
+            });
+
+        // ensure stored value is boolean, otherwise set default
+        if (typeof(store.get(storekey)) !== 'boolean') {
+            store.put(storekey, settings.show);
+        }
+        updateSettings();
+
+        event.sub('location.changed', onLocationChanged);
+        event.sub('item.mouseenter', onMouseenter);
+        event.sub('item.mouseleave', onMouseleave);
+    }
+
+
+    init();
+});

src/_h5ai/client/js/inc/ext/l10n.js

@@ -0,0 +1,139 @@
+modulejs.define('ext/l10n', ['_', '$', 'core/settings', 'core/langs', 'core/format', 'core/store', 'core/event', 'core/server'], function (_, $, allsettings, langs, format, store, event, server) {
+
+    var settings = _.extend({
+            enabled: false,
+            lang: 'en',
+            useBrowserLang: true
+        }, allsettings.l10n);
+    var defaultTranslations = {
+            isoCode: 'en',
+            lang: 'english',
+            details: 'details',
+            grid: 'grid',
+            icons: 'icons',
+            name: 'Name',
+            lastModified: 'Last modified',
+            size: 'Size',
+            parentDirectory: 'Parent Directory',
+            empty: 'empty',
+            folders: 'folders',
+            files: 'files',
+            download: 'download',
+            noMatch: 'no match',
+            dateFormat: 'YYYY-MM-DD HH:mm',
+            filter: 'filter',
+            view: 'View',
+            language: 'Language'
+        };
+    var blockTemplate = '<div class="block"><h1 class="l10n-language">Language</h1><div class="select"><select id="langs"/></div></div>';
+    var optionTemplate = '<option/>';
+    var storekey = 'ext/l10n';
+    var loaded = {
+            en: _.extend({}, defaultTranslations)
+        };
+    var currentLang = loaded.en;
+
+
+    function update(lang) {
+
+        if (lang) {
+            currentLang = lang;
+        }
+
+        $('#langs option')
+            .removeAttr('selected').removeProp('selected')
+            .filter('.' + currentLang.isoCode)
+            .attr('selected', 'selected').prop('selected', 'selected');
+
+        $.each(currentLang, function (key, value) {
+            $('.l10n-' + key).text(value);
+        });
+        format.setDefaultDateFormat(currentLang.dateFormat);
+
+        $('#items .item .date').each(function () {
+
+            var $this = $(this);
+
+            $this.text(format.formatDate($this.data('time')));
+        });
+
+        $('#filter input').attr('placeholder', currentLang.filter);
+    }
+
+    function loadLanguage(isoCode, callback) {
+
+        if (loaded[isoCode]) {
+
+            callback(loaded[isoCode]);
+        } else {
+
+            server.request({action: 'get', l10n: true, l10nCodes: isoCode}, function (response) {
+
+                var json = response.l10n && response.l10n[isoCode] ? response.l10n[isoCode] : {};
+                loaded[isoCode] = _.extend({}, defaultTranslations, json, {isoCode: isoCode});
+                callback(loaded[isoCode]);
+            });
+        }
+    }
+
+    function localize(langs, isoCode, useBrowserLang) {
+
+        var storedIsoCode = store.get(storekey);
+
+        if (langs[storedIsoCode]) {
+            isoCode = storedIsoCode;
+        } else if (useBrowserLang) {
+            var browserLang = navigator.language || navigator.browserLanguage;
+            if (browserLang) {
+                if (langs[browserLang]) {
+                    isoCode = browserLang;
+                } else if (browserLang.length > 2 && langs[browserLang.substr(0, 2)]) {
+                    isoCode = browserLang.substr(0, 2);
+                }
+            }
+        }
+
+        if (!langs[isoCode]) {
+            isoCode = 'en';
+        }
+
+        loadLanguage(isoCode, update);
+    }
+
+    function initLangSelector(langs) {
+
+        var isoCodes = _.keys(langs).sort();
+        var $block = $(blockTemplate);
+        var $select = $block.find('select')
+                .on('change', function (event) {
+                    var isoCode = event.target.value;
+                    store.put(storekey, isoCode);
+                    localize(langs, isoCode, false);
+                });
+
+        $.each(isoCodes, function (idx, isoCode) {
+            $(optionTemplate)
+                .attr('value', isoCode)
+                .addClass(isoCode)
+                .text(isoCode + ' - ' + (_.isString(langs[isoCode]) ? langs[isoCode] : langs[isoCode].lang))
+                .appendTo($select);
+        });
+
+        $block.appendTo('#settings');
+    }
+
+    function init() {
+
+        if (settings.enabled) {
+            initLangSelector(langs);
+        }
+
+        event.sub('location.changed', function () {
+
+            localize(langs, settings.lang, settings.useBrowserLang);
+        });
+    }
+
+
+    init();
+});

src/_h5ai/client/js/inc/ext/peer5.js

@@ -0,0 +1,41 @@
+modulejs.define('ext/peer5', ['_', '$', 'core/settings'], function (_, $, allsettings) {
+
+    var settings = _.extend({
+            enabled: false,
+            id: 'z142i5n5qypq4cxr'
+        }, allsettings.peer5);
+
+
+    function init() {
+
+        if (!settings.enabled) {
+            return;
+        }
+
+        var peer5js = '//api.peer5.com/peer5.js?id=' + settings.id;
+
+        // load peer5 with caching
+        $.ajax({
+            url: peer5js,
+            dataType: 'script',
+            cache:true
+        });
+
+        // attach to file items, once the DOM is ready
+        $(function() {
+
+            $('body').on('click', '.item.file > a', function (e) {
+
+                if (window.peer5) {
+                    e.preventDefault();
+                    var url = e.currentTarget.href;
+                    window.peer5.download(url);
+                    return false;
+                }
+            });
+        });
+    }
+
+
+    init();
+});

src/_h5ai/client/js/inc/ext/piwik-analytics.js

@@ -0,0 +1,32 @@
+modulejs.define('ext/piwik-analytics', ['_', '$', 'core/settings'], function (_, $, allsettings) {
+
+    var settings = _.extend({
+            enabled: false,
+            baseURL: 'not-set',
+            idSite: 0
+        }, allsettings['piwik-analytics']);
+
+
+    function init() {
+
+        if (!settings.enabled) {
+            return;
+        }
+
+        // reference: http://piwik.org/docs/javascript-tracking/
+
+        var pkBaseURL = (("https:" === document.location.protocol) ? "https://" : "http://") + settings.baseURL + '/';
+
+        $('<script/>').attr('src', pkBaseURL + 'piwik.js').appendTo('body');
+        $(window).load(function () {
+            /*global Piwik */
+
+            var piwikTracker = Piwik.getTracker(pkBaseURL + 'piwik.php', settings.idSite);
+            piwikTracker.trackPageView();
+            piwikTracker.enableLinkTracking();
+        });
+    }
+
+
+    init();
+});

src/_h5ai/client/js/inc/ext/preview-aud.js

@@ -0,0 +1,123 @@
+modulejs.define('ext/preview-audio', ['_', '$', 'moment', 'core/settings', 'core/event', 'ext/preview'], function (_, $, moment, allsettings, event, preview) {
+
+    var settings = _.extend({
+            enabled: false,
+            types: []
+        }, allsettings['preview-aud']);
+
+
+    function preloadAudio(src, callback) {
+
+        var $audio = $('<audio/>')
+                        .one('loadedmetadata', function () {
+
+                            callback($audio);
+                            // setTimeout(function () { callback($img); }, 1000); // for testing
+                        })
+                        .attr('autoplay', 'autoplay')
+                        .attr('controls', 'controls')
+                        .attr('src', src);
+    }
+
+    function onEnter(items, idx) {
+
+        var currentItems = items;
+        var currentIdx = idx;
+        var currentItem = items[idx];
+
+        function onAdjustSize() {
+
+            var $content = $('#pv-content');
+            var $audio = $('#pv-aud-audio');
+
+            if ($audio.length) {
+
+                $audio.css({
+                    'left': '' + (($content.width()-$audio.width())*0.5) + 'px',
+                    'top': '' + (($content.height()-$audio.height())*0.5) + 'px'
+                });
+
+                preview.setLabels([
+                    currentItem.label,
+                    moment(0).add('seconds', $audio[0].duration).format('m:ss')
+                ]);
+            }
+        }
+
+        function onIdxChange(rel) {
+
+            currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
+            currentItem = currentItems[currentIdx];
+
+            var spinnerTimeout = setTimeout(function () { preview.showSpinner(true); }, 200);
+
+            if ($('#pv-aud-audio').length) {
+                $('#pv-aud-audio')[0].pause();
+            }
+            preloadAudio(currentItem.absHref, function ($preloaded_audio) {
+
+                clearTimeout(spinnerTimeout);
+                preview.showSpinner(false);
+
+                $('#pv-content').fadeOut(100, function () {
+
+                    $('#pv-content').empty().append($preloaded_audio.attr('id', 'pv-aud-audio')).fadeIn(200);
+
+                    // small timeout, so $preloaded_audio is visible and therefore $preloaded_audio.width is available
+                    setTimeout(function () {
+                        onAdjustSize();
+
+                        preview.setIndex(currentIdx + 1, currentItems.length);
+                        preview.setRawLink(currentItem.absHref);
+                    }, 10);
+                });
+            });
+        }
+
+        onIdxChange(0);
+        preview.setOnIndexChange(onIdxChange);
+        preview.setOnAdjustSize(onAdjustSize);
+        preview.enter();
+    }
+
+    function initItem(item) {
+
+        if (item.$view && _.indexOf(settings.types, item.type) >= 0) {
+            item.$view.find('a').on('click', function (event) {
+
+                event.preventDefault();
+
+                var matchedEntries = _.compact(_.map($('#items .item'), function (item) {
+
+                    item = $(item).data('item');
+                    return _.indexOf(settings.types, item.type) >= 0 ? item : null;
+                }));
+
+                onEnter(matchedEntries, _.indexOf(matchedEntries, item));
+            });
+        }
+    }
+
+    function onLocationChanged(item) {
+
+        _.each(item.content, initItem);
+    }
+
+    function onLocationRefreshed(item, added, removed) {
+
+        _.each(added, initItem);
+    }
+
+    function init() {
+
+        if (!settings.enabled) {
+            return;
+        }
+
+        event.sub('location.changed', onLocationChanged);
+        event.sub('location.refreshed', onLocationRefreshed);
+    }
+
+
+    init();
+});

src/_h5ai/client/js/inc/ext/preview-img.js

@@ -0,0 +1,172 @@
+modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/event', 'core/server', 'ext/preview'], function (_, $, allsettings, event, server, preview) {
+
+    var settings = _.extend({
+            enabled: false,
+            size: null,
+            types: []
+        }, allsettings['preview-img']);
+    var templateLoading = '<img id="pv-img-image" class="loading"/>';
+    var spinnerThreshold = 200;
+    var currentItems, currentIdx, currentItem;
+
+
+    function requestSample(href, callback) {
+
+        if (!settings.size) {
+            callback(href);
+            return;
+        }
+
+        server.request({
+            action: 'getThumbHref',
+            type: 'img',
+            href: href,
+            width: settings.size,
+            height: 0
+        }, function (json) {
+
+            callback(json && json.code === 0 ? json.absHref : null);
+        });
+    }
+
+    function showSpinner(item) {
+
+        var timeoutId;
+
+        function start() {
+
+            $('#pv-content')
+                .empty()
+                .append($(templateLoading).attr('src', item.thumbSquare))
+                .show();
+
+            onAdjustSize();
+
+            preview.setLabels([item.label]);
+            preview.showSpinner(true);
+        }
+
+        function stop() {
+
+            clearTimeout(timeoutId);
+            preview.showSpinner(false);
+        }
+
+        timeoutId = setTimeout(start, spinnerThreshold);
+        return stop;
+    }
+
+    function preloadImg(item, callback) {
+
+        var hide = showSpinner(item);
+
+        requestSample(item.absHref, function (src) {
+
+            $('<img/>')
+                .one('load', function (ev) {
+
+                    hide();
+                    callback(item, ev.target);
+
+                    // for testing
+                    // setTimeout(function () { hide(); callback(item, ev.target); }, 1000);
+                })
+                .attr('src', src);
+        });
+    }
+
+    function onAdjustSize() {
+
+        var $content = $('#pv-content');
+        var $img = $('#pv-img-image');
+
+        if ($img.length === 0) {
+            return;
+        }
+
+        $img.css({
+            left: ($content.width() - $img.width()) * 0.5,
+            top: ($content.height() - $img.height()) * 0.5
+        });
+
+        var labels = [currentItem.label];
+        if (!settings.size) {
+            labels.push('' + $img[0].naturalWidth + 'x' + $img[0].naturalHeight);
+            labels.push('' + (100 * $img.width() / $img[0].naturalWidth).toFixed(0) + '%');
+        }
+        preview.setLabels(labels);
+    }
+
+    function onIdxChange(rel) {
+
+        currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
+        currentItem = currentItems[currentIdx];
+
+        preview.setIndex(currentIdx + 1, currentItems.length);
+        preview.setRawLink(currentItem.absHref);
+
+        preloadImg(currentItem, function (item, preloaded_img) {
+
+            if (item !== currentItem) {
+                return;
+            }
+
+            $('#pv-content')
+                .empty()
+                .append($(preloaded_img).attr('id', 'pv-img-image'))
+                .show();
+            onAdjustSize();
+        });
+    }
+
+    function onEnter(items, idx) {
+
+        currentItems = items;
+        currentIdx = idx;
+        onIdxChange(0);
+        preview.setOnIndexChange(onIdxChange);
+        preview.setOnAdjustSize(onAdjustSize);
+        preview.enter();
+    }
+
+    function initItem(item) {
+
+        if (item.$view && _.indexOf(settings.types, item.type) >= 0) {
+            item.$view.find('a').on('click', function (ev) {
+
+                ev.preventDefault();
+
+                var matchedEntries = _.compact(_.map($('#items .item'), function (item) {
+
+                    item = $(item).data('item');
+                    return _.indexOf(settings.types, item.type) >= 0 ? item : null;
+                }));
+
+                onEnter(matchedEntries, _.indexOf(matchedEntries, item));
+            });
+        }
+    }
+
+    function onLocationChanged(item) {
+
+        _.each(item.content, initItem);
+    }
+
+    function onLocationRefreshed(item, added, removed) {
+
+        _.each(added, initItem);
+    }
+
+    function init() {
+
+        if (!settings.enabled) {
+            return;
+        }
+
+        event.sub('location.changed', onLocationChanged);
+        event.sub('location.refreshed', onLocationRefreshed);
+    }
+
+
+    init();
+});