From 064eee38f10a61b9188f42e0ef8ad180cece0c0c Mon Sep 17 00:00:00 2001
From: Arkerthan <arkerthan@gmail.com>
Date: Sun, 23 Aug 2020 23:35:40 +0200
Subject: [PATCH] Merge normal theme and dev theme functionality
---
src/gui/theming.js | 69 +++++++++++++++++-----------------------------
themes/themes.md | 6 +++-
2 files changed, 31 insertions(+), 44 deletions(-)
diff --git a/src/gui/theming.js b/src/gui/theming.js
index 903f0ea5fe7..bd49204cca9 100644
--- a/src/gui/theming.js
+++ b/src/gui/theming.js
@@ -2,12 +2,12 @@ App.UI.Theme = (function() {
// NOTE: Due to browser limitations it is not possible to retrieve the path of selected files, only the filename.
// We therefore expect all files to be located in the same directory as the HTML file. Selected files from somewhere
// else will simply not be loaded or if a file in the correct place has the same name, it will be loaded instead.
+ /** @type {HTMLLinkElement} */
let currentThemeElement = null;
- let devTheme = null;
return {
selector: selector,
- devTheme: reloadDevTheme,
+ loadTheme: loadTheme,
init: loadFromStorage,
};
@@ -22,26 +22,37 @@ App.UI.Theme = (function() {
selector.accept = ".css";
div.append(selector);
- div.append(" ", App.UI.DOM.link("Apply", () => {
- unset();
+ div.append(" ", App.UI.DOM.link("Load", () => {
if (selector.files.length > 0) {
const themeFile = selector.files[0];
- set(themeFile.name);
+ loadTheme(themeFile.name);
}
- }), " ", App.UI.DOM.link("Unload", unset));
+ }), " ", App.UI.DOM.link("Unload", unloadTheme));
return div;
}
/**
- * @param {string} filename or filepath relative to the HTML file.
+ * @param {string} [filename] or filepath relative to the HTML file.
*/
- function set(filename) {
- SugarCube.storage.set("theme", filename);
- currentThemeElement = newTheme(filename);
+ function loadTheme(filename) {
+ unloadTheme();
+ if (filename) {
+ SugarCube.storage.set("theme", filename);
+ currentThemeElement = document.createElement("link");
+ currentThemeElement.setAttribute("rel", "stylesheet");
+ currentThemeElement.setAttribute("type", "text/css");
+ currentThemeElement.setAttribute("href", `./${filename}`);
+ // make it unique to force reloading instead of using the cached version
+ currentThemeElement.href += `?id=${Date.now()}`;
+ document.head.appendChild(currentThemeElement);
+ }
}
- function unset() {
+ /**
+ * Unloads the current theme
+ */
+ function unloadTheme() {
if (currentThemeElement !== null) {
document.head.removeChild(currentThemeElement);
currentThemeElement = null;
@@ -49,41 +60,13 @@ App.UI.Theme = (function() {
}
}
+ /**
+ * Loads a saved theme from browser storage
+ */
function loadFromStorage() {
const file = SugarCube.storage.get("theme");
if (file !== null) {
- set(file);
- }
- }
-
- /**
- * Unloads current dev theme and loads new theme if specified.
- * @param {string} [filename]
- */
- function reloadDevTheme(filename) {
- if (devTheme !== null) {
- document.head.removeChild(devTheme);
- devTheme = null;
- }
-
- if (filename !== undefined) {
- devTheme = newTheme(filename);
+ loadTheme(file);
}
}
-
- /**
- * Creates an new theme and adds it to the head element
- * @param {string} filename
- * @returns {HTMLLinkElement}
- */
- function newTheme(filename) {
- const theme = document.createElement("link");
- theme.setAttribute("rel", "stylesheet");
- theme.setAttribute("type", "text/css");
- theme.setAttribute("href", `./${filename}`);
- // make it unique to force reloading instead of using the cached version
- theme.href += `?id=${Date.now()}`;
- document.head.appendChild(theme);
- return theme;
- }
})();
diff --git a/themes/themes.md b/themes/themes.md
index 92cb3198767..24c3350e20d 100644
--- a/themes/themes.md
+++ b/themes/themes.md
@@ -6,4 +6,8 @@ page.
## Creating new themes
Files inside these directories are combined into one CSS file based on
-alphabetical ordering. The light theme is recommended as a base for creating new themes.
+alphabetical ordering. The light theme is recommended as a base for creating new themes.
+
+For quick testing run `App.UI.Theme.loadTheme("yourTheme.css")` in the browser console. This will unload the current
+theme and load the new theme. If you modify the same file it is effectively reloading. Supplying no argument (eg.
+`App.UI.Theme.loadTheme()`) will unload any theme.
--
GitLab