much smarter handling of series collection rendering.

This commit is contained in:
Keivan Beigi 2013-06-28 16:06:16 -07:00
parent 263700954e
commit b9b9ad6fb5
10 changed files with 117 additions and 94 deletions

View File

@ -1,4 +1,4 @@
'use strict';
'use strict';
define(
[
'marionette',

View File

@ -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,11 +59,9 @@ define(
self._showAll();
}
},
fail : function () {
}).fail(function () {
icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
deferred.reject();
}
});
return deferred.promise();

View File

@ -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,11 +85,9 @@ 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');
}
});
},

View File

@ -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;
color : @errorText;
}
.icon-nd-add:before {
.icon(@plus);
}

View File

@ -1,4 +1,4 @@
'use strict';
'use strict';
define(
[
'app',

View File

@ -1,4 +1,12 @@
<div class="well span11">
<div class="row">
<div class="well span11">
<i class="icon-comment"/>
You must be new around here, You should add some series.
</div>
</div>
<div class="row span3 offset4">
<a href="/addseries" class='btn btn-large btn-block btn-success x-add-series'>
<i class='icon-nd-add'></i>
Add Series
</a>
</div>

View File

@ -1,4 +1,5 @@
'use strict';

'use strict';
define(
[

View File

@ -1,4 +1,4 @@
'use strict';
'use strict';
define(
[

View File

@ -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());
},
_fetchCollection: function (view) {
var self = this;
if (this.seriesCollection.models.length === 0) {
this.series.show(new LoadingView());
this.seriesCollection.fetch().done(function () {
if (self.seriesCollection.models.length === 0) {
self._showEmpty();
}
else {
view.collection = self.seriesCollection;
self.series.show(view);
}
});
}
else {
view.collection = this.seriesCollection;
this.series.show(view);
}
},
initialize: function () {
this.seriesCollection = new SeriesCollection();
this.seriesCollection = SeriesCollection;
this.listenTo(SeriesCollection, 'sync', this._renderView);
this.listenTo(SeriesCollection, 'remove', this._renderView);
},
onShow: function () {
//TODO: Move this outside of the function - 'this' is not available for the call back though (use string like events?)
_renderView: function () {
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);
this._showToolbar();
}
},
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;
}
var viewButtons = {
type : 'radio',
storeState : true,

View File

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