From 0cc414e30766518091a8568a586154d737bda51d Mon Sep 17 00:00:00 2001 From: Nicholas Jitkoff Date: Wed, 29 Jun 2022 08:34:17 -0700 Subject: [PATCH] update loader --- docs/index.css | 71 ++++++++++++++++++++++++++++++++++---------------- docs/index.js | 50 +++++++++++++++++++++++++---------- 2 files changed, 84 insertions(+), 37 deletions(-) diff --git a/docs/index.css b/docs/index.css index 6bf6e41..aa4b309 100644 --- a/docs/index.css +++ b/docs/index.css @@ -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); } diff --git a/docs/index.js b/docs/index.js index 687806a..7104349 100644 --- a/docs/index.js +++ b/docs/index.js @@ -16,6 +16,8 @@ document.body.classList.remove("toasting") } + const isIframed = window.self !== window.top; + function addToast() { // `
// itty.bitty is experimental technology that renders linked content from outside sources. @@ -25,11 +27,26 @@ //
` } - 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 = `` @@ -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);