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

Separate out html file / codepen token

Browse source
This commit is contained in:
Nicholas Jitkoff 2018-07-04 12:22:21 -07:00
parent 74774a3cf4
commit 6698044a58
4 changed files with 32 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
base.css Normal file
View file

@ -0,0 +1 @@
body{margin:0 auto;padding:12vmin 10vmin;max-width:35em;line-height:1.5em;font-family: -apple-system,BlinkMacSystemFont,sans-serif;word-wrap: break-word;}

6
edit.css
View file

@ -76,11 +76,15 @@ body.drag #content {
color: rgba(0, 0, 0, 0.2);
background: transparent;
}
.ib-file {
#doc-file {
border-radius: 1em;
background: #ebeff9;
padding: 0.25em 1em;
font-size:smaller;
margin-bottom:2em;
}
#doc-file:empty {
display:none;
}
#ib-info {

8
edit.html
View file

@ -11,15 +11,15 @@
<link rel="stylesheet" type="text/css" href="edit.css">
<body>
<div id="doc-title" contenteditable="true" placeholder="itty.bitty"></div>
<div id="doc-file"></div>
<div id="placeholder">
itty bitty things<br>
can be conveyed in a link.<br>
type here &ndash; and then share!<p><a id="ib-info" href="http://about.bitty.site" target="_blank">about itty bitty</a><br>
</div>
<div id="doc-title" contenteditable="true" placeholder="itty.bitty"></div>
<div id="content"> </div>
<div id="content"></div>
<span id="toolbar">
<a target="_blank" id="length"></a>&nbsp;<a target="_blank" id="menu">menu</a>
<div id="menu-contents" class="menu">

32
edit.js
View file

@ -7,6 +7,8 @@ var DATA_PREFIX_BXZE = 'data:text/html;charset=utf-8;bxze64,'
var b = document.documentElement.setAttribute('data-useragent', navigator.userAgent);
var importedFileData = undefined;
var content = undefined
window.onload = function() {
window.onpopstate = function(e) { setContent(e.state) }
@ -49,9 +51,18 @@ function setContent(html) {
updateBodyClass()
}
function setFileName(name) {
QS("#doc-file").innerText = name
if (name.length) {
setContent('');
document.body.classList.add("edited")
}
}
function updateBodyClass() {
var length = content.innerText.length;
if (length) {
if (length || importedFileData) {
document.body.classList.add("edited")
} else {
document.body.classList.remove("edited")
@ -75,8 +86,10 @@ function handleDrop(e) {
})
if (ratio > 0.95) url2 = url;
if (e.altKey) url2 = url2.replace(DATA_PREFIX_BXZE, "!")
importedFileData = url2
updateLink(url2, file.name, true)
setFileContent('📄' + file.name)
setFileName('📄' + file.name)
})
}, false);
reader.readAsDataURL(file);
@ -84,11 +97,6 @@ function handleDrop(e) {
document.body.classList.remove("drag")
}
function setFileContent(name) {
setContent('&nbsp;<span class="ib-file" contentEditable="false">' + name + '</span><br><br>');
}
// TODO Command+Shift+T for title (H1), Command+Shift+H for headline (H2), Command+Shift+B for body text (remove any of the above)
function handleKey(e) {
var code = e.which;
@ -136,11 +144,12 @@ function fetchCodepen(url) {
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) {
setFileContent('✒️' + url)
setFileName('✒️' + url)
var title = QS("#doc-title").innerText;
setTimeout(function() {
updateLink((useTemplate ? "" : DATA_PREFIX_BXZE) + zip, title)
var data = (useTemplate ? "" : DATA_PREFIX_BXZE) + zip;
importedFileData = data;
updateLink(data, title)
}, 300);
});
});
@ -163,6 +172,9 @@ function handleInput(e) {
stringToZip(text, function(zip) {
updateLink("?" + zip, title)
});
setFileName("")
} else if (importedFileData) {
updateLink(importedFileData, title)
} else {
updateLink("")
}