Refactor frontend
* restructured JavaScript using backbone.js * replaced highlight.js with CodeMirror for its editor * added CodeMirror Solarized (dark) theme based on Ethan Schoonover's solarized.vim * changed `POST /document` to accept real JSON * cleaned up template and stylesheet
This commit is contained in:
Michael Macias
parent
90cfe0ec57
commit
1950cc8db0
10 changed files with 426 additions and 681 deletions
|
|
@ -1,396 +1,171 @@
|
|||
///// represents a single document
|
||||
window.Haste = {
|
||||
Models: {},
|
||||
Views: {},
|
||||
Routers: {},
|
||||
|
||||
var haste_document = function() {
|
||||
this.locked = false;
|
||||
};
|
||||
extensionMap: {
|
||||
clj: 'clojure', coffee: 'coffeescript', css: 'css', diff: 'diff', go: 'go',
|
||||
hs: 'haskell', html: 'htmlmixed', js: 'javascript', lua: 'lua',
|
||||
md: 'markdown', markdown: 'markdown', sql: 'mysql', pl: 'perl', php: 'php',
|
||||
py: 'python', r: 'r', rb: 'ruby', scm: 'scheme', xml: 'xml', yml: 'yaml'
|
||||
},
|
||||
|
||||
// Escapes HTML tag characters
|
||||
haste_document.prototype.htmlEscape = function(s) {
|
||||
return s
|
||||
.replace(/&/g, '&')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/</g, '<')
|
||||
.replace(/"/g, '"');
|
||||
};
|
||||
|
||||
// Get this document from the server and lock it here
|
||||
haste_document.prototype.load = function(key, callback, lang) {
|
||||
var _this = this;
|
||||
$.ajax('/documents/' + key, {
|
||||
type: 'get',
|
||||
dataType: 'json',
|
||||
success: function(res) {
|
||||
_this.locked = true;
|
||||
_this.key = key;
|
||||
_this.data = res.data;
|
||||
try {
|
||||
var high;
|
||||
if (lang === 'txt') {
|
||||
high = { value: _this.htmlEscape(res.data) };
|
||||
}
|
||||
else if (lang) {
|
||||
high = hljs.highlight(lang, res.data);
|
||||
}
|
||||
else {
|
||||
high = hljs.highlightAuto(res.data);
|
||||
}
|
||||
} catch(err) {
|
||||
// failed highlight, fall back on auto
|
||||
high = hljs.highlightAuto(res.data);
|
||||
}
|
||||
callback({
|
||||
value: high.value,
|
||||
key: key,
|
||||
language: high.language || lang,
|
||||
lineCount: res.data.split("\n").length
|
||||
});
|
||||
},
|
||||
error: function(err) {
|
||||
callback(false);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Save this document to the server and lock it here
|
||||
haste_document.prototype.save = function(data, callback) {
|
||||
if (this.locked) {
|
||||
return false;
|
||||
}
|
||||
this.data = data;
|
||||
var _this = this;
|
||||
$.ajax('/documents', {
|
||||
type: 'post',
|
||||
data: data,
|
||||
dataType: 'json',
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
success: function(res) {
|
||||
_this.locked = true;
|
||||
_this.key = res.key;
|
||||
var high = hljs.highlightAuto(data);
|
||||
callback(null, {
|
||||
value: high.value,
|
||||
key: res.key,
|
||||
language: high.language,
|
||||
lineCount: data.split("\n").length
|
||||
});
|
||||
},
|
||||
error: function(res) {
|
||||
try {
|
||||
callback($.parseJSON(res.responseText));
|
||||
}
|
||||
catch (e) {
|
||||
callback({message: 'Something went wrong!'});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
///// represents the paste application
|
||||
|
||||
var haste = function(appName, options) {
|
||||
this.appName = appName;
|
||||
this.$textarea = $('textarea');
|
||||
this.$box = $('#box');
|
||||
this.$code = $('#box code');
|
||||
this.$linenos = $('#linenos');
|
||||
this.options = options;
|
||||
this.configureShortcuts();
|
||||
this.configureButtons();
|
||||
// If twitter is disabled, hide the button
|
||||
if (!options.twitter) {
|
||||
$('#box2 .twitter').hide();
|
||||
init: function() {
|
||||
new Haste.Routers.Document();
|
||||
Backbone.history.start({ pushState: true });
|
||||
}
|
||||
};
|
||||
|
||||
// Set the page title - include the appName
|
||||
haste.prototype.setTitle = function(ext) {
|
||||
var title = ext ? this.appName + ' - ' + ext : this.appName;
|
||||
document.title = title;
|
||||
};
|
||||
|
||||
// Show a message box
|
||||
haste.prototype.showMessage = function(msg, cls) {
|
||||
var msgBox = $('<li class="'+(cls || 'info')+'">'+msg+'</li>');
|
||||
$('#messages').prepend(msgBox);
|
||||
setTimeout(function() {
|
||||
msgBox.slideUp('fast', function() { $(this).remove(); });
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
// Show the light key
|
||||
haste.prototype.lightKey = function() {
|
||||
this.configureKey(['new', 'save']);
|
||||
};
|
||||
|
||||
// Show the full key
|
||||
haste.prototype.fullKey = function() {
|
||||
this.configureKey(['new', 'duplicate', 'twitter', 'raw']);
|
||||
};
|
||||
|
||||
// Set the key up for certain things to be enabled
|
||||
haste.prototype.configureKey = function(enable) {
|
||||
var $this, i = 0;
|
||||
$('#box2 .function').each(function() {
|
||||
$this = $(this);
|
||||
for (i = 0; i < enable.length; i++) {
|
||||
if ($this.hasClass(enable[i])) {
|
||||
$this.addClass('enabled');
|
||||
return true;
|
||||
}
|
||||
}
|
||||
$this.removeClass('enabled');
|
||||
});
|
||||
};
|
||||
|
||||
// Remove the current document (if there is one)
|
||||
// and set up for a new one
|
||||
haste.prototype.newDocument = function(hideHistory) {
|
||||
this.$box.hide();
|
||||
this.doc = new haste_document();
|
||||
if (!hideHistory) {
|
||||
window.history.pushState(null, this.appName, '/');
|
||||
}
|
||||
this.setTitle();
|
||||
this.lightKey();
|
||||
this.$textarea.val('').show('fast', function() {
|
||||
this.focus();
|
||||
});
|
||||
this.removeLineNumbers();
|
||||
};
|
||||
|
||||
// Map of common extensions
|
||||
// Note: this list does not need to include anything that IS its extension,
|
||||
// due to the behavior of lookupTypeByExtension and lookupExtensionByType
|
||||
// Note: optimized for lookupTypeByExtension
|
||||
haste.extensionMap = {
|
||||
rb: 'ruby', py: 'python', pl: 'perl', php: 'php', scala: 'scala', go: 'go',
|
||||
xml: 'xml', html: 'xml', htm: 'xml', css: 'css', js: 'javascript', vbs: 'vbscript',
|
||||
lua: 'lua', pas: 'delphi', java: 'java', cpp: 'cpp', cc: 'cpp', m: 'objectivec',
|
||||
vala: 'vala', cs: 'cs', sql: 'sql', sm: 'smalltalk', lisp: 'lisp', ini: 'ini',
|
||||
diff: 'diff', bash: 'bash', sh: 'bash', tex: 'tex', erl: 'erlang', hs: 'haskell',
|
||||
md: 'markdown', txt: '', coffee: 'coffee'
|
||||
};
|
||||
|
||||
// Look up the extension preferred for a type
|
||||
// If not found, return the type itself - which we'll place as the extension
|
||||
haste.prototype.lookupExtensionByType = function(type) {
|
||||
for (var key in haste.extensionMap) {
|
||||
if (haste.extensionMap[key] === type) return key;
|
||||
}
|
||||
return type;
|
||||
};
|
||||
|
||||
// Look up the type for a given extension
|
||||
// If not found, return the extension - which we'll attempt to use as the type
|
||||
haste.prototype.lookupTypeByExtension = function(ext) {
|
||||
return haste.extensionMap[ext] || ext;
|
||||
};
|
||||
|
||||
// Add line numbers to the document
|
||||
// For the specified number of lines
|
||||
haste.prototype.addLineNumbers = function(lineCount) {
|
||||
var h = '';
|
||||
for (var i = 0; i < lineCount; i++) {
|
||||
h += (i + 1).toString() + '<br/>';
|
||||
}
|
||||
$('#linenos').html(h);
|
||||
};
|
||||
|
||||
// Remove the line numbers
|
||||
haste.prototype.removeLineNumbers = function() {
|
||||
$('#linenos').html('>');
|
||||
};
|
||||
|
||||
// Load a document and show it
|
||||
haste.prototype.loadDocument = function(key) {
|
||||
// Split the key up
|
||||
var parts = key.split('.', 2);
|
||||
// Ask for what we want
|
||||
var _this = this;
|
||||
_this.doc = new haste_document();
|
||||
_this.doc.load(parts[0], function(ret) {
|
||||
if (ret) {
|
||||
_this.$code.html(ret.value);
|
||||
_this.setTitle(ret.key);
|
||||
_this.fullKey();
|
||||
_this.$textarea.val('').hide();
|
||||
_this.$box.show().focus();
|
||||
_this.addLineNumbers(ret.lineCount);
|
||||
}
|
||||
else {
|
||||
_this.newDocument();
|
||||
}
|
||||
}, this.lookupTypeByExtension(parts[1]));
|
||||
};
|
||||
|
||||
// Duplicate the current document - only if locked
|
||||
haste.prototype.duplicateDocument = function() {
|
||||
if (this.doc.locked) {
|
||||
var currentData = this.doc.data;
|
||||
this.newDocument();
|
||||
this.$textarea.val(currentData);
|
||||
}
|
||||
};
|
||||
|
||||
// Lock the current document
|
||||
haste.prototype.lockDocument = function() {
|
||||
var _this = this;
|
||||
this.doc.save(this.$textarea.val(), function(err, ret) {
|
||||
if (err) {
|
||||
_this.showMessage(err.message, 'error');
|
||||
}
|
||||
else if (ret) {
|
||||
_this.$code.html(ret.value);
|
||||
_this.setTitle(ret.key);
|
||||
var file = '/' + ret.key;
|
||||
if (ret.language) {
|
||||
file += '.' + _this.lookupExtensionByType(ret.language);
|
||||
}
|
||||
window.history.pushState(null, _this.appName + '-' + ret.key, file);
|
||||
_this.fullKey();
|
||||
_this.$textarea.val('').hide();
|
||||
_this.$box.show().focus();
|
||||
_this.addLineNumbers(ret.lineCount);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
haste.prototype.configureButtons = function() {
|
||||
var _this = this;
|
||||
this.buttons = [
|
||||
{
|
||||
$where: $('#box2 .save'),
|
||||
label: 'Save',
|
||||
shortcutDescription: 'control + s',
|
||||
shortcut: function(evt) {
|
||||
return evt.ctrlKey && (evt.keyCode === 83);
|
||||
},
|
||||
action: function() {
|
||||
if (_this.$textarea.val().replace(/^\s+|\s+$/g, '') !== '') {
|
||||
_this.lockDocument();
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
$where: $('#box2 .new'),
|
||||
label: 'New',
|
||||
shortcut: function(evt) {
|
||||
return evt.ctrlKey && evt.keyCode === 78
|
||||
},
|
||||
shortcutDescription: 'control + n',
|
||||
action: function() {
|
||||
_this.newDocument(!_this.doc.key);
|
||||
}
|
||||
},
|
||||
{
|
||||
$where: $('#box2 .duplicate'),
|
||||
label: 'Duplicate & Edit',
|
||||
shortcut: function(evt) {
|
||||
return _this.doc.locked && evt.ctrlKey && evt.keyCode === 68;
|
||||
},
|
||||
shortcutDescription: 'control + d',
|
||||
action: function() {
|
||||
_this.duplicateDocument();
|
||||
}
|
||||
},
|
||||
{
|
||||
$where: $('#box2 .raw'),
|
||||
label: 'Just Text',
|
||||
shortcut: function(evt) {
|
||||
return evt.ctrlKey && evt.shiftKey && evt.keyCode === 82;
|
||||
},
|
||||
shortcutDescription: 'control + shift + r',
|
||||
action: function() {
|
||||
window.location.href = '/raw/' + _this.doc.key;
|
||||
}
|
||||
},
|
||||
{
|
||||
$where: $('#box2 .twitter'),
|
||||
label: 'Twitter',
|
||||
shortcut: function(evt) {
|
||||
return _this.options.twitter && _this.doc.locked && evt.ctrlKey && evt.keyCode == 84;
|
||||
},
|
||||
shortcutDescription: 'control + t',
|
||||
action: function() {
|
||||
window.open('https://twitter.com/share?url=' + encodeURI(window.location.href));
|
||||
}
|
||||
}
|
||||
];
|
||||
for (var i = 0; i < this.buttons.length; i++) {
|
||||
this.configureButton(this.buttons[i]);
|
||||
}
|
||||
};
|
||||
|
||||
haste.prototype.configureButton = function(options) {
|
||||
// Handle the click action
|
||||
options.$where.click(function(evt) {
|
||||
evt.preventDefault();
|
||||
if (!options.clickDisabled && $(this).hasClass('enabled')) {
|
||||
options.action();
|
||||
}
|
||||
});
|
||||
// Show the label
|
||||
options.$where.mouseenter(function(evt) {
|
||||
$('#box3 .label').text(options.label);
|
||||
$('#box3 .shortcut').text(options.shortcutDescription || '');
|
||||
$('#box3').show();
|
||||
$(this).append($('#pointer').remove().show());
|
||||
});
|
||||
// Hide the label
|
||||
options.$where.mouseleave(function(evt) {
|
||||
$('#box3').hide();
|
||||
$('#pointer').hide();
|
||||
});
|
||||
};
|
||||
|
||||
// Configure keyboard shortcuts for the textarea
|
||||
haste.prototype.configureShortcuts = function() {
|
||||
var _this = this;
|
||||
$(document.body).keydown(function(evt) {
|
||||
var button;
|
||||
for (var i = 0 ; i < _this.buttons.length; i++) {
|
||||
button = _this.buttons[i];
|
||||
if (button.shortcut && button.shortcut(evt)) {
|
||||
evt.preventDefault();
|
||||
button.action();
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
///// Tab behavior in the textarea - 2 spaces per tab
|
||||
$(function() {
|
||||
|
||||
$('textarea').keydown(function(evt) {
|
||||
if (evt.keyCode === 9) {
|
||||
evt.preventDefault();
|
||||
var myValue = ' ';
|
||||
// http://stackoverflow.com/questions/946534/insert-text-into-textarea-with-jquery
|
||||
// For browsers like Internet Explorer
|
||||
if (document.selection) {
|
||||
this.focus();
|
||||
sel = document.selection.createRange();
|
||||
sel.text = myValue;
|
||||
this.focus();
|
||||
}
|
||||
// Mozilla and Webkit
|
||||
else if (this.selectionStart || this.selectionStart == '0') {
|
||||
var startPos = this.selectionStart;
|
||||
var endPos = this.selectionEnd;
|
||||
var scrollTop = this.scrollTop;
|
||||
this.value = this.value.substring(0, startPos) + myValue +
|
||||
this.value.substring(endPos,this.value.length);
|
||||
this.focus();
|
||||
this.selectionStart = startPos + myValue.length;
|
||||
this.selectionEnd = startPos + myValue.length;
|
||||
this.scrollTop = scrollTop;
|
||||
}
|
||||
else {
|
||||
this.value += myValue;
|
||||
this.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Haste.Models.Document = Backbone.Model.extend({
|
||||
idAttribute: 'key',
|
||||
urlRoot: '/documents'
|
||||
});
|
||||
|
||||
Haste.Routers.Document = Backbone.Router.extend({
|
||||
routes: {
|
||||
':id.:extension': 'show',
|
||||
':id': 'show',
|
||||
'': 'new'
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
this.editor = new Haste.Views.EditorView();
|
||||
},
|
||||
|
||||
show: function(id, extension) {
|
||||
this.editor.load(id, extension);
|
||||
},
|
||||
|
||||
new: function() {
|
||||
this.editor.new();
|
||||
}
|
||||
});
|
||||
|
||||
Haste.Views.ActionsView = Backbone.View.extend({
|
||||
el: 'header',
|
||||
|
||||
events: {
|
||||
'click .new': 'new',
|
||||
'click .save': 'save',
|
||||
'click .edit': 'edit',
|
||||
'click .raw': 'raw',
|
||||
'click .twitter': 'raw'
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
this.parent = this.options.parent;
|
||||
},
|
||||
|
||||
toggleActions: function() {
|
||||
var klass = 'disabled';
|
||||
|
||||
if (this.parent.model.isNew()) {
|
||||
$('.save', this.el).removeClass(klass);
|
||||
$('.edit, .raw, .twitter', this.el).addClass(klass);
|
||||
} else {
|
||||
$('.save', this.el).addClass(klass);
|
||||
$('.edit, .raw, .twitter', this.el).removeClass(klass);
|
||||
}
|
||||
|
||||
this.setLink('.raw', 'raw/' + this.parent.model.id);
|
||||
this.setLink('.twitter', 'https://twitter.com/share?url=' + encodeURI(window.location.href));
|
||||
},
|
||||
|
||||
setLink: function(el, href) {
|
||||
if (this.parent.model.isNew()) {
|
||||
href = '#';
|
||||
}
|
||||
|
||||
$(el, this.el).attr('href', href);
|
||||
},
|
||||
|
||||
new: function(event) {
|
||||
event.preventDefault();
|
||||
this.parent.new();
|
||||
Backbone.history.navigate('');
|
||||
},
|
||||
|
||||
save: function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (!this.parent.model.isNew()) { return; }
|
||||
|
||||
this.parent.save();
|
||||
},
|
||||
|
||||
edit: function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (this.parent.model.isNew()) { return; }
|
||||
|
||||
this.parent.model.set('key', null);
|
||||
Backbone.history.navigate('/');
|
||||
},
|
||||
|
||||
raw: function(event) {
|
||||
if (this.model.isNew()) {
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
Haste.Views.EditorView = Backbone.View.extend({
|
||||
el: 'textarea',
|
||||
|
||||
initialize: function() {
|
||||
this.codeMirror = CodeMirror.fromTextArea(this.el, {
|
||||
mode: 'null',
|
||||
lineNumbers: true,
|
||||
theme: 'solarized-dark'
|
||||
});
|
||||
|
||||
this.actionsView = new Haste.Views.ActionsView({ parent: this });
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.codeMirror.setOption('mode', this.model.get('mode') || 'null');
|
||||
this.codeMirror.setValue(this.model.get('data') || '');
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
new: function() {
|
||||
this.model = new Haste.Models.Document();
|
||||
|
||||
this.model.on('change', this.render, this);
|
||||
this.model.on('change', this.toggleLock, this);
|
||||
this.model.on('change', this.actionsView.toggleActions, this.actionsView);
|
||||
|
||||
this.model.trigger('change');
|
||||
},
|
||||
|
||||
load: function(key, extension) {
|
||||
this.new();
|
||||
|
||||
var mode = Haste.extensionMap[extension];
|
||||
this.model.set({ key: key, mode: mode }, { silent: true });
|
||||
|
||||
this.model.fetch();
|
||||
},
|
||||
|
||||
save: function() {
|
||||
var data = this.codeMirror.getValue();
|
||||
|
||||
if (!data) { return; }
|
||||
|
||||
this.model.save('data', data, {
|
||||
success: function(model, response) {
|
||||
Backbone.history.navigate(model.id);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
toggleLock: function() {
|
||||
this.codeMirror.setOption('readOnly', !this.model.isNew());
|
||||
this.actionsView.toggleActions();
|
||||
}
|
||||
});
|
||||
|
||||
$(function() {
|
||||
Haste.init();
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue