add placeholders for empty folders, fixes #250

static/js/folderBrowser.js

@@ -1,18 +1,31 @@
 // vim: et:ts=4:sw=4:sts=4:ft=javascript
 'use strict';
 pandora.ui.folderBrowser = function(id, section) {
-    var that = Ox.SplitPanel({
-        elements: [
-            {
-                element: pandora.ui.folderBrowserBar(id, section),
-                size: 24
-            },
-            {
-                element: pandora.$ui.folderList[id] = pandora.ui.folderBrowserList(id, section)
+    var that = Ox.Element();
+    pandora.$ui.folderList[id] = pandora.ui.folderBrowserList(id, section)
+        .bindEvent({
+            init: function(data) {
+                if (data.items) {
+                    that.setElement(
+                        Ox.SplitPanel({
+                            elements: [
+                                {
+                                    element: pandora.ui.folderBrowserBar(id, section),
+                                    size: 24
+                                },
+                                {
+                                    element: pandora.$ui.folderList[id]
+                                }
+                            ],
+                            orientation: 'vertical'
+                        })
+                    );
+                } else {
+                    // if there are no items, then the placeholder is already there
+                    pandora.$ui.folderPlaceholder[id].updateText('public');
+                }
             }
-        ],
-        orientation: 'vertical'
-    });
+        });
     return that;
 };
 

static/js/folderBrowserList.js

@@ -191,11 +191,12 @@ pandora.ui.folderBrowserList = function(id, section) {
             init: function(data) {
                 pandora.site.sectionFolders[section][i].items = data.items;
                 pandora.$ui.folder[i].$content.css({
-                    height: 40 + data.items * 16 + 'px'
+                    height: (data.items ? 40 + data.items * 16 : 16) + 'px'
                 });
                 pandora.$ui.folderList[id].css({
                     height: 16 + data.items * 16 + 'px'
                 });
+                pandora.$ui.folderPlaceholder[id][data.items ? 'hide' : 'show']();
                 pandora.resizeFolders();
             },
             paste: function(data) {

static/js/folderList.js

@@ -8,6 +8,7 @@ pandora.ui.folderList = function(id, section) {
         folderItems = section == 'items' ? 'Lists' : Ox.toTitleCase(section),
         folderItem = folderItems.slice(0, -1),
         canEditFeatured = pandora.site.capabilities['canEditFeatured' + folderItems][pandora.user.level],
+        $placeholder,
         that;
     var columns, items;
     if (id != 'volumes') {
@@ -267,8 +268,11 @@ pandora.ui.folderList = function(id, section) {
         max: 1,
         min: 0,
         pageLength: 1000,
-        // won't work, getListData looks up data in $folderList
-        //selected: pandora.getListData().folder == id ? [ui._list] : [],
+        // works when switching back from browser, but won't work on load, since
+        // getListData relies on $folderList, so selectList is called in init handler
+        selected: pandora.getListData().folder == id
+            ? [ui[ui.section == 'items' ? '_list' : ui.section.slice(0, -1)]]
+            : [],
         sort: [{key: 'position', operator: '+'}],
         sortable: id != 'featured' || canEditFeatured,
         unique: id != 'volumes' ? 'id' : 'name'
@@ -377,11 +381,12 @@ pandora.ui.folderList = function(id, section) {
             if (pandora.site.sectionFolders[section][i]) {
                 pandora.site.sectionFolders[section][i].items = data.items;
                 pandora.$ui.folder[i].$content.css({
-                    height: data.items * 16 + 'px'
+                    height: (data.items || 1) * 16 + 'px'
                 });
                 pandora.$ui.folderList[id].css({
                     height: data.items * 16 + 'px'
-                });
+                })[data.items ? 'show' : 'hide']();
+                pandora.$ui.folderPlaceholder[id].updateText(id)[data.items ? 'hide' : 'show']();
             }
             pandora.resizeFolders();
         },

static/js/folderPlaceholder.js

@@ -0,0 +1,21 @@
+// vim: et:ts=4:sw=4:sts=4:ft=javascript
+'use strict';
+pandora.ui.folderPlaceholder = function(id, section) {
+    var that = Ox.Element()
+            .addClass('OxLight')
+            .css({
+                height: '14px',
+                padding: '1px 4px',
+            });
+    that.updateText = function(string) {
+        return that.html(
+            Ox._(
+                string != 'volumes'
+                ? 'No ' + string + ' ' + (section == 'items' ? 'lists' : section)
+                : 'No local volumes'
+            )
+        );
+    };
+    return that.updateText(id);
+};
+

static/js/folders.js

@@ -17,6 +17,7 @@ pandora.ui.folders = function(section) {
     pandora.$ui.folder = [];
     pandora.$ui.folderBrowser = {};
     pandora.$ui.folderList = {};
+    pandora.$ui.folderPlaceholder = {};
     pandora.$ui.findListElement = {};
     pandora.$ui.findListSelect = {};
     pandora.$ui.findListInput = {};
@@ -338,6 +339,9 @@ pandora.ui.folders = function(section) {
                 }
             })
             .appendTo(pandora.$ui.folder[i].$content);
+        pandora.$ui.folderPlaceholder[folder.id] = pandora.ui.folderPlaceholder(folder.id, section)
+            .hide()
+            .appendTo(pandora.$ui.folder[i].$content);
     });
     function infoButton(title, text) {
         return Ox.Button({

static/js/utils.js

@@ -991,7 +991,7 @@ pandora.getFoldersHeight = function(section) {
     var height = 0;
     pandora.site.sectionFolders[section].forEach(function(folder, i) {
         height += 16 + pandora.user.ui.showFolder[section][folder.id] * (
-            !!folder.showBrowser * 40 + folder.items * 16
+            !!(folder.showBrowser && folder.items) * 40 + (folder.items || 1) * 16
         );
     });
     return height;