Made app.js proper Class, added support for non-absolute path

Something that would solve relevant upstream issues/prs: seejohnrun/haste-server#53 seejohnrun/haste-server#140
This commit is contained in:
zneix 2020-09-05 18:13:49 +02:00
parent 7c7fd10c29
commit 3d501c980f
No known key found for this signature in database
GPG Key ID: 911916E0523B22F6
2 changed files with 329 additions and 328 deletions

View File

@ -1,160 +1,332 @@
/* global $, hljs, window, document */
///// represents a single document
let haste_document = function(){
this.locked = false;
};
// Escapes HTML tag characters
haste_document.prototype.htmlEscape = function(s){
return s
.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '&lt;')
.replace(/"/g, '&quot;');
};
// Get this document from the server and lock it here
haste_document.prototype.load = function(key, callback, lang){
let _this = this;
$.ajax(`/documents/${key}`, {
type: 'get',
dataType: 'json',
success: function(res){
_this.locked = true;
_this.key = key;
_this.data = res.data;
let high;
try {
if (lang == 'txt'){
high = { value: _this.htmlEscape(res.data) };
class haste_document {
constructor(app){
this.locked = false;
this.app = app;
}
// Escapes HTML tag characters
htmlEscape(s){
return s
.replace(/&/g, '&amp;')
.replace(/>/g, '&gt;')
.replace(/</g, '&lt;')
.replace(/"/g, '&quot;');
}
// Get this document from the server and lock it here
load(key, callback, lang){
let _this = this;
$.ajax(`${_this.app.baseUrl}documents/${key}`, {
type: 'get',
dataType: 'json',
success: function (res){
_this.locked = true;
_this.key = key;
_this.data = res.data;
let high;
try {
if (lang == 'txt'){
high = { value: _this.htmlEscape(res.data) };
}
else if (lang){
high = hljs.highlight(lang, res.data);
}
else {
high = hljs.highlightAuto(res.data);
}
}
else if (lang){
high = hljs.highlight(lang, res.data);
}
else {
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 (){
callback(false);
}
catch(err){
// failed highlight, fall back on auto
high = hljs.highlightAuto(res.data);
});
}
// Save this document to the server and lock it here
save(data, callback){
if (this.locked)
return false;
this.data = data;
let _this = this;
$.ajax(`${_this.app.baseUrl}documents`, {
type: 'post',
data: data,
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function (res){
_this.locked = true;
_this.key = res.key;
let 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!' });
}
}
callback({
value: high.value,
key: key,
language: high.language || lang,
lineCount: res.data.split('\n').length
});
},
error: function(){
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;
let _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;
let 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
let 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();
};
// Set the page title - include the appName
haste.prototype.setTitle = function(ext){
document.title = `${this.appName}${ext ? ` - ${ext}` : ''}`;
};
// Show a message box
haste.prototype.showMessage = function(msg, cls){
let 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 = enable => {
let $this;
$('#box2 .function').each(function(){
$this = $(this);
for (const el of enable){
if ($this.hasClass(el)){
$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, '/');
class haste {
constructor(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();
this.baseUrl = options.baseUrl || '/';
}
this.setTitle();
this.lightKey();
this.$textarea.val('').show('fast', function(){
this.focus();
});
this.removeLineNumbers();
};
// Set the page title - include the appName
setTitle(ext){
document.title = `${this.appName}${ext ? ` - ${ext}` : ''}`;
}
// Show a message box
showMessage(msg, cls){
let msgBox = $(`<li class="${cls || 'info'}">${msg}</li>`);
$('#messages').prepend(msgBox);
setTimeout(function (){
msgBox.slideUp('fast', function (){ $(this).remove(); });
}, 3000);
}
// Show the light key
lightKey(){
this.configureKey(['new', 'save']);
}
// Show the full key
fullKey(){
this.configureKey(['new', 'duplicate', 'twitter', 'raw']);
}
// Set the key up for certain things to be enabled
configureKey(enable){
let $this;
$('#box2 .function').each(function (){
$this = $(this);
for (const el of enable){
if ($this.hasClass(el)){
$this.addClass('enabled');
return true;
}
}
$this.removeClass('enabled');
});
}
// Remove the current document (if there is one)
// and set up for a new one
newDocument(hideHistory){
this.$box.hide();
this.doc = new haste_document(this);
if (!hideHistory){
window.history.pushState(null, this.appName, this.baseUrl);
}
this.setTitle();
this.lightKey();
this.$textarea.val('').show('fast', function (){
this.focus();
});
this.removeLineNumbers();
}
// Look up the extension preferred for a type
// If not found, return the type itself - which we'll place as the extension
lookupExtensionByType(type){
for (let 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
lookupTypeByExtension(ext){
return haste.extensionMap[ext] || ext;
}
// Add line numbers to the document
// For the specified number of lines
addLineNumbers(lineCount){
let h = '';
for (let i = 0; i < lineCount; i++){
h += (i + 1).toString() + '<br/>';
}
$('#linenos').html(h);
}
// Remove the line numbers
removeLineNumbers(){
$('#linenos').html('&gt;');
}
// Load a document and show it
loadDocument(key){
// Split the key up
let parts = key.split('.', 2);
// Ask for what we want
let _this = this;
_this.doc = new haste_document(this);
_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
duplicateDocument(){
if (this.doc.locked){
let currentData = this.doc.data;
this.newDocument();
this.$textarea.val(currentData);
}
}
// Lock the current document
lockDocument(){
let _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);
let file = _this.baseUrl + 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);
}
});
}
configureButtons(){
let _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 = `${_this.baseUrl}raw/${_this.doc.key}`;
}
},
{
$where: $('#box2 .twitter'),
label: 'Twitter',
shortcut: function (evt){
return _this.options.twitter && _this.doc.locked && evt.shiftKey && evt.ctrlKey && evt.keyCode == 84;
},
shortcutDescription: 'control + shift + t',
action: function (){
window.open(`https://twitter.com/share?url=${encodeURI(window.location.href)}`);
}
}
];
for (const button of this.buttons){
this.configureButton(button);
}
}
configureButton(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 (){
$('#box3 .label').text(options.label);
$('#box3 .shortcut').text(options.shortcutDescription || '');
$('#box3').show();
$(this).append($('#pointer').remove().show());
});
// Hide the label
options.$where.mouseleave(function (){
$('#box3').hide();
$('#pointer').hide();
});
}
// Configure keyboard shortcuts for the textarea
configureShortcuts(){
let _this = this;
$(document.body).keydown(function (evt){
for (const button of _this.buttons){
if (button.shortcut && button.shortcut(evt)){
evt.preventDefault();
button.action();
return;
}
}
});
}
}
// Map of common extensions
// Note: this list does not need to include anything that IS its extension,
@ -170,191 +342,15 @@ haste.extensionMap = {
swift: 'swift'
};
// 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 (let 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){
let h = '';
for (let i = 0; i < lineCount; i++){
h += (i + 1).toString() + '<br/>';
}
$('#linenos').html(h);
};
// Remove the line numbers
haste.prototype.removeLineNumbers = function(){
$('#linenos').html('&gt;');
};
// Load a document and show it
haste.prototype.loadDocument = function(key){
// Split the key up
let parts = key.split('.', 2);
// Ask for what we want
let _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){
let currentData = this.doc.data;
this.newDocument();
this.$textarea.val(currentData);
}
};
// Lock the current document
haste.prototype.lockDocument = function(){
let _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);
let 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(){
let _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.shiftKey && evt.ctrlKey && evt.keyCode == 84;
},
shortcutDescription: 'control + shift + t',
action: function(){
window.open(`https://twitter.com/share?url=${encodeURI(window.location.href)}`);
}
}
];
for (const button of this.buttons){
this.configureButton(button);
}
};
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(){
$('#box3 .label').text(options.label);
$('#box3 .shortcut').text(options.shortcutDescription || '');
$('#box3').show();
$(this).append($('#pointer').remove().show());
});
// Hide the label
options.$where.mouseleave(function(){
$('#box3').hide();
$('#pointer').hide();
});
};
// Configure keyboard shortcuts for the textarea
haste.prototype.configureShortcuts = function(){
let _this = this;
$(document.body).keydown(function(evt){
for (const button of _this.buttons){
if (button.shortcut && button.shortcut(evt)){
evt.preventDefault();
button.action();
return;
}
}
});
};
///// Tab behavior in the textarea - 2 spaces per tab
$(function(){

View File

@ -17,9 +17,9 @@
let app = null;
// Handle pops
let handlePop = function(evt){
let path = evt.target.location.pathname;
if (path == '/'){ app.newDocument(true); }
else { app.loadDocument(path.substring(1, path.length)); }
let path = evt.target.location.href;
if (path == app.baseUrl) app.newDocument(true);
else app.loadDocument(path.split('/').slice(-1)[0]);
};
// Set up the pop state to handle loads, skipping the first load
// to make chrome behave like others:
@ -31,7 +31,12 @@
}, 1000);
// Construct app and load initial path
$(function(){
app = new haste('hastebin', { twitter: true });
let baseUrl = window.location.href.split('/');
console.log(baseUrl);
baseUrl = baseUrl.slice(0, baseUrl.length - 1).join('/') + '/';
console.log(baseUrl);
// baseUrl = 'https://plazatest.zneix.eu/haste/';
app = new haste('hastebin', { twitter: true, baseUrl: baseUrl });
handlePop({ target: window });
});
</script>
@ -44,7 +49,7 @@
<div id="key">
<div id="pointer" style="display:none;"></div>
<div id="box1">
<a href="/about.md" class="logo"></a>
<a href="about.md" class="logo"></a>
</div>
<div id="box2">
<button class="save function button-picture">Save</button>