From d1d0a9cf2653d076eb3aebd75b7bfc6adad4b81f Mon Sep 17 00:00:00 2001 From: Ruud Date: Sat, 4 Jun 2011 21:41:25 +0200 Subject: [PATCH] Movie list, navigate by letters --- couchpotato/core/plugins/movie/static/list.js | 51 +++++++++++++++---------- couchpotato/core/plugins/movie/static/movie.css | 4 ++ couchpotato/core/plugins/movie/static/movie.js | 48 +++++++++++++++++++++-- 3 files changed, 80 insertions(+), 23 deletions(-) diff --git a/couchpotato/core/plugins/movie/static/list.js b/couchpotato/core/plugins/movie/static/list.js index 2facc39..73581e1 100644 --- a/couchpotato/core/plugins/movie/static/list.js +++ b/couchpotato/core/plugins/movie/static/list.js @@ -7,6 +7,7 @@ var MovieList = new Class({ }, movies: [], + letters: {}, initialize: function(options){ var self = this; @@ -19,9 +20,10 @@ var MovieList = new Class({ create: function(){ var self = this; + self.el.empty(); + // Create the alphabet nav - if(self.options.navigation) - self.createNavigation(); + self.createNavigation(); Object.each(self.movies, function(info){ var m = new Movie(self, { @@ -29,6 +31,9 @@ var MovieList = new Class({ }, info); $(m).inject(self.el); m.fireEvent('injected'); + + var first_char = m.getTitle().substr(0, 1); + self.activateLetter(first_char); }); self.el.addEvents({ @@ -44,7 +49,6 @@ var MovieList = new Class({ createNavigation: function(){ var self = this; var chars = '#ABCDEFGHIJKLMNOPQRSTUVWXYZ'; - var selected = 'Z'; self.navigation = new Element('div.alph_nav').adopt( self.alpha = new Element('ul.inlay'), @@ -54,32 +58,39 @@ var MovieList = new Class({ new Element('li.thumbnails'), new Element('li.text') ) - ).inject(this.el, 'top') + ).inject(this.el, 'top'); chars.split('').each(function(c){ - new Element('li', { + self.letters[c] = new Element('li', { 'text': c, - 'class': c == selected ? 'selected' : '' + 'class': 'letter_'+c }).inject(self.alpha) - }) + }); + + }, + + activateLetter: function(letter){ + this.letters[letter].addClass('active') + }, + update: function(){ + var self = this; + + self.getMovies(); }, - getMovies: function(status, onComplete){ + getMovies: function(){ var self = this - if(self.movies.length == 0) - Api.request('movie.list', { - 'data': { - 'status': self.options.status - }, - 'onComplete': function(json){ - self.store(json.movies); - self.create(); - } - }) - else - self.list() + Api.request('movie.list', { + 'data': { + 'status': self.options.status + }, + 'onComplete': function(json){ + self.store(json.movies); + self.create(); + } + }) }, store: function(movies){ diff --git a/couchpotato/core/plugins/movie/static/movie.css b/couchpotato/core/plugins/movie/static/movie.css index 70819a7..d708869 100644 --- a/couchpotato/core/plugins/movie/static/movie.css +++ b/couchpotato/core/plugins/movie/static/movie.css @@ -159,7 +159,11 @@ text-align: center; cursor: pointer; margin: 0 -1px 0 0; + color: #666; } + .movies .alph_nav li.active { + color: #fff; + } .movies .alph_nav li:hover, .movies .alph_nav li.onlay { font-weight: bold; diff --git a/couchpotato/core/plugins/movie/static/movie.js b/couchpotato/core/plugins/movie/static/movie.js index cabe5a4..a2adc83 100644 --- a/couchpotato/core/plugins/movie/static/movie.js +++ b/couchpotato/core/plugins/movie/static/movie.js @@ -127,7 +127,8 @@ var MovieAction = new Class({ self.movie = movie; self.create(); - self.el.addClass(self.class_name) + if(self.el) + self.el.addClass(self.class_name) }, create: function(){}, @@ -141,7 +142,7 @@ var MovieAction = new Class({ }, toElement: function(){ - return this.el + return this.el || null } }); @@ -173,4 +174,45 @@ var IMDBAction = new Class({ window.open('http://www.imdb.com/title/'+self.id+'/'); } -}) \ No newline at end of file +}); + +var ReleaseAction = new Class({ + + Extends: MovieAction, + id: null, + + create: function(){ + var self = this; + + self.id = self.movie.get('identifier'); + + self.el = new Element('a.releases', { + 'title': 'Show the releases that are available for ' + self.movie.getTitle(), + 'events': { + 'click': self.show.bind(self) + } + }); + + }, + + show: function(e){ + var self = this; + (e).stop(); + + if(!self.options_container){ + self.options_container = new Element('div.options').adopt( + $(self.movie.thumbnail).clone(), + self.release_container = new Element('div.releases') + ).inject(self.movie, 'top'); + + Array.each(self.movie.data.releases, function(release){ + new Element('div', { + 'text': release.title + }).inject(self.release_container) + }); + + } + self.movie.slide('in'); + }, + +}); \ No newline at end of file