From fe554849c23d053b0df7141870f1886f91ff641e Mon Sep 17 00:00:00 2001 From: "kay.one" Date: Thu, 25 Apr 2013 21:45:45 -0700 Subject: [PATCH] shared toolbar radio button style is working. just need to store state. --- Gruntfile.js | 4 +- UI/Series/Index/SeriesIndexLayout.js | 107 ++++++------------ UI/Series/SeriesModel.js | 5 +- UI/Shared/Toolbar/ButtonCollection.js | 7 ++ UI/Shared/Toolbar/ButtonGroupView.js | 11 -- UI/Shared/Toolbar/ButtonModel.js | 17 +++ ...mmandTemplate.html => ButtonTemplate.html} | 0 UI/Shared/Toolbar/CommandCollection.js | 7 -- UI/Shared/Toolbar/CommandModel.js | 17 --- UI/Shared/Toolbar/CommandView.js | 21 ---- .../Radio/RadioButtonCollectionView.js | 34 ++++++ UI/Shared/Toolbar/Radio/RadioButtonView.js | 38 +++++++ UI/Shared/Toolbar/ToolbarLayout.js | 49 +++++++- UI/Shared/Toolbar/ToolbarLayoutTemplate.html | 8 +- package.json | 2 +- 15 files changed, 184 insertions(+), 143 deletions(-) create mode 100644 UI/Shared/Toolbar/ButtonCollection.js delete mode 100644 UI/Shared/Toolbar/ButtonGroupView.js create mode 100644 UI/Shared/Toolbar/ButtonModel.js rename UI/Shared/Toolbar/{CommandTemplate.html => ButtonTemplate.html} (100%) delete mode 100644 UI/Shared/Toolbar/CommandCollection.js delete mode 100644 UI/Shared/Toolbar/CommandModel.js delete mode 100644 UI/Shared/Toolbar/CommandView.js create mode 100644 UI/Shared/Toolbar/Radio/RadioButtonCollectionView.js create mode 100644 UI/Shared/Toolbar/Radio/RadioButtonView.js diff --git a/Gruntfile.js b/Gruntfile.js index c57e76824..48cf3b101 100644 --- a/Gruntfile.js +++ b/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' }, diff --git a/UI/Series/Index/SeriesIndexLayout.js b/UI/Series/Index/SeriesIndexLayout.js index e78b9e7bd..8c96937ca 100644 --- a/UI/Series/Index/SeriesIndexLayout.js +++ b/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(); - - menuLeft.add(new NzbDrone.Shared.Toolbar.CommandModel({title: "Add Series", icon: "icon-plus"})); - 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'); + 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 + } + ] + }; + + this.toolbar.show(new NzbDrone.Shared.Toolbar.ToolbarLayout({right: [ viewButtons], context: this})); } - }); - }); + + }) + ; + }) +; diff --git a/UI/Series/SeriesModel.js b/UI/Series/SeriesModel.js index 211992b45..7569500b5 100644 --- a/UI/Series/SeriesModel.js +++ b/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) { diff --git a/UI/Shared/Toolbar/ButtonCollection.js b/UI/Shared/Toolbar/ButtonCollection.js new file mode 100644 index 000000000..9477543d1 --- /dev/null +++ b/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 + }); +}); + diff --git a/UI/Shared/Toolbar/ButtonGroupView.js b/UI/Shared/Toolbar/ButtonGroupView.js deleted file mode 100644 index 429d1613f..000000000 --- a/UI/Shared/Toolbar/ButtonGroupView.js +++ /dev/null @@ -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 - }); -}); - - - - diff --git a/UI/Shared/Toolbar/ButtonModel.js b/UI/Shared/Toolbar/ButtonModel.js new file mode 100644 index 000000000..406d3d947 --- /dev/null +++ b/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 } + }); +}); diff --git a/UI/Shared/Toolbar/CommandTemplate.html b/UI/Shared/Toolbar/ButtonTemplate.html similarity index 100% rename from UI/Shared/Toolbar/CommandTemplate.html rename to UI/Shared/Toolbar/ButtonTemplate.html diff --git a/UI/Shared/Toolbar/CommandCollection.js b/UI/Shared/Toolbar/CommandCollection.js deleted file mode 100644 index be18e4d37..000000000 --- a/UI/Shared/Toolbar/CommandCollection.js +++ /dev/null @@ -1,7 +0,0 @@ -"use strict"; -define(['app', 'Shared/Toolbar/CommandModel'], function () { - NzbDrone.Shared.Toolbar.CommandCollection = Backbone.Collection.extend({ - model: NzbDrone.Shared.Toolbar.CommandModel - }); -}); - diff --git a/UI/Shared/Toolbar/CommandModel.js b/UI/Shared/Toolbar/CommandModel.js deleted file mode 100644 index 726e6e769..000000000 --- a/UI/Shared/Toolbar/CommandModel.js +++ /dev/null @@ -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 - } - }); -}); diff --git a/UI/Shared/Toolbar/CommandView.js b/UI/Shared/Toolbar/CommandView.js deleted file mode 100644 index 2ac06094b..000000000 --- a/UI/Shared/Toolbar/CommandView.js +++ /dev/null @@ -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'); - } - - }); -}); - - - - diff --git a/UI/Shared/Toolbar/Radio/RadioButtonCollectionView.js b/UI/Shared/Toolbar/Radio/RadioButtonCollectionView.js new file mode 100644 index 000000000..3a97c518a --- /dev/null +++ b/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'); + } + }); + } + }); +}); + + diff --git a/UI/Shared/Toolbar/Radio/RadioButtonView.js b/UI/Shared/Toolbar/Radio/RadioButtonView.js new file mode 100644 index 000000000..49cf7ec2f --- /dev/null +++ b/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); + } + } + + }); +}); + + + + diff --git a/UI/Shared/Toolbar/ToolbarLayout.js b/UI/Shared/Toolbar/ToolbarLayout.js index 46cecd9a8..05c64e0e5 100644 --- a/UI/Shared/Toolbar/ToolbarLayout.js +++ b/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); } }); diff --git a/UI/Shared/Toolbar/ToolbarLayoutTemplate.html b/UI/Shared/Toolbar/ToolbarLayoutTemplate.html index e0e28a5a3..c2f497b3f 100644 --- a/UI/Shared/Toolbar/ToolbarLayoutTemplate.html +++ b/UI/Shared/Toolbar/ToolbarLayoutTemplate.html @@ -1,8 +1,8 @@ 
-
-
+
+
-
-
+
+
diff --git a/package.json b/package.json index 7fd205ea0..d470f61e7 100644 --- a/package.json +++ b/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"