shared toolbar radio button style is working. just need to store state.
This commit is contained in:
parent
6636b77489
commit
fe554849c2
|
@ -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'
|
||||
},
|
||||
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
var viewButtons = {
|
||||
type : 'radio',
|
||||
storeState : 'true',
|
||||
menuKey : 'seriesViewMode',
|
||||
defaultAction: 'listView',
|
||||
items : [
|
||||
{
|
||||
key : 'tableView',
|
||||
title : '',
|
||||
icon : 'icon-table',
|
||||
callback: 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);
|
||||
{
|
||||
key : 'listView',
|
||||
title : '',
|
||||
icon : 'icon-list',
|
||||
callback: this.showList
|
||||
},
|
||||
|
||||
setActive: function (element) {
|
||||
this.$('a').removeClass('active');
|
||||
$(element).addClass('active');
|
||||
{
|
||||
key : 'posterView',
|
||||
title : '',
|
||||
icon : 'icon-picture',
|
||||
callback: this.showPosters
|
||||
}
|
||||
});
|
||||
});
|
||||
]
|
||||
};
|
||||
|
||||
this.toolbar.show(new NzbDrone.Shared.Toolbar.ToolbarLayout({right: [ viewButtons], context: this}));
|
||||
}
|
||||
|
||||
})
|
||||
;
|
||||
})
|
||||
;
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
"use strict";
|
||||
define(['app', 'Shared/Toolbar/ButtonModel'], function () {
|
||||
NzbDrone.Shared.Toolbar.ButtonCollection = Backbone.Collection.extend({
|
||||
model: NzbDrone.Shared.Toolbar.ButtonModel
|
||||
});
|
||||
});
|
||||
|
|
@ -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
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
@ -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 }
|
||||
});
|
||||
});
|
|
@ -1,7 +0,0 @@
|
|||
"use strict";
|
||||
define(['app', 'Shared/Toolbar/CommandModel'], function () {
|
||||
NzbDrone.Shared.Toolbar.CommandCollection = Backbone.Collection.extend({
|
||||
model: NzbDrone.Shared.Toolbar.CommandModel
|
||||
});
|
||||
});
|
||||
|
|
@ -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
|
||||
}
|
||||
});
|
||||
});
|
|
@ -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');
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue