mirror of
https://github.com/arfct/itty-bitty.git
synced 2026-03-11 08:54:33 +00:00
Add updated compression + encryption
This commit is contained in:
Nicholas Jitkoff
parent
0d8cc83090
commit
535f379dc6
3 changed files with 77 additions and 51 deletions
|
|
@ -87,6 +87,7 @@ body.loaded:not(.edited) #placeholder {
|
|||
color: var(--text-placeholder-color);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
body.drag #content {
|
||||
|
|
@ -115,10 +116,10 @@ body.drag #content {
|
|||
#doc-title {
|
||||
outline: none;
|
||||
/* min-width: 180px; */
|
||||
top: 0;
|
||||
/* position: absolute; */
|
||||
/* top: 0; */
|
||||
position: absolute;
|
||||
padding: 0 1em;
|
||||
font-weight: normal;
|
||||
font-weight: bold;
|
||||
/* opacity:0.33; */
|
||||
user-select: none;
|
||||
cursor:
|
||||
|
|
@ -141,10 +142,14 @@ body.drag #content {
|
|||
bold;
|
||||
}
|
||||
|
||||
.no-metadata .metadata-on {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#doc-title-text:empty:after {
|
||||
content:"untitled";
|
||||
opacity:0.5;
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
#doc-title.open #metadata-text {
|
||||
|
|
@ -239,7 +244,7 @@ input:focus {
|
|||
}
|
||||
#ib-info:hover {
|
||||
pointer-events: all;
|
||||
color: black;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/*#toolbar a#copy {
|
||||
|
|
@ -620,10 +625,9 @@ div#editor.ql-container.ql-snow {
|
|||
margin-left: auto;
|
||||
}
|
||||
|
||||
|
||||
#formatbar .ql-toolbar,
|
||||
#formatbar .ql-stroke,
|
||||
#formatbar .ql-picker,
|
||||
#formatbar .ql-picker:not(.ql-color-picker),
|
||||
#formatbar.ql-snow a {
|
||||
color: var(--text-color) ;
|
||||
stroke: var(--text-color) ;
|
||||
|
|
@ -649,7 +653,7 @@ div#mainmenu {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
input#md-include {min-width: unset;height: 2em; width: 1em;margin-right: 1em;}
|
||||
input#md-include {min-width: unset;/* height: 2em; */width: 1em;margin-right: 0.5em;}
|
||||
|
||||
label:not(:first-child) {
|
||||
font-weight: normal;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
|
||||
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
|
||||
|
||||
<script src="/js/crypto-js.min.js"></script>
|
||||
<script src="/js/lzma/lzma_worker-min.js"></script>
|
||||
<script src="/edit.js" type="module"></script>
|
||||
|
||||
|
|
@ -36,12 +36,11 @@
|
|||
<div id="doc-title" class="toolbarbutton hide-before-edit" placeholder="untitled">
|
||||
<div class="title" id="doc-title-text"></div>
|
||||
<form id="md-contents" class="menu">
|
||||
<div class="inputrow"><label for="md-title">title</label><input type="text" name="title" id="md-title" placeholder="untitled"></div>
|
||||
<div class="inputrow"><label for="md-description">description</label><input type="text" name="description" id="md-description" placeholder="text"></div>
|
||||
<div class="inputrow"><label for="md-favicon">favicon</label><input type="text" name="favicon" id="md-favicon" placeholder="emoji or url"></div>
|
||||
<div class="inputrow"><label for="md-image">image</label><input type="text" name="image" id="md-image" placeholder="image url"></div>
|
||||
<div class="inputrow"><label for="md-title">title</label><input type="text" name="title" id="md-title" placeholder="untitled"><input title="Include link metadata" type="checkbox" name="includeMetadata" id="md-include" value="true" checked></div>
|
||||
<div class="inputrow metadata-on"><label for="md-description">description</label><input type="text" name="description" id="md-description" placeholder="text"></div>
|
||||
<div class="inputrow metadata-on"><label for="md-favicon">favicon</label><input type="text" name="favicon" id="md-favicon" placeholder="emoji or url"></div>
|
||||
<div class="inputrow metadata-on"><label for="md-image">image</label><input type="text" name="image" id="md-image" placeholder="image url"></div>
|
||||
<div class="inputrow"><label for="md-password">password</label><input type="text" name="password" id="md-password" placeholder="encryption password"></div>
|
||||
<div class="inputrow"><label for="md-include">metadata</label><input type="checkbox" name="includeMetadata" id="md-include" checked><label for="md-include">include link metadata</label><a href="">?</a></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
99
docs/edit.js
99
docs/edit.js
|
|
@ -76,7 +76,8 @@ window.onload = async function() {
|
|||
// content.addEventListener("keyup", handleInput);
|
||||
QS("#doc-title").addEventListener("keyup", handleInput);
|
||||
Array.from(document.getElementsByTagName("input")).forEach(i => i.addEventListener("keydown", handleInput))
|
||||
|
||||
document.getElementById("md-include").addEventListener("change", handleMetadataCheckbox);
|
||||
|
||||
document.getElementById("drop-zone").addEventListener("drop", handleDrop);
|
||||
document.getElementById("drop-zone").addEventListener("dragover", e => e.preventDefault());
|
||||
editor.addEventListener("paste", handlePaste);
|
||||
|
|
@ -118,6 +119,8 @@ window.onload = async function() {
|
|||
}
|
||||
} else {
|
||||
updateBodyClass();
|
||||
setContent(sessionStorage.getItem("editor-content"))
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -263,20 +266,25 @@ function fetchCodepen(url) {
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function handleInput(e) {
|
||||
handleContentChange(e);
|
||||
handleContentChange(e);
|
||||
}
|
||||
|
||||
function handleMetadataCheckbox(e) {
|
||||
document.body.classList.toggle("no-metadata", !e.target.checked)
|
||||
handleContentChange(e);
|
||||
}
|
||||
function getMetadata() {
|
||||
let formData = new FormData(document.forms[0]);
|
||||
var object = {};
|
||||
formData.forEach((value, key) => object[key] = value);
|
||||
|
||||
return object;
|
||||
}
|
||||
|
||||
async function handleContentChange() {
|
||||
|
||||
sessionStorage.setItem("editor-content", editor.innerHTML);
|
||||
var text = editor.innerText;
|
||||
let hasContent = text.trim().length > 0;
|
||||
|
||||
|
|
@ -284,32 +292,44 @@ async function handleContentChange() {
|
|||
if (!hasContent) return;
|
||||
|
||||
var metadata = getMetadata();
|
||||
var rawHTML = text.indexOf("</") > 0;
|
||||
if (rawHTML) {
|
||||
text = text.replace(/[ |\t]+/g, " ").replace(/> +</g, "> <");
|
||||
} else {
|
||||
text = editor.innerHTML;
|
||||
}
|
||||
|
||||
if (text.trim().length) {
|
||||
let url = `data:text/html;charset=utf-8,${encodeURIComponent(text)}`;
|
||||
let durl = new bitty.DataURL(url)
|
||||
durl = await durl.compress(bitty.GZIP_MARKER);
|
||||
let ratio = durl.href.length / url.length;
|
||||
console.log(`Compressed from ${url.length} to ${durl.href.length} bytes (${Math.round(ratio * 100)}%)`);
|
||||
var rawHTML = text.indexOf("</") > 0;
|
||||
if (rawHTML) {
|
||||
text = text.replace(/[ |\t]+/g, " ").replace(/> +</g, "> <");
|
||||
} else {
|
||||
text = editor.innerHTML;
|
||||
}
|
||||
|
||||
if (ratio <= 0.95) url = durl.href;
|
||||
if (rawHTML) {
|
||||
updateLink(url, metadata);
|
||||
} else {
|
||||
updateLink("?" + durl.data, metadata);
|
||||
}
|
||||
setFileName("");
|
||||
} else if (importedFileData) {
|
||||
updateLink(importedFileData, {title});
|
||||
} else {
|
||||
updateLink("");
|
||||
if (text.trim().length) {
|
||||
let url = `data:text/html;charset=utf-8,${encodeURIComponent(text)}`;
|
||||
let durl = new bitty.DataURL(url)
|
||||
|
||||
if (metadata.password) {
|
||||
durl.params.cipher = "aes-gcm"
|
||||
durl.params.style = "default"
|
||||
durl.params._password = metadata.password;
|
||||
}
|
||||
|
||||
durl = await durl.compress(bitty.GZIP_MARKER);
|
||||
let ratio = durl.href.length / url.length;
|
||||
console.debug(`Compressed from ${url.length} to ${durl.href.length} bytes (${Math.round(ratio * 100)}%)`);
|
||||
|
||||
|
||||
|
||||
|
||||
if (ratio <= 0.95) url = durl.href;
|
||||
if (rawHTML) {
|
||||
updateLink(url, metadata);
|
||||
} else if (metadata.password) {
|
||||
updateLink(durl.href, metadata);
|
||||
} else {
|
||||
updateLink("?" + durl.data, metadata);
|
||||
}
|
||||
setFileName("");
|
||||
} else if (importedFileData) {
|
||||
updateLink(importedFileData, {title});
|
||||
} else {
|
||||
updateLink("");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -323,13 +343,11 @@ let bittyLink = undefined;
|
|||
function updateLink(url, metadata, push) {
|
||||
|
||||
let title = metadata.title;
|
||||
// if (title) title = encodeURIComponent(title.trim().replace(/\s/g, "_"));
|
||||
|
||||
let includeMetadata = !metadata.includeMetadata;
|
||||
let path = includeMetadata ? "/" : bitty.metadataToPath(metadata) ?? "/";
|
||||
let prefix = includeMetadata ? bitty.encodePrettyComponent(title) : "";
|
||||
|
||||
console.log(`path [${path}]`)
|
||||
if (url.length) {
|
||||
url = path + "#" + prefix + "/" + url;
|
||||
} else {
|
||||
|
|
@ -342,15 +360,20 @@ function updateLink(url, metadata, push) {
|
|||
|
||||
document.getElementById("canonical").href = bittyLink;
|
||||
|
||||
console.log("previewing", bittyLink);
|
||||
if(previewContent) QS("#preview-frame").src = bittyLink;
|
||||
if(previewContent) {
|
||||
console.log("previewing", bittyLink);
|
||||
QS("#preview-frame").src = bittyLink;
|
||||
}
|
||||
|
||||
var hash = location.hash;
|
||||
if (push || !hash || !hash.length) {
|
||||
window.history.pushState(null, null, bittyLink);
|
||||
} else {
|
||||
window.history.replaceState(null, null, bittyLink);
|
||||
if (true) {
|
||||
if (push || !hash || !hash.length) {
|
||||
window.history.pushState(null, null, bittyLink);
|
||||
} else {
|
||||
window.history.replaceState(null, null, bittyLink);
|
||||
}
|
||||
}
|
||||
|
||||
var length = bittyLink.length;
|
||||
|
||||
QS("#length").innerText = length + " bytes";
|
||||
|
|
@ -372,7 +395,7 @@ function share() {
|
|||
title: 'itty.bitty',
|
||||
url: bittyLink
|
||||
}).then(() => {
|
||||
console.log('Thanks for sharing!');
|
||||
console.log('Shared!');
|
||||
})
|
||||
.catch(console.error);
|
||||
}
|
||||
|
|
@ -392,7 +415,7 @@ function toggleMenu(el) {
|
|||
|
||||
function toggleMetadata(e) {
|
||||
if (e.target.closest(".menu")) return;
|
||||
console.log(e)
|
||||
|
||||
QS("#md-contents").classList.toggle("menu-visible");
|
||||
QS("#doc-title").classList.toggle("open");
|
||||
QS("#md-title").focus();
|
||||
|
|
|
|||
Loading…
Reference in a new issue