Ruud
10 years ago
10 changed files with 71 additions and 618 deletions
@ -1,173 +0,0 @@ |
|||
var SuggestList = new Class({ |
|||
|
|||
Implements: [Options, Events], |
|||
|
|||
shown_once: false, |
|||
|
|||
initialize: function(options){ |
|||
var self = this; |
|||
self.setOptions(options); |
|||
|
|||
self.create(); |
|||
}, |
|||
|
|||
create: function(){ |
|||
var self = this; |
|||
|
|||
self.el = new Element('div.suggestions', { |
|||
'events': { |
|||
'click:relay(a.delete)': function(e, el){ |
|||
(e).stop(); |
|||
|
|||
$(el).getParent('.media_result').destroy(); |
|||
|
|||
Api.request('suggestion.ignore', { |
|||
'data': { |
|||
'imdb': el.get('data-ignore') |
|||
}, |
|||
'onComplete': self.fill.bind(self) |
|||
}); |
|||
|
|||
}, |
|||
'click:relay(a.eye-open)': function(e, el){ |
|||
(e).stop(); |
|||
|
|||
$(el).getParent('.media_result').destroy(); |
|||
|
|||
Api.request('suggestion.ignore', { |
|||
'data': { |
|||
'imdb': el.get('data-seen'), |
|||
'mark_seen': 1 |
|||
}, |
|||
'onComplete': self.fill.bind(self) |
|||
}); |
|||
|
|||
} |
|||
} |
|||
}); |
|||
|
|||
var cookie_menu_select = Cookie.read('suggestions_charts_menu_selected') || 'suggestions'; |
|||
if( cookie_menu_select === 'suggestions') |
|||
self.show(); |
|||
else |
|||
self.hide(); |
|||
|
|||
self.fireEvent.delay(0, self, 'created'); |
|||
|
|||
}, |
|||
|
|||
fill: function(json){ |
|||
|
|||
var self = this; |
|||
|
|||
if(!json || json.count === 0){ |
|||
self.el.hide(); |
|||
} |
|||
else { |
|||
|
|||
Object.each(json.suggestions, function(movie){ |
|||
|
|||
var m = new BlockSearchMovieItem(movie, { |
|||
'onAdded': function(){ |
|||
self.afterAdded(m, movie); |
|||
} |
|||
}); |
|||
m.data_container.grab( |
|||
new Element('div.actions').adopt( |
|||
new Element('a.add.icon2', { |
|||
'title': 'Add movie with your default quality', |
|||
'data-add': movie.imdb, |
|||
'events': { |
|||
'click': m.showOptions.bind(m) |
|||
} |
|||
}), |
|||
$(new MA.IMDB(m)), |
|||
$(new MA.Trailer(m, { |
|||
'height': 150 |
|||
})), |
|||
new Element('a.delete.icon2', { |
|||
'title': 'Don\'t suggest this movie again', |
|||
'data-ignore': movie.imdb |
|||
}), |
|||
new Element('a.eye-open.icon2', { |
|||
'title': 'Seen it, like it, don\'t add', |
|||
'data-seen': movie.imdb |
|||
}) |
|||
) |
|||
); |
|||
m.data_container.removeEvents('click'); |
|||
|
|||
var plot = false; |
|||
if(m.info.plot && m.info.plot.length > 0) |
|||
plot = m.info.plot; |
|||
|
|||
// Add rating
|
|||
m.info_container.adopt( |
|||
m.rating = m.info.rating && m.info.rating.imdb && m.info.rating.imdb.length == 2 && parseFloat(m.info.rating.imdb[0]) > 0 ? new Element('span.rating', { |
|||
'text': parseFloat(m.info.rating.imdb[0]), |
|||
'title': parseInt(m.info.rating.imdb[1]) + ' votes' |
|||
}) : null, |
|||
m.genre = m.info.genres && m.info.genres.length > 0 ? new Element('span.genres', { |
|||
'text': m.info.genres.slice(0, 3).join(', ') |
|||
}) : null, |
|||
m.plot = plot ? new Element('span.plot', { |
|||
'text': plot, |
|||
'events': { |
|||
'click': function(){ |
|||
this.toggleClass('full'); |
|||
} |
|||
} |
|||
}) : null |
|||
); |
|||
|
|||
$(m).inject(self.el); |
|||
|
|||
}); |
|||
|
|||
} |
|||
|
|||
self.fireEvent('loaded'); |
|||
|
|||
}, |
|||
|
|||
afterAdded: function(m, movie){ |
|||
var self = this; |
|||
|
|||
setTimeout(function(){ |
|||
$(m).destroy(); |
|||
|
|||
Api.request('suggestion.ignore', { |
|||
'data': { |
|||
'imdb': movie.imdb, |
|||
'remove_only': true |
|||
}, |
|||
'onComplete': self.fill.bind(self) |
|||
}); |
|||
|
|||
}, 3000); |
|||
|
|||
}, |
|||
|
|||
show: function(){ |
|||
var self = this; |
|||
|
|||
self.el.show(); |
|||
|
|||
if(!self.shown_once){ |
|||
self.api_request = Api.request('suggestion.view', { |
|||
'onComplete': self.fill.bind(self) |
|||
}); |
|||
|
|||
self.shown_once = true; |
|||
} |
|||
}, |
|||
|
|||
hide: function(){ |
|||
this.el.hide(); |
|||
}, |
|||
|
|||
toElement: function(){ |
|||
return this.el; |
|||
} |
|||
|
|||
}); |
|||
@ -1,162 +0,0 @@ |
|||
.suggestions { |
|||
clear: both; |
|||
padding-top: 10px; |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.suggestions > h2 { |
|||
height: 40px; |
|||
} |
|||
|
|||
.suggestions .media_result { |
|||
display: inline-block; |
|||
width: 33.333%; |
|||
height: 150px; |
|||
} |
|||
|
|||
@media all and (max-width: 960px) { |
|||
.suggestions .media_result { |
|||
width: 50%; |
|||
} |
|||
} |
|||
|
|||
@media all and (max-width: 600px) { |
|||
.suggestions .media_result { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
.suggestions .media_result .data { |
|||
left: 100px; |
|||
background: #4e5969; |
|||
border: none; |
|||
} |
|||
|
|||
.suggestions .media_result .data .info { |
|||
top: 10px; |
|||
left: 15px; |
|||
right: 15px; |
|||
bottom: 10px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.suggestions .media_result .data .info h2 { |
|||
white-space: normal; |
|||
max-height: 120px; |
|||
font-size: 18px; |
|||
line-height: 18px; |
|||
} |
|||
|
|||
.suggestions .media_result .data .info .rating, |
|||
.suggestions .media_result .data .info .genres, |
|||
.suggestions .media_result .data .info .year { |
|||
position: static; |
|||
display: block; |
|||
padding: 0; |
|||
opacity: .6; |
|||
} |
|||
|
|||
.suggestions .media_result .data .info .year { |
|||
margin: 10px 0 0; |
|||
} |
|||
|
|||
.suggestions .media_result .data .info .rating { |
|||
font-size: 20px; |
|||
float: right; |
|||
margin-top: -20px; |
|||
} |
|||
.suggestions .media_result .data .info .rating:before { |
|||
content: "\e031"; |
|||
font-family: 'Elusive-Icons'; |
|||
font-size: 14px; |
|||
margin: 0 5px 0 0; |
|||
vertical-align: bottom; |
|||
} |
|||
|
|||
.suggestions .media_result .data .info .genres { |
|||
font-size: 11px; |
|||
font-style: italic; |
|||
text-align: right; |
|||
} |
|||
|
|||
.suggestions .media_result .data .info .plot { |
|||
display: block; |
|||
font-size: 11px; |
|||
overflow: hidden; |
|||
text-align: justify; |
|||
height: 100%; |
|||
z-index: 2; |
|||
top: 64px; |
|||
position: absolute; |
|||
background: #4e5969; |
|||
cursor: pointer; |
|||
transition: all .4s ease-in-out; |
|||
padding: 0 3px 10px 0; |
|||
} |
|||
.suggestions .media_result .data:before { |
|||
content: ''; |
|||
display: block; |
|||
height: 10px; |
|||
right: 0; |
|||
left: 0; |
|||
bottom: 10px; |
|||
position: absolute; |
|||
background: linear-gradient( |
|||
0deg, |
|||
rgba(78, 89, 105, 1) 0%, |
|||
rgba(78, 89, 105, 0) 100% |
|||
); |
|||
z-index: 3; |
|||
pointer-events: none; |
|||
} |
|||
|
|||
.suggestions .media_result .data .info .plot.full { |
|||
top: 0; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.suggestions .media_result .data { |
|||
cursor: default; |
|||
} |
|||
|
|||
.suggestions .media_result .options { |
|||
left: 100px; |
|||
} |
|||
.suggestions .media_result .options select[name=title] { width: 100%; } |
|||
.suggestions .media_result .options select[name=profile] { width: 100%; } |
|||
.suggestions .media_result .options select[name=category] { width: 100%; } |
|||
|
|||
.suggestions .media_result .button { |
|||
position: absolute; |
|||
margin: 2px 0 0 0; |
|||
right: 15px; |
|||
bottom: 15px; |
|||
} |
|||
|
|||
|
|||
.suggestions .media_result .thumbnail { |
|||
width: 100px; |
|||
} |
|||
|
|||
.suggestions .media_result .actions { |
|||
position: absolute; |
|||
top: 10px; |
|||
right: 10px; |
|||
display: none; |
|||
width: 140px; |
|||
} |
|||
.suggestions .media_result:hover .actions { |
|||
display: block; |
|||
} |
|||
.suggestions .media_result:hover h2 .title { |
|||
opacity: 0; |
|||
} |
|||
.suggestions .media_result .data.open .actions { |
|||
display: none; |
|||
} |
|||
|
|||
.suggestions .media_result .actions a { |
|||
margin-left: 10px; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
Loading…
Reference in new issue