Support dragging the goal window

This commit is contained in:
Sergey Krilov 2014-03-09 20:46:30 -04:00
parent 549e67b1c7
commit f29252e6ad
5 changed files with 182 additions and 36 deletions

View file

@ -50,6 +50,9 @@ var Level = Sandbox.extend({
this.initGoalData(options);
this.initName(options);
this.on('toggleGoal', this.toggleGoal);
this.on('minimizeCanvas', this.minimizeGoal);
this.on('resizeCanvas', this.resizeGoal);
Level.__super__.initialize.apply(this, [options]);
this.startOffCommand();
@ -128,7 +131,8 @@ var Level = Sandbox.extend({
var name = intl.getName(this.level);
this.levelToolbar = new LevelToolbar({
name: name
name: name,
parent: this
});
},
@ -170,7 +174,8 @@ var Level = Sandbox.extend({
var onlyMaster = TreeCompare.onlyMasterCompared(this.level);
// first we make the goal visualization holder
this.goalCanvasHolder = new CanvasTerminalHolder({
text: (onlyMaster) ? intl.str('goal-only-master') : undefined
text: (onlyMaster) ? intl.str('goal-only-master') : undefined,
parent: this
});
// then we make a visualization. the "el" here is the element to
@ -185,9 +190,38 @@ var Level = Sandbox.extend({
levelBlob: this.level,
noClick: true
});
// If the goal visualization gets dragged to the right side of the screen, then squeeze the main
// repo visualization a bit to make room. This way, you could have the goal window hang out on
// the right side of the screen and still see the repo visualization.
this.goalVis.customEvents.on('drag', _.bind(function(event, ui) {
if (ui.position.left > 0.5*$(window).width()) {
if (!$('#goalPlaceholder').is(':visible')) {
$('#goalPlaceholder').show();
this.mainVis.myResize();
}
} else {
if ($('#goalPlaceholder').is(':visible')) {
$('#goalPlaceholder').hide();
this.mainVis.myResize();
}
}
}, this));
return this.goalCanvasHolder;
},
minimizeGoal: function (position, size) {
this.goalVis.hide();
this.goalWindowPos = position;
this.goalWindowSize = size;
this.levelToolbar.$goalButton.text('Show Goal');
},
resizeGoal: function () {
this.goalVis.myResize();
},
showSolution: function(command, deferred) {
var toIssue = this.level.solutionCommand;
var issueFunc = _.bind(function() {
@ -230,8 +264,17 @@ var Level = Sandbox.extend({
});
},
toggleGoal: function () {
if (this.goalCanvasHolder && this.goalCanvasHolder.inDom) {
this.hideGoal();
} else {
this.showGoal();
}
},
showGoal: function(command, defer) {
this.showSideVis(command, defer, this.goalCanvasHolder, this.initGoalVisualization);
this.levelToolbar.$goalButton.text('Hide Goal');
},
showSideVis: function(command, defer, canvasHolder, initMethod) {
@ -242,12 +285,13 @@ var Level = Sandbox.extend({
canvasHolder = initMethod.apply(this);
}
canvasHolder.slideIn();
canvasHolder.restore(this.goalWindowPos, this.goalWindowSize);
setTimeout(safeFinish, canvasHolder.getAnimationTime());
},
hideGoal: function(command, defer) {
this.hideSideVis(command, defer, this.goalCanvasHolder);
this.levelToolbar.$goalButton.text('Show Goal');
},
hideSideVis: function(command, defer, canvasHolder, vis) {