fix issues with statusbar, fixes #59, fixes #283

static/js/pandora/clipList.js

@@ -110,9 +110,8 @@ pandora.ui.clipList = function(videoRatio) {
         })
         .bindEvent({
             init: function(data) {
-                // fixme: status needs an overhaul
+                if (!ui.item && ui.listView == 'clip'/* && pandora.$ui.statusbar*/) {
-                if (!ui.item && pandora.$ui.total) {
+                    pandora.$ui.statusbar.set('total', data);
-                    pandora.$ui.total.html(pandora.ui.status('total', data));
                 }
             },
             open: function(data) {

static/js/pandora/clipsView.js

@@ -63,7 +63,7 @@ pandora.ui.clipsView = function(videoRatio) {
                     var items = data.items;
                     $status.html(
                         (items ? Ox.formatNumber(items) : 'No')
-                        + ' clip' + (items == 1 ? '' : 's')
+                        + ' Clip' + (items == 1 ? '' : 's')
                     );
                 }
             });

static/js/pandora/list.js

@@ -386,12 +386,12 @@ pandora.ui.list = function() {
                 });
             },
             init: function(data) {
-                pandora.$ui.total.html(pandora.ui.status('total', data));
+                pandora.$ui.statusbar.set('total', data);
                 data = [];
                 pandora.site.totals.forEach(function(v) {
                     data[v.id] = 0;
                 });
-                pandora.$ui.selected.html(pandora.ui.status('selected', data));
+                pandora.$ui.statusbar.set('selected', data);
             },
             open: function(data) {
                 var set = {item: data.ids[0]};
@@ -502,7 +502,7 @@ pandora.ui.list = function() {
                 }
                 pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info());
                 if (data.ids.length == 0) {
-                    pandora.$ui.selected.html(pandora.ui.status('selected', {items: 0}));
+                    pandora.$ui.statusbar.set('selected', {items: 0});
                 } else {
                     if (Ox.isUndefined(data.rest)) {
                         query = {
@@ -532,7 +532,7 @@ pandora.ui.list = function() {
                     pandora.api.find({
                         query: query
                     }, function(result) {
-                        pandora.$ui.selected.html(pandora.ui.status('selected', result.data));
+                        pandora.$ui.statusbar.set('selected', result.data);
                     });
                 }
             },

static/js/pandora/navigationView.js

@@ -230,7 +230,7 @@ pandora.ui.navigationView = function(type, videoRatio) {
     function updateStatusbar(items) {
         $status.html(
             (items ? Ox.formatNumber(items) : 'No')
-            + ' clip' + (items == 1 ? '' : 's')
+            + ' Clip' + (items == 1 ? '' : 's')
         );
     }
 

static/js/pandora/statusbar.js

@@ -1,9 +1,18 @@
 // vim: et:ts=4:sw=4:sts=4:ft=javascript
+
 'use strict';
+
 pandora.ui.statusbar = function() {
-    var that = Ox.Bar({
+
-            size: 16
+    var $text = {
-        })
+            titleTotal: Ox.Element('<span>').html('Total: '),
+            total: Ox.Element('<span>'),
+            titleSelected: Ox.Element('<span>').html(' &mdash; Selected: '),
+            selected: Ox.Element('<span>'),
+            loading: Ox.Element('<span>').html('Loading...')
+        },
+
+        that = Ox.Bar({size: 16})
             .css({
                 textAlign: 'center'
             })
@@ -13,16 +22,91 @@ pandora.ui.statusbar = function() {
                         marginTop: '2px',
                         fontSize: '9px'
                     })
-                .append(
+                    .append($text.loading)
-                    pandora.$ui.total = Ox.Element('<span>')
+                    .append($text.titleTotal)
-                )
+                    .append($text.total)
-                .append(
+                    .append($text.titleSelected)
-                    Ox.Element('<span>').html(' &mdash; ')
+                    .append($text.selected)
-                )
-                .append(
-                    pandora.$ui.selected = Ox.Element('<span>')
-                )
             );
-    return that;
+
+    function getText(data) {
+        var ui = pandora.user.ui,
+            itemName = ui.listView == 'clip'
+                ? (data.items == 1 ? 'Clip' : 'Clips')
+                : (pandora.site.itemName[data.items == 1 ? 'singular' : 'plural']),
+            parts = [];
+        parts.push(Ox.formatNumber(data.items) + ' '+ itemName);
+        if (data.runtime)
+            parts.push(Ox.formatDuration(data.runtime, 'short'));
+        if (data.files)
+            parts.push(data.files + ' file' + (data.files == 1 ? '' : 's'));
+        if (!data.runtime && data.duration)
+            parts.push(Ox.formatDuration(data.duration, 'short'));
+        else if (data.duration)
+            parts.push(Ox.formatDuration(data.duration));
+        if (data.size)
+            parts.push(Ox.formatValue(data.size, 'B'));
+        if (data.pixels)
+            parts.push(Ox.formatValue(data.pixels, 'px'));
+        return parts.join(', ');
+    }
+
+    function setTotal() {
+        pandora.api.find({
+            query: pandora.user.ui.find,
+            sort: pandora.user.ui.listSort
+        }, function(result) {
+            that.set('selected', {items: 0});
+            that.set('total', result.data);
+        });
+    }
+
+    that.set = function(key, data) {
+        if (key == 'loading') {
+            Ox.forEach($text, function($element, key) {
+                $element[key == 'loading' ? 'show' : 'hide']();
+            });
+        } else {
+            $text.loading.hide();
+            if (key == 'selected') {
+                if (data.items == 0) {
+                    $text.titleTotal.hide();
+                    $text.titleSelected.hide();
+                    $text.selected.hide();
+                } else {
+                    $text.titleTotal.show();
+                    $text.titleSelected.show();
+                    $text.selected.html(getText(data)).show();
+                }
+            } else {
+                $text.total.html(getText(data)).show();
+            }
+        }
+    };
+
+    that.bindEvent({
+        pandora_find: function() {
+            that.set('loading');
+            if (['map', 'calendar'].indexOf(pandora.user.ui.listView) > -1) {
+                setTotal();
+            }
+        },
+        pandora_listview: function(data) {
+            var isNavigationView = ['map', 'calendar'].indexOf(data.value) > -1,
+                wasNavigationView = ['map', 'calendar'].indexOf(data.previousValue) > -1;
+            that.set('loading');
+            if (isNavigationView && !wasNavigationView) {
+                setTotal();
+            }
+        }
+    });
+
+    that.set('loading');
+    if (['map', 'calendar'].indexOf(pandora.user.ui.listView) > -1) {
+        setTotal();
+    }
+
+    return that;
+
 };