Optimize movie inject

couchpotato/core/media/movie/_base/static/list.js

@@ -4,7 +4,6 @@ var MovieList = new Class({
 
 	options: {
 		api_call: 'media.list',
-		animated_in: false,
 		navigation: true,
 		limit: 50,
 		load_more: true,
@@ -39,7 +38,28 @@ var MovieList = new Class({
 				'html': self.options.description,
 				'styles': {'display': 'none'}
 			}) : null,
-			self.movie_list = new Element('div'),
+			self.movie_list = new Element('div', {
+				'events': {
+					'click:relay(.movie)': function(e, el){
+						el.retrieve('klass').onClick(e);
+					},
+					'mouseenter:relay(.movie)': function(e, el){
+						el.retrieve('klass').onMouseenter(e);
+					},
+					'mouseleave:relay(.movie)': function(e, el){
+						el.retrieve('klass').onMouseleave(e);
+					},
+					'click:relay(.movie .action)': function(e){
+						(e).stopPropagation();
+					},
+					'change:relay(.movie input)': function(e, el){
+						el = el.getParent();
+						var klass = el.retrieve('klass');
+						klass.fireEvent('select');
+						klass.select(klass.select_checkbox.get('checked'));
+					}
+				}
+			}),
 			self.load_more = self.options.load_more ? new Element('a.load_more', {
 				'events': {
 					'click': self.loadMore.bind(self)
@@ -109,6 +129,7 @@ var MovieList = new Class({
 	addMovies: function(movies, total){
 		var self = this;
 
+
 		if(!self.created) self.create();
 
 		// do scrollspy
@@ -117,9 +138,7 @@ var MovieList = new Class({
 			self.scrollspy.stop();
 		}
 
-		Object.each(movies, function(movie, nr){
+		self.createMovie(movies, 'bottom');
-			self.createMovie(movie, 'bottom', nr);
-		});
 
 		self.total_movies += total;
 		self.setCounter(total);
@@ -171,41 +190,35 @@ var MovieList = new Class({
 
 	createMovie: function(movie, inject_at, nr){
 		var self = this,
-			animate = self.options.animated_in && !App.mobile_screen && self.current_view == 'thumb' && nr !== undefined;
+			movies = Array.isArray(movie) ? movie : [movie],
-		var m = new Movie(self, {
+			movie_els = [];
-			'actions': self.options.actions,
+		inject_at = inject_at || 'bottom';
-			'view': self.current_view,
-			'onSelect': self.calculateSelected.bind(self)
-		}, movie);
-
-		var el = $(m);
-
-		if(animate) {
-			dynamics.css(el, {
-				opacity: 0,
-				translateY: 150
-			});
-		}
 
-		el.inject(self.movie_list, inject_at || 'bottom');
+		movies.each(function(movie, nr){
 
-		m.fireEvent('injected');
+			var m = new Movie(self, {
+				'actions': self.options.actions,
+				'view': self.current_view,
+				'onSelect': self.calculateSelected.bind(self)
+			}, movie);
 
-		self.movies.include(m);
+			var el = $(m);
-		self.movies_added[movie._id] = true;
 
-		if(animate){
+			if(inject_at === 'bottom'){
-			dynamics.animate(el, {
+				movie_els.push(el);
-				opacity: 1,
+			}
-				translateY: 0
+			else {
-			}, {
+				el.inject(self.movie_list, inject_at);
-				type: dynamics.spring,
+			}
-				frequency: 200,
+
-				friction: 300,
+			self.movies.include(m);
-				duration: 1200,
+			self.movies_added[movie._id] = true;
-				delay: 100 + (nr * 20)
+		});
-			});
+
+		if(movie_els.length > 0){
+			$(self.movie_list).adopt(movie_els);
 		}
+
 	},
 
 	createNavigation: function(){

couchpotato/core/media/movie/_base/static/movie.js

@@ -1,6 +1,7 @@
 var Movie = new Class({
 
 	Extends: BlockBase,
+	Implements: [Options, Events],
 
 	actions: null,
 	details: null,
@@ -12,75 +13,10 @@ var Movie = new Class({
 		self.data = data;
 		self.list = list;
 
-		var buttons = [];
+		self.buttons = [];
 
-		self.el = new Element('a.movie', {
+		self.el = new Element('a.movie');
-			'events': {
+		self.el.store('klass', self);
-				'click': function(e){
-					if(e.target.get('tag') != 'input'){
-						(e).preventDefault();
-						self.openDetails();
-					}
-				},
-				'mouseenter': function(){
-					if(self.actions.length <= 0){
-						self.options.actions.each(function(a){
-							var action = new a(self),
-								button = action.getButton();
-							if(button){
-								self.actions_el.grab(button);
-								buttons.push(button);
-							}
-
-							self.actions.push(action);
-						});
-					}
-
-					if(App.mobile_screen) return;
-
-					if(list.current_view == 'thumb'){
-						dynamics.css(self.el, {
-							scale: 1,
-							opacity: 1
-						});
-
-						dynamics.animate(self.el, {
-							scale: 0.9
-						}, { type: dynamics.bounce });
-
-						buttons.each(function(el, nr){
-
-							dynamics.css(el, {
-								opacity: 0,
-								translateY: 50
-							});
-
-							dynamics.animate(el, {
-								opacity: 1,
-								translateY: 0
-							}, {
-								type: dynamics.spring,
-								frequency: 200,
-								friction: 300,
-								duration: 800,
-								delay: 100 + (nr * 40)
-							});
-
-						});
-					}
-				},
-				'mouseleave': function(){
-					if(App.mobile_screen) return;
-
-					if(list.current_view == 'thumb'){
-						dynamics.animate(self.el, {
-							scale: 1
-						}, { type: dynamics.spring });
-					}
-
-				}
-			}
-		});
 
 		self.profile = Quality.getProfile(data.profile_id) || {};
 		self.category = CategoryList.getCategory(data.category_id) || {};
@@ -310,24 +246,11 @@ var Movie = new Class({
 		}
 
 		self.el.adopt(
-			self.select_checkbox = new Element('input[type=checkbox]', {
+			self.select_checkbox = new Element('input[type=checkbox]'),
-				'events': {
-					'change': function(){
-						self.fireEvent('select');
-						self.select(self.select_checkbox.get('checked'));
-					}
-				}
-			}),
 			self.thumbnail = thumbnail.grab(
-				self.actions_el = new Element('div.actions', {
+				self.actions_el = new Element('div.actions')
-					'events': {
-						'click:relay(.action)': function(e){
-							(e).stopPropagation();
-						}
-					}
-				})
 			),
-			self.data_container = new Element('div.data.light').adopt(
+			self.data_container = new Element('div.data.light').grab(
 				self.info_container = new Element('div.info').adopt(
 					new Element('div.title').adopt(
 						self.title = new Element('span', {
@@ -370,6 +293,79 @@ var Movie = new Class({
 
 	},
 
+
+	onClick: function(e){
+		var self = this;
+
+		if(e.target.get('tag') != 'input'){
+			(e).preventDefault();
+			self.openDetails();
+		}
+	},
+
+	onMouseenter: function(){
+		var self = this;
+
+		if(self.actions.length <= 0){
+			self.options.actions.each(function(a){
+				var action = new a(self),
+					button = action.getButton();
+				if(button){
+					self.actions_el.grab(button);
+					self.buttons.push(button);
+				}
+
+				self.actions.push(action);
+			});
+		}
+
+		if(App.mobile_screen) return;
+
+		if(self.list.current_view == 'thumb'){
+			dynamics.css(self.el, {
+				scale: 1,
+				opacity: 1
+			});
+
+			dynamics.animate(self.el, {
+				scale: 0.9
+			}, { type: dynamics.bounce });
+
+			self.buttons.each(function(el, nr){
+
+				dynamics.css(el, {
+					opacity: 0,
+					translateY: 50
+				});
+
+				dynamics.animate(el, {
+					opacity: 1,
+					translateY: 0
+				}, {
+					type: dynamics.spring,
+					frequency: 200,
+					friction: 300,
+					duration: 800,
+					delay: 100 + (nr * 40)
+				});
+
+			});
+		}
+	},
+
+	onMouseleave: function(){
+		var self = this;
+
+		if(App.mobile_screen) return;
+
+		if(self.list.current_view == 'thumb'){
+			dynamics.animate(self.el, {
+				scale: 1
+			}, { type: dynamics.spring });
+		}
+
+	},
+
 	updateReleases: function(){
 		var self = this;
 		if(!self.data.releases || self.data.releases.length === 0) return;

couchpotato/static/scripts/block.js

@@ -1,6 +1,6 @@
 var BlockBase = new Class({
 
-	Implements: [Options, Events],
+	Implements: [Options],
 
 	options: {},
 

couchpotato/static/scripts/block/menu.js

@@ -1,6 +1,7 @@
 var BlockMenu = new Class({
 
 	Extends: BlockBase,
+	Implements: [Options, Events],
 
 	options: {
 		'class': 'menu'

couchpotato/static/scripts/combined.base.min.js

@@ -779,7 +779,7 @@ var PageBase = new Class({
 var Page = {};
 
 var BlockBase = new Class({
-    Implements: [ Options, Events ],
+    Implements: [ Options ],
     options: {},
     initialize: function(parent, options) {
         var self = this;
@@ -866,6 +866,7 @@ var BlockFooter = new Class({
 
 var BlockMenu = new Class({
     Extends: BlockBase,
+    Implements: [ Options, Events ],
     options: {
         class: "menu"
     },

couchpotato/static/scripts/combined.plugins.min.js

@@ -423,7 +423,6 @@ var MovieList = new Class({
     Implements: [ Events, Options ],
     options: {
         api_call: "media.list",
-        animated_in: false,
         navigation: true,
         limit: 50,
         load_more: true,
@@ -455,7 +454,28 @@ var MovieList = new Class({
             styles: {
                 display: "none"
             }
-        }) : null, self.movie_list = new Element("div"), self.load_more = self.options.load_more ? new Element("a.load_more", {
+        }) : null, self.movie_list = new Element("div", {
+            events: {
+                "click:relay(.movie)": function(e, el) {
+                    el.retrieve("klass").onClick(e);
+                },
+                "mouseenter:relay(.movie)": function(e, el) {
+                    el.retrieve("klass").onMouseenter(e);
+                },
+                "mouseleave:relay(.movie)": function(e, el) {
+                    el.retrieve("klass").onMouseleave(e);
+                },
+                "click:relay(.movie .action)": function(e) {
+                    e.stopPropagation();
+                },
+                "change:relay(.movie input)": function(e, el) {
+                    el = el.getParent();
+                    var klass = el.retrieve("klass");
+                    klass.fireEvent("select");
+                    klass.select(klass.select_checkbox.get("checked"));
+                }
+            }
+        }), self.load_more = self.options.load_more ? new Element("a.load_more", {
             events: {
                 click: self.loadMore.bind(self)
             }
@@ -510,9 +530,7 @@ var MovieList = new Class({
             self.load_more.hide();
             self.scrollspy.stop();
         }
-        Object.each(movies, function(movie, nr) {
+        self.createMovie(movies, "bottom");
-            self.createMovie(movie, "bottom", nr);
-        });
         self.total_movies += total;
         self.setCounter(total);
         self.calculateSelected();
@@ -549,34 +567,25 @@ var MovieList = new Class({
         }
     },
     createMovie: function(movie, inject_at, nr) {
-        var self = this, animate = self.options.animated_in && !App.mobile_screen && self.current_view == "thumb" && nr !== undefined;
+        var self = this, movies = Array.isArray(movie) ? movie : [ movie ], movie_els = [];
-        var m = new Movie(self, {
+        inject_at = inject_at || "bottom";
-            actions: self.options.actions,
+        movies.each(function(movie, nr) {
-            view: self.current_view,
+            var m = new Movie(self, {
-            onSelect: self.calculateSelected.bind(self)
+                actions: self.options.actions,
-        }, movie);
+                view: self.current_view,
-        var el = $(m);
+                onSelect: self.calculateSelected.bind(self)
-        if (animate) {
+            }, movie);
-            dynamics.css(el, {
+            var el = $(m);
-                opacity: 0,
+            if (inject_at === "bottom") {
-                translateY: 150
+                movie_els.push(el);
-            });
+            } else {
-        }
+                el.inject(self.movie_list, inject_at);
-        el.inject(self.movie_list, inject_at || "bottom");
+            }
-        m.fireEvent("injected");
+            self.movies.include(m);
-        self.movies.include(m);
+            self.movies_added[movie._id] = true;
-        self.movies_added[movie._id] = true;
+        });
-        if (animate) {
+        if (movie_els.length > 0) {
-            dynamics.animate(el, {
+            $(self.movie_list).adopt(movie_els);
-                opacity: 1,
-                translateY: 0
-            }, {
-                type: dynamics.spring,
-                frequency: 200,
-                friction: 300,
-                duration: 1200,
-                delay: 100 + nr * 20
-            });
         }
     },
     createNavigation: function() {
@@ -1742,6 +1751,7 @@ MA.MarkAsDone = new Class({
 
 var Movie = new Class({
     Extends: BlockBase,
+    Implements: [ Options, Events ],
     actions: null,
     details: null,
     initialize: function(list, options, data) {
@@ -1749,67 +1759,9 @@ var Movie = new Class({
         self.actions = [];
         self.data = data;
         self.list = list;
-        var buttons = [];
+        self.buttons = [];
-        self.el = new Element("a.movie", {
+        self.el = new Element("a.movie");
-            events: {
+        self.el.store("klass", self);
-                click: function(e) {
-                    if (e.target.get("tag") != "input") {
-                        e.preventDefault();
-                        self.openDetails();
-                    }
-                },
-                mouseenter: function() {
-                    if (self.actions.length <= 0) {
-                        self.options.actions.each(function(a) {
-                            var action = new a(self), button = action.getButton();
-                            if (button) {
-                                self.actions_el.grab(button);
-                                buttons.push(button);
-                            }
-                            self.actions.push(action);
-                        });
-                    }
-                    if (App.mobile_screen) return;
-                    if (list.current_view == "thumb") {
-                        dynamics.css(self.el, {
-                            scale: 1,
-                            opacity: 1
-                        });
-                        dynamics.animate(self.el, {
-                            scale: .9
-                        }, {
-                            type: dynamics.bounce
-                        });
-                        buttons.each(function(el, nr) {
-                            dynamics.css(el, {
-                                opacity: 0,
-                                translateY: 50
-                            });
-                            dynamics.animate(el, {
-                                opacity: 1,
-                                translateY: 0
-                            }, {
-                                type: dynamics.spring,
-                                frequency: 200,
-                                friction: 300,
-                                duration: 800,
-                                delay: 100 + nr * 40
-                            });
-                        });
-                    }
-                },
-                mouseleave: function() {
-                    if (App.mobile_screen) return;
-                    if (list.current_view == "thumb") {
-                        dynamics.animate(self.el, {
-                            scale: 1
-                        }, {
-                            type: dynamics.spring
-                        });
-                    }
-                }
-            }
-        });
         self.profile = Quality.getProfile(data.profile_id) || {};
         self.category = CategoryList.getCategory(data.category_id) || {};
         self.parent(self, options);
@@ -1962,20 +1914,7 @@ var Movie = new Class({
                 }
             });
         }
-        self.el.adopt(self.select_checkbox = new Element("input[type=checkbox]", {
+        self.el.adopt(self.select_checkbox = new Element("input[type=checkbox]"), self.thumbnail = thumbnail.grab(self.actions_el = new Element("div.actions")), self.data_container = new Element("div.data.light").grab(self.info_container = new Element("div.info").adopt(new Element("div.title").adopt(self.title = new Element("span", {
-            events: {
-                change: function() {
-                    self.fireEvent("select");
-                    self.select(self.select_checkbox.get("checked"));
-                }
-            }
-        }), self.thumbnail = thumbnail.grab(self.actions_el = new Element("div.actions", {
-            events: {
-                "click:relay(.action)": function(e) {
-                    e.stopPropagation();
-                }
-            }
-        })), self.data_container = new Element("div.data.light").adopt(self.info_container = new Element("div.info").adopt(new Element("div.title").adopt(self.title = new Element("span", {
             text: self.getTitle() || "n/a"
         }), self.year = new Element("div.year", {
             text: self.data.info.year || "n/a"
@@ -1993,6 +1932,65 @@ var Movie = new Class({
         });
         self.updateReleases();
     },
+    onClick: function(e) {
+        var self = this;
+        if (e.target.get("tag") != "input") {
+            e.preventDefault();
+            self.openDetails();
+        }
+    },
+    onMouseenter: function() {
+        var self = this;
+        if (self.actions.length <= 0) {
+            self.options.actions.each(function(a) {
+                var action = new a(self), button = action.getButton();
+                if (button) {
+                    self.actions_el.grab(button);
+                    self.buttons.push(button);
+                }
+                self.actions.push(action);
+            });
+        }
+        if (App.mobile_screen) return;
+        if (self.list.current_view == "thumb") {
+            dynamics.css(self.el, {
+                scale: 1,
+                opacity: 1
+            });
+            dynamics.animate(self.el, {
+                scale: .9
+            }, {
+                type: dynamics.bounce
+            });
+            self.buttons.each(function(el, nr) {
+                dynamics.css(el, {
+                    opacity: 0,
+                    translateY: 50
+                });
+                dynamics.animate(el, {
+                    opacity: 1,
+                    translateY: 0
+                }, {
+                    type: dynamics.spring,
+                    frequency: 200,
+                    friction: 300,
+                    duration: 800,
+                    delay: 100 + nr * 40
+                });
+            });
+        }
+    },
+    onMouseleave: function() {
+        var self = this;
+        if (App.mobile_screen) return;
+        if (self.list.current_view == "thumb") {
+            dynamics.animate(self.el, {
+                scale: 1
+            }, {
+                type: dynamics.spring
+            });
+        }
+    },
     updateReleases: function() {
         var self = this;
         if (!self.data.releases || self.data.releases.length === 0) return;