mirror of
https://github.com/arfct/itty-bitty.git
synced 2026-03-11 08:54:33 +00:00
update loader
This commit is contained in:
Nicholas Jitkoff
parent
5045f4be23
commit
0cc414e307
2 changed files with 84 additions and 37 deletions
|
|
@ -118,7 +118,11 @@ body:not(.download) #download {
|
|||
margin-bottom:2em;
|
||||
}
|
||||
|
||||
.loader{
|
||||
body:not(.loading) #loader {
|
||||
/* display:none; */
|
||||
opacity:0.0;
|
||||
}
|
||||
#loader{
|
||||
border-radius:50%;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
|
@ -126,8 +130,9 @@ body:not(.download) #download {
|
|||
margin: 0 auto;
|
||||
position: relative;
|
||||
text-indent: -9999em;
|
||||
color:white;
|
||||
display:none;
|
||||
color: white;
|
||||
opacity:1.0;
|
||||
transition: opacity 500ms;
|
||||
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
|
|
@ -140,26 +145,46 @@ body:not(.download) #download {
|
|||
animation-delay: -0.16s;
|
||||
animation-timing-function: ease-in-out;
|
||||
|
||||
--ld0: 0.00em 2.25em 0 0.20em rgba(127,127,127,1.50);
|
||||
--ld1: 0.93em 2.24em 0 0.20em rgba(127,127,127,1.45);
|
||||
--ld2: 1.76em 2.20em 0 0.18em rgba(127,127,127,1.31);
|
||||
--ld3: 2.43em 2.15em 0 0.16em rgba(127,127,127,1.09);
|
||||
--ld4: 2.85em 2.08em 0 0.13em rgba(127,127,127,0.81);
|
||||
--ld5: 3.00em 2.00em 0 0.10em rgba(127,127,127,0.50);
|
||||
--ld6: 2.85em 1.92em 0 0.07em rgba(127,127,127,0.19);
|
||||
--ld7: 2.43em 1.85em 0 0.04em rgba(127,127,127,-0.09);
|
||||
--ld8: 1.76em 1.80em 0 0.02em rgba(127,127,127,-0.31);
|
||||
--ld9: 0.93em 1.76em 0 0.00em rgba(127,127,127,-0.45);
|
||||
--ld10: 0.00em 1.75em 0 0.00em rgba(127,127,127,-0.50);
|
||||
--ld11: -0.93em 1.76em 0 0.00em rgba(127,127,127,-0.45);
|
||||
--ld12: -1.76em 1.80em 0 0.02em rgba(127,127,127,-0.31);
|
||||
--ld13: -2.43em 1.85em 0 0.04em rgba(127,127,127,-0.09);
|
||||
--ld14: -2.85em 1.92em 0 0.07em rgba(127,127,127,0.19);
|
||||
--ld15: -3.00em 2.00em 0 0.10em rgba(127,127,127,0.50);
|
||||
--ld16: -2.85em 2.08em 0 0.13em rgba(127,127,127,0.81);
|
||||
--ld17: -2.43em 2.15em 0 0.16em rgba(127,127,127,1.09);
|
||||
--ld18: -1.76em 2.20em 0 0.18em rgba(127,127,127,1.31);
|
||||
--ld19: -0.93em 2.24em 0 0.20em rgba(127,127,127,1.45);
|
||||
--ld0: 0.00em 2.25em 0 0.20em
|
||||
rgba(127,127,127,1.50);
|
||||
--ld1: 0.93em 2.24em 0 0.20em
|
||||
rgba(127,127,127,1.45);
|
||||
--ld2: 1.76em 2.20em 0 0.18em
|
||||
rgba(127,127,127,1.31);
|
||||
--ld3: 2.43em 2.15em 0 0.16em
|
||||
rgba(127,127,127,1.09);
|
||||
--ld4: 2.85em 2.08em 0 0.13em
|
||||
rgba(127,127,127,0.81);
|
||||
--ld5: 3.00em 2.00em 0 0.10em
|
||||
rgba(127,127,127,0.50);
|
||||
--ld6: 2.85em 1.92em 0 0.07em
|
||||
rgba(127,127,127,0.19);
|
||||
--ld7: 2.43em 1.85em 0 0.04em
|
||||
rgba(127,127,127,-0.09);
|
||||
--ld8: 1.76em 1.80em 0 0.02em
|
||||
rgba(127,127,127,-0.31);
|
||||
--ld9: 0.93em 1.76em 0 0.00em
|
||||
rgba(127,127,127,-0.45);
|
||||
--ld10: 0.00em 1.75em 0 0.00em
|
||||
rgba(127,127,127,-0.50);
|
||||
--ld11: -0.93em 1.76em 0 0.00em
|
||||
rgba(127,127,127,-0.45);
|
||||
--ld12: -1.76em 1.80em 0 0.02em
|
||||
rgba(127,127,127,-0.31);
|
||||
--ld13: -2.43em 1.85em 0 0.04em
|
||||
rgba(127,127,127,-0.09);
|
||||
--ld14: -2.85em 1.92em 0 0.07em
|
||||
rgba(127,127,127,0.19);
|
||||
--ld15: -3.00em 2.00em 0 0.10em
|
||||
rgba(127,127,127,0.50);
|
||||
--ld16: -2.85em 2.08em 0 0.13em
|
||||
rgba(127,127,127,0.81);
|
||||
--ld17: -2.43em 2.15em 0 0.16em
|
||||
rgba(127,127,127,1.09);
|
||||
--ld18: -1.76em 2.20em 0 0.18em
|
||||
rgba(127,127,127,1.31);
|
||||
--ld19: -0.93em 2.24em 0 0.20em
|
||||
rgba(127,127,127,1.45);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@
|
|||
document.body.classList.remove("toasting")
|
||||
}
|
||||
|
||||
const isIframed = window.self !== window.top;
|
||||
|
||||
function addToast() {
|
||||
// `<div id="toast">
|
||||
// itty.bitty is experimental technology that renders linked content from outside sources.
|
||||
|
|
@ -25,11 +27,26 @@
|
|||
// </div>`
|
||||
}
|
||||
|
||||
function addLoader() {
|
||||
let el = document.createElement("div");
|
||||
el.className = "loader";
|
||||
document.body.appendChild(el);
|
||||
function showLoader(state) {
|
||||
let loader = document.getElementById("loader");
|
||||
|
||||
if (state) {
|
||||
if (!loader) {
|
||||
loader = document.createElement("div");
|
||||
loader.id = "loader";
|
||||
document.body.appendChild(loader);
|
||||
}
|
||||
|
||||
setTimeout(() => document.body.classList.toggle("loading", true), 1)
|
||||
|
||||
} else {
|
||||
document.body.classList.toggle("loading", false)
|
||||
if (loader) {
|
||||
setTimeout(() => loader?.parentElement.removeChild(loader), 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
window.showLoader = showLoader;
|
||||
|
||||
function setThemeColor(color) {
|
||||
let el = document.getElementById("themeColor");
|
||||
|
|
@ -145,7 +162,8 @@
|
|||
if (e.data.getStorage) document.getElementById("iframe").postMessage(document.localStorage.getItem(contentHash), e.origin)
|
||||
}, false);
|
||||
|
||||
async function renderContent() {
|
||||
async function renderContent() {
|
||||
showLoader(true)
|
||||
var fragment = window.location.hash.substring(1);
|
||||
|
||||
if (window.location.search) { // Redirect search to path (coming out of server opengraph forwarding)
|
||||
|
|
@ -295,9 +313,11 @@
|
|||
} catch (e) {
|
||||
console.log("DL error", e)
|
||||
iframe.src = dataURL;
|
||||
showLoader(false)
|
||||
}
|
||||
} else if (renderMode == "data") {
|
||||
iframe.src = dataURL;
|
||||
showLoader(false)
|
||||
} else {
|
||||
bitty.dataToString(dataURL, function(content) {
|
||||
if (renderMode == "frame") {
|
||||
|
|
@ -308,14 +328,13 @@
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
let recordHistory = true
|
||||
if (recordHistory) recordToHistory(durl);
|
||||
if (!isIframed && recordHistory) recordToHistory(durl);
|
||||
|
||||
};
|
||||
|
||||
window.addEventListener('load',renderContent);
|
||||
// window.addEventListener('hashchange',renderContent);
|
||||
window.addEventListener('DOMContentLoaded',renderContent);
|
||||
window.addEventListener('hashchange',renderContent);
|
||||
|
||||
|
||||
const SCRIPT_LOADER = `<!doctype html><meta charset=utf-8><script src="${location.origin}/render.js"></script>`
|
||||
|
|
@ -340,6 +359,7 @@
|
|||
iframe.contentWindow.postMessage(params, "*");
|
||||
delete iframe.onload
|
||||
iframe.contentWindow.focus();
|
||||
showLoader(false)
|
||||
});
|
||||
// writeDocContent(iframe.contentWindow.document, SCRIPT_LOADER)
|
||||
// iframe.srcdoc = SCRIPT_LOADER;
|
||||
|
|
@ -393,9 +413,11 @@ async function recordToHistory() {
|
|||
for (let el of dom.getElementsByTagName('script')) { el.parentNode.removeChild(el) }
|
||||
|
||||
metadata.title = dom.title;
|
||||
metadata.description = dom.body.innerText.trim();
|
||||
if (!metadata.title.length) metadata.title = dom.title = (dom.body.children[0].innerText.trim()).split("\n").pop();
|
||||
metadata.description = metadata.description.replace(metadata.title, "").trim();
|
||||
metadata.description = dom.body?.innerText.trim();
|
||||
if (!metadata.title.length) {
|
||||
metadata.title = (dom.body?.children[0]?.innerText.trim())?.split("\n").pop();
|
||||
}
|
||||
metadata.description = metadata.description?.replace(metadata.title, "").trim();
|
||||
|
||||
|
||||
|
||||
|
|
@ -408,9 +430,9 @@ async function recordToHistory() {
|
|||
if (navigator.storage && navigator.storage.persist)
|
||||
navigator.storage.persist().then(granted => {
|
||||
if (granted)
|
||||
console.log("Storage will not be cleared except by explicit user action");
|
||||
console.debug("Storage will not be cleared except by explicit user action");
|
||||
else
|
||||
console.log("Storage may be cleared by the UA under storage pressure.");
|
||||
console.debug("Storage may be cleared by the UA under storage pressure.");
|
||||
});
|
||||
|
||||
let openRequest = indexedDB.open("history", 3);
|
||||
|
|
|
|||
Loading…
Reference in a new issue