Refactor view files. Add option to disable sidebar.

CHANGELOG.md

@@ -1,7 +1,8 @@
 # Changelog
 
-* add options to filter/search ignore case
-* replace PHP `getenv` calls with `$_SERVER` lookups
+* adds option to disable sidebar
+* adds options to filter/search ignore case
+* replaces 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`)
 * change type `txt-svg` to `img-svg`, no thumbs but preview

src/_h5ai/private/conf/options.json

@@ -32,6 +32,7 @@
     General view options.
 
     - binaryPrefix: boolean, set to true uses 1024B=1KiB when formatting file sizes (see http://en.wikipedia.org/wiki/Binary_prefix)
+    - disableSidebar: boolean, hides sidebar and toggle button
     - fallbackMode: boolean, serve fallback mode
     - fastBrowsing: boolean, use History API if available (no need to reload the whole page)
     - fonts: array of strings, fonts to use in regular context
@@ -59,6 +60,7 @@
     */
     "view": {
         "binaryPrefix": false,
+        "disableSidebar": false,
         "fallbackMode": false,
         "fastBrowsing": true,
         "fonts": ["Ubuntu", "Roboto", "Helvetica", "Arial", "sans-serif"],

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

@@ -3,7 +3,7 @@ const event = require('../core/event');
 const location = require('../core/location');
 const resource = require('../core/resource');
 const allsettings = require('../core/settings');
-const topbar = require('../view/topbar');
+const base = require('../view/base');
 
 
 const settings = lo.extend({
@@ -56,7 +56,7 @@ function init() {
         return;
     }
 
-    $crumbbar = jq('<div id="crumbbar"/>').appendTo(topbar.$flowbar);
+    $crumbbar = jq('<div id="crumbbar"/>').appendTo(base.$flowbar);
 
     event.sub('location.changed', onLocationChanged);
 }

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

@@ -0,0 +1,36 @@
+const {jq} = require('../globals');
+
+const rootSelector = 'body';
+const tplTopbar =
+        `<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>`;
+const tplMainrow =
+        `<div id="mainrow">
+            <div id="content"/>
+        </div>`;
+
+const init = () => {
+    jq('#fallback, #fallback-hints').remove();
+
+    const $root = jq(rootSelector)
+        .attr('id', 'root')
+        .append(tplTopbar)
+        .append(tplMainrow);
+
+    return {
+        $root,
+        $topbar: $root.find('#topbar'),
+        $toolbar: $root.find('#toolbar'),
+        $flowbar: $root.find('#flowbar'),
+        $mainrow: $root.find('#mainrow'),
+        $content: $root.find('#content')
+    };
+};
+
+module.exports = init();

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

@@ -1,8 +0,0 @@
-const {jq} = require('../globals');
-const mainrow = require('./mainrow');
-
-const $el = jq('<div id="content"/>').appendTo(mainrow.$el);
-
-module.exports = {
-    $el
-};

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

@@ -1,8 +0,0 @@
-const {jq} = require('../globals');
-const root = require('./root');
-
-const $el = jq('<div id="mainrow"/>').appendTo(root.$el);
-
-module.exports = {
-    $el
-};

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

@@ -1,7 +1,7 @@
 const {jq} = require('../globals');
-const root = require('./root');
+const base = require('./base');
 
-const $el = jq('<div id="notification"/>').hide().appendTo(root.$el);
+const $el = jq('<div id="notification"/>').hide().appendTo(base.$root);
 
 function set(content) {
     if (content) {

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

@@ -1,9 +0,0 @@
-const {jq} = require('../globals');
-
-const $el = jq('body').attr('id', 'root');
-
-jq('#fallback, #fallback-hints').remove();
-
-module.exports = {
-    $el
-};

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

@@ -1,45 +1,52 @@
 const {jq} = require('../globals');
 const resource = require('../core/resource');
+const allsettings = require('../core/settings');
 const store = require('../core/store');
-const mainrow = require('./mainrow');
-const topbar = require('./topbar');
-
+const base = require('./base');
 
+const disabled = !!(allsettings.view && allsettings.view.disableSidebar);
 const storekey = 'sidebarIsVisible';
 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');
 
+const init = () => {
+    const $sidebar = jq(tplSidebar);
+    const $toggle = jq(tplToggle);
+    const $img = $toggle.find('img');
 
-function update(toggle) {
-    let isVisible = store.get(storekey);
+    const update = toggle => {
+        let isVisible = store.get(storekey);
 
-    if (toggle) {
-        isVisible = !isVisible;
-        store.put(storekey, isVisible);
+        if (toggle) {
+            isVisible = !isVisible;
+            store.put(storekey, isVisible);
+        }
+
+        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();
+        }
+    };
+
+    if (!disabled) {
+        $sidebar.appendTo(base.$mainrow);
+        $toggle.appendTo(base.$toolbar);
     }
 
-    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();
-    }
-}
+    $toggle.on('click', () => update(true));
+    update();
 
-
-$sidebar.appendTo(mainrow.$el);
-$toggle.appendTo(topbar.$toolbar).on('click', () => update(true));
-update();
-
-module.exports = {
-    $el: $sidebar
+    return {
+        $el: $sidebar
+    };
 };
+
+module.exports = init();

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

@@ -1,19 +0,0 @@
-const {jq} = require('../globals');
-const root = require('./root');
-
-const tplTopbar =
-        `<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>`;
-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

@@ -5,7 +5,7 @@ const location = require('../core/location');
 const resource = require('../core/resource');
 const store = require('../core/store');
 const allsettings = require('../core/settings');
-const content = require('./content');
+const base = require('./base');
 
 const modes = ['details', 'grid', 'icons'];
 const sizes = [20, 40, 60, 80, 100, 150, 200, 250, 300, 350, 400];
@@ -204,7 +204,7 @@ function setItems(items) {
         $items.append(createHtml(e));
     });
 
-    content.$el.scrollLeft(0).scrollTop(0);
+    base.$content.scrollLeft(0).scrollTop(0);
     checkHint();
     event.pub('view.changed', items, removed);
 }
@@ -267,7 +267,7 @@ function init() {
     addCssStyles();
     set();
 
-    $view.appendTo(content.$el);
+    $view.appendTo(base.$content);
     $hint.hide();
 
     format.setDefaultMetric(settings.binaryPrefix);

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

@@ -3,7 +3,7 @@ const event = require('../core/event');
 const resource = require('../core/resource');
 const allsettings = require('../core/settings');
 const sidebar = require('./sidebar');
-const topbar = require('./topbar');
+const base = require('./base');
 const view = require('./view');
 
 
@@ -79,7 +79,7 @@ function addToggle() {
     if (settings.modeToggle && modes.length > 1) {
         jq(tplToggle)
             .on('click', onToggle)
-            .appendTo(topbar.$toolbar);
+            .appendTo(base.$toolbar);
     }
 }