sliding in and out

This commit is contained in:
Peter Cottle 2013-01-03 18:12:02 -08:00
parent e06a7efbfc
commit b945037f34
5 changed files with 128 additions and 21 deletions

View file

@ -4522,12 +4522,6 @@ var Sandbox = Backbone.View.extend({
},
initGitShim: function(options) {
/*
this.gitShim = new GitShim({
beforeCB: function() { console.log('before'); },
afterCB: function() { console.log('after'); },
afterDeferHandler: function(deferred) { deferred.resolve(); },
});*/
},
takeControl: function() {
@ -4767,7 +4761,7 @@ var Level = Sandbox.extend({
this.goalTreeString = options.level.goalTree;
if (!this.goalTreeString) {
console.warn('woah no goal, using random other one');
this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C30"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C0"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
//this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C0"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
}
@ -4782,6 +4776,21 @@ var Level = Sandbox.extend({
el: options.el || this.getDefaultVisEl(),
treeString: options.level.startTree
});
//this.initGoalVisualization(options);
},
getDefaultGoalVisEl: function() {
return $('#commandLineHistory');
},
initGoalVisualization: function(options) {
this.goalVisualization = new Visualization({
el: options.goalEl || this.getDefaultGoalVisEl(),
treeString: this.goalTreeString,
wait: true,
slideOut: true
});
},
initParseWaterfall: function(options) {
@ -6503,6 +6512,9 @@ var Visualization = Backbone.View.extend({
if (!options.wait) {
this.fadeTreeIn();
}
if (options.slideOut) {
this.slideOut();
}
this.customEvents.trigger('gitEngineReady');
},
@ -6515,6 +6527,28 @@ var Visualization = Backbone.View.extend({
$(this.paper.canvas).css('opacity', 0);
},
slideOut: function() {
this.toggleSlide(true);
},
slideIn: function() {
this.toggleSlide(false);
},
toggleSlide: function(value) {
// no classes on svg :-/
//$(this.paper.canvas).toggleClass('slideOut', value);
var transform = (value) ? 'translate3d(-150%, 0, 0)' : 'translate3d(0,0,0)';
$(this.paper.canvas).css({
'-webkit-transform': transform,
'-moz-transform': transform,
'-ms-transform': transform,
'-o-transform': transform,
'transform': transform
});
},
getAnimationTime: function() { return 300; },
fadeTreeIn: function() {
@ -17295,7 +17329,7 @@ var Level = Sandbox.extend({
this.goalTreeString = options.level.goalTree;
if (!this.goalTreeString) {
console.warn('woah no goal, using random other one');
this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C30"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C0"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
//this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C0"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
}
@ -17310,6 +17344,21 @@ var Level = Sandbox.extend({
el: options.el || this.getDefaultVisEl(),
treeString: options.level.startTree
});
//this.initGoalVisualization(options);
},
getDefaultGoalVisEl: function() {
return $('#commandLineHistory');
},
initGoalVisualization: function(options) {
this.goalVisualization = new Visualization({
el: options.goalEl || this.getDefaultGoalVisEl(),
treeString: this.goalTreeString,
wait: true,
slideOut: true
});
},
initParseWaterfall: function(options) {
@ -17550,12 +17599,6 @@ var Sandbox = Backbone.View.extend({
},
initGitShim: function(options) {
/*
this.gitShim = new GitShim({
beforeCB: function() { console.log('before'); },
afterCB: function() { console.log('after'); },
afterDeferHandler: function(deferred) { deferred.resolve(); },
});*/
},
takeControl: function() {
@ -21690,6 +21733,9 @@ var Visualization = Backbone.View.extend({
if (!options.wait) {
this.fadeTreeIn();
}
if (options.slideOut) {
this.slideOut();
}
this.customEvents.trigger('gitEngineReady');
},
@ -21702,6 +21748,28 @@ var Visualization = Backbone.View.extend({
$(this.paper.canvas).css('opacity', 0);
},
slideOut: function() {
this.toggleSlide(true);
},
slideIn: function() {
this.toggleSlide(false);
},
toggleSlide: function(value) {
// no classes on svg :-/
//$(this.paper.canvas).toggleClass('slideOut', value);
var transform = (value) ? 'translate3d(-150%, 0, 0)' : 'translate3d(0,0,0)';
$(this.paper.canvas).css({
'-webkit-transform': transform,
'-moz-transform': transform,
'-ms-transform': transform,
'-o-transform': transform,
'transform': transform
});
},
getAnimationTime: function() { return 300; },
fadeTreeIn: function() {

View file

@ -34,7 +34,7 @@ var Level = Sandbox.extend({
this.goalTreeString = options.level.goalTree;
if (!this.goalTreeString) {
console.warn('woah no goal, using random other one');
this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C30"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C0"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
//this.goalTreeString = '{"branches":{"master":{"target":"C2","id":"master"}},"commits":{"C0":{"parents":[],"id":"C0","rootCommit":true},"C1":{"parents":["C0"],"id":"C1"},"C2":{"parents":["C1"],"id":"C2"}},"HEAD":{"target":"master","id":"HEAD"}}';
}
@ -49,6 +49,21 @@ var Level = Sandbox.extend({
el: options.el || this.getDefaultVisEl(),
treeString: options.level.startTree
});
//this.initGoalVisualization(options);
},
getDefaultGoalVisEl: function() {
return $('#commandLineHistory');
},
initGoalVisualization: function(options) {
this.goalVisualization = new Visualization({
el: options.goalEl || this.getDefaultGoalVisEl(),
treeString: this.goalTreeString,
wait: true,
slideOut: true
});
},
initParseWaterfall: function(options) {

View file

@ -54,12 +54,6 @@ var Sandbox = Backbone.View.extend({
},
initGitShim: function(options) {
/*
this.gitShim = new GitShim({
beforeCB: function() { console.log('before'); },
afterCB: function() { console.log('after'); },
afterDeferHandler: function(deferred) { deferred.resolve(); },
});*/
},
takeControl: function() {

View file

@ -64,6 +64,9 @@ var Visualization = Backbone.View.extend({
if (!options.wait) {
this.fadeTreeIn();
}
if (options.slideOut) {
this.slideOut();
}
this.customEvents.trigger('gitEngineReady');
},
@ -76,6 +79,28 @@ var Visualization = Backbone.View.extend({
$(this.paper.canvas).css('opacity', 0);
},
slideOut: function() {
this.toggleSlide(true);
},
slideIn: function() {
this.toggleSlide(false);
},
toggleSlide: function(value) {
// no classes on svg :-/
//$(this.paper.canvas).toggleClass('slideOut', value);
var transform = (value) ? 'translate3d(-150%, 0, 0)' : 'translate3d(0,0,0)';
$(this.paper.canvas).css({
'-webkit-transform': transform,
'-moz-transform': transform,
'-ms-transform': transform,
'-o-transform': transform,
'transform': transform
});
},
getAnimationTime: function() { return 300; },
fadeTreeIn: function() {

View file

@ -68,6 +68,7 @@ body,
transition: background 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
body svg,
.transitionTransform {
-webkit-transition: -webkit-transform 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: -moz-transform 700ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
@ -131,6 +132,10 @@ body,
background: #EEE;
}
svg.slideOut {
-webkit-transform: translate3d(-150%, 0, 0);
}
/* Toolbar */
div.toolbar {