diff --git a/couchpotato/core/media/movie/_base/static/list.js b/couchpotato/core/media/movie/_base/static/list.js index 2644304..c28baf5 100644 --- a/couchpotato/core/media/movie/_base/static/list.js +++ b/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(movie, 'bottom', nr); - }); + self.createMovie(movies, 'bottom'); 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; - var m = new Movie(self, { - 'actions': self.options.actions, - 'view': self.current_view, - 'onSelect': self.calculateSelected.bind(self) - }, movie); - - var el = $(m); - - if(animate) { - dynamics.css(el, { - opacity: 0, - translateY: 150 - }); - } + movies = Array.isArray(movie) ? movie : [movie], + movie_els = []; + inject_at = inject_at || 'bottom'; - 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); - self.movies_added[movie._id] = true; + var el = $(m); - if(animate){ - dynamics.animate(el, { - opacity: 1, - translateY: 0 - }, { - type: dynamics.spring, - frequency: 200, - friction: 300, - duration: 1200, - delay: 100 + (nr * 20) - }); + if(inject_at === 'bottom'){ + movie_els.push(el); + } + else { + el.inject(self.movie_list, inject_at); + } + + self.movies.include(m); + self.movies_added[movie._id] = true; + }); + + if(movie_els.length > 0){ + $(self.movie_list).adopt(movie_els); } + }, createNavigation: function(){ diff --git a/couchpotato/core/media/movie/_base/static/movie.js b/couchpotato/core/media/movie/_base/static/movie.js index 9c4a07e..9d0a893 100644 --- a/couchpotato/core/media/movie/_base/static/movie.js +++ b/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', { - 'events': { - '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.el = new Element('a.movie'); + self.el.store('klass', self); 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]', { - 'events': { - 'change': function(){ - self.fireEvent('select'); - self.select(self.select_checkbox.get('checked')); - } - } - }), + self.select_checkbox = new Element('input[type=checkbox]'), self.thumbnail = thumbnail.grab( - self.actions_el = new Element('div.actions', { - 'events': { - 'click:relay(.action)': function(e){ - (e).stopPropagation(); - } - } - }) + self.actions_el = new Element('div.actions') ), - 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; diff --git a/couchpotato/static/scripts/block.js b/couchpotato/static/scripts/block.js index dce3845..6f18bae 100644 --- a/couchpotato/static/scripts/block.js +++ b/couchpotato/static/scripts/block.js @@ -1,6 +1,6 @@ var BlockBase = new Class({ - Implements: [Options, Events], + Implements: [Options], options: {}, diff --git a/couchpotato/static/scripts/block/menu.js b/couchpotato/static/scripts/block/menu.js index 650e687..b800e5a 100644 --- a/couchpotato/static/scripts/block/menu.js +++ b/couchpotato/static/scripts/block/menu.js @@ -1,6 +1,7 @@ var BlockMenu = new Class({ Extends: BlockBase, + Implements: [Options, Events], options: { 'class': 'menu' diff --git a/couchpotato/static/scripts/combined.base.min.js b/couchpotato/static/scripts/combined.base.min.js index e7bf473..26bfc22 100644 --- a/couchpotato/static/scripts/combined.base.min.js +++ b/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" }, diff --git a/couchpotato/static/scripts/combined.plugins.min.js b/couchpotato/static/scripts/combined.plugins.min.js index 2ccba96..2673fed 100644 --- a/couchpotato/static/scripts/combined.plugins.min.js +++ b/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(movie, "bottom", nr); - }); + self.createMovie(movies, "bottom"); 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 m = new Movie(self, { - actions: self.options.actions, - 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"); - m.fireEvent("injected"); - self.movies.include(m); - self.movies_added[movie._id] = true; - if (animate) { - dynamics.animate(el, { - opacity: 1, - translateY: 0 - }, { - type: dynamics.spring, - frequency: 200, - friction: 300, - duration: 1200, - delay: 100 + nr * 20 - }); + var self = this, movies = Array.isArray(movie) ? movie : [ movie ], movie_els = []; + inject_at = inject_at || "bottom"; + movies.each(function(movie, nr) { + var m = new Movie(self, { + actions: self.options.actions, + view: self.current_view, + onSelect: self.calculateSelected.bind(self) + }, movie); + var el = $(m); + if (inject_at === "bottom") { + movie_els.push(el); + } else { + el.inject(self.movie_list, inject_at); + } + self.movies.include(m); + self.movies_added[movie._id] = true; + }); + if (movie_els.length > 0) { + $(self.movie_list).adopt(movie_els); } }, 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.el = new Element("a.movie", { - events: { - 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.buttons = []; + self.el = new Element("a.movie"); + self.el.store("klass", self); 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]", { - 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", { + 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", { 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;