mirror of
https://github.com/pcottle/learnGitBranching.git
synced 2025-06-26 16:08:34 +02:00
sliding in and out
This commit is contained in:
parent
e06a7efbfc
commit
b945037f34
5 changed files with 128 additions and 21 deletions
|
@ -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() {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue