From b9b9ad6fb5b19632f8bb15cae2118b33d32f7a53 Mon Sep 17 00:00:00 2001 From: Keivan Beigi Date: Fri, 28 Jun 2013 16:06:16 -0700 Subject: [PATCH] much smarter handling of series collection rendering. --- UI/AddSeries/AddSeriesView.js | 2 +- UI/AddSeries/Existing/CompositeView.js | 10 ++- UI/AddSeries/SearchResultView.js | 16 ++--- UI/Content/icons.less | 64 ++++++++++--------- UI/Controller.js | 2 +- UI/Series/Index/EmptyTemplate.html | 16 +++-- UI/Series/Index/EmptyView.js | 3 +- UI/Series/Index/Posters/CollectionView.js | 2 +- UI/Series/Index/SeriesIndexLayout.js | 76 +++++++++++++---------- UI/Series/SeriesCollection.js | 6 +- 10 files changed, 110 insertions(+), 87 deletions(-) diff --git a/UI/AddSeries/AddSeriesView.js b/UI/AddSeries/AddSeriesView.js index 4372eadd1..c21602aed 100644 --- a/UI/AddSeries/AddSeriesView.js +++ b/UI/AddSeries/AddSeriesView.js @@ -1,4 +1,4 @@ -'use strict'; +'use strict'; define( [ 'marionette', diff --git a/UI/AddSeries/Existing/CompositeView.js b/UI/AddSeries/Existing/CompositeView.js index cd1a55ecb..600e5f21d 100644 --- a/UI/AddSeries/Existing/CompositeView.js +++ b/UI/AddSeries/Existing/CompositeView.js @@ -49,8 +49,8 @@ define( this.searchCollection = new AddSeriesCollection(); this.searchCollection.fetch({ - data : { term: this.ui.searchText.val() }, - success: function () { + data: { term: this.ui.searchText.val() } + }).done(function () { icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search'); deferred.resolve(); self.collection.add(self.searchCollection.shift()); @@ -59,12 +59,10 @@ define( self._showAll(); } - }, - fail : function () { + }).fail(function () { icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search'); deferred.reject(); - } - }); + }); return deferred.promise(); }, diff --git a/UI/AddSeries/SearchResultView.js b/UI/AddSeries/SearchResultView.js index a5415f9de..ee19912c0 100644 --- a/UI/AddSeries/SearchResultView.js +++ b/UI/AddSeries/SearchResultView.js @@ -73,9 +73,11 @@ define( var self = this; - this.model.save(undefined, { - url : SeriesCollection.prototype.url, - success: function () { + SeriesCollection.add(this.model); + + + this.model.save() + .done(function () { self.close(); icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search'); Messenger.show({ @@ -83,12 +85,10 @@ define( }); App.vent.trigger(App.Events.SeriesAdded, { series: self.model }); - self.model.collection.remove(self.model); - }, - fail : function () { + }) + .fail(function () { icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search'); - } - }); + }); }, serializeData: function () { diff --git a/UI/Content/icons.less b/UI/Content/icons.less index 82dd713df..858fdb150 100644 --- a/UI/Content/icons.less +++ b/UI/Content/icons.less @@ -3,46 +3,46 @@ /* Icon rotations and mirroring */ .icon-rotate-90() { - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -ms-transform: rotate(90deg); - -o-transform: rotate(90deg); - transform: rotate(90deg); - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); + -webkit-transform : rotate(90deg); + -moz-transform : rotate(90deg); + -ms-transform : rotate(90deg); + -o-transform : rotate(90deg); + transform : rotate(90deg); + filter : progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } .icon-rotate-180() { - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -ms-transform: rotate(180deg); - -o-transform: rotate(180deg); - transform: rotate(180deg); - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + -webkit-transform : rotate(180deg); + -moz-transform : rotate(180deg); + -ms-transform : rotate(180deg); + -o-transform : rotate(180deg); + transform : rotate(180deg); + filter : progid:DXImageTransform.Microsoft.BasicImage(rotation=2); } .icon-rotate-270() { - -webkit-transform: rotate(270deg); - -moz-transform: rotate(270deg); - -ms-transform: rotate(270deg); - -o-transform: rotate(270deg); - transform: rotate(270deg); - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); + -webkit-transform : rotate(270deg); + -moz-transform : rotate(270deg); + -ms-transform : rotate(270deg); + -o-transform : rotate(270deg); + transform : rotate(270deg); + filter : progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .icon-flip-horizontal() { - -webkit-transform: scale(-1, 1); - -moz-transform: scale(-1, 1); - -ms-transform: scale(-1, 1); - -o-transform: scale(-1, 1); - transform: scale(-1, 1); + -webkit-transform : scale(-1, 1); + -moz-transform : scale(-1, 1); + -ms-transform : scale(-1, 1); + -o-transform : scale(-1, 1); + transform : scale(-1, 1); } .icon-flip-vertical() { - -webkit-transform: scale(1, -1); - -moz-transform: scale(1, -1); - -ms-transform: scale(1, -1); - -o-transform: scale(1, -1); - transform: scale(1, -1); + -webkit-transform : scale(1, -1); + -moz-transform : scale(1, -1); + -ms-transform : scale(1, -1); + -o-transform : scale(1, -1); + transform : scale(1, -1); } .icon-nd-edit:before { @@ -51,5 +51,9 @@ .icon-nd-delete:before { .icon(@remove); - color: @errorText; -} \ No newline at end of file + color : @errorText; +} + +.icon-nd-add:before { + .icon(@plus); +} diff --git a/UI/Controller.js b/UI/Controller.js index cdee651c1..8c2a7b783 100644 --- a/UI/Controller.js +++ b/UI/Controller.js @@ -1,4 +1,4 @@ -'use strict'; +'use strict'; define( [ 'app', diff --git a/UI/Series/Index/EmptyTemplate.html b/UI/Series/Index/EmptyTemplate.html index 5c92c88f2..95b3d1f2e 100644 --- a/UI/Series/Index/EmptyTemplate.html +++ b/UI/Series/Index/EmptyTemplate.html @@ -1,4 +1,12 @@ -
- - You must be new around here, You should add some series. -
\ No newline at end of file +
+
+ + You must be new around here, You should add some series. +
+
+
+ + + Add Series + +
diff --git a/UI/Series/Index/EmptyView.js b/UI/Series/Index/EmptyView.js index ea23a1fbe..0850d4d84 100644 --- a/UI/Series/Index/EmptyView.js +++ b/UI/Series/Index/EmptyView.js @@ -1,4 +1,5 @@ -'use strict'; + +'use strict'; define( [ diff --git a/UI/Series/Index/Posters/CollectionView.js b/UI/Series/Index/Posters/CollectionView.js index 6ac6e7569..06600e8fb 100644 --- a/UI/Series/Index/Posters/CollectionView.js +++ b/UI/Series/Index/Posters/CollectionView.js @@ -1,4 +1,4 @@ -'use strict'; +'use strict'; define( [ diff --git a/UI/Series/Index/SeriesIndexLayout.js b/UI/Series/Index/SeriesIndexLayout.js index 1cdeaccfe..720830aeb 100644 --- a/UI/Series/Index/SeriesIndexLayout.js +++ b/UI/Series/Index/SeriesIndexLayout.js @@ -12,16 +12,15 @@ define( 'Series/Index/Table/SeriesStatusCell', 'Series/Index/Table/Row', 'Shared/Toolbar/ToolbarLayout', - 'Config', 'Shared/LoadingView' ], function (Marionette, PosterCollectionView, ListCollectionView, EmptyView, SeriesCollection, AirDateCell, SeriesTitleCell, TemplatedCell, SeriesStatusCell, SeriesIndexRow, - ToolbarLayout, Config, LoadingView) { + ToolbarLayout, LoadingView) { return Marionette.Layout.extend({ template: 'Series/Index/SeriesIndexLayoutTemplate', regions: { - series : '#x-series', - toolbar: '#x-toolbar' + seriesRegion: '#x-series', + toolbar : '#x-toolbar' }, columns: @@ -100,60 +99,71 @@ define( }, _showTable: function () { - var view = new Backgrid.Grid({ + this.currentView = new Backgrid.Grid({ row : SeriesIndexRow, + collection: SeriesCollection, columns : this.columns, - collection: this.seriesCollection, className : 'table table-hover' }); - this._fetchCollection(view); + this._renderView(); + this._fetchCollection(); }, _showList: function () { - var view = new ListCollectionView(); - this._fetchCollection(view); + this.currentView = new ListCollectionView(); + this._fetchCollection(); }, _showPosters: function () { - var view = new PosterCollectionView(); - this._fetchCollection(view); + this.currentView = new PosterCollectionView(); + this._fetchCollection(); }, - _showEmpty: function () { - this.series.show(new EmptyView()); + + initialize: function () { + this.seriesCollection = SeriesCollection; + + this.listenTo(SeriesCollection, 'sync', this._renderView); + this.listenTo(SeriesCollection, 'remove', this._renderView); }, - _fetchCollection: function (view) { - var self = this; - if (this.seriesCollection.models.length === 0) { - this.series.show(new LoadingView()); + _renderView: function () { - this.seriesCollection.fetch().done(function () { - if (self.seriesCollection.models.length === 0) { - self._showEmpty(); - } - else { - view.collection = self.seriesCollection; - self.series.show(view); - } - }); + if (SeriesCollection.length === 0) { + this.seriesRegion.show(new EmptyView()); + this.toolbar.close(); } + else if (this.currentView && !this.currentView.isClosed) { + this.currentView.collection = SeriesCollection; + this.seriesRegion.show(this.currentView); - else { - view.collection = this.seriesCollection; - this.series.show(view); + this._showToolbar(); } }, - initialize: function () { - this.seriesCollection = new SeriesCollection(); - }, onShow: function () { + this._fetchCollection(); + this._showToolbar(); + }, + + + _fetchCollection: function () { + if (SeriesCollection.length === 0) { + this.seriesRegion.show(new LoadingView()); + } + + SeriesCollection.fetch(); + }, + + _showToolbar: function () { + + if (this.toolbar.currentView) { + return; + } - //TODO: Move this outside of the function - 'this' is not available for the call back though (use string like events?) var viewButtons = { type : 'radio', storeState : true, diff --git a/UI/Series/SeriesCollection.js b/UI/Series/SeriesCollection.js index 1b91a429f..fa56d4f9d 100644 --- a/UI/Series/SeriesCollection.js +++ b/UI/Series/SeriesCollection.js @@ -1,10 +1,10 @@ -'use strict'; +'use strict'; define( [ 'backbone', 'Series/SeriesModel' ], function (Backbone, SeriesModel) { - return Backbone.Collection.extend({ + var collection = Backbone.Collection.extend({ url : window.ApiRoot + '/series', model: SeriesModel, @@ -17,4 +17,6 @@ define( order : -1 } }); + + return new collection(); });