UI Cleanup - Updated AddSeries subtree.

This commit is contained in:
Taloth Saldono
2015-02-13 22:04:05 +01:00
parent b556eda4a0
commit f5118fc430
15 changed files with 311 additions and 186 deletions
+96 -43
View File
@@ -9,71 +9,121 @@ var ErrorView = require('./ErrorView');
var LoadingView = require('../Shared/LoadingView');
module.exports = Marionette.Layout.extend({
template : 'AddSeries/AddSeriesViewTemplate',
regions : {searchResult : '#search-result'},
ui : {
template : 'AddSeries/AddSeriesViewTemplate',
regions : {
searchResult : '#search-result'
},
ui : {
seriesSearch : '.x-series-search',
searchBar : '.x-search-bar',
loadMore : '.x-load-more'
},
events : {"click .x-load-more" : '_onLoadMore'},
initialize : function(options){
events : {
'click .x-load-more' : '_onLoadMore'
},
initialize : function(options) {
this.isExisting = options.isExisting;
this.collection = new AddSeriesCollection();
if(this.isExisting) {
if (this.isExisting) {
this.collection.unmappedFolderModel = this.model;
}
if(this.isExisting) {
if (this.isExisting) {
this.className = 'existing-series';
}
else {
} else {
this.className = 'new-series';
}
this.listenTo(vent, vent.Events.SeriesAdded, this._onSeriesAdded);
this.listenTo(this.collection, 'sync', this._showResults);
this.resultCollectionView = new SearchResultCollectionView({
collection : this.collection,
isExisting : this.isExisting
});
this.throttledSearch = _.debounce(this.search, 1000, {trailing : true}).bind(this);
this.throttledSearch = _.debounce(this.search, 1000, { trailing : true }).bind(this);
},
onRender : function(){
onRender : function() {
var self = this;
this.$el.addClass(this.className);
this.ui.seriesSearch.keyup(function(e){
if(_.contains([9, 16, 17, 18, 19, 20, 33, 34, 35, 36, 37, 38, 39, 40, 91, 92, 93], e.keyCode)) {
this.ui.seriesSearch.keyup(function(e) {
if (_.contains([
9,
16,
17,
18,
19,
20,
33,
34,
35,
36,
37,
38,
39,
40,
91,
92,
93
], e.keyCode)) {
return;
}
self._abortExistingSearch();
self.throttledSearch({term : self.ui.seriesSearch.val()});
self.throttledSearch({
term : self.ui.seriesSearch.val()
});
});
this._clearResults();
if(this.isExisting) {
if (this.isExisting) {
this.ui.searchBar.hide();
}
},
onShow : function(){
onShow : function() {
this.ui.seriesSearch.focus();
},
search : function(options){
search : function(options) {
var self = this;
this.collection.reset();
if(!options.term || options.term === this.collection.term) {
if (!options.term || options.term === this.collection.term) {
return Marionette.$.Deferred().resolve();
}
this.searchResult.show(new LoadingView());
this.collection.term = options.term;
this.currentSearchPromise = this.collection.fetch({data : {term : options.term}});
this.currentSearchPromise.fail(function(){
this.currentSearchPromise = this.collection.fetch({
data : { term : options.term }
});
this.currentSearchPromise.fail(function() {
self._showError();
});
return this.currentSearchPromise;
},
_onSeriesAdded : function(options){
if(this.isExisting && options.series.get('path') === this.model.get('folder').path) {
_onSeriesAdded : function(options) {
if (this.isExisting && options.series.get('path') === this.model.get('folder').path) {
this.close();
}
else if(!this.isExisting) {
else if (!this.isExisting) {
this.collection.term = '';
this.collection.reset();
this._clearResults();
@@ -81,48 +131,51 @@ module.exports = Marionette.Layout.extend({
this.ui.seriesSearch.focus();
}
},
_onLoadMore : function(){
_onLoadMore : function() {
var showingAll = this.resultCollectionView.showMore();
this.ui.searchBar.show();
if(showingAll) {
if (showingAll) {
this.ui.loadMore.hide();
}
},
_clearResults : function(){
if(!this.isExisting) {
_clearResults : function() {
if (!this.isExisting) {
this.searchResult.show(new EmptyView());
}
else {
} else {
this.searchResult.close();
}
},
_showResults : function(){
if(!this.isClosed) {
if(this.collection.length === 0) {
_showResults : function() {
if (!this.isClosed) {
if (this.collection.length === 0) {
this.ui.searchBar.show();
this.searchResult.show(new NotFoundView({term : this.collection.term}));
}
else {
this.searchResult.show(new NotFoundView({ term : this.collection.term }));
} else {
this.searchResult.show(this.resultCollectionView);
if(!this.showingAll && this.isExisting) {
if (!this.showingAll && this.isExisting) {
this.ui.loadMore.show();
}
}
}
},
_abortExistingSearch : function(){
if(this.currentSearchPromise && this.currentSearchPromise.readyState > 0 && this.currentSearchPromise.readyState < 4) {
_abortExistingSearch : function() {
if (this.currentSearchPromise && this.currentSearchPromise.readyState > 0 && this.currentSearchPromise.readyState < 4) {
console.log('aborting previous pending search request.');
this.currentSearchPromise.abort();
}
else {
} else {
this._clearResults();
}
},
_showError : function(){
if(!this.isClosed) {
_showError : function() {
if (!this.isClosed) {
this.ui.searchBar.show();
this.searchResult.show(new ErrorView({term : this.collection.term}));
this.searchResult.show(new ErrorView({ term : this.collection.term }));
this.collection.term = '';
}
}