From cff86a16e19cccf1b52b3b74f2dfab9a5988499a Mon Sep 17 00:00:00 2001 From: Nicholas Jitkoff Date: Wed, 29 Jun 2022 08:34:40 -0700 Subject: [PATCH] split out format bar, add preview --- docs/bitty.js | 170 +++++++++++++++++++------------------------------ docs/edit.css | 88 +++++++++++++++++++------ docs/edit.html | 61 +++++++++--------- docs/edit.js | 66 ++++++++++--------- 4 files changed, 199 insertions(+), 186 deletions(-) diff --git a/docs/bitty.js b/docs/bitty.js index b5a3196..f269068 100644 --- a/docs/bitty.js +++ b/docs/bitty.js @@ -108,10 +108,8 @@ class DataURL { return this; } - compress = async (format = LZMA_MARKER) => { - console.log("data", this.data.length, {data:this.data}) - let rawData = await base64ToByteArray(this.data); - + compress = async (format = GZIP_MARKER) => { + let rawData = this.encoding ? await base64ToByteArray(this.data) : stringToByteArray(this.data); let compressedData = await compressData(rawData, format); var base64String = dataToBase64(compressedData); this.data = base64String; @@ -227,36 +225,16 @@ function infoForDataURL(url) { var BASE64_MARKER = 'base64'; var LZMA64_MARKER = 'bxze64'; -var GZIP64_MARKER = 'gzip64'; -var BROT64_MARKER = 'brot64'; var BASE_MARKER = 'bs'; var LZMA_MARKER = 'xz'; var GZIP_MARKER = 'gz'; var BROT_MARKER = 'br'; -function compressDataURL(dataURL, callback) { - var base64Index = dataURL.indexOf(BASE64_MARKER); - var base64 = dataURL.substring(base64Index + BASE64_MARKER.length + 1); - compressString(base64ToByteArray(base64), LZMA64_MARKER, function(result) { - callback(dataURL.substring(0, base64Index) + LZMA64_MARKER + "," + result) - }) -} - function base64ToByteArray(base64) { return Uint8Array.from(atob(base64), c => c.charCodeAt(0)); } -// function base64ToByteArray(base64) { -// var raw = window.atob(base64); -// var rawLength = raw.length; -// var array = new Uint8Array(new ArrayBuffer(rawLength)); -// for(let i = 0; i < rawLength; i++) { -// array[i] = raw.charCodeAt(i); -// } -// return array; -// } - function loadScript(src, callback) { let script = el("script", { src }); script.addEventListener('load', function(e) { @@ -273,42 +251,30 @@ function escapeStringForIMessage(str) { return str; } -function decryptBase64(cipher, base64, callback) { - if (!cipher) return callback(base64); +// function decompressDataURL(dataURL, preamble, callback) { +// let info = infoForDataURL(dataURL); - loadScript("/js/crypto-js.min.js", () => { - let pass = prompt("This page is encrypted. What's the passcode?"); - if (!pass) return callback(base64); - - let decrypted = CryptoJS[cipher.toUpperCase()].decrypt(base64, pass); - return callback(CryptoJS.enc.Base64.stringify(decrypted)); - }) -} +// let encoding = info.encoding; +// let encodingIndex = dataURL.indexOf(encoding); -function decompressDataURL(dataURL, preamble, callback) { - let info = infoForDataURL(dataURL); +// if (encoding && encoding != "base64") { +// var base64 = dataURL.substring(encodingIndex + LZMA64_MARKER.length + 1); +// base64 = base64.replace("=",""); // TODO: apply this elsewhere; - let encoding = info.encoding; - let encodingIndex = dataURL.indexOf(encoding); - - if (encoding && encoding != "base64") { - var base64 = dataURL.substring(encodingIndex + LZMA64_MARKER.length + 1); - base64 = base64.replace("=",""); // TODO: apply this elsewhere; - - decryptBase64(info.params?.cipher, base64, (base64) => { - let bytes = base64ToByteArray(base64); - decompressString(bytes, encoding, function(string) { - stringToData(string, function(data) { - if (!data) return callback(); - callback(dataURL.substring(0, encodingIndex) + BASE64_MARKER + "," + (preamble || '') + data.split(',')[1], string) - }) - }) - }) +// decryptBase64(info.params?.cipher, base64, (base64) => { +// let bytes = base64ToByteArray(base64); +// decompressString(bytes, encoding, function(string) { +// stringToData(string, function(data) { +// if (!data) return callback(); +// callback(dataURL.substring(0, encodingIndex) + BASE64_MARKER + "," + (preamble || '') + data.split(',')[1], string) +// }) +// }) +// }) - } else { - callback(dataURL) - } -} +// } else { +// callback(dataURL) +// } +// } async function hashString(string, base = 36) { const arrayBuffer = await(new TextEncoder().encode(string)) @@ -328,48 +294,48 @@ async function hashString(string, base = 36) { return hashAsBase64; } -function compressString(string, encoding = LZMA64_MARKER, callback) { - if (encoding == LZMA64_MARKER) { - loadScript("/js/lzma/lzma_worker-min.js", () => { - LZMA.compress(string, 9, function(result, error) { - if (error) console.error(error); - var base64String = window.btoa(String.fromCharCode.apply(null, new Uint8Array(result))); - return callback(base64String); - }); - }) - } else if (encoding == BROT64_MARKER) { - // import("/js/brotli/decode.js").then((module) => { - // console.log("module", module) - // return callback(module.BrotliDecode(data)); - // }); - } else if (encoding == GZIP64_MARKER) { - import("/js/gzip/pako.js").then((module) => { - let result = pako.deflate(string, {level:"9"}); - var base64String = window.btoa(String.fromCharCode.apply(null, new Uint8Array(result))); - return callback(base64String); - }); - } -} +// function compressString(string, encoding = LZMA64_MARKER, callback) { +// if (encoding == LZMA64_MARKER) { +// loadScript("/js/lzma/lzma_worker-min.js", () => { +// LZMA.compress(string, 9, function(result, error) { +// if (error) console.error(error); +// var base64String = window.btoa(String.fromCharCode.apply(null, new Uint8Array(result))); +// return callback(base64String); +// }); +// }) +// } else if (encoding == BROT64_MARKER) { +// // import("/js/brotli/decode.js").then((module) => { +// // console.log("module", module) +// // return callback(module.BrotliDecode(data)); +// // }); +// } else if (encoding == GZIP64_MARKER) { +// import("/js/gzip/pako.js").then((module) => { +// let result = pako.deflate(string, {level:"9"}); +// var base64String = window.btoa(String.fromCharCode.apply(null, new Uint8Array(result))); +// return callback(base64String); +// }); +// } +// } -function decompressString(data, encoding, callback) { - if (encoding == LZMA64_MARKER) { - LZMA.decompress(data, function(result, error) { - if (!(typeof result === 'string')) result = new Uint8Array(result) - if (error) console.error(error); - callback(result); - }); - } else if (encoding == BROT64_MARKER) { - import("/js/brotli/decode.js").then((module) => { - console.log("module", module) - return callback(module.BrotliDecode(data)); - }); - } else if (encoding == GZIP64_MARKER) { - import("/js/gzip/pako.js").then((module) => { - let byteArray = pako.inflate(data); - return callback(byteArray); - }); - } -} +// function decompressString(data, encoding, callback) { +// if (encoding == LZMA64_MARKER) { +// LZMA.decompress(data, function(result, error) { +// if (!(typeof result === 'string')) result = new Uint8Array(result) +// if (error) console.error(error); +// callback(result); +// }); +// } else if (encoding == BROT64_MARKER) { +// import("/js/brotli/decode.js").then((module) => { +// console.log("module", module) +// return callback(module.BrotliDecode(data)); +// }); +// } else if (encoding == GZIP64_MARKER) { +// import("/js/gzip/pako.js").then((module) => { +// let byteArray = pako.inflate(data); +// return callback(byteArray); +// }); +// } +// } // echo -n 'hello world' | brotli | base64 @@ -488,10 +454,10 @@ export { infoForDataURL, stringToData, dataToString, - compressString, - decompressString, - compressDataURL, - decompressDataURL, + // compressString, + // decompressString, + // compressDataURL, + // decompressDataURL, hashString, encodePrettyComponent, decodePrettyComponent, @@ -500,8 +466,6 @@ export { parseBittyURL, BASE64_MARKER, LZMA64_MARKER, - GZIP64_MARKER, - BROT64_MARKER, BASE_MARKER, LZMA_MARKER, GZIP_MARKER, diff --git a/docs/edit.css b/docs/edit.css index 7028d4f..bed718b 100644 --- a/docs/edit.css +++ b/docs/edit.css @@ -25,16 +25,37 @@ html { } body { - margin: 0 auto; - padding: 10rem 6vmin 4vmin 6vmin; - max-width: 45em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.5em; min-height:100vh; + display: + flex; + flex-direction: row-reverse; + margin: 0; +} + +.editor-container { + margin: 0 auto; + padding: 5rem 6vmin 4vmin 6vmin; + max-width: 45em; + /* background-color:#0070e0; */ box-sizing: border-box; } +body:not(.preview) #preview-frame { + display:none; +} +#preview-frame { + background-color:#fafafa; + border:0; + /* position:absolute; */ + right:0; + width:50%; + bottom:0; + height:100vh; + background: repeating-conic-gradient(rgba(128,128,128,.10) 0% 25%, transparent 0% 50%) 50% / 4px 4px; +} h1 { font-weight: 400; } @@ -88,7 +109,7 @@ body.drag #content { outline: none; /* min-width: 180px; */ top: 0; - position: absolute; + /* position: absolute; */ padding: 0 1em; font-weight: normal; opacity:0.33; @@ -98,8 +119,9 @@ body.drag #content { margin-left: -1em; line-height: 2.5em; display: inline-block; - /* margin-top: -31em; */ + /* margin-top: -2.5em; */ z-index: 100; + left: 0; } #doc-title.open { @@ -193,7 +215,7 @@ input:focus { position: fixed; top: 0; left: 0; - width: 100vw; + width: 50vw; height: 100vh; background-position: center 60px; box-sizing: border-box; @@ -290,7 +312,7 @@ input:focus { padding:0; border: none; - background-color:var(--background-color); + /* background-color:var(--background-color); */ display: flex; align-items: left; @@ -299,6 +321,7 @@ input:focus { flex-wrap: wrap-reverse; /* height: 10rem; */ padding-left: 4vmin; + z-index:1000; } #menubar > span { display: flex; @@ -529,8 +552,8 @@ label:first-child { cursor:default; } -#menubar.ql-snow.ql-toolbar button, -#menubar.ql-snow.ql-toolbar .ql-picker { +#formatbar.ql-snow.ql-toolbar button, +#formatbar.ql-snow.ql-toolbar .ql-picker { height: 40px; min-width: 40px; float: none; @@ -538,8 +561,8 @@ label:first-child { text-align: revert; width: 40px; } -#menubar.ql-snow.ql-toolbar button, -#menubar.ql-snow.ql-toolbar .ql-picker .ql-picker-label { +#formatbar.ql-snow.ql-toolbar button, +#formatbar.ql-snow.ql-toolbar .ql-picker .ql-picker-label { /* background-size: 24px; */ padding: 10px; } @@ -554,7 +577,7 @@ div#editor.ql-container.ql-snow { height: 1.5rem; } -#menubar.ql-snow .ql-color-picker .ql-picker-options { +#formatbar.ql-snow .ql-color-picker .ql-picker-options { width: 11.2rem; padding: 0; } @@ -569,10 +592,10 @@ div#editor.ql-container.ql-snow { } -#menubar .ql-toolbar, -#menubar .ql-stroke, -#menubar .ql-picker, -#menubar.ql-snow a { +#formatbar .ql-toolbar, +#formatbar .ql-stroke, +#formatbar .ql-picker, +#formatbar.ql-snow a { color: var(--text-color) ; stroke: var(--text-color) ; } @@ -604,9 +627,9 @@ label:not(:first-child) { font-size: 16px; } -.ql-formats { -opacity:0.0; -} +#formatbar .ql-formats { +opacity:1.0; +margin-right:0;display: contents;} body:not(.dragging) #drop-zone { display:none; @@ -625,4 +648,29 @@ body:not(.dragging) #drop-zone { font-family: sans-serif; color: white; line-height: 100vh; - opacity:0.2; \ No newline at end of file + opacity:0.2; +} + +#formatbar { + margin-top:-8em; + border: + none; + /* border-bottom:1px solid + var(--divider-color); */ + position: sticky; + top: 0; + z-index: 100; + background-color: var(--background-color); + padding: 0; + margin: 0 -12px; + display: flex; + flex-wrap: wrap; + opacity:0.25; +} +#formatbar:hover { + opacity:1.0; +} + +body.filecontent #formatbar { + display:none; +} \ No newline at end of file diff --git a/docs/edit.html b/docs/edit.html index fd382a4..2f6cf76 100644 --- a/docs/edit.html +++ b/docs/edit.html @@ -2,7 +2,7 @@ - + @@ -22,62 +22,70 @@ + +
-
DROP HERE
-
- itty bitty things
- can be conveyed in a link.
- type here – and then share!

 about itty bitty
-

+
+
Link copied to clipboard.
-
 itty bitty things
 can be conveyed in a link.
 type here – and then share!

 about itty bitty

-
-
untitled
- -
-
-