Searcher, settings styling

couchpotato/static/scripts/block/search.js

@@ -8,17 +8,57 @@ Block.Search = new Class({
 		var self = this;
 
 		self.el = new Element('div.search_form').adopt(
-			self.input = new Element('input', {
-				'events': {
-					'keyup': self.keyup.bind(self)
+			new Element('div.input').adopt(
+				self.input = new Element('input', {
+					'events': {
+						'keyup': self.keyup.bind(self),
+						'focus': self.hideResults.bind(self, false)
+					}
+				}),
+				new Element('a', {
+					'events': {
+						'click': self.clear.bind(self)
+					}
+				})
+			),
+			self.result_container = new Element('div.results_container', {
+				'tween': {
+					'duration': 200
 				}
-			}),
-			self.results = new Element('div.results')
+			}).adopt(
+				new Element('div.pointer'),
+				self.results = new Element('div.results')
+			).fade('hide')
 		);
 
-		// Debug
-		self.input.set('value', 'iron man');
-		self.autocomplete(0)
+		self.spinner = new Spinner(self.result_container);
+
+		self.OuterClickStack = new EventStack.OuterClick();
+
+	},
+
+	clear: function(e){
+		var self = this;
+		(e).stop();
+
+		self.input.set('value', '');
+		self.input.focus()
+
+		self.movies = []
+		self.results.empty()
+	},
+
+	hideResults: function(bool){
+		var self = this;
+
+		if(self.hidden == bool) return;
+
+		self.result_container.fade(bool ? 0 : 1)
+
+		if(!bool && self.OuterClickStack.stack.length == 0)
+			self.OuterClickStack.push(self.hideResults.bind(self, true), self.el);
+
+		self.hidden = bool;
 	},
 
 	keyup: function(e){
@@ -36,6 +76,13 @@ Block.Search = new Class({
 	autocomplete: function(delay){
 		var self = this;
 
+		if(!self.q()){
+			self.hideResults(true)
+			return
+		}
+
+		self.spinner.show()
+
 		if(self.autocomplete_timer) clearTimeout(self.autocomplete_timer)
 		self.autocomplete_timer = self.list.delay((delay || 300), self)
 	},
@@ -48,13 +95,16 @@ Block.Search = new Class({
 		var q = self.q();
 		var cache = self.cache[q];
 
-		if(!cache)
-			self.api_request = self.api().request('movie.add.search', {
+		self.hideResults(false)
+
+		if(!cache){
+			self.api_request = Api.request('movie.add.search', {
 				'data': {
 					'q': q
 				},
 				'onComplete': self.fill.bind(self, q)
 			})
+		}
 		else
 			self.fill(q, cache)
 
@@ -65,20 +115,28 @@ Block.Search = new Class({
 	fill: function(q, json){
 		var self = this;
 
+		self.spinner.hide();
 		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)
+
+			if(!movie.imdb || (movie.imdb && !self.results.getElement('#'+movie.imdb))){
+				var m = new Block.Search.Item(movie);
+				$(m).inject(self.results)
+			}
 
 			self.movies.include(m)
 		});
 
 	},
 
+	loading: function(bool){
+		this.el[bool ? 'addClass' : 'removeClass']('loading')
+	},
+
 	q: function(){
 		return this.input.get('value').trim();
 	}
@@ -93,31 +151,58 @@ Block.Search.Item = new Class({
 		self.info = info;
 
 		self.create();
+
+		self.OuterClickStack = new EventStack.OuterClick();
 	},
 
 	create: function(){
 		var self = this;
 
-		self.el = new Element('div.movie').adopt(
-			self.name = new Element('h2', {
-				'text': self.info.name
-			}),
-			self.tagline = new Element('span', {
-				'text': self.info.tagline
-			}),
-			self.year = self.info.year ? new Element('span', {
-				'text': self.info.year
-			}) : null,
-			self.director = self.info.director ?  new Element('span', {
-				'text': 'Director:' + self.info.director
-			}) : null,
-			self.starring = self.info.actors ? new Element('span', {
-				'text': 'Starring:'
-			}) : null
+		var info = self.info
+
+		self.el = new Element('div.movie', {
+			'id': info.imdb
+		}).adopt(
+			new Element('div.add').adopt(
+				new Element('span', {
+					'text': 'test'
+				})
+			),
+			self.data_container = new Element('div.data', {
+				'tween': {
+					duration: 400,
+					transition: 'quint:in:out'
+				},
+				'events': {
+					'click': self.showOptions.bind(self)
+				}
+			}).adopt(
+				self.thumbnail = info.poster ? new Element('img.thumbnail', {
+					'src': info.poster
+				}) : null,
+				new Element('div.info').adopt(
+					self.name = new Element('h2', {
+						'text': info.name
+					}).adopt(
+						self.year = info.year ? new Element('span', {
+							'text': info.year
+						}) : null
+					),
+					self.tagline = new Element('span', {
+						'text': info.tagline
+					}),
+					self.director = self.info.director ?  new Element('span', {
+						'text': 'Director:' + info.director
+					}) : null,
+					self.starring = info.actors ? new Element('span', {
+						'text': 'Starring:'
+					}) : null
+				)
+			)
 		)
-		
-		if(self.info.actors){
-			Object.each(self.info.actors, function(actor){
+
+		if(info.actors){
+			Object.each(info.actors, function(actor){
 				new Element('span', {
 					'text': actor.name
 				}).inject(self.starring)
@@ -125,6 +210,24 @@ Block.Search.Item = new Class({
 		}
 	},
 
+	showOptions: function(){
+		var self = this;
+
+		if(!self.width)
+			self.width = self.data_container.getCoordinates().width
+
+		self.data_container.tween('margin-left', 0, self.width);
+
+		self.OuterClickStack.push(self.closeOptions.bind(self), self.el);
+
+	},
+
+	closeOptions: function(){
+		var self = this;
+
+		self.data_container.tween('margin-left', self.width, 0);
+	},
+
 	toElement: function(){
 		return this.el
 	}