Remove theme.js file creation and move its code inside main.js
This commit is contained in:
parent
8ccc89bc31
commit
3ab4f9a204
4 changed files with 73 additions and 66 deletions
|
@ -88,7 +88,6 @@ crate fn render<T: Print, S: Print>(
|
|||
</button>\
|
||||
<div id=\"theme-choices\" role=\"menu\"></div>\
|
||||
</div>\
|
||||
<script src=\"{static_root_path}theme{suffix}.js\"></script>\
|
||||
<nav class=\"sub\">\
|
||||
<form class=\"search-form\">\
|
||||
<div class=\"search-container\">\
|
||||
|
|
|
@ -108,65 +108,14 @@ pub(super) fn write_shared(
|
|||
|
||||
let mut themes: Vec<&String> = themes.iter().collect();
|
||||
themes.sort();
|
||||
// To avoid theme switch latencies as much as possible, we put everything theme related
|
||||
// at the beginning of the html files into another js file.
|
||||
let theme_js = format!(
|
||||
r#"var themes = document.getElementById("theme-choices");
|
||||
var themePicker = document.getElementById("theme-picker");
|
||||
|
||||
function showThemeButtonState() {{
|
||||
themes.style.display = "block";
|
||||
themePicker.style.borderBottomRightRadius = "0";
|
||||
themePicker.style.borderBottomLeftRadius = "0";
|
||||
}}
|
||||
|
||||
function hideThemeButtonState() {{
|
||||
themes.style.display = "none";
|
||||
themePicker.style.borderBottomRightRadius = "3px";
|
||||
themePicker.style.borderBottomLeftRadius = "3px";
|
||||
}}
|
||||
|
||||
function switchThemeButtonState() {{
|
||||
if (themes.style.display === "block") {{
|
||||
hideThemeButtonState();
|
||||
}} else {{
|
||||
showThemeButtonState();
|
||||
}}
|
||||
}};
|
||||
|
||||
function handleThemeButtonsBlur(e) {{
|
||||
var active = document.activeElement;
|
||||
var related = e.relatedTarget;
|
||||
|
||||
if (active.id !== "theme-picker" &&
|
||||
(!active.parentNode || active.parentNode.id !== "theme-choices") &&
|
||||
(!related ||
|
||||
(related.id !== "theme-picker" &&
|
||||
(!related.parentNode || related.parentNode.id !== "theme-choices")))) {{
|
||||
hideThemeButtonState();
|
||||
}}
|
||||
}}
|
||||
|
||||
themePicker.onclick = switchThemeButtonState;
|
||||
themePicker.onblur = handleThemeButtonsBlur;
|
||||
{}.forEach(function(item) {{
|
||||
var but = document.createElement("button");
|
||||
but.textContent = item;
|
||||
but.onclick = function(el) {{
|
||||
switchTheme(currentTheme, mainTheme, item, true);
|
||||
useSystemTheme(false);
|
||||
}};
|
||||
but.onblur = handleThemeButtonsBlur;
|
||||
themes.appendChild(but);
|
||||
}});"#,
|
||||
serde_json::to_string(&themes).unwrap()
|
||||
);
|
||||
|
||||
write_minify(&cx.shared.fs, cx.path("theme.js"), &theme_js, options.enable_minification)?;
|
||||
write_minify(
|
||||
&cx.shared.fs,
|
||||
cx.path("main.js"),
|
||||
static_files::MAIN_JS,
|
||||
&static_files::MAIN_JS.replace(
|
||||
"/* INSERT THEMES HERE */",
|
||||
&format!(" = {}", serde_json::to_string(&themes).unwrap()),
|
||||
),
|
||||
options.enable_minification,
|
||||
)?;
|
||||
write_minify(
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
// Local js definitions:
|
||||
/* global addClass, getSettingValue, hasClass */
|
||||
/* global onEach, onEachLazy, hasOwnProperty, removeClass, updateLocalStorage */
|
||||
/* global hideThemeButtonState, showThemeButtonState */
|
||||
/* global switchTheme, useSystemTheme */
|
||||
|
||||
if (!String.prototype.startsWith) {
|
||||
String.prototype.startsWith = function(searchString, position) {
|
||||
|
@ -107,6 +107,65 @@ function defocusSearchBar() {
|
|||
getSearchInput().blur();
|
||||
}
|
||||
|
||||
function showThemeButtonState() {
|
||||
var themePicker = getThemePickerElement();
|
||||
var themeChoices = getThemesElement();
|
||||
|
||||
themeChoices.style.display = "block";
|
||||
themePicker.style.borderBottomRightRadius = "0";
|
||||
themePicker.style.borderBottomLeftRadius = "0";
|
||||
}
|
||||
|
||||
function hideThemeButtonState() {
|
||||
var themePicker = getThemePickerElement();
|
||||
var themeChoices = getThemesElement();
|
||||
|
||||
themeChoices.style.display = "none";
|
||||
themePicker.style.borderBottomRightRadius = "3px";
|
||||
themePicker.style.borderBottomLeftRadius = "3px";
|
||||
}
|
||||
|
||||
// Set up the theme picker list.
|
||||
(function () {
|
||||
var themeChoices = getThemesElement();
|
||||
var themePicker = getThemePickerElement();
|
||||
var availableThemes/* INSERT THEMES HERE */;
|
||||
|
||||
function switchThemeButtonState() {
|
||||
if (themeChoices.style.display === "block") {
|
||||
hideThemeButtonState();
|
||||
} else {
|
||||
showThemeButtonState();
|
||||
}
|
||||
}
|
||||
|
||||
function handleThemeButtonsBlur(e) {
|
||||
var active = document.activeElement;
|
||||
var related = e.relatedTarget;
|
||||
|
||||
if (active.id !== "theme-picker" &&
|
||||
(!active.parentNode || active.parentNode.id !== "theme-choices") &&
|
||||
(!related ||
|
||||
(related.id !== "theme-picker" &&
|
||||
(!related.parentNode || related.parentNode.id !== "theme-choices")))) {
|
||||
hideThemeButtonState();
|
||||
}
|
||||
}
|
||||
|
||||
themePicker.onclick = switchThemeButtonState;
|
||||
themePicker.onblur = handleThemeButtonsBlur;
|
||||
availableThemes.forEach(function(item) {
|
||||
var but = document.createElement("button");
|
||||
but.textContent = item;
|
||||
but.onclick = function() {
|
||||
switchTheme(window.currentTheme, window.mainTheme, item, true);
|
||||
useSystemTheme(false);
|
||||
};
|
||||
but.onblur = handleThemeButtonsBlur;
|
||||
themeChoices.appendChild(but);
|
||||
});
|
||||
}());
|
||||
|
||||
(function() {
|
||||
"use strict";
|
||||
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
/* global resourcesSuffix */
|
||||
|
||||
var darkThemes = ["dark", "ayu"];
|
||||
var currentTheme = document.getElementById("themeStyle");
|
||||
var mainTheme = document.getElementById("mainThemeStyle");
|
||||
window.currentTheme = document.getElementById("themeStyle");
|
||||
window.mainTheme = document.getElementById("mainThemeStyle");
|
||||
|
||||
var settingsDataset = (function () {
|
||||
var settingsElement = document.getElementById("default-settings");
|
||||
|
@ -137,7 +137,7 @@ function switchTheme(styleElem, mainStyleElem, newTheme, saveTheme) {
|
|||
}
|
||||
}
|
||||
|
||||
// This function is called from "theme.js", generated in `html/render/mod.rs`.
|
||||
// This function is called from "main.js".
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function useSystemTheme(value) {
|
||||
if (value === undefined) {
|
||||
|
@ -161,8 +161,8 @@ var updateSystemTheme = (function() {
|
|||
.getPropertyValue('content');
|
||||
|
||||
switchTheme(
|
||||
currentTheme,
|
||||
mainTheme,
|
||||
window.currentTheme,
|
||||
window.mainTheme,
|
||||
JSON.parse(cssTheme) || "light",
|
||||
true
|
||||
);
|
||||
|
@ -180,10 +180,10 @@ var updateSystemTheme = (function() {
|
|||
|
||||
if (mql.matches) {
|
||||
// prefers a dark theme
|
||||
switchTheme(currentTheme, mainTheme, darkTheme, true);
|
||||
switchTheme(window.currentTheme, window.mainTheme, darkTheme, true);
|
||||
} else {
|
||||
// prefers a light theme, or has no preference
|
||||
switchTheme(currentTheme, mainTheme, lightTheme, true);
|
||||
switchTheme(window.currentTheme, window.mainTheme, lightTheme, true);
|
||||
}
|
||||
|
||||
// note: we save the theme so that it doesn't suddenly change when
|
||||
|
@ -212,8 +212,8 @@ if (getSettingValue("use-system-theme") !== "false" && window.matchMedia) {
|
|||
updateSystemTheme();
|
||||
} else {
|
||||
switchTheme(
|
||||
currentTheme,
|
||||
mainTheme,
|
||||
window.currentTheme,
|
||||
window.mainTheme,
|
||||
getSettingValue("theme") || "light",
|
||||
false
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue