mirror of
https://github.com/arfct/itty-bitty.git
synced 2026-03-11 08:54:33 +00:00
Updated toolbar
This commit is contained in:
Nicholas Jitkoff
parent
292323bddd
commit
f0b74484ae
3 changed files with 129 additions and 78 deletions
125
docs/edit.css
125
docs/edit.css
|
|
@ -31,16 +31,21 @@ body {
|
|||
display:
|
||||
flex;
|
||||
flex-direction: row-reverse;
|
||||
/* justify-content: space-between; */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
margin: 0 auto;
|
||||
padding: 5rem 6vmin 4vmin 6vmin;
|
||||
max-width: 45em;
|
||||
/* margin: 0 auto; */
|
||||
padding: 160px 6vmin 4vmin 6vmin;
|
||||
/* max-width: 100%; */
|
||||
/* background-color:#0070e0; */
|
||||
box-sizing:
|
||||
border-box;
|
||||
/* box-sizing:
|
||||
border-box; */
|
||||
/* width: auto; */
|
||||
width: 100%;
|
||||
max-width: 45em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body:not(.preview) #preview-frame {
|
||||
|
|
@ -55,6 +60,7 @@ body:not(.preview) #preview-frame {
|
|||
bottom:0;
|
||||
height:100vh;
|
||||
background: repeating-conic-gradient(rgba(128,128,128,.10) 0% 25%, transparent 0% 50%) 50% / 4px 4px;
|
||||
padding-top: 80px;
|
||||
}
|
||||
h1 {
|
||||
font-weight: 400;
|
||||
|
|
@ -95,6 +101,7 @@ body.drag #content {
|
|||
margin: -1em;
|
||||
padding: 1em;
|
||||
min-height: 7em;
|
||||
/* margin-top: -3.6em; */
|
||||
}
|
||||
|
||||
#content {
|
||||
|
|
@ -112,28 +119,32 @@ body.drag #content {
|
|||
/* position: absolute; */
|
||||
padding: 0 1em;
|
||||
font-weight: normal;
|
||||
opacity:0.33;
|
||||
/* opacity:0.33; */
|
||||
user-select: none;
|
||||
cursor:
|
||||
default;
|
||||
margin-left: -1em;
|
||||
line-height: 2.5em;
|
||||
display: inline-block;
|
||||
/* margin-top: -2.5em; */
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
margin-top: -2.7em;
|
||||
z-index: 2000;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#doc-title.open {
|
||||
background-color:var(--text-color);
|
||||
color:var(--background-color);
|
||||
opacity:1.0;
|
||||
font-weight:bold;
|
||||
background-color:
|
||||
var(--text-color);
|
||||
color:
|
||||
var(--background-color);
|
||||
/* opacity:1.0; */
|
||||
font-weight:
|
||||
bold;
|
||||
}
|
||||
|
||||
|
||||
#doc-title:empty:after {
|
||||
#doc-title-text:empty:after {
|
||||
content:"untitled";
|
||||
opacity:0.5;
|
||||
}
|
||||
|
||||
#doc-title.open #metadata-text {
|
||||
|
|
@ -141,8 +152,7 @@ body.drag #content {
|
|||
}
|
||||
|
||||
body:not(.edited) #doc-title {
|
||||
display:none;
|
||||
|
||||
/* display:none; */
|
||||
}
|
||||
body.edited #doc-title:empty:after{
|
||||
content: "untitled";
|
||||
|
|
@ -297,13 +307,10 @@ input:focus {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
/* flex-wrap: wrap; */
|
||||
border: none;
|
||||
/* background: var(--divider-color); */
|
||||
/* z-index: 100; */
|
||||
}
|
||||
|
||||
#menubar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left:0;
|
||||
|
|
@ -312,17 +319,19 @@ input:focus {
|
|||
padding:0;
|
||||
border:
|
||||
none;
|
||||
/* background-color:var(--background-color); */
|
||||
/* background-color:
|
||||
var(--background-color); */
|
||||
display:
|
||||
flex;
|
||||
align-items: left;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap-reverse;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
/* flex-wrap: nowrap; */
|
||||
/* height: 10rem; */
|
||||
padding-left: 4vmin;
|
||||
z-index:1000;
|
||||
/* padding-left: 4vmin; */
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#menubar > span {
|
||||
display: flex;
|
||||
/* outline:1px solid red; */
|
||||
|
|
@ -335,11 +344,12 @@ input:focus {
|
|||
.hide-before-edit,
|
||||
.ql-formats {
|
||||
opacity:1.0;
|
||||
transition:opacity 1s, transform 1s;
|
||||
transition:
|
||||
opacity 1s, transform 1s;
|
||||
}
|
||||
|
||||
body:not(.edited) .hide-before-edit {
|
||||
opacity:0;
|
||||
opacity: 0 !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -376,7 +386,7 @@ body:not(.copied) #copy-message {
|
|||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
vertical-align: middle;
|
||||
padding: 0 0.75em;
|
||||
padding: 0;
|
||||
line-height: 2.5em;
|
||||
/* height: 2em; */
|
||||
/* margin-top: 2px; */
|
||||
|
|
@ -451,8 +461,18 @@ div.menu-contents {
|
|||
}
|
||||
|
||||
.menu-item {
|
||||
padding:0 0.5em;
|
||||
cursor:default;
|
||||
padding: 0 1em;
|
||||
cursor:
|
||||
default;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.toolbar-right .menu-item {
|
||||
margin-left: -0.5em;
|
||||
}
|
||||
.menu-item:hover {
|
||||
background-color:var(--text-color);
|
||||
color:var(--background-color) !important;
|
||||
}
|
||||
|
||||
.menu hr {
|
||||
|
|
@ -491,11 +511,18 @@ label:first-child {
|
|||
#editor .ql-editor {
|
||||
font-size: 16px;
|
||||
padding:0;
|
||||
/* max-width: 100%; */
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-device-width: 480px) {
|
||||
@media only screen and (max-device-width: 512px) {
|
||||
#menubar {
|
||||
flex-direction: column;
|
||||
}
|
||||
iframe, #preview-frame {
|
||||
display:none;
|
||||
}
|
||||
#twitter,
|
||||
#copy {
|
||||
display: none;
|
||||
|
|
@ -565,6 +592,9 @@ label:first-child {
|
|||
#formatbar.ql-snow.ql-toolbar .ql-picker .ql-picker-label {
|
||||
/* background-size: 24px; */
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
div#editor.ql-container.ql-snow {
|
||||
|
|
@ -586,7 +616,6 @@ div#editor.ql-container.ql-snow {
|
|||
display: flex;
|
||||
width: auto;
|
||||
flex-wrap: nowrap;
|
||||
gap: 1em;
|
||||
justify-self: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
@ -628,8 +657,13 @@ label:not(:first-child) {
|
|||
}
|
||||
|
||||
#formatbar .ql-formats {
|
||||
opacity:1.0;
|
||||
margin-right:0;display: contents;}
|
||||
opacity: 0.5;
|
||||
margin-right:0;/* display: contents; */
|
||||
}
|
||||
body:not(.format) #formatbar .ql-formats {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
||||
body:not(.dragging) #drop-zone {
|
||||
display:none;
|
||||
|
|
@ -652,20 +686,25 @@ body:not(.dragging) #drop-zone {
|
|||
}
|
||||
|
||||
#formatbar {
|
||||
margin-top:-8em;
|
||||
border:
|
||||
none;
|
||||
/* border-bottom:1px solid
|
||||
var(--divider-color); */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
/* position: fixed; */
|
||||
/* top: 0; */
|
||||
z-index: 100;
|
||||
background-color: var(--background-color);
|
||||
/* background-color: var(--background-color); */
|
||||
padding: 0;
|
||||
margin: 0 -12px;
|
||||
/* margin: 0 -12px; */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
opacity:0.25;
|
||||
opacity: 1.0;
|
||||
/* margin-top: -5em; */
|
||||
/* float: left; */
|
||||
/* top: 44px; */
|
||||
width: fit-content;
|
||||
left: 0;
|
||||
/* display: contents; */
|
||||
}
|
||||
#formatbar:hover {
|
||||
opacity:1.0;
|
||||
|
|
@ -673,4 +712,8 @@ body:not(.dragging) #drop-zone {
|
|||
|
||||
body.filecontent #formatbar {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#formatbar:hover .ql-formats {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">
|
||||
|
||||
<body>
|
||||
<iframe id="preview-frame"></iframe>
|
||||
<iframe class="hide-before-edit" id="preview-frame"></iframe>
|
||||
<div class="editor-container">
|
||||
<div id="doc-file"></div>
|
||||
<input id="file-input" type="file" name="name" style="display: none;" />
|
||||
|
|
@ -32,55 +32,28 @@
|
|||
|
||||
|
||||
|
||||
<div class="toolbar hide-before-edit" id="formatbar">
|
||||
<span class="ql-formats">
|
||||
<button class="ql-bold"></button>
|
||||
<button class="ql-italic"></button>
|
||||
<select class="ql-header" id="ql-header">HX</select>
|
||||
</span>
|
||||
<span class="ql-formats">
|
||||
<select class="ql-color"><option value="#F6D4D2"/><option value="#FAE4D3"/><option value="#FEF3D5"/><option value="#CFE8DC"/><option value="#CFE0E8"/><option value="#E1D7E8"/><option value="white"/><option value="#E99590"/><option value="#F3BB92"/><option value="#FDE095"/><option value="#86C6A8"/><option value="#86B1C6"/><option value="#B39BC6"/><option value="#A4A4A4"/><option value="#D42A20"/><option value="#E77625"/><option value="#FAC22B"/><option value="#0E8E51"/><option value="#0E638E"/><option value="#67378D"/><option value="#727272"/><option value="#BF0000"/><option value="#DB3F00"/><option value="#F8A600"/><option value="#005E12"/><option value="#00275E"/><option value="#2C005C"/><option value="#3D3D3D"/><option value="#860000"/><option value="#943E00"/><option value="#AE7400"/><option value="#00420D"/><option value="#001B42"/><option value="#1F0040"/><option value="black"/></select>
|
||||
<select class="ql-background"><option value="#F6D4D2"/><option value="#FAE4D3"/><option value="#FEF3D5"/><option value="#CFE8DC"/><option value="#CFE0E8"/><option value="#E1D7E8"/><option value="white"/><option value="#E99590"/><option value="#F3BB92"/><option value="#FDE095"/><option value="#86C6A8"/><option value="#86B1C6"/><option value="#B39BC6"/><option value="#A4A4A4"/><option value="#D42A20"/><option value="#E77625"/><option value="#FAC22B"/><option value="#0E8E51"/><option value="#0E638E"/><option value="#67378D"/><option value="#727272"/><option value="#BF0000"/><option value="#DB3F00"/><option value="#F8A600"/><option value="#005E12"/><option value="#00275E"/><option value="#2C005C"/><option value="#3D3D3D"/><option value="#860000"/><option value="#943E00"/><option value="#AE7400"/><option value="#00420D"/><option value="#001B42"/><option value="#1F0040"/><option value="black"/></select>
|
||||
</span>
|
||||
<span class="ql-formats">
|
||||
<select class="ql-align"></select>
|
||||
<button class="ql-blockquote"></button>
|
||||
<button class="ql-code-block"></button>
|
||||
</span>
|
||||
<span class="ql-formats">
|
||||
<button class="ql-clean"></button>
|
||||
<button class="ql-link"></button>
|
||||
</span>
|
||||
<span class="ql-formats">
|
||||
<button type="button" class="ql-list" value="bullet"></button>
|
||||
<button type="button" class="ql-list" value="ordered"></button>
|
||||
</span>
|
||||
<span class="ql-formats">
|
||||
<button class="ql-indent" value="-1"></button>
|
||||
<button class="ql-indent" value="+1"></button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="placeholder"> itty bitty things<br> can be conveyed in a link.<br> type here – and then share!<p> <a id="ib-info" href="http://about.bitty.site" target="_blank">about itty bitty</a></div>
|
||||
|
||||
<div id="doc-title" class="toolbarbutton hide-before-edit" placeholder="untitled">
|
||||
<div class="title" id="doc-title-text">untitled</div>
|
||||
<div class="title" id="doc-title-text"></div>
|
||||
<form id="md-contents" class="menu">
|
||||
<div class="inputrow"><label for="md-title">title</label><input type="text" name="title" id="md-title" placeholder="untitled"></div>
|
||||
<div class="inputrow"><label for="md-include">metadata</label><input type="checkbox" name="includeMetadata" id="md-include" placeholder="untitled"><label for="md-include">include social metadata</label></div>
|
||||
<div class="inputrow"><label for="md-description">description</label><input type="text" name="description" id="md-description" placeholder="text"></div>
|
||||
<div class="inputrow"><label for="md-favicon">favicon</label><input type="text" name="favicon" id="md-favicon" placeholder="emoji or url"></div>
|
||||
<div class="inputrow"><label for="md-image">image</label><input type="text" name="image" id="md-image" placeholder="image url"></div>
|
||||
<div class="inputrow"><label for="md-password">password</label><input type="text" name="password" id="md-password" placeholder="encryption password"></div>
|
||||
<div class="inputrow"><label for="md-include">metadata</label><input type="checkbox" name="includeMetadata" id="md-include" checked><label for="md-include">include link metadata</label><a href="">?</a></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="placeholder"> itty bitty things<br> can be conveyed in a link.<br> type here – and then share!<p> <a id="ib-info" href="http://about.bitty.site" target="_blank">about itty bitty</a></p></div>
|
||||
|
||||
<div id="editor"></div>
|
||||
|
||||
<div class="toolbar" id="menubar">
|
||||
|
||||
<!-- <div class="spacer"></div> -->
|
||||
<div class="toolbar-right">
|
||||
<div id="length" class="hide-before-edit"></div>
|
||||
<div id="length" class="hide-before-edit menu-item"></div>
|
||||
<div id="share" class="hide-before-edit menu-item">share</div>
|
||||
<div id="mainmenu">
|
||||
<div class="menu-item">menu</div>
|
||||
|
|
@ -100,6 +73,29 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="toolbar hide-before-edit" id="formatbar">
|
||||
|
||||
<div class="menu-item" id="format-toggle">Aa</div>
|
||||
<span class="ql-formats">
|
||||
<button class="ql-bold"></button>
|
||||
<button class="ql-italic"></button>
|
||||
<select class="ql-header" id="ql-header">HX</select>
|
||||
<select class="ql-color"><option value="#F6D4D2"/><option value="#FAE4D3"/><option value="#FEF3D5"/><option value="#CFE8DC"/><option value="#CFE0E8"/><option value="#E1D7E8"/><option value="white"/><option value="#E99590"/><option value="#F3BB92"/><option value="#FDE095"/><option value="#86C6A8"/><option value="#86B1C6"/><option value="#B39BC6"/><option value="#A4A4A4"/><option value="#D42A20"/><option value="#E77625"/><option value="#FAC22B"/><option value="#0E8E51"/><option value="#0E638E"/><option value="#67378D"/><option value="#727272"/><option value="#BF0000"/><option value="#DB3F00"/><option value="#F8A600"/><option value="#005E12"/><option value="#00275E"/><option value="#2C005C"/><option value="#3D3D3D"/><option value="#860000"/><option value="#943E00"/><option value="#AE7400"/><option value="#00420D"/><option value="#001B42"/><option value="#1F0040"/><option value="black"/></select>
|
||||
<select class="ql-background"><option value="#F6D4D2"/><option value="#FAE4D3"/><option value="#FEF3D5"/><option value="#CFE8DC"/><option value="#CFE0E8"/><option value="#E1D7E8"/><option value="white"/><option value="#E99590"/><option value="#F3BB92"/><option value="#FDE095"/><option value="#86C6A8"/><option value="#86B1C6"/><option value="#B39BC6"/><option value="#A4A4A4"/><option value="#D42A20"/><option value="#E77625"/><option value="#FAC22B"/><option value="#0E8E51"/><option value="#0E638E"/><option value="#67378D"/><option value="#727272"/><option value="#BF0000"/><option value="#DB3F00"/><option value="#F8A600"/><option value="#005E12"/><option value="#00275E"/><option value="#2C005C"/><option value="#3D3D3D"/><option value="#860000"/><option value="#943E00"/><option value="#AE7400"/><option value="#00420D"/><option value="#001B42"/><option value="#1F0040"/><option value="black"/></select>
|
||||
<button class="ql-clean"></button>
|
||||
</span>
|
||||
<span class="ql-formats">
|
||||
<button class="ql-code-block"></button>
|
||||
<button class="ql-link"></button>
|
||||
<select class="ql-align"></select>
|
||||
<button type="button" class="ql-list" value="bullet"></button>
|
||||
<button type="button" class="ql-list" value="ordered"></button>
|
||||
<button class="ql-indent" value="-1"></button>
|
||||
<button class="ql-indent" value="+1"></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
18
docs/edit.js
18
docs/edit.js
|
|
@ -41,7 +41,7 @@ editor.autocomplete="off";
|
|||
var importedFileData = undefined;
|
||||
|
||||
var content = editor;
|
||||
window.onload = function() {
|
||||
window.onload = async function() {
|
||||
window.onpopstate = function(e) {
|
||||
setContent(e.state);
|
||||
};
|
||||
|
|
@ -90,6 +90,8 @@ window.onload = function() {
|
|||
QS("#twitter").onclick = tweetLink;
|
||||
QS("#copy").onclick = copyLink;
|
||||
QS("#preview").onclick = togglePreview;
|
||||
QS("#format-toggle").onclick = toggleFormat;
|
||||
|
||||
QS("#mainmenu").onclick = () => { toggleMenu(QS("#mainmenu"))};
|
||||
|
||||
QS("#doc-title").onclick = toggleMetadata;
|
||||
|
|
@ -109,7 +111,10 @@ window.onload = function() {
|
|||
updateLink(hash, {title});
|
||||
if (hash.startsWith("?")) {
|
||||
hash = hash.substring(1);
|
||||
zipToString(hash, setContent);
|
||||
let durl = new bitty.DataURL(hash);
|
||||
durl = await durl.decompress();
|
||||
let htmlContent = durl.data;
|
||||
setContent(htmlContent);
|
||||
}
|
||||
} else {
|
||||
updateBodyClass();
|
||||
|
|
@ -313,18 +318,20 @@ function updateLink(url, metadata, push) {
|
|||
let path = includeMetadata ? "/" : bitty.metadataToPath(metadata) ?? "/";
|
||||
let prefix = includeMetadata ? bitty.encodePrettyComponent(title) : "";
|
||||
|
||||
console.log(`path [${path}]`)
|
||||
if (url.length) {
|
||||
url = path + "#" + prefix + "/" + url;
|
||||
} else {
|
||||
url = "/edit";
|
||||
}
|
||||
|
||||
document.getElementById("doc-title-text").innerText = title.length ? title : "untitled";
|
||||
document.getElementById("doc-title-text").innerText = title.length ? title : "";
|
||||
|
||||
bittyLink = new URL(url, document.location).href;
|
||||
|
||||
document.getElementById("canonical").href = bittyLink;
|
||||
|
||||
console.log("previewing", bittyLink);
|
||||
if(previewContent) QS("#preview-frame").src = bittyLink;
|
||||
|
||||
var hash = location.hash;
|
||||
|
|
@ -386,6 +393,11 @@ function togglePreview(flag) {
|
|||
previewContent = !previewContent;
|
||||
document.body.classList.toggle("preview", previewContent);
|
||||
}
|
||||
let formatContent = false;
|
||||
function toggleFormat(flag) {
|
||||
formatContent = !formatContent;
|
||||
document.body.classList.toggle("format", formatContent);
|
||||
}
|
||||
|
||||
|
||||
function copyThenLink() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue