Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds transitions when switching views. #208

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Adds transitions when switching views. #208

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a3a0419
router: add pre and post route signals and promise to handle transitions
pardo-bsso Dec 20, 2013
6ef249a
router: pass old and new view index to pre/postroute signals.
pardo-bsso Jan 14, 2014
8080b02
router: adds slide transition between views.
pardo-bsso Jan 14, 2014
c0d7c3d
router: reorder views to match position in header.
pardo-bsso Jan 14, 2014
42dea38
transitions: stop previous animations.
pardo-bsso Dec 31, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 52 additions & 14 deletions public/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,26 @@ window.appstatus = new App.Status();
window.framestatus = new App.ProgressStatus();

var AppRouter = Backbone.Router.extend({
currentView: null,
currentHash: Backbone.history.getHash(),
viewNames: [],
promises: [],

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 () {
Expand All @@ -27,11 +33,29 @@ var AppRouter = Backbone.Router.extend({
console.log ('got medias:moved from server', move);
});

this.currentView = null;
this.currentHash = Backbone.history.getHash();
this.viewNames = _.toArray(this.routes);

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 {
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',
Expand Down Expand Up @@ -117,14 +141,28 @@ 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() {
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, 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, oldidx, newidx, args);

router.promises.splice(0, router.promises.length);
};

$.when.apply($, this.promises).done(inner);
};

var cancel = function() {
Expand Down