|
|
var _ = require('underscore'); |
|
|
var Q = require('q'); |
|
|
var { marked } = require('marked'); |
|
|
|
|
|
var Views = require('../views'); |
|
|
var throttle = require('../util/throttle'); |
|
|
var ModalTerminal = Views.ModalTerminal; |
|
|
var ContainedBase = Views.ContainedBase; |
|
|
|
|
|
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', |
|
|
template: _.template($('#markdown-grabber-view').html()), |
|
|
events: { |
|
|
'keyup textarea': 'keyup' |
|
|
}, |
|
|
|
|
|
initialize: function(options) { |
|
|
options = options || {}; |
|
|
this.deferred = options.deferred || Q.defer(); |
|
|
|
|
|
if (options.fromObj) { |
|
|
options.fillerText = options.fromObj.options.markdowns.join('\n'); |
|
|
} |
|
|
|
|
|
this.JSON = { |
|
|
previewText: options.previewText || 'Preview', |
|
|
fillerText: options.fillerText || '## Enter some markdown!\n\n\n' |
|
|
}; |
|
|
|
|
|
this.container = options.container || new ModalTerminal({ |
|
|
title: options.title || 'Enter some markdown' |
|
|
}); |
|
|
this.render(); |
|
|
|
|
|
if (!options.withoutButton) { |
|
|
|
|
|
var buttonDefer = Q.defer(); |
|
|
buttonDefer.promise |
|
|
.then(this.confirmed.bind(this)) |
|
|
.fail(this.cancelled.bind(this)) |
|
|
.done(); |
|
|
|
|
|
var confirmCancel = new Views.ConfirmCancelView({ |
|
|
deferred: buttonDefer, |
|
|
destination: this.getDestination() |
|
|
}); |
|
|
} |
|
|
|
|
|
this.updatePreview(); |
|
|
|
|
|
if (!options.wait) { |
|
|
this.show(); |
|
|
} |
|
|
}, |
|
|
|
|
|
confirmed: function() { |
|
|
this.die(); |
|
|
this.deferred.resolve(this.getRawText()); |
|
|
}, |
|
|
|
|
|
cancelled: function() { |
|
|
this.die(); |
|
|
this.deferred.resolve(); |
|
|
}, |
|
|
|
|
|
keyup: function() { |
|
|
if (!this.throttledPreview) { |
|
|
this.throttledPreview = throttle( |
|
|
this.updatePreview.bind(this), |
|
|
500 |
|
|
); |
|
|
} |
|
|
this.throttledPreview(); |
|
|
}, |
|
|
|
|
|
getRawText: function() { |
|
|
return this.$('textarea').val(); |
|
|
}, |
|
|
|
|
|
exportToArray: function() { |
|
|
return this.getRawText().split('\n'); |
|
|
}, |
|
|
|
|
|
getExportObj: function() { |
|
|
return { |
|
|
markdowns: this.exportToArray() |
|
|
}; |
|
|
}, |
|
|
|
|
|
updatePreview: function() { |
|
|
var raw = this.getRawText(); |
|
|
var HTML = marked(raw); |
|
|
this.$('div.insidePreview').html(HTML); |
|
|
} |
|
|
}); |
|
|
|
|
|
var MarkdownPresenter = ContainedBase.extend({ |
|
|
tagName: 'div', |
|
|
className: 'markdownPresenter box vertical', |
|
|
template: _.template($('#markdown-presenter').html()), |
|
|
|
|
|
initialize: function(options) { |
|
|
options = options || {}; |
|
|
this.deferred = options.deferred || Q.defer(); |
|
|
this.JSON = { |
|
|
previewText: options.previewText || 'Here is something for you', |
|
|
fillerText: options.fillerText || '# Yay' |
|
|
}; |
|
|
|
|
|
this.container = new ModalTerminal({ |
|
|
title: 'Check this out...' |
|
|
}); |
|
|
this.render(); |
|
|
|
|
|
if (!options.noConfirmCancel) { |
|
|
var confirmCancel = new Views.ConfirmCancelView({ |
|
|
destination: this.getDestination() |
|
|
}); |
|
|
confirmCancel.deferred.promise |
|
|
.then(function() { |
|
|
this.deferred.resolve(this.grabText()); |
|
|
}.bind(this)) |
|
|
.fail(function() { |
|
|
this.deferred.reject(); |
|
|
}.bind(this)) |
|
|
.done(this.die.bind(this)); |
|
|
} |
|
|
|
|
|
this.show(); |
|
|
}, |
|
|
|
|
|
grabText: function() { |
|
|
return this.$('textarea').val(); |
|
|
} |
|
|
}); |
|
|
|
|
|
var DemonstrationBuilder = ContainedBase.extend({ |
|
|
tagName: 'div', |
|
|
className: 'demonstrationBuilder box vertical', |
|
|
template: _.template($('#demonstration-builder').html()), |
|
|
events: { |
|
|
'click div.testButton': 'testView' |
|
|
}, |
|
|
|
|
|
initialize: function(options) { |
|
|
options = options || {}; |
|
|
this.deferred = options.deferred || Q.defer(); |
|
|
if (options.fromObj) { |
|
|
var toEdit = options.fromObj.options; |
|
|
options = Object.assign( |
|
|
{}, |
|
|
options, |
|
|
toEdit, |
|
|
{ |
|
|
beforeMarkdown: toEdit.beforeMarkdowns.join('\n'), |
|
|
afterMarkdown: toEdit.afterMarkdowns.join('\n') |
|
|
} |
|
|
); |
|
|
} |
|
|
|
|
|
this.JSON = {}; |
|
|
this.container = new ModalTerminal({ |
|
|
title: 'Demonstration Builder' |
|
|
}); |
|
|
this.render(); |
|
|
|
|
|
|
|
|
this.beforeMarkdownView = new MarkdownGrabber({ |
|
|
container: this, |
|
|
withoutButton: true, |
|
|
fillerText: options.beforeMarkdown, |
|
|
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: options.beforeCommand || 'git checkout -b bugFix' |
|
|
}); |
|
|
|
|
|
this.commandView = new TextGrabber({ |
|
|
container: this, |
|
|
helperText: 'The git command(s) to demonstrate to the reader', |
|
|
initialText: options.command || 'git commit' |
|
|
}); |
|
|
|
|
|
this.afterMarkdownView = new MarkdownGrabber({ |
|
|
container: this, |
|
|
withoutButton: true, |
|
|
fillerText: options.afterMarkdown, |
|
|
previewText: 'After demonstration Markdown' |
|
|
}); |
|
|
|
|
|
|
|
|
var buttonDeferred = Q.defer(); |
|
|
var confirmCancel = new Views.ConfirmCancelView({ |
|
|
deferred: buttonDeferred, |
|
|
destination: this.getDestination() |
|
|
}); |
|
|
|
|
|
buttonDeferred.promise |
|
|
.then(this.confirmed.bind(this)) |
|
|
.fail(this.cancelled.bind(this)) |
|
|
.done(); |
|
|
}, |
|
|
|
|
|
testView: function() { |
|
|
var MultiView = require('../views/multiView').MultiView; |
|
|
new MultiView({ |
|
|
childViews: [{ |
|
|
type: 'GitDemonstrationView', |
|
|
options: this.getExportObj() |
|
|
}] |
|
|
}); |
|
|
}, |
|
|
|
|
|
getExportObj: function() { |
|
|
return { |
|
|
beforeMarkdowns: this.beforeMarkdownView.exportToArray(), |
|
|
afterMarkdowns: this.afterMarkdownView.exportToArray(), |
|
|
command: this.commandView.getText(), |
|
|
beforeCommand: this.beforeCommandView.getText() |
|
|
}; |
|
|
}, |
|
|
|
|
|
confirmed: function() { |
|
|
this.die(); |
|
|
this.deferred.resolve(this.getExportObj()); |
|
|
}, |
|
|
|
|
|
cancelled: function() { |
|
|
this.die(); |
|
|
this.deferred.resolve(); |
|
|
}, |
|
|
|
|
|
getInsideElement: function() { |
|
|
return this.$('.insideBuilder')[0]; |
|
|
} |
|
|
}); |
|
|
|
|
|
var MultiViewBuilder = ContainedBase.extend({ |
|
|
tagName: 'div', |
|
|
className: 'multiViewBuilder box vertical', |
|
|
template: _.template($('#multi-view-builder').html()), |
|
|
typeToConstructor: { |
|
|
ModalAlert: MarkdownGrabber, |
|
|
GitDemonstrationView: DemonstrationBuilder |
|
|
}, |
|
|
|
|
|
events: { |
|
|
'click div.deleteButton': 'deleteOneView', |
|
|
'click div.testButton': 'testOneView', |
|
|
'click div.editButton': 'editOneView', |
|
|
'click div.testEntireView': 'testEntireView', |
|
|
'click div.addView': 'addView', |
|
|
'click div.saveView': 'saveView', |
|
|
'click div.cancelView': 'cancel' |
|
|
}, |
|
|
|
|
|
initialize: function(options) { |
|
|
options = options || {}; |
|
|
this.deferred = options.deferred || Q.defer(); |
|
|
this.multiViewJSON = options.multiViewJSON || {}; |
|
|
|
|
|
this.JSON = { |
|
|
views: this.getChildViews(), |
|
|
supportedViews: Object.keys(this.typeToConstructor) |
|
|
}; |
|
|
|
|
|
this.container = new ModalTerminal({ |
|
|
title: 'Build a MultiView!' |
|
|
}); |
|
|
this.render(); |
|
|
|
|
|
this.show(); |
|
|
}, |
|
|
|
|
|
saveView: function() { |
|
|
this.hide(); |
|
|
this.deferred.resolve(this.multiViewJSON); |
|
|
}, |
|
|
|
|
|
cancel: function() { |
|
|
this.hide(); |
|
|
this.deferred.resolve(); |
|
|
}, |
|
|
|
|
|
addView: function(ev) { |
|
|
var el = ev.target; |
|
|
var type = $(el).attr('data-type'); |
|
|
|
|
|
var whenDone = Q.defer(); |
|
|
var Constructor = this.typeToConstructor[type]; |
|
|
var builder = new Constructor({ |
|
|
deferred: whenDone |
|
|
}); |
|
|
whenDone.promise |
|
|
.then(function() { |
|
|
var newView = { |
|
|
type: type, |
|
|
options: builder.getExportObj() |
|
|
}; |
|
|
this.addChildViewObj(newView); |
|
|
}.bind(this)) |
|
|
.fail(function() { |
|
|
|
|
|
}) |
|
|
.done(); |
|
|
}, |
|
|
|
|
|
testOneView: function(ev) { |
|
|
var el = ev.target; |
|
|
var index = $(el).attr('data-index'); |
|
|
var toTest = this.getChildViews()[index]; |
|
|
var MultiView = require('../views/multiView').MultiView; |
|
|
new MultiView({ |
|
|
childViews: [toTest] |
|
|
}); |
|
|
}, |
|
|
|
|
|
testEntireView: function() { |
|
|
var MultiView = require('../views/multiView').MultiView; |
|
|
new MultiView({ |
|
|
childViews: this.getChildViews() |
|
|
}); |
|
|
}, |
|
|
|
|
|
editOneView: function(ev) { |
|
|
var el = ev.target; |
|
|
var index = $(el).attr('data-index'); |
|
|
var type = $(el).attr('data-type'); |
|
|
|
|
|
var whenDone = Q.defer(); |
|
|
var builder = new this.typeToConstructor[type]({ |
|
|
deferred: whenDone, |
|
|
fromObj: this.getChildViews()[index] |
|
|
}); |
|
|
whenDone.promise |
|
|
.then(function() { |
|
|
var newView = { |
|
|
type: type, |
|
|
options: builder.getExportObj() |
|
|
}; |
|
|
var views = this.getChildViews(); |
|
|
views[index] = newView; |
|
|
this.setChildViews(views); |
|
|
}.bind(this)) |
|
|
.fail(function() { }) |
|
|
.done(); |
|
|
}, |
|
|
|
|
|
deleteOneView: function(ev) { |
|
|
var el = ev.target; |
|
|
var index = $(el).attr('data-index'); |
|
|
var toSlice = this.getChildViews(); |
|
|
|
|
|
var updated = toSlice.slice(0,index).concat(toSlice.slice(index + 1)); |
|
|
this.setChildViews(updated); |
|
|
this.update(); |
|
|
}, |
|
|
|
|
|
addChildViewObj: function(newObj, index) { |
|
|
var childViews = this.getChildViews(); |
|
|
childViews.push(newObj); |
|
|
this.setChildViews(childViews); |
|
|
this.update(); |
|
|
}, |
|
|
|
|
|
setChildViews: function(newArray) { |
|
|
this.multiViewJSON.childViews = newArray; |
|
|
}, |
|
|
|
|
|
getChildViews: function() { |
|
|
return this.multiViewJSON.childViews || []; |
|
|
}, |
|
|
|
|
|
update: function() { |
|
|
this.JSON.views = this.getChildViews(); |
|
|
this.renderAgain(); |
|
|
} |
|
|
}); |
|
|
|
|
|
exports.MarkdownGrabber = MarkdownGrabber; |
|
|
exports.DemonstrationBuilder = DemonstrationBuilder; |
|
|
exports.TextGrabber = TextGrabber; |
|
|
exports.MultiViewBuilder = MultiViewBuilder; |
|
|
exports.MarkdownPresenter = MarkdownPresenter; |
|
|
|
