Move search item to movie folder

This commit is contained in:
Ruud
2013-10-07 22:51:23 +02:00
parent 3925d4c215
commit bca4a2e241
7 changed files with 246 additions and 242 deletions
+3 -2
View File
@@ -19,8 +19,9 @@ class Search(Plugin):
}, },
'return': {'type': 'object', 'example': """{ 'return': {'type': 'object', 'example': """{
'success': True, 'success': True,
'empty': bool, any movies returned or not, 'movies': array,
'results': object {'movie': [], 'show': []}, by media type found, 'show': array,
etc
}"""} }"""}
}) })
@@ -129,13 +129,13 @@
overflow-x: hidden; overflow-x: hidden;
} }
.movie_result { .media_result {
overflow: hidden; overflow: hidden;
height: 50px; height: 50px;
position: relative; position: relative;
} }
.movie_result .options { .media_result .options {
position: absolute; position: absolute;
height: 100%; height: 100%;
top: 0; top: 0;
@@ -147,48 +147,48 @@
border-radius: 0; border-radius: 0;
box-shadow: inset 0 1px 8px rgba(0,0,0,0.25); box-shadow: inset 0 1px 8px rgba(0,0,0,0.25);
} }
.movie_result .options > .in_library_wanted { .media_result .options > .in_library_wanted {
margin-top: -7px; margin-top: -7px;
} }
.movie_result .options > div { .media_result .options > div {
border: 0; border: 0;
} }
.movie_result .options .thumbnail { .media_result .options .thumbnail {
vertical-align: middle; vertical-align: middle;
} }
.movie_result .options select { .media_result .options select {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
} }
.movie_result .options select[name=title] { width: 170px; } .media_result .options select[name=title] { width: 170px; }
.movie_result .options select[name=profile] { width: 90px; } .media_result .options select[name=profile] { width: 90px; }
.movie_result .options select[name=category] { width: 80px; } .media_result .options select[name=category] { width: 80px; }
@media all and (max-width: 480px) { @media all and (max-width: 480px) {
.movie_result .options select[name=title] { width: 90px; } .media_result .options select[name=title] { width: 90px; }
.movie_result .options select[name=profile] { width: 50px; } .media_result .options select[name=profile] { width: 50px; }
.movie_result .options select[name=category] { width: 50px; } .media_result .options select[name=category] { width: 50px; }
} }
.movie_result .options .button { .media_result .options .button {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
} }
.movie_result .options .message { .media_result .options .message {
height: 100%; height: 100%;
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
line-height: 20px; line-height: 20px;
} }
.movie_result .data { .media_result .data {
position: absolute; position: absolute;
height: 100%; height: 100%;
top: 0; top: 0;
@@ -199,20 +199,20 @@
border-top: 1px solid rgba(255,255,255, 0.08); border-top: 1px solid rgba(255,255,255, 0.08);
transition: all .4s cubic-bezier(0.9,0,0.1,1); transition: all .4s cubic-bezier(0.9,0,0.1,1);
} }
.movie_result .data.open { .media_result .data.open {
left: 100% !important; left: 100% !important;
} }
.movie_result:last-child .data { border-bottom: 0; } .media_result:last-child .data { border-bottom: 0; }
.movie_result .in_wanted, .movie_result .in_library { .media_result .in_wanted, .media_result .in_library {
position: absolute; position: absolute;
bottom: 2px; bottom: 2px;
left: 14px; left: 14px;
font-size: 11px; font-size: 11px;
} }
.movie_result .thumbnail { .media_result .thumbnail {
width: 34px; width: 34px;
min-height: 100%; min-height: 100%;
display: block; display: block;
@@ -220,7 +220,7 @@
vertical-align: top; vertical-align: top;
} }
.movie_result .info { .media_result .info {
position: absolute; position: absolute;
top: 20%; top: 20%;
left: 15px; left: 15px;
@@ -228,7 +228,7 @@
vertical-align: middle; vertical-align: middle;
} }
.movie_result .info h2 { .media_result .info h2 {
margin: 0; margin: 0;
font-weight: normal; font-weight: normal;
font-size: 20px; font-size: 20px;
@@ -240,7 +240,7 @@
width: 100%; width: 100%;
} }
.movie_result .info h2 .title { .media_result .info h2 .title {
display: block; display: block;
margin: 0; margin: 0;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -253,7 +253,7 @@
width: 88%; width: 88%;
} }
.movie_result .info h2 .year { .media_result .info h2 .year {
padding: 0 5px; padding: 0 5px;
text-align: center; text-align: center;
position: absolute; position: absolute;
@@ -271,7 +271,7 @@
} }
.search_form .mask, .search_form .mask,
.movie_result .mask { .media_result .mask {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
@@ -0,0 +1,188 @@
Block.Search = new Class({
Extends: BlockBase,
cache: {},
create: function(){
var self = this;
var focus_timer = 0;
self.el = new Element('div.search_form').adopt(
new Element('div.input').adopt(
self.input = new Element('input', {
'placeholder': 'Search & add a new media',
'events': {
'keyup': self.keyup.bind(self),
'focus': function(){
if(focus_timer) clearTimeout(focus_timer);
self.el.addClass('focused')
if(this.get('value'))
self.hideResults(false)
},
'blur': function(){
focus_timer = (function(){
self.el.removeClass('focused')
}).delay(100);
}
}
}),
new Element('a.icon2', {
'events': {
'click': self.clear.bind(self),
'touchend': self.clear.bind(self)
}
})
),
self.result_container = new Element('div.results_container', {
'tween': {
'duration': 200
},
'events': {
'mousewheel': function(e){
(e).stopPropagation();
}
}
}).adopt(
self.results = new Element('div.results')
)
);
self.mask = new Element('div.mask').inject(self.result_container).fade('hide');
},
clear: function(e){
var self = this;
(e).preventDefault();
if(self.last_q === ''){
self.input.blur()
self.last_q = null;
}
else {
self.last_q = '';
self.input.set('value', '');
self.input.focus()
self.media = {}
self.results.empty()
self.el.removeClass('filled')
}
},
hideResults: function(bool){
var self = this;
if(self.hidden == bool) return;
self.el[bool ? 'removeClass' : 'addClass']('shown');
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;
self.el[self.q() ? 'addClass' : 'removeClass']('filled')
if(self.q() != self.last_q){
if(self.api_request && self.api_request.isRunning())
self.api_request.cancel();
if(self.autocomplete_timer) clearTimeout(self.autocomplete_timer)
self.autocomplete_timer = self.autocomplete.delay(300, self)
}
},
autocomplete: function(){
var self = this;
if(!self.q()){
self.hideResults(true)
return
}
self.list()
},
list: function(){
var self = this,
q = self.q(),
cache = self.cache[q];
self.hideResults(false);
if(!cache){
self.mask.fade('in');
if(!self.spinner)
self.spinner = createSpinner(self.mask);
self.api_request = Api.request('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.cache[q] = json
self.media = {}
self.results.empty()
Object.each(json, function(media, type){
if(typeOf(media) == 'array'){
Object.each(media, function(m){
var m = new Block.Search[m.type.capitalize() + 'Item'](m);
$(m).inject(self.results)
self.media[m.imdb || 'r-'+Math.floor(Math.random()*10000)] = m
if(q == m.imdb)
m.showOptions()
});
}
})
// Calculate result heights
var w = window.getSize(),
rc = self.result_container.getCoordinates();
self.results.setStyle('max-height', (w.y - rc.top - 50) + 'px')
self.mask.fade('out')
},
loading: function(bool){
this.el[bool ? 'addClass' : 'removeClass']('loading')
},
q: function(){
return this.input.get('value').trim();
}
});
@@ -436,7 +436,7 @@
} }
.movies .data .quality .seeding { background-color: #0a6819; } .movies .data .quality .seeding { background-color: #0a6819; }
.movies .data .quality .finish { .movies .data .quality .finish {
background-image: url('../images/sprite.png'); background-image: url('../../images/sprite.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 2px; background-position: 0 2px;
padding-left: 14px; padding-left: 14px;
@@ -992,7 +992,7 @@
} }
.movies .empty_wanted { .movies .empty_wanted {
background-image: url('../images/emptylist.png'); background-image: url('../../images/emptylist.png');
background-position: 80% 0; background-position: 80% 0;
height: 750px; height: 750px;
width: 100%; width: 100%;
@@ -1,189 +1,4 @@
Block.Search = new Class({ Block.Search.MovieItem = new Class({
Extends: BlockBase,
cache: {},
create: function(){
var self = this;
var focus_timer = 0;
self.el = new Element('div.search_form').adopt(
new Element('div.input').adopt(
self.input = new Element('input', {
'placeholder': 'Search & add a new movie',
'events': {
'keyup': self.keyup.bind(self),
'focus': function(){
if(focus_timer) clearTimeout(focus_timer);
self.el.addClass('focused')
if(this.get('value'))
self.hideResults(false)
},
'blur': function(){
focus_timer = (function(){
self.el.removeClass('focused')
}).delay(100);
}
}
}),
new Element('a.icon2', {
'events': {
'click': self.clear.bind(self),
'touchend': self.clear.bind(self)
}
})
),
self.result_container = new Element('div.results_container', {
'tween': {
'duration': 200
},
'events': {
'mousewheel': function(e){
(e).stopPropagation();
}
}
}).adopt(
self.results = new Element('div.results')
)
);
self.mask = new Element('div.mask').inject(self.result_container).fade('hide');
},
clear: function(e){
var self = this;
(e).preventDefault();
if(self.last_q === ''){
self.input.blur()
self.last_q = null;
}
else {
self.last_q = '';
self.input.set('value', '');
self.input.focus()
self.movies = []
self.results.empty()
self.el.removeClass('filled')
}
},
hideResults: function(bool){
var self = this;
if(self.hidden == bool) return;
self.el[bool ? 'removeClass' : 'addClass']('shown');
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;
self.el[self.q() ? 'addClass' : 'removeClass']('filled')
if(self.q() != self.last_q){
if(self.api_request && self.api_request.isRunning())
self.api_request.cancel();
if(self.autocomplete_timer) clearTimeout(self.autocomplete_timer)
self.autocomplete_timer = self.autocomplete.delay(300, self)
}
},
autocomplete: function(){
var self = this;
if(!self.q()){
self.hideResults(true)
return
}
self.list()
},
list: function(){
var self = this,
q = self.q(),
cache = self.cache[q];
self.hideResults(false);
if(!cache){
self.mask.fade('in');
if(!self.spinner)
self.spinner = createSpinner(self.mask);
self.api_request = Api.request('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.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 == movie.imdb)
m.showOptions()
});
// Calculate result heights
var w = window.getSize(),
rc = self.result_container.getCoordinates();
self.results.setStyle('max-height', (w.y - rc.top - 50) + 'px')
self.mask.fade('out')
},
loading: function(bool){
this.el[bool ? 'addClass' : 'removeClass']('loading')
},
q: function(){
return this.input.get('value').trim();
}
});
Block.Search.Item = new Class({
Implements: [Options, Events], Implements: [Options, Events],
@@ -201,7 +16,7 @@ Block.Search.Item = new Class({
var self = this, var self = this,
info = self.info; info = self.info;
self.el = new Element('div.movie_result', { self.el = new Element('div.media_result', {
'id': info.imdb 'id': info.imdb
}).adopt( }).adopt(
self.thumbnail = info.images && info.images.poster.length > 0 ? new Element('img.thumbnail', { self.thumbnail = info.images && info.images.poster.length > 0 ? new Element('img.thumbnail', {
@@ -5,31 +5,31 @@
height: 40px; height: 40px;
} }
.suggestions .movie_result { .suggestions .media_result {
display: inline-block; display: inline-block;
width: 33.333%; width: 33.333%;
height: 150px; height: 150px;
} }
@media all and (max-width: 960px) { @media all and (max-width: 960px) {
.suggestions .movie_result { .suggestions .media_result {
width: 50%; width: 50%;
} }
} }
@media all and (max-width: 600px) { @media all and (max-width: 600px) {
.suggestions .movie_result { .suggestions .media_result {
width: 100%; width: 100%;
} }
} }
.suggestions .movie_result .data { .suggestions .media_result .data {
left: 100px; left: 100px;
background: #4e5969; background: #4e5969;
border: none; border: none;
} }
.suggestions .movie_result .data .info { .suggestions .media_result .data .info {
top: 15px; top: 15px;
left: 15px; left: 15px;
right: 15px; right: 15px;
@@ -37,32 +37,32 @@
overflow: hidden; overflow: hidden;
} }
.suggestions .movie_result .data .info h2 { .suggestions .media_result .data .info h2 {
white-space: normal; white-space: normal;
max-height: 120px; max-height: 120px;
font-size: 18px; font-size: 18px;
line-height: 18px; line-height: 18px;
} }
.suggestions .movie_result .data .info .rating, .suggestions .media_result .data .info .rating,
.suggestions .movie_result .data .info .genres, .suggestions .media_result .data .info .genres,
.suggestions .movie_result .data .info .year { .suggestions .media_result .data .info .year {
position: static; position: static;
display: block; display: block;
padding: 0; padding: 0;
opacity: .6; opacity: .6;
} }
.suggestions .movie_result .data .info .year { .suggestions .media_result .data .info .year {
margin: 10px 0 0; margin: 10px 0 0;
} }
.suggestions .movie_result .data .info .rating { .suggestions .media_result .data .info .rating {
font-size: 20px; font-size: 20px;
float: right; float: right;
margin-top: -20px; margin-top: -20px;
} }
.suggestions .movie_result .data .info .rating:before { .suggestions .media_result .data .info .rating:before {
content: "\e031"; content: "\e031";
font-family: 'Elusive-Icons'; font-family: 'Elusive-Icons';
font-size: 14px; font-size: 14px;
@@ -70,25 +70,25 @@
vertical-align: bottom; vertical-align: bottom;
} }
.suggestions .movie_result .data .info .genres { .suggestions .media_result .data .info .genres {
font-size: 11px; font-size: 11px;
font-style: italic; font-style: italic;
text-align: right; text-align: right;
} }
.suggestions .movie_result .data { .suggestions .media_result .data {
cursor: default; cursor: default;
} }
.suggestions .movie_result .options { .suggestions .media_result .options {
left: 100px; left: 100px;
} }
.suggestions .movie_result .options select[name=title] { width: 100%; } .suggestions .media_result .options select[name=title] { width: 100%; }
.suggestions .movie_result .options select[name=profile] { width: 100%; } .suggestions .media_result .options select[name=profile] { width: 100%; }
.suggestions .movie_result .options select[name=category] { width: 100%; } .suggestions .media_result .options select[name=category] { width: 100%; }
.suggestions .movie_result .button { .suggestions .media_result .button {
position: absolute; position: absolute;
margin: 2px 0 0 0; margin: 2px 0 0 0;
right: 15px; right: 15px;
@@ -96,25 +96,25 @@
} }
.suggestions .movie_result .thumbnail { .suggestions .media_result .thumbnail {
width: 100px; width: 100px;
} }
.suggestions .movie_result .actions { .suggestions .media_result .actions {
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
right: 10px; right: 10px;
display: none; display: none;
width: 140px; width: 140px;
} }
.suggestions .movie_result:hover .actions { .suggestions .media_result:hover .actions {
display: block; display: block;
} }
.suggestions .movie_result .data.open .actions { .suggestions .media_result .data.open .actions {
display: none; display: none;
} }
.suggestions .movie_result .actions a { .suggestions .media_result .actions a {
margin-left: 10px; margin-left: 10px;
vertical-align: middle; vertical-align: middle;
} }
@@ -17,7 +17,7 @@ var SuggestList = new Class({
'click:relay(a.delete)': function(e, el){ 'click:relay(a.delete)': function(e, el){
(e).stop(); (e).stop();
$(el).getParent('.movie_result').destroy(); $(el).getParent('.media_result').destroy();
Api.request('suggestion.ignore', { Api.request('suggestion.ignore', {
'data': { 'data': {
@@ -30,7 +30,7 @@ var SuggestList = new Class({
'click:relay(a.eye-open)': function(e, el){ 'click:relay(a.eye-open)': function(e, el){
(e).stop(); (e).stop();
$(el).getParent('.movie_result').destroy(); $(el).getParent('.media_result').destroy();
Api.request('suggestion.ignore', { Api.request('suggestion.ignore', {
'data': { 'data': {
@@ -65,7 +65,7 @@ var SuggestList = new Class({
Object.each(json.suggestions, function(movie){ Object.each(json.suggestions, function(movie){
var m = new Block.Search.Item(movie, { var m = new Block.Search.MovieItem(movie, {
'onAdded': function(){ 'onAdded': function(){
self.afterAdded(m, movie) self.afterAdded(m, movie)
} }