You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
337 lines
6.8 KiB
337 lines
6.8 KiB
Block.Search = new Class({
|
|
|
|
Extends: BlockBase,
|
|
|
|
cache: {},
|
|
|
|
create: function(){
|
|
var self = this;
|
|
|
|
self.el = new Element('div.search_form').adopt(
|
|
new Element('div.input').adopt(
|
|
self.input = new Element('input.inlay', {
|
|
'placeholder': 'Search for new movies',
|
|
'events': {
|
|
'keyup': self.keyup.bind(self),
|
|
'focus': self.hideResults.bind(self, false)
|
|
}
|
|
}),
|
|
new Element('a', {
|
|
'events': {
|
|
'click': self.clear.bind(self)
|
|
}
|
|
})
|
|
),
|
|
self.result_container = new Element('div.results_container', {
|
|
'tween': {
|
|
'duration': 200
|
|
},
|
|
'events': {
|
|
'mousewheel': function(e){
|
|
(e).stopPropagation();
|
|
}
|
|
}
|
|
}).adopt(
|
|
new Element('div.pointer'),
|
|
self.results = new Element('div.results')
|
|
).hide()
|
|
);
|
|
|
|
self.spinner = new Spinner(self.result_container);
|
|
|
|
},
|
|
|
|
clear: function(e){
|
|
var self = this;
|
|
(e).stop();
|
|
|
|
self.input.set('value', '');
|
|
self.input.focus()
|
|
|
|
self.movies = []
|
|
self.results.empty()
|
|
},
|
|
|
|
hideResults: function(bool){
|
|
var self = this;
|
|
|
|
if(self.hidden == bool) return;
|
|
|
|
self.result_container[bool ? 'hide' : 'show']();
|
|
|
|
if(bool){
|
|
History.removeEvent('change', self.hideResults.bind(self, !bool));
|
|
self.el.removeEvent('outerClick', self.hideResults.bind(self, !bool));
|
|
}
|
|
else {
|
|
History.addEvent('change', self.hideResults.bind(self, !bool));
|
|
self.el.addEvent('outerClick', self.hideResults.bind(self, !bool));
|
|
}
|
|
|
|
self.hidden = bool;
|
|
},
|
|
|
|
keyup: function(e){
|
|
var self = this;
|
|
|
|
if(['up', 'down'].indexOf(e.key) > -1){
|
|
p('select item')
|
|
}
|
|
else if(self.q() != self.last_q) {
|
|
self.autocomplete()
|
|
}
|
|
|
|
},
|
|
|
|
autocomplete: function(delay){
|
|
var self = this;
|
|
|
|
if(!self.q()){
|
|
self.hideResults(true)
|
|
return
|
|
}
|
|
|
|
self.spinner.show()
|
|
|
|
if(self.autocomplete_timer) clearTimeout(self.autocomplete_timer)
|
|
self.autocomplete_timer = self.list.delay((delay || 300), self)
|
|
},
|
|
|
|
list: function(){
|
|
var self = this;
|
|
|
|
if(self.api_request && self.api_request.running) return
|
|
|
|
var q = self.q();
|
|
var cache = self.cache[q];
|
|
|
|
self.hideResults(false)
|
|
|
|
if(!cache){
|
|
self.api_request = Api.request('movie.search', {
|
|
'data': {
|
|
'q': q
|
|
},
|
|
'onComplete': self.fill.bind(self, q)
|
|
})
|
|
}
|
|
else
|
|
self.fill(q, cache)
|
|
|
|
self.last_q = q;
|
|
|
|
},
|
|
|
|
fill: function(q, json){
|
|
var self = this;
|
|
|
|
self.spinner.hide();
|
|
self.cache[q] = json
|
|
|
|
self.movies = {}
|
|
self.results.empty()
|
|
|
|
Object.each(json.movies, function(movie){
|
|
|
|
var m = new Block.Search.Item(movie);
|
|
$(m).inject(self.results)
|
|
self.movies[movie.imdb || 'r-'+Math.floor(Math.random()*10000)] = m
|
|
|
|
});
|
|
|
|
if(q != self.q())
|
|
self.list()
|
|
|
|
},
|
|
|
|
loading: function(bool){
|
|
this.el[bool ? 'addClass' : 'removeClass']('loading')
|
|
},
|
|
|
|
q: function(){
|
|
return this.input.get('value').trim();
|
|
}
|
|
|
|
});
|
|
|
|
Block.Search.Item = new Class({
|
|
|
|
initialize: function(info){
|
|
var self = this;
|
|
|
|
self.info = info;
|
|
self.alternative_titles = [];
|
|
|
|
self.create();
|
|
},
|
|
|
|
create: function(){
|
|
var self = this;
|
|
|
|
var info = self.info;
|
|
|
|
self.el = new Element('div.movie_result', {
|
|
'id': info.imdb
|
|
}).adopt(
|
|
self.options = new Element('div.options.inlay'),
|
|
self.data_container = new Element('div.data', {
|
|
'tween': {
|
|
duration: 400,
|
|
transition: 'quint:in:out'
|
|
},
|
|
'events': {
|
|
'click': self.showOptions.bind(self)
|
|
}
|
|
}).adopt(
|
|
self.thumbnail = info.images.poster.length > 0 ? new Element('img.thumbnail', {
|
|
'src': info.images.poster[0]
|
|
}) : null,
|
|
new Element('div.info').adopt(
|
|
self.title = new Element('h2', {
|
|
'text': info.titles[0]
|
|
}).adopt(
|
|
self.year = info.year ? new Element('span.year', {
|
|
'text': info.year
|
|
}) : null
|
|
),
|
|
self.tagline = new Element('span.tagline', {
|
|
'text': info.tagline ? info.tagline : info.plot,
|
|
'title': info.tagline ? info.tagline : info.plot
|
|
}),
|
|
self.director = self.info.director ? new Element('span.director', {
|
|
'text': 'Director:' + info.director
|
|
}) : null,
|
|
self.starring = info.actors ? new Element('span.actors', {
|
|
'text': 'Starring:'
|
|
}) : null
|
|
)
|
|
)
|
|
)
|
|
|
|
if(info.actors){
|
|
Object.each(info.actors, function(actor){
|
|
new Element('span', {
|
|
'text': actor
|
|
}).inject(self.starring)
|
|
})
|
|
}
|
|
|
|
info.titles.each(function(title){
|
|
self.alternativeTitle({
|
|
'title': title
|
|
});
|
|
})
|
|
},
|
|
|
|
alternativeTitle: function(alternative){
|
|
var self = this;
|
|
|
|
self.alternative_titles.include(alternative);
|
|
},
|
|
|
|
showOptions: function(){
|
|
var self = this;
|
|
|
|
self.createOptions();
|
|
|
|
if(!self.width)
|
|
self.width = self.data_container.getCoordinates().width
|
|
|
|
self.data_container.tween('left', 0, self.width);
|
|
|
|
self.el.addEvent('outerClick', self.closeOptions.bind(self))
|
|
|
|
},
|
|
|
|
closeOptions: function(){
|
|
var self = this;
|
|
|
|
self.data_container.tween('left', self.width, 0);
|
|
self.el.removeEvents('outerClick')
|
|
},
|
|
|
|
add: function(e){
|
|
var self = this;
|
|
(e).stop();
|
|
|
|
Api.request('movie.add', {
|
|
'data': {
|
|
'identifier': self.info.imdb,
|
|
'title': self.title_select.get('value'),
|
|
'profile_id': self.profile_select.get('value')
|
|
},
|
|
'useSpinner': true,
|
|
'spinnerTarget': self.options,
|
|
'onComplete': function(){
|
|
self.options.empty();
|
|
self.options.adopt(
|
|
new Element('div.message', {
|
|
'text': 'Movie succesfully added.'
|
|
})
|
|
);
|
|
},
|
|
'onFailure': function(){
|
|
self.options.empty();
|
|
self.options.adopt(
|
|
new Element('div.message', {
|
|
'text': 'Something went wrong, check the logs for more info.'
|
|
})
|
|
);
|
|
}
|
|
});
|
|
},
|
|
|
|
createOptions: function(){
|
|
var self = this;
|
|
|
|
if(!self.options.hasClass('set')){
|
|
|
|
self.options.adopt(
|
|
new Element('div').adopt(
|
|
self.info.images.poster.length > 0 ? new Element('img.thumbnail', {
|
|
'src': self.info.images.poster[0]
|
|
}) : null,
|
|
self.info.in_wanted ? new Element('span.in_wanted', {
|
|
'text': 'Already in wanted list: ' + self.info.in_wanted.label
|
|
}) : null,
|
|
self.info.in_library ? new Element('span.in_library', {
|
|
'text': 'Already in library: ' + self.info.in_library.label
|
|
}) : null,
|
|
self.title_select = new Element('select', {
|
|
'name': 'title'
|
|
}),
|
|
self.profile_select = new Element('select', {
|
|
'name': 'profile'
|
|
}),
|
|
new Element('a.button', {
|
|
'text': 'Add',
|
|
'events': {
|
|
'click': self.add.bind(self)
|
|
}
|
|
})
|
|
)
|
|
);
|
|
|
|
Array.each(self.alternative_titles, function(alt){
|
|
new Element('option', {
|
|
'text': alt.title
|
|
}).inject(self.title_select)
|
|
})
|
|
|
|
Object.each(Quality.getActiveProfiles(), function(profile){
|
|
new Element('option', {
|
|
'value': profile.id ? profile.id : profile.data.id,
|
|
'text': profile.label ? profile.label : profile.data.label
|
|
}).inject(self.profile_select)
|
|
});
|
|
|
|
self.options.addClass('set');
|
|
}
|
|
|
|
},
|
|
|
|
toElement: function(){
|
|
return this.el
|
|
}
|
|
|
|
});
|
|
|