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, "