Use navigation and limit for manage page

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(){

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;

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);