Added seasons to top of series details (toggling and jump to)

pull/4/head
Mark McDowall 11 years ago
parent 49c5762c6d
commit 125deb3931

@ -115,8 +115,13 @@ th {
display : block;
}
a {
a, .btn {
i {
cursor: pointer;
}
}
.label-white {
color: black;
background-color: white;
}

@ -78,6 +78,10 @@ define(
episode.set({ hideSeriesLink: true, series: options.series });
});
this.model.on('sync', function () {
this._afterSeasonMonitored();
}, this);
this.episodeCollection.on('sync', function () {
this.render();
}, this);

@ -1,4 +1,4 @@
<div class="series-season">
<div class="series-season" id="season-{{seasonNumber}}">
<h2>
<i class="x-season-monitored clickable" title="Toggle season monitored status"/>
{{#if seasonNumber}}

@ -0,0 +1,31 @@
'use strict';
define(
[
'marionette',
'Series/Details/SeasonMenu/ItemView'
], function (Marionette, ItemView) {
return Marionette.CollectionView.extend({
itemView: ItemView,
initialize: function (options) {
if (!options.episodeCollection) {
throw 'episodeCollection is needed';
}
this.episodeCollection = options.episodeCollection;
},
itemViewOptions: function () {
return {
episodeCollection: this.episodeCollection,
};
},
appendHtml: function(collectionView, itemView, index){
var childrenContainer = $(collectionView.childrenContainer || collectionView.el);
childrenContainer.prepend(itemView.el);
}
});
});

@ -0,0 +1,88 @@
'use strict';
define(
[
'marionette',
'Shared/Actioneer'
], function (Marionette, Actioneer) {
return Marionette.ItemView.extend({
template: 'Series/Details/SeasonMenu/ItemViewTemplate',
tagName : 'span',
ui: {
seasonMonitored: '.x-season-monitored'
},
events: {
'click .x-season-monitored': '_seasonMonitored',
'click .x-text': '_gotoSeason'
},
initialize: function (options) {
if (!options.episodeCollection) {
throw 'episodeCollection is needed';
}
this.episodeCollection = options.episodeCollection.bySeason(this.model.get('seasonNumber'));
var allDownloaded = _.all(this.episodeCollection.models, function (model) {
var hasFile = model.get('hasFile');
return hasFile;
});
this.model.set({
allFilesDownloaded: allDownloaded
});
this.model.on('sync', function () {
this.render();
}, this);
},
onRender: function () {
this._setSeasonMonitoredState();
},
_seasonSearch: function () {
Actioneer.ExecuteCommand({
command : 'seasonSearch',
properties : {
seriesId : this.model.get('seriesId'),
seasonNumber: this.model.get('seasonNumber')
},
element : this.ui.seasonSearch,
failMessage : 'Search for season {0} failed'.format(this.model.get('seasonNumber')),
startMessage: 'Search for season {0} started'.format(this.model.get('seasonNumber'))
});
},
_seasonMonitored: function (e) {
e.preventDefault();
var name = 'monitored';
this.model.set(name, !this.model.get(name));
Actioneer.SaveModel({
context : this,
element : this.ui.seasonMonitored
});
},
_setSeasonMonitoredState: function () {
this.ui.seasonMonitored.removeClass('icon-spinner icon-spin');
if (this.model.get('monitored')) {
this.ui.seasonMonitored.addClass('icon-bookmark');
this.ui.seasonMonitored.removeClass('icon-bookmark-empty');
}
else {
this.ui.seasonMonitored.addClass('icon-bookmark-empty');
this.ui.seasonMonitored.removeClass('icon-bookmark');
}
},
_gotoSeason: function () {
window.location.hash = '#season-' + this.model.get('seasonNumber');
}
});
});

@ -0,0 +1,14 @@
{{#if allFilesDownloaded}}
<span class="label label-info season-menu-item">
{{else}}
<span class="label label-white season-menu-item">
{{/if}}
<i class="x-season-monitored clickable" title="Toggle season monitored status"/>
<span class="x-text text" title="Go to season">
{{#if_eq seasonNumber compare=0}}
Specials
{{else}}
S{{Pad2 seasonNumber}}
{{/if_eq}}
</span>
</span>

@ -6,17 +6,19 @@ define(
'Series/EpisodeCollection',
'Series/SeasonCollection',
'Series/Details/SeasonCollectionView',
'Series/Details/SeasonMenu/CollectionView',
'Shared/LoadingView',
'Shared/Actioneer',
'backstrech'
], function (App, Marionette, EpisodeCollection, SeasonCollection, SeasonCollectionView, LoadingView, Actioneer) {
], function (App, Marionette, EpisodeCollection, SeasonCollection, SeasonCollectionView, SeasonMenuCollectionView, LoadingView, Actioneer) {
return Marionette.Layout.extend({
itemViewContainer: '.x-series-seasons',
template : 'Series/Details/SeriesDetailsTemplate',
regions: {
seasons: '#seasons'
seasonMenu: '#season-menu',
seasons : '#seasons'
},
ui: {
@ -69,6 +71,11 @@ define(
episodeCollection: self.episodeCollection,
series : self.model
}));
self.seasonMenu.show(new SeasonMenuCollectionView({
collection: self.seasonCollection,
episodeCollection: self.episodeCollection
}));
});
this._setMonitoredState();

@ -36,6 +36,9 @@
{{/if}}
</span>
</div>
<div class="row">
<div id="season-menu" class="season-menu"></div>
</div>
</div>
</div>
<div id="seasons"/>
<div id="seasons"></div>

@ -53,6 +53,25 @@
.opacity(0.9);
}
.season-menu {
margin-top: 5px;
.season-menu-item {
.text {
.clickable;
}
a:hover {
text-decoration: none;
}
i:before {
width: 10px;
}
}
}
.series-posters {
list-style-type : none;

Loading…
Cancel
Save