tcsenpai/Zundler
1
0
Fork 0
mirror of https://github.com/tcsenpai/Zundler.git synced 2025-06-06 11:35:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change behavior of loading indicator

Browse Source 
We don't show the loading indicator at all between clicks. Instead, just
append the new iframe. Delete the old iframe when the new one sent the
"ready" message. This way we prevent flashing of the white browser
background, which looks jarring when viewing dark mode pages.
This commit is contained in:
Adrian Vollmer 2024-04-27 18:59:25 +02:00
parent c39ce14b35
commit 3eda0fb604
3 changed files with 20 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
zundler/assets/init.css
View File

@ -1,4 +1,4 @@
#zundler-iframe { #zundler-iframe, #old-zundler-iframe {
position:fixed; position:fixed;
top:0; left:0; bottom:0; right:0; top:0; left:0; bottom:0; right:0;
width:100%; width:100%;
@ -19,14 +19,13 @@
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
background: rgba(255, 255, 255, 0.0);
} }
.lds-ripple { .lds-ripple {
display: block; display: block;
position: relative; position: relative;
width: 80px; width: 80px;
height: 80px; height: 100%;
margin: auto; margin: auto;
z-index:1; z-index:1;
-webkit-transform: translateY(50%); -webkit-transform: translateY(50%);

2
zundler/assets/init.html
View File

@ -1 +1 @@
<div class="lds-ripple" id="loading-indicator"><div></div><div></div></div> <div id="loading-indicator"><div class="lds-ripple"><div></div><div></div></div></div>

34
zundler/assets/zundler_main.js
View File

@ -32,15 +32,12 @@ var setFavicon = function(href) {
}; };
var createIframe = function() { var createIframe = function(html) {
var iframe = document.getElementById(iFrameId); var iframe = document.createElement("iframe");
if (iframe) { iframe.remove() };
iframe = document.createElement("iframe");
window.document.body.prepend(iframe);
iframe.setAttribute('src', '#'); iframe.setAttribute('src', '#');
iframe.setAttribute('name', iFrameId); iframe.setAttribute('name', iFrameId);
iframe.setAttribute('id', iFrameId); iframe.setAttribute('id', iFrameId);
// iframe.style.display = 'none'; iframe.setAttribute("srcdoc", html);
return iframe; return iframe;
} }
@ -196,20 +193,19 @@ var embedImgs = function(doc) {
}; };
var loadVirtualPage = (function (path, get_params, anchor) { var loadVirtualPage = (function (path, getParams, anchor) {
// fill the iframe with the new page // fill the iframe with the new page
// return True if it worked // return True if it worked
// return False if loading indicator should be removed right away // return False if loading indicator should be removed right away
const file = window.globalContext.fileTree[path]; const file = window.globalContext.fileTree[path];
var iframe = createIframe();
if (!file) { if (!file) {
console.error("File not found:", path, get_params, anchor); console.error("File not found:", path, getParams, anchor);
return false; return false;
} }
const data = file.data; const data = file.data;
window.globalContext.getParameters = get_params; window.globalContext.getParameters = getParams;
// libmagic doesn't properly recognize mimetype of HTMl files that start // libmagic doesn't properly recognize mimetype of HTMl files that start
// with empty lines. It thinks it's javascript. So we also consider the // with empty lines. It thinks it's javascript. So we also consider the
@ -218,8 +214,14 @@ var loadVirtualPage = (function (path, get_params, anchor) {
window.globalContext.current_path = path; window.globalContext.current_path = path;
window.globalContext.anchor = anchor; window.globalContext.anchor = anchor;
const html = prepare(data); const html = prepare(data);
iframe.setAttribute("srcdoc", html); window.history.pushState({path, getParams, anchor}, '', '#');
window.history.pushState({path, get_params, anchor}, '', '#');
var oldIframe = document.getElementById(iFrameId);
if (oldIframe) { oldIframe.setAttribute('id', "old-" + iFrameId); };
var iframe = createIframe(html);
window.document.body.append(iframe);
return true; return true;
} else { } else {
let blob = new Blob([data], {type: file.mime_type}) let blob = new Blob([data], {type: file.mime_type})
@ -242,6 +244,8 @@ window.onload = function() {
iframe.contentWindow.postMessage({ iframe.contentWindow.postMessage({
action: "scrollToAnchor", action: "scrollToAnchor",
}, "*"); }, "*");
var oldIframe = document.getElementById("old-" + iFrameId);
if (oldIframe) { oldIframe.remove() };
} else if (evnt.data.action == 'retrieveFile') { } else if (evnt.data.action == 'retrieveFile') {
const path = evnt.data.argument.path; const path = evnt.data.argument.path;
@ -265,7 +269,7 @@ window.onload = function() {
} else if (evnt.data.action == 'virtualClick') { } else if (evnt.data.action == 'virtualClick') {
// user has clicked on a link in the iframe // user has clicked on a link in the iframe
showLoadingIndicator(); // showLoadingIndicator();
var loaded = loadVirtualPage( var loaded = loadVirtualPage(
evnt.data.argument.path, evnt.data.argument.path,
evnt.data.argument.getParameters, evnt.data.argument.getParameters,
@ -288,16 +292,12 @@ window.onload = function() {
var showLoadingIndicator = function() { var showLoadingIndicator = function() {
var iframe = document.getElementById(iFrameId);
iframe.remove()
var loading = document.getElementById('loading-indicator'); var loading = document.getElementById('loading-indicator');
loading.style.display = ''; loading.style.display = '';
} }
var hideLoadingIndicator = function() { var hideLoadingIndicator = function() {
var iframe = document.getElementById(iFrameId);
iframe.style.display = '';
var loading = document.getElementById('loading-indicator'); var loading = document.getElementById('loading-indicator');
loading.style.display = 'none'; loading.style.display = 'none';
} }