From a3a0419902fd84ded2fef7edd860791bbd15f71c Mon Sep 17 00:00:00 2001 From: Adrian Pardini Date: Fri, 20 Dec 2013 13:15:55 -0300 Subject: [PATCH 1/5] router: add pre and post route signals and promise to handle transitions --- public/js/main.js | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/public/js/main.js b/public/js/main.js index fa245d9..a5de592 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -5,6 +5,9 @@ window.appstatus = new App.Status(); window.framestatus = new App.ProgressStatus(); var AppRouter = Backbone.Router.extend({ + currentView: null, + currentHash: Backbone.history.getHash(), + promises: [], routes: { "media" : "list", @@ -27,7 +30,6 @@ var AppRouter = Backbone.Router.extend({ console.log ('got medias:moved from server', move); }); - this.currentView = null; this.currentHash = Backbone.history.getHash(); this.headerView = new HeaderView({appstatus: window.appstatus, framestatus: window.framestatus}); @@ -118,13 +120,21 @@ var AppRouter = Backbone.Router.extend({ var args = router._extractParameters(route, fragment); var ok = function() { - if (callback) { - router.currentView = callback.apply(router, args); - } - router.trigger.apply(router, ['route:' + name].concat(args)); - router.trigger('route', name, args); - Backbone.history.trigger('route', router, name, args); - router.currentHash = Backbone.history.getHash(); + router.trigger('preroute', name, args); + var inner = function() { + if (callback) { + router.currentView = callback.apply(router, args); + } + router.trigger.apply(router, ['route:' + name].concat(args)); + router.trigger('route', name, args); + Backbone.history.trigger('route', router, name, args); + router.currentHash = Backbone.history.getHash(); + router.trigger('postroute', name, args); + + router.promises.splice(0, router.promises.length); + }; + + $.when.apply($, this.promises).done(inner); }; var cancel = function() { From 6ef249acab672c6d9ba535d185338a9be67106c9 Mon Sep 17 00:00:00 2001 From: Adrian Pardini Date: Tue, 14 Jan 2014 11:24:00 -0300 Subject: [PATCH 2/5] router: pass old and new view index to pre/postroute signals. --- public/js/main.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/public/js/main.js b/public/js/main.js index a5de592..1eeb0dd 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -7,6 +7,7 @@ window.framestatus = new App.ProgressStatus(); var AppRouter = Backbone.Router.extend({ currentView: null, currentHash: Backbone.history.getHash(), + viewNames: [], promises: [], routes: { @@ -31,6 +32,7 @@ var AppRouter = Backbone.Router.extend({ }); this.currentHash = Backbone.history.getHash(); + this.viewNames = _.toArray(this.routes); this.headerView = new HeaderView({appstatus: window.appstatus, framestatus: window.framestatus}); @@ -119,17 +121,23 @@ var AppRouter = Backbone.Router.extend({ Backbone.history.route(route, function(fragment) { var args = router._extractParameters(route, fragment); + var oldidx = router.currentView && router.currentView.idx || 0; + var newidx = router.viewNames.indexOf(name); + var ok = function() { - router.trigger('preroute', name, args); + router.trigger('preroute', name, oldidx, newidx, args); var inner = function() { if (callback) { router.currentView = callback.apply(router, args); + if (router.currentView) { + router.currentView.idx = newidx; + } } router.trigger.apply(router, ['route:' + name].concat(args)); router.trigger('route', name, args); Backbone.history.trigger('route', router, name, args); router.currentHash = Backbone.history.getHash(); - router.trigger('postroute', name, args); + router.trigger('postroute', name, oldidx, newidx, args); router.promises.splice(0, router.promises.length); }; From 8080b02c0368e8f4d8246374fee03471dfa4bf22 Mon Sep 17 00:00:00 2001 From: Adrian Pardini Date: Tue, 14 Jan 2014 11:45:18 -0300 Subject: [PATCH 3/5] router: adds slide transition between views. --- public/js/main.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/public/js/main.js b/public/js/main.js index 1eeb0dd..09253a8 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -36,6 +36,22 @@ var AppRouter = Backbone.Router.extend({ this.headerView = new HeaderView({appstatus: window.appstatus, framestatus: window.framestatus}); + this.on('preroute', function(route, oldidx, newidx, args) { + if (newidx > oldidx) { + this.promises.push($('#content').toggle('slide', {direction: 'left'}).promise()); + } else { + this.promises.push($('#content').toggle('slide', {direction: 'right'}).promise()); + } + }); + + this.on('postroute', function(route, oldidx, newidx, args) { + if (newidx > oldidx) { + $('#content').toggle('slide', {direction: 'right'}); + } else { + $('#content').toggle('slide', {direction: 'left'}); + } + }); + this.on('route', function(route) { menuItem = { playout: 'playout-menu', From c0d7c3d41e6d574576452b5b700fb475aebde25a Mon Sep 17 00:00:00 2001 From: Adrian Pardini Date: Tue, 14 Jan 2014 11:39:05 -0300 Subject: [PATCH 4/5] router: reorder views to match position in header. --- public/js/main.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/public/js/main.js b/public/js/main.js index 09253a8..d4b528e 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -12,17 +12,19 @@ var AppRouter = Backbone.Router.extend({ routes: { "media" : "list", - "universe" : "universe", - "media/add" : "upload", "media/edit" : "editMedia", - "media/:id" : "mediaDetails", - "program/:id" : "listProgram", - "playout" : "playout", "schedule" : "schedule", + "editor" : "editor", "admin" : "conf", + + "media/:id" : "mediaDetails", + + "universe" : "universe", + "media/add" : "upload", + "program/:id" : "listProgram", + "about" : "about", - "editor" : "editor", }, initialize: function () { From 42dea3846740b9cabe3c3ee4275c5b24ae10acb1 Mon Sep 17 00:00:00 2001 From: Adrian Pardini Date: Mon, 30 Dec 2013 21:52:56 -0300 Subject: [PATCH 5/5] transitions: stop previous animations. Previously if we switched views before the transition finished #content wound up in an inconsistent state or outside the viewport. We need to use .finish() when we upgrade jQuery to 1.9 --- public/js/main.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/js/main.js b/public/js/main.js index d4b528e..71b00af 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -39,6 +39,8 @@ var AppRouter = Backbone.Router.extend({ this.headerView = new HeaderView({appstatus: window.appstatus, framestatus: window.framestatus}); this.on('preroute', function(route, oldidx, newidx, args) { + // XXX: change this to .finish() when we upgrade jQuery to 1.9 + $('#content').stop(true, true); if (newidx > oldidx) { this.promises.push($('#content').toggle('slide', {direction: 'left'}).promise()); } else {