diff --git a/edit.css b/edit.css index 2995f94..39fa54d 100644 --- a/edit.css +++ b/edit.css @@ -1,70 +1,79 @@ body { - margin: 0 auto;padding:12vh 10vmin; - max-width:35em; + margin: 0 auto; + padding: 12vh 10vmin; + max-width: 35em; font-family: -apple-system, BlinkMacSystemFont, sans-serif; - line-height:1.5em; - color:rgba(0,0,0,0.87); + line-height: 1.5em; + color: rgba(0, 0, 0, 0.87); } -h1 { font-weight:400; } -h2 { font-weight:500; } +h1 { + font-weight: 400; +} +h2 { + font-weight: 500; +} a { - color:#0070E0; + color: #0070e0; } -*[contenteditable="true"]{display: inline-block;} +*[contenteditable="true"] { + display: inline-block; +} body.loaded:not(.edited) #placeholder { - display:block; + display: block; } #placeholder { - display:none; - font-style:italic; - color:rgba(0,0,0,0.3); + display: none; + font-style: italic; + color: rgba(0, 0, 0, 0.3); pointer-events: none; - position:absolute; + position: absolute; } body.drag #content { outline: 3px dashed #ccc; - background-color:#fafafa; - border-radius:1em; + background-color: #fafafa; + border-radius: 1em; pointer-events: all; } -#content, #placeholder{ - margin:-1em; padding: 1em; - min-height:7em +#content, +#placeholder { + margin: -1em; + padding: 1em; + min-height: 7em; } #content { - width:100%; - outline:none; + width: 100%; + outline: none; } #content:focus { outline-color: #ccc; } #doc-title { - outline:none; - min-width:180px; - top:0; - position:absolute; - padding:0.5em 0; - font-family:monospace; - font-weight:bold; + outline: none; + min-width: 180px; + top: 0; + position: absolute; + padding: 0.5em 0; + font-family: monospace; + font-weight: bold; } body.edited #doc-title:empty:before, -#doc-title:focus:empty:before { - content: 'untitled'; +#doc-title:focus:empty:before { + content: "untitled"; color: rgba(0, 0, 0, 0.333); } #doc-title:focus { - border-bottom:1px solid #ccc; + border-bottom: 1px solid #ccc; } #doc-title:empty:before { @@ -80,11 +89,11 @@ body.edited #doc-title:empty:before, border-radius: 1em; background: #ebeff9; padding: 0.25em 1em; - font-size:smaller; - margin-bottom:2em; + font-size: smaller; + margin-bottom: 2em; } #doc-file:empty { - display:none; + display: none; } #ib-info { @@ -92,10 +101,9 @@ body.edited #doc-title:empty:before, } #ib-info:hover { pointer-events: all; - color:black; + color: black; } - /*#toolbar a#copy { transition: transform 1s; cursor: default; @@ -108,41 +116,42 @@ body.edited #doc-title:empty:before, } */ - - #sharehint { - display:none; - position:fixed; - bottom:0; - left:0; - right:0; - font-family:monospace; - font-weight:bold; - text-align:center; + display: none; + position: fixed; + bottom: 0; + left: 0; + right: 0; + font-family: monospace; + font-weight: bold; + text-align: center; } @media only screen and (max-device-width: 480px) { - #twitter, #copy { - display:none; + #twitter, + #copy { + display: none; } #sharehint { - display:block; + display: block; } #menu-share-hint { - display:none; + display: none; } } #toolbar button { vertical-align: baseline; - font-family:monospace; + font-family: monospace; } #toolbar a.invalid { text-decoration: line-through; } -#length {opacity:0.54;} +#length { + opacity: 0.54; +} /*body.edited #toolbar { opacity:1.0; @@ -150,59 +159,65 @@ body.edited #doc-title:empty:before, } */ #toolbar { - position:fixed; - top:0; - right:0; - padding:0.5em 1em; - text-align:right; - font-family:monospace; - font-weight:bold; + position: fixed; + top: 0; + right: 0; + padding: 0.5em 1em; + text-align: right; + font-family: monospace; + font-weight: bold; /*transform: translateY(-2em);*/ transition: transform 100ms ease-out; - background-color:white; + background-color: white; border-bottom-left-radius: 1em; - cursor:pointer; + cursor: pointer; } - #copy-message { - background:#2d2d2d; - color:white; - top:0.5em; - right:0.5em; - position:absolute; - padding:0.5em 1em; - z-index:100; - font-family:monospace; - font-weight:bold; + background: #2d2d2d; + color: white; + top: 0.5em; + right: 0.5em; + position: absolute; + padding: 0.5em 1em; + z-index: 100; + font-family: monospace; + font-weight: bold; } body:not(.copied) #copy-message { - display:none; + display: none; } #menus-share-hint { - content:'hello'; + content: "hello"; } #toolbar .disabled { - opacity:0.333; + opacity: 0.333; +} +#toolbar a { + margin-left: 0.5em; + cursor: pointer; + text-decoration: none; + color: #333; +} +#toolbar a:hover { + text-decoration: underline; + color: #111; } -#toolbar a {margin-left:0.5em; cursor: pointer; text-decoration:none; color:#333;} -#toolbar a:hover { text-decoration: underline; color:#111;} .menu { - width:auto; - display:none; + width: auto; + display: none; } #toolbar.menu-visible .menu { - display:block; + display: block; } - #toolbar.menu-visible #menu { - opacity:0.54; + opacity: 0.54; } .menu hr { - border:none; -} \ No newline at end of file + border: none; +} diff --git a/edit.js b/edit.js index 0b23f34..9fb7dc3 100644 --- a/edit.js +++ b/edit.js @@ -1,73 +1,89 @@ -var QS = document.querySelector.bind(document) -var QSS = document.querySelectorAll.bind(document) +var QS = document.querySelector.bind(document); +var QSS = document.querySelectorAll.bind(document); -var DATA_PREFIX = 'data:text/html;base64,' -var DATA_PREFIX_8 = 'data:text/html;charset=utf-8;base64,' -var DATA_PREFIX_BXZE = 'data:text/html;charset=utf-8;bxze64,' +var DATA_PREFIX = "data:text/html;base64,"; +var DATA_PREFIX_8 = "data:text/html;charset=utf-8;base64,"; +var DATA_PREFIX_BXZE = "data:text/html;charset=utf-8;bxze64,"; -var b = document.documentElement.setAttribute('data-useragent', navigator.userAgent); +var b = document.documentElement.setAttribute( + "data-useragent", + navigator.userAgent +); var importedFileData = undefined; -var content = undefined +var content = undefined; window.onload = function() { - window.onpopstate = function(e) { setContent(e.state) } - window.onhashchange = function(e) { console.log("hash", e); location.reload() } - document.body.onclick = function(e) { if (e.target == document.body) content.focus() }; + window.onpopstate = function(e) { + setContent(e.state); + }; + window.onhashchange = function(e) { + console.log("hash", e); + location.reload(); + }; + document.body.onclick = function(e) { + if (e.target == document.body) content.focus(); + }; content = document.getElementById("content"); - content.ondragenter = function(e) { document.body.classList.add("drag"); }; - content.ondragleave = function(e) { document.body.classList.remove("drag"); }; - content.addEventListener('keydown', handleKey); - content.addEventListener('keyup', handleInput); - QS("#doc-title").addEventListener('keyup', handleInput); - content.addEventListener('drop', handleDrop); - content.addEventListener('paste', handlePaste) - content.contentEditable = 'true'; + content.ondragenter = function(e) { + document.body.classList.add("drag"); + }; + content.ondragleave = function(e) { + document.body.classList.remove("drag"); + }; + content.addEventListener("keydown", handleKey); + content.addEventListener("keyup", handleInput); + QS("#doc-title").addEventListener("keyup", handleInput); + content.addEventListener("drop", handleDrop); + content.addEventListener("paste", handlePaste); + content.contentEditable = "true"; content.focus(); - document.execCommand('selectAll',false,null); - QS('#qrcode').onclick = makeQRCode - QS('#twitter').onclick = tweetLink - QS('#copy').onclick = copyLink - QS('#menu').onclick = toggleMenu - var hash = window.location.hash.substring(1) - + document.execCommand("selectAll", false, null); + QS("#qrcode").onclick = makeQRCode; + QS("#twitter").onclick = tweetLink; + QS("#copy").onclick = copyLink; + QS("#menu").onclick = toggleMenu; + var hash = window.location.hash.substring(1); + if (hash.length) { var slashIndex = hash.indexOf("/"); - var title = hash.substring(0, slashIndex) - if (title.length) QS("#doc-title").innerText = document.title = decodeURIComponent(title.replace(/_/g, " ")); + var title = hash.substring(0, slashIndex); + if (title.length) + QS("#doc-title").innerText = document.title = decodeURIComponent( + title.replace(/_/g, " ") + ); hash = hash.substring(slashIndex + 1); - updateLink(hash, title) - if (hash.startsWith('?')) { - hash = hash.substring(1) + updateLink(hash, title); + if (hash.startsWith("?")) { + hash = hash.substring(1); zipToString(hash, setContent); } } else { - updateBodyClass() + updateBodyClass(); } }; function setContent(html) { - content.innerHTML = html - updateBodyClass() + content.innerHTML = html; + updateBodyClass(); } function setFileName(name) { - QS("#doc-file").innerText = name + QS("#doc-file").innerText = name; if (name.length) { - setContent(''); - document.body.classList.add("edited") + setContent(""); + document.body.classList.add("edited"); } } - function updateBodyClass() { var length = content.innerText.length; if (length || importedFileData) { - document.body.classList.add("edited") + document.body.classList.add("edited"); } else { - document.body.classList.remove("edited") + document.body.classList.remove("edited"); } - document.body.classList.add("loaded") + document.body.classList.add("loaded"); } function handleDrop(e) { @@ -75,26 +91,31 @@ function handleDrop(e) { if (e.dataTransfer.files) { var file = e.dataTransfer.files[0]; var reader = new FileReader(); - reader.addEventListener("load", function () { - var url = reader.result; - url = url.replace(DATA_PREFIX, DATA_PREFIX_8) - compressDataURI(url, function(url2){ - var ratio = url2.length / url.length - console.log("Compressed to", ratio) - if (e.ctrlKey) decompressDataURI(url2, undefined, function(url3) { - console.log("Verified", url == url3) - }) - if (ratio > 0.95) url2 = url; - if (e.altKey) url2 = url2.replace(DATA_PREFIX_BXZE, "!") - - importedFileData = url2 - updateLink(url2, file.name, true) - setFileName('📄' + file.name) - }) - }, false); + reader.addEventListener( + "load", + function() { + var url = reader.result; + url = url.replace(DATA_PREFIX, DATA_PREFIX_8); + compressDataURI(url, function(url2) { + var ratio = url2.length / url.length; + console.log("Compressed to", ratio); + if (e.ctrlKey) + decompressDataURI(url2, undefined, function(url3) { + console.log("Verified", url == url3); + }); + if (ratio > 0.95) url2 = url; + if (e.altKey) url2 = url2.replace(DATA_PREFIX_BXZE, "!"); + + importedFileData = url2; + updateLink(url2, file.name, true); + setFileName("📄" + file.name); + }); + }, + false + ); reader.readAsDataURL(file); } - document.body.classList.remove("drag") + document.body.classList.remove("drag"); } // TODO Command+Shift+T for title (H1), Command+Shift+H for headline (H2), Command+Shift+B for body text (remove any of the above) @@ -103,53 +124,69 @@ function handleKey(e) { var handled = false; if (e.metaKey && e.altKey) { handled = true; - if (code == '1'.charCodeAt(0)) { + if (code == "1".charCodeAt(0)) { document.execCommand("formatBlock", true, "

"); - } else if (code == '2'.charCodeAt(0)) { + } else if (code == "2".charCodeAt(0)) { document.execCommand("formatBlock", true, "

"); - } else if (code == 220) { // \ + } else if (code == 220) { + // \ document.execCommand("removeFormat"); - } else if (code == '0'.charCodeAt(0)) { + } else if (code == "0".charCodeAt(0)) { document.execCommand("formatBlock", true, ""); } else { - handled = false + handled = false; } } else if (e.metaKey) { - if (code == 'K'.charCodeAt(0)) { + if (code == "K".charCodeAt(0)) { handled = true; - var url = prompt("Add a link", "") - if (url) { document.execCommand("createLink", true, url); }; + var url = prompt("Add a link", ""); + if (url) { + document.execCommand("createLink", true, url); + } } } - if (handled) e.preventDefault() -}; + if (handled) e.preventDefault(); +} -var codepenRE = /(https:\/\/codepen\.io\/[\w]+\/(\w+)\/(\w+))/ +var codepenRE = /(https:\/\/codepen\.io\/[\w]+\/(\w+)\/(\w+))/; function handlePaste(e) { - var clipboard = window.clipboardData || e.clipboardData - var text = clipboard.getData('Text') || clipboard.getData('text/plain') - if (match = text.match(codepenRE)) { - fetchCodepen(match[0]) + var clipboard = window.clipboardData || e.clipboardData; + var text = clipboard.getData("Text") || clipboard.getData("text/plain"); + if ((match = text.match(codepenRE))) { + fetchCodepen(match[0]); } } -var TEMPLATE_MARKER = "/*use-itty-bitty-template*/" +var TEMPLATE_MARKER = "/*use-itty-bitty-template*/"; function fetchCodepen(url) { var h, c, j; $.when( - $.get({ url:url + ".html", cache: false }, function(html) { h = html; }), - $.get({ url:url + ".css", cache: false }, function(css) { c = css; }), - $.get({ url:url + ".js", cache: false }, function(js) { j = js; }) + $.get({ url: url + ".html", cache: false }, function(html) { + h = html; + }), + $.get({ url: url + ".css", cache: false }, function(css) { + c = css; + }), + $.get({ url: url + ".js", cache: false }, function(js) { + j = js; + }) ).then(function() { - var useTemplate = c.indexOf(TEMPLATE_MARKER) >= 0 - var string = '' + h + '' + var useTemplate = c.indexOf(TEMPLATE_MARKER) >= 0; + var string = + '" + + h + + '"; stringToZip(string, function(zip) { - setFileName('✒️' + url) + setFileName("✒️" + url); var title = QS("#doc-title").innerText; setTimeout(function() { - var data = (useTemplate ? "" : DATA_PREFIX_BXZE) + zip; - importedFileData = data; - updateLink(data, title) + var data = (useTemplate ? "" : DATA_PREFIX_BXZE) + zip; + importedFileData = data; + updateLink(data, title); }, 300); }); }); @@ -160,79 +197,78 @@ function handleInput(e) { var text = content.innerText; var title = QS("#doc-title").innerText; - var rawHTML = (text.indexOf(" 0); + var rawHTML = text.indexOf(" 0; if (rawHTML) { - text = text.replace(/[\n|\t]+/g,' ').replace(/> + <') + text = text.replace(/[\n|\t]+/g, " ").replace(/> + <"); } else { - text = content.innerHTML + text = content.innerHTML; } - + if (text.trim().length) { stringToZip(text, function(zip) { if (rawHTML) { - updateLink(DATA_PREFIX_BXZE + zip, title) + updateLink(DATA_PREFIX_BXZE + zip, title); } else { - updateLink("?" + zip, title) + updateLink("?" + zip, title); } }); - setFileName("") + setFileName(""); } else if (importedFileData) { - updateLink(importedFileData, title) + updateLink(importedFileData, title); } else { - updateLink("") + updateLink(""); } - } var maxLengths = { // "#twitter": 4088, // "#bitly": 2048, - "#qrcode": 2953, -} + "#qrcode": 2953 +}; function updateLink(url, title, push) { - if (title) title = encodeURIComponent(title.trim().replace(/\s/g, "_")) + if (title) title = encodeURIComponent(title.trim().replace(/\s/g, "_")); if (url.length) { - url = "/#" + (title || "") + "/" + url + url = "/#" + (title || "") + "/" + url; } else { - url = "/edit" + url = "/edit"; } - var hash = location.hash + var hash = location.hash; if (push || !hash || !hash.length) { window.history.pushState(content.innerHTML, null, url); } else { window.history.replaceState(content.innerHTML, null, url); } - var length = location.href.length + var length = location.href.length; - QS('#length').innerText = length + " bytes" - QS('#length').href = url + QS("#length").innerText = length + " bytes"; + QS("#length").href = url; for (var key in maxLengths) { - var maxLength = maxLengths[key] + var maxLength = maxLengths[key]; if (length > maxLength) { - QS(key).classList.add("invalid") + QS(key).classList.add("invalid"); } else { - QS(key).classList.remove("invalid") + QS(key).classList.remove("invalid"); } - - }; - + } } function makeQRCode() { - var url = "https://zxing.org/w/chart?cht=qr&chs=548x548&chld=L|1&choe=UTF-8&chl=" + encodeURIComponent(location.href) - this.href = url + var url = + "https://zxing.org/w/chart?cht=qr&chs=548x548&chld=L|1&choe=UTF-8&chl=" + + encodeURIComponent(location.href); + this.href = url; } function toggleMenu() { - QS("#toolbar").classList.toggle("menu-visible") + QS("#toolbar").classList.toggle("menu-visible"); } function copyThenLink() { - copyLink() - return confirm("Copied your link to the clipboard. Paste it to share.") + copyLink(); + return confirm("Copied your link to the clipboard. Paste it to share."); } function copyLink() { - var text = location.href + var text = location.href; var dummy = document.createElement("input"); document.body.appendChild(dummy); dummy.value = text; @@ -240,20 +276,21 @@ function copyLink() { document.execCommand("copy"); document.body.removeChild(dummy); - document.body.classList.add("copied") + document.body.classList.add("copied"); setTimeout(function() { - document.body.classList.remove("copied") + document.body.classList.remove("copied"); }, 2000); } function saveLink() { - var url = "/" + location.hash + var url = "/" + location.hash; window.history.pushState(null, null, url); - location.reload() + location.reload(); } function tweetLink() { - var url = "https://twitter.com/intent/tweet?url=" + encodeURIComponent(location.href); - window.open(url, '_blank'); + var url = + "https://twitter.com/intent/tweet?url=" + encodeURIComponent(location.href); + window.open(url, "_blank"); return false; } diff --git a/index.css b/index.css index 74558a9..c6ea50a 100644 --- a/index.css +++ b/index.css @@ -1,5 +1,40 @@ - #iframe {border:none;position:absolute;top:0;left:0;width:100%;height:100%} - #edit {font-family:monospace; font-weight:bold;color:rgba(0,0,0,0.54); position:absolute;z-index:100;position:absolute;top:0.85em; right:1em; display:none;} - #edit:not(:hover) {text-decoration:none;} - #warning {position: absolute;border-radius:4px;background-color:#feecc2;padding:1em;font-size:16px;font-family:sans-serif;width:20em;z-index:100;top:10vh;left:50vw;margin-left:-10em;} - #warning:empty {display:none;} \ No newline at end of file +body { + font-family: sans-serif; +} +#iframe { + border: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +#edit { + font-family: monospace; + font-weight: bold; + color: rgba(0, 0, 0, 0.54); + position: absolute; + z-index: 100; + position: absolute; + top: 0.85em; + right: 1em; + display: none; +} +#edit:not(:hover) { + text-decoration: none; +} +#warning { + position: absolute; + border-radius: 4px; + background-color: #feecc2; + padding: 1em; + font-size: 16px; + width: 20em; + z-index: 100; + top: 10vh; + left: 50vw; + margin-left: -10em; +} +#warning:empty { + display: none; +} diff --git a/index.js b/index.js index 0714efc..a039de8 100644 --- a/index.js +++ b/index.js @@ -1,53 +1,63 @@ var HEAD_TAGS = "PGJhc2UgdGFyZ2V0PSJfdG9wIj4K"; -var HEAD_TAGS_EXTENDED = "PG1ldGEgY2hhcnNldD0idXRmLTgiPjxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgiPjxiYXNlIHRhcmdldD0iX3RvcCI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj5ib2R5e21hcmdpbjowIGF1dG87cGFkZGluZzoxMnZtaW4gMTB2bWluO21heC13aWR0aDozNWVtO2xpbmUtaGVpZ2h0OjEuNWVtO2ZvbnQtZmFtaWx5OiAtYXBwbGUtc3lzdGVtLEJsaW5rTWFjU3lzdGVtRm9udCxzYW5zLXNlcmlmO3dvcmQtd3JhcDogYnJlYWstd29yZDt9PC9zdHlsZT4g"; +var HEAD_TAGS_EXTENDED = + "PG1ldGEgY2hhcnNldD0idXRmLTgiPjxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgiPjxiYXNlIHRhcmdldD0iX3RvcCI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj5ib2R5e21hcmdpbjowIGF1dG87cGFkZGluZzoxMnZtaW4gMTB2bWluO21heC13aWR0aDozNWVtO2xpbmUtaGVpZ2h0OjEuNWVtO2ZvbnQtZmFtaWx5OiAtYXBwbGUtc3lzdGVtLEJsaW5rTWFjU3lzdGVtRm9udCxzYW5zLXNlcmlmO3dvcmQtd3JhcDogYnJlYWstd29yZDt9PC9zdHlsZT4g"; window.onhashchange = window.onload = function() { var hash = window.location.hash.substring(1); if (hash.length < 3) { location.href = "/edit"; } else { - var iframe = document.getElementById('iframe'); - var link = document.getElementById('edit'); + var iframe = document.getElementById("iframe"); + var link = document.getElementById("edit"); var preamble = undefined; var slashIndex = hash.indexOf("/"); var title = hash.substring(0, slashIndex); - document.title = title.length ? decodeURIComponent(title.replace(/_/g, " ")) : location.hostname; + document.title = title.length + ? decodeURIComponent(title.replace(/_/g, " ")) + : location.hostname; hash = hash.substring(slashIndex + 1); - var editable = hash.charAt(0) == '?'; + var editable = hash.charAt(0) == "?"; if (editable) { hash = hash.substring(1); - }; + } if (hash.indexOf("data:") != 0) { var compressed = true; preamble = HEAD_TAGS_EXTENDED; - hash = 'data:text/html;charset=utf-8;' + (compressed ? 'bxze64,' : 'base64,') + hash; + hash = + "data:text/html;charset=utf-8;" + + (compressed ? "bxze64," : "base64,") + + hash; } else if (hash.indexOf("data:text/html;") == 0) { preamble = HEAD_TAGS; + } + link.onclick = function() { + location.href = "/edit" + location.hash; }; - link.onclick = function() { location.href = "/edit" + location.hash; }; var isIE = navigator.userAgent.match(/rv:11/); var isEdge = navigator.userAgent.match(/Edge\//); if ((isEdge || isIE) && location.href.length == 2083) { - document.getElementById('warning').innerHTML = 'Edge only supports shorter URLs (maximum 2083 bytes).
Larger sites may require a different browser.
Learn more'; - }; + document.getElementById("warning").innerHTML = + 'Edge only supports shorter URLs (maximum 2083 bytes).
Larger sites may require a different browser.
Learn more'; + } decompressDataURI(hash, preamble, function(hash) { if (!hash) return; - iframe.sandbox="allow-scripts allow-forms allow-top-navigation allow-popups allow-modals"; + iframe.sandbox = + "allow-scripts allow-forms allow-top-navigation allow-popups allow-modals"; if (!isIE) { if (hash) iframe.src = hash; } else { - dataToString(hash, function(content){ + dataToString(hash, function(content) { var doc = iframe.contentWindow.document; doc.open(); doc.write(content); doc.close(); - }) + }); } }); - var link = document.getElementById('edit'); + var link = document.getElementById("edit"); link.href = "/edit" + location.hash; link.style.display = editable ? "block" : "none"; } -} \ No newline at end of file +};