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

This commit is contained in:
kay.one 2013-04-25 21:45:45 -07:00
parent 6636b77489
commit fe554849c2
15 changed files with 183 additions and 142 deletions

View File

@ -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'
},

View File

@ -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"}));
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');
this.toolbar.show(new NzbDrone.Shared.Toolbar.ToolbarLayout({right: [ viewButtons], context: this}));
}
});
});
})
;
})
;

View File

@ -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) {

View File

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

View File

@ -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
});
});

View File

@ -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 }
});
});

View File

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

View File

@ -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
}
});
});

View File

@ -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');
}
});
});

View File

@ -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');
}
});
}
});
});

View File

@ -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);
}
}
});
});

View File

@ -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);
}
});

View File

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

View File

@ -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"