mirror of
https://github.com/pcottle/learnGitBranching.git
synced 2025-06-26 07:58:34 +02:00
fixed long text in dmeonstarton view
This commit is contained in:
Peter Cottle
parent
f19f080d61
commit
0c4319911e
6 changed files with 291 additions and 18 deletions
176
build/bundle.js
176
build/bundle.js
|
|
@ -15457,6 +15457,7 @@ var GitDemonstrationView = ContainedBase.extend({
|
|||
title: options.title || 'Git Demonstration'
|
||||
});
|
||||
this.render();
|
||||
this.checkScroll();
|
||||
|
||||
this.navEvents = _.clone(Backbone.Events);
|
||||
this.navEvents.on('positive', this.positive, this);
|
||||
|
|
@ -15479,6 +15480,31 @@ var GitDemonstrationView = ContainedBase.extend({
|
|||
}
|
||||
},
|
||||
|
||||
checkScroll: function() {
|
||||
console.log('checking scroll');
|
||||
var children = this.$('div.demonstrationText').children();
|
||||
var heights = _.map(children, function(child) { return child.clientHeight; });
|
||||
var totalHeight = _.reduce(heights, function(a, b) { return a + b; });
|
||||
console.log(children, heights, totalHeight);
|
||||
if (totalHeight < this.$('div.demonstrationText').height()) {
|
||||
this.$('div.demonstrationText').addClass('noLongText');
|
||||
}
|
||||
},
|
||||
|
||||
dispatchBeforeCommand: function() {
|
||||
if (!this.options.beforeCommand) {
|
||||
return;
|
||||
}
|
||||
// here we just split the command and push them through to the git engine
|
||||
util.splitTextCommand(this.options.beforeCommand, function(commandStr) {
|
||||
this.mainVis.gitEngine.dispatch(new Command({
|
||||
rawStr: commandStr
|
||||
}), Q.defer());
|
||||
}, this);
|
||||
// then harsh refresh
|
||||
this.mainVis.gitVisuals.refreshTreeHarsh();
|
||||
},
|
||||
|
||||
takeControl: function() {
|
||||
this.hasControl = true;
|
||||
this.keyboardListener.listen();
|
||||
|
|
@ -15598,6 +15624,7 @@ var GitDemonstrationView = ContainedBase.extend({
|
|||
});
|
||||
this.mainVis.customEvents.on('paperReady', _.bind(function() {
|
||||
this.visFinished = true;
|
||||
this.dispatchBeforeCommand();
|
||||
if (this.shown) {
|
||||
// show the canvas once its done if we are shown
|
||||
this.show();
|
||||
|
|
@ -16977,6 +17004,41 @@ var Views = require('../views');
|
|||
var ModalTerminal = Views.ModalTerminal;
|
||||
var ContainedBase = Views.ContainedBase;
|
||||
|
||||
var MultiView = require('../views/multiView').MultiView;
|
||||
|
||||
var TextGrabber = ContainedBase.extend({
|
||||
tagName: 'div',
|
||||
className: 'textGrabber box vertical',
|
||||
template: _.template($('#text-grabber').html()),
|
||||
|
||||
initialize: function(options) {
|
||||
options = options || {};
|
||||
this.JSON = {
|
||||
helperText: options.helperText || 'Enter some text'
|
||||
};
|
||||
|
||||
this.container = options.container || new ModalTerminal({
|
||||
title: 'Enter some text'
|
||||
});
|
||||
this.render();
|
||||
if (options.initialText) {
|
||||
this.setText(options.initialText);
|
||||
}
|
||||
|
||||
if (!options.wait) {
|
||||
this.show();
|
||||
}
|
||||
},
|
||||
|
||||
getText: function() {
|
||||
return this.$('textarea').val();
|
||||
},
|
||||
|
||||
setText: function(str) {
|
||||
this.$('textarea').val(str);
|
||||
}
|
||||
});
|
||||
|
||||
var MarkdownGrabber = ContainedBase.extend({
|
||||
tagName: 'div',
|
||||
className: 'markdownGrabber box horizontal',
|
||||
|
|
@ -17007,7 +17069,7 @@ var MarkdownGrabber = ContainedBase.extend({
|
|||
|
||||
var confirmCancel = new Views.ConfirmCancelView({
|
||||
deferred: buttonDefer,
|
||||
destination: this.getDestination()
|
||||
destination: this
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -17074,6 +17136,18 @@ var DemonstrationBuilder = ContainedBase.extend({
|
|||
withoutButton: true,
|
||||
previewText: 'Before demonstration Markdown'
|
||||
});
|
||||
this.beforeCommandView = new TextGrabber({
|
||||
container: this,
|
||||
helperText: 'The git command(s) to set up the demonstration view (before it is displayed)',
|
||||
initialText: 'git checkout -b bugFix'
|
||||
});
|
||||
|
||||
this.commandView = new TextGrabber({
|
||||
container: this,
|
||||
helperText: 'The git command(s) to demonstrate to the reader',
|
||||
initialText: 'git commit'
|
||||
});
|
||||
|
||||
this.afterMarkdownView = new MarkdownGrabber({
|
||||
container: this,
|
||||
withoutButton: true,
|
||||
|
|
@ -17101,15 +17175,20 @@ var DemonstrationBuilder = ContainedBase.extend({
|
|||
},
|
||||
|
||||
testView: function() {
|
||||
var module = require('../views/gitDemonstrationView');
|
||||
new module.GitDemonstrationView(this.getExportObj());
|
||||
new MultiView({
|
||||
childViews: [{
|
||||
type: 'GitDemonstrationView',
|
||||
options: this.getExportObj()
|
||||
}]
|
||||
});
|
||||
},
|
||||
|
||||
getExportObj: function() {
|
||||
return {
|
||||
beforeMarkdowns: this.beforeMarkdownView.exportToArray(),
|
||||
afterMarkdowns: this.afterMarkdownView.exportToArray(),
|
||||
gitCommand: 'git commit'
|
||||
command: this.commandView.getText(),
|
||||
beforeCommand: this.beforeCommandView.getText()
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -17130,6 +17209,7 @@ var DemonstrationBuilder = ContainedBase.extend({
|
|||
|
||||
exports.MarkdownGrabber = MarkdownGrabber;
|
||||
exports.DemonstrationBuilder = DemonstrationBuilder;
|
||||
exports.TextGrabber = TextGrabber;
|
||||
|
||||
|
||||
});
|
||||
|
|
@ -21638,6 +21718,41 @@ var Views = require('../views');
|
|||
var ModalTerminal = Views.ModalTerminal;
|
||||
var ContainedBase = Views.ContainedBase;
|
||||
|
||||
var MultiView = require('../views/multiView').MultiView;
|
||||
|
||||
var TextGrabber = ContainedBase.extend({
|
||||
tagName: 'div',
|
||||
className: 'textGrabber box vertical',
|
||||
template: _.template($('#text-grabber').html()),
|
||||
|
||||
initialize: function(options) {
|
||||
options = options || {};
|
||||
this.JSON = {
|
||||
helperText: options.helperText || 'Enter some text'
|
||||
};
|
||||
|
||||
this.container = options.container || new ModalTerminal({
|
||||
title: 'Enter some text'
|
||||
});
|
||||
this.render();
|
||||
if (options.initialText) {
|
||||
this.setText(options.initialText);
|
||||
}
|
||||
|
||||
if (!options.wait) {
|
||||
this.show();
|
||||
}
|
||||
},
|
||||
|
||||
getText: function() {
|
||||
return this.$('textarea').val();
|
||||
},
|
||||
|
||||
setText: function(str) {
|
||||
this.$('textarea').val(str);
|
||||
}
|
||||
});
|
||||
|
||||
var MarkdownGrabber = ContainedBase.extend({
|
||||
tagName: 'div',
|
||||
className: 'markdownGrabber box horizontal',
|
||||
|
|
@ -21668,7 +21783,7 @@ var MarkdownGrabber = ContainedBase.extend({
|
|||
|
||||
var confirmCancel = new Views.ConfirmCancelView({
|
||||
deferred: buttonDefer,
|
||||
destination: this.getDestination()
|
||||
destination: this
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -21735,6 +21850,18 @@ var DemonstrationBuilder = ContainedBase.extend({
|
|||
withoutButton: true,
|
||||
previewText: 'Before demonstration Markdown'
|
||||
});
|
||||
this.beforeCommandView = new TextGrabber({
|
||||
container: this,
|
||||
helperText: 'The git command(s) to set up the demonstration view (before it is displayed)',
|
||||
initialText: 'git checkout -b bugFix'
|
||||
});
|
||||
|
||||
this.commandView = new TextGrabber({
|
||||
container: this,
|
||||
helperText: 'The git command(s) to demonstrate to the reader',
|
||||
initialText: 'git commit'
|
||||
});
|
||||
|
||||
this.afterMarkdownView = new MarkdownGrabber({
|
||||
container: this,
|
||||
withoutButton: true,
|
||||
|
|
@ -21762,15 +21889,20 @@ var DemonstrationBuilder = ContainedBase.extend({
|
|||
},
|
||||
|
||||
testView: function() {
|
||||
var module = require('../views/gitDemonstrationView');
|
||||
new module.GitDemonstrationView(this.getExportObj());
|
||||
new MultiView({
|
||||
childViews: [{
|
||||
type: 'GitDemonstrationView',
|
||||
options: this.getExportObj()
|
||||
}]
|
||||
});
|
||||
},
|
||||
|
||||
getExportObj: function() {
|
||||
return {
|
||||
beforeMarkdowns: this.beforeMarkdownView.exportToArray(),
|
||||
afterMarkdowns: this.afterMarkdownView.exportToArray(),
|
||||
gitCommand: 'git commit'
|
||||
command: this.commandView.getText(),
|
||||
beforeCommand: this.beforeCommandView.getText()
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -21791,6 +21923,7 @@ var DemonstrationBuilder = ContainedBase.extend({
|
|||
|
||||
exports.MarkdownGrabber = MarkdownGrabber;
|
||||
exports.DemonstrationBuilder = DemonstrationBuilder;
|
||||
exports.TextGrabber = TextGrabber;
|
||||
|
||||
|
||||
});
|
||||
|
|
@ -22236,6 +22369,7 @@ var GitDemonstrationView = ContainedBase.extend({
|
|||
title: options.title || 'Git Demonstration'
|
||||
});
|
||||
this.render();
|
||||
this.checkScroll();
|
||||
|
||||
this.navEvents = _.clone(Backbone.Events);
|
||||
this.navEvents.on('positive', this.positive, this);
|
||||
|
|
@ -22258,6 +22392,31 @@ var GitDemonstrationView = ContainedBase.extend({
|
|||
}
|
||||
},
|
||||
|
||||
checkScroll: function() {
|
||||
console.log('checking scroll');
|
||||
var children = this.$('div.demonstrationText').children();
|
||||
var heights = _.map(children, function(child) { return child.clientHeight; });
|
||||
var totalHeight = _.reduce(heights, function(a, b) { return a + b; });
|
||||
console.log(children, heights, totalHeight);
|
||||
if (totalHeight < this.$('div.demonstrationText').height()) {
|
||||
this.$('div.demonstrationText').addClass('noLongText');
|
||||
}
|
||||
},
|
||||
|
||||
dispatchBeforeCommand: function() {
|
||||
if (!this.options.beforeCommand) {
|
||||
return;
|
||||
}
|
||||
// here we just split the command and push them through to the git engine
|
||||
util.splitTextCommand(this.options.beforeCommand, function(commandStr) {
|
||||
this.mainVis.gitEngine.dispatch(new Command({
|
||||
rawStr: commandStr
|
||||
}), Q.defer());
|
||||
}, this);
|
||||
// then harsh refresh
|
||||
this.mainVis.gitVisuals.refreshTreeHarsh();
|
||||
},
|
||||
|
||||
takeControl: function() {
|
||||
this.hasControl = true;
|
||||
this.keyboardListener.listen();
|
||||
|
|
@ -22377,6 +22536,7 @@ var GitDemonstrationView = ContainedBase.extend({
|
|||
});
|
||||
this.mainVis.customEvents.on('paperReady', _.bind(function() {
|
||||
this.visFinished = true;
|
||||
this.dispatchBeforeCommand();
|
||||
if (this.shown) {
|
||||
// show the canvas once its done if we are shown
|
||||
this.show();
|
||||
|
|
|
|||
13
index.html
13
index.html
|
|
@ -204,19 +204,19 @@
|
|||
|
||||
<script type="text/html" id="git-demonstration-view">
|
||||
<div class="demonstrationText box vertical">
|
||||
<div class="beforeText box flex1 vertical center">
|
||||
<div class="beforeText">
|
||||
<p>
|
||||
<%= beforeHTML %>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="command box flex1 vertical center centerAlign">
|
||||
<div class="command center">
|
||||
<p class="uiButton uiButtonYellow transitionOpacity">
|
||||
<%= command %>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="afterText box flex1 vertical center transitionOpacity">
|
||||
<div class="afterText transitionOpacity">
|
||||
<p>
|
||||
<%= afterHTML %>
|
||||
</p>
|
||||
|
|
@ -238,6 +238,13 @@
|
|||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="text-grabber">
|
||||
<p class="helperText">
|
||||
<%= helperText %>
|
||||
</p>
|
||||
<textarea></textarea>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="markdown-grabber-view">
|
||||
<div class="inputSide box vertical">
|
||||
<div class="markdownGrabberInput">
|
||||
|
|
|
|||
|
|
@ -10,6 +10,41 @@ var Views = require('../views');
|
|||
var ModalTerminal = Views.ModalTerminal;
|
||||
var ContainedBase = Views.ContainedBase;
|
||||
|
||||
var MultiView = require('../views/multiView').MultiView;
|
||||
|
||||
var TextGrabber = ContainedBase.extend({
|
||||
tagName: 'div',
|
||||
className: 'textGrabber box vertical',
|
||||
template: _.template($('#text-grabber').html()),
|
||||
|
||||
initialize: function(options) {
|
||||
options = options || {};
|
||||
this.JSON = {
|
||||
helperText: options.helperText || 'Enter some text'
|
||||
};
|
||||
|
||||
this.container = options.container || new ModalTerminal({
|
||||
title: 'Enter some text'
|
||||
});
|
||||
this.render();
|
||||
if (options.initialText) {
|
||||
this.setText(options.initialText);
|
||||
}
|
||||
|
||||
if (!options.wait) {
|
||||
this.show();
|
||||
}
|
||||
},
|
||||
|
||||
getText: function() {
|
||||
return this.$('textarea').val();
|
||||
},
|
||||
|
||||
setText: function(str) {
|
||||
this.$('textarea').val(str);
|
||||
}
|
||||
});
|
||||
|
||||
var MarkdownGrabber = ContainedBase.extend({
|
||||
tagName: 'div',
|
||||
className: 'markdownGrabber box horizontal',
|
||||
|
|
@ -40,7 +75,7 @@ var MarkdownGrabber = ContainedBase.extend({
|
|||
|
||||
var confirmCancel = new Views.ConfirmCancelView({
|
||||
deferred: buttonDefer,
|
||||
destination: this.getDestination()
|
||||
destination: this
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -107,6 +142,18 @@ var DemonstrationBuilder = ContainedBase.extend({
|
|||
withoutButton: true,
|
||||
previewText: 'Before demonstration Markdown'
|
||||
});
|
||||
this.beforeCommandView = new TextGrabber({
|
||||
container: this,
|
||||
helperText: 'The git command(s) to set up the demonstration view (before it is displayed)',
|
||||
initialText: 'git checkout -b bugFix'
|
||||
});
|
||||
|
||||
this.commandView = new TextGrabber({
|
||||
container: this,
|
||||
helperText: 'The git command(s) to demonstrate to the reader',
|
||||
initialText: 'git commit'
|
||||
});
|
||||
|
||||
this.afterMarkdownView = new MarkdownGrabber({
|
||||
container: this,
|
||||
withoutButton: true,
|
||||
|
|
@ -134,15 +181,20 @@ var DemonstrationBuilder = ContainedBase.extend({
|
|||
},
|
||||
|
||||
testView: function() {
|
||||
var module = require('../views/gitDemonstrationView');
|
||||
new module.GitDemonstrationView(this.getExportObj());
|
||||
new MultiView({
|
||||
childViews: [{
|
||||
type: 'GitDemonstrationView',
|
||||
options: this.getExportObj()
|
||||
}]
|
||||
});
|
||||
},
|
||||
|
||||
getExportObj: function() {
|
||||
return {
|
||||
beforeMarkdowns: this.beforeMarkdownView.exportToArray(),
|
||||
afterMarkdowns: this.afterMarkdownView.exportToArray(),
|
||||
gitCommand: 'git commit'
|
||||
command: this.commandView.getText(),
|
||||
beforeCommand: this.beforeCommandView.getText()
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -163,4 +215,5 @@ var DemonstrationBuilder = ContainedBase.extend({
|
|||
|
||||
exports.MarkdownGrabber = MarkdownGrabber;
|
||||
exports.DemonstrationBuilder = DemonstrationBuilder;
|
||||
exports.TextGrabber = TextGrabber;
|
||||
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ var GitDemonstrationView = ContainedBase.extend({
|
|||
title: options.title || 'Git Demonstration'
|
||||
});
|
||||
this.render();
|
||||
this.checkScroll();
|
||||
|
||||
this.navEvents = _.clone(Backbone.Events);
|
||||
this.navEvents.on('positive', this.positive, this);
|
||||
|
|
@ -74,6 +75,31 @@ var GitDemonstrationView = ContainedBase.extend({
|
|||
}
|
||||
},
|
||||
|
||||
checkScroll: function() {
|
||||
console.log('checking scroll');
|
||||
var children = this.$('div.demonstrationText').children();
|
||||
var heights = _.map(children, function(child) { return child.clientHeight; });
|
||||
var totalHeight = _.reduce(heights, function(a, b) { return a + b; });
|
||||
console.log(children, heights, totalHeight);
|
||||
if (totalHeight < this.$('div.demonstrationText').height()) {
|
||||
this.$('div.demonstrationText').addClass('noLongText');
|
||||
}
|
||||
},
|
||||
|
||||
dispatchBeforeCommand: function() {
|
||||
if (!this.options.beforeCommand) {
|
||||
return;
|
||||
}
|
||||
// here we just split the command and push them through to the git engine
|
||||
util.splitTextCommand(this.options.beforeCommand, function(commandStr) {
|
||||
this.mainVis.gitEngine.dispatch(new Command({
|
||||
rawStr: commandStr
|
||||
}), Q.defer());
|
||||
}, this);
|
||||
// then harsh refresh
|
||||
this.mainVis.gitVisuals.refreshTreeHarsh();
|
||||
},
|
||||
|
||||
takeControl: function() {
|
||||
this.hasControl = true;
|
||||
this.keyboardListener.listen();
|
||||
|
|
@ -193,6 +219,7 @@ var GitDemonstrationView = ContainedBase.extend({
|
|||
});
|
||||
this.mainVis.customEvents.on('paperReady', _.bind(function() {
|
||||
this.visFinished = true;
|
||||
this.dispatchBeforeCommand();
|
||||
if (this.shown) {
|
||||
// show the canvas once its done if we are shown
|
||||
this.show();
|
||||
|
|
|
|||
|
|
@ -739,12 +739,20 @@ div.levelIcon.solved div.index div.indexNum {
|
|||
|
||||
/* DemonstrationBuilder */
|
||||
|
||||
.demonstrationBuilder {
|
||||
max-height: 600px;
|
||||
overflow-y: scroll;
|
||||
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.demonstrationBuilder div.buttons {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.demonstrationBuilder .markdownGrabber{
|
||||
min-height: 200px;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.markdownGrabberInput {
|
||||
|
|
@ -755,6 +763,10 @@ div.levelIcon.solved div.index div.indexNum {
|
|||
height: auto;
|
||||
}
|
||||
|
||||
.textGrabber textarea {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
/* Git demonstration view, and markdownGrabber */
|
||||
|
||||
.markdownGrabber {
|
||||
|
|
@ -767,7 +779,7 @@ div.levelIcon.solved div.index div.indexNum {
|
|||
}
|
||||
|
||||
.demonstrationBuilder .markdownGrabber textarea {
|
||||
height: 200px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.markdownGrabberPreview div.insidePreview {
|
||||
|
|
@ -779,6 +791,16 @@ div.levelIcon.solved div.index div.indexNum {
|
|||
width: 50%;
|
||||
}
|
||||
|
||||
.gitDemonstrationView > div.demonstrationText {
|
||||
margin-right: 10px;
|
||||
max-height: 400px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.gitDemonstrationView > div.demonstrationText.noLongText {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.markdownGrabber div.markdownGrabberPreview,
|
||||
.gitDemonstrationView > div.visHolder {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
|
||||
|
|
|
|||
6
todo.txt
6
todo.txt
|
|
@ -2,11 +2,13 @@ Big Things
|
|||
~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
[ ] level builder dialog tester
|
||||
[ ] level builder dialog builder
|
||||
[ ] allow demonstration view to have git commands beforehand
|
||||
|
||||
Medium things:
|
||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
[ ] get automated SHA hash appending in the html source :OOOOO... template? or what?t
|
||||
[ ] text grabber for commands
|
||||
[ ] turn off button clicking for demonstration view :O
|
||||
|
||||
|
||||
Cases to handle / things to edit
|
||||
=======================
|
||||
|
|
@ -32,6 +34,8 @@ Ideas for cleaning
|
|||
Done things:
|
||||
(I only started this on Dec 17th 2012 to get a better sense of what was done)
|
||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
[x] way to close testing view
|
||||
[x] allow demonstration view to have git commands beforehand
|
||||
[x] demonstration builder progress
|
||||
[x] markdowngrabber
|
||||
[x] sandbox and level command refresh
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue