Sorting on all series views is now working

New: Sorting is now persisted on a per page and browser basis
New: Series lists now support sorting on all views

src/UI/Shared/Toolbar/Sorting/SortingButtonCollectionView.js

@@ -0,0 +1,87 @@
+'use strict';
+define(
+    [
+        'backbone.pageable',
+        'marionette',
+        'Shared/Toolbar/Sorting/SortingButtonView'
+    ], function (PageableCollection, Marionette, ButtonView) {
+        return Marionette.CompositeView.extend({
+            itemView         : ButtonView,
+            template         : 'Shared/Toolbar/Sorting/SortingButtonCollectionViewTemplate',
+            itemViewContainer: '.dropdown-menu',
+
+            initialize: function (options) {
+                this.viewCollection = options.viewCollection;
+                this.listenTo(this.viewCollection, 'drone:sort', this.sort);
+            },
+
+            itemViewOptions: function () {
+                return {
+                    viewCollection: this.viewCollection
+                };
+            },
+
+            sort: function (sortModel, sortDirection) {
+                var collection = this.viewCollection;
+
+                var order;
+                if (sortDirection === 'ascending') {
+                    order = -1;
+                }
+                else if (sortDirection === 'descending') {
+                    order = 1;
+                }
+                else {
+                    order = null;
+                }
+
+                var comparator = this.makeComparator(sortModel.get('name'), order,
+                    order ?
+                        sortModel.sortValue() :
+                        function (model) {
+                            return model.cid;
+                        });
+
+                if (PageableCollection &&
+                    collection instanceof PageableCollection) {
+
+                    collection.setSorting(order && sortModel.get('name'), order,
+                        {sortValue: sortModel.sortValue()});
+
+                    if (collection.mode === 'client') {
+                        if (collection.fullCollection.comparator === null) {
+                            collection.fullCollection.comparator = comparator;
+                        }
+                        collection.fullCollection.sort();
+                    }
+                    else {
+                        collection.fetch({reset: true});
+                    }
+                }
+                else {
+                    collection.comparator = comparator;
+                    collection.sort();
+                }
+
+                return this;
+            },
+
+            makeComparator: function (attr, order, func) {
+
+                return function (left, right) {
+                    // extract the values from the models
+                    var l = func(left, attr), r = func(right, attr), t;
+
+                    // if descending order, swap left and right
+                    if (order === 1) t = l, l = r, r = t;
+
+                    // compare as usual
+                    if (l === r) return 0;
+                    else if (l < r) return -1;
+                    return 1;
+                };
+            }
+        });
+    });
+
+

src/UI/Shared/Toolbar/Sorting/SortingButtonCollectionViewTemplate.html

@@ -0,0 +1,8 @@
+<div class="btn-group sorting-buttons">
+    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
+        Sort <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu">
+
+    </ul>
+</div>

src/UI/Shared/Toolbar/Sorting/SortingButtonView.js

@@ -0,0 +1,84 @@
+'use strict';
+define(
+    [
+        'backbone',
+        'marionette',
+        'underscore'
+    ], function (Backbone, Marionette, _) {
+
+        return Marionette.ItemView.extend({
+            template : 'Shared/Toolbar/Sorting/SortingButtonViewTemplate',
+            tagName  : 'li',
+
+            ui: {
+                icon: 'i'
+            },
+
+            events: {
+                'click': 'onClick'
+            },
+
+            initialize: function (options) {
+                this.viewCollection = options.viewCollection;
+                this.listenTo(this.viewCollection, 'drone:sort', this.render);
+                this.listenTo(this.viewCollection, 'backgrid:sort', this.render);
+            },
+
+            onRender: function () {
+                if (this.viewCollection.state) {
+                    var key = this.viewCollection.state.sortKey;
+                    var order = this.viewCollection.state.order;
+
+                    if (key === this.model.get('name')) {
+                        this._setSortIcon(order);
+                    }
+
+                    else {
+                        this._removeSortIcon();
+                    }
+                }
+            },
+
+            onClick: function (e) {
+                e.preventDefault();
+
+                var collection = this.viewCollection;
+                var event = 'drone:sort';
+
+                collection.state.sortKey = this.model.get('name');
+                var direction = collection.state.order;
+
+                if (direction === 'ascending' || direction === -1)
+                {
+                    collection.state.order = 'descending';
+                    collection.trigger(event, this.model, 'descending');
+                }
+                else
+                {
+                    collection.state.order = 'ascending';
+                    collection.trigger(event, this.model, 'ascending');
+                }
+            },
+
+            _convertDirectionToIcon: function (dir) {
+                if (dir === 'ascending' || dir === -1) {
+                    return 'icon-sort-up';
+                }
+
+                return 'icon-sort-down';
+            },
+
+            _setSortIcon: function (dir) {
+                this._removeSortIcon();
+                this.ui.icon.addClass(this._convertDirectionToIcon(dir));
+            },
+
+            _removeSortIcon: function () {
+                this.ui.icon.removeClass('icon-sort-up icon-sort-down');
+            }
+        });
+    });
+
+
+
+

src/UI/Shared/Toolbar/Sorting/SortingButtonViewTemplate.html

@@ -0,0 +1,4 @@
+<a href="#">
+    <span>{{title}}</span>
+    <i class=""></i>
+</a>