Begin to move all src javascript to es6. Add search/filter ignore case option.

.eslintrc

@@ -5,29 +5,8 @@
     es6: true
     node: true
 
-  ecmaFeatures:
+  parserOptions:
-    arrowFunctions: true
+    ecmaVersion: 6
-    binaryLiterals: true
-    blockBindings: true
-    classes: false
-    defaultParams: true
-    destructuring: true
-    forOf: true
-    generators: true
-    globalReturn: true
-    jsx: false
-    modules: true
-    objectLiteralComputedProperties: true
-    objectLiteralDuplicateProperties: true
-    objectLiteralShorthandMethods: true
-    objectLiteralShorthandProperties: true
-    octalLiterals: true
-    regexUFlag: true
-    regexYFlag: true
-    spread: true
-    superInFunctions: false
-    templateStrings: true
-    unicodeCodePointEscapes: true
 
   rules:
     array-bracket-spacing: [2, never]
@@ -179,7 +158,7 @@
     prefer-const: 1
     prefer-reflect: 1
     prefer-spread: 2
-    prefer-template: 0 ###
+    prefer-template: 0
     quote-props: [2, as-needed]
     quotes: [2, single, avoid-escape]
     radix: 2

CHANGELOG.md

@@ -1,5 +1,6 @@
 # Changelog
 
+* add options to filter/search ignore case
 * replace PHP `getenv` calls with `$_SERVER` lookups
 * adds `view.fallbackMode` option to generally serve only fallback mode
 * serves fallback mode for text browsers (`curl`, `links`, `lynx`, `w3m`)
@@ -15,7 +16,7 @@
 * updates `jQuery` to 2.2.4
 * updates `jquery-qrcode` to 0.14.0
 * updates `lodash` to 4.13.1 (removes `contains`)
-* updates `modulejs` to 1.14.0
+* removes `modulejs`
 
 
 ## v0.28.0 - *2015-12-19*

ghu.js

@@ -1,7 +1,7 @@
 const {resolve, join} = require('path');
 const {
     ghu, autoprefixer, cssmin, each, ife, includeit, jszip, less, mapfn,
-    newerThan, pug, read, remove, run, uglify, watch, wrap, write
+    newerThan, pug, read, remove, run, uglify, watch, webpack, wrap, write
 } = require('ghu');
 
 const ROOT = resolve(__dirname);
@@ -49,8 +49,27 @@ ghu.task('lint', 'lint all JavaScript files with eslint', () => {
 });
 
 ghu.task('build:scripts', runtime => {
-    return read(`${SRC}/_h5ai/public/js/*.js`)
+    const webpackConfig = {
+        output: {},
+        module: {
+            loaders: [
+                {
+                    include: [SRC],
+                    loader: 'babel',
+                    query: {
+                        presets: ['es2015'],
+                        cacheDirectory: true
+                    }
+                }
+            ],
+            presets: ['es2015']
+        }
+    };
+
+    return read(`${SRC}/_h5ai/public/js/scripts.js`)
         .then(newerThan(mapper, `${SRC}/_h5ai/public/js/**`))
+        .then(webpack(webpackConfig, {showStats: true}))
+        .then(wrap('\n\n// @include "vendor/*"\n\n'))
         .then(includeit())
         .then(ife(() => runtime.args.production, uglify()))
         .then(wrap(runtime.commentJs))

package.json

@@ -15,6 +15,8 @@
     "build": "node ghu release"
   },
   "devDependencies": {
+    "babel-loader": "6.2.4",
+    "babel-preset-es2015": "6.9.0",
     "eslint": "2.11.0",
     "ghu": "0.6.0"
   },

src/.eslintrc

@@ -1,43 +1,5 @@
 ---
-  env:
-    es6: false
-    node: false
-    browser: true
-    mocha: false
-
-  globals:
-    modulejs: false
-
-  ecmaFeatures:
-    arrowFunctions: false
-    binaryLiterals: false
-    blockBindings: false
-    classes: false
-    defaultParams: false
-    destructuring: false
-    forOf: false
-    generators: false
-    globalReturn: false
-    jsx: false
-    modules: false
-    objectLiteralComputedProperties: false
-    objectLiteralDuplicateProperties: false
-    objectLiteralShorthandMethods: false
-    objectLiteralShorthandProperties: false
-    octalLiterals: false
-    regexUFlag: false
-    regexYFlag: false
-    spread: false
-    superInFunctions: false
-    templateStrings: false
-    unicodeCodePointEscapes: false
-
   rules:
-    consistent-this: 0
-    func-names: 0
     max-params: [1, 10]
-    no-invalid-this: 0
+    no-console: 1
-    no-var: 0
-    object-shorthand: 0
-    prefer-arrow-callback: 0
     prefer-reflect: 0

src/_h5ai/private/conf/options.json

@@ -144,11 +144,13 @@
 
     - advanced: boolean, use advanced pattern parsing
     - debounceTime: number, debounce wait time in milliseconds
+    - ignorecase: boolean, ignore case
     */
     "filter": {
-        "enabled": false,
+        "enabled": true,
         "advanced": true,
-        "debounceTime": 100
+        "debounceTime": 100,
+        "ignorecase": true
     },
 
     /*
@@ -311,11 +313,13 @@
 
     - advanced: boolean, use advanced pattern parsing
     - debounceTime: number, debounce wait time in milliseconds
+    - ignorecase: boolean, ignore case
     */
     "search": {
         "enabled": true,
         "advanced": true,
-        "debounceTime": 300
+        "debounceTime": 300,
+        "ignorecase": true
     },
 
     /*

src/_h5ai/private/php/core/class-api.php

@@ -45,7 +45,6 @@ class Api {
 
         foreach (['langs', 'options', 'types'] as $name) {
             if ($this->request->query_boolean($name, false)) {
-
                 $methodname = 'get_' . $name;
                 $response[$name] = $this->context->$methodname();
             }
@@ -84,8 +83,9 @@ class Api {
             Util::json_fail(Util::ERR_DISABLED, 'search disabled', !$this->context->query_option('search.enabled', false));
             $href = $this->request->query('search.href');
             $pattern = $this->request->query('search.pattern');
+            $ignorecase = $this->request->query_boolean('search.ignorecase', false);
             $search = new Search($this->context);
-            $response['search'] = $search->get_items($href, $pattern);
+            $response['search'] = $search->get_items($href, $pattern, $ignorecase);
         }
 
         if ($this->request->query('thumbs', false)) {

src/_h5ai/private/php/ext/class-search.php

@@ -7,10 +7,13 @@ class Search {
         $this->context = $context;
     }
 
-    public function get_paths($root, $pattern = null) {
+    public function get_paths($root, $pattern = null, $ignorecase = false) {
         $paths = [];
         if ($pattern && $this->context->is_managed_path($root)) {
             $re = Util::wrap_pattern($pattern);
+            if ($ignorecase) {
+                $re .= 'i';
+            }
             $names = $this->context->read_dir($root);
             foreach ($names as $name) {
                 $path = $root . '/' . $name;
@@ -18,17 +21,17 @@ class Search {
                     $paths[] = $path;
                 }
                 if (@is_dir($path)) {
-                    $paths = array_merge($paths, $this->get_paths($path, $pattern));
+                    $paths = array_merge($paths, $this->get_paths($path, $pattern, $ignorecase));
                 }
             }
         }
         return $paths;
     }
 
-    public function get_items($href, $pattern = null) {
+    public function get_items($href, $pattern = null, $ignorecase = false) {
         $cache = [];
         $root = $this->context->to_path($href);
-        $paths = $this->get_paths($root, $pattern);
+        $paths = $this->get_paths($root, $pattern, $ignorecase);
         $items = array_map(function ($path) {
             return Item::get($this->context, $path, $cache)->to_json_object();
         }, $paths);

src/_h5ai/public/js/lib/boot.js

@@ -1,25 +0,0 @@
-modulejs.define('boot', ['$', 'core/server'], function ($, server) {
-    var module = $('script[data-module]').data('module');
-    var data = {
-        action: 'get',
-        setup: true,
-        options: true,
-        types: true
-    };
-
-    if (module === 'index') {
-        data.theme = true;
-        data.langs = true;
-    } else if (module === 'info') {
-        data.refresh = true;
-    } else {
-        return;
-    }
-
-    server.request(data, function (config) {
-        modulejs.define('config', config);
-        $(function () {
-            modulejs.require('main/' + module);
-        });
-    });
-});

src/_h5ai/public/js/lib/config.js

@@ -0,0 +1,10 @@
+const {request} = require('./core/server');
+
+const config = module.exports = {
+    _update: data => {
+        return request(data).then(newConfig => {
+            Object.assign(config, newConfig);
+            return config;
+        });
+    }
+};

src/_h5ai/public/js/lib/core/event.js

@@ -1,36 +1,33 @@
-modulejs.define('core/event', ['_'], function (_) {
+const {_: lo} = require('../win');
-    var slice = Array.prototype.slice;
-    var subscriptions = {};
 
-    function sub(topic, callback) {
+const subscriptions = {};
-        if (_.isString(topic) && _.isFunction(callback)) {
+
-            if (!subscriptions[topic]) {
+function sub(topic, listener) {
-                subscriptions[topic] = [];
+    if (lo.isString(topic) && lo.isFunction(listener)) {
-            }
+        if (!subscriptions[topic]) {
-            subscriptions[topic].push(callback);
+            subscriptions[topic] = [];
         }
+        subscriptions[topic].push(listener);
     }
+}
 
-    function unsub(topic, callback) {
+function unsub(topic, listener) {
-        if (_.isString(topic) && _.isFunction(callback) && subscriptions[topic]) {
+    if (lo.isString(topic) && lo.isFunction(listener) && subscriptions[topic]) {
-            subscriptions[topic] = _.without(subscriptions[topic], callback);
+        subscriptions[topic] = lo.without(subscriptions[topic], listener);
-        }
     }
+}
 
-    function pub(topic) {
+function pub(topic, ...args) {
-        var args = slice.call(arguments, 1);
+    // console.log(topic, args);
-
+    if (lo.isString(topic) && subscriptions[topic]) {
-        if (_.isString(topic) && subscriptions[topic]) {
+        lo.each(subscriptions[topic], listener => {
-            _.each(subscriptions[topic], function (callback) {
+            listener.apply(topic, args);
-                callback.apply(topic, args);
+        });
-            });
-        }
     }
+}
 
-
+module.exports = {
-    return {
+    sub,
-        sub: sub,
+    unsub,
-        unsub: unsub,
+    pub
-        pub: pub
+};
-    };
-});

src/_h5ai/public/js/lib/core/format.js

@@ -1,95 +1,96 @@
-modulejs.define('core/format', ['_'], function (_) {
+const {_: lo} = require('../win');
-    var decimalMetric = {
+
-        t: 1000.0,
+const decimalMetric = {
-        k: 1000.0,
+    t: 1000.0,
-        u: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+    k: 1000.0,
+    u: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+};
+const binaryMetric = {
+    t: 1024.0,
+    k: 1024.0,
+    u: ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+};
+let defaultMetric = decimalMetric;
+
+const datePatterns = [
+    [/YYYY/, 'Y', 4],
+    [/YY/, 'Y', 2],
+    [/Y/, 'Y', 0],
+    [/MM/, 'M', 2],
+    [/M/, 'M', 0],
+    [/DD/, 'D', 2],
+    [/D/, 'D', 0],
+    [/HH/, 'H', 2],
+    [/H/, 'H', 0],
+    [/mm/, 'm', 2],
+    [/m/, 'm', 0],
+    [/ss/, 's', 2],
+    [/s/, 's', 0]
+];
+let defaultDateFormat = 'YYYY-MM-DD HH:mm';
+
+
+function setDefaultMetric(useBinaryMetric) {
+    defaultMetric = useBinaryMetric ? binaryMetric : decimalMetric;
+}
+
+function formatSize(size, metric) {
+    metric = metric || defaultMetric;
+
+    if (!lo.isNumber(size) || size < 0) {
+        return '';
+    }
+
+    let i = 0;
+    const 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 formatNumber(number, padding) {
+    let str = String(number);
+    if (padding) {
+        str = ('000' + str).substr(-padding);
+    }
+    return str;
+}
+
+function formatDate(millis, format) {
+    if (!millis || !lo.isNumber(millis)) {
+        return '';
+    }
+
+    format = format || defaultDateFormat;
+
+    const date = new Date(millis);
+    const d = {
+        Y: date.getFullYear(),
+        M: date.getMonth() + 1,
+        D: date.getDate(),
+        H: date.getHours(),
+        m: date.getMinutes(),
+        s: date.getSeconds()
     };
-    var binaryMetric = {
+
-        t: 1024.0,
+    datePatterns.forEach(pattern => {
-        k: 1024.0,
+        format = format.replace(pattern[0], formatNumber(d[pattern[1]], pattern[2]));
-        u: ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+    });
-    };
+
-    var defaultMetric = decimalMetric;
+    return format;
-    var datePatterns = [
+}
-        [/YYYY/, 'Y', 4],
-        [/YY/, 'Y', 2],
-        [/Y/, 'Y', 0],
-        [/MM/, 'M', 2],
-        [/M/, 'M', 0],
-        [/DD/, 'D', 2],
-        [/D/, 'D', 0],
-        [/HH/, 'H', 2],
-        [/H/, 'H', 0],
-        [/mm/, 'm', 2],
-        [/m/, 'm', 0],
-        [/ss/, 's', 2],
-        [/s/, 's', 0]
-    ];
-    var defaultDateFormat = 'YYYY-MM-DD HH:mm';
 
 
-    function setDefaultMetric(useBinaryMetric) {
+module.exports = {
-        defaultMetric = useBinaryMetric ? binaryMetric : decimalMetric;
+    setDefaultMetric,
-    }
+    formatSize,
-
+    setDefaultDateFormat,
-    function formatSize(size, metric) {
+    formatDate
-        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 formatNumber(number, padding) {
-        var str = String(number);
-        if (padding) {
-            str = ('000' + str).substr(-padding);
-        }
-        return str;
-    }
-
-    function formatDate(millis, format) {
-        if (!millis || !_.isNumber(millis)) {
-            return '';
-        }
-
-        format = format || defaultDateFormat;
-
-        var date = new Date(millis);
-        var d = {
-            Y: date.getFullYear(),
-            M: date.getMonth() + 1,
-            D: date.getDate(),
-            H: date.getHours(),
-            m: date.getMinutes(),
-            s: date.getSeconds()
-        };
-
-        datePatterns.forEach(function (pattern) {
-            format = format.replace(pattern[0], formatNumber(d[pattern[1]], pattern[2]));
-        });
-
-        return format;
-    }
-
-
-    return {
-        setDefaultMetric: setDefaultMetric,
-        formatSize: formatSize,
-        setDefaultDateFormat: setDefaultDateFormat,
-        formatDate: formatDate
-    };
-});

src/_h5ai/public/js/lib/core/langs.js

@@ -1,3 +1,2 @@
-modulejs.define('core/langs', ['_', 'config'], function (_, config) {
+const config = require('../config');
-    return _.extend({}, config.langs);
+module.exports = Object.assign({}, config.langs);
-});

src/_h5ai/public/js/lib/core/location.js

@@ -1,181 +1,191 @@
-modulejs.define('core/location', ['_', 'core/event', 'core/modernizr', 'core/settings', 'view/notification'], function (_, event, modernizr, allsettings, notification) {
+const {window: win, document: doc, _: lo} = require('../win');
-    var settings = _.extend({
+const {request} = require('./server');
-        fastBrowsing: true,
+const allsettings = require('./settings');
-        unmanagedInNewWindow: true
+const modernizr = require('./modernizr');
-    }, allsettings.view);
+const event = require('./event');
-    var doc = document;
-    var history = settings.fastBrowsing && modernizr.history ? window.history : null;
-    var reUriToPathname = /^.*:\/\/[^\/]*|[^\/]*$/g;
-    var absHref = null;
-    var reForceEncoding = [
-        [/\/+/g, '/'],
-        [/ /g, '%20'],
-        [/!/g, '%21'],
-        [/#/g, '%23'],
-        [/\$/g, '%24'],
-        [/&/g, '%26'],
-        [/'/g, '%27'],
-        [/\(/g, '%28'],
-        [/\)/g, '%29'],
-        [/\*/g, '%2A'],
-        [/\+/g, '%2B'],
-        [/\,/g, '%2C'],
-        [/:/g, '%3A'],
-        [/;/g, '%3B'],
-        [/\=/g, '%3D'],
-        [/\?/g, '%3F'],
-        [/@/g, '%40'],
-        [/\[/g, '%5B'],
-        [/\]/g, '%5D']
-    ];
 
-    function forceEncoding(href) {
+const notification = require('../view/notification');
-        return reForceEncoding.reduce(function (nuHref, data) {
+
-            return nuHref.replace(data[0], data[1]);
+
-        }, href);
+const settings = lo.extend({
+    fastBrowsing: true,
+    unmanagedInNewWindow: true
+}, allsettings.view);
+const history = settings.fastBrowsing && modernizr.history ? win.history : null;
+const reUriToPathname = /^.*:\/\/[^\/]*|[^\/]*$/g;
+const reForceEncoding = [
+    [/\/+/g, '/'],
+    [/ /g, '%20'],
+    [/!/g, '%21'],
+    [/#/g, '%23'],
+    [/\$/g, '%24'],
+    [/&/g, '%26'],
+    [/'/g, '%27'],
+    [/\(/g, '%28'],
+    [/\)/g, '%29'],
+    [/\*/g, '%2A'],
+    [/\+/g, '%2B'],
+    [/\,/g, '%2C'],
+    [/:/g, '%3A'],
+    [/;/g, '%3B'],
+    [/\=/g, '%3D'],
+    [/\?/g, '%3F'],
+    [/@/g, '%40'],
+    [/\[/g, '%5B'],
+    [/\]/g, '%5D']
+];
+
+
+let absHref = null;
+
+
+function forceEncoding(href) {
+    return reForceEncoding.reduce((nuHref, data) => {
+        return nuHref.replace(data[0], data[1]);
+    }, href);
+}
+
+function uriToPathname(uri) {
+    return uri.replace(reUriToPathname, '');
+}
+
+const hrefsAreDecoded = (() => {
+    const testpathname = '/a b';
+    const a = doc.createElement('a');
+
+    a.href = testpathname;
+    return uriToPathname(a.href) === testpathname;
+})();
+
+function encodedHref(href) {
+    const a = doc.createElement('a');
+    let location;
+
+    a.href = href;
+    location = uriToPathname(a.href);
+
+    if (hrefsAreDecoded) {
+        location = encodeURIComponent(location).replace(/%2F/ig, '/');
     }
 
-    function uriToPathname(uri) {
+    return forceEncoding(location);
-        return uri.replace(reUriToPathname, '');
+}
-    }
 
-    var hrefsAreDecoded = (function () {
+function getDomain() {
-        var testpathname = '/a b';
+    return doc.domain;
-        var a = doc.createElement('a');
+}
 
-        a.href = testpathname;
+function getAbsHref() {
-        return uriToPathname(a.href) === testpathname;
+    return absHref;
-    }());
+}
 
-    function encodedHref(href) {
+function getItem() {
-        var a = doc.createElement('a');
+    const Item = require('../model/item');
-        var location;
+    return Item.get(absHref);
+}
 
-        a.href = href;
+function load(callback) {
-        location = uriToPathname(a.href);
+    request({action: 'get', items: {href: absHref, what: 1}}).then(json => {
+        const Item = require('../model/item');
+        const item = Item.get(absHref);
 
-        if (hrefsAreDecoded) {
+        if (json) {
-            location = encodeURIComponent(location).replace(/%2F/ig, '/');
+            const found = {};
-        }
 
-        return forceEncoding(location);
+            lo.each(json.items, jsonItem => {
-    }
+                const e = Item.get(jsonItem);
+                found[e.absHref] = true;
+            });
 
-    function getDomain() {
+            lo.each(item.content, e => {
-        return doc.domain;
+                if (!found[e.absHref]) {
-    }
+                    Item.remove(e.absHref);
-
-    function getAbsHref() {
-        return absHref;
-    }
-
-    function getItem() {
-        return modulejs.require('model/item').get(absHref);
-    }
-
-    function load(callback) {
-        modulejs.require('core/server').request({action: 'get', items: {href: absHref, what: 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);
-                    found[e.absHref] = true;
-                });
-
-                _.each(item.content, function (e) {
-                    if (!found[e.absHref]) {
-                        Item.remove(e.absHref);
-                    }
-                });
-            }
-            if (_.isFunction(callback)) {
-                callback(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 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);
                 }
+            });
+        }
+        if (lo.isFunction(callback)) {
+            callback(item);
+        }
+    });
+}
+
+function refresh() {
+    const item = getItem();
+    const oldItems = lo.values(item.content);
+
+    event.pub('location.beforeRefresh');
+
+    load(() => {
+        const newItems = lo.values(item.content);
+        const added = lo.difference(newItems, oldItems);
+        const removed = lo.difference(oldItems, newItems);
+
+        event.pub('location.refreshed', item, added, removed);
+    });
+}
+
+function setLocation(newAbsHref, keepBrowserUrl) {
+    event.pub('location.beforeChange');
+
+    newAbsHref = encodedHref(newAbsHref);
+
+    if (absHref !== newAbsHref) {
+        absHref = newAbsHref;
+
+        if (history) {
+            if (keepBrowserUrl) {
+                history.replaceState({absHref}, '', absHref);
+            } else {
+                history.pushState({absHref}, '', absHref);
             }
         }
+    }
 
-        var item = getItem();
+    const item = getItem();
-        if (item.isLoaded) {
+    if (item.isLoaded) {
+        event.pub('location.changed', item);
+        refresh();
+    } else {
+        notification.set('loading...');
+        load(() => {
+            item.isLoaded = true;
+            notification.set();
             event.pub('location.changed', item);
-            refresh();
+        });
-        } else {
+    }
-            notification.set('loading...');
+}
-            load(function () {
+
-                item.isLoaded = true;
+function setLink($el, item) {
-                notification.set();
+    $el.attr('href', item.absHref);
-                event.pub('location.changed', item);
+
-            });
+    if (history && item.isFolder() && item.isManaged) {
-        }
+        $el.on('click', () => {
+            setLocation(item.absHref);
+            return false;
+        });
     }
 
-    function setLink($el, item) {
+    if (settings.unmanagedInNewWindow && !item.isManaged) {
-        $el.attr('href', item.absHref);
+        $el.attr('target', '_blank');
-
-        if (history && item.isFolder() && item.isManaged) {
-            $el.on('click', function () {
-                setLocation(item.absHref);
-                return false;
-            });
-        }
-
-        if (settings.unmanagedInNewWindow && !item.isManaged) {
-            $el.attr('target', '_blank');
-        }
     }
+}
 
-    function onPopState(ev) {
+function onPopState(ev) {
-        if (ev.state && ev.state.absHref) {
+    if (ev.state && ev.state.absHref) {
-            setLocation(ev.state.absHref, true);
+        setLocation(ev.state.absHref, true);
-        }
     }
+}
 
 
-    window.onpopstate = history ? onPopState : null;
+win.onpopstate = history ? onPopState : null;
 
 
-    return {
+module.exports = {
-        forceEncoding: forceEncoding,
+    forceEncoding,
-        getDomain: getDomain,
+    getDomain,
-        getAbsHref: getAbsHref,
+    getAbsHref,
-        getItem: getItem,
+    getItem,
-        setLocation: setLocation,
+    setLocation,
-        refresh: refresh,
+    refresh,
-        setLink: setLink
+    setLink
-    };
+};
-});

src/_h5ai/public/js/lib/core/modernizr.js

@@ -1,25 +1,25 @@
-modulejs.define('core/modernizr', function () {
+const win = require('../win');
-    var hasCanvas = (function () {
-        var elem = document.createElement('canvas');
-        return Boolean(elem.getContext && elem.getContext('2d'));
-    }());
 
-    var hasHistory = Boolean(window.history && history.pushState);
+const hasCanvas = (() => {
+    const elem = win.document.createElement('canvas');
+    return !!(elem.getContext && elem.getContext('2d'));
+})();
 
-    var hasLocalStorage = (function () {
+const hasHistory = !!(win.history && win.history.pushState);
-        var key = '#test#';
-        try {
-            localStorage.setItem(key, key);
-            localStorage.removeItem(key);
-            return true;
-        } catch (e) {
-            return false;
-        }
-    }());
 
-    return {
+const hasLocalStorage = (() => {
-        canvas: hasCanvas,
+    const key = '#test#';
-        history: hasHistory,
+    try {
-        localstorage: hasLocalStorage
+        win.localStorage.setItem(key, key);
-    };
+        win.localStorage.removeItem(key);
-});
+        return true;
+    } catch (e) {
+        return false;
+    }
+})();
+
+module.exports = {
+    canvas: hasCanvas,
+    history: hasHistory,
+    localstorage: hasLocalStorage
+};

src/_h5ai/public/js/lib/core/resource.js

@@ -1,37 +1,39 @@
-modulejs.define('core/resource', ['_', 'config', 'core/settings'], function (_, config, settings) {
+const {_: lo} = require('../win');
-    var imagesHref = settings.publicHref + 'images/';
+const config = require('../config');
-    var uiHref = imagesHref + 'ui/';
+const settings = require('./settings');
-    var themesHref = imagesHref + 'themes/';
+
-    var defaultThemeHref = themesHref + 'default/';
+const imagesHref = settings.publicHref + 'images/';
-    var defaultIcons = ['file', 'folder', 'folder-page', 'folder-parent', 'ar', 'aud', 'bin', 'img', 'txt', 'vid', 'x'];
+const uiHref = imagesHref + 'ui/';
+const themesHref = imagesHref + 'themes/';
+const defaultThemeHref = themesHref + 'default/';
+const defaultIcons = ['file', 'folder', 'folder-page', 'folder-parent', 'ar', 'aud', 'bin', 'img', 'txt', 'vid', 'x'];
 
 
-    function image(id) {
+function image(id) {
-        return uiHref + id + '.svg';
+    return uiHref + id + '.svg';
+}
+
+function icon(id) {
+    const baseId = (id || '').split('-')[0];
+    const href = config.theme[id] || config.theme[baseId];
+
+    if (href) {
+        return themesHref + href;
     }
 
-    function icon(id) {
+    if (lo.includes(defaultIcons, id)) {
-        var baseId = (id || '').split('-')[0];
+        return defaultThemeHref + id + '.svg';
-        var href = config.theme[id] || config.theme[baseId];
-
-        if (href) {
-            return themesHref + href;
-        }
-
-        if (_.includes(defaultIcons, id)) {
-            return defaultThemeHref + id + '.svg';
-        }
-
-        if (_.includes(defaultIcons, baseId)) {
-            return defaultThemeHref + baseId + '.svg';
-        }
-
-        return defaultThemeHref + 'file.svg';
     }
 
+    if (lo.includes(defaultIcons, baseId)) {
+        return defaultThemeHref + baseId + '.svg';
+    }
 
-    return {
+    return defaultThemeHref + 'file.svg';
-        image: image,
+}
-        icon: icon
+
-    };
+
-});
+module.exports = {
+    image,
+    icon
+};

src/_h5ai/public/js/lib/core/server.js

@@ -1,35 +1,32 @@
-modulejs.define('core/server', ['_', '$'], function (_, $) {
+const {jQuery: jq, _: lo} = require('../win');
-    function request(data, callback) {
+
-        $.ajax({
+function request(data) {
+    return new Promise(resolve => {
+        jq.ajax({
             url: '?',
-            data: data,
+            data,
             type: 'post',
             dataType: 'json'
         })
-        .done(function (json) {
+        .done(json => resolve(json))
-            callback(json);
+        .fail(() => resolve());
-        })
+    });
-        .fail(function () {
+}
-            callback();
-        });
-    }
 
-    function formRequest(data) {
+function formRequest(data) {
-        var $form = $('<form method="post" action="?" style="display:none;"/>');
+    const $form = jq('<form method="post" action="?" style="display:none;"/>');
 
-        _.each(data, function (val, key) {
+    lo.each(data, (val, key) => {
-            $('<input type="hidden"/>')
+        jq('<input type="hidden"/>')
-                .attr('name', key)
+            .attr('name', key)
-                .attr('value', val)
+            .attr('value', val)
-                .appendTo($form);
+            .appendTo($form);
-        });
+    });
 
-        $form.appendTo('body').submit().remove();
+    $form.appendTo('body').submit().remove();
-    }
+}
 
-
+module.exports = {
-    return {
+    request,
-        request: request,
+    formRequest
-        formRequest: formRequest
+};
-    };
-});

src/_h5ai/public/js/lib/core/settings.js

@@ -1,6 +1,6 @@
-modulejs.define('core/settings', ['_', 'config'], function (_, config) {
+const config = require('../config');
-    return _.extend({}, config.options, {
+
-        publicHref: config.setup.PUBLIC_HREF,
+module.exports = Object.assign({}, config.options, {
-        rootHref: config.setup.ROOT_HREF
+    publicHref: config.setup.PUBLIC_HREF,
-    });
+    rootHref: config.setup.ROOT_HREF
 });

src/_h5ai/public/js/lib/core/store.js

@@ -1,32 +1,33 @@
-modulejs.define('core/store', ['core/modernizr'], function (modernizr) {
+const win = require('../win');
-    var store = modernizr.localstorage ? window.localStorage : {};
+const modernizr = require('./modernizr');
-    var storekey = '_h5ai';
+
+const store = modernizr.localstorage ? win.localStorage : {};
+const storekey = '_h5ai';
 
 
-    function load() {
+function load() {
-        try {
+    try {
-            return JSON.parse(store[storekey]);
+        return JSON.parse(store[storekey]);
-        } catch (e) {/* skip */}
+    } catch (e) {/* skip */}
-        return {};
+    return {};
-    }
+}
 
-    function save(obj) {
+function save(obj) {
-        store[storekey] = JSON.stringify(obj);
+    store[storekey] = JSON.stringify(obj);
-    }
+}
 
-    function put(key, value) {
+function put(key, value) {
-        var obj = load();
+    const obj = load();
-        obj[key] = value;
+    obj[key] = value;
-        save(obj);
+    save(obj);
-    }
+}
 
-    function get(key) {
+function get(key) {
-        return load()[key];
+    return load()[key];
-    }
+}
 
 
-    return {
+module.exports = {
-        put: put,
+    put,
-        get: get
+    get
-    };
+};
-});

src/_h5ai/public/js/lib/core/types.js

@@ -1,43 +1,44 @@
-modulejs.define('core/types', ['_', 'config'], function (_, config) {
+const {_: lo} = require('../win');
-    var reEndsWithSlash = /\/$/;
+const config = require('../config');
-    var regexps = {};
+
+const reEndsWithSlash = /\/$/;
+const regexps = {};
 
 
-    function escapeRegExp(sequence) {
+function escapeRegExp(sequence) {
-        return sequence.replace(/[\-\[\]\/\{\}\(\)\+\?\.\\\^\$]/g, '\\$&');
+    return sequence.replace(/[\-\[\]\/\{\}\(\)\+\?\.\\\^\$]/g, '\\$&');
-        // return sequence.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+    // return sequence.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+}
+
+function parse(types) {
+    lo.each(types, (patterns, type) => {
+        const pattern = '^(' + lo.map(patterns, p => '(' + escapeRegExp(p).replace(/\*/g, '.*') + ')').join('|') + ')$';
+        regexps[type] = new RegExp(pattern, 'i');
+    });
+}
+
+function getType(sequence) {
+    if (reEndsWithSlash.test(sequence)) {
+        return 'folder';
     }
 
-    function parse(types) {
+    const slashidx = sequence.lastIndexOf('/');
-        _.each(types, function (patterns, type) {
+    const name = slashidx >= 0 ? sequence.substr(slashidx + 1) : sequence;
-            var pattern = '^(' + _.map(patterns, function (p) { return '(' + escapeRegExp(p).replace(/\*/g, '.*') + ')'; }).join('|') + ')$';
+    let result;
-            regexps[type] = new RegExp(pattern, 'i');
-        });
-    }
 
-    function getType(sequence) {
+    lo.each(regexps, (regexp, type) => { // eslint-disable-line consistent-return
-        if (reEndsWithSlash.test(sequence)) {
+        if (regexps[type].test(name)) {
-            return 'folder';
+            result = type;
+            return false;
         }
+    });
 
-        var slashidx = sequence.lastIndexOf('/');
+    return result ? result : 'file';
-        var name = slashidx >= 0 ? sequence.substr(slashidx + 1) : sequence;
+}
-        var result;
-
-        _.each(regexps, function (regexp, type) { // eslint-disable-line consistent-return
-            if (regexps[type].test(name)) {
-                result = type;
-                return false;
-            }
-        });
-
-        return result ? result : 'file';
-    }
 
 
-    parse(_.extend({}, config.types));
+parse(Object.assign({}, config.types));
 
-    return {
+module.exports = {
-        getType: getType
+    getType
-    };
+};
-});

src/_h5ai/public/js/lib/core/util.js

@@ -1,93 +1,93 @@
-modulejs.define('core/util', ['_'], function (_) {
+const {_: lo} = require('../win');
-    function regularCmpFn(val1, val2) {
+
-        if (val1 < val2) {
+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) {
+    const re = /(^-?[0-9]+(\.?[0-9]*)[df]?e?[0-9]?$|^0x[0-9a-f]+$|[0-9]+)/gi;
+    const sre = /(^[ ]*|[ ]*$)/g;
+    const dre = /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/;
+    const hre = /^0x[0-9a-f]+$/i;
+    const ore = /^0/;
+    // convert all to strings strip whitespace
+    const x = String(val1).replace(sre, '');
+    const y = String(val2).replace(sre, '');
+    // chunk/tokenize
+    const xN = x.replace(re, '\0$1\0').replace(/\0$/, '').replace(/^\0/, '').split('\0');
+    const yN = y.replace(re, '\0$1\0').replace(/\0$/, '').replace(/^\0/, '').split('\0');
+    // numeric, hex or date detection
+    const xD = parseInt(x.match(hre), 10) || xN.length !== 1 && x.match(dre) && Date.parse(x);
+    const yD = parseInt(y.match(hre), 10) || xD && y.match(dre) && Date.parse(y) || null;
+    let oFxNcL;
+    let oFyNcL;
+    // first try and sort Hex codes or Dates
+    if (yD) {
+        if (xD < yD) {
             return -1;
-        }
+        } else if (xD > yD) {
-        if (val1 > val2) {
             return 1;
         }
-        return 0;
+    }
+    // natural sorting through split numeric strings and default strings
+    for (let 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;
+        } else if (typeof oFxNcL !== typeof oFyNcL) {
+            // rely on string comparison if different types - i.e. '02' < 2 != '02' < '2'
+            oFxNcL = String(oFxNcL);
+            oFxNcL = String(oFxNcL);
+        }
+        if (oFxNcL < oFyNcL) {
+            return -1;
+        }
+        if (oFxNcL > oFyNcL) {
+            return 1;
+        }
+    }
+    return 0;
+}
+
+function escapePattern(sequence) {
+    return sequence.replace(/[\-\[\]{}()*+?.,\\$\^|#\s]/g, '\\$&');
+}
+
+function parsePattern(sequence, advanced) {
+    if (!advanced) {
+        return escapePattern(sequence);
     }
 
-    // Natural Sort algorithm for Javascript - Version 0.7 - Released under MIT license
+    if (sequence.substr(0, 3) === 're:') {
-    // Author: Jim Palmer (based on chunking idea from Dave Koelle)
+        return sequence.substr(3);
-    //
-    // 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 = String(val1).replace(sre, '');
-        var y = String(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;
-        var 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;
-            } else if (typeof oFxNcL !== typeof oFyNcL) {
-                // rely on string comparison if different types - i.e. '02' < 2 != '02' < '2'
-                oFxNcL = String(oFxNcL);
-                oFxNcL = String(oFxNcL);
-            }
-            if (oFxNcL < oFyNcL) {
-                return -1;
-            }
-            if (oFxNcL > oFyNcL) {
-                return 1;
-            }
-        }
-        return 0;
     }
 
-    function escapePattern(sequence) {
+    sequence = lo.map(lo.trim(sequence).split(/\s+/), part => {
-        return sequence.replace(/[\-\[\]{}()*+?.,\\$\^|#\s]/g, '\\$&');
+        return lo.map(part.split(''), character => {
-    }
+            return escapePattern(character);
+        }).join('.*?');
+    }).join('|');
 
-    function parsePattern(sequence, advanced) {
+    return sequence;
-        if (!advanced) {
+}
-            return escapePattern(sequence);
-        }
-
-        if (sequence.substr(0, 3) === 're:') {
-            return sequence.substr(3);
-        }
-
-        sequence = _.map(_.trim(sequence).split(/\s+/), function (part) {
-            return _.map(part.split(''), function (character) {
-                return escapePattern(character);
-            }).join('.*?');
-        }).join('|');
-
-        return sequence;
-    }
 
 
-    return {
+module.exports = {
-        regularCmpFn: regularCmpFn,
+    regularCmpFn,
-        naturalCmpFn: naturalCmpFn,
+    naturalCmpFn,
-        escapePattern: escapePattern,
+    escapePattern,
-        parsePattern: parsePattern
+    parsePattern
-    };
+};
-});

src/_h5ai/public/js/lib/ext/autorefresh.js

@@ -1,37 +1,41 @@
-modulejs.define('ext/autorefresh', ['_', '$', 'core/event', 'core/location', 'core/settings'], function (_, $, event, location, allsettings) {
+const {setTimeout} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false,
+const location = require('../core/location');
-        interval: 5000
+const allsettings = require('../core/settings');
-    }, allsettings.autorefresh);
-    var timeoutId = null;
 
 
-    function heartbeat() {
+const settings = Object.assign({
-        location.refresh();
+    enabled: false,
+    interval: 5000
+}, allsettings.autorefresh);
+let 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;
     }
 
-    function before() {
+    settings.interval = Math.max(1000, settings.interval);
-        clearTimeout(timeoutId);
-    }
 
-    function after() {
+    event.sub('location.beforeChange', before);
-        clearTimeout(timeoutId);
+    event.sub('location.beforeRefresh', before);
-        timeoutId = setTimeout(heartbeat, settings.interval);
+    event.sub('location.changed', after);
-    }
+    event.sub('location.refreshed', after);
-
+}
-    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();
+init();
-});

src/_h5ai/public/js/lib/ext/contextmenu.js

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

src/_h5ai/public/js/lib/ext/crumb.js

@@ -1,58 +1,65 @@
-modulejs.define('ext/crumb', ['_', '$', 'core/event', 'core/location', 'core/resource', 'core/settings', 'view/topbar'], function (_, $, event, location, resource, allsettings, topbar) {
+const {jQuery: jq, _: lo} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false
+const location = require('../core/location');
-    }, allsettings.crumb);
+const resource = require('../core/resource');
-    var crumbTemplate =
+const allsettings = require('../core/settings');
-            '<a class="crumb">' +
+const topbar = require('../view/topbar');
-                '<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"/>';
-    var $crumbbar;
 
 
-    function createHtml(item) {
+const settings = lo.extend({
-        var $html = $(crumbTemplate).data('item', item);
+    enabled: false
-        item.$crumb = $html;
+}, allsettings.crumb);
-        location.setLink($html, item);
+const crumbTemplate =
+        `<a class="crumb">
+            <img class="sep" src="${resource.image('crumb')}" alt=">"/>
+            <span class="label"/>
+        </a>`;
+const pageHintTemplate =
+        `<img class="hint" src="${resource.icon('folder-page')}" alt="has index page"/>`;
+let $crumbbar;
 
-        $html.find('.label').text(item.label);
 
-        if (item.isCurrentFolder()) {
+function createHtml(item) {
-            $html.addClass('active');
+    const $html = jq(crumbTemplate).data('item', item);
-        }
+    item.$crumb = $html;
+    location.setLink($html, item);
 
-        if (!item.isManaged) {
+    $html.find('.label').text(item.label);
-            $html.append($(pageHintTemplate));
-        }
 
-        return $html;
+    if (item.isCurrentFolder()) {
+        $html.addClass('active');
     }
 
-    function onLocationChanged(item) {
+    if (!item.isManaged) {
-        var $crumb = item.$crumb;
+        $html.append(jq(pageHintTemplate));
-
-        if ($crumb && $crumb.parent()[0] === $crumbbar[0]) {
-            $crumbbar.children().removeClass('active');
-            $crumb.addClass('active');
-        } else {
-            $crumbbar.empty();
-            _.each(item.getCrumb(), function (crumbItem) {
-                $crumbbar.append(createHtml(crumbItem));
-            });
-        }
     }
 
-    function init() {
+    return $html;
-        if (!settings.enabled) {
+}
-            return;
-        }
 
-        $crumbbar = $('<div id="crumbbar"/>').appendTo(topbar.$flowbar);
+function onLocationChanged(item) {
+    const $crumb = item.$crumb;
 
-        event.sub('location.changed', onLocationChanged);
+    if ($crumb && $crumb.parent()[0] === $crumbbar[0]) {
+        $crumbbar.children().removeClass('active');
+        $crumb.addClass('active');
+    } else {
+        $crumbbar.empty();
+        lo.each(item.getCrumb(), crumbItem => {
+            $crumbbar.append(createHtml(crumbItem));
+        });
+    }
+}
+
+function init() {
+    if (!settings.enabled) {
+        return;
     }
 
+    $crumbbar = jq('<div id="crumbbar"/>').appendTo(topbar.$flowbar);
 
-    init();
+    event.sub('location.changed', onLocationChanged);
-});
+}
+
+
+init();

src/_h5ai/public/js/lib/ext/custom.js

@@ -1,62 +1,66 @@
-modulejs.define('ext/custom', ['_', '$', 'marked', 'core/event', 'core/server', 'core/settings'], function (_, $, marked, event, server, allsettings) {
+const {jQuery: jq, _: lo, marked} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false
+const server = require('../core/server');
-    }, allsettings.custom);
+const allsettings = require('../core/settings');
-    var $header;
-    var $footer;
-    var duration = 200;
 
 
-    function onLocationChanged(item) {
+const settings = lo.extend({
-        server.request({action: 'get', custom: item.absHref}, function (response) {
+    enabled: false
-            var custom = response && response.custom;
+}, allsettings.custom);
-            var hasHeader;
+let $header;
-            var hasFooter;
+let $footer;
+const duration = 200;
 
-            if (custom) {
-                var header = custom.header;
-                var footer = custom.footer;
-                var content;
 
-                if (header.content) {
+function onLocationChanged(item) {
-                    content = header.content;
+    server.request({action: 'get', custom: item.absHref}).then(response => {
-                    if (header.type === 'md') {
+        const custom = response && response.custom;
-                        content = marked(content);
+        let hasHeader;
-                    }
+        let hasFooter;
-                    $header.html(content).stop().slideDown(duration);
+
-                    hasHeader = true;
+        if (custom) {
+            const header = custom.header;
+            const footer = custom.footer;
+            let content;
+
+            if (header.content) {
+                content = header.content;
+                if (header.type === 'md') {
+                    content = marked(content);
                 }
+                $header.html(content).stop().slideDown(duration);
+                hasHeader = true;
+            }
 
-                if (footer.content) {
+            if (footer.content) {
-                    content = footer.content;
+                content = footer.content;
-                    if (footer.type === 'md') {
+                if (footer.type === 'md') {
-                        content = marked(content);
+                    content = marked(content);
-                    }
-                    $footer.html(content).stop().slideDown(duration);
-                    hasFooter = true;
                 }
+                $footer.html(content).stop().slideDown(duration);
+                hasFooter = true;
             }
-
-            if (!hasHeader) {
-                $header.stop().slideUp(duration);
-            }
-            if (!hasFooter) {
-                $footer.stop().slideUp(duration);
-            }
-        });
-    }
-
-    function init() {
-        if (!settings.enabled) {
-            return;
         }
 
-        $header = $('<div id="content-header"/>').hide().prependTo('#content');
+        if (!hasHeader) {
-        $footer = $('<div id="content-footer"/>').hide().appendTo('#content');
+            $header.stop().slideUp(duration);
+        }
+        if (!hasFooter) {
+            $footer.stop().slideUp(duration);
+        }
+    });
+}
 
-        event.sub('location.changed', onLocationChanged);
+function init() {
+    if (!settings.enabled) {
+        return;
     }
 
+    $header = jq('<div id="content-header"/>').hide().prependTo('#content');
+    $footer = jq('<div id="content-footer"/>').hide().appendTo('#content');
 
-    init();
+    event.sub('location.changed', onLocationChanged);
-});
+}
+
+
+init();

src/_h5ai/public/js/lib/ext/download.js

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

src/_h5ai/public/js/lib/ext/filter.js

@@ -1,83 +1,91 @@
-modulejs.define('ext/filter', ['_', '$', 'core/event', 'core/location', 'core/resource', 'core/settings', 'core/util', 'view/view'], function (_, $, event, location, resource, allsettings, util, view) {
+const {jQuery: jq, _: lo} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false,
+const location = require('../core/location');
-        advanced: false,
+const resource = require('../core/resource');
-        debounceTime: 100
+const allsettings = require('../core/settings');
-    }, allsettings.filter);
+const util = require('../core/util');
-    var template =
+const view = require('../view/view');
-            '<div id="filter" class="tool">' +
-                '<img src="' + resource.image('filter') + '" alt="filter"/>' +
-                '<input class="l10n_ph-filter" type="text" value=""/>' +
-            '</div>';
-    var inputIsVisible = false;
-    var prevPattern = '';
-    var $filter;
-    var $input;
 
 
-    function filter(pattern) {
+const settings = lo.extend({
-        pattern = pattern || '';
+    enabled: false,
-        if (pattern === prevPattern) {
+    advanced: false,
-            return;
+    debounceTime: 100,
+    ignorecase: true
+}, allsettings.filter);
+const template =
+        `<div id="filter" class="tool">
+            <img src="${resource.image('filter')}" alt="filter"/>
+            <input class="l10n_ph-filter" type="text" value=""/>
+        </div>`;
+let inputIsVisible = false;
+let prevPattern = '';
+let $filter;
+let $input;
+
+
+function filter(pattern) {
+    pattern = pattern || '';
+    if (pattern === prevPattern) {
+        return;
+    }
+    prevPattern = pattern;
+
+    if (!pattern) {
+        view.setLocation();
+        return;
+    }
+
+    $filter.addClass('pending');
+
+    const re = new RegExp(pattern, settings.ignorecase ? 'i' : '');
+    const matchedItems = [];
+
+    lo.each(location.getItem().content, item => {
+        if (re.test(item.label)) {
+            matchedItems.push(item);
         }
-        prevPattern = pattern;
+    });
 
-        if (!pattern) {
+    $filter.removeClass('pending');
-            view.setLocation();
+    view.setHint('noMatch');
-            return;
+    view.setItems(matchedItems);
-        }
+}
 
-        $filter.addClass('pending');
+function update() {
+    if (inputIsVisible) {
+        $filter.addClass('active');
+        $input.focus();
+        filter(util.parsePattern($input.val(), settings.advanced));
+    } else {
+        filter();
+        $filter.removeClass('active');
+    }
+}
 
-        var re = new RegExp(pattern);
+function toggle() {
-        var matchedItems = [];
+    inputIsVisible = !inputIsVisible;
+    update();
+}
 
-        _.each(location.getItem().content, function (item) {
+function reset() {
-            if (re.test(item.label)) {
+    inputIsVisible = false;
-                matchedItems.push(item);
+    $input.val('');
-            }
+    update();
-        });
+}
 
-        $filter.removeClass('pending');
+function init() {
-        view.setHint('noMatch');
+    if (!settings.enabled) {
-        view.setItems(matchedItems);
+        return;
     }
 
-    function update() {
+    $filter = jq(template).appendTo('#toolbar');
-        if (inputIsVisible) {
+    $input = $filter.find('input');
-            $filter.addClass('active');
-            $input.focus();
-            filter(util.parsePattern($input.val(), settings.advanced));
-        } else {
-            filter();
-            $filter.removeClass('active');
-        }
-    }
 
-    function toggle() {
+    $filter.on('click', 'img', toggle);
-        inputIsVisible = !inputIsVisible;
+    $input.on('keyup', lo.debounce(update, settings.debounceTime, {trailing: true}));
-        update();
+    event.sub('location.changed', reset);
-    }
+}
-
-    function reset() {
-        inputIsVisible = false;
-        $input.val('');
-        update();
-    }
-
-    function init() {
-        if (!settings.enabled) {
-            return;
-        }
-
-        $filter = $(template).appendTo('#toolbar');
-        $input = $filter.find('input');
-
-        $filter.on('click', 'img', toggle);
-        $input.on('keyup', _.debounce(update, settings.debounceTime, {trailing: true}));
-        event.sub('location.changed', reset);
-    }
 
 
-    init();
+init();
-});

src/_h5ai/public/js/lib/ext/google-analytics.js

@@ -1,37 +1,38 @@
-modulejs.define('ext/google-analytics-ua', ['_', 'core/event', 'core/settings'], function (_, event, allsettings) {
+const {window: win, _: lo} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false,
+const allsettings = require('../core/settings');
-        id: 'UA-000000-0'
-    }, allsettings['google-analytics-ua']);
 
-    function snippet() {
+
-        /* eslint-disable */
+const settings = lo.extend({
-        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    enabled: false,
-        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    id: 'UA-000000-0'
-        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+}, allsettings['google-analytics-ua']);
-        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
-        /* eslint-enable */
+function snippet() {
+    /* eslint-disable */
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    /* eslint-enable */
+}
+
+function init() {
+    if (!settings.enabled) {
+        return;
     }
 
-    function init() {
+    snippet();
-        if (!settings.enabled) {
-            return;
-        }
 
-        snippet();
+    win.ga('create', settings.id, 'auto');
 
-        var WIN = window;
+    event.sub('location.changed', item => {
-        var GA = 'ga';
+        const loc = win.location;
-        WIN[GA]('create', settings.id, 'auto');
+        win.ga('send', 'pageview', {
-
+            location: loc.protocol + '//' + loc.host + item.absHref,
-        event.sub('location.changed', function (item) {
+            title: lo.map(item.getCrumb(), 'label').join(' > ')
-            var loc = WIN.location;
-            WIN[GA]('send', 'pageview', {
-                location: loc.protocol + '//' + loc.host + item.absHref,
-                title: _.map(item.getCrumb(), 'label').join(' > ')
-            });
         });
-    }
+    });
+}
 
-    init();
+init();
-});

src/_h5ai/public/js/lib/ext/info.js

@@ -1,154 +1,161 @@
-modulejs.define('ext/info', ['_', '$', 'core/event', 'core/format', 'core/modernizr', 'core/resource', 'core/settings', 'core/store'], function (_, $, event, format, modernizr, resource, allsettings, store) {
+const {window: win, jQuery: jq, _: lo} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false,
+const format = require('../core/format');
-        show: false,
+const modernizr = require('../core/modernizr');
-        qrcode: true,
+const resource = require('../core/resource');
-        qrColor: '#999'
+const allsettings = require('../core/settings');
-    }, allsettings.info);
+const store = require('../core/store');
-    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 storekey = 'ext/info';
-    var $img;
-    var $label;
-    var $time;
-    var $size;
-    var $content;
-    var $folders;
-    var $files;
-    var $qrcode;
-    var currentFolder;
 
 
-    function updateSettings() {
+const settings = lo.extend({
-        if (store.get(storekey)) {
+    enabled: false,
-            $('#view-info').addClass('active');
+    show: false,
-            $('#info').show();
+    qrcode: true,
-        } else {
+    qrColor: '#999'
-            $('#view-info').removeClass('active');
+}, allsettings.info);
-            $('#info').hide();
+const 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>`;
+const 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>`;
+const storekey = 'ext/info';
+let $img;
+let $label;
+let $time;
+let $size;
+let $content;
+let $folders;
+let $files;
+let $qrcode;
+let currentFolder;
+
+
+function updateSettings() {
+    if (store.get(storekey)) {
+        jq('#view-info').addClass('active');
+        jq('#info').show();
+    } else {
+        jq('#view-info').removeClass('active');
+        jq('#info').hide();
+    }
+}
+
+function update(item) {
+    let src = item.thumbRational || item.icon;
+    const isThumb = Boolean(item.thumbRational);
+
+    if (item.isCurrentFolder() || !src) {
+        src = resource.icon('folder');
     }
 
-    function update(item) {
+    $img.attr('src', src);
-        var src = item.thumbRational || item.icon;
+    if (isThumb) {
-        var isThumb = Boolean(item.thumbRational);
+        $img.addClass('thumb');
-
+    } else {
-        if (item.isCurrentFolder() || !src) {
+        $img.removeClass('thumb');
-            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) {
+    $label.text(item.label);
-        update(item);
+    if (lo.isNumber(item.time)) {
+        $time.text(format.formatDate(item.time));
+    } else {
+        $time.text('.');
     }
 
-    function onMouseleave() {
+    if (lo.isNumber(item.size)) {
-        update(currentFolder);
+        $size.text(format.formatSize(item.size));
+        $size.show();
+    } else {
+        $size.hide();
     }
 
-    function onLocationChanged(item) {
+    if (item.isContentFetched) {
-        currentFolder = item;
+        const stats = item.getStats();
-        update(currentFolder);
+        $folders.text(stats.folders);
+        $files.text(stats.files);
+        $content.show();
+    } else {
+        $content.hide();
     }
 
-    function init() {
+    if (settings.qrcode) {
-        if (!settings.enabled) {
+        $qrcode.empty().qrcode({
-            return;
+            render: modernizr.canvas ? 'canvas' : 'div',
-        }
+            size: 200,
+            fill: settings.qrColor,
+            background: null,
+            text: win.location.protocol + '//' + win.location.host + item.absHref
+        });
+    }
+}
 
-        var $info = $(template).appendTo('#mainrow');
+function onMouseenter(item) {
-        $img = $info.find('.icon img');
+    update(item);
-        $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) {
+function onMouseleave() {
-            $qrcode.remove();
+    update(currentFolder);
-        }
+}
 
-        $(settingsTemplate)
+function onLocationChanged(item) {
-            .appendTo('#sidebar')
+    currentFolder = item;
-            .find('#view-info')
+    update(currentFolder);
-            .on('click', function (ev) {
+}
-                store.put(storekey, !store.get(storekey));
-                updateSettings();
-                ev.preventDefault();
-            });
 
-        // ensure stored value is boolean, otherwise set default
+function init() {
-        if (typeof store.get(storekey) !== 'boolean') {
+    if (!settings.enabled) {
-            store.put(storekey, settings.show);
+        return;
-        }
-        updateSettings();
-
-        event.sub('location.changed', onLocationChanged);
-        event.sub('item.mouseenter', onMouseenter);
-        event.sub('item.mouseleave', onMouseleave);
     }
 
+    const $info = jq(template).appendTo('#mainrow');
+    $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');
 
-    init();
+    if (!settings.qrcode) {
-});
+        $qrcode.remove();
+    }
+
+    jq(settingsTemplate)
+        .appendTo('#sidebar')
+        .find('#view-info')
+        .on('click', 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/public/js/lib/ext/l10n.js

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

src/_h5ai/public/js/lib/ext/peer5.js

@@ -1,37 +1,37 @@
-modulejs.define('ext/peer5', ['_', '$', 'core/settings'], function (_, $, allsettings) {
+const {window: win, jQuery: jq, _: lo} = require('../win');
-    var settings = _.extend({
+const allsettings = require('../core/settings');
-        enabled: false,
+
-        id: 'z142i5n5qypq4cxr'
+const settings = lo.extend({
-    }, allsettings.peer5);
+    enabled: false,
+    id: 'z142i5n5qypq4cxr'
+}, allsettings.peer5);
 
 
-    function init() {
+function init() {
-        if (!settings.enabled) {
+    if (!settings.enabled) {
-            return;
+        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 (ev) { // eslint-disable-line consistent-return
-                if (window.peer5) {
-                    ev.preventDefault();
-                    var url = ev.currentTarget.href;
-                    window.peer5.download(url);
-                    return false;
-                }
-            });
-        });
     }
 
+    const peer5js = '//api.peer5.com/peer5.js?id=' + settings.id;
 
-    init();
+    jq.ajax({
-});
+        url: peer5js,
+        dataType: 'script',
+        cache: true
+    });
+
+    // attach to file items, once the DOM is ready
+    jq(() => {
+        jq('body').on('click', '.item.file > a', ev => { // eslint-disable-line consistent-return
+            if (win.peer5) {
+                ev.preventDefault();
+                const url = ev.currentTarget.href;
+                win.peer5.download(url);
+                return false;
+            }
+        });
+    });
+}
+
+
+init();

src/_h5ai/public/js/lib/ext/piwik-analytics.js

@@ -1,30 +1,35 @@
-modulejs.define('ext/piwik-analytics', ['_', '$', 'core/settings'], function (_, $, allsettings) {
+const {window: win, jQuery: jq, _: lo} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false,
+const allsettings = require('../core/settings');
-        baseURL: 'not-set',
-        idSite: 0
-    }, allsettings['piwik-analytics']);
 
 
-    function init() {
+const settings = lo.extend({
-        if (!settings.enabled) {
+    enabled: false,
-            return;
+    baseURL: 'not-set',
-        }
+    idSite: 0
+}, allsettings['piwik-analytics']);
 
-        // reference: http://piwik.org/docs/javascript-tracking/
+function init() {
-
+    if (!settings.enabled) {
-        var pkBaseURL = (document.location.protocol === 'https:' ? 'https://' : 'http://') + settings.baseURL + '/';
+        return;
-
-        $('<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();
-        });
     }
 
+    // reference: http://piwik.org/docs/javascript-tracking/
 
-    init();
+    const pkBaseURL = (win.location.protocol === 'https:' ? 'https://' : 'http://') + settings.baseURL + '/';
-});
+    let piwikTracker = null;
+
+    jq('<script/>').attr('src', pkBaseURL + 'piwik.js').appendTo('body');
+    jq(win).load(() => {
+        piwikTracker = win.Piwik.getTracker(pkBaseURL + 'piwik.php', settings.idSite);
+        piwikTracker.enableLinkTracking();
+    });
+
+    event.sub('location.changed', item => {
+        const title = lo.map(item.getCrumb(), 'label').join(' > ');
+        piwikTracker.trackPageView(title);
+    });
+}
+
+
+init();

src/_h5ai/public/js/lib/ext/preview-aud.js

@@ -1,108 +1,110 @@
-modulejs.define('ext/preview-audio', ['_', '$', 'core/event', 'core/format', 'core/settings', 'ext/preview'], function (_, $, event, format, allsettings, preview) {
+const {setTimeout, jQuery: jq, _: lo} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false,
+const format = require('../core/format');
-        types: []
+const allsettings = require('../core/settings');
-    }, allsettings['preview-aud']);
+const preview = require('./preview');
 
-    function preloadAudio(src, callback) {
+const settings = lo.extend({
-        var $audio = $('<audio/>')
+    enabled: false,
-            .one('loadedmetadata', function () {
+    types: []
-                callback($audio);
+}, allsettings['preview-aud']);
-                // setTimeout(function () { callback($img); }, 1000); // for testing
-            })
-            .attr('autoplay', 'autoplay')
-            .attr('controls', 'controls')
-            .attr('src', src);
-    }
 
-    function onEnter(items, idx) {
+function preloadAudio(src, callback) {
-        var currentItems = items;
+    const $audio = jq('<audio/>')
-        var currentIdx = idx;
+        .one('loadedmetadata', () => {
-        var currentItem = items[idx];
+            callback($audio);
+            // setTimeout(function () { callback($img); }, 1000); // for testing
+        })
+        .attr('autoplay', 'autoplay')
+        .attr('controls', 'controls')
+        .attr('src', src);
+}
 
-        function onAdjustSize() {
+function onEnter(items, idx) {
-            var $content = $('#pv-content');
+    const currentItems = items;
-            var $audio = $('#pv-aud-audio');
+    let currentIdx = idx;
+    let currentItem = items[idx];
 
-            if ($audio.length) {
+    function onAdjustSize() {
-                $audio.css({
+        const $content = jq('#pv-content');
-                    left: String(($content.width() - $audio.width()) * 0.5) + 'px',
+        const $audio = jq('#pv-aud-audio');
-                    top: String(($content.height() - $audio.height()) * 0.5) + 'px'
-                });
 
-                preview.setLabels([
+        if ($audio.length) {
-                    currentItem.label,
+            $audio.css({
-                    format.formatDate($audio[0].duration * 1000, 'm:ss')
+                left: String(($content.width() - $audio.width()) * 0.5) + 'px',
-                ]);
+                top: String(($content.height() - $audio.height()) * 0.5) + 'px'
-            }
-        }
-
-        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();
-            }
-
-            function updateMeta() {
-                onAdjustSize();
-                preview.setIndex(currentIdx + 1, currentItems.length);
-                preview.setRawLink(currentItem.absHref);
-            }
-
-            function swap(nuContent) {
-                $('#pv-content').empty().append(nuContent.attr('id', 'pv-vid-audio')).fadeIn(200);
-                // small timeout, so nuContent is visible and therefore its width is available
-                setTimeout(updateMeta, 10);
-            }
-
-            function onReady($preloadedContent) {
-                clearTimeout(spinnerTimeout);
-                preview.showSpinner(false);
-
-                $('#pv-content').fadeOut(100, function () {
-                    swap($preloadedContent);
-                });
-            }
-
-            preloadAudio(currentItem.absHref, onReady);
-        }
-
-        onIdxChange(0);
-        preview.setOnIndexChange(onIdxChange);
-        preview.setOnAdjustSize(onAdjustSize);
-        preview.enter();
-    }
-
-    function initItem(item) {
-        if (item.$view && _.includes(settings.types, item.type)) {
-            item.$view.find('a').on('click', function (ev) {
-                ev.preventDefault();
-
-                var matchedItems = _.compact(_.map($('#items .item'), function (matchedItem) {
-                    matchedItem = $(matchedItem).data('item');
-                    return _.includes(settings.types, matchedItem.type) ? matchedItem : null;
-                }));
-
-                onEnter(matchedItems, _.indexOf(matchedItems, item));
             });
+
+            preview.setLabels([
+                currentItem.label,
+                format.formatDate($audio[0].duration * 1000, 'm:ss')
+            ]);
         }
     }
 
-    function onViewChanged(added) {
+    function onIdxChange(rel) {
-        _.each(added, initItem);
+        currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
-    }
+        currentItem = currentItems[currentIdx];
 
-    function init() {
+        const spinnerTimeout = setTimeout(() => preview.showSpinner(true), 200);
-        if (!settings.enabled) {
+
-            return;
+        if (jq('#pv-aud-audio').length) {
+            jq('#pv-aud-audio')[0].pause();
         }
 
-        event.sub('view.changed', onViewChanged);
+        function updateMeta() {
+            onAdjustSize();
+            preview.setIndex(currentIdx + 1, currentItems.length);
+            preview.setRawLink(currentItem.absHref);
+        }
+
+        function swap(nuContent) {
+            jq('#pv-content').empty().append(nuContent.attr('id', 'pv-vid-audio')).fadeIn(200);
+            // small timeout, so nuContent is visible and therefore its width is available
+            setTimeout(updateMeta, 10);
+        }
+
+        function onReady($preloadedContent) {
+            clearTimeout(spinnerTimeout);
+            preview.showSpinner(false);
+
+            jq('#pv-content').fadeOut(100, () => swap($preloadedContent));
+        }
+
+        preloadAudio(currentItem.absHref, onReady);
     }
 
-    init();
+    onIdxChange(0);
-});
+    preview.setOnIndexChange(onIdxChange);
+    preview.setOnAdjustSize(onAdjustSize);
+    preview.enter();
+}
+
+function initItem(item) {
+    if (item.$view && lo.includes(settings.types, item.type)) {
+        item.$view.find('a').on('click', ev => {
+            ev.preventDefault();
+
+            const matchedItems = lo.compact(lo.map(jq('#items .item'), matchedItem => {
+                matchedItem = jq(matchedItem).data('item');
+                return lo.includes(settings.types, matchedItem.type) ? matchedItem : null;
+            }));
+
+            onEnter(matchedItems, lo.indexOf(matchedItems, item));
+        });
+    }
+}
+
+function onViewChanged(added) {
+    lo.each(added, initItem);
+}
+
+function init() {
+    if (!settings.enabled) {
+        return;
+    }
+
+    event.sub('view.changed', onViewChanged);
+}
+
+init();

src/_h5ai/public/js/lib/ext/preview-img.js

@@ -1,138 +1,142 @@
-modulejs.define('ext/preview-img', ['_', '$', 'core/event', 'core/server', 'core/settings', 'ext/preview'], function (_, $, event, server, allsettings, preview) {
+const {setTimeout, jQuery: jq, _: lo} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false,
+const server = require('../core/server');
-        size: null,
+const allsettings = require('../core/settings');
-        types: []
+const preview = require('./preview');
-    }, allsettings['preview-img']);
+
-    var spinnerThreshold = 200;
+const settings = lo.extend({
-    var spinnerTimeoutId;
+    enabled: false,
-    var currentItems;
+    size: null,
-    var currentIdx;
+    types: []
-    var currentItem;
+}, allsettings['preview-img']);
+const spinnerThreshold = 200;
+let spinnerTimeoutId;
+let currentItems;
+let currentIdx;
+let currentItem;
 
 
-    function requestSample(href, callback) {
+function requestSample(href, callback) {
-        if (!settings.size) {
+    if (!settings.size) {
-            callback(href);
+        callback(href);
-            return;
+        return;
-        }
-
-        server.request({
-            action: 'get',
-            thumbs: [{
-                type: 'img',
-                href: href,
-                width: settings.size,
-                height: 0
-            }]
-        }, function (json) {
-            callback(json && json.thumbs && json.thumbs[0] ? json.thumbs[0] : null);
-        });
     }
 
-    function preloadImage(item, callback) {
+    server.request({
-        requestSample(item.absHref, function (src) {
+        action: 'get',
-            $('<img/>')
+        thumbs: [{
-                .one('load', function (ev) {
+            type: 'img',
-                    callback(item, ev.target);
+            href,
+            width: settings.size,
+            height: 0
+        }]
+    }).then(json => {
+        callback(json && json.thumbs && json.thumbs[0] ? json.thumbs[0] : null);
+    });
+}
 
-                    // for testing
+function preloadImage(item, callback) {
-                    // setTimeout(function () { callback(item, ev.target); }, 1000);
+    requestSample(item.absHref, src => {
-                })
+        jq('<img/>')
-                .attr('src', src);
+            .one('load', ev => {
-        });
+                callback(item, ev.target);
+
+                // for testing
+                // setTimeout(function () { callback(item, ev.target); }, 1000);
+            })
+            .attr('src', src);
+    });
+}
+
+function onAdjustSize() {
+    const $content = jq('#pv-content');
+    const $img = jq('#pv-img-image');
+
+    if ($img.length === 0) {
+        return;
     }
 
-    function onAdjustSize() {
+    $img.css({
-        var $content = $('#pv-content');
+        left: ($content.width() - $img.width()) * 0.5,
-        var $img = $('#pv-img-image');
+        top: ($content.height() - $img.height()) * 0.5
+    });
 
-        if ($img.length === 0) {
+    const labels = [currentItem.label];
-            return;
+    if (!settings.size) {
-        }
+        labels.push(String($img[0].naturalWidth) + 'x' + String($img[0].naturalHeight));
-
+        labels.push(String((100 * $img.width() / $img[0].naturalWidth).toFixed(0)) + '%');
-        $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(String($img[0].naturalWidth) + 'x' + String($img[0].naturalHeight));
-            labels.push(String((100 * $img.width() / $img[0].naturalWidth).toFixed(0)) + '%');
-        }
-        preview.setLabels(labels);
     }
+    preview.setLabels(labels);
+}
 
-    function onIdxChange(rel) {
+function onIdxChange(rel) {
-        currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
+    currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
-        currentItem = currentItems[currentIdx];
+    currentItem = currentItems[currentIdx];
 
-        preview.setLabels([currentItem.label]);
+    preview.setLabels([currentItem.label]);
-        preview.setIndex(currentIdx + 1, currentItems.length);
+    preview.setIndex(currentIdx + 1, currentItems.length);
-        preview.setRawLink(currentItem.absHref);
+    preview.setRawLink(currentItem.absHref);
 
-        $('#pv-content').hide();
+    jq('#pv-content').hide();
-        if (preview.isSpinnerVisible()) {
+    if (preview.isSpinnerVisible()) {
+        preview.showSpinner(true, currentItem.thumbSquare);
+    } else {
+        clearTimeout(spinnerTimeoutId);
+        spinnerTimeoutId = setTimeout(() => {
             preview.showSpinner(true, currentItem.thumbSquare);
-        } else {
+        }, spinnerThreshold);
-            clearTimeout(spinnerTimeoutId);
-            spinnerTimeoutId = setTimeout(function () {
-                preview.showSpinner(true, currentItem.thumbSquare);
-            }, spinnerThreshold);
-        }
-
-        preloadImage(currentItem, function (item, preloadedImage) {
-            if (item !== currentItem) {
-                return;
-            }
-
-            clearTimeout(spinnerTimeoutId);
-            preview.showSpinner(false);
-            $('#pv-content')
-                .empty()
-                .append($(preloadedImage).attr('id', 'pv-img-image'))
-                .show();
-            onAdjustSize();
-        });
     }
 
-    function onEnter(items, idx) {
+    preloadImage(currentItem, (item, preloadedImage) => {
-        currentItems = items;
+        if (item !== currentItem) {
-        currentIdx = idx;
-        preview.setOnIndexChange(onIdxChange);
-        preview.setOnAdjustSize(onAdjustSize);
-        preview.enter();
-        onIdxChange(0);
-    }
-
-    function initItem(item) {
-        if (item.$view && _.includes(settings.types, item.type)) {
-            item.$view.find('a').on('click', function (ev) {
-                ev.preventDefault();
-
-                var matchedItems = _.compact(_.map($('#items .item'), function (matchedItem) {
-                    matchedItem = $(matchedItem).data('item');
-                    return _.includes(settings.types, matchedItem.type) ? matchedItem : null;
-                }));
-
-                onEnter(matchedItems, _.indexOf(matchedItems, item));
-            });
-        }
-    }
-
-    function onViewChanged(added) {
-        _.each(added, initItem);
-    }
-
-    function init() {
-        if (!settings.enabled) {
             return;
         }
 
-        event.sub('view.changed', onViewChanged);
+        clearTimeout(spinnerTimeoutId);
+        preview.showSpinner(false);
+        jq('#pv-content')
+            .empty()
+            .append(jq(preloadedImage).attr('id', 'pv-img-image'))
+            .show();
+        onAdjustSize();
+    });
+}
+
+function onEnter(items, idx) {
+    currentItems = items;
+    currentIdx = idx;
+    preview.setOnIndexChange(onIdxChange);
+    preview.setOnAdjustSize(onAdjustSize);
+    preview.enter();
+    onIdxChange(0);
+}
+
+function initItem(item) {
+    if (item.$view && lo.includes(settings.types, item.type)) {
+        item.$view.find('a').on('click', ev => {
+            ev.preventDefault();
+
+            const matchedItems = lo.compact(lo.map(jq('#items .item'), matchedItem => {
+                matchedItem = jq(matchedItem).data('item');
+                return lo.includes(settings.types, matchedItem.type) ? matchedItem : null;
+            }));
+
+            onEnter(matchedItems, lo.indexOf(matchedItems, item));
+        });
+    }
+}
+
+function onViewChanged(added) {
+    lo.each(added, initItem);
+}
+
+function init() {
+    if (!settings.enabled) {
+        return;
     }
 
+    event.sub('view.changed', onViewChanged);
+}
 
-    init();
+
-});
+init();

src/_h5ai/public/js/lib/ext/preview-txt.js

@@ -1,137 +1,143 @@
-modulejs.define('ext/preview-txt', ['_', '$', 'marked', 'prism', 'core/event', 'core/settings', 'ext/preview'], function (_, $, marked, prism, event, allsettings, preview) {
+const {setTimeout, jQuery: jq, _: lo, marked, Prism: prism} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false,
+const allsettings = require('../core/settings');
-        types: {}
+const preview = require('./preview');
-    }, allsettings['preview-txt']);
-    var tplText = '<pre id="pv-txt-text" class="highlighted"/>';
-    var tplMarkdown = '<div id="pv-txt-text" class="markdown"/>';
-    var spinnerThreshold = 200;
-    var spinnerTimeoutId;
-    var currentItems;
-    var currentIdx;
-    var currentItem;
 
 
-    function preloadText(item, callback) {
+const settings = lo.extend({
-        $.ajax({
+    enabled: false,
-            url: item.absHref,
+    types: {}
-            dataType: 'text'
+}, allsettings['preview-txt']);
-        })
+const tplText = '<pre id="pv-txt-text" class="highlighted"/>';
-        .done(function (content) {
+const tplMarkdown = '<div id="pv-txt-text" class="markdown"/>';
-            callback(item, content);
+const spinnerThreshold = 200;
+let spinnerTimeoutId;
+let currentItems;
+let currentIdx;
+let currentItem;
 
-            // for testing
+
-            // setTimeout(function () { callback(item, content); }, 1000);
+function preloadText(item, callback) {
-        })
+    jq.ajax({
-        .fail(function (jqXHR, textStatus) {
+        url: item.absHref,
-            callback(item, '[ajax error] ' + textStatus);
+        dataType: 'text'
-        });
+    })
+    .done(content => {
+        callback(item, content);
+
+        // for testing
+        // setTimeout(function () { callback(item, content); }, 1000);
+    })
+    .fail((jqXHR, textStatus) => {
+        callback(item, '[ajax error] ' + textStatus);
+    });
+}
+
+function onAdjustSize() {
+    const $content = jq('#pv-content');
+    const $text = jq('#pv-txt-text');
+
+    if ($text.length) {
+        $text.height($content.height() - 16);
     }
+}
 
-    function onAdjustSize() {
+function onIdxChange(rel) {
-        var $content = $('#pv-content');
+    currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
-        var $text = $('#pv-txt-text');
+    currentItem = currentItems[currentIdx];
 
-        if ($text.length) {
+    preview.setLabels([
-            $text.height($content.height() - 16);
+        currentItem.label,
-        }
+        String(currentItem.size) + ' bytes'
-    }
+    ]);
+    preview.setIndex(currentIdx + 1, currentItems.length);
+    preview.setRawLink(currentItem.absHref);
 
-    function onIdxChange(rel) {
+    jq('#pv-content').hide();
-        currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
+    if (preview.isSpinnerVisible()) {
-        currentItem = currentItems[currentIdx];
+        preview.showSpinner(true, currentItem.icon);
-
+    } else {
-        preview.setLabels([
+        clearTimeout(spinnerTimeoutId);
-            currentItem.label,
+        spinnerTimeoutId = setTimeout(() => {
-            String(currentItem.size) + ' bytes'
-        ]);
-        preview.setIndex(currentIdx + 1, currentItems.length);
-        preview.setRawLink(currentItem.absHref);
-
-        $('#pv-content').hide();
-        if (preview.isSpinnerVisible()) {
             preview.showSpinner(true, currentItem.icon);
-        } else {
+        }, spinnerThreshold);
-            clearTimeout(spinnerTimeoutId);
-            spinnerTimeoutId = setTimeout(function () {
-                preview.showSpinner(true, currentItem.icon);
-            }, spinnerThreshold);
-        }
-
-        preloadText(currentItem, function (item, textContent) {
-            if (item !== currentItem) {
-                return;
-            }
-
-            var type = settings.types[currentItem.type];
-            var $text;
-            var $code;
-
-            if (type === 'none') {
-                $text = $(tplMarkdown).text(textContent);
-            } else if (type === 'fixed') {
-                $text = $(tplText).text(textContent);
-            } else if (type === 'markdown') {
-                $text = $(tplMarkdown).html(marked(textContent));
-            } else {
-                $text = $(tplText);
-                $code = $('<code/>').appendTo($text);
-
-                if (textContent.length < 20000) {
-                    $code.empty().html(prism.highlight(textContent, prism.languages[type]));
-                } else {
-                    $code.empty().text(textContent);
-                    setTimeout(function () { $code.empty().html(prism.highlight(textContent, prism.languages[type])); }, 300);
-                }
-            }
-
-            clearTimeout(spinnerTimeoutId);
-            preview.showSpinner(false);
-            $('#pv-content')
-                .empty()
-                .append($text)
-                .show();
-            onAdjustSize();
-        });
     }
 
-    function onEnter(items, idx) {
+    preloadText(currentItem, (item, textContent) => {
-        currentItems = items;
+        if (item !== currentItem) {
-        currentIdx = idx;
-        currentItem = items[idx];
-        preview.setOnIndexChange(onIdxChange);
-        preview.setOnAdjustSize(onAdjustSize);
-        preview.enter();
-        onIdxChange(0);
-    }
-
-    function initItem(item) {
-        if (item.$view && _.includes(_.keys(settings.types), item.type)) {
-            item.$view.find('a').on('click', function (ev) {
-                ev.preventDefault();
-
-                var matchedItems = _.compact(_.map($('#items .item'), function (matchedItem) {
-                    matchedItem = $(matchedItem).data('item');
-                    return _.includes(_.keys(settings.types), matchedItem.type) ? matchedItem : null;
-                }));
-
-                onEnter(matchedItems, _.indexOf(matchedItems, item));
-            });
-        }
-    }
-
-    function onViewChanged(added) {
-        _.each(added, initItem);
-    }
-
-    function init() {
-        if (!settings.enabled) {
             return;
         }
 
-        event.sub('view.changed', onViewChanged);
+        const type = settings.types[currentItem.type];
+        let $text;
+        let $code;
+
+        if (type === 'none') {
+            $text = jq(tplMarkdown).text(textContent);
+        } else if (type === 'fixed') {
+            $text = jq(tplText).text(textContent);
+        } else if (type === 'markdown') {
+            $text = jq(tplMarkdown).html(marked(textContent));
+        } else {
+            $text = jq(tplText);
+            $code = jq('<code/>').appendTo($text);
+
+            if (textContent.length < 20000) {
+                $code.empty().html(prism.highlight(textContent, prism.languages[type]));
+            } else {
+                $code.empty().text(textContent);
+                setTimeout(() => {
+                    $code.empty().html(prism.highlight(textContent, prism.languages[type]));
+                }, 300);
+            }
+        }
+
+        clearTimeout(spinnerTimeoutId);
+        preview.showSpinner(false);
+        jq('#pv-content')
+            .empty()
+            .append($text)
+            .show();
+        onAdjustSize();
+    });
+}
+
+function onEnter(items, idx) {
+    currentItems = items;
+    currentIdx = idx;
+    currentItem = items[idx];
+    preview.setOnIndexChange(onIdxChange);
+    preview.setOnAdjustSize(onAdjustSize);
+    preview.enter();
+    onIdxChange(0);
+}
+
+function initItem(item) {
+    if (item.$view && lo.includes(lo.keys(settings.types), item.type)) {
+        item.$view.find('a').on('click', ev => {
+            ev.preventDefault();
+
+            const matchedItems = lo.compact(lo.map(jq('#items .item'), matchedItem => {
+                matchedItem = jq(matchedItem).data('item');
+                return lo.includes(lo.keys(settings.types), matchedItem.type) ? matchedItem : null;
+            }));
+
+            onEnter(matchedItems, lo.indexOf(matchedItems, item));
+        });
+    }
+}
+
+function onViewChanged(added) {
+    lo.each(added, initItem);
+}
+
+function init() {
+    if (!settings.enabled) {
+        return;
     }
 
+    event.sub('view.changed', onViewChanged);
+}
 
-    init();
+
-});
+init();

src/_h5ai/public/js/lib/ext/preview-vid.js

@@ -1,109 +1,110 @@
-modulejs.define('ext/preview-vid', ['_', '$', 'core/event', 'core/settings', 'ext/preview'], function (_, $, event, allsettings, preview) {
+const {setTimeout, jQuery: jq, _: lo} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false,
+const allsettings = require('../core/settings');
-        types: []
+const preview = require('./preview');
-    }, allsettings['preview-vid']);
 
-    function preloadVideo(src, callback) {
+const settings = lo.extend({
-        var $video = $('<video/>')
+    enabled: false,
-            .one('loadedmetadata', function () {
+    types: []
-                callback($video);
+}, allsettings['preview-vid']);
-                // setTimeout(function () { callback($video); }, 1000); // for testing
-            })
-            .attr('autoplay', 'autoplay')
-            .attr('controls', 'controls')
-            .attr('src', src);
-    }
 
-    function onEnter(items, idx) {
+function preloadVideo(src, callback) {
-        var currentItems = items;
+    const $video = jq('<video/>')
-        var currentIdx = idx;
+        .one('loadedmetadata', () => {
-        var currentItem = items[idx];
+            callback($video);
+            // setTimeout(function () { callback($video); }, 1000); // for testing
+        })
+        .attr('autoplay', 'autoplay')
+        .attr('controls', 'controls')
+        .attr('src', src);
+}
 
-        function onAdjustSize() {
+function onEnter(items, idx) {
-            var $content = $('#pv-content');
+    const currentItems = items;
-            var $vid = $('#pv-vid-video');
+    let currentIdx = idx;
+    let currentItem = items[idx];
 
-            if ($vid.length) {
+    function onAdjustSize() {
-                $vid.css({
+        const $content = jq('#pv-content');
-                    left: String(($content.width() - $vid.width()) * 0.5) + 'px',
+        const $vid = jq('#pv-vid-video');
-                    top: String(($content.height() - $vid.height()) * 0.5) + 'px'
-                });
 
-                preview.setLabels([
+        if ($vid.length) {
-                    currentItem.label,
+            $vid.css({
-                    String($vid[0].videoWidth) + 'x' + String($vid[0].videoHeight),
+                left: String(($content.width() - $vid.width()) * 0.5) + 'px',
-                    String((100 * $vid.width() / $vid[0].videoWidth).toFixed(0)) + '%'
+                top: String(($content.height() - $vid.height()) * 0.5) + 'px'
-                ]);
-            }
-        }
-
-        function onIdxChange(rel) {
-            currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
-            currentItem = currentItems[currentIdx];
-
-            var spinnerTimeout = setTimeout(function () { preview.showSpinner(true); }, 200);
-
-            if ($('#pv-vid-video').length) {
-                $('#pv-vid-video')[0].pause();
-            }
-
-            function updateMeta() {
-                onAdjustSize();
-                preview.setIndex(currentIdx + 1, currentItems.length);
-                preview.setRawLink(currentItem.absHref);
-            }
-
-            function swap(nuContent) {
-                $('#pv-content').empty().append(nuContent.attr('id', 'pv-vid-video')).fadeIn(200);
-                // small timeout, so nuContent is visible and therefore its width is available
-                setTimeout(updateMeta, 10);
-            }
-
-            function onReady($preloadedContent) {
-                clearTimeout(spinnerTimeout);
-                preview.showSpinner(false);
-
-                $('#pv-content').fadeOut(100, function () {
-                    swap($preloadedContent);
-                });
-            }
-
-            preloadVideo(currentItem.absHref, onReady);
-        }
-
-        onIdxChange(0);
-        preview.setOnIndexChange(onIdxChange);
-        preview.setOnAdjustSize(onAdjustSize);
-        preview.enter();
-    }
-
-    function initItem(item) {
-        if (item.$view && _.includes(settings.types, item.type)) {
-            item.$view.find('a').on('click', function (ev) {
-                ev.preventDefault();
-
-                var matchedItems = _.compact(_.map($('#items .item'), function (matchedItem) {
-                    matchedItem = $(matchedItem).data('item');
-                    return _.includes(settings.types, matchedItem.type) ? matchedItem : null;
-                }));
-
-                onEnter(matchedItems, _.indexOf(matchedItems, item));
             });
+
+            preview.setLabels([
+                currentItem.label,
+                String($vid[0].videoWidth) + 'x' + String($vid[0].videoHeight),
+                String((100 * $vid.width() / $vid[0].videoWidth).toFixed(0)) + '%'
+            ]);
         }
     }
 
-    function onViewChanged(added) {
+    function onIdxChange(rel) {
-        _.each(added, initItem);
+        currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
-    }
+        currentItem = currentItems[currentIdx];
 
-    function init() {
+        const spinnerTimeout = setTimeout(() => preview.showSpinner(true), 200);
-        if (!settings.enabled) {
+
-            return;
+        if (jq('#pv-vid-video').length) {
+            jq('#pv-vid-video')[0].pause();
         }
 
-        event.sub('view.changed', onViewChanged);
+        function updateMeta() {
+            onAdjustSize();
+            preview.setIndex(currentIdx + 1, currentItems.length);
+            preview.setRawLink(currentItem.absHref);
+        }
+
+        function swap(nuContent) {
+            jq('#pv-content').empty().append(nuContent.attr('id', 'pv-vid-video')).fadeIn(200);
+            // small timeout, so nuContent is visible and therefore its width is available
+            setTimeout(updateMeta, 10);
+        }
+
+        function onReady($preloadedContent) {
+            clearTimeout(spinnerTimeout);
+            preview.showSpinner(false);
+
+            jq('#pv-content').fadeOut(100, () => swap($preloadedContent));
+        }
+
+        preloadVideo(currentItem.absHref, onReady);
     }
 
-    init();
+    onIdxChange(0);
-});
+    preview.setOnIndexChange(onIdxChange);
+    preview.setOnAdjustSize(onAdjustSize);
+    preview.enter();
+}
+
+function initItem(item) {
+    if (item.$view && lo.includes(settings.types, item.type)) {
+        item.$view.find('a').on('click', ev => {
+            ev.preventDefault();
+
+            const matchedItems = lo.compact(lo.map(jq('#items .item'), matchedItem => {
+                matchedItem = jq(matchedItem).data('item');
+                return lo.includes(settings.types, matchedItem.type) ? matchedItem : null;
+            }));
+
+            onEnter(matchedItems, lo.indexOf(matchedItems, item));
+        });
+    }
+}
+
+function onViewChanged(added) {
+    lo.each(added, initItem);
+}
+
+function init() {
+    if (!settings.enabled) {
+        return;
+    }
+
+    event.sub('view.changed', onViewChanged);
+}
+
+init();

src/_h5ai/public/js/lib/ext/preview.js

@@ -1,233 +1,237 @@
-modulejs.define('ext/preview', ['_', '$', 'core/resource', 'core/settings', 'core/store'], function (_, $, resource, allsettings, store) {
+const {window: win, setTimeout, jQuery: jq, _: lo} = require('../win');
-    var settings = _.extend({
+const resource = require('../core/resource');
-        enabled: true
+const allsettings = require('../core/settings');
-    }, allsettings.preview);
+const store = require('../core/store');
-    var $window = $(window);
-    var tplOverlay =
-            '<div id="pv-overlay">' +
-                '<div id="pv-content"/>' +
-                '<div id="pv-spinner"><img class="back"/><img class="spinner" src="' + resource.image('spinner') + '"/></div>' +
-                '<div id="pv-prev-area" class="hof"><img src="' + resource.image('preview-prev') + '"/></div>' +
-                '<div id="pv-next-area" class="hof"><img src="' + resource.image('preview-next') + '"/></div>' +
-                '<div id="pv-bottombar" class="clearfix hof">' +
-                    '<ul id="pv-buttons">' +
-                        '<li id="pv-bar-close" class="bar-right bar-button"><img src="' + resource.image('preview-close') + '"/></li>' +
-                        '<li id="pv-bar-raw" class="bar-right"><a class="bar-button" target="_blank"><img src="' + resource.image('preview-raw') + '"/></a></li>' +
-                        '<li id="pv-bar-fullscreen" class="bar-right bar-button"><img src="' + resource.image('preview-fullscreen') + '"/></li>' +
-                        '<li id="pv-bar-next" class="bar-right bar-button"><img src="' + resource.image('preview-next') + '"/></li>' +
-                        '<li id="pv-bar-idx" class="bar-right bar-label"/>' +
-                        '<li id="pv-bar-prev" class="bar-right bar-button"><img src="' + resource.image('preview-prev') + '"/></li>' +
-                    '</ul>' +
-                '</div>' +
-            '</div>';
-    var storekey = 'ext/preview';
-    var isFullscreen = store.get(storekey) || false;
-    var userAliveTimeoutId = null;
-    var onIndexChange = null;
-    var onAdjustSize = null;
-    var spinnerVisible = false;
 
 
-    function adjustSize() {
+const settings = lo.extend({
-        var winWidth = $window.width();
+    enabled: true
-        var winHeight = $window.height();
+}, allsettings.preview);
-        var $container = $('#pv-content');
+const $window = jq(win);
-        var $spinner = $('#pv-spinner');
+const tplOverlay =
-        var margin = isFullscreen ? 0 : 20;
+        `<div id="pv-overlay">
-        var barHeight = isFullscreen ? 0 : 48;
+            <div id="pv-content"/>
+            <div id="pv-spinner"><img class="back"/><img class="spinner" src="${resource.image('spinner')}"/></div>
+            <div id="pv-prev-area" class="hof"><img src="${resource.image('preview-prev')}"/></div>
+            <div id="pv-next-area" class="hof"><img src="${resource.image('preview-next')}"/></div>
+            <div id="pv-bottombar" class="clearfix hof">
+                <ul id="pv-buttons">
+                    <li id="pv-bar-close" class="bar-right bar-button"><img src="${resource.image('preview-close')}"/></li>
+                    <li id="pv-bar-raw" class="bar-right"><a class="bar-button" target="_blank"><img src="${resource.image('preview-raw')}"/></a></li>
+                    <li id="pv-bar-fullscreen" class="bar-right bar-button"><img src="${resource.image('preview-fullscreen')}"/></li>
+                    <li id="pv-bar-next" class="bar-right bar-button"><img src="${resource.image('preview-next')}"/></li>
+                    <li id="pv-bar-idx" class="bar-right bar-label"/>
+                    <li id="pv-bar-prev" class="bar-right bar-button"><img src="${resource.image('preview-prev')}"/></li>
+                </ul>
+            </div>
+        </div>`;
+const storekey = 'ext/preview';
+let isFullscreen = store.get(storekey) || false;
+let userAliveTimeoutId = null;
+let onIndexChange = null;
+let onAdjustSize = null;
+let spinnerVisible = false;
 
-        $container.css({
-            width: winWidth - 2 * margin,
-            height: winHeight - 2 * margin - barHeight,
-            left: margin,
-            top: margin
-        });
 
-        $spinner.css({
+function adjustSize() {
-            left: winWidth * 0.5,
+    const winWidth = $window.width();
-            top: winHeight * 0.5
+    const winHeight = $window.height();
-        });
+    const $container = jq('#pv-content');
+    const $spinner = jq('#pv-spinner');
+    const margin = isFullscreen ? 0 : 20;
+    const barHeight = isFullscreen ? 0 : 48;
 
-        if (isFullscreen) {
+    $container.css({
-            $('#pv-overlay').addClass('fullscreen');
+        width: winWidth - 2 * margin,
-            $('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview-no-fullscreen'));
+        height: winHeight - 2 * margin - barHeight,
-        } else {
+        left: margin,
-            $('#pv-overlay').removeClass('fullscreen');
+        top: margin
-            $('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview-fullscreen'));
+    });
-        }
 
-        if (_.isFunction(onAdjustSize)) {
+    $spinner.css({
-            onAdjustSize(1);
+        left: winWidth * 0.5,
-        }
+        top: winHeight * 0.5
+    });
+
+    if (isFullscreen) {
+        jq('#pv-overlay').addClass('fullscreen');
+        jq('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview-no-fullscreen'));
+    } else {
+        jq('#pv-overlay').removeClass('fullscreen');
+        jq('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview-fullscreen'));
     }
 
-    function setLabels(labels) {
+    if (lo.isFunction(onAdjustSize)) {
-        $('#pv-buttons .bar-left').remove();
+        onAdjustSize(1);
-        _.each(labels, function (label) {
-            $('<li/>')
-                .addClass('bar-left bar-label')
-                .text(label)
-                .appendTo('#pv-buttons');
-        });
     }
+}
 
-    function onNext() {
+function setLabels(labels) {
-        if (_.isFunction(onIndexChange)) {
+    jq('#pv-buttons .bar-left').remove();
-            onIndexChange(1);
+    lo.each(labels, label => {
-        }
+        jq('<li/>')
+            .addClass('bar-left bar-label')
+            .text(label)
+            .appendTo('#pv-buttons');
+    });
+}
+
+function onNext() {
+    if (lo.isFunction(onIndexChange)) {
+        onIndexChange(1);
     }
+}
 
-    function onPrevious() {
+function onPrevious() {
-        if (_.isFunction(onIndexChange)) {
+    if (lo.isFunction(onIndexChange)) {
-            onIndexChange(-1);
+        onIndexChange(-1);
-        }
     }
+}
 
-    function userAlive() {
+function userAlive() {
-        clearTimeout(userAliveTimeoutId);
+    clearTimeout(userAliveTimeoutId);
-        $('#pv-overlay .hof').stop(true, true).fadeIn(200);
+    jq('#pv-overlay .hof').stop(true, true).fadeIn(200);
 
-        if (isFullscreen) {
+    if (isFullscreen) {
-            userAliveTimeoutId = setTimeout(function () {
+        userAliveTimeoutId = setTimeout(() => {
-                $('#pv-overlay .hof').stop(true, true).fadeOut(2000);
+            jq('#pv-overlay .hof').stop(true, true).fadeOut(2000);
-            }, 2000);
+        }, 2000);
-        }
     }
+}
 
-    function onFullscreen() {
+function onFullscreen() {
-        isFullscreen = !isFullscreen;
+    isFullscreen = !isFullscreen;
-        store.put(storekey, isFullscreen);
+    store.put(storekey, isFullscreen);
 
-        userAlive();
+    userAlive();
-        adjustSize();
+    adjustSize();
+}
+
+function onKeydown(ev) {
+    const key = ev.which;
+
+    if (key === 27) { // esc
+        ev.preventDefault();
+        ev.stopImmediatePropagation();
+        onExit(); // eslint-disable-line no-use-before-define
+    } else if (key === 8 || key === 37) { // backspace, left
+        ev.preventDefault();
+        ev.stopImmediatePropagation();
+        onPrevious();
+    } else if (key === 13 || key === 32 || key === 39) { // enter, space, right
+        ev.preventDefault();
+        ev.stopImmediatePropagation();
+        onNext();
+    } else if (key === 70) { // f
+        ev.preventDefault();
+        ev.stopImmediatePropagation();
+        onFullscreen();
     }
+}
 
-    function onKeydown(ev) {
+function onEnter() {
-        var key = ev.which;
+    setLabels([]);
+    jq('#pv-content').empty();
+    jq('#pv-overlay').stop(true, true).fadeIn(200);
+    $window.on('keydown', onKeydown);
+    adjustSize();
+}
 
-        if (key === 27) { // esc
+function onExit() {
-            ev.preventDefault();
+    $window.off('keydown', onKeydown);
-            ev.stopImmediatePropagation();
+    jq('#pv-overlay').stop(true, true).fadeOut(200, () => {
-            onExit(); // eslint-disable-line no-use-before-define
+        jq('#pv-content').empty();
-        } else if (key === 8 || key === 37) { // backspace, left
-            ev.preventDefault();
-            ev.stopImmediatePropagation();
-            onPrevious();
-        } else if (key === 13 || key === 32 || key === 39) { // enter, space, right
-            ev.preventDefault();
-            ev.stopImmediatePropagation();
-            onNext();
-        } else if (key === 70) { // f
-            ev.preventDefault();
-            ev.stopImmediatePropagation();
-            onFullscreen();
-        }
-    }
-
-    function onEnter() {
         setLabels([]);
-        $('#pv-content').empty();
+    });
-        $('#pv-overlay').stop(true, true).fadeIn(200);
+}
-        $window.on('keydown', onKeydown);
+
-        adjustSize();
+function setIndex(idx, total) {
+    if (lo.isNumber(idx)) {
+        jq('#pv-bar-idx').text(String(idx) + (lo.isNumber(total) ? '/' + String(total) : '')).show();
+    } else {
+        jq('#pv-bar-idx').text('').hide();
+    }
+}
+
+function setRawLink(href) {
+    if (href) {
+        jq('#pv-bar-raw').show().find('a').attr('href', href);
+    } else {
+        jq('#pv-bar-raw').hide().find('a').attr('href', '#');
+    }
+}
+
+function setOnIndexChange(fn) {
+    onIndexChange = fn;
+}
+
+function setOnAdjustSize(fn) {
+    onAdjustSize = fn;
+}
+
+function showSpinner(show, src, millis) {
+    if (!lo.isNumber(millis)) {
+        millis = 300;
     }
 
-    function onExit() {
+    const $spinner = jq('#pv-spinner').stop(true, true);
-        $window.off('keydown', onKeydown);
+    const $back = $spinner.find('.back');
-        $('#pv-overlay').stop(true, true).fadeOut(200, function () {
-            $('#pv-content').empty();
-            setLabels([]);
-        });
-    }
 
-    function setIndex(idx, total) {
+    if (show) {
-        if (_.isNumber(idx)) {
+        if (src) {
-            $('#pv-bar-idx').text(String(idx) + (_.isNumber(total) ? '/' + String(total) : '')).show();
+            $back.attr('src', src).show();
         } else {
-            $('#pv-bar-idx').text('').hide();
+            $back.hide();
         }
+        spinnerVisible = true;
+        $spinner.fadeIn(millis);
+    } else {
+        spinnerVisible = false;
+        $spinner.fadeOut(millis);
+    }
+}
+
+function isSpinnerVisible() {
+    return spinnerVisible;
+}
+
+function init() {
+    if (!settings.enabled) {
+        return;
     }
 
-    function setRawLink(href) {
+    jq(tplOverlay).appendTo('body');
-        if (href) {
-            $('#pv-bar-raw').show().find('a').attr('href', href);
-        } else {
-            $('#pv-bar-raw').hide().find('a').attr('href', '#');
-        }
-    }
 
-    function setOnIndexChange(fn) {
+    jq('#pv-spinner').hide();
-        onIndexChange = fn;
+    jq('#pv-bar-prev, #pv-prev-area').on('click', onPrevious);
-    }
+    jq('#pv-bar-next, #pv-next-area').on('click', onNext);
+    jq('#pv-bar-close').on('click', onExit);
+    jq('#pv-bar-fullscreen').on('click', onFullscreen);
 
-    function setOnAdjustSize(fn) {
+    jq('#pv-overlay')
-        onAdjustSize = fn;
+        .on('keydown', onKeydown)
-    }
+        .on('mousemove mousedown', userAlive)
-
+        .on('click mousedown mousemove keydown keypress', ev => {
-    function showSpinner(show, src, millis) {
+            if (ev.type === 'click' && (ev.target.id === 'pv-overlay' || ev.target.id === 'pv-content')) {
-        if (!_.isNumber(millis)) {
+                onExit();
-            millis = 300;
-        }
-
-        var $spinner = $('#pv-spinner').stop(true, true);
-        var $back = $spinner.find('.back');
-
-        if (show) {
-            if (src) {
-                $back.attr('src', src).show();
-            } else {
-                $back.hide();
             }
-            spinnerVisible = true;
+            ev.stopImmediatePropagation();
-            $spinner.fadeIn(millis);
+        });
-        } else {
-            spinnerVisible = false;
-            $spinner.fadeOut(millis);
-        }
-    }
 
-    function isSpinnerVisible() {
+    $window.on('resize load', adjustSize);
-        return spinnerVisible;
+}
-    }
-
-    function init() {
-        if (!settings.enabled) {
-            return;
-        }
-
-        $(tplOverlay).appendTo('body');
-
-        $('#pv-spinner').hide();
-        $('#pv-bar-prev, #pv-prev-area').on('click', onPrevious);
-        $('#pv-bar-next, #pv-next-area').on('click', onNext);
-        $('#pv-bar-close').on('click', onExit);
-        $('#pv-bar-fullscreen').on('click', onFullscreen);
-
-        $('#pv-overlay')
-            .on('keydown', onKeydown)
-            .on('mousemove mousedown', userAlive)
-            .on('click mousedown mousemove keydown keypress', function (ev) {
-                if (ev.type === 'click' && (ev.target.id === 'pv-overlay' || ev.target.id === 'pv-content')) {
-                    onExit();
-                }
-                ev.stopImmediatePropagation();
-            });
-
-        $window.on('resize load', adjustSize);
-    }
 
 
-    init();
+init();
 
-    return {
+module.exports = {
-        enter: onEnter,
+    enter: onEnter,
-        exit: onExit,
+    exit: onExit,
-        setIndex: setIndex,
+    setIndex,
-        setRawLink: setRawLink,
+    setRawLink,
-        setLabels: setLabels,
+    setLabels,
-        setOnIndexChange: setOnIndexChange,
+    setOnIndexChange,
-        setOnAdjustSize: setOnAdjustSize,
+    setOnAdjustSize,
-        showSpinner: showSpinner,
+    showSpinner,
-        isSpinnerVisible: isSpinnerVisible
+    isSpinnerVisible
-    };
+};
-});

src/_h5ai/public/js/lib/ext/search.js

@@ -1,84 +1,95 @@
-modulejs.define('ext/search', ['_', '$', 'core/event', 'core/location', 'core/resource', 'core/server', 'core/settings', 'core/util', 'model/item', 'view/view'], function (_, $, event, location, resource, server, allsettings, util, Item, view) {
+const {jQuery: jq, _: lo} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false,
+const location = require('../core/location');
-        advanced: false,
+const resource = require('../core/resource');
-        debounceTime: 300
+const server = require('../core/server');
-    }, allsettings.search);
+const allsettings = require('../core/settings');
-    var template =
+const util = require('../core/util');
-            '<div id="search" class="tool">' +
+const Item = require('../model/item');
-                '<img src="' + resource.image('search') + '" alt="search"/>' +
+const view = require('../view/view');
-                '<input class="l10n_ph-search" type="text" value=""/>' +
-            '</div>';
-    var inputIsVisible = false;
-    var prevPattern = '';
-    var $search;
-    var $input;
 
 
-    function search(pattern) {
+const settings = lo.extend({
-        pattern = pattern || '';
+    enabled: false,
-        if (pattern === prevPattern) {
+    advanced: false,
-            return;
+    debounceTime: 300,
+    ignorecase: true
+}, allsettings.search);
+const template =
+        `<div id="search" class="tool">
+            <img src="${resource.image('search')}" alt="search"/>
+            <input class="l10n_ph-search" type="text" value=""/>
+        </div>`;
+let inputIsVisible = false;
+let prevPattern = '';
+let $search;
+let $input;
+
+
+function search(pattern) {
+    pattern = pattern || '';
+    if (pattern === prevPattern) {
+        return;
+    }
+    prevPattern = pattern;
+
+    if (!pattern) {
+        view.setLocation();
+        return;
+    }
+
+    $search.addClass('pending');
+
+    server.request({
+        action: 'get',
+        search: {
+            href: location.getAbsHref(),
+            pattern,
+            ignorecase: settings.ignorecase
         }
-        prevPattern = pattern;
+    }).then(response => {
+        $search.removeClass('pending');
+        view.setHint('noMatch');
+        view.setItems(lo.map(response.search, item => {
+            return Item.get(item);
+        }));
+    });
+}
 
-        if (!pattern) {
+function update() {
-            view.setLocation();
+    if (inputIsVisible) {
-            return;
+        $search.addClass('active');
-        }
+        $input.focus();
+        search(util.parsePattern($input.val(), settings.advanced));
+    } else {
+        search();
+        $search.removeClass('active');
+    }
+}
 
-        $search.addClass('pending');
+function toggle() {
+    inputIsVisible = !inputIsVisible;
+    update();
+}
 
-        server.request({
+function reset() {
-            action: 'get',
+    inputIsVisible = false;
-            search: {
+    $input.val('');
-                href: location.getAbsHref(),
+    update();
-                pattern: pattern
+}
-            }
+
-        }, function (response) {
+function init() {
-            $search.removeClass('pending');
+    if (!settings.enabled) {
-            view.setHint('noMatch');
+        return;
-            view.setItems(_.map(response.search, function (item) {
-                return Item.get(item);
-            }));
-        });
     }
 
-    function update() {
+    $search = jq(template).appendTo('#toolbar');
-        if (inputIsVisible) {
+    $input = $search.find('input');
-            $search.addClass('active');
-            $input.focus();
-            search(util.parsePattern($input.val(), settings.advanced));
-        } else {
-            search();
-            $search.removeClass('active');
-        }
-    }
 
-    function toggle() {
+    $search.on('click', 'img', toggle);
-        inputIsVisible = !inputIsVisible;
+    $input.on('keyup', lo.debounce(update, settings.debounceTime, {trailing: true}));
-        update();
+    event.sub('location.changed', reset);
-    }
+}
-
-    function reset() {
-        inputIsVisible = false;
-        $input.val('');
-        update();
-    }
-
-    function init() {
-        if (!settings.enabled) {
-            return;
-        }
-
-        $search = $(template).appendTo('#toolbar');
-        $input = $search.find('input');
-
-        $search.on('click', 'img', toggle);
-        $input.on('keyup', _.debounce(update, settings.debounceTime, {trailing: true}));
-        event.sub('location.changed', reset);
-    }
 
 
-    init();
+init();
-});

src/_h5ai/public/js/lib/ext/select.js

@@ -1,191 +1,195 @@
-modulejs.define('ext/select', ['_', '$', 'core/event', 'core/resource', 'core/settings'], function (_, $, event, resource, allsettings) {
+const {document: doc, jQuery: jq, _: lo} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false,
+const resource = require('../core/resource');
-        clickndrag: false,
+const allsettings = require('../core/settings');
-        checkboxes: false
-    }, allsettings.select);
-    var template = '<span class="selector"><img src="' + resource.image('selected') + '" alt="selected"/></span>';
-    var x = 0;
-    var y = 0;
-    var l = 0;
-    var t = 0;
-    var w = 0;
-    var h = 0;
-    var isDragSelect;
-    var isCtrlPressed;
-    var shrink = 1 / 3;
-    var $document = $(document);
-    var $html = $('html');
-    var $selectionRect = $('<div id="selection-rect"/>');
 
 
-    function publish() {
+const settings = lo.extend({
-        var items = _.map($('#items .item.selected'), function (itemElement) {
+    enabled: false,
-            return $(itemElement).data('item');
+    clickndrag: false,
-        });
+    checkboxes: false
-        event.pub('selection', items);
+}, allsettings.select);
+const template = '<span class="selector"><img src="' + resource.image('selected') + '" alt="selected"/></span>';
+let x = 0;
+let y = 0;
+let l = 0;
+let t = 0;
+let w = 0;
+let h = 0;
+let isDragSelect;
+let isCtrlPressed;
+const shrink = 1 / 3;
+const $document = jq(doc);
+const $html = jq('html');
+const $selectionRect = jq('<div id="selection-rect"/>');
+
+
+function publish() {
+    const items = lo.map(jq('#items .item.selected'), itemElement => {
+        return jq(itemElement).data('item');
+    });
+    event.pub('selection', items);
+}
+
+function elementRect($element) {
+    if (!$element.is(':visible')) {
+        return null;
     }
 
-    function elementRect($element) {
+    const offset = $element.offset();
-        if (!$element.is(':visible')) {
+    const elL = offset.left;
-            return null;
+    const elT = offset.top;
-        }
+    const elW = $element.outerWidth();
+    const elH = $element.outerHeight();
+    return {l: elL, t: elT, w: elW, h: elH, r: elL + elW, b: elT + elH};
+}
 
-        var offset = $element.offset();
+function doOverlap(rect1, rect2) {
-        var elL = offset.left;
+    if (!rect1 || !rect2) {
-        var elT = offset.top;
+        return false;
-        var elW = $element.outerWidth();
-        var elH = $element.outerHeight();
-        return {l: elL, t: elT, w: elW, h: elH, r: elL + elW, b: elT + elH};
     }
 
-    function doOverlap(rect1, rect2) {
+    const left = Math.max(rect1.l, rect2.l);
-        if (!rect1 || !rect2) {
+    const right = Math.min(rect1.r, rect2.r);
-            return false;
+    const top = Math.max(rect1.t, rect2.t);
-        }
+    const bottom = Math.min(rect1.b, rect2.b);
+    const width = right - left;
+    const height = bottom - top;
 
-        var left = Math.max(rect1.l, rect2.l);
+    return width >= 0 && height >= 0;
-        var right = Math.min(rect1.r, rect2.r);
+}
-        var top = Math.max(rect1.t, rect2.t);
-        var bottom = Math.min(rect1.b, rect2.b);
-        var width = right - left;
-        var height = bottom - top;
 
-        return width >= 0 && height >= 0;
+function selectionUpdate(ev) {
+    l = Math.min(x, ev.pageX);
+    t = Math.min(y, ev.pageY);
+    w = Math.abs(x - ev.pageX);
+    h = Math.abs(y - ev.pageY);
+
+    if (!isDragSelect && w < 4 && h < 4) {
+        return;
     }
 
-    function selectionUpdate(ev) {
+    if (!isDragSelect && !isCtrlPressed) {
-        l = Math.min(x, ev.pageX);
+        jq('#items .item').removeClass('selected');
-        t = Math.min(y, ev.pageY);
-        w = Math.abs(x - ev.pageX);
-        h = Math.abs(y - ev.pageY);
-
-        if (!isDragSelect && w < 4 && h < 4) {
-            return;
-        }
-
-        if (!isDragSelect && !isCtrlPressed) {
-            $('#items .item').removeClass('selected');
-            publish();
-        }
-
-        isDragSelect = true;
-        $html.addClass('drag-select');
-
-        ev.preventDefault();
-        $selectionRect
-            .stop(true, true)
-            .css({left: l, top: t, width: w, height: h, opacity: 1})
-            .show();
-
-        var selRect = elementRect($selectionRect);
-        $('#items .item').removeClass('selecting').each(function () {
-            var $item = $(this);
-            var inter = doOverlap(selRect, elementRect($item.find('a')));
-
-            if (inter && !$item.hasClass('folder-parent')) {
-                $item.addClass('selecting');
-            }
-        });
-    }
-
-    function selectionEnd(ev) {
-        $document.off('mousemove', selectionUpdate);
-
-        if (!isDragSelect) {
-            return;
-        }
-
-        ev.preventDefault();
-        $('#items .item.selecting.selected').removeClass('selecting').removeClass('selected');
-        $('#items .item.selecting').removeClass('selecting').addClass('selected');
         publish();
+    }
 
-        $html.removeClass('drag-select');
+    isDragSelect = true;
-        $selectionRect
+    $html.addClass('drag-select');
-            .stop(true, true)
+
-            .animate({
+    ev.preventDefault();
-                left: l + w * 0.5 * shrink,
+    $selectionRect
-                top: t + h * 0.5 * shrink,
+        .stop(true, true)
-                width: w * (1 - shrink),
+        .css({left: l, top: t, width: w, height: h, opacity: 1})
-                height: h * (1 - shrink),
+        .show();
-                opacity: 0
+
-            },
+    const selRect = elementRect($selectionRect);
-            300,
+    jq('#items .item').removeClass('selecting').each((idx, el) => {
-            function () {
+        const $item = jq(el);
-                $selectionRect.hide();
+        const inter = doOverlap(selRect, elementRect($item.find('a')));
+
+        if (inter && !$item.hasClass('folder-parent')) {
+            $item.addClass('selecting');
+        }
+    });
+}
+
+function selectionEnd(ev) {
+    $document.off('mousemove', selectionUpdate);
+
+    if (!isDragSelect) {
+        return;
+    }
+
+    ev.preventDefault();
+    jq('#items .item.selecting.selected').removeClass('selecting').removeClass('selected');
+    jq('#items .item.selecting').removeClass('selecting').addClass('selected');
+    publish();
+
+    $html.removeClass('drag-select');
+    $selectionRect
+        .stop(true, true)
+        .animate({
+            left: l + w * 0.5 * shrink,
+            top: t + h * 0.5 * shrink,
+            width: w * (1 - shrink),
+            height: h * (1 - shrink),
+            opacity: 0
+        },
+        300,
+        () => {
+            $selectionRect.hide();
+        });
+}
+
+function selectionStart(ev) {
+    // only on left button and don't block scrollbar
+    if (ev.button !== 0 || ev.offsetX >= jq('#content').width() - 14) {
+        return;
+    }
+
+    isDragSelect = false;
+    isCtrlPressed = ev.ctrlKey || ev.metaKey;
+    x = ev.pageX;
+    y = ev.pageY;
+
+    $document
+        .on('mousemove', selectionUpdate)
+        .one('mouseup', selectionEnd);
+}
+
+function onSelectorClick(ev) {
+    ev.stopImmediatePropagation();
+    ev.preventDefault();
+
+    jq(ev.target).closest('.item').toggleClass('selected');
+    publish();
+}
+
+function addCheckbox(item) {
+    if (item.$view && !item.isCurrentParentFolder()) {
+        jq(template)
+            .on('click', onSelectorClick)
+            .appendTo(item.$view.find('a'));
+    }
+}
+
+function onViewChanged(added, removed) {
+    if (settings.checkboxes) {
+        lo.each(added, addCheckbox);
+    }
+
+    lo.each(removed, item => {
+        if (item.$view) {
+            item.$view.removeClass('selected');
+        }
+    });
+
+    publish();
+}
+
+function init() {
+    if (!settings.enabled || !settings.clickndrag && !settings.checkboxes) {
+        return;
+    }
+
+    event.sub('view.changed', onViewChanged);
+
+    if (settings.clickndrag) {
+        $selectionRect.hide().appendTo('body');
+
+        jq('#content')
+            .on('mousedown', selectionStart)
+            .on('drag dragstart', ev => {
+                ev.stopImmediatePropagation();
+                ev.preventDefault();
+            })
+            .on('click', () => {
+                jq('#items .item').removeClass('selected');
+                publish();
             });
     }
-
+}
-    function selectionStart(ev) {
-        // only on left button and don't block scrollbar
-        if (ev.button !== 0 || ev.offsetX >= $('#content').width() - 14) {
-            return;
-        }
-
-        isDragSelect = false;
-        isCtrlPressed = ev.ctrlKey || ev.metaKey;
-        x = ev.pageX;
-        y = ev.pageY;
-
-        $document
-            .on('mousemove', selectionUpdate)
-            .one('mouseup', selectionEnd);
-    }
-
-    function onSelectorClick(ev) {
-        ev.stopImmediatePropagation();
-        ev.preventDefault();
-
-        $(ev.target).closest('.item').toggleClass('selected');
-        publish();
-    }
-
-    function addCheckbox(item) {
-        if (item.$view && !item.isCurrentParentFolder()) {
-            $(template)
-                .on('click', onSelectorClick)
-                .appendTo(item.$view.find('a'));
-        }
-    }
-
-    function onViewChanged(added, removed) {
-        if (settings.checkboxes) {
-            _.each(added, addCheckbox);
-        }
-
-        _.each(removed, function (item) {
-            if (item.$view) {
-                item.$view.removeClass('selected');
-            }
-        });
-
-        publish();
-    }
-
-    function init() {
-        if (!settings.enabled || !settings.clickndrag && !settings.checkboxes) {
-            return;
-        }
-
-        event.sub('view.changed', onViewChanged);
-
-        if (settings.clickndrag) {
-            $selectionRect.hide().appendTo('body');
-
-            $('#content')
-                .on('mousedown', selectionStart)
-                .on('drag dragstart', function (ev) {
-                    ev.stopImmediatePropagation();
-                    ev.preventDefault();
-                })
-                .on('click', function () {
-                    $('#items .item').removeClass('selected');
-                    publish();
-                });
-        }
-    }
 
 
-    init();
+init();
-});

src/_h5ai/public/js/lib/ext/sort.js

@@ -1,146 +1,151 @@
-modulejs.define('ext/sort', ['_', '$', 'core/event', 'core/resource', 'core/settings', 'core/store', 'core/util'], function (_, $, event, resource, allsettings, store, util) {
+const {jQuery: jq, _: lo} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false,
+const resource = require('../core/resource');
-        column: 0,
+const allsettings = require('../core/settings');
-        reverse: false,
+const store = require('../core/store');
-        ignorecase: true,
+const util = require('../core/util');
-        natural: false,
+
-        folders: 0
+const settings = lo.extend({
-    }, allsettings.sort);
+    enabled: false,
-    var storekey = 'ext/sort';
+    column: 0,
-    var template = '<img src="' + resource.image('sort') + '" class="sort" alt="sort order" />';
+    reverse: false,
+    ignorecase: true,
+    natural: false,
+    folders: 0
+}, allsettings.sort);
+const storekey = 'ext/sort';
+const template = '<img src="' + resource.image('sort') + '" class="sort" alt="sort order" />';
 
 
-    function getType(item) {
+function getType(item) {
-        var $item = $(item);
+    const $item = jq(item);
 
-        if ($item.hasClass('folder-parent')) {
+    if ($item.hasClass('folder-parent')) {
-            return 0;
+        return 0;
+    }
+    if ($item.hasClass('folder')) {
+        if (settings.folders === 1) {
+            return 2;
+        } else if (settings.folders === 2) {
+            return 3;
         }
-        if ($item.hasClass('folder')) {
+        return 1;
-            if (settings.folders === 1) {
+    }
-                return 2;
+    return 2;
-            } else if (settings.folders === 2) {
+}
-                return 3;
+
+function getName(item) {
+    return jq(item).find('.label').text();
+}
+
+function getTime(item) {
+    return jq(item).find('.date').data('time');
+}
+
+function getSize(item) {
+    return jq(item).find('.size').data('bytes');
+}
+
+
+const columnGetters = {
+    0: getName,
+    1: getTime,
+    2: getSize
+};
+const columnClasses = {
+    0: 'label',
+    1: 'date',
+    2: 'size'
+};
+
+
+function cmpFn(getValue, reverse, ignorecase, natural) {
+    return (item1, item2) => {
+        let res;
+        let val1;
+        let val2;
+
+        res = getType(item1) - getType(item2);
+        if (res !== 0) {
+            return res;
+        }
+
+        val1 = getValue(item1);
+        val2 = getValue(item2);
+
+        if (isNaN(val1) || isNaN(val2)) {
+            val1 = String(val1);
+            val2 = String(val2);
+
+            if (ignorecase) {
+                val1 = val1.toLowerCase();
+                val2 = val2.toLowerCase();
             }
-            return 1;
         }
-        return 2;
-    }
 
-    function getName(item) {
+        res = natural ? util.naturalCmpFn(val1, val2) : util.regularCmpFn(val1, val2);
-        return $(item).find('.label').text();
+        return reverse ? -res : res;
-    }
-
-    function getTime(item) {
-        return $(item).find('.date').data('time');
-    }
-
-    function getSize(item) {
-        return $(item).find('.size').data('bytes');
-    }
-
-
-    var columnGetters = {
-        0: getName,
-        1: getTime,
-        2: getSize
-    };
-    var columnClasses = {
-        0: 'label',
-        1: 'date',
-        2: 'size'
     };
+}
 
+function sortItems(column, reverse) {
+    const $headers = jq('#items li.header a');
+    const $header = jq('#items li.header a.' + columnClasses[column]);
+    const fn = cmpFn(columnGetters[column], reverse, settings.ignorecase, column === 0 && settings.natural);
+    const $current = jq('#items .item');
+    const $sorted = jq('#items .item').sort(fn);
 
-    function cmpFn(getValue, reverse, ignorecase, natural) {
+    store.put(storekey, {column, reverse});
-        return function (item1, item2) {
-            var res;
-            var val1;
-            var val2;
 
-            res = getType(item1) - getType(item2);
+    $headers.removeClass('ascending descending');
-            if (res !== 0) {
+    $header.addClass(reverse ? 'descending' : 'ascending');
-                return res;
-            }
 
-            val1 = getValue(item1);
+    for (let i = 0, l = $current.length; i < l; i += 1) {
-            val2 = getValue(item2);
+        if ($current[i] !== $sorted[i]) {
-
+            $sorted.detach().sort(fn).appendTo('#items');
-            if (isNaN(val1) || isNaN(val2)) {
+            break;
-                val1 = String(val1);
-                val2 = String(val2);
-
-                if (ignorecase) {
-                    val1 = val1.toLowerCase();
-                    val2 = val2.toLowerCase();
-                }
-            }
-
-            res = natural ? util.naturalCmpFn(val1, val2) : util.regularCmpFn(val1, val2);
-            return reverse ? -res : res;
-        };
-    }
-
-    function sortItems(column, reverse) {
-        var $headers = $('#items li.header a');
-        var $header = $('#items li.header a.' + columnClasses[column]);
-        var fn = cmpFn(columnGetters[column], reverse, settings.ignorecase, column === 0 && settings.natural);
-        var $current = $('#items .item');
-        var $sorted = $('#items .item').sort(fn);
-
-        store.put(storekey, {column: column, reverse: reverse});
-
-        $headers.removeClass('ascending descending');
-        $header.addClass(reverse ? 'descending' : 'ascending');
-
-        for (var i = 0, l = $current.length; i < l; i += 1) {
-            if ($current[i] !== $sorted[i]) {
-                $sorted.detach().sort(fn).appendTo('#items');
-                break;
-            }
         }
     }
+}
 
-    function onContentChanged() {
+function onContentChanged() {
-        var order = store.get(storekey);
+    const order = store.get(storekey);
-        var column = order && order.column || settings.column;
+    const column = order && order.column || settings.column;
-        var reverse = order && order.reverse || settings.reverse;
+    const reverse = order && order.reverse || settings.reverse;
 
-        sortItems(column, reverse);
+    sortItems(column, reverse);
+}
+
+function init() {
+    if (!settings.enabled) {
+        return;
     }
 
-    function init() {
+    const $header = jq('#items li.header');
-        if (!settings.enabled) {
-            return;
-        }
 
-        var $header = $('#items li.header');
+    $header.find('a.label')
+        .append(template)
+        .click(ev => {
+            sortItems(0, jq(ev.currentTarget).hasClass('ascending'));
+            ev.preventDefault();
+        });
 
-        $header.find('a.label')
+    $header.find('a.date')
-            .append(template)
+        .prepend(template)
-            .click(function (ev) {
+        .click(ev => {
-                sortItems(0, $(this).hasClass('ascending'));
+            sortItems(1, jq(ev.currentTarget).hasClass('ascending'));
-                ev.preventDefault();
+            ev.preventDefault();
-            });
+        });
 
-        $header.find('a.date')
+    $header.find('a.size')
-            .prepend(template)
+        .prepend(template)
-            .click(function (ev) {
+        .click(ev => {
-                sortItems(1, $(this).hasClass('ascending'));
+            sortItems(2, jq(ev.currentTarget).hasClass('ascending'));
-                ev.preventDefault();
+            ev.preventDefault();
-            });
+        });
 
-        $header.find('a.size')
+    event.sub('view.changed', onContentChanged);
-            .prepend(template)
+}
-            .click(function (ev) {
-                sortItems(2, $(this).hasClass('ascending'));
-                ev.preventDefault();
-            });
-
-        event.sub('view.changed', onContentChanged);
-    }
 
 
-    init();
+init();
-});

src/_h5ai/public/js/lib/ext/thumbnails.js

@@ -1,108 +1,111 @@
-modulejs.define('ext/thumbnails', ['_', 'core/event', 'core/server', 'core/settings'], function (_, event, server, allsettings) {
+const {_: lo} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false,
+const server = require('../core/server');
-        img: ['img-bmp', 'img-gif', 'img-ico', 'img-jpg', 'img-png'],
+const allsettings = require('../core/settings');
-        mov: ['vid-avi', 'vid-flv', 'vid-mkv', 'vid-mov', 'vid-mp4', 'vid-mpg', 'vid-webm'],
+
-        doc: ['x-pdf', 'x-ps'],
+const settings = lo.extend({
-        delay: 1,
+    enabled: false,
-        size: 100,
+    img: ['img-bmp', 'img-gif', 'img-ico', 'img-jpg', 'img-png'],
-        exif: false
+    mov: ['vid-avi', 'vid-flv', 'vid-mkv', 'vid-mov', 'vid-mp4', 'vid-mpg', 'vid-webm'],
-    }, allsettings.thumbnails);
+    doc: ['x-pdf', 'x-ps'],
-    var landscapeRatio = 4 / 3;
+    delay: 1,
+    size: 100,
+    exif: false
+}, allsettings.thumbnails);
+const landscapeRatio = 4 / 3;
 
 
-    function queueItem(queue, item) {
+function queueItem(queue, item) {
-        var type = null;
+    let type = null;
 
-        if (_.includes(settings.img, item.type)) {
+    if (lo.includes(settings.img, item.type)) {
-            type = 'img';
+        type = 'img';
-        } else if (_.includes(settings.mov, item.type)) {
+    } else if (lo.includes(settings.mov, item.type)) {
-            type = 'mov';
+        type = 'mov';
-        } else if (_.includes(settings.doc, item.type)) {
+    } else if (lo.includes(settings.doc, item.type)) {
-            type = 'doc';
+        type = 'doc';
-        } else {
+    } else {
-            return;
+        return;
-        }
+    }
 
-        if (item.thumbSquare) {
+    if (item.thumbSquare) {
-            item.$view.find('.icon.square img').addClass('thumb').attr('src', item.thumbSquare);
+        item.$view.find('.icon.square img').addClass('thumb').attr('src', item.thumbSquare);
-        } else {
+    } else {
-            queue.push({
+        queue.push({
-                type: type,
+            type,
-                href: item.absHref,
+            href: item.absHref,
-                ratio: 1,
+            ratio: 1,
-                callback: function (src) {
+            callback: src => {
-                    if (src && item.$view) {
+                if (src && item.$view) {
-                        item.thumbSquare = src;
+                    item.thumbSquare = src;
-                        item.$view.find('.icon.square img').addClass('thumb').attr('src', src);
+                    item.$view.find('.icon.square img').addClass('thumb').attr('src', src);
-                    }
                 }
-            });
+            }
-        }
+        });
+    }
 
-        if (item.thumbRational) {
+    if (item.thumbRational) {
-            item.$view.find('.icon.landscape img').addClass('thumb').attr('src', item.thumbRational);
+        item.$view.find('.icon.landscape img').addClass('thumb').attr('src', item.thumbRational);
-        } else {
+    } else {
-            queue.push({
+        queue.push({
-                type: type,
+            type,
-                href: item.absHref,
+            href: item.absHref,
-                ratio: landscapeRatio,
+            ratio: landscapeRatio,
-                callback: function (src) {
+            callback: src => {
-                    if (src && item.$view) {
+                if (src && item.$view) {
-                        item.thumbRational = src;
+                    item.thumbRational = src;
-                        item.$view.find('.icon.landscape img').addClass('thumb').attr('src', src);
+                    item.$view.find('.icon.landscape img').addClass('thumb').attr('src', src);
-                    }
                 }
-            });
+            }
-        }
-    }
-
-    function requestQueue(queue) {
-        var thumbs = _.map(queue, function (req) {
-            return {
-                type: req.type,
-                href: req.href,
-                width: Math.round(settings.size * req.ratio),
-                height: settings.size
-            };
-        });
-
-        server.request({
-            action: 'get',
-            thumbs: thumbs
-        }, function (json) {
-            _.each(queue, function (req, idx) {
-                req.callback(json && json.thumbs ? json.thumbs[idx] : null);
-            });
         });
     }
+}
 
-    function handleItems(items) {
+function requestQueue(queue) {
-        var queue = [];
+    const thumbs = lo.map(queue, req => {
+        return {
+            type: req.type,
+            href: req.href,
+            width: Math.round(settings.size * req.ratio),
+            height: settings.size
+        };
+    });
 
-        _.each(items, function (item) {
+    server.request({
-            queueItem(queue, item);
+        action: 'get',
+        thumbs
+    }).then(json => {
+        lo.each(queue, (req, idx) => {
+            req.callback(json && json.thumbs ? json.thumbs[idx] : null);
         });
+    });
+}
 
-        if (queue.length) {
+function handleItems(items) {
-            requestQueue(queue);
+    const queue = [];
-        }
+
+    lo.each(items, item => {
+        queueItem(queue, item);
+    });
+
+    if (queue.length) {
+        requestQueue(queue);
+    }
+}
+
+function onViewChanged(added) {
+    setTimeout(() => {
+        handleItems(added);
+    }, settings.delay);
+}
+
+function init() {
+    if (!settings.enabled) {
+        return;
     }
 
-    function onViewChanged(added) {
+    event.sub('view.changed', onViewChanged);
-        setTimeout(function () {
+}
-            handleItems(added);
-        }, settings.delay);
-    }
-
-    function init() {
-        if (!settings.enabled) {
-            return;
-        }
-
-        event.sub('view.changed', onViewChanged);
-    }
 
 
-    init();
+init();
-});

src/_h5ai/public/js/lib/ext/title.js

@@ -1,26 +1,29 @@
-modulejs.define('ext/title', ['_', 'core/event', 'core/settings'], function (_, event, allsettings) {
+const {document: doc, _: lo} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false
+const allsettings = require('../core/settings');
-    }, allsettings.title);
 
-    function onLocationChanged(item) {
-        var labels = _.map(item.getCrumb(), 'label');
-        var title = labels.join(' > ');
 
-        if (labels.length > 1) {
+const settings = lo.extend({
-            title = labels[labels.length - 1] + ' - ' + title;
+    enabled: false
-        }
+}, allsettings.title);
 
-        document.title = title;
+function onLocationChanged(item) {
+    const labels = lo.map(item.getCrumb(), 'label');
+    let title = labels.join(' > ');
+
+    if (labels.length > 1) {
+        title = labels[labels.length - 1] + ' - ' + title;
     }
 
-    function init() {
+    doc.title = title;
-        if (!settings.enabled) {
+}
-            return;
-        }
 
-        event.sub('location.changed', onLocationChanged);
+function init() {
+    if (!settings.enabled) {
+        return;
     }
 
-    init();
+    event.sub('location.changed', onLocationChanged);
-});
+}
+
+init();

src/_h5ai/public/js/lib/ext/tree.js

@@ -1,201 +1,208 @@
-modulejs.define('ext/tree', ['_', '$', 'core/event', 'core/location', 'core/resource', 'core/settings', 'core/store', 'core/util'], function (_, $, event, location, resource, allsettings, store, util) {
+const {jQuery: jq, _: lo} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        enabled: false,
+const location = require('../core/location');
-        show: true,
+const resource = require('../core/resource');
-        maxSubfolders: 50,
+const allsettings = require('../core/settings');
-        naturalSort: false,
+const store = require('../core/store');
-        ignorecase: true
+const util = require('../core/util');
-    }, allsettings.tree);
-    var template =
-            '<div class="item">' +
-                '<span class="indicator none">' +
-                    '<img src="' + resource.image('tree-indicator') + '"/>' +
-                '</span>' +
-                '<a>' +
-                    '<span class="icon"><img/></span>' +
-                    '<span class="label"/>' +
-                '</a>' +
-            '</span>';
-    var settingsTemplate =
-            '<div class="block">' +
-                '<h1 class="l10n-tree">Tree</h1>' +
-                '<div id="view-tree" class="button view">' +
-                    '<img src="' + resource.image('tree-toggle') + '" alt="view-tree"/>' +
-                '</div>' +
-            '</div>';
-    var storekey = 'ext/tree';
 
 
-    function cmpFn(item1, item2) {
+const settings = lo.extend({
-        var val1 = item1.label;
+    enabled: false,
-        var val2 = item2.label;
+    show: true,
+    maxSubfolders: 50,
+    naturalSort: false,
+    ignorecase: true
+}, allsettings.tree);
+const template =
+        `<div class="item">
+            <span class="indicator none">
+                <img src="${resource.image('tree-indicator')}"/>
+            </span>
+            <a>
+                <span class="icon"><img/></span>
+                <span class="label"/>
+            </a>
+        </span>`;
+const settingsTemplate =
+        `<div class="block">
+            <h1 class="l10n-tree">Tree</h1>
+            <div id="view-tree" class="button view">
+                <img src="${resource.image('tree-toggle')}" alt="view-tree"/>
+            </div>
+        </div>`;
+const storekey = 'ext/tree';
 
-        if (settings.ignorecase) {
-            val1 = val1.toLowerCase();
-            val2 = val2.toLowerCase();
-        }
 
-        return settings.natural ? util.naturalCmpFn(val1, val2) : util.regularCmpFn(val1, val2);
+function cmpFn(item1, item2) {
+    let val1 = item1.label;
+    let val2 = item2.label;
+
+    if (settings.ignorecase) {
+        val1 = val1.toLowerCase();
+        val2 = val2.toLowerCase();
     }
 
-    function update(item) {
+    return settings.natural ? util.naturalCmpFn(val1, val2) : util.regularCmpFn(val1, val2);
-        var $html = $(template);
+}
-        var $indicator = $html.find('.indicator');
-        var $a = $html.find('a');
-        var $img = $html.find('.icon img');
-        var $label = $html.find('.label');
 
-        $html
+function update(item) {
-            .addClass(item.isFolder() ? 'folder' : 'file')
+    const $html = jq(template);
-            .data('item', item);
+    const $indicator = $html.find('.indicator');
+    const $a = $html.find('a');
+    const $img = $html.find('.icon img');
+    const $label = $html.find('.label');
 
-        location.setLink($a, item);
+    $html
-        $img.attr('src', resource.icon('folder'));
+        .addClass(item.isFolder() ? 'folder' : 'file')
-        $label.text(item.label);
+        .data('item', item);
 
-        if (item.isFolder()) {
+    location.setLink($a, item);
-            var subfolders = item.getSubfolders();
+    $img.attr('src', resource.icon('folder'));
+    $label.text(item.label);
 
-            // indicator
+    if (item.isFolder()) {
-            if (item.isManaged && !item.isContentFetched || subfolders.length) {
+        const subfolders = item.getSubfolders();
-                $indicator.removeClass('none');
 
-                if (item.isManaged && !item.isContentFetched) {
+        // indicator
-                    $indicator.addClass('unknown');
+        if (item.isManaged && !item.isContentFetched || subfolders.length) {
-                } else if (item.isContentVisible) {
+            $indicator.removeClass('none');
-                    $indicator.addClass('open');
-                } else {
-                    $indicator.addClass('close');
-                }
-            }
 
-            // is it the current folder?
+            if (item.isManaged && !item.isContentFetched) {
-            if (item.isCurrentFolder()) {
+                $indicator.addClass('unknown');
-                $html.addClass('active');
+            } else if (item.isContentVisible) {
-            }
+                $indicator.addClass('open');
-
-            // does it have subfolders?
-            if (subfolders.length) {
-                subfolders.sort(cmpFn);
-
-                var $ul = $('<ul class="content"/>').appendTo($html);
-                var counter = 0;
-                _.each(subfolders, function (e) {
-                    counter += 1;
-                    if (counter <= settings.maxSubfolders) {
-                        $('<li/>').append(update(e)).appendTo($ul);
-                    }
-                });
-                if (subfolders.length > settings.maxSubfolders) {
-                    $('<li class="summary">… ' + (subfolders.length - settings.maxSubfolders) + ' more subfolders</li>').appendTo($ul);
-                }
-                if (!item.isContentVisible) {
-                    $ul.hide();
-                }
-            }
-
-            // reflect folder status
-            if (!item.isManaged) {
-                $img.attr('src', resource.icon('folder-page'));
-            }
-        }
-
-        if (item.$tree) {
-            item.$tree.replaceWith($html);
-        }
-        item.$tree = $html;
-
-        return $html;
-    }
-
-    function createOnIndicatorClick() {
-        function slide(item, $indicator, $content, down) {
-            item.isContentVisible = down;
-            $indicator.removeClass('open close').addClass(down ? 'open' : 'close');
-            $content[down ? 'slideDown' : 'slideUp']();
-        }
-
-        return function () {
-            var $indicator = $(this);
-            var $item = $indicator.closest('.item');
-            var item = $item.data('item');
-            var $content = $item.find('> ul.content');
-
-            if ($indicator.hasClass('unknown')) {
-                item.fetchContent(function () {
-                    item.isContentVisible = false;
-
-                    $item = update(item);
-                    $indicator = $item.find('> .indicator');
-                    $content = $item.find('> ul.content');
-
-                    if (!$indicator.hasClass('none')) {
-                        slide(item, $indicator, $content, true);
-                    }
-                });
-            } else if ($indicator.hasClass('open')) {
-                slide(item, $indicator, $content, false);
-            } else if ($indicator.hasClass('close')) {
-                slide(item, $indicator, $content, true);
-            }
-        };
-    }
-
-    function fetchTree(item, callback) {
-        item.isContentVisible = true;
-        item.fetchContent(function () {
-            if (item.parent) {
-                fetchTree(item.parent, callback);
             } else {
-                callback(item);
+                $indicator.addClass('close');
             }
-        });
-    }
-
-    function updateSettings() {
-        if (store.get(storekey)) {
-            $('#view-tree').addClass('active');
-            $('#tree').show();
-        } else {
-            $('#view-tree').removeClass('active');
-            $('#tree').hide();
-        }
-    }
-
-    function onLocationChanged(item) {
-        fetchTree(item, function (root) {
-            $('#tree').append(update(root));
-            updateSettings();
-        });
-    }
-
-    function init() {
-        if (!settings.enabled) {
-            return;
         }
 
-        $('<div id="tree"/>')
+        // is it the current folder?
-            .appendTo('#mainrow')
+        if (item.isCurrentFolder()) {
-            .on('click', '.indicator', createOnIndicatorClick());
+            $html.addClass('active');
+        }
 
-        $(settingsTemplate)
+        // does it have subfolders?
-            .appendTo('#sidebar')
+        if (subfolders.length) {
-            .find('#view-tree')
+            subfolders.sort(cmpFn);
-            .on('click', function (ev) {
+
-                store.put(storekey, !store.get(storekey));
+            const $ul = jq('<ul class="content"/>').appendTo($html);
-                updateSettings();
+            let counter = 0;
-                ev.preventDefault();
+            lo.each(subfolders, e => {
+                counter += 1;
+                if (counter <= settings.maxSubfolders) {
+                    jq('<li/>').append(update(e)).appendTo($ul);
+                }
             });
-
+            if (subfolders.length > settings.maxSubfolders) {
-        // ensure stored value is boolean, otherwise set default
+                jq('<li class="summary">… ' + (subfolders.length - settings.maxSubfolders) + ' more subfolders</li>').appendTo($ul);
-        if (typeof store.get(storekey) !== 'boolean') {
+            }
-            store.put(storekey, settings.show);
+            if (!item.isContentVisible) {
+                $ul.hide();
+            }
         }
-        updateSettings();
 
-        event.sub('location.changed', onLocationChanged);
+        // reflect folder status
+        if (!item.isManaged) {
+            $img.attr('src', resource.icon('folder-page'));
+        }
     }
 
+    if (item.$tree) {
+        item.$tree.replaceWith($html);
+    }
+    item.$tree = $html;
 
-    init();
+    return $html;
-});
+}
+
+function createOnIndicatorClick() {
+    function slide(item, $indicator, $content, down) {
+        item.isContentVisible = down;
+        $indicator.removeClass('open close').addClass(down ? 'open' : 'close');
+        $content[down ? 'slideDown' : 'slideUp']();
+    }
+
+    return ev => {
+        let $indicator = jq(ev.currentTarget);
+        let $item = $indicator.closest('.item');
+        const item = $item.data('item');
+        let $content = $item.find('> ul.content');
+
+        if ($indicator.hasClass('unknown')) {
+            item.fetchContent(() => {
+                item.isContentVisible = false;
+
+                $item = update(item);
+                $indicator = $item.find('> .indicator');
+                $content = $item.find('> ul.content');
+
+                if (!$indicator.hasClass('none')) {
+                    slide(item, $indicator, $content, true);
+                }
+            });
+        } else if ($indicator.hasClass('open')) {
+            slide(item, $indicator, $content, false);
+        } else if ($indicator.hasClass('close')) {
+            slide(item, $indicator, $content, true);
+        }
+    };
+}
+
+function fetchTree(item, callback) {
+    item.isContentVisible = true;
+    item.fetchContent(() => {
+        if (item.parent) {
+            fetchTree(item.parent, callback);
+        } else {
+            callback(item);
+        }
+    });
+}
+
+function updateSettings() {
+    if (store.get(storekey)) {
+        jq('#view-tree').addClass('active');
+        jq('#tree').show();
+    } else {
+        jq('#view-tree').removeClass('active');
+        jq('#tree').hide();
+    }
+}
+
+function onLocationChanged(item) {
+    fetchTree(item, root => {
+        jq('#tree').append(update(root));
+        updateSettings();
+    });
+}
+
+function init() {
+    if (!settings.enabled) {
+        return;
+    }
+
+    jq('<div id="tree"/>')
+        .appendTo('#mainrow')
+        .on('click', '.indicator', createOnIndicatorClick());
+
+    jq(settingsTemplate)
+        .appendTo('#sidebar')
+        .find('#view-tree')
+        .on('click', 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);
+}
+
+
+init();

src/_h5ai/public/js/lib/init.js

@@ -0,0 +1,23 @@
+const {jQuery: jq} = require('./win');
+const config = require('./config');
+
+const name = jq('script[data-module]').data('module');
+const request = {
+    action: 'get',
+    setup: true,
+    options: true,
+    types: true
+};
+
+if (name === 'index') {
+    request.theme = true;
+    request.langs = true;
+} else if (name === 'info') {
+    request.refresh = true;
+} else {
+    throw new Error(`no-main-module: '${name}'`);
+}
+
+config._update(request).then(() => {
+    jq(() => require(`./main/${name}`));
+});

src/_h5ai/public/js/lib/main/index.js

@@ -1,11 +1,28 @@
-modulejs.define('main/index', ['_', 'core/location'], function (_, location) {
+const {document: doc} = require('../win');
-    modulejs.require('view/viewmode');
+const location = require('../core/location');
 
-    _.each(modulejs.state(), function (state, id) {
+require('../view/viewmode');
-        if (id.indexOf('ext/') === 0) {
+require('../ext/autorefresh');
-            modulejs.require(id);
+require('../ext/contextmenu');
-        }
+require('../ext/crumb');
-    });
+require('../ext/custom');
+require('../ext/download');
+require('../ext/filter');
+require('../ext/google-analytics');
+require('../ext/info');
+require('../ext/l10n');
+require('../ext/peer5');
+require('../ext/piwik-analytics');
+require('../ext/preview');
+require('../ext/preview-aud');
+require('../ext/preview-img');
+require('../ext/preview-txt');
+require('../ext/preview-vid');
+require('../ext/search');
+require('../ext/select');
+require('../ext/sort');
+require('../ext/thumbnails');
+require('../ext/title');
+require('../ext/tree');
 
-    location.setLocation(document.location.href, true);
+location.setLocation(doc.location.href, true);
-});

src/_h5ai/public/js/lib/main/info.js

@@ -1,178 +1,182 @@
-modulejs.define('main/info', ['$', 'config', 'core/resource', 'core/server'], function ($, config, resource, server) {
+const {window: win, jQuery: jq} = require('../win');
-    var tplTests =
+const config = require('../config');
-            '<ul id="tests">';
+const resource = require('../core/resource');
-    var tplTest =
+const server = require('../core/server');
-            '<li class="test">' +
-                '<span class="label"></span>' +
-                '<span class="result"></span>' +
-                '<div class="info"></div>' +
-            '</li>';
-    var tplLogin =
-            '<div id="login-wrapper">' +
-                '<input id="pass" type="password" placeholder="password"/>' +
-                '<span id="login">login</span>' +
-                '<span id="logout">logout</span>' +
-                '<div id="hint">' +
-                    'The preset password is the empty string, just click login. ' +
-                    'Change it in \'_h5ai/private/conf/options.json\'.' +
-                '</div>' +
-            '</div>';
-    var tplSupport =
-            '<div id="support">' +
-                'Show your support with a donation!' +
-                '<div class="paypal">' +
-                    '<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">' +
-                        '<input type="hidden" name="cmd" value="_s-xclick" />' +
-                        '<input type="hidden" name="hosted_button_id" value="8WSPKWT7YBTSQ" />' +
-                        '<input type="image" src="' + resource.image('paypal') + '" name="submit" alt="PayPal" />' +
-                    '</form>' +
-                '</div>' +
-            '</div>';
-    var setup = config.setup;
 
 
-    function addTest(label, info, passed, result) {
+const tplTests =
-        var $test = $(tplTest).appendTo('#tests');
+        '<ul id="tests">';
-        $test.find('.label').text(label);
+const tplTest =
-        $test.find('.result')
+        `<li class="test">
-                .addClass(passed ? 'passed' : 'failed')
+            <span class="label"></span>
-                .text(result ? result : passed ? 'yes' : 'no');
+            <span class="result"></span>
-        $test.find('.info').html(info);
+            <div class="info"></div>
+        </li>`;
+const tplLogin =
+        `<div id="login-wrapper">
+            <input id="pass" type="password" placeholder="password"/>
+            <span id="login">login</span>
+            <span id="logout">logout</span>
+            <div id="hint">
+                The preset password is the empty string, just click login.
+                Change it in '_h5ai/private/conf/options.json'.
+            </div>
+        </div>`;
+const tplSupport =
+        `<div id="support">
+            Show your support with a donation!
+            <div class="paypal">
+                <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
+                    <input type="hidden" name="cmd" value="_s-xclick" />
+                    <input type="hidden" name="hosted_button_id" value="8WSPKWT7YBTSQ" />
+                    <input type="image" src="${resource.image('paypal')}" name="submit" alt="PayPal" />
+                </form>
+            </div>
+        </div>`;
+const setup = config.setup;
+
+
+function addTest(label, info, passed, result) {
+    const $test = jq(tplTest).appendTo('#tests');
+    $test.find('.label').text(label);
+    $test.find('.result')
+            .addClass(passed ? 'passed' : 'failed')
+            .text(result ? result : passed ? 'yes' : 'no');
+    $test.find('.info').html(info);
+}
+
+function addTests() {
+    if (!setup.AS_ADMIN) {
+        return;
     }
 
-    function addTests() {
+    jq(tplTests).appendTo('#content');
-        if (!setup.AS_ADMIN) {
-            return;
-        }
 
-        $(tplTests).appendTo('#content');
+    addTest(
+        'h5ai version', 'Only green if this is an official h5ai release',
+        (/^\d+\.\d+\.\d+$/).test(setup.VERSION), setup.VERSION
+    );
 
-        addTest(
+    addTest(
-            'h5ai version', 'Only green if this is an official h5ai release',
+        'Index file found', 'Add <code>' + setup.INDEX_HREF + '</code> to your index file list',
-            (/^\d+\.\d+\.\d+$/).test(setup.VERSION), setup.VERSION
+        setup.INDEX_HREF
-        );
+    );
 
-        addTest(
+    addTest(
-            'Index file found', 'Add <code>' + setup.INDEX_HREF + '</code> to your index file list',
+        'Options parsable', 'File <code>options.json</code> is readable and syntax is correct',
-            setup.INDEX_HREF
+        config.options !== null
-        );
+    );
 
-        addTest(
+    addTest(
-            'Options parsable', 'File <code>options.json</code> is readable and syntax is correct',
+        'Types parsable', 'File <code>types.json</code> is readable and syntax is correct',
-            config.options !== null
+        config.types !== null
-        );
+    );
 
-        addTest(
+    addTest(
-            'Types parsable', 'File <code>types.json</code> is readable and syntax is correct',
+        'Server software', 'Server is one of apache, lighttpd, nginx or cherokee',
-            config.types !== null
+        setup.HAS_SERVER, setup.SERVER_NAME + ' ' + setup.SERVER_VERSION
-        );
+    );
 
-        addTest(
+    addTest(
-            'Server software', 'Server is one of apache, lighttpd, nginx or cherokee',
+        'PHP version', 'PHP version &gt;= ' + setup.MIN_PHP_VERSION,
-            setup.HAS_SERVER, setup.SERVER_NAME + ' ' + setup.SERVER_VERSION
+        true, setup.PHP_VERSION
-        );
+    );
 
-        addTest(
+    addTest(
-            'PHP version', 'PHP version &gt;= ' + setup.MIN_PHP_VERSION,
+        'Public Cache directory', 'Web server has write access',
-            true, setup.PHP_VERSION
+        setup.HAS_WRITABLE_CACHE_PUB
-        );
+    );
 
-        addTest(
+    addTest(
-            'Public Cache directory', 'Web server has write access',
+        'Private Cache directory', 'Web server has write access',
-            setup.HAS_WRITABLE_CACHE_PUB
+        setup.HAS_WRITABLE_CACHE_PRV
-        );
+    );
 
-        addTest(
+    addTest(
-            'Private Cache directory', 'Web server has write access',
+        'Image thumbs', 'PHP GD extension with JPEG support available',
-            setup.HAS_WRITABLE_CACHE_PRV
+        setup.HAS_PHP_JPEG
-        );
+    );
 
-        addTest(
+    addTest(
-            'Image thumbs', 'PHP GD extension with JPEG support available',
+        'Use EXIF thumbs', 'PHP EXIF extension available',
-            setup.HAS_PHP_JPEG
+        setup.HAS_PHP_EXIF
-        );
+    );
 
-        addTest(
+    addTest(
-            'Use EXIF thumbs', 'PHP EXIF extension available',
+        'Movie thumbs', 'Command line program <code>avconv</code> or <code>ffmpeg</code> available',
-            setup.HAS_PHP_EXIF
+        setup.HAS_CMD_AVCONV || setup.HAS_CMD_FFMPEG
-        );
+    );
 
-        addTest(
+    addTest(
-            'Movie thumbs', 'Command line program <code>avconv</code> or <code>ffmpeg</code> available',
+        'PDF thumbs', 'Command line program <code>convert</code> or <code>gm</code> available',
-            setup.HAS_CMD_AVCONV || setup.HAS_CMD_FFMPEG
+        setup.HAS_CMD_CONVERT || setup.HAS_CMD_GM
-        );
+    );
 
-        addTest(
+    addTest(
-            'PDF thumbs', 'Command line program <code>convert</code> or <code>gm</code> available',
+        'Shell tar', 'Command line program <code>tar</code> available',
-            setup.HAS_CMD_CONVERT || setup.HAS_CMD_GM
+        setup.HAS_CMD_TAR
-        );
+    );
 
-        addTest(
+    addTest(
-            'Shell tar', 'Command line program <code>tar</code> available',
+        'Shell zip', 'Command line program <code>zip</code> available',
-            setup.HAS_CMD_TAR
+        setup.HAS_CMD_ZIP
-        );
+    );
 
-        addTest(
+    addTest(
-            'Shell zip', 'Command line program <code>zip</code> available',
+        'Shell du', 'Command line program <code>du</code> available',
-            setup.HAS_CMD_ZIP
+        setup.HAS_CMD_DU
-        );
+    );
+}
 
-        addTest(
+function reload() {
-            'Shell du', 'Command line program <code>du</code> available',
+    win.location.reload();
-            setup.HAS_CMD_DU
+}
-        );
+
+function onLogin() {
+    server.request({
+        action: 'login',
+        pass: jq('#pass').val()
+    }).then(reload);
+}
+
+function onLogout() {
+    server.request({
+        action: 'logout'
+    }).then(reload);
+}
+
+function onKeydown(event) {
+    if (event.which === 13) {
+        onLogin();
     }
+}
 
-    function reload() {
+function addSupport() {
-        window.location.reload();
+    jq(tplSupport).appendTo('#content');
+}
+
+function addLogin() {
+    jq(tplLogin).appendTo('#content');
+
+    if (setup.AS_ADMIN) {
+        jq('#pass').remove();
+        jq('#login').remove();
+        jq('#logout').on('click', onLogout);
+    } else {
+        jq('#pass').on('keydown', onKeydown).focus();
+        jq('#login').on('click', onLogin);
+        jq('#logout').remove();
     }
-
+    if (config.options.hasCustomPasshash) {
-    function onLogin() {
+        jq('#hint').remove();
-        server.request({
-            action: 'login',
-            pass: $('#pass').val()
-        }, reload);
     }
+}
 
-    function onLogout() {
+function init() {
-        server.request({
+    addSupport();
-            action: 'logout'
+    addLogin();
-        }, reload);
+    addTests();
-    }
+}
-
-    function onKeydown(event) {
-        if (event.which === 13) {
-            onLogin();
-        }
-    }
-
-    function addSupport() {
-        $(tplSupport).appendTo('#content');
-    }
-
-    function addLogin() {
-        $(tplLogin).appendTo('#content');
-
-        if (setup.AS_ADMIN) {
-            $('#pass').remove();
-            $('#login').remove();
-            $('#logout').on('click', onLogout);
-        } else {
-            $('#pass').on('keydown', onKeydown).focus();
-            $('#login').on('click', onLogin);
-            $('#logout').remove();
-        }
-        if (config.options.hasCustomPasshash) {
-            $('#hint').remove();
-        }
-    }
-
-    function init() {
-        addSupport();
-        addLogin();
-        addTests();
-    }
 
 
-    init();
+init();
-});

src/_h5ai/public/js/lib/model/item.js

@@ -1,226 +1,230 @@
-modulejs.define('model/item', ['_', 'core/event', 'core/location', 'core/server', 'core/settings', 'core/types'], function (_, event, location, server, settings, types) {
+const {_: lo} = require('../win');
-    var reEndsWithSlash = /\/$/;
+const location = require('../core/location');
-    var reSplitPath = /^(.*\/)([^\/]+\/?)$/;
+const server = require('../core/server');
-    var cache = {};
+const settings = require('../core/settings');
+const types = require('../core/types');
 
 
-    function startsWith(sequence, part) {
+const reEndsWithSlash = /\/$/;
-        if (!sequence || !sequence.indexOf) {
+const reSplitPath = /^(.*\/)([^\/]+\/?)$/;
-            return false;
+const cache = {};
-        }
 
-        return sequence.indexOf(part) === 0;
+
+function startsWith(sequence, part) {
+    if (!sequence || !sequence.indexOf) {
+        return false;
     }
 
-    function createLabel(sequence) {
+    return sequence.indexOf(part) === 0;
-        sequence = sequence.replace(reEndsWithSlash, '');
+}
-        try {
+
-            sequence = decodeURIComponent(sequence);
+function createLabel(sequence) {
-        } catch (e) {/* skip */}
+    sequence = sequence.replace(reEndsWithSlash, '');
-        return sequence;
+    try {
+        sequence = decodeURIComponent(sequence);
+    } catch (e) {/* skip */}
+    return sequence;
+}
+
+function splitPath(sequence) { // eslint-disable-line consistent-return
+    if (sequence === '/') {
+        return {
+            parent: null,
+            name: '/'
+        };
     }
 
-    function splitPath(sequence) { // eslint-disable-line consistent-return
+    const match = reSplitPath.exec(sequence);
-        if (sequence === '/') {
+    if (match) {
-            return {
+        const split = {
-                parent: null,
+            parent: match[1],
-                name: '/'
+            name: match[2]
-            };
+        };
+
+        if (split.parent && !startsWith(split.parent, settings.rootHref)) {
+            split.parent = null;
         }
+        return split;
+    }
+}
 
-        var match = reSplitPath.exec(sequence);
+function getItem(options) {
-        if (match) {
+    if (lo.isString(options)) {
-            var split = {
+        options = {href: options};
-                parent: match[1],
+    } else if (!options || !lo.isString(options.href)) {
-                name: match[2]
+        return null;
-            };
+    }
 
-            if (split.parent && !startsWith(split.parent, settings.rootHref)) {
+    const href = location.forceEncoding(options.href);
-                split.parent = null;
+
+    if (!startsWith(href, settings.rootHref)) {
+        return null;
+    }
+
+    const item = cache[href] || new Item(href); // eslint-disable-line no-use-before-define
+
+    if (lo.isNumber(options.time)) {
+        item.time = options.time;
+    }
+    if (lo.isNumber(options.size)) {
+        item.size = options.size;
+    }
+    if (options.managed) {
+        item.isManaged = true;
+    }
+    if (options.fetched) {
+        item.isContentFetched = true;
+    }
+
+    return item;
+}
+
+function removeItem(absHref) {
+    absHref = location.forceEncoding(absHref);
+
+    const item = cache[absHref];
+
+    if (item) {
+        delete cache[absHref];
+        if (item.parent) {
+            delete item.parent.content[item.absHref];
+        }
+        lo.each(item.content, child => {
+            removeItem(child.absHref);
+        });
+    }
+}
+
+function fetchContent(absHref, callback) {
+    const item = getItem(absHref);
+
+    if (!lo.isFunction(callback)) {
+        callback = () => undefined;
+    }
+
+    if (item.isContentFetched) {
+        callback(item);
+    } else {
+        server.request({action: 'get', items: {href: item.absHref, what: 1}}).then(response => {
+            if (response.items) {
+                lo.each(response.items, jsonItem => {
+                    getItem(jsonItem);
+                });
             }
-            return split;
-        }
-    }
 
-    function getItem(options) {
-        if (_.isString(options)) {
-            options = {href: options};
-        } else if (!options || !_.isString(options.href)) {
-            return null;
-        }
-
-        var href = location.forceEncoding(options.href);
-
-        if (!startsWith(href, settings.rootHref)) {
-            return null;
-        }
-
-        var item = cache[href] || new Item(href); // eslint-disable-line no-use-before-define
-
-        if (_.isNumber(options.time)) {
-            item.time = options.time;
-        }
-        if (_.isNumber(options.size)) {
-            item.size = options.size;
-        }
-        if (options.managed) {
-            item.isManaged = true;
-        }
-        if (options.fetched) {
-            item.isContentFetched = true;
-        }
-
-        return item;
-    }
-
-    function removeItem(absHref) {
-        absHref = location.forceEncoding(absHref);
-
-        var item = cache[absHref];
-
-        if (item) {
-            delete cache[absHref];
-            if (item.parent) {
-                delete item.parent.content[item.absHref];
-            }
-            _.each(item.content, function (child) {
-                removeItem(child.absHref);
-            });
-        }
-    }
-
-    function fetchContent(absHref, callback) {
-        var item = getItem(absHref);
-
-        if (!_.isFunction(callback)) {
-            callback = function () {};
-        }
-
-        if (item.isContentFetched) {
             callback(item);
-        } else {
+        });
-            server.request({action: 'get', items: {href: item.absHref, what: 1}}, function (response) {
+    }
-                if (response.items) {
+}
-                    _.each(response.items, function (jsonItem) {
-                        getItem(jsonItem);
-                    });
-                }
 
-                callback(item);
+
-            });
+function Item(absHref) {
+    const split = splitPath(absHref);
+
+    cache[absHref] = this;
+
+    this.absHref = absHref;
+    this.type = types.getType(absHref);
+    this.label = createLabel(absHref === '/' ? location.getDomain() : split.name);
+    this.time = null;
+    this.size = null;
+    this.parent = null;
+    this.isManaged = null;
+    this.content = {};
+
+    if (split.parent) {
+        this.parent = getItem(split.parent);
+        this.parent.content[this.absHref] = this;
+        if (lo.keys(this.parent.content).length > 1) {
+            this.parent.isContentFetched = true;
         }
     }
+}
 
+lo.extend(Item.prototype, {
+    isFolder() {
+        return reEndsWithSlash.test(this.absHref);
+    },
 
-    function Item(absHref) {
+    isCurrentFolder() {
-        var split = splitPath(absHref);
+        return this.absHref === location.getAbsHref();
+    },
 
-        cache[absHref] = this;
+    isInCurrentFolder() {
+        return Boolean(this.parent) && this.parent.isCurrentFolder();
+    },
 
-        this.absHref = absHref;
+    isCurrentParentFolder() {
-        this.type = types.getType(absHref);
+        const item = getItem(location.getAbsHref());
-        this.label = createLabel(absHref === '/' ? location.getDomain() : split.name);
+        return Boolean(item) && this === item.parent;
-        this.time = null;
+    },
-        this.size = null;
-        this.parent = null;
-        this.isManaged = null;
-        this.content = {};
 
-        if (split.parent) {
+    isDomain() {
-            this.parent = getItem(split.parent);
+        return this.absHref === '/';
-            this.parent.content[this.absHref] = this;
+    },
-            if (_.keys(this.parent.content).length > 1) {
+
-                this.parent.isContentFetched = true;
+    isRoot() {
-            }
+        return this.absHref === settings.rootHref;
+    },
+
+    isEmpty() {
+        return lo.keys(this.content).length === 0;
+    },
+
+    fetchContent(callback) {
+        return fetchContent(this.absHref, callback);
+    },
+
+    getCrumb() {
+        let item = this; // eslint-disable-line consistent-this
+        const crumb = [item];
+
+        while (item.parent) {
+            item = item.parent;
+            crumb.unshift(item);
         }
+
+        return crumb;
+    },
+
+    getSubfolders() {
+        return lo.sortBy(lo.filter(this.content, item => {
+            return item.isFolder();
+        }), item => {
+            return item.label.toLowerCase();
+        });
+    },
+
+    getStats() {
+        let folders = 0;
+        let files = 0;
+
+        lo.each(this.content, item => {
+            if (item.isFolder()) {
+                folders += 1;
+            } else {
+                files += 1;
+            }
+        });
+
+        let depth = 0;
+        let item = this; // eslint-disable-line consistent-this
+
+        while (item.parent) {
+            depth += 1;
+            item = item.parent;
+        }
+
+        return {
+            folders,
+            files,
+            depth
+        };
     }
-
-    _.extend(Item.prototype, {
-
-        isFolder: function () {
-            return reEndsWithSlash.test(this.absHref);
-        },
-
-        isCurrentFolder: function () {
-            return this.absHref === location.getAbsHref();
-        },
-
-        isInCurrentFolder: function () {
-            return Boolean(this.parent) && this.parent.isCurrentFolder();
-        },
-
-        isCurrentParentFolder: function () {
-            var item = getItem(location.getAbsHref());
-            return Boolean(item) && this === item.parent;
-        },
-
-        isDomain: function () {
-            return this.absHref === '/';
-        },
-
-        isRoot: function () {
-            return this.absHref === settings.rootHref;
-        },
-
-        isEmpty: function () {
-            return _.keys(this.content).length === 0;
-        },
-
-        fetchContent: function (callback) {
-            return fetchContent(this.absHref, callback);
-        },
-
-        getCrumb: function () {
-            var item = this; // eslint-disable-line consistent-this
-            var crumb = [item];
-
-            while (item.parent) {
-                item = item.parent;
-                crumb.unshift(item);
-            }
-
-            return crumb;
-        },
-
-        getSubfolders: function () {
-            return _.sortBy(_.filter(this.content, function (item) {
-                return item.isFolder();
-            }), function (item) {
-                return item.label.toLowerCase();
-            });
-        },
-
-        getStats: function () {
-            var folders = 0;
-            var files = 0;
-
-            _.each(this.content, function (item) {
-                if (item.isFolder()) {
-                    folders += 1;
-                } else {
-                    files += 1;
-                }
-            });
-
-            var depth = 0;
-            var item = this; // eslint-disable-line consistent-this
-
-            while (item.parent) {
-                depth += 1;
-                item = item.parent;
-            }
-
-            return {
-                folders: folders,
-                files: files,
-                depth: depth
-            };
-        }
-    });
-
-
-    return {
-        get: getItem,
-        remove: removeItem
-    };
 });
+
+
+module.exports = {
+    get: getItem,
+    remove: removeItem
+};

src/_h5ai/public/js/lib/view/content.js

@@ -1,7 +1,8 @@
-modulejs.define('view/content', ['$', 'view/mainrow'], function ($, mainrow) {
+const {jQuery: jq} = require('../win');
-    var $el = $('<div id="content"/>').appendTo(mainrow.$el);
+const mainrow = require('./mainrow');
 
-    return {
+const $el = jq('<div id="content"/>').appendTo(mainrow.$el);
-        $el: $el
+
-    };
+module.exports = {
-});
+    $el
+};

src/_h5ai/public/js/lib/view/mainrow.js

@@ -1,7 +1,8 @@
-modulejs.define('view/mainrow', ['$', 'view/root'], function ($, root) {
+const {jQuery: jq} = require('../win');
-    var $el = $('<div id="mainrow"/>').appendTo(root.$el);
+const root = require('./root');
 
-    return {
+const $el = jq('<div id="mainrow"/>').appendTo(root.$el);
-        $el: $el
+
-    };
+module.exports = {
-});
+    $el
+};

src/_h5ai/public/js/lib/view/notification.js

@@ -1,16 +1,17 @@
-modulejs.define('view/notification', ['$', 'view/root'], function ($, root) {
+const {jQuery: jq} = require('../win');
-    var $el = $('<div id="notification"/>').hide().appendTo(root.$el);
+const root = require('./root');
 
-    function set(content) {
+const $el = jq('<div id="notification"/>').hide().appendTo(root.$el);
-        if (content) {
+
-            $el.stop(true, true).html(content).fadeIn(400);
+function set(content) {
-        } else {
+    if (content) {
-            $el.stop(true, true).fadeOut(400);
+        $el.stop(true, true).html(content).fadeIn(400);
-        }
+    } else {
+        $el.stop(true, true).fadeOut(400);
     }
+}
 
-    return {
+module.exports = {
-        $el: $el,
+    $el,
-        set: set
+    set
-    };
+};
-});

src/_h5ai/public/js/lib/view/root.js

@@ -1,9 +1,9 @@
-modulejs.define('view/root', ['$'], function ($) {
+const {jQuery: jq} = require('../win');
-    var $el = $('body').attr('id', 'root');
 
-    $('#fallback, #fallback-hints').remove();
+const $el = jq('body').attr('id', 'root');
 
-    return {
+jq('#fallback, #fallback-hints').remove();
-        $el: $el
+
-    };
+module.exports = {
-});
+    $el
+};

src/_h5ai/public/js/lib/view/sidebar.js

@@ -1,40 +1,45 @@
-modulejs.define('view/sidebar', ['$', 'core/resource', 'core/store', 'view/mainrow', 'view/topbar'], function ($, resource, store, mainrow, topbar) {
+const {jQuery: jq} = require('../win');
-    var storekey = 'sidebarIsVisible';
+const resource = require('../core/resource');
-    var tplSidebar = '<div id="sidebar"/>';
+const store = require('../core/store');
-    var tplToggle =
+const mainrow = require('./mainrow');
-            '<div id="sidebar-toggle" class="tool">' +
+const topbar = require('./topbar');
-                '<img alt="sidebar"/>' +
-            '</div>';
-    var $sidebar = $(tplSidebar);
-    var $toggle = $(tplToggle);
-    var $img = $toggle.find('img');
 
 
-    function update(toggle) {
+const storekey = 'sidebarIsVisible';
-        var isVisible = store.get(storekey);
+const tplSidebar = '<div id="sidebar"/>';
+const tplToggle =
+        `<div id="sidebar-toggle" class="tool">
+            <img alt="sidebar"/>
+        </div>`;
+const $sidebar = jq(tplSidebar);
+const $toggle = jq(tplToggle);
+const $img = $toggle.find('img');
 
-        if (toggle) {
-            isVisible = !isVisible;
-            store.put(storekey, isVisible);
-        }
 
-        if (isVisible) {
+function update(toggle) {
-            $toggle.addClass('active');
+    let isVisible = store.get(storekey);
-            $img.attr('src', resource.image('back'));
+
-            $sidebar.show();
+    if (toggle) {
-        } else {
+        isVisible = !isVisible;
-            $toggle.removeClass('active');
+        store.put(storekey, isVisible);
-            $img.attr('src', resource.image('sidebar'));
-            $sidebar.hide();
-        }
     }
 
+    if (isVisible) {
+        $toggle.addClass('active');
+        $img.attr('src', resource.image('back'));
+        $sidebar.show();
+    } else {
+        $toggle.removeClass('active');
+        $img.attr('src', resource.image('sidebar'));
+        $sidebar.hide();
+    }
+}
 
-    $sidebar.appendTo(mainrow.$el);
-    $toggle.appendTo(topbar.$toolbar).on('click', function () { update(true); });
-    update(false);
 
-    return {
+$sidebar.appendTo(mainrow.$el);
-        $el: $sidebar
+$toggle.appendTo(topbar.$toolbar).on('click', () => update(true));
-    };
+update();
-});
+
+module.exports = {
+    $el: $sidebar
+};

src/_h5ai/public/js/lib/view/topbar.js

@@ -1,18 +1,19 @@
-modulejs.define('view/topbar', ['$', 'view/root'], function ($, root) {
+const {jQuery: jq} = require('../win');
-    var tplTopbar =
+const root = require('./root');
-            '<div id="topbar">' +
-                '<div id="toolbar"/>' +
-                '<div id="flowbar"/>' +
-                '<a id="backlink" href="https://larsjung.de/h5ai/" title="powered by h5ai - https://larsjung.de/h5ai/">' +
-                    '<div>powered</div>' +
-                    '<div>by h5ai</div>' +
-                '</a>' +
-            '</div>';
-    var $el = $(tplTopbar).appendTo(root.$el);
 
-    return {
+const tplTopbar =
-        $el: $el,
+        `<div id="topbar">
-        $toolbar: $el.find('#toolbar'),
+            <div id="toolbar"/>
-        $flowbar: $el.find('#flowbar')
+            <div id="flowbar"/>
-    };
+            <a id="backlink" href="https://larsjung.de/h5ai/" title="powered by h5ai - https://larsjung.de/h5ai/">
-});
+                <div>powered</div>
+                <div>by h5ai</div>
+            </a>
+        </div>`;
+const $el = jq(tplTopbar).appendTo(root.$el);
+
+module.exports = {
+    $el,
+    $toolbar: $el.find('#toolbar'),
+    $flowbar: $el.find('#flowbar')
+};

src/_h5ai/public/js/lib/view/view.js

@@ -1,292 +1,299 @@
-modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/location', 'core/resource', 'core/settings', 'core/store', 'view/content'], function (_, $, event, format, location, resource, allsettings, store, content) {
+const {jQuery: jq, _: lo} = require('../win');
-    var modes = ['details', 'grid', 'icons'];
+const event = require('../core/event');
-    var sizes = [20, 40, 60, 80, 100, 150, 200, 250, 300, 350, 400];
+const format = require('../core/format');
-    var settings = _.extend({
+const location = require('../core/location');
-        binaryPrefix: false,
+const resource = require('../core/resource');
-        hideFolders: false,
+const store = require('../core/store');
-        hideParentFolder: false,
+const allsettings = require('../core/settings');
-        modes: modes,
+const content = require('./content');
-        setParentFolderLabels: false,
+
-        sizes: sizes
+const modes = ['details', 'grid', 'icons'];
-    }, allsettings.view);
+const sizes = [20, 40, 60, 80, 100, 150, 200, 250, 300, 350, 400];
-    var sortedSizes = settings.sizes.sort(function (a, b) { return a - b; });
+const settings = lo.extend({
-    var checkedModes = _.intersection(settings.modes, modes);
+    binaryPrefix: false,
-    var storekey = 'view';
+    hideFolders: false,
-    var tplView =
+    hideParentFolder: false,
-            '<div id="view">' +
+    modes,
-                '<ul id="items" class="clearfix">' +
+    setParentFolderLabels: false,
-                    '<li class="header">' +
+    sizes
-                        '<a class="icon"/>' +
+}, allsettings.view);
-                        '<a class="label" href="#"><span class="l10n-name"/></a>' +
+const sortedSizes = settings.sizes.sort((a, b) => a - b);
-                        '<a class="date" href="#"><span class="l10n-lastModified"/></a>' +
+const checkedModes = lo.intersection(settings.modes, modes);
-                        '<a class="size" href="#"><span class="l10n-size"/></a>' +
+const storekey = 'view';
-                    '</li>' +
+const tplView =
-                '</ul>' +
+        `<div id="view">
-                '<div id="view-hint"/>' +
+            <ul id="items" class="clearfix">
-            '</div>';
+                <li class="header">
-    var tplItem =
+                    <a class="icon"/>
-            '<li class="item">' +
+                    <a class="label" href="#"><span class="l10n-name"/></a>
-                '<a>' +
+                    <a class="date" href="#"><span class="l10n-lastModified"/></a>
-                    '<span class="icon square"><img/></span>' +
+                    <a class="size" href="#"><span class="l10n-size"/></a>
-                    '<span class="icon landscape"><img/></span>' +
+                </li>
-                    '<span class="label"/>' +
+            </ul>
-                    '<span class="date"/>' +
+            <div id="view-hint"/>
-                    '<span class="size"/>' +
+        </div>`;
-                '</a>' +
+const tplItem =
-            '</li>';
+        `<li class="item">
-    var $view = $(tplView);
+            <a>
-    var $items = $view.find('#items');
+                <span class="icon square"><img/></span>
-    var $hint = $view.find('#view-hint');
+                <span class="icon landscape"><img/></span>
+                <span class="label"/>
+                <span class="date"/>
+                <span class="size"/>
+            </a>
+        </li>`;
+const $view = jq(tplView);
+const $items = $view.find('#items');
+const $hint = $view.find('#view-hint');
 
 
-    function cropSize(size, min, max) {
+function cropSize(size, min, max) {
-        return Math.min(max, Math.max(min, size));
+    return Math.min(max, Math.max(min, size));
-    }
+}
 
-    function createStyles(size) {
+function createStyles(size) {
-        var dsize = cropSize(size, 20, 80);
+    const dsize = cropSize(size, 20, 80);
-        var gsize = cropSize(size, 40, 160);
+    const gsize = cropSize(size, 40, 160);
-        var isize = cropSize(size, 80, 1000);
+    const isize = cropSize(size, 80, 1000);
-        var ilsize = Math.round(isize * 4 / 3);
+    const ilsize = Math.round(isize * 4 / 3);
-        var rules = [
+    const rules = [
-            '#view.view-details.view-size-' + size + ' .item .label { line-height: ' + (dsize + 14) + 'px !important; }',
+        `#view.view-details.view-size-${size} .item .label {line-height: ${dsize + 14}px !important;}`,
-            '#view.view-details.view-size-' + size + ' .item .date { line-height: ' + (dsize + 14) + 'px !important; }',
+        `#view.view-details.view-size-${size} .item .date {line-height: ${dsize + 14}px !important;}`,
-            '#view.view-details.view-size-' + size + ' .item .size { line-height: ' + (dsize + 14) + 'px !important; }',
+        `#view.view-details.view-size-${size} .item .size {line-height: ${dsize + 14}px !important;}`,
-            '#view.view-details.view-size-' + size + ' .square { width: ' + dsize + 'px !important; height: ' + dsize + 'px !important; }',
+        `#view.view-details.view-size-${size} .square {width: ${dsize}px !important; height: ${dsize}px !important;}`,
-            '#view.view-details.view-size-' + size + ' .square img { width: ' + dsize + 'px !important; height: ' + dsize + 'px !important; }',
+        `#view.view-details.view-size-${size} .square img {width: ${dsize}px !important; height: ${dsize}px !important;}`,
-            '#view.view-details.view-size-' + size + ' .label { margin-left: ' + (dsize + 32) + 'px !important; }',
+        `#view.view-details.view-size-${size} .label {margin-left: ${dsize + 32}px !important;}`,
 
-            '#view.view-grid.view-size-' + size + ' .item .label { line-height: ' + gsize + 'px !important; }',
+        `#view.view-grid.view-size-${size} .item .label {line-height: ${gsize}px !important;}`,
-            '#view.view-grid.view-size-' + size + ' .square { width: ' + gsize + 'px !important; height: ' + gsize + 'px !important; }',
+        `#view.view-grid.view-size-${size} .square {width: ${gsize}px !important; height: ${gsize}px !important;}`,
-            '#view.view-grid.view-size-' + size + ' .square img { width: ' + gsize + 'px !important; height: ' + gsize + 'px !important; }',
+        `#view.view-grid.view-size-${size} .square img {width: ${gsize}px !important; height: ${gsize}px !important;}`,
 
-            '#view.view-icons.view-size-' + size + ' .item { width: ' + ilsize + 'px !important; }',
+        `#view.view-icons.view-size-${size} .item {width: ${ilsize}px !important;}`,
-            '#view.view-icons.view-size-' + size + ' .landscape { width: ' + ilsize + 'px !important; height: ' + isize + 'px !important; }',
+        `#view.view-icons.view-size-${size} .landscape {width: ${ilsize}px !important; height: ${isize}px !important;}`,
-            '#view.view-icons.view-size-' + size + ' .landscape img { width: ' + isize + 'px !important; height: ' + isize + 'px !important; }',
+        `#view.view-icons.view-size-${size} .landscape img {width: ${isize}px !important; height: ${isize}px !important;}`,
-            '#view.view-icons.view-size-' + size + ' .landscape .thumb { width: ' + ilsize + 'px !important; }'
+        `#view.view-icons.view-size-${size} .landscape .thumb {width: ${ilsize}px !important;}`
-        ];
+    ];
 
-        return rules.join('\n');
+    return rules.join('\n');
-    }
+}
 
-    function addCssStyles() {
+function addCssStyles() {
-        var styles = _.map(sortedSizes, function (size) { return createStyles(size); });
+    const styles = lo.map(sortedSizes, size => createStyles(size));
-        styles.push('#view .icon img { max-width: ' + settings.maxIconSize + 'px; max-height: ' + settings.maxIconSize + 'px; }');
+    styles.push(`#view .icon img {max-width: ${settings.maxIconSize}px; max-height: ${settings.maxIconSize}px;}`);
-        $('<style/>').text(styles.join('\n')).appendTo('head');
+    jq('<style/>').text(styles.join('\n')).appendTo('head');
-    }
+}
 
-    function set(mode, size) {
+function set(mode, size) {
-        var stored = store.get(storekey);
+    const stored = store.get(storekey);
 
-        mode = mode || stored && stored.mode;
+    mode = mode || stored && stored.mode;
-        size = size || stored && stored.size;
+    size = size || stored && stored.size;
-        mode = _.includes(settings.modes, mode) ? mode : settings.modes[0];
+    mode = lo.includes(settings.modes, mode) ? mode : settings.modes[0];
-        size = _.includes(settings.sizes, size) ? size : settings.sizes[0];
+    size = lo.includes(settings.sizes, size) ? size : settings.sizes[0];
-        store.put(storekey, {mode: mode, size: size});
+    store.put(storekey, {mode, size});
 
-        _.each(checkedModes, function (m) {
+    lo.each(checkedModes, m => {
-            if (m === mode) {
+        if (m === mode) {
-                $view.addClass('view-' + m);
+            $view.addClass('view-' + m);
-            } else {
-                $view.removeClass('view-' + m);
-            }
-        });
-
-        _.each(sortedSizes, function (s) {
-            if (s === size) {
-                $view.addClass('view-size-' + s);
-            } else {
-                $view.removeClass('view-size-' + s);
-            }
-        });
-
-        event.pub('view.mode.changed', mode, size);
-    }
-
-    function getModes() {
-        return checkedModes;
-    }
-
-    function getSizes() {
-        return sortedSizes;
-    }
-
-    function getMode() {
-        return store.get(storekey).mode;
-    }
-
-    function setMode(mode) {
-        set(mode, null);
-    }
-
-    function getSize() {
-        return store.get(storekey).size;
-    }
-
-    function setSize(size) {
-        set(null, size);
-    }
-
-    function createHtml(item) {
-        var $html = $(tplItem);
-        var $a = $html.find('a');
-        var $iconImg = $html.find('.icon img');
-        var $label = $html.find('.label');
-        var $date = $html.find('.date');
-        var $size = $html.find('.size');
-
-        $html
-            .addClass(item.isFolder() ? 'folder' : 'file')
-            .data('item', item);
-
-        location.setLink($a, item);
-
-        $label.text(item.label).attr('title', item.label);
-        $date.data('time', item.time).text(format.formatDate(item.time));
-        $size.data('bytes', item.size).text(format.formatSize(item.size));
-        item.icon = resource.icon(item.type);
-
-        if (item.isFolder() && !item.isManaged) {
-            $html.addClass('page');
-            item.icon = resource.icon('folder-page');
-        }
-
-        if (item.isCurrentParentFolder()) {
-            item.icon = resource.icon('folder-parent');
-            if (!settings.setParentFolderLabels) {
-                $label.addClass('l10n-parentDirectory');
-            }
-            $html.addClass('folder-parent');
-        }
-        $iconImg.attr('src', item.icon).attr('alt', item.type);
-
-        item.$view = $html;
-
-        return $html;
-    }
-
-    function onMouseenter() {
-        var item = $(this).closest('.item').data('item');
-        event.pub('item.mouseenter', item);
-    }
-
-    function onMouseleave() {
-        var item = $(this).closest('.item').data('item');
-        event.pub('item.mouseleave', item);
-    }
-
-    function checkHint() {
-        var hasNoItems = $items.find('.item').not('.folder-parent').length === 0;
-
-        if (hasNoItems) {
-            $hint.show();
         } else {
-            $hint.hide();
+            $view.removeClass('view-' + m);
         }
-    }
+    });
 
-    function setItems(items) {
+    lo.each(sortedSizes, s => {
-        var removed = _.map($items.find('.item'), function (item) {
+        if (s === size) {
-            return $(item).data('item');
+            $view.addClass('view-size-' + s);
-        });
+        } else {
-
+            $view.removeClass('view-size-' + s);
-        $items.find('.item').remove();
-
-        _.each(items, function (e) {
-            $items.append(createHtml(e));
-        });
-
-        content.$el.scrollLeft(0).scrollTop(0);
-        checkHint();
-        event.pub('view.changed', items, removed);
-    }
-
-    function changeItems(add, remove) {
-        _.each(add, function (item) {
-            createHtml(item).hide().appendTo($items).fadeIn(400);
-        });
-
-        _.each(remove, function (item) {
-            item.$view.fadeOut(400, function () {
-                item.$view.remove();
-            });
-        });
-
-        checkHint();
-        event.pub('view.changed', add, remove);
-    }
-
-    function setHint(l10nKey) {
-        $hint.removeClass().addClass('l10n-' + l10nKey);
-        checkHint();
-    }
-
-    function onLocationChanged(item) {
-        if (!item) {
-            item = location.getItem();
         }
+    });
 
-        var items = [];
+    event.pub('view.mode.changed', mode, size);
+}
 
-        if (item.parent && !settings.hideParentFolder) {
+function getModes() {
-            items.push(item.parent);
+    return checkedModes;
+}
+
+function getSizes() {
+    return sortedSizes;
+}
+
+function getMode() {
+    return store.get(storekey).mode;
+}
+
+function setMode(mode) {
+    set(mode, null);
+}
+
+function getSize() {
+    return store.get(storekey).size;
+}
+
+function setSize(size) {
+    set(null, size);
+}
+
+function createHtml(item) {
+    const $html = jq(tplItem);
+    const $a = $html.find('a');
+    const $iconImg = $html.find('.icon img');
+    const $label = $html.find('.label');
+    const $date = $html.find('.date');
+    const $size = $html.find('.size');
+
+    $html
+        .addClass(item.isFolder() ? 'folder' : 'file')
+        .data('item', item);
+
+    location.setLink($a, item);
+
+    $label.text(item.label).attr('title', item.label);
+    $date.data('time', item.time).text(format.formatDate(item.time));
+    $size.data('bytes', item.size).text(format.formatSize(item.size));
+    item.icon = resource.icon(item.type);
+
+    if (item.isFolder() && !item.isManaged) {
+        $html.addClass('page');
+        item.icon = resource.icon('folder-page');
+    }
+
+    if (item.isCurrentParentFolder()) {
+        item.icon = resource.icon('folder-parent');
+        if (!settings.setParentFolderLabels) {
+            $label.addClass('l10n-parentDirectory');
         }
-
+        $html.addClass('folder-parent');
-        _.each(item.content, function (child) {
-            if (!(child.isFolder() && settings.hideFolders)) {
-                items.push(child);
-            }
-        });
-
-        setHint('empty');
-        setItems(items);
     }
+    $iconImg.attr('src', item.icon).attr('alt', item.type);
 
-    function onLocationRefreshed(item, added, removed) {
+    item.$view = $html;
-        var add = [];
 
-        _.each(added, function (child) {
+    return $html;
-            if (!(child.isFolder() && settings.hideFolders)) {
+}
-                add.push(child);
-            }
-        });
 
-        setHint('empty');
+function onMouseenter(ev) {
-        changeItems(add, removed);
+    const item = jq(ev.currentTarget).closest('.item').data('item');
-    }
+    event.pub('item.mouseenter', item);
+}
 
-    function init() {
+function onMouseleave(ev) {
-        addCssStyles();
+    const item = jq(ev.currentTarget).closest('.item').data('item');
-        set();
+    event.pub('item.mouseleave', item);
+}
 
-        $view.appendTo(content.$el);
+function checkHint() {
+    const hasNoItems = $items.find('.item').not('.folder-parent').length === 0;
+
+    if (hasNoItems) {
+        $hint.show();
+    } else {
         $hint.hide();
+    }
+}
 
-        format.setDefaultMetric(settings.binaryPrefix);
+function setItems(items) {
+    const removed = lo.map($items.find('.item'), item => {
+        return jq(item).data('item');
+    });
 
-        $items
+    $items.find('.item').remove();
-            .on('mouseenter', '.item a', onMouseenter)
-            .on('mouseleave', '.item a', onMouseleave);
 
-        event.sub('location.changed', onLocationChanged);
+    lo.each(items, e => {
-        event.sub('location.refreshed', onLocationRefreshed);
+        $items.append(createHtml(e));
+    });
+
+    content.$el.scrollLeft(0).scrollTop(0);
+    checkHint();
+    event.pub('view.changed', items, removed);
+}
+
+function changeItems(add, remove) {
+    lo.each(add, item => {
+        createHtml(item).hide().appendTo($items).fadeIn(400);
+    });
+
+    lo.each(remove, item => {
+        item.$view.fadeOut(400, () => {
+            item.$view.remove();
+        });
+    });
+
+    checkHint();
+    event.pub('view.changed', add, remove);
+}
+
+function setHint(l10nKey) {
+    $hint.removeClass().addClass('l10n-' + l10nKey);
+    checkHint();
+}
+
+function onLocationChanged(item) {
+    if (!item) {
+        item = location.getItem();
     }
 
+    const items = [];
 
-    init();
+    if (item.parent && !settings.hideParentFolder) {
+        items.push(item.parent);
+    }
 
-    return {
+    lo.each(item.content, child => {
-        $el: $view,
+        if (!(child.isFolder() && settings.hideFolders)) {
-        $items: $items,
+            items.push(child);
-        setItems: setItems,
+        }
-        changeItems: changeItems,
+    });
-        setLocation: onLocationChanged,
+
-        setHint: setHint,
+    setHint('empty');
-        getModes: getModes,
+    setItems(items);
-        getMode: getMode,
+}
-        setMode: setMode,
+
-        getSizes: getSizes,
+function onLocationRefreshed(item, added, removed) {
-        getSize: getSize,
+    const add = [];
-        setSize: setSize
+
-    };
+    lo.each(added, child => {
-});
+        if (!(child.isFolder() && settings.hideFolders)) {
+            add.push(child);
+        }
+    });
+
+    setHint('empty');
+    changeItems(add, removed);
+}
+
+function init() {
+    addCssStyles();
+    set();
+
+    $view.appendTo(content.$el);
+    $hint.hide();
+
+    format.setDefaultMetric(settings.binaryPrefix);
+
+    $items
+        .on('mouseenter', '.item a', onMouseenter)
+        .on('mouseleave', '.item a', onMouseleave);
+
+    event.sub('location.changed', onLocationChanged);
+    event.sub('location.refreshed', onLocationRefreshed);
+}
+
+
+init();
+
+module.exports = {
+    $el: $view,
+    $items,
+    setItems,
+    changeItems,
+    setLocation: onLocationChanged,
+    setHint,
+    getModes,
+    getMode,
+    setMode,
+    getSizes,
+    getSize,
+    setSize
+};

src/_h5ai/public/js/lib/view/viewmode.js

@@ -1,91 +1,98 @@
-modulejs.define('view/viewmode', ['_', '$', 'core/event', 'core/resource', 'core/settings', 'view/sidebar', 'view/topbar', 'view/view'], function (_, $, event, resource, allsettings, sidebar, topbar, view) {
+const {jQuery: jq, _: lo} = require('../win');
-    var settings = _.extend({
+const event = require('../core/event');
-        modeToggle: false
+const resource = require('../core/resource');
-    }, allsettings.view);
+const allsettings = require('../core/settings');
-    var tplSettings =
+const sidebar = require('./sidebar');
-            '<div id="viewmode-settings" class="block"><h1 class="l10n-view">View</h1></div>';
+const topbar = require('./topbar');
-    var tplMode =
+const view = require('./view');
-            '<div id="viewmode-[MODE]" class="button mode">' +
-                '<img src="' + resource.image('view-[MODE]') + '" alt="viewmode-[MODE]"/>' +
-            '</div>';
-    var tplSize =
-            '<input id="viewmode-size" type="range" min="0" max="0" value="0">';
-    var tplToggle =
-            '<div id="viewmode-toggle" class="tool">' +
-                '<img alt="viewmode"/>' +
-            '</div>';
-    var modes;
-    var sizes;
 
 
-    function onChanged(mode, size) {
+const settings = lo.extend({
-        $('#viewmode-settings .mode').removeClass('active');
+    modeToggle: false
-        $('#viewmode-' + mode).addClass('active');
+}, allsettings.view);
-        $('#viewmode-size').val(_.indexOf(sizes, size));
+const tplSettings =
+        '<div id="viewmode-settings" class="block"><h1 class="l10n-view">View</h1></div>';
+const tplMode =
+        `<div id="viewmode-[MODE]" class="button mode">
+            <img src="${resource.image('view-[MODE]')}" alt="viewmode-[MODE]"/>
+        </div>`;
+const tplSize =
+        '<input id="viewmode-size" type="range" min="0" max="0" value="0">';
+const tplToggle =
+        `<div id="viewmode-toggle" class="tool">
+            <img alt="viewmode"/>
+        </div>`;
+let modes;
+let sizes;
 
-        if (settings.modeToggle === 'next') {
+
-            mode = modes[(modes.indexOf(mode) + 1) % modes.length];
+function onChanged(mode, size) {
-        }
+    jq('#viewmode-settings .mode').removeClass('active');
-        $('#viewmode-toggle img').attr('src', resource.image('view-' + mode));
+    jq('#viewmode-' + mode).addClass('active');
+    jq('#viewmode-size').val(lo.indexOf(sizes, size));
+
+    if (settings.modeToggle === 'next') {
+        mode = modes[(modes.indexOf(mode) + 1) % modes.length];
+    }
+    jq('#viewmode-toggle img').attr('src', resource.image('view-' + mode));
+}
+
+function addSettings() {
+    if (modes.length < 2 && sizes.length < 2) {
+        return;
     }
 
-    function addSettings() {
+    const $viewBlock = jq(tplSettings);
-        if (modes.length < 2 && sizes.length < 2) {
-            return;
-        }
 
-        var $viewBlock = $(tplSettings);
+    if (modes.length > 1) {
-
+        lo.each(modes, mode => {
-        if (modes.length > 1) {
+            jq(tplMode.replace(/\[MODE\]/g, mode))
-            _.each(modes, function (mode) {
+                .on('click', () => {
-                $(tplMode.replace(/\[MODE\]/g, mode))
+                    view.setMode(mode);
-                    .on('click', function () {
-                        view.setMode(mode);
-                    })
-                    .appendTo($viewBlock);
-            });
-        }
-
-        if (sizes.length > 1) {
-            var max = sizes.length - 1;
-            $(tplSize)
-                .prop('max', max).attr('max', max)
-                .on('input change', function (ev) {
-                    view.setSize(sizes[ev.target.valueAsNumber]);
                 })
                 .appendTo($viewBlock);
-        }
+        });
-
-        $viewBlock.appendTo(sidebar.$el);
     }
 
-    function onToggle() {
+    if (sizes.length > 1) {
-        var mode = view.getMode();
+        const max = sizes.length - 1;
-        var nextIdx = (modes.indexOf(mode) + 1) % modes.length;
+        jq(tplSize)
-        var nextMode = modes[nextIdx];
+            .prop('max', max).attr('max', max)
-
+            .on('input change', ev => {
-        view.setMode(nextMode);
+                view.setSize(sizes[ev.target.valueAsNumber]);
+            })
+            .appendTo($viewBlock);
     }
 
-    function addToggle() {
+    $viewBlock.appendTo(sidebar.$el);
-        if (settings.modeToggle && modes.length > 1) {
+}
-            $(tplToggle)
+
-                .on('click', onToggle)
+function onToggle() {
-                .appendTo(topbar.$toolbar);
+    const mode = view.getMode();
-        }
+    const nextIdx = (modes.indexOf(mode) + 1) % modes.length;
+    const nextMode = modes[nextIdx];
+
+    view.setMode(nextMode);
+}
+
+function addToggle() {
+    if (settings.modeToggle && modes.length > 1) {
+        jq(tplToggle)
+            .on('click', onToggle)
+            .appendTo(topbar.$toolbar);
     }
+}
 
-    function init() {
+function init() {
-        modes = view.getModes();
+    modes = view.getModes();
-        sizes = view.getSizes();
+    sizes = view.getSizes();
 
-        addSettings();
+    addSettings();
-        addToggle();
+    addToggle();
-        onChanged(view.getMode(), view.getSize());
+    onChanged(view.getMode(), view.getSize());
 
-        event.sub('view.mode.changed', onChanged);
+    event.sub('view.mode.changed', onChanged);
-    }
+}
 
 
-    init();
+init();
-});

src/_h5ai/public/js/lib/win.js

@@ -0,0 +1,23 @@
+const win = window; // eslint-disable-line no-undef
+
+if (typeof win !== 'object' || win.window !== win || !win.document) {
+    throw new Error('no-window');
+}
+
+const noBrowser = 'no-browser';
+const doc = win.document;
+const docEl = doc.documentElement;
+docEl.className = '';
+
+function assert(expr, hint) {
+    if (!expr) {
+        docEl.className = noBrowser;
+        throw new Error(`${noBrowser}: ${hint}`);
+    }
+}
+
+assert(!doc.getElementById(noBrowser), 'ie<10');
+assert(typeof Object.assign === 'function', 'assign');
+assert(typeof Promise === 'function', 'promise');
+
+module.exports = win;

src/_h5ai/public/js/scripts.js

@@ -1,30 +1 @@
-(function () {
+require('./lib/init');
-    var doc = document;
-    var el = doc.documentElement;
-    var id = 'no-browser';
-    el.className = '';
-    if (doc.getElementById(id)) {
-        el.className = id;
-        throw id;
-    }
-}());
-
-// @include 'vendor/jquery-*.js'
-// @include 'vendor/lodash-*.js'
-// @include 'vendor/marked-*.js'
-// @include 'vendor/modulejs-*.js'
-// @include 'vendor/prism-*.js'
-
-(function () {
-    'use strict'; // eslint-disable-line strict
-
-    var win = window;
-    modulejs.define('_', function () { return win._; });
-    modulejs.define('$', function () { return win.jQuery; });
-    modulejs.define('marked', function () { return win.marked; });
-    modulejs.define('prism', function () { return win.Prism; });
-
-    // @include 'lib/**/*.js'
-
-    modulejs.require('boot');
-}());

src/_h5ai/public/js/vendor/modulejs-1.14.0.min.js

@@ -1,2 +0,0 @@
-/*! modulejs v1.14.0 - https://larsjung.de/modulejs/ */
-!function(n,r){"object"==typeof exports&&"object"==typeof module?module.exports=r():"function"==typeof define&&define.amd?define([],r):"object"==typeof exports?exports.modulejs=r():n.modulejs=r()}(this,function(){return function(n){function r(t){if(e[t])return e[t].exports;var i=e[t]={exports:{},id:t,loaded:!1};return n[t].call(i.exports,i,i.exports,r),i.loaded=!0,i.exports}var e={};return r.m=n,r.c=e,r.p="",r(0)}([function(n,r){"use strict";var e=Object.prototype,t=function(n){return function(r){return e.toString.call(r)==="[object "+n+"]"}},i=t("Array"),o=t("Function"),u=t("String"),s=function(n,r){return void 0!==n&&null!==n&&e.hasOwnProperty.call(n,r)},f=function(n,r){if(n&&n.length)for(var e=0,t=n.length;t>e;e+=1)r(n[e],e,n);else for(var i in n)s(n,i)&&r(n[i],i,n)},c=function(n,r){if(n&&n.length)for(var e=0,t=n.length;t>e;e+=1)if(n[e]===r)return!0;return!1},a=function(n){var r=[];return f(n,function(n){c(r,n)||r.push(n)}),r},d=function(n,r){if(!n)throw new Error("[modulejs] "+r)},p=function l(){var n={},r={},e=function y(e,t,i){d(u(e),"id must be string: "+e);var o=t===!0,p=(o?void 0:t)||r;if(!o&&s(p,e))return p[e];var l=n[e];d(l,"id not defined: "+e),i=(i||[]).slice(),i.push(e);var v=[];if(f(l.deps,function(n){d(!c(i,n),"circular dependencies: "+n+" in "+i),o?(v=v.concat(y(n,t,i)),v.push(n)):v.push(y(n,t,i))}),o)return a(v);var h=l.fn.apply(void 0,v);return p[e]=h,h},t=function(r,e,t){if(void 0===t){var f=[[],e];e=f[0],t=f[1]}d(u(r),"id must be string: "+r),d(!s(n,r),"id already defined: "+r),d(i(e),"deps must be array: "+r),n[r]={id:r,deps:e,fn:o(t)?t:function(){return t}}},p=function(n,r){return e(n,r)},v=function(){var t={};return f(n,function(n,i){t[i]={deps:n.deps.slice(),reqs:e(i,!0),init:s(r,i)}}),f(n,function(r,e){var i=[];f(n,function(n,r){c(t[r].reqs,e)&&i.push(r)}),t[e].reqd=i}),t},h=function(n){var r="\n";return f(v(),function(e,t){var i=n?e.reqd:e.reqs;r+=(e.init?"* ":"  ")+t+" -> [ "+i.join(", ")+" ]\n"}),r};return{create:l,define:t,log:h,require:p,state:v,_private:{assert:d,contains:c,definitions:n,each:f,has:s,instances:r,isArray:i,isFunction:o,isString:u,resolve:e,uniq:a}}};n.exports=p()}])});