Fix turbo nav layout flash and stats page not loading.
Wait for page CSS before swapping content, hoist inline styles to head, and boot page scripts immediately when DOM markers exist. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+2
-1
@@ -44,7 +44,8 @@
|
||||
keyTimer = setInterval(pollKeyPrices, 1000);
|
||||
}
|
||||
|
||||
if (window.qihuoOnPageLoad) window.qihuoOnPageLoad(startPolling);
|
||||
if (window.qihuoPageBoot) window.qihuoPageBoot(startPolling, '#key-monitor-list');
|
||||
else if (window.qihuoOnPageLoad) window.qihuoOnPageLoad(startPolling);
|
||||
else document.addEventListener('DOMContentLoaded', startPolling);
|
||||
if (window.qihuoOnPageLeave) window.qihuoOnPageLeave(stopPolling);
|
||||
})();
|
||||
|
||||
+2
-1
@@ -742,7 +742,8 @@
|
||||
});
|
||||
}
|
||||
|
||||
if (window.qihuoOnPageLoad) window.qihuoOnPageLoad(bootMarketPage);
|
||||
if (window.qihuoPageBoot) window.qihuoPageBoot(bootMarketPage, '#market-chart-wrap');
|
||||
else if (window.qihuoOnPageLoad) window.qihuoOnPageLoad(bootMarketPage);
|
||||
else document.addEventListener('DOMContentLoaded', bootMarketPage);
|
||||
if (window.qihuoOnPageLeave) window.qihuoOnPageLeave(cleanupMarketPage);
|
||||
window.addEventListener('pagehide', cleanupMarketPage);
|
||||
|
||||
@@ -14,4 +14,14 @@
|
||||
global.qihuoEmitPageLoad = function () {
|
||||
global.dispatchEvent(new Event('qihuo:page-load'));
|
||||
};
|
||||
|
||||
/** Register page boot + run now if the page marker is already in DOM (turbo nav). */
|
||||
global.qihuoPageBoot = function (fn, selector) {
|
||||
function run() {
|
||||
if (selector && !global.document.querySelector(selector)) return;
|
||||
fn();
|
||||
}
|
||||
global.addEventListener('qihuo:page-load', run);
|
||||
run();
|
||||
};
|
||||
})();
|
||||
|
||||
+2
-1
@@ -52,7 +52,8 @@
|
||||
timer = setInterval(pollPrices, 1000);
|
||||
}
|
||||
|
||||
if (window.qihuoOnPageLoad) window.qihuoOnPageLoad(startPolling);
|
||||
if (window.qihuoPageBoot) window.qihuoPageBoot(startPolling, '#plan-monitor-list');
|
||||
else if (window.qihuoOnPageLoad) window.qihuoOnPageLoad(startPolling);
|
||||
else document.addEventListener('DOMContentLoaded', startPolling);
|
||||
if (window.qihuoOnPageLeave) window.qihuoOnPageLeave(stopPolling);
|
||||
})();
|
||||
|
||||
+2
-1
@@ -169,7 +169,8 @@
|
||||
recalc();
|
||||
}
|
||||
|
||||
if (window.qihuoOnPageLoad) window.qihuoOnPageLoad(bootReviewPage);
|
||||
if (window.qihuoPageBoot) window.qihuoPageBoot(bootReviewPage, '#review-form');
|
||||
else if (window.qihuoOnPageLoad) window.qihuoOnPageLoad(bootReviewPage);
|
||||
else document.addEventListener('DOMContentLoaded', bootReviewPage);
|
||||
|
||||
window.recalc = recalc;
|
||||
|
||||
+2
-1
@@ -158,6 +158,7 @@
|
||||
loadStats();
|
||||
}
|
||||
|
||||
if (window.qihuoOnPageLoad) window.qihuoOnPageLoad(bootStatsPage);
|
||||
if (window.qihuoPageBoot) window.qihuoPageBoot(bootStatsPage, '#stats-summary');
|
||||
else if (window.qihuoOnPageLoad) window.qihuoOnPageLoad(bootStatsPage);
|
||||
else document.addEventListener('DOMContentLoaded', bootStatsPage);
|
||||
})();
|
||||
|
||||
+2
-1
@@ -1648,7 +1648,8 @@
|
||||
}
|
||||
});
|
||||
|
||||
if (window.qihuoOnPageLoad) window.qihuoOnPageLoad(bootTradePage);
|
||||
if (window.qihuoPageBoot) window.qihuoPageBoot(bootTradePage, '#position-live-list, #order-live-list');
|
||||
else if (window.qihuoOnPageLoad) window.qihuoOnPageLoad(bootTradePage);
|
||||
else bootTradePage();
|
||||
if (window.qihuoOnPageLeave) window.qihuoOnPageLeave(cleanupTradePage);
|
||||
window.addEventListener('pagehide', cleanupTradePage);
|
||||
|
||||
+41
-23
@@ -71,9 +71,19 @@
|
||||
if (el.tagName === 'LINK' && isPermanentStylesheet(el)) return;
|
||||
out.push(el);
|
||||
});
|
||||
doc.querySelectorAll('.main style').forEach(function (el) {
|
||||
out.push(el);
|
||||
});
|
||||
return out;
|
||||
}
|
||||
|
||||
function prepareMainHtml(doc) {
|
||||
var fetchedMain = doc.querySelector('.main');
|
||||
if (!fetchedMain) return '';
|
||||
fetchedMain.querySelectorAll('style').forEach(function (el) { el.remove(); });
|
||||
return fetchedMain.innerHTML;
|
||||
}
|
||||
|
||||
function collectPageScripts(doc) {
|
||||
var out = [];
|
||||
var pastCore = false;
|
||||
@@ -83,29 +93,34 @@
|
||||
return;
|
||||
}
|
||||
if (!pastCore) return;
|
||||
if (isCoreScript(el)) return;
|
||||
out.push(el);
|
||||
});
|
||||
return out;
|
||||
}
|
||||
|
||||
function removePageAssets() {
|
||||
document.querySelectorAll('head link[rel="stylesheet"]').forEach(function (el) {
|
||||
if (!isPermanentStylesheet(el)) el.remove();
|
||||
});
|
||||
document.querySelectorAll('head style').forEach(function (el) { el.remove(); });
|
||||
document.querySelectorAll('[data-page-css]').forEach(function (el) { el.remove(); });
|
||||
document.querySelectorAll('body script[data-page-js]').forEach(function (el) { el.remove(); });
|
||||
}
|
||||
|
||||
function applyPageCss(items) {
|
||||
items.forEach(function (srcEl) {
|
||||
var el = srcEl.cloneNode(true);
|
||||
if (el.tagName === 'LINK') {
|
||||
el.setAttribute('data-page-css', '');
|
||||
} else {
|
||||
el.setAttribute('data-page-css', '');
|
||||
}
|
||||
document.head.appendChild(el);
|
||||
});
|
||||
return items.reduce(function (chain, srcEl) {
|
||||
return chain.then(function () {
|
||||
return new Promise(function (resolve) {
|
||||
var el = srcEl.cloneNode(true);
|
||||
el.setAttribute('data-page-css', '');
|
||||
if (el.tagName === 'LINK') {
|
||||
el.onload = function () { resolve(); };
|
||||
el.onerror = function () { resolve(); };
|
||||
document.head.appendChild(el);
|
||||
} else {
|
||||
document.head.appendChild(el);
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
});
|
||||
}, Promise.resolve());
|
||||
}
|
||||
|
||||
function runPageScripts(items) {
|
||||
@@ -132,7 +147,7 @@
|
||||
}, Promise.resolve());
|
||||
}
|
||||
|
||||
function syncNavActive(doc, url) {
|
||||
function syncNavActive(doc) {
|
||||
var nav = document.getElementById('site-nav');
|
||||
var fetchedNav = doc.getElementById('site-nav');
|
||||
if (!nav || !fetchedNav) return;
|
||||
@@ -153,20 +168,23 @@
|
||||
|
||||
function applyDocument(doc, url, fromPopstate) {
|
||||
var main = document.querySelector('.main');
|
||||
var fetchedMain = doc.querySelector('.main');
|
||||
if (!main || !fetchedMain) {
|
||||
if (!main || !doc.querySelector('.main')) {
|
||||
window.location.href = url;
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
window.dispatchEvent(new Event('qihuo:page-leave'));
|
||||
removePageAssets();
|
||||
applyPageCss(collectPageCss(doc));
|
||||
main.innerHTML = fetchedMain.innerHTML;
|
||||
document.title = doc.title || document.title;
|
||||
syncNavActive(doc, url);
|
||||
|
||||
return runPageScripts(collectPageScripts(doc)).then(function () {
|
||||
var cssItems = collectPageCss(doc);
|
||||
var mainHtml = prepareMainHtml(doc);
|
||||
|
||||
return applyPageCss(cssItems).then(function () {
|
||||
main.innerHTML = mainHtml;
|
||||
document.title = doc.title || document.title;
|
||||
syncNavActive(doc, url);
|
||||
return runPageScripts(collectPageScripts(doc));
|
||||
}).then(function () {
|
||||
currentUrl = normalizeUrl(url);
|
||||
if (!fromPopstate) {
|
||||
history.pushState({ turbo: true }, '', currentUrl);
|
||||
@@ -190,8 +208,8 @@
|
||||
return fetchPage(target, ctrl.signal).then(function (doc) {
|
||||
if (ctrl.signal.aborted) return;
|
||||
inflight = null;
|
||||
applyDocument(doc, target, !!opts.fromPopstate);
|
||||
}).catch(function (err) {
|
||||
return applyDocument(doc, target, !!opts.fromPopstate);
|
||||
}).catch(function () {
|
||||
if (ctrl.signal.aborted) return;
|
||||
inflight = null;
|
||||
setLoading(false);
|
||||
|
||||
Reference in New Issue
Block a user