improve statusbar

static/js/statusbar.js

@@ -4,67 +4,66 @@ oml.ui.statusbar = function() {
 
     var ui = oml.user.ui,
 
-        $text = {
+        data = {
-            titleTotal: Ox.Element('<span>').html(Ox._('Total: ')),
+            loading: true,
-            total: Ox.Element('<span>'),
+            selected: {items: 0, size: 0},
-            titleSelected: Ox.Element('<span>').html(' &mdash; ' + Ox._('Selected: ')),
+            total: {items: 0, size: 0},
-            selected: Ox.Element('<span>'),
-            loading: Ox.Element('<span>').html(Ox._('Loading...'))
         },
 
+        $status = Ox.Element()
+            .css({
+                margin: '2px 4px',
+                fontSize: '9px',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            }),
+
         that = Ox.Bar({size: 16})
             .css({textAlign: 'center'})
-            .append(
+            .append($status)
-                Ox.Element()
-                    .css({
-                        margin: '2px 4px',
-                        fontSize: '9px',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis'
-                    })
-                    .append($text.loading)
-                    .append($text.titleTotal)
-                    .append($text.total)
-                    .append($text.titleSelected)
-                    .append($text.selected)
-            )
             .bindEvent({
+                oml_find: function(data) {
+                    that.set('loading', true);
+                },
                 oml_listselection: function(data) {
-                    // ...
+                    if (ui.listSelection.length) {
+                        oml.api.find({
+                            query: {
+                                conditions: ui.listSelection.map(function(id) {
+                                    return {
+                                        key: 'id',
+                                        operator: '==',
+                                        value: id
+                                    };
+                                }),
+                                operator: '|'
+                            }
+                        }, function(result) {
+                            that.set('selected', result.data);
+                        });
+                    } else {
+                        that.set('selected', {items: 0, size: 0});
+                    }
                 }
             });
 
-    function getText(data) {
+    that.set = function(key, value) {
-        return Ox.toTitleCase(Ox.formatCount(data.items, 'book')) + (
+        var hasSelection;
-            data.items ? ', ' + Ox.formatValue(data.size, 'B') : ''
+        data[key] = value;
-        );
+        if (key != 'loading') {
-    }
+            data.loading = false;
-
-    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();
-            }
         }
+        hasSelection = data.selected.items
+            && data.selected.items < data.total.items;
+        $status.html(data.loading ? Ox._('Loading...') : ((
+            hasSelection ? Ox.formatNumber(data.selected.items) + ' of ' : ''
+        ) + Ox.toTitleCase(Ox.formatCount(data.total.items, 'book')) + (
+            data.total.items ? ', ' + (
+                hasSelection ? Ox.formatValue(data.selected.size, 'B') + ' of ' : ''
+            ) + Ox.formatValue(data.total.size, 'B') : ''
+        )));
     };
 
-    that.set('loading');
-
     return that;
 
 };