From 125deb39315fa98ec6ed9ce291f2e5955ee0ffb4 Mon Sep 17 00:00:00 2001 From: Mark McDowall Date: Wed, 31 Jul 2013 23:32:36 -0700 Subject: [PATCH] Added seasons to top of series details (toggling and jump to) --- UI/Content/base.less | 7 +- UI/Series/Details/SeasonLayout.js | 4 + UI/Series/Details/SeasonLayoutTemplate.html | 2 +- .../Details/SeasonMenu/CollectionView.js | 31 +++++++ UI/Series/Details/SeasonMenu/ItemView.js | 88 +++++++++++++++++++ .../Details/SeasonMenu/ItemViewTemplate.html | 14 +++ UI/Series/Details/SeriesDetailsLayout.js | 11 ++- UI/Series/Details/SeriesDetailsTemplate.html | 5 +- UI/Series/series.less | 19 ++++ 9 files changed, 176 insertions(+), 5 deletions(-) create mode 100644 UI/Series/Details/SeasonMenu/CollectionView.js create mode 100644 UI/Series/Details/SeasonMenu/ItemView.js create mode 100644 UI/Series/Details/SeasonMenu/ItemViewTemplate.html diff --git a/UI/Content/base.less b/UI/Content/base.less index 36d9a26d6..17a209006 100644 --- a/UI/Content/base.less +++ b/UI/Content/base.less @@ -115,8 +115,13 @@ th { display : block; } -a { +a, .btn { i { cursor: pointer; } +} + +.label-white { + color: black; + background-color: white; } \ No newline at end of file diff --git a/UI/Series/Details/SeasonLayout.js b/UI/Series/Details/SeasonLayout.js index 5b2485217..8a9892098 100644 --- a/UI/Series/Details/SeasonLayout.js +++ b/UI/Series/Details/SeasonLayout.js @@ -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); diff --git a/UI/Series/Details/SeasonLayoutTemplate.html b/UI/Series/Details/SeasonLayoutTemplate.html index d6aebcd32..eb02bf938 100644 --- a/UI/Series/Details/SeasonLayoutTemplate.html +++ b/UI/Series/Details/SeasonLayoutTemplate.html @@ -1,4 +1,4 @@ -
+

{{#if seasonNumber}} diff --git a/UI/Series/Details/SeasonMenu/CollectionView.js b/UI/Series/Details/SeasonMenu/CollectionView.js new file mode 100644 index 000000000..f7dd0544a --- /dev/null +++ b/UI/Series/Details/SeasonMenu/CollectionView.js @@ -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); + } + }); + }); diff --git a/UI/Series/Details/SeasonMenu/ItemView.js b/UI/Series/Details/SeasonMenu/ItemView.js new file mode 100644 index 000000000..403600c61 --- /dev/null +++ b/UI/Series/Details/SeasonMenu/ItemView.js @@ -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'); + } + }); + }); diff --git a/UI/Series/Details/SeasonMenu/ItemViewTemplate.html b/UI/Series/Details/SeasonMenu/ItemViewTemplate.html new file mode 100644 index 000000000..8b0283ff6 --- /dev/null +++ b/UI/Series/Details/SeasonMenu/ItemViewTemplate.html @@ -0,0 +1,14 @@ +{{#if allFilesDownloaded}} + +{{else}} + +{{/if}} + + + {{#if_eq seasonNumber compare=0}} + Specials + {{else}} + S{{Pad2 seasonNumber}} + {{/if_eq}} + + \ No newline at end of file diff --git a/UI/Series/Details/SeriesDetailsLayout.js b/UI/Series/Details/SeriesDetailsLayout.js index 5357e47cf..abfd30181 100644 --- a/UI/Series/Details/SeriesDetailsLayout.js +++ b/UI/Series/Details/SeriesDetailsLayout.js @@ -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(); diff --git a/UI/Series/Details/SeriesDetailsTemplate.html b/UI/Series/Details/SeriesDetailsTemplate.html index f20b53388..3a5f601d3 100644 --- a/UI/Series/Details/SeriesDetailsTemplate.html +++ b/UI/Series/Details/SeriesDetailsTemplate.html @@ -36,6 +36,9 @@ {{/if}}

+
+
+
-
+
diff --git a/UI/Series/series.less b/UI/Series/series.less index 0908c4e38..82e37be67 100644 --- a/UI/Series/series.less +++ b/UI/Series/series.less @@ -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;