Initial commit
This commit is contained in:
Leo
commit
3f2a51904b
3 changed files with 3139 additions and 0 deletions
318
index.html
Normal file
318
index.html
Normal file
|
|
@ -0,0 +1,318 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>Paste</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
:root {
|
||||||
|
--bg-primary: #1e1e1e;
|
||||||
|
--bg-secondary: #252526;
|
||||||
|
--bg-tertiary: #333333;
|
||||||
|
--text-primary: #d4d4d4;
|
||||||
|
--text-secondary: #858585;
|
||||||
|
--accent: #007acc;
|
||||||
|
--border: #404040;
|
||||||
|
--line-num-bg: #1e1e1e;
|
||||||
|
--line-num-text: #858585;
|
||||||
|
}
|
||||||
|
body.invert {
|
||||||
|
--bg-primary: #ffffff;
|
||||||
|
--bg-secondary: #f3f3f3;
|
||||||
|
--bg-tertiary: #e0e0e0;
|
||||||
|
--text-primary: #333333;
|
||||||
|
--text-secondary: #666666;
|
||||||
|
--accent: #0066cc;
|
||||||
|
--border: #cccccc;
|
||||||
|
--line-num-bg: #f8f8f8;
|
||||||
|
--line-num-text: #999999;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: var(--bg-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#editor-container {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#line-numbers {
|
||||||
|
background: var(--line-num-bg);
|
||||||
|
color: var(--line-num-text);
|
||||||
|
padding: 12px 8px;
|
||||||
|
text-align: right;
|
||||||
|
user-select: none;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
min-width: 50px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
#plaintext {
|
||||||
|
flex: 1;
|
||||||
|
background: var(--bg-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border: none;
|
||||||
|
padding: 12px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
resize: none;
|
||||||
|
outline: none;
|
||||||
|
overflow: auto;
|
||||||
|
white-space: pre;
|
||||||
|
tab-size: 4;
|
||||||
|
}
|
||||||
|
#nav {
|
||||||
|
background: var(--bg-tertiary);
|
||||||
|
padding: 8px 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.btn:hover {
|
||||||
|
background: var(--accent);
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
#url-output {
|
||||||
|
flex: 1;
|
||||||
|
background: var(--bg-primary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: 6px 10px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 13px;
|
||||||
|
border-radius: 3px;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
.url-warning {
|
||||||
|
color: #ff6b6b;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
#status {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="lzma.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="editor-container">
|
||||||
|
<div id="line-numbers">1</div>
|
||||||
|
<textarea id="plaintext" spellcheck="false" placeholder="Paste your text or code here..."></textarea>
|
||||||
|
</div>
|
||||||
|
<div id="nav">
|
||||||
|
<button class="btn" id="btn-generate">Generate URL</button>
|
||||||
|
<button class="btn" id="btn-copy-content">Copy Content</button>
|
||||||
|
<button class="btn" id="btn-invert">Invert Colors</button>
|
||||||
|
<input type="text" id="url-output" class="hidden" readonly placeholder="URL will appear here"/>
|
||||||
|
<button class="btn hidden" id="btn-copy-url">Copy URL</button>
|
||||||
|
<span id="url-warning" class="url-warning hidden">Warning: URL is long and may not work in all browsers</span>
|
||||||
|
<span id="status"></span>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
var lzma = new LZMA("lzma_worker.js");
|
||||||
|
var URL_MAX_LENGTH = 8000;
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function(){
|
||||||
|
loadPreferences();
|
||||||
|
document.getElementById("plaintext").focus();
|
||||||
|
|
||||||
|
var base64 = location.hash.substr(1);
|
||||||
|
if (base64.length > 0) {
|
||||||
|
setStatus("Loading...");
|
||||||
|
decompressFromURL(base64);
|
||||||
|
}
|
||||||
|
|
||||||
|
setupEventListeners();
|
||||||
|
});
|
||||||
|
|
||||||
|
function setupEventListeners() {
|
||||||
|
var textarea = document.getElementById("plaintext");
|
||||||
|
var lineNumbers = document.getElementById("line-numbers");
|
||||||
|
|
||||||
|
textarea.addEventListener('input', updateLineNumbers);
|
||||||
|
textarea.addEventListener('scroll', syncScroll);
|
||||||
|
textarea.addEventListener('keydown', handleTab);
|
||||||
|
|
||||||
|
document.getElementById("btn-generate").addEventListener('click', function(){ generateURL('raw'); });
|
||||||
|
document.getElementById("btn-copy-content").addEventListener('click', copyContent);
|
||||||
|
document.getElementById("btn-invert").addEventListener('click', toggleInvert);
|
||||||
|
document.getElementById("btn-copy-url").addEventListener('click', copyURL);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateLineNumbers() {
|
||||||
|
var textarea = document.getElementById("plaintext");
|
||||||
|
var lineNumbers = document.getElementById("line-numbers");
|
||||||
|
var lines = textarea.value.split('\n');
|
||||||
|
var nums = [];
|
||||||
|
for (var i = 1; i <= lines.length; i++) {
|
||||||
|
nums.push(i);
|
||||||
|
}
|
||||||
|
lineNumbers.innerHTML = nums.join('<br>');
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncScroll() {
|
||||||
|
var textarea = document.getElementById("plaintext");
|
||||||
|
var lineNumbers = document.getElementById("line-numbers");
|
||||||
|
lineNumbers.scrollTop = textarea.scrollTop;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleTab(e) {
|
||||||
|
if (e.key === 'Tab') {
|
||||||
|
e.preventDefault();
|
||||||
|
var textarea = document.getElementById("plaintext");
|
||||||
|
var start = textarea.selectionStart;
|
||||||
|
var end = textarea.selectionEnd;
|
||||||
|
textarea.value = textarea.value.substring(0, start) + ' ' + textarea.value.substring(end);
|
||||||
|
textarea.selectionStart = textarea.selectionEnd = start + 4;
|
||||||
|
updateLineNumbers();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function decompressFromURL(base64) {
|
||||||
|
if (!fetch) {
|
||||||
|
setStatus("Browser not supported");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
fetch("data:application/octet-stream;base64," + base64)
|
||||||
|
.then(function(r) { return r.blob(); })
|
||||||
|
.then(function(blob) {
|
||||||
|
var reader = new FileReader();
|
||||||
|
reader.onload = function() {
|
||||||
|
var compressed = Array.from(new Uint8Array(reader.result));
|
||||||
|
lzma.decompress(compressed, function(plaintext, error) {
|
||||||
|
if (error) {
|
||||||
|
setStatus("Failed to decompress: " + error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
document.getElementById("plaintext").value = plaintext;
|
||||||
|
updateLineNumbers();
|
||||||
|
setStatus("Loaded");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
reader.readAsArrayBuffer(blob);
|
||||||
|
})
|
||||||
|
.catch(function(err) {
|
||||||
|
setStatus("Failed to load: " + err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateURL(format) {
|
||||||
|
var plaintext = document.getElementById("plaintext").value;
|
||||||
|
if (!plaintext) {
|
||||||
|
setStatus("Nothing to encode");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setStatus("Compressing...");
|
||||||
|
|
||||||
|
lzma.compress(plaintext, 1, function(compressed, error) {
|
||||||
|
if (error) {
|
||||||
|
setStatus("Compression failed: " + error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var reader = new FileReader();
|
||||||
|
reader.onload = function() {
|
||||||
|
var base64 = reader.result.substr(reader.result.indexOf(",") + 1);
|
||||||
|
var url = location.protocol + "//" + location.host + location.pathname + "#" + base64;
|
||||||
|
|
||||||
|
var urlOutput = document.getElementById("url-output");
|
||||||
|
var copyBtn = document.getElementById("btn-copy-url");
|
||||||
|
var warning = document.getElementById("url-warning");
|
||||||
|
|
||||||
|
urlOutput.value = url;
|
||||||
|
urlOutput.classList.remove("hidden");
|
||||||
|
copyBtn.classList.remove("hidden");
|
||||||
|
|
||||||
|
if (url.length > URL_MAX_LENGTH) {
|
||||||
|
warning.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
warning.classList.add("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
setStatus("URL generated (" + url.length + " chars)");
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(new Blob([new Uint8Array(compressed)]));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyContent() {
|
||||||
|
var textarea = document.getElementById("plaintext");
|
||||||
|
if (!textarea.value) {
|
||||||
|
setStatus("Nothing to copy");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
navigator.clipboard.writeText(textarea.value).then(function() {
|
||||||
|
setStatus("Content copied!");
|
||||||
|
}).catch(function() {
|
||||||
|
textarea.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
setStatus("Content copied!");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyURL() {
|
||||||
|
var urlOutput = document.getElementById("url-output");
|
||||||
|
navigator.clipboard.writeText(urlOutput.value).then(function() {
|
||||||
|
setStatus("URL copied!");
|
||||||
|
}).catch(function() {
|
||||||
|
urlOutput.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
setStatus("URL copied!");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleInvert() {
|
||||||
|
var isInverted = document.body.classList.toggle("invert");
|
||||||
|
savePreference("invert", isInverted ? "1" : "0");
|
||||||
|
setStatus(isInverted ? "Light mode" : "Dark mode");
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadPreferences() {
|
||||||
|
var matches;
|
||||||
|
if (matches = /(?:^|;)invert=([01])(?:;|$)/.exec(document.cookie)) {
|
||||||
|
if (matches[1] === "1") {
|
||||||
|
document.body.classList.add("invert");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function savePreference(name, value) {
|
||||||
|
document.cookie = name + "=" + value + ";max-age=63072000;path=/";
|
||||||
|
}
|
||||||
|
|
||||||
|
function setStatus(msg) {
|
||||||
|
document.getElementById("status").textContent = msg;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
153
lzma.js
Normal file
153
lzma.js
Normal file
|
|
@ -0,0 +1,153 @@
|
||||||
|
//! © 2015 Nathan Rugg <nmrugg@gmail.com> | MIT
|
||||||
|
/// See LICENSE for more details.
|
||||||
|
|
||||||
|
// jshint bitwise:true, curly:true, eqeqeq:true, forin:true, immed:true, latedef:true, newcap:true, noarg:true, noempty:true, nonew:true, onevar:true, plusplus:true, quotmark:double, undef:true, unused:strict, browser: true, node: true
|
||||||
|
|
||||||
|
/// Does the environment support web workers? If not, let's load the worker manually (without polluting the global scope).
|
||||||
|
if (typeof Worker === "undefined" || (typeof location !== "undefined" && location.protocol === "file:")) {
|
||||||
|
/// Is this Node.js?
|
||||||
|
if (typeof global !== "undefined" && typeof require !== "undefined") {
|
||||||
|
this.LZMA = function (lzma_path) {
|
||||||
|
return require(lzma_path || "./lzma_worker.js").LZMA;
|
||||||
|
};
|
||||||
|
/// Is this a browser?
|
||||||
|
} else if (typeof window !== "undefined" && window.document) {
|
||||||
|
(function () {
|
||||||
|
var that = this,
|
||||||
|
global_var,
|
||||||
|
req = function req(path) {
|
||||||
|
var script_tag = document.createElement("script");
|
||||||
|
script_tag.type ="text/javascript";
|
||||||
|
script_tag.src = path;
|
||||||
|
script_tag.onload = function () {
|
||||||
|
/// Make sure this LZMA variable doesn't get overwritten by the worker's.
|
||||||
|
that.LZMA = non_worker_lzma;
|
||||||
|
};
|
||||||
|
document.getElementsByTagName("head")[0].appendChild(script_tag);
|
||||||
|
};
|
||||||
|
|
||||||
|
/// Determine the global variable (it's called "window" in browsers, "global" in Node.js).
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
global_var = window;
|
||||||
|
} else if (global) {
|
||||||
|
global_var = global;
|
||||||
|
}
|
||||||
|
|
||||||
|
function non_worker_lzma(path) {
|
||||||
|
var fake_lzma;
|
||||||
|
|
||||||
|
req(path);
|
||||||
|
|
||||||
|
fake_lzma = {
|
||||||
|
compress: function compress(mixed, mode, on_finish, on_progress) {
|
||||||
|
if (global_var.LZMA_WORKER) {
|
||||||
|
global_var.LZMA_WORKER.compress(mixed, mode, on_finish, on_progress);
|
||||||
|
} else {
|
||||||
|
/// Wait
|
||||||
|
setTimeout(function ()
|
||||||
|
{
|
||||||
|
fake_lzma.compress(mixed, mode, on_finish, on_progress);
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
decompress: function decompress(byte_arr, on_finish, on_progress) {
|
||||||
|
if (global_var.LZMA_WORKER) {
|
||||||
|
global_var.LZMA_WORKER.decompress(byte_arr, on_finish, on_progress);
|
||||||
|
} else {
|
||||||
|
/// Wait
|
||||||
|
setTimeout(function ()
|
||||||
|
{
|
||||||
|
fake_lzma.decompress(byte_arr, on_finish, on_progress);
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
worker: function worker () {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return fake_lzma;
|
||||||
|
}
|
||||||
|
|
||||||
|
that.LZMA = non_worker_lzma;
|
||||||
|
}());
|
||||||
|
} else {
|
||||||
|
/// It doesn't seem to be either Node.js or a browser.
|
||||||
|
console.error("Can't load the worker. Sorry.");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
/// Let's use Web Workers.
|
||||||
|
///NOTE: The "this" keyword is the global context ("window" variable) if loaded via a <script> tag
|
||||||
|
/// or the function context if loaded as a module (e.g., in Node.js).
|
||||||
|
this.LZMA = function (lzma_path) {
|
||||||
|
var action_compress = 1,
|
||||||
|
action_decompress = 2,
|
||||||
|
action_progress = 3,
|
||||||
|
|
||||||
|
callback_obj = {},
|
||||||
|
|
||||||
|
///NOTE: Node.js needs something like "./" or "../" at the beginning.
|
||||||
|
lzma_worker = new Worker(lzma_path || "./lzma_worker-min.js");
|
||||||
|
|
||||||
|
lzma_worker.onmessage = function onmessage(e) {
|
||||||
|
if (e.data.action === action_progress) {
|
||||||
|
if (callback_obj[e.data.cbn] && typeof callback_obj[e.data.cbn].on_progress === "function") {
|
||||||
|
callback_obj[e.data.cbn].on_progress(e.data.result);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (callback_obj[e.data.cbn] && typeof callback_obj[e.data.cbn].on_finish === "function") {
|
||||||
|
callback_obj[e.data.cbn].on_finish(e.data.result, e.data.error);
|
||||||
|
|
||||||
|
/// Since the (de)compression is complete, the callbacks are no longer needed.
|
||||||
|
delete callback_obj[e.data.cbn];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/// Very simple error handling.
|
||||||
|
lzma_worker.onerror = function(event) {
|
||||||
|
var err = new Error(event.message + " (" + event.filename + ":" + event.lineno + ")");
|
||||||
|
|
||||||
|
for (var cbn in callback_obj) {
|
||||||
|
callback_obj[cbn].on_finish(null, err);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.error('Uncaught error in lzma_worker', err);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (function () {
|
||||||
|
|
||||||
|
function send_to_worker(action, data, mode, on_finish, on_progress) {
|
||||||
|
var cbn;
|
||||||
|
|
||||||
|
do {
|
||||||
|
cbn = Math.floor(Math.random() * (10000000));
|
||||||
|
} while(typeof callback_obj[cbn] !== "undefined");
|
||||||
|
|
||||||
|
callback_obj[cbn] = {
|
||||||
|
on_finish: on_finish,
|
||||||
|
on_progress: on_progress
|
||||||
|
};
|
||||||
|
|
||||||
|
lzma_worker.postMessage({
|
||||||
|
action: action, /// action_compress = 1, action_decompress = 2, action_progress = 3
|
||||||
|
cbn: cbn, /// callback number
|
||||||
|
data: data,
|
||||||
|
mode: mode
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
compress: function compress(mixed, mode, on_finish, on_progress) {
|
||||||
|
send_to_worker(action_compress, mixed, mode, on_finish, on_progress);
|
||||||
|
},
|
||||||
|
decompress: function decompress(byte_arr, on_finish, on_progress) {
|
||||||
|
send_to_worker(action_decompress, byte_arr, false, on_finish, on_progress);
|
||||||
|
},
|
||||||
|
worker: function worker() {
|
||||||
|
return lzma_worker;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}());
|
||||||
|
};
|
||||||
|
}
|
||||||
2668
lzma_worker.js
Normal file
2668
lzma_worker.js
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue