From fb795c277e78289bf0c8fa5334cab01ed914d056 Mon Sep 17 00:00:00 2001 From: Ruud Date: Sat, 21 Jan 2012 13:25:49 +0100 Subject: [PATCH] Use navigation and limit for manage page --- couchpotato/core/plugins/movie/static/list.js | 156 ++++++++++++++---- .../core/plugins/movie/static/movie.css | 10 ++ couchpotato/static/scripts/page/manage.js | 1 + 3 files changed, 138 insertions(+), 29 deletions(-) diff --git a/couchpotato/core/plugins/movie/static/list.js b/couchpotato/core/plugins/movie/static/list.js index 7faf408a..aaed1dea 100644 --- a/couchpotato/core/plugins/movie/static/list.js +++ b/couchpotato/core/plugins/movie/static/list.js @@ -3,30 +3,73 @@ var MovieList = new Class({ Implements: [Options], options: { - navigation: false + navigation: false, + limit: 50 }, movies: [], letters: {}, + filter: { + 'startswith': null, + 'search': null + }, initialize: function(options){ var self = this; self.setOptions(options); - self.el = new Element('div.movies'); + self.offset = 0; + + self.el = new Element('div.movies').adopt( + self.movie_list = new Element('div'), + self.load_more = new Element('a.load_more', { + 'events': { + 'click': self.loadMore.bind(self) + } + }) + ); self.getMovies(); }, create: function(){ var self = this; - self.el.empty(); - // Create the alphabet nav if(self.options.navigation) self.createNavigation(); - Object.each(self.movies, function(info){ + self.movie_list.addEvents({ + 'mouseenter:relay(.movie)': function(e, el){ + el.addClass('hover'); + }, + 'mouseleave:relay(.movie)': function(e, el){ + el.removeClass('hover'); + } + }); + + self.scrollspy = new ScrollSpy({ + min: function(){ + var c = self.load_more.getCoordinates() + return c.top - window.document.getSize().y - 300 + }, + onEnter: self.loadMore.bind(self) + }); + + self.created = true; + }, + + addMovies: function(movies){ + var self = this; + + if(!self.created) self.create(); + + // do scrollspy + if(movies.length < self.options.limit){ + self.load_more.hide(); + self.scrollspy.stop(); + } + + Object.each(movies, function(info){ // Attach proper actions var a = self.options.actions @@ -35,23 +78,11 @@ var MovieList = new Class({ var m = new Movie(self, { 'actions': actions }, info); - $(m).inject(self.el); + $(m).inject(self.movie_list); m.fireEvent('injected'); - if(self.options.navigation){ - var first_char = m.getTitle().substr(0, 1); - self.activateLetter(first_char); - } }); - self.el.addEvents({ - 'mouseenter:relay(.movie)': function(e, el){ - el.addClass('hover'); - }, - 'mouseleave:relay(.movie)': function(e, el){ - el.removeClass('hover'); - } - }); }, createNavigation: function(){ @@ -59,26 +90,83 @@ var MovieList = new Class({ var chars = '#ABCDEFGHIJKLMNOPQRSTUVWXYZ'; self.navigation = new Element('div.alph_nav').adopt( - self.alpha = new Element('ul.inlay'), - self.input = new Element('input.inlay'), + self.alpha = new Element('ul.inlay', { + 'events': { + 'click:relay(li)': function(e, el){ + self.movie_list.empty() + self.activateLetter(el.get('data-letter')) + self.getMovies() + } + } + }), + self.search_input = new Element('input.inlay', { + 'events': { + 'keyup': self.search.bind(self), + 'change': self.search.bind(self) + } + })/*, self.view = new Element('ul.inlay').adopt( new Element('li.list'), new Element('li.thumbnails'), new Element('li.text') - ) - ).inject(this.el, 'top'); + )*/ + ).inject(self.el, 'top'); + // All + self.letters['all'] = new Element('li.letter_all.active', { + 'text': 'all', + }).inject(self.alpha); + + // Chars chars.split('').each(function(c){ self.letters[c] = new Element('li', { 'text': c, - 'class': 'letter_'+c + 'class': 'letter_'+c, + 'data-letter': c }).inject(self.alpha); }); }, + reset: function(){ + var self = this; + + self.navigation.getElements('.active').removeClass('active') + self.offset = 0; + self.load_more.show(); + self.scrollspy.start(); + }, + activateLetter: function(letter){ - this.letters[letter].addClass('active'); + var self = this; + + self.reset() + + self.letters[letter || 'all'].addClass('active'); + self.filter.starts_with = letter; + + }, + + search: function(){ + var self = this; + + if(self.search_timer) clearTimeout(self.search_timer); + self.search_timer = (function(){ + var search_value = self.search_input.get('value'); + if (search_value == self.last_search_value) return + + self.reset() + + self.activateLetter(); + self.filter.search = search_value; + + self.movie_list.empty(); + self.getMovies(); + + self.last_search_value = search_value; + + }).delay(250); + }, update: function(){ @@ -90,21 +178,31 @@ var MovieList = new Class({ getMovies: function(){ var self = this; + self.load_more.set('text', 'loading...'); Api.request('movie.list', { - 'data': { - 'status': self.options.status - }, + 'data': Object.merge({ + 'status': self.options.status, + 'limit_offset': self.options.limit + ',' + self.offset + }, self.filter), 'onComplete': function(json){ self.store(json.movies); - self.create(); + self.addMovies(json.movies); + self.load_more.set('text', 'load more movies'); } }); }, + loadMore: function(){ + var self = this; + + self.getMovies() + }, + store: function(movies){ var self = this; - self.movies = movies; + self.offset += movies.length; + }, toElement: function(){ diff --git a/couchpotato/core/plugins/movie/static/movie.css b/couchpotato/core/plugins/movie/static/movie.css index 419e083f..9c2b9d6e 100644 --- a/couchpotato/core/plugins/movie/static/movie.css +++ b/couchpotato/core/plugins/movie/static/movie.css @@ -214,6 +214,16 @@ padding-bottom: 4px; height: auto; } + + .movies .load_more { + display: block; + padding: 10px; + text-align: center; + font-size: 20px; + } + .movies .load_more.loading { + opacity: .5; + } .movies .alph_nav ul { list-style: none; diff --git a/couchpotato/static/scripts/page/manage.js b/couchpotato/static/scripts/page/manage.js index ae874565..0ed3dfc8 100644 --- a/couchpotato/static/scripts/page/manage.js +++ b/couchpotato/static/scripts/page/manage.js @@ -18,6 +18,7 @@ Page.Manage = new Class({ self.list = new MovieList({ 'status': 'done', + 'navigation': true, 'actions': MovieActions }); $(self.list).inject(self.el);