fix #932 (add 'clear filter' and 'clear filters' option)

static/js/pandora/browser.js

@@ -53,6 +53,7 @@ pandora.ui.browser = function() {
                             }).reloadList();                            
                         }
                     });
+                    pandora.$ui.filters.updateMenus();
                 }
                 if (pandora.user.ui.listView == 'map') {
                     pandora.$ui.map.resizeMap();

static/js/pandora/filter.js

@@ -163,6 +163,7 @@ pandora.ui.filter = function(id) {
                     }
                 }
                 pandora.UI.set('find', find);
+                pandora.$ui.filters.updateMenus();
             },
             sort: function(data) {
                 Ox.Log('', 'SORT', data)
@@ -173,12 +174,16 @@ pandora.ui.filter = function(id) {
                 pandora.UI.set({filters: filters});
             }
         }),
-        $select = Ox.Select({
+        $menu = Ox.MenuButton({
-                items: Ox.clone(pandora.site.filters),
+                items: [
-                max: 1,
+                    {id: 'clearFilter', title: 'Clear Filter', keyboard: 'shift control a'},
-                min: 1,
+                    {id: 'clearFilters', title: 'Clear All Filters', keyboard: 'shift alt control a'},
+                    {},
+                    {group: 'filter', max: 1, min: 1, items: pandora.site.filters.map(function(filter) {
+                        return Ox.extend({checked: filter.id == id}, filter);
+                    })}
+                ],
                 type: 'image',
-                value: id
             })
             .css(Ox.UI.SCROLLBAR_SIZE == 16 ? {
                 right: 0,
@@ -187,10 +192,11 @@ pandora.ui.filter = function(id) {
                 right: '-1px',
                 width: '8px',
             })
-            .bindEvent('change', function(data) {
+            .bindEvent({
+                change: function(data) {
                     var filters = Ox.clone(pandora.user.ui.filters),
                         find,
-                    id_ = data.value,
+                        id_ = data.checked[0].id,
                         i_ = Ox.getIndexById(pandora.user.ui.filters, id_);
                     if (i_ == -1) {
                         // new filter was not part of old filter set
@@ -220,6 +226,7 @@ pandora.ui.filter = function(id) {
                         replaceFilter(i, id_);
                         replaceFilter(i_, id);
                     }
+                    pandora.$ui.filters.updateMenus();
                     function makeFilter(id, sort) {
                         // makes user.ui._filterState object from site.filters object
                         var filter = Ox.getObjectById(pandora.site.filters, id);
@@ -228,22 +235,43 @@ pandora.ui.filter = function(id) {
                             sort: sort || [{key: filter.type == 'integer' ? 'name' : 'items', operator: '-'}]
                         };
                     }
-                function replaceFilter(i, id, find) {
+                    function replaceFilter(i, id) {
-                    // if find is passed, selected items will be derived from it // FIXME: ???
                         var isOuter = i % 4 == 0;
                         pandora.$ui[isOuter ? 'browser' : 'filtersInnerPanel'].replaceElement(
                             isOuter ? i / 2 : i - 1,
                             pandora.$ui.filters[i] = pandora.ui.filter(id)
                         );
                     }
+                },
+                click: function(data) {
+                    if (data.id == 'clearFilter') {
+                        that.clearFilter();
+                    } else if (data.id == 'clearFilters') {
+                        pandora.$ui.filters.clearFilters();
+                    }
+                }
             })
             .appendTo(that.$bar.$element);
-    Ox.UI.SCROLLBAR_SIZE < 16 && $($select.find('input')[0]).css({
+    Ox.UI.SCROLLBAR_SIZE < 16 && $($menu.find('input')[0]).css({
         marginRight: '-3px',
         marginTop: '1px',
         width: '8px',
         height: '8px'
     });
+    that.clearFilter = function() {
+        // FIXME: List should trigger event on options change
+        if (!Ox.isEmpty(that.options('selected'))) {
+            that.options({selected: []}).triggerEvent('select', {ids: []});
+        }
+    };
+    that.disableMenuItem = function(id) {
+        Ox.print('disable', id);
+        $menu.disableItem(id);
+    };
+    that.enableMenuItem = function(id) {
+        Ox.print('enable', id);
+        $menu.enableItem(id);
+    };
     return that;
 };
 
@@ -252,8 +280,28 @@ pandora.ui.filters = function() {
     pandora.user.ui.filters.forEach(function(filter, i) {
         $filters[i] = pandora.ui.filter(filter.id);
     });
+    $filters.clearFilters = function() {
+        $filters.forEach(function($filter) {
+            $filter.clearFilter();
+        });
+    };
+    $filters.updateMenus = function() {
+        var selected = $filters.map(function($filter) {
+                return !Ox.isEmpty($filter.options('selected'));
+            }),
+            filtersHaveSelection = !!Ox.sum(selected);
+        $filters.forEach(function($filter, i) {
+            $filter[
+                 selected[i] ? 'enableMenuItem' : 'disableMenuItem'
+            ]('clearFilter');
+            $filter[
+                filtersHaveSelection ? 'enableMenuItem' : 'disableMenuItem'
+            ]('clearFilters');
+        });
         return $filters;
     };
+    return $filters.updateMenus();
+};
 
 pandora.ui.filtersInnerPanel = function() {
     var that = Ox.SplitPanel({

static/js/pandora/mainMenu.js

@@ -361,6 +361,11 @@ pandora.ui.mainMenu = function() {
                     pandora.$ui.sequencesDialog = pandora.ui.sequencesDialog().open();
                 }
             },
+            key_alt_control_shift_a: function() {
+                if (!pandora.hasDialogOrScreen() && !ui.item) {
+                    pandora.$ui.filters.clearFilters();
+                }
+            },
             key_alt_control_shift_f: function() {
                 Ox.Fullscreen.toggle();
             },