much smarter handling of series collection rendering.
This commit is contained in:
parent
263700954e
commit
b9b9ad6fb5
|
@ -1,4 +1,4 @@
|
|||
'use strict';
|
||||
'use strict';
|
||||
define(
|
||||
[
|
||||
'marionette',
|
||||
|
|
|
@ -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();
|
||||
},
|
||||
|
|
|
@ -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 () {
|
||||
|
|
|
@ -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);
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
'use strict';
|
||||
'use strict';
|
||||
define(
|
||||
[
|
||||
'app',
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
<div class="well span11">
|
||||
<i class="icon-comment"/>
|
||||
You must be new around here, You should add some series.
|
||||
<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>
|
|
@ -1,4 +1,5 @@
|
|||
'use strict';
|
||||
|
||||
'use strict';
|
||||
|
||||
define(
|
||||
[
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
'use strict';
|
||||
'use strict';
|
||||
|
||||
define(
|
||||
[
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue