mirrors/tt-rss
1
0
Fork 0
mirror of https://git.tt-rss.org/fox/tt-rss.git synced 2025-08-10 16:17:19 +02:00
Code Issues Projects Releases Wiki Activity

workaround for a race condition between dojo.parse() and tt-rss loading proper day/night css on startup because of firefox async CSS loader

Browse Source
This commit is contained in:
Andrew Dolgov 2019-12-15 11:57:26 +03:00
parent 0d6add5d7f
commit 07f4878d59
5 changed files with 92 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
index.php
View File

@ -48,8 +48,6 @@
$theme = get_pref("USER_CSS_THEME", false, false); $theme = get_pref("USER_CSS_THEME", false, false);
if ($theme && theme_exists("$theme")) { if ($theme && theme_exists("$theme")) {
echo stylesheet_tag(get_theme_path($theme), 'theme_css'); echo stylesheet_tag(get_theme_path($theme), 'theme_css');
} else {
echo stylesheet_tag("css/default.css", 'theme_css');
} }
} }
?> ?>
@ -116,11 +114,23 @@
?> ?>
</script> </script>
<style type="text/css">
@media (prefers-color-scheme: dark) {
body {
background : #303030;
}
}
body.css_loading * {
display : none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="referrer" content="no-referrer"/> <meta name="referrer" content="no-referrer"/>
</head> </head>
<body class="flat ttrss_main ttrss_index"> <body class="flat ttrss_main ttrss_index css_loading">
<div id="overlay" style="display : block"> <div id="overlay" style="display : block">
<div id="overlay_inner"> <div id="overlay_inner">

40
js/AppBase.js
View File

@ -9,7 +9,6 @@ define(["dojo/_base/declare"], function (declare) {
hotkey_prefix_timeout: 0, hotkey_prefix_timeout: 0,
constructor: function() { constructor: function() {
window.onerror = this.Error.onWindowError; window.onerror = this.Error.onWindowError;
this.setupNightModeDetection();
}, },
getInitParam: function(k) { getInitParam: function(k) {
return this._initParams[k]; return this._initParams[k];
@ -17,30 +16,47 @@ define(["dojo/_base/declare"], function (declare) {
setInitParam: function(k, v) { setInitParam: function(k, v) {
this._initParams[k] = v; this._initParams[k] = v;
}, },
nightModeChanged: function(is_night) { nightModeChanged: function(is_night, link) {
console.log("night mode changed to", is_night); console.log("night mode changed to", is_night);
const link = $("theme_css");
if (link) { if (link) {
if (link.getAttribute("data-orig-href").indexOf("css/default.css") !== -1) {
const css_override = is_night ? "themes/night.css" : "css/default.css"; const css_override = is_night ? "themes/night.css" : "css/default.css";
link.setAttribute("href", css_override + "?" + Date.now()); link.setAttribute("href", css_override + "?" + Date.now());
} }
}
}, },
setupNightModeDetection: function() { setupNightModeDetection: function(callback) {
if (window.matchMedia) { if (!$("theme_css")) {
const mql = window.matchMedia('(prefers-color-scheme: dark)'); const mql = window.matchMedia('(prefers-color-scheme: dark)');
try { try {
mql.addEventListener("change", () => { mql.addEventListener("change", () => {
this.nightModeChanged(mql.matches); this.nightModeChanged(mql.matches, $("theme_auto_css"));
}); });
} catch (e) {} } catch (e) {
console.warn("exception while trying to set MQL event listener");
}
this.nightModeChanged(mql.matches); const link = new Element("link", {
rel: "stylesheet",
id: "theme_auto_css"
});
if (callback) {
link.onload = function () {
document.querySelector("body").removeClassName("css_loading");
callback();
};
link.onerror = function(event) {
alert("Fatal error while loading application stylesheet: " + link.getAttribute("href"));
}
}
this.nightModeChanged(mql.matches, link);
document.querySelector("head").appendChild(link);
} else {
if (callback) callback();
} }
}, },
enableCsrfSupport: function() { enableCsrfSupport: function() {

2
js/prefs.js
View File

@ -63,6 +63,7 @@ require(["dojo/_base/kernel",
try { try {
const _App = declare("fox.App", AppBase, { const _App = declare("fox.App", AppBase, {
constructor: function() { constructor: function() {
this.setupNightModeDetection(() => {
parser.parse(); parser.parse();
this.setLoadingProgress(50); this.setLoadingProgress(50);
@ -77,6 +78,7 @@ require(["dojo/_base/kernel",
this.Error.report(e); this.Error.report(e);
} }
}); });
});
}, },
initSecondStage: function() { initSecondStage: function() {
this.enableCsrfSupport(); this.enableCsrfSupport();

2
js/tt-rss.js
View File

@ -67,6 +67,7 @@ require(["dojo/_base/kernel",
_widescreen_mode: false, _widescreen_mode: false,
hotkey_actions: {}, hotkey_actions: {},
constructor: function () { constructor: function () {
this.setupNightModeDetection(() => {
parser.parse(); parser.parse();
if (!this.checkBrowserFeatures()) if (!this.checkBrowserFeatures())
@ -95,6 +96,7 @@ require(["dojo/_base/kernel",
App.Error.report(e); App.Error.report(e);
} }
}); });
});
}, },
checkBrowserFeatures: function() { checkBrowserFeatures: function() {
let errorMsg = ""; let errorMsg = "";

16
prefs.php
View File

@ -40,8 +40,6 @@
$theme = get_pref("USER_CSS_THEME", false, false); $theme = get_pref("USER_CSS_THEME", false, false);
if ($theme && theme_exists("$theme")) { if ($theme && theme_exists("$theme")) {
echo stylesheet_tag(get_theme_path($theme), 'theme_css'); echo stylesheet_tag(get_theme_path($theme), 'theme_css');
} else {
echo stylesheet_tag("css/default.css", 'theme_css');
} }
} }
?> ?>
@ -99,10 +97,22 @@
?> ?>
</script> </script>
<style type="text/css">
@media (prefers-color-scheme: dark) {
body {
background : #303030;
}
}
body.css_loading * {
display : none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head> </head>
<body class="flat ttrss_main ttrss_prefs"> <body class="flat ttrss_main ttrss_prefs css_loading">
<div id="notify" class="notify"></div> <div id="notify" class="notify"></div>
<div id="cmdline" style="display : none"></div> <div id="cmdline" style="display : none"></div>