From b945037f34f4f4890365a95f6165d0ae3af43031 Mon Sep 17 00:00:00 2001 From: Peter Cottle Date: Thu, 3 Jan 2013 18:12:02 -0800 Subject: [PATCH] sliding in and out --- build/bundle.js | 96 ++++++++++++++++++++++++++++----- src/js/level/index.js | 17 +++++- src/js/level/sandbox.js | 6 --- src/js/visuals/visualization.js | 25 +++++++++ src/style/main.css | 5 ++ 5 files changed, 128 insertions(+), 21 deletions(-) diff --git a/build/bundle.js b/build/bundle.js index ad3a4c02..2e3c32ca 100644 --- a/build/bundle.js +++ b/build/bundle.js @@ -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() { diff --git a/src/js/level/index.js b/src/js/level/index.js index e460c7a1..752c417f 100644 --- a/src/js/level/index.js +++ b/src/js/level/index.js @@ -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) { diff --git a/src/js/level/sandbox.js b/src/js/level/sandbox.js index bf48dba4..c3c33f36 100644 --- a/src/js/level/sandbox.js +++ b/src/js/level/sandbox.js @@ -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() { diff --git a/src/js/visuals/visualization.js b/src/js/visuals/visualization.js index 7e2f76a0..624955e5 100644 --- a/src/js/visuals/visualization.js +++ b/src/js/visuals/visualization.js @@ -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() { diff --git a/src/style/main.css b/src/style/main.css index bd27f479..be8834ed 100644 --- a/src/style/main.css +++ b/src/style/main.css @@ -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 {