From c1d9640369917c85c5a370fd948ca9e95a9d156e Mon Sep 17 00:00:00 2001 From: rolux Date: Wed, 21 Mar 2012 04:58:02 +0000 Subject: [PATCH] fix issues with statusbar, fixes #59, fixes #283 --- static/js/pandora/clipList.js | 5 +- static/js/pandora/clipsView.js | 2 +- static/js/pandora/list.js | 8 +- static/js/pandora/navigationView.js | 2 +- static/js/pandora/statusbar.js | 128 +++++++++++++++++++++++----- 5 files changed, 114 insertions(+), 31 deletions(-) diff --git a/static/js/pandora/clipList.js b/static/js/pandora/clipList.js index ff33d9b9..ca98f68c 100644 --- a/static/js/pandora/clipList.js +++ b/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 && pandora.$ui.total) { - pandora.$ui.total.html(pandora.ui.status('total', data)); + if (!ui.item && ui.listView == 'clip'/* && pandora.$ui.statusbar*/) { + pandora.$ui.statusbar.set('total', data); } }, open: function(data) { diff --git a/static/js/pandora/clipsView.js b/static/js/pandora/clipsView.js index 404796cc..cbcd593c 100644 --- a/static/js/pandora/clipsView.js +++ b/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') ); } }); diff --git a/static/js/pandora/list.js b/static/js/pandora/list.js index cad8e56c..e22fac89 100644 --- a/static/js/pandora/list.js +++ b/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); }); } }, diff --git a/static/js/pandora/navigationView.js b/static/js/pandora/navigationView.js index 2f701fc9..0703ccf1 100644 --- a/static/js/pandora/navigationView.js +++ b/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') ); } diff --git a/static/js/pandora/statusbar.js b/static/js/pandora/statusbar.js index c0ab5089..679fc889 100644 --- a/static/js/pandora/statusbar.js +++ b/static/js/pandora/statusbar.js @@ -1,28 +1,112 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript + 'use strict'; + pandora.ui.statusbar = function() { - var that = Ox.Bar({ - size: 16 - }) - .css({ - textAlign: 'center' - }) - .append( - Ox.Element() - .css({ - marginTop: '2px', - fontSize: '9px' - }) - .append( - pandora.$ui.total = Ox.Element('') - ) - .append( - Ox.Element('').html(' — ') - ) - .append( - pandora.$ui.selected = Ox.Element('') - ) - ); + + var $text = { + titleTotal: Ox.Element('').html('Total: '), + total: Ox.Element(''), + titleSelected: Ox.Element('').html(' — Selected: '), + selected: Ox.Element(''), + loading: Ox.Element('').html('Loading...') + }, + + that = Ox.Bar({size: 16}) + .css({ + textAlign: 'center' + }) + .append( + Ox.Element() + .css({ + marginTop: '2px', + fontSize: '9px' + }) + .append($text.loading) + .append($text.titleTotal) + .append($text.total) + .append($text.titleSelected) + .append($text.selected) + ); + + 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; + };