prehistoric-systems/itty-bitty
1
0
Fork 0
mirror of https://github.com/arfct/itty-bitty.git synced 2026-03-11 08:54:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updated visuals

Browse source
This commit is contained in:
Nicholas Jitkoff 2018-05-29 22:10:16 -07:00
parent 287cbc1f00
commit 936a918ec8
5 changed files with 39 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
data.js
View file

@ -1,5 +1,5 @@
var BASE64_MARKER = ';base64,';
var LZMA64_MARKER = ';baze64,';
var LZMA64_MARKER = ';bxze64,';
function compressDataURI(dataURI, callback) {
var base64Index = dataURI.indexOf(BASE64_MARKER);
@ -33,6 +33,7 @@ function decompressDataURI(dataURI, preamble, callback) {
var base64 = dataURI.substring(base64Index + LZMA64_MARKER.length);
zipToString(base64, function(result) {
stringToData(result, function(data) {
if (!data) return callback(undefined);
callback(dataURI.substring(0, base64Index) + BASE64_MARKER + (preamble || '') + data.split(',')[1])
})
})

5
edit.css
View file

@ -9,6 +9,9 @@ body {
h1 { font-weight:400; }
h2 { font-weight:500; }
a {
color:#0070E0;
}
body:not(.edited) #placeholder {
display:block;
}
@ -69,7 +72,6 @@ body.drag #content {
body.edited #toolbar {
opacity:1.0;
transition: opacity 2s ease-out;
}
@ -79,7 +81,6 @@ body.edited #toolbar {
top:0;
right:0;
padding:3px 10px 5px 30px;
transition: opacity 218ms ease-in;
text-align:right;
background-color:#f1f1f1;
border-bottom-left-radius:10em;

20
edit.html
View file

@ -5,24 +5,22 @@
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src https://codepen.io">
<title>itty.bitty</title>
<script src="src/lzma_worker-min.js"></script>
<script src="jquery-3.3.1.min.js"></script>
<script src="data.js"></script>
<script src="edit.js"></script>
<link rel="stylesheet" type="text/css" href="edit.css">
<body>
<span id="toolbar">
<a target="_blank" id="length"></a>
<a target="_blank" id="bitly" href="https://bitly.com/">Bitly</a>
<a target="_blank" id="qrcode" href="https://zxing.appspot.com/generator/">QR Code</a>
<a target="_blank" id="twitter" href="https://twitter.com/">Twitter</a>
<button id="copy">Copy Link</button><br>
</span>
<div id="placeholder">
Itty bitty things<br>
can be shared within a link&ndash;<br>
type to get started.
<p><a id="ib-info" contenteditable=false href="http://about.bitty.site">Learn more</a><br>
can be shared within a link&mdash;<br>
type here to compose.
<p><a id="ib-info" contenteditable=false href="http://about.bitty.site" target="_blank">Learn more</a><br>
</div>
<div id="content"> </div>
<span id="toolbar">
<a target="_blank" id="length"></a>
<a target="_blank" id="qrcode" href="https://zxing.appspot.com/generator/">QR Code</a>
<button id="copy">Copy Link</button><br>
</span>
</body>
</html>

35
edit.js
View file

@ -1,5 +1,5 @@
// var $ = document.querySelector.bind(document)
// var $$ = document.querySelectorAll.bind(document)
var $ = document.querySelector.bind(document)
var $$ = document.querySelectorAll.bind(document)
var DATA_PREFIX = 'data:text/html;base64,'
var DATA_PREFIX_8 = 'data:text/html;charset=utf-8;base64,'
@ -20,8 +20,8 @@ window.onload = function() {
content.contentEditable = 'true';
content.focus();
document.execCommand('selectAll',false,null);
$('#qrcode')[0].onclick = makeQRCode
$('#copy')[0].onclick = copyLink
$('#qrcode').onclick = makeQRCode
$('#copy').onclick = copyLink
var hash = window.location.hash.substring(1)
if (hash.length) {
updateLink(hash)
@ -42,16 +42,16 @@ function setContent(html) {
function updateBodyClass() {
var length = content.innerText.length;
if (length) {
$('body').addClass("edited")
document.body.classList.add("edited")
} else {
$('body').removeClass("edited")
document.body.classList.remove("edited")
}
}
function handleDrop(e) {
e.preventDefault();
if (e.dataTransfer.files) {
var file = e.dataTransfer.files[0]
var file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
var url = reader.result;
@ -155,15 +155,18 @@ function handleInput(e) {
strip = true
}
stringToZip(text, function(zip) {
updateLink("!" + zip)
});
if (text.trim().length) {
stringToZip(text, function(zip) {
updateLink("!" + zip)
});
} else {
updateLink("")
}
}
var maxLengths = {
"#twitter": 4088,
"#qrcode": 2610,
"#bitly": 2048,
}
function updateLink(url, push) {
@ -176,14 +179,14 @@ function updateLink(url, push) {
}
var length = location.href.length
$('#length')[0].innerText = length + " bytes"
$('#length')[0].href = url
$('#length').innerText = length + " bytes"
$('#length').href = url
for (var key in maxLengths) {
var maxLength = maxLengths[key]
if (length > maxLength) {
$(key).addClass("invalid")
$(key).classList.add("invalid")
} else {
$(key).removeClass("invalid")
$(key).classList.remove("invalid")
}
};

13
index.html
View file

@ -32,29 +32,28 @@ window.onhashchange = window.onload = function() {
var compressed = editable || hash.charAt(0) == ','
if (compressed || editable) {
hash = hash.substring(1)
preamble = HEAD_TAGS
hash = hash.substring(1);
preamble = HEAD_TAGS;
}
if (hash.indexOf("data:") != 0) hash = 'data:text/html;charset=utf-8;' + (compressed ? 'baze64,' : 'base64,') + hash;
if (hash.indexOf("data:") != 0) hash = 'data:text/html;charset=utf-8;' + (compressed ? 'bxze64,' : 'base64,') + hash;
// location.href = hash // Redirect to data URI in supported browsers
link.onclick = function() { location.href = "/edit" + location.hash }
showEdit(editable)
var useData = !navigator.userAgent.match(/rv:11/); // || /Edge/.test(navigator.userAgent)
var isIE11 = navigator.userAgent.match(/rv:11/);
decompressDataURI(hash, preamble, function(hash) {
if (!hash) return;
if (useData) {
if (!isIE11) {
if (hash) iframe.src = hash;
} else{
} else {
dataToString(hash, function(content){
var doc = iframe.contentWindow.document;
doc.open();
doc.write(content);
doc.close();
})
}
});
}