Move to static, rewrite client-JS
This commit is contained in:
John Crepezzi
parent
5b874e3456
commit
c5a551f770
|
|
@ -1,63 +0,0 @@
|
||||||
// TODO implement save as a jquery method
|
|
||||||
// TODO support for browsers without pushstate
|
|
||||||
// TODO support for push state navigation
|
|
||||||
var save = function(data, callback) {
|
|
||||||
var high = hljs.highlightAuto(data);
|
|
||||||
var pack = {
|
|
||||||
language: high.language,
|
|
||||||
data: data
|
|
||||||
};
|
|
||||||
pack.value = high.value;
|
|
||||||
pack.uuid = '123456';
|
|
||||||
callback(pack);
|
|
||||||
};
|
|
||||||
|
|
||||||
$(function() {
|
|
||||||
|
|
||||||
$('textarea').focus();
|
|
||||||
|
|
||||||
$('textarea').keyup(function(evt) {
|
|
||||||
if (evt.ctrlKey && evt.which === 76) {
|
|
||||||
save($('textarea').val(), function(ret) {
|
|
||||||
if (ret) {
|
|
||||||
$('#box code').html(ret.value);
|
|
||||||
// window.history.pushState(null, 'Heist - ' + ret.language, '/~john/heist/' + ret.uuid);
|
|
||||||
document.title = 'heist - ' + ret.language;
|
|
||||||
$('textarea').hide();
|
|
||||||
$('#box').show();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$('textarea').keydown(function(evt) {
|
|
||||||
if (evt.keyCode === 9) {
|
|
||||||
evt.preventDefault();
|
|
||||||
var myValue = ' ';
|
|
||||||
// Inspired by 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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
var http = require('http');
|
||||||
|
var fs = require('fs');
|
||||||
|
var path = require('path');
|
||||||
|
var url = require('url');
|
||||||
|
|
||||||
|
|
||||||
|
// TODO logging
|
||||||
|
// TODO preparse static instead of using exists
|
||||||
|
|
||||||
|
//////////////
|
||||||
|
|
||||||
|
var StaticHandler = function(path) {
|
||||||
|
this.path = path;
|
||||||
|
this.defaultPath = '/index.html';
|
||||||
|
};
|
||||||
|
|
||||||
|
StaticHandler.contentTypeFor = function(ext) {
|
||||||
|
if (ext == '.js') return 'text/javascript';
|
||||||
|
else if (ext == '.css') return 'text/css';
|
||||||
|
else if (ext == '.html') return 'text/html';
|
||||||
|
else if (ext == '.ico') return 'image/ico';
|
||||||
|
else console.log(ext);
|
||||||
|
};
|
||||||
|
|
||||||
|
StaticHandler.prototype.handle = function(request, response) {
|
||||||
|
var inc = url.parse(request.url, false);
|
||||||
|
var filePath = this.path + (inc.pathname == '/' ? this.defaultPath : inc.pathname);
|
||||||
|
path.exists(filePath, function(exists) {
|
||||||
|
if (exists) {
|
||||||
|
fs.readFile(filePath, function(error, content) {
|
||||||
|
if (error) {
|
||||||
|
// TODO make nice
|
||||||
|
console.log(error);
|
||||||
|
response.writeHead(500);
|
||||||
|
response.end();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
response.writeHead(200, { 'content-type': StaticHandler.contentTypeFor(path.extname(filePath)) });
|
||||||
|
response.end(content, 'utf-8');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// TODO make nice
|
||||||
|
response.writeHead(404);
|
||||||
|
response.end();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
///////////
|
||||||
|
|
||||||
|
http.createServer(function(request, response) {
|
||||||
|
|
||||||
|
var handler = new StaticHandler('./static');
|
||||||
|
handler.handle(request, response);
|
||||||
|
|
||||||
|
}).listen(7777);
|
||||||
|
|
@ -0,0 +1,115 @@
|
||||||
|
|
||||||
|
var heist_document = function() {
|
||||||
|
|
||||||
|
this.locked = false;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
heist_document.prototype.save = function(data, callback) {
|
||||||
|
if (this.locked) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
var high = hljs.highlightAuto(data);
|
||||||
|
var pack = {
|
||||||
|
language: high.language,
|
||||||
|
data: data
|
||||||
|
};
|
||||||
|
pack.value = high.value;
|
||||||
|
pack.uuid = '123456';
|
||||||
|
this.locked = true;
|
||||||
|
callback(pack);
|
||||||
|
};
|
||||||
|
|
||||||
|
var heist = function(appName) {
|
||||||
|
|
||||||
|
this.appName = appName;
|
||||||
|
this.setTitle();
|
||||||
|
this.$textarea = $('textarea');
|
||||||
|
this.$box = $('#box');
|
||||||
|
this.$code = $('#box code');
|
||||||
|
|
||||||
|
this.configureShortcuts();
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// Set the page title - include the appName
|
||||||
|
heist.prototype.setTitle = function(ext) {
|
||||||
|
var title = ext ? this.appName + ' - ' + ext : this.appName;
|
||||||
|
document.title = title;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Remove the current document (if there is one)
|
||||||
|
// and set up for a new one
|
||||||
|
heist.prototype.newDocument = function(ext) {
|
||||||
|
this.doc = new heist_document();
|
||||||
|
this.$box.hide();
|
||||||
|
this.$textarea.val('').show().focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Lock the current document
|
||||||
|
heist.prototype.lockDocument = function() {
|
||||||
|
var _this = this;
|
||||||
|
this.doc.save(this.$textarea.val(), function(ret) {
|
||||||
|
if (ret) {
|
||||||
|
_this.$code.html(ret.value);
|
||||||
|
_this.setTitle(ret.language);
|
||||||
|
_this.$textarea.val('').hide();
|
||||||
|
_this.$box.show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Configure keyboard shortcuts for the textarea
|
||||||
|
heist.prototype.configureShortcuts = function() {
|
||||||
|
var _this = this;
|
||||||
|
this.$textarea.keyup(function(evt) {
|
||||||
|
// ^L for lock
|
||||||
|
if (evt.ctrlKey && evt.which === 76) {
|
||||||
|
_this.lockDocument();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// TODO refuse to lock empty documents
|
||||||
|
// TODO support for browsers without pushstate
|
||||||
|
// TODO support for push state navigation
|
||||||
|
// TODO ctrl-n for new
|
||||||
|
// TODO ctrl-d for duplicate
|
||||||
|
|
||||||
|
$(function() {
|
||||||
|
|
||||||
|
$('textarea').focus();
|
||||||
|
|
||||||
|
$('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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -37,13 +37,19 @@
|
||||||
<script type="text/javascript" src="highlight.min.js"></script>
|
<script type="text/javascript" src="highlight.min.js"></script>
|
||||||
<script type="text/javascript" src="application.js"></script>
|
<script type="text/javascript" src="application.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(function() {
|
||||||
|
var app = new heist('heist');
|
||||||
|
app.newDocument();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<pre id="box" style="display:none;"><code></code></pre>
|
<pre id="box" style="display:none;"><code></code></pre>
|
||||||
|
<textarea spellcheck="false" style="display:none;"></textarea>
|
||||||
<textarea spellcheck="false"></textarea>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
Loading…
Reference in New Issue