mirror of
https://github.com/arfct/itty-bitty.git
synced 2026-03-11 08:54:33 +00:00
Run css and js through prettier
This commit is contained in:
Nicholas Jitkoff
parent
b9f565ce08
commit
29d629aebb
4 changed files with 319 additions and 222 deletions
179
edit.css
179
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;
|
||||
}
|
||||
border: none;
|
||||
}
|
||||
|
|
|
|||
277
edit.js
277
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, "<h1>");
|
||||
} else if (code == '2'.charCodeAt(0)) {
|
||||
} else if (code == "2".charCodeAt(0)) {
|
||||
document.execCommand("formatBlock", true, "<h2>");
|
||||
} 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 = '<style type="text/css">' + c + '</style>' + h + '<script type="text/javascript">' + j + '</script>'
|
||||
var useTemplate = c.indexOf(TEMPLATE_MARKER) >= 0;
|
||||
var string =
|
||||
'<style type="text/css">' +
|
||||
c +
|
||||
"</style>" +
|
||||
h +
|
||||
'<script type="text/javascript">' +
|
||||
j +
|
||||
"</script>";
|
||||
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(/> +</g, '> <')
|
||||
text = text.replace(/[\n|\t]+/g, " ").replace(/> +</g, "> <");
|
||||
} 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;
|
||||
}
|
||||
|
|
|
|||
45
index.css
45
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;}
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
40
index.js
40
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).<br>Larger sites may require a different browser.<br><a href="http://reference.bitty.site">Learn more</a>';
|
||||
};
|
||||
document.getElementById("warning").innerHTML =
|
||||
'Edge only supports shorter URLs (maximum 2083 bytes).<br>Larger sites may require a different browser.<br><a href="http://reference.bitty.site">Learn more</a>';
|
||||
}
|
||||
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";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue