From 096ec3239312a7123c99413298daf0c515435b22 Mon Sep 17 00:00:00 2001 From: Peter Cottle Date: Fri, 4 Jan 2013 14:09:16 -0800 Subject: [PATCH] woof finally got git visualization much more flexible with abso or container positioning --- build/bundle.js | 124 +++++++++++++++++++------------- src/index.html | 33 ++++++++- src/js/level/index.js | 11 +-- src/js/views/index.js | 24 ++++++- src/js/visuals/visualization.js | 27 +++---- src/style/main.css | 49 ++++++++++--- 6 files changed, 183 insertions(+), 85 deletions(-) diff --git a/build/bundle.js b/build/bundle.js index 40a9a664..2a857814 100644 --- a/build/bundle.js +++ b/build/bundle.js @@ -4740,9 +4740,9 @@ var DisabledMap = require('../level/disabledMap').DisabledMap; var Command = require('../models/commandModel').Command; var GitShim = require('../git/gitShim').GitShim; -var ModalTerminal = require('../views').ModalTerminal; var ModalAlert = require('../views').ModalAlert; var MultiView = require('../views/multiView').MultiView; +var CanvasTerminalHolder = require('../views').CanvasTerminalHolder; var TreeCompare = require('../git/treeCompare').TreeCompare; @@ -4785,15 +4785,16 @@ var Level = Sandbox.extend({ initGoalVisualization: function(options) { // first we make the goal visualization holder + this.goalCanvasHolder = new CanvasTerminalHolder(); // then we make a visualization. the "el" here is the element to // track for size information. the container is where the canvas will be placed this.goalVis = new Visualization({ - el: options.goalEl || this.getDefaultGoalVisEl(), - treeString: this.goalTreeString, - wait: true, - slideOut: true + el: this.goalCanvasHolder.getCanvasLocation(), + containerElement: this.goalCanvasHolder.getCanvasLocation(), + treeString: this.goalTreeString }); + this.goalVis.customEvents.on('paperReady', _.bind(function() { // this is tricky. at this point we have a canvas that has 0 // opacity but its floating in front of our command history. we need @@ -6488,6 +6489,7 @@ var Visualization = Backbone.View.extend({ options = options || {}; this.options = options; this.customEvents = _.clone(Backbone.Events); + this.containerElement = options.containerElement; var _this = this; // we want to add our canvas somewhere @@ -6538,13 +6540,7 @@ var Visualization = Backbone.View.extend({ this.shown = false; this.setTreeOpacity(0); - - if (!options.wait) { - this.fadeTreeIn(); - } - if (options.slideOut) { - this.slideOut(); - } + this.fadeTreeIn(); this.customEvents.trigger('gitEngineReady'); this.customEvents.trigger('paperReady'); @@ -6570,17 +6566,13 @@ var Visualization = Backbone.View.extend({ }, toggleSlide: function(value) { - // no classes on svg :-/ - //$(this.paper.canvas).toggleClass('slideOut', value); - var transform = (value) ? 'translate3d(-150%, 0, 0)' : 'translate3d(0,0,0)'; + if (!this.containerElement) { + console.warn('cant slide with absolute positioning'); + return; + } - $(this.paper.canvas).css({ - '-webkit-transform': transform, - '-moz-transform': transform, - '-ms-transform': transform, - '-o-transform': transform, - 'transform': transform - }); + // no classes on svg :-/ + $(this.containerElement).toggleClass('slideOut', value); }, getAnimationTime: function() { return 300; }, @@ -6630,9 +6622,9 @@ var Visualization = Backbone.View.extend({ // if we don't have a container, we need to set our // position absolutely to whatever we are tracking if (!this.options.containerElement) { - var left = el.offsetLeft; var top = el.offsetTop; + $(this.paper.canvas).css({ position: 'absolute', left: left + 'px', @@ -9390,7 +9382,7 @@ var ModalTerminal = ContainedBase.extend({ }, getInsideElement: function() { - return this.$('#inside'); + return this.$('.inside'); } }); @@ -9463,6 +9455,26 @@ var ZoomAlertWindow = Backbone.View.extend({ } }); +var CanvasTerminalHolder = BaseView.extend({ + tagName: 'div', + className: 'canvasTerminalHolder box flex1', + template: _.template($('#terminal-window-bare-template').html()), + + initialize: function(options) { + options = options || {}; + this.destination = $('body'); + this.JSON = { + title: options.title || 'Goal To Reach' + }; + + this.render(); + }, + + getCanvasLocation: function() { + return this.$('div.inside')[0]; + } +}); + exports.ModalView = ModalView; exports.ModalTerminal = ModalTerminal; exports.ModalAlert = ModalAlert; @@ -9471,6 +9483,8 @@ exports.ConfirmCancelView = ConfirmCancelView; exports.LeftRightView = LeftRightView; exports.ZoomAlertWindow = ZoomAlertWindow; +exports.CanvasTerminalHolder = CanvasTerminalHolder; + }); @@ -17382,9 +17396,9 @@ var DisabledMap = require('../level/disabledMap').DisabledMap; var Command = require('../models/commandModel').Command; var GitShim = require('../git/gitShim').GitShim; -var ModalTerminal = require('../views').ModalTerminal; var ModalAlert = require('../views').ModalAlert; var MultiView = require('../views/multiView').MultiView; +var CanvasTerminalHolder = require('../views').CanvasTerminalHolder; var TreeCompare = require('../git/treeCompare').TreeCompare; @@ -17427,15 +17441,16 @@ var Level = Sandbox.extend({ initGoalVisualization: function(options) { // first we make the goal visualization holder + this.goalCanvasHolder = new CanvasTerminalHolder(); // then we make a visualization. the "el" here is the element to // track for size information. the container is where the canvas will be placed this.goalVis = new Visualization({ - el: options.goalEl || this.getDefaultGoalVisEl(), - treeString: this.goalTreeString, - wait: true, - slideOut: true + el: this.goalCanvasHolder.getCanvasLocation(), + containerElement: this.goalCanvasHolder.getCanvasLocation(), + treeString: this.goalTreeString }); + this.goalVis.customEvents.on('paperReady', _.bind(function() { // this is tricky. at this point we have a canvas that has 0 // opacity but its floating in front of our command history. we need @@ -19135,7 +19150,7 @@ var ModalTerminal = ContainedBase.extend({ }, getInsideElement: function() { - return this.$('#inside'); + return this.$('.inside'); } }); @@ -19208,6 +19223,26 @@ var ZoomAlertWindow = Backbone.View.extend({ } }); +var CanvasTerminalHolder = BaseView.extend({ + tagName: 'div', + className: 'canvasTerminalHolder box flex1', + template: _.template($('#terminal-window-bare-template').html()), + + initialize: function(options) { + options = options || {}; + this.destination = $('body'); + this.JSON = { + title: options.title || 'Goal To Reach' + }; + + this.render(); + }, + + getCanvasLocation: function() { + return this.$('div.inside')[0]; + } +}); + exports.ModalView = ModalView; exports.ModalTerminal = ModalTerminal; exports.ModalAlert = ModalAlert; @@ -19216,6 +19251,8 @@ exports.ConfirmCancelView = ConfirmCancelView; exports.LeftRightView = LeftRightView; exports.ZoomAlertWindow = ZoomAlertWindow; +exports.CanvasTerminalHolder = CanvasTerminalHolder; + }); require("/src/js/views/index.js"); @@ -21788,6 +21825,7 @@ var Visualization = Backbone.View.extend({ options = options || {}; this.options = options; this.customEvents = _.clone(Backbone.Events); + this.containerElement = options.containerElement; var _this = this; // we want to add our canvas somewhere @@ -21838,13 +21876,7 @@ var Visualization = Backbone.View.extend({ this.shown = false; this.setTreeOpacity(0); - - if (!options.wait) { - this.fadeTreeIn(); - } - if (options.slideOut) { - this.slideOut(); - } + this.fadeTreeIn(); this.customEvents.trigger('gitEngineReady'); this.customEvents.trigger('paperReady'); @@ -21870,17 +21902,13 @@ var Visualization = Backbone.View.extend({ }, toggleSlide: function(value) { - // no classes on svg :-/ - //$(this.paper.canvas).toggleClass('slideOut', value); - var transform = (value) ? 'translate3d(-150%, 0, 0)' : 'translate3d(0,0,0)'; + if (!this.containerElement) { + console.warn('cant slide with absolute positioning'); + return; + } - $(this.paper.canvas).css({ - '-webkit-transform': transform, - '-moz-transform': transform, - '-ms-transform': transform, - '-o-transform': transform, - 'transform': transform - }); + // no classes on svg :-/ + $(this.containerElement).toggleClass('slideOut', value); }, getAnimationTime: function() { return 300; }, @@ -21930,9 +21958,9 @@ var Visualization = Backbone.View.extend({ // if we don't have a container, we need to set our // position absolutely to whatever we are tracking if (!this.options.containerElement) { - var left = el.offsetLeft; var top = el.offsetTop; + $(this.paper.canvas).css({ position: 'absolute', left: left + 'px', diff --git a/src/index.html b/src/index.html index 3336ed35..228fdbab 100644 --- a/src/index.html +++ b/src/index.html @@ -1,6 +1,5 @@ - @@ -96,6 +95,36 @@ + +