shared toolbar radio button style is working. just need to store state.

Gruntfile.js

@@ -5,7 +5,6 @@ module.exports = function (grunt) {
         pkg: grunt.file.readJSON('package.json'),
 
         curl: {
-            'UI/JsLibraries/backbone.collectionbinder.js': 'http://raw.github.com/theironcook/Backbone.ModelBinder/master/Backbone.CollectionBinder.js',
             'UI/JsLibraries/backbone.js'                 : 'http://backbonejs.org/backbone.js',
             'UI/JsLibraries/backbone.marionette.js'      : 'http://marionettejs.com/downloads/backbone.marionette.js',
             'UI/JsLibraries/backbone.modelbinder.js'     : 'http://raw.github.com/theironcook/Backbone.ModelBinder/master/Backbone.ModelBinder.js',
@@ -17,8 +16,6 @@ module.exports = function (grunt) {
             'UI/JsLibraries/jquery.cookie.js'            : 'http://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js',
             'UI/JsLibraries/jquery.js'                   : 'http://code.jquery.com/jquery.js',
             'UI/JsLibraries/jquery.backstretch.js'       : 'http://raw.github.com/srobbin/jquery-backstretch/master/jquery.backstretch.js',
-            //'NzbDrone.Backbone/JsLibraries/jquery.tablesorter.bootstrap.js':
-            //'NzbDrone.Backbone/JsLibraries/jquery.tablesorter.js':
             'UI/JsLibraries/require.js'                  : 'http://raw.github.com/jrburke/requirejs/master/require.js',
             'UI/JsLibraries/sugar.js'                    : 'http://raw.github.com/andrewplummer/Sugar/master/release/sugar-full.development.js',
             'UI/JsLibraries/underscore.js'               : 'http://underscorejs.org/underscore.js',
@@ -26,6 +23,7 @@ module.exports = function (grunt) {
             'UI/JsLibraries/backbone.backgrid.js'        : 'http://raw.github.com/wyuenho/backgrid/master/lib/backgrid.js',
             'UI/JsLibraries/messenger.js'                : 'http://raw.github.com/HubSpot/messenger/master/build/js/messenger.js',
             'UI/Content/messenger.css'                   : 'http://raw.github.com/HubSpot/messenger/master/build/css/messenger.css',
+            'UI/Content/bootstrap.toggle-switch.css'     : 'http://raw.github.com/ghinda/css-toggle-switch/gh-pages/toggle-switch.css',
             'UI/Content/messenger.future.css'            : 'http://raw.github.com/HubSpot/messenger/master/build/css/messenger-theme-future.css'
         },
 

UI/Series/Index/SeriesIndexLayout.js

@@ -19,14 +19,6 @@ define([
                 toolbar: '#x-toolbar'
             },
 
-            ui: {
-
-            },
-
-            events: {
-                'click .x-series-change-view': 'changeView'
-            },
-
             showTable: function () {
 
                 var columns = [
@@ -90,7 +82,6 @@ define([
                     }
                 ];
 
-
                 this.series.show(new Backgrid.Grid(
                     {
                         row       : Backgrid.SeriesIndexTableRow,
@@ -113,75 +104,43 @@ define([
             },
 
             initialize: function () {
-                this.viewStyle = NzbDrone.Config.SeriesViewStyle();
                 this.seriesCollection = new NzbDrone.Series.SeriesCollection();
                 this.seriesCollection.fetch();
             },
 
-            onRender: function () {
-                var element = this.$('a[data-target="' + this.viewStyle + '"]').removeClass('active');
-                this.setActive(element);
-            },
-
             onShow: function () {
 
-                var menuLeft = new NzbDrone.Shared.Toolbar.CommandCollection();
+                var viewButtons = {
+                    type         : 'radio',
+                    storeState   : 'true',
+                    menuKey      : 'seriesViewMode',
+                    defaultAction: 'listView',
+                    items        : [
+                        {
+                            key     : 'tableView',
+                            title   : '',
+                            icon    : 'icon-table',
+                            callback: this.showTable
+                        },
+                        {
+                            key     : 'listView',
+                            title   : '',
+                            icon    : 'icon-list',
+                            callback: this.showList
+                        },
+                        {
+                            key     : 'posterView',
+                            title   : '',
+                            icon    : 'icon-picture',
+                            callback: this.showPosters
+                        }
+                    ]
+                };
 
-                menuLeft.add(new NzbDrone.Shared.Toolbar.CommandModel({title: "Add Series", icon: "icon-plus"}));
+                this.toolbar.show(new NzbDrone.Shared.Toolbar.ToolbarLayout({right: [ viewButtons], context: this}));
-                menuLeft.add(new NzbDrone.Shared.Toolbar.CommandModel({title: "RSS Sync", icon: "icon-rss"}));
-                menuLeft.add(new NzbDrone.Shared.Toolbar.CommandModel({title: "Sync Database", icon: "icon-refresh"}));
-
-                var menuRight = new NzbDrone.Shared.Toolbar.CommandCollection();
-
-                menuRight.add(new NzbDrone.Shared.Toolbar.CommandModel({title: "Add Series", icon: "icon-plus"}));
-                menuRight.add(new NzbDrone.Shared.Toolbar.CommandModel({title: "RSS Sync", icon: "icon-rss"}));
-                menuRight.add(new NzbDrone.Shared.Toolbar.CommandModel({title: "Sync Database", icon: "icon-refresh"}));
-
-                this.toolbar.show(new NzbDrone.Shared.Toolbar.ToolbarLayout({left: [ menuLeft, menuLeft], right: [menuRight]}));
-
-                switch (this.viewStyle) {
-                    case 1:
-                        this.showList();
-                        break;
-                    case 2:
-                        this.showPosters();
-                        break;
-                    default:
-                        this.showTable();
-                }
-            },
-
-            changeView: function (e) {
-                e.preventDefault();
-                var view = parseInt($(e.target).data('target'));
-                var target = $(e.target);
-
-                if (isNaN(view)) {
-                    view = parseInt($(e.target).parent('a').data('target'));
-                    target = $(e.target).parent('a');
-                }
-
-                if (view === 1) {
-                    NzbDrone.Config.SeriesViewStyle(1);
-                    this.showList();
-                }
-
-                else if (view === 2) {
-                    NzbDrone.Config.SeriesViewStyle(2);
-                    this.showPosters();
-                }
-
-                else {
-                    NzbDrone.Config.SeriesViewStyle(0);
-                    this.showTable();
-                }
-
-                this.setActive(target);
-            },
-
-            setActive: function (element) {
-                this.$('a').removeClass('active');
-                $(element).addClass('active');
             }
-        });
+
-    });
+        })
+        ;
+    })
+;

UI/Series/SeriesModel.js

@@ -1,4 +1,5 @@
-define(['app', 'Quality/QualityProfileCollection', 'AddSeries/RootFolders/RootFolderCollection'], function (app, qualityProfileCollection, rootFolders) {
+"use strict";
+define(['app', 'Quality/QualityProfileCollection', 'AddSeries/RootFolders/RootFolderCollection'], function (app, qualityProfileCollection, rootFolders) {
     NzbDrone.Series.SeriesModel = Backbone.Model.extend({
 
         urlRoot: NzbDrone.Constants.ApiRoot + '/series',
@@ -59,7 +60,7 @@
 
                 return 'Ended';
             },
-            shortDate: function () {
+            shortDate        : function () {
                 var date = this.get('nextAiring');
 
                 if (!date) {

UI/Shared/Toolbar/ButtonCollection.js

@@ -0,0 +1,7 @@
+"use strict";
+define(['app', 'Shared/Toolbar/ButtonModel'], function () {
+    NzbDrone.Shared.Toolbar.ButtonCollection = Backbone.Collection.extend({
+        model: NzbDrone.Shared.Toolbar.ButtonModel
+    });
+});
+

UI/Shared/Toolbar/ButtonGroupView.js

@@ -1,11 +0,0 @@
-"use strict";
-define(['app', 'Shared/Toolbar/CommandView'], function () {
-    NzbDrone.Shared.Toolbar.ButtonGroupView = Backbone.Marionette.CollectionView.extend({
-        className: 'btn-group',
-        itemView : NzbDrone.Shared.Toolbar.CommandView
-    });
-});
-
-
-
-

UI/Shared/Toolbar/ButtonModel.js

@@ -0,0 +1,17 @@
+"use strict";
+define(['app'], function () {
+
+    NzbDrone.Shared.Toolbar.ActionTypes =
+    {
+        RouteTrigger: 'RouteTrigger',
+        CallBack    : 'CallBack'
+    };
+
+    NzbDrone.Shared.Toolbar.ButtonModel = Backbone.Model.extend({
+        defaults: {
+            'target' : '/nzbdrone/route',
+            'title'  : '',
+            'active' : false,
+            'tooltip': undefined        }
+    });
+});

UI/Shared/Toolbar/CommandCollection.js

@@ -1,7 +0,0 @@
-"use strict";
-define(['app', 'Shared/Toolbar/CommandModel'], function () {
-    NzbDrone.Shared.Toolbar.CommandCollection = Backbone.Collection.extend({
-        model: NzbDrone.Shared.Toolbar.CommandModel
-    });
-});
-

UI/Shared/Toolbar/CommandModel.js

@@ -1,17 +0,0 @@
-"use strict";
-define(['app'], function () {
-
-    NzbDrone.Shared.Toolbar.CommandTypes =
-    {
-        RouteTrigger: 'RouteTrigger'
-    };
-
-    NzbDrone.Shared.Toolbar.CommandModel = Backbone.Model.extend({
-        defaults: {
-            'target'   : '/nzbdrone/route',
-            'title'    : 'Title Goes Here',
-            'alignment': 'left',
-            'tooltip'  : undefined
-        }
-    });
-});

UI/Shared/Toolbar/CommandView.js

@@ -1,21 +0,0 @@
-"use strict";
-define(['app'], function () {
-
-    NzbDrone.Shared.Toolbar.CommandView = Backbone.Marionette.ItemView.extend({
-        template : 'Shared/Toolbar/CommandTemplate',
-        className: 'btn',
-
-        events: {
-            'click': 'onClick'
-        },
-
-        onClick: function () {
-            window.alert('click');
-        }
-
-    });
-});
-
-
-
-

UI/Shared/Toolbar/Radio/RadioButtonCollectionView.js

@@ -0,0 +1,34 @@
+"use strict";
+define(['app', 'Shared/Toolbar/Radio/RadioButtonView', 'Config'], function () {
+    NzbDrone.Shared.Toolbar.RadioButtonCollectionView = Backbone.Marionette.CollectionView.extend({
+        className: 'btn-group',
+        itemView : NzbDrone.Shared.Toolbar.RadioButtonView,
+
+        attributes: {
+            'data-toggle': 'buttons-radio'
+        },
+
+        initialize: function (options) {
+            this.menu = options.menu;
+
+            if (this.menu.storeState) {
+                this.setActive();
+            }
+        },
+
+        setActive: function () {
+            var storedKey = NzbDrone.Config.GetValue(this.menu.menuKey, this.menu.defaultAction);
+
+            this.collection.each(function (model) {
+                if (model.get('key').toLocaleLowerCase() === storedKey.toLowerCase()) {
+                    model.set('active', true);
+                }
+                else {
+                    model.set('active, false');
+                }
+            });
+        }
+    });
+});
+
+

UI/Shared/Toolbar/Radio/RadioButtonView.js

@@ -0,0 +1,38 @@
+"use strict";
+define(['app'], function () {
+
+    NzbDrone.Shared.Toolbar.RadioButtonView = Backbone.Marionette.ItemView.extend({
+        template : 'Shared/Toolbar/ButtonTemplate',
+        className: 'btn',
+
+        events: {
+            'click': 'invokeCallback'
+        },
+
+
+        onRender: function () {
+            if (this.model.get('active')) {
+                this.$el.addClass('active');
+                this.invokeCallback();
+            }
+        },
+
+        invokeCallback: function () {
+
+            if (!this.model.ownerContext) {
+                throw 'ownerContext must be set.';
+            }
+
+
+            var callback = this.model.get('callback');
+            if (callback) {
+                callback.call(this.model.ownerContext);
+            }
+        }
+
+    });
+});
+
+
+
+

UI/Shared/Toolbar/ToolbarLayout.js

@@ -1,5 +1,5 @@
 "use strict";
-define(['app', 'Shared/Toolbar/ButtonGroupView','Shared/Toolbar/CommandCollection'], function () {
+define(['app', 'Shared/Toolbar/Radio/RadioButtonCollectionView', 'Shared/Toolbar/ButtonCollection'], function () {
     NzbDrone.Shared.Toolbar.ToolbarLayout = Backbone.Marionette.Layout.extend({
         template: 'Shared/Toolbar/ToolbarLayoutTemplate',
 
@@ -11,10 +11,22 @@ define(['app', 'Shared/Toolbar/ButtonGroupView','Shared/Toolbar/CommandCollectio
         },
 
         initialize: function (options) {
+
+            if (!options) {
+                throw 'options needs to be passed';
+            }
+
+            if (!options.context) {
+                throw 'context needs to be passed';
+            }
+
             this.left = options.left;
             this.right = options.right;
+            this.toolbarContext = options.context;
+
         },
 
+
         onShow: function () {
             if (this.left) {
                 _.each(this.left, this._showToolbarLeft, this);
@@ -25,11 +37,42 @@ define(['app', 'Shared/Toolbar/ButtonGroupView','Shared/Toolbar/CommandCollectio
         },
 
         _showToolbarLeft: function (element, index) {
-            this['left_' + (index + 1).toString()].show(new NzbDrone.Shared.Toolbar.ButtonGroupView({collection: element}));
+            this._showToolbar(element, index, 'left');
         },
 
         _showToolbarRight: function (element, index) {
-            this['right_' + (index + 1).toString()].show(new NzbDrone.Shared.Toolbar.ButtonGroupView({collection: element}));
+            this._showToolbar(element, index, 'right');
+        },
+
+
+        _showToolbar: function (buttonGroup, index, position) {
+
+            var groupCollection = new NzbDrone.Shared.Toolbar.ButtonCollection();
+
+            _.each(buttonGroup.items, function (button) {
+
+                if (buttonGroup.storeState && !button.key) {
+                    throw 'must provide key for all buttons when storSstate is enabled';
+                }
+
+                var model = new NzbDrone.Shared.Toolbar.ButtonModel(button);
+                model.set('menuKey', buttonGroup.menuKey);
+                model.ownerContext = this.toolbarContext;
+                groupCollection.add(model);
+
+            }, this);
+
+            var buttonGroupView;
+
+            if (buttonGroup.type === 'radio') {
+                buttonGroupView = new NzbDrone.Shared.Toolbar.RadioButtonCollectionView(
+                    {
+                        collection: groupCollection,
+                        menu      : buttonGroup
+                    });
+            }
+
+            this[position + '_' + (index + 1).toString()].show(buttonGroupView);
         }
     });
 

UI/Shared/Toolbar/ToolbarLayoutTemplate.html

@@ -1,8 +1,8 @@
 <div class="pull-left page-toolbar">
-    <div class="x-toolbar-left-1 btn-group"/>
+    <div class="x-toolbar-left-1"/>
-    <div class="x-toolbar-left-2 btn-group"/>
+    <div class="x-toolbar-left-2"/>
 </div>
 <div class="pull-right page-toolbar">
-    <div class="x-toolbar-right-1 btn-group"/>
+    <div class="x-toolbar-right-1"/>
-    <div class="x-toolbar-right-2 btn-group"/>
+    <div class="x-toolbar-right-2"/>
 </div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "NzbDrone",
   "version": "0.0.0",
-  "description": "NZBDrone\r =====",
+  "description": "NZBDrone",
   "main": "index.js",
   "scripts": {
     "preinstall": "npm install grunt-cli -g"