diff --git a/gulpfile.js b/gulpfile.js index 6c0da7e1b..07eec5238 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -102,6 +102,7 @@ const refactoredSrc = [ "./src/js/theme-colors.js", "./src/js/test/out-of-focus.js", "./src/js/chart-controller.js", + "./src/js/theme-controller.js", ]; //legacy files diff --git a/src/js/account.js b/src/js/account.js index e035d9cff..161aef0b9 100644 --- a/src/js/account.js +++ b/src/js/account.js @@ -306,7 +306,6 @@ firebase.auth().onAuthStateChanged(function (user) { } setCustomTheme(true); setCustomThemeInputs(); - applyCustomThemeColors(); } if (/challenge_.+/g.test(window.location.pathname)) { let challengeName = window.location.pathname.split("_")[1]; diff --git a/src/js/commandline.js b/src/js/commandline.js index 9156802ae..bc3a2ad6e 100644 --- a/src/js/commandline.js +++ b/src/js/commandline.js @@ -314,10 +314,10 @@ let commands = { }, }, { - id: "togglePresetCustomTheme", + id: "toggleCustomTheme", display: "Toggle preset/custom theme", exec: () => { - togglePresetCustomTheme(); + toggleCustomTheme(); }, }, { @@ -502,7 +502,7 @@ let commands = { { id: "randomiseTheme", display: "Next random theme", - exec: () => randomiseTheme(), + exec: () => ThemeController.randomiseTheme(config), }, { id: "viewTypingPage", @@ -1603,7 +1603,8 @@ Misc.getThemesList().then((themes) => { id: "changeTheme" + Misc.capitalizeFirstLetter(theme.name), display: theme.name.replace(/_/g, " "), hover: () => { - previewTheme(theme.name); + // previewTheme(theme.name); + ThemeController.preview(theme.name); }, exec: () => { setTheme(theme.name); @@ -1620,7 +1621,8 @@ function showFavouriteThemesAtTheTop() { id: "changeTheme" + Misc.capitalizeFirstLetter(theme), display: theme.replace(/_/g, " "), hover: () => { - previewTheme(theme); + // previewTheme(theme); + ThemeController.preview(theme); }, exec: () => { setTheme(theme); @@ -1634,7 +1636,8 @@ function showFavouriteThemesAtTheTop() { id: "changeTheme" + Misc.capitalizeFirstLetter(theme.name), display: theme.name.replace(/_/g, " "), hover: () => { - previewTheme(theme.name); + // previewTheme(theme.name); + ThemeController.preview(theme.name); }, exec: () => { setTheme(theme.name); @@ -1911,11 +1914,6 @@ $(document).ready((e) => { hideCommandLine(); } setFontFamily(config.fontFamily, true); - if (config.customTheme === true) { - applyCustomThemeColors(); - } else { - setTheme(config.theme); - } } else if (event.keyCode == 9 || !config.swapEscAndTab) { if (config.singleListCommandLine == "on") useSingleListCommandLine(false); @@ -1984,15 +1982,14 @@ $("#commandLineWrapper #commandLine .suggestions").on("mouseover", (e) => { $("#commandLineWrapper #commandLine .suggestions .entry").removeClass( "activeKeyboard" ); - if (isPreviewingTheme) { - applyCustomThemeColors(); - // previewTheme(config.theme, false); - } let hoverId = $(e.target).attr("command"); try { let list = currentCommands[currentCommands.length - 1]; $.each(list.list, (index, obj) => { if (obj.id == hoverId) { + if (!/theme/gi.test(obj.id) || obj.id === "toggleCustomTheme") + ThemeController.clearPreview(); + if (!/font/gi.test(obj.id)) previewFontFamily(config.fontFamily); obj.hover(); } }); @@ -2008,20 +2005,20 @@ $("#commandLineWrapper").click((e) => { if ($(e.target).attr("id") === "commandLineWrapper") { hideCommandLine(); setFontFamily(config.fontFamily, true); - if (config.customTheme === true) { - applyCustomThemeColors(); - } else { - setTheme(config.theme, true); - } + // if (config.customTheme === true) { + // applyCustomThemeColors(); + // } else { + // setTheme(config.theme, true); + // } } }); $(document).keydown((e) => { - if (isPreviewingTheme) { - console.log("applying theme"); - applyCustomThemeColors(); - // previewTheme(config.theme, false); - } + // if (isPreviewingTheme) { + // console.log("applying theme"); + // applyCustomThemeColors(); + // previewTheme(config.theme, false); + // } if (!$("#commandLineWrapper").hasClass("hidden")) { $("#commandLine input").focus(); if (e.key == ">" && config.singleListCommandLine == "manual") { @@ -2110,6 +2107,9 @@ $(document).keydown((e) => { let list = currentCommands[currentCommands.length - 1]; $.each(list.list, (index, obj) => { if (obj.id == hoverId) { + if (!/theme/gi.test(obj.id) || obj.id === "toggleCustomTheme") + ThemeController.clearPreview(); + if (!/font/gi.test(obj.id)) previewFontFamily(config.fontFamily); obj.hover(); } }); @@ -2155,7 +2155,8 @@ function triggerCommand(command) { function hideCommandLine() { previewFontFamily(config.fontFamily); - applyCustomThemeColors(); + // applyCustomThemeColors(); + ThemeController.clearPreview(); $("#commandLineWrapper") .stop(true, true) .css("opacity", 1) @@ -2286,6 +2287,9 @@ function displayFoundCommands() { try { $.each(list.list, (index, obj) => { if (obj.found) { + if (!/theme/gi.test(obj.id) || obj.id === "toggleCustomTheme") + ThemeController.clearPreview(); + if (!/font/gi.test(obj.id)) previewFontFamily(config.fontFamily); obj.hover(); return false; } diff --git a/src/js/global-dependencies.js b/src/js/global-dependencies.js index b05b25670..6801ca867 100644 --- a/src/js/global-dependencies.js +++ b/src/js/global-dependencies.js @@ -30,3 +30,4 @@ import * as TestStats from "./test-stats"; import * as ThemeColors from "./theme-colors"; import * as OutOfFocus from "./out-of-focus"; import * as ChartController from "./chart-controller"; +import * as ThemeController from "./theme-controller"; diff --git a/src/js/script.js b/src/js/script.js index b21c25a2e..618d05b99 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -2907,7 +2907,7 @@ function restartTest(withSameWordset = false, nosave = false, event) { !pageTransition && !config.customTheme ) { - randomiseTheme(); + ThemeController.randomiseTheme(config); } } resultVisible = false; @@ -5632,10 +5632,10 @@ $(document).on("mouseenter", "#resultWordsHistory .words .word", (e) => { $(document).on("click", "#bottom .leftright .right .current-theme", (e) => { if (e.shiftKey) { - togglePresetCustomTheme(); + toggleCustomTheme(); } else { // if (config.customTheme) { - // togglePresetCustomTheme(); + // toggleCustomTheme(); // } currentCommands.push(commandsThemes); showCommandLine(); @@ -5676,7 +5676,6 @@ $(document).ready(() => { if (window.location.pathname === "/") { $("#top .config").removeClass("hidden"); } - updateFavicon(32, 14); $("body").css("transition", ".25s"); if (config.quickTab) { $("#restartTestButton").addClass("hidden"); diff --git a/src/js/settings.js b/src/js/settings.js index ce3d2e8c1..96474972c 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -402,8 +402,8 @@ function refreshThemeButtons() { let themesEl = $(".pageSettings .section.themes .allThemes.buttons").empty(); let activeThemeName = config.theme; - if (config.randomTheme !== "off" && randomTheme !== null) { - activeThemeName = randomTheme; + if (config.randomTheme !== "off" && ThemeController.randomTheme !== null) { + activeThemeName = ThemeController.randomTheme; } Misc.getSortedThemesList().then((themes) => { @@ -531,7 +531,7 @@ function hideCustomThemeShare() { config.customThemeColors = defaultConfig.customThemeColors; } setCustomThemeInputs(); - applyCustomThemeColors(); + // applyCustomThemeColors(); $("#customThemeShareWrapper input").val(""); $("#customThemeShareWrapper") .stop(true, true) @@ -952,17 +952,7 @@ $(document).on( ); //theme tabs & custom theme -const colorVars = [ - "--bg-color", - "--main-color", - "--caret-color", - "--sub-color", - "--text-color", - "--error-color", - "--error-extra-color", - "--colorful-error-color", - "--colorful-error-extra-color", -]; +const colorVars = ThemeController.colorVars; $(".pageSettings .section.themes .tabs .button").click((e) => { $(".pageSettings .section.themes .tabs .button").removeClass("active"); @@ -971,7 +961,8 @@ $(".pageSettings .section.themes .tabs .button").click((e) => { setCustomThemeInputs(); if ($target.attr("tab") == "preset") { setCustomTheme(false); - applyCustomThemeColors(); + ThemeController.set(config.theme); + // applyCustomThemeColors(); swapElements( $('.pageSettings .section.themes .tabContainer [tabContent="custom"]'), $('.pageSettings .section.themes .tabContainer [tabContent="preset"]'), @@ -979,7 +970,8 @@ $(".pageSettings .section.themes .tabs .button").click((e) => { ); } else { setCustomTheme(true); - applyCustomThemeColors(); + ThemeController.set("custom"); + // applyCustomThemeColors(); swapElements( $('.pageSettings .section.themes .tabContainer [tabContent="preset"]'), $('.pageSettings .section.themes .tabContainer [tabContent="custom"]'), @@ -1009,11 +1001,14 @@ $(".pageSettings .saveCustomThemeButton").click((e) => { } ); setCustomThemeColors(save); + ThemeController.set("custom"); Notifications.add("Custom theme colors saved", 0); }); $(".pageSettings #loadCustomColorsFromPreset").click((e) => { - previewTheme(config.theme); + // previewTheme(config.theme); + ThemeController.preview(config.theme); + colorVars.forEach((e) => { document.documentElement.style.setProperty(e, ""); }); diff --git a/src/js/theme-controller.js b/src/js/theme-controller.js new file mode 100644 index 000000000..71af5bb7c --- /dev/null +++ b/src/js/theme-controller.js @@ -0,0 +1,146 @@ +import * as ThemeColors from "./theme-colors"; +import * as ChartController from "./chart-controller"; +import * as Misc from "./misc"; +import * as Notifications from "./notification-center"; + +let isPreviewingTheme = false; +let randomTheme = null; +//TODO remove current theme and customcolors once config is a module +let currentTheme = "serika_dark"; +let customColors = [ + "#323437", + "#e2b714", + "#e2b714", + "#646669", + "#d1d0c5", + "#ca4754", + "#7e2a33", + "#ca4754", + "#7e2a33", +]; +export const colorVars = [ + "--bg-color", + "--main-color", + "--caret-color", + "--sub-color", + "--text-color", + "--error-color", + "--error-extra-color", + "--colorful-error-color", + "--colorful-error-extra-color", +]; + +export function apply(themeName) { + clearCustomTheme(); + + let name = "serika_dark"; + if (themeName !== "custom") { + name = themeName; + } + + $(".keymap-key").attr("style", ""); + $("#currentTheme").attr("href", `themes/${name}.css`); + $(".current-theme").text(themeName.replace("_", " ")); + + if (themeName === "custom") { + colorVars.forEach((e, index) => { + document.documentElement.style.setProperty(e, customColors[index]); + }); + } + + try { + firebase.analytics().logEvent("changedTheme", { + theme: themeName, + }); + } catch (e) { + console.log("Analytics unavailable"); + } + setTimeout(() => { + $(".keymap-key").attr("style", ""); + ChartController.updateAllChartColors(); + updateFavicon(32, 14); + $("#metaThemeColor").attr("content", ThemeColors.main); + }, 500); +} + +export function preview(themeName) { + isPreviewingTheme = true; + apply(themeName); +} + +export function set(themeName) { + currentTheme = themeName; + apply(themeName); +} + +export function clearPreview() { + if (isPreviewingTheme) { + isPreviewingTheme = false; + apply(currentTheme); + } +} + +export function setCustomColors(colors) { + customColors = colors; +} + +//TODO remove config once config is a module +export function randomiseTheme(config) { + var randomList; + Misc.getThemesList().then((themes) => { + randomList = themes.map((t) => { + return t.name; + }); + + if (config.randomTheme === "fav" && config.favThemes.length > 0) + randomList = config.favThemes; + randomTheme = randomList[Math.floor(Math.random() * randomList.length)]; + preview(randomTheme); + Notifications.add(randomTheme.replace(/_/g, " "), 0); + }); +} + +export function clearRandom() { + randomTheme = null; +} + +function updateFavicon(size, curveSize) { + let maincolor, bgcolor; + + bgcolor = ThemeColors.bg; + maincolor = ThemeColors.main; + + if (bgcolor == maincolor) { + bgcolor = "#111"; + maincolor = "#eee"; + } + + var canvas = document.createElement("canvas"); + canvas.width = size; + canvas.height = size; + let ctx = canvas.getContext("2d"); + ctx.beginPath(); + ctx.moveTo(0, curveSize); + //top left + ctx.quadraticCurveTo(0, 0, curveSize, 0); + ctx.lineTo(size - curveSize, 0); + //top right + ctx.quadraticCurveTo(size, 0, size, curveSize); + ctx.lineTo(size, size - curveSize); + ctx.quadraticCurveTo(size, size, size - curveSize, size); + ctx.lineTo(curveSize, size); + ctx.quadraticCurveTo(0, size, 0, size - curveSize); + ctx.fillStyle = bgcolor; + ctx.fill(); + ctx.font = "900 " + (size / 2) * 1.2 + "px Roboto Mono"; + ctx.textAlign = "center"; + ctx.fillStyle = maincolor; + ctx.fillText("mt", size / 2 + size / 32, (size / 3) * 2.1); + $("#favicon").attr("href", canvas.toDataURL("image/png")); +} + +function clearCustomTheme() { + colorVars.forEach((e) => { + document.documentElement.style.setProperty(e, ""); + }); +} diff --git a/src/js/userconfig.js b/src/js/userconfig.js index 6fa9e6293..5cbe90dba 100644 --- a/src/js/userconfig.js +++ b/src/js/userconfig.js @@ -1109,83 +1109,19 @@ function setIndicateTypos(it, nosave) { if (!nosave) saveConfigToCookie(); } -let isPreviewingTheme = false; -function previewTheme(name, setIsPreviewingVar = true) { - if ( - (testActive || resultVisible) && - (config.theme === "nausea" || config.theme === "round_round_baby") - ) - return; - if (resultVisible && (name === "nausea" || name === "round_round_baby")) - return; - isPreviewingTheme = setIsPreviewingVar; - clearCustomTheme(); - $("#currentTheme").attr("href", `themes/${name}.css`); - setTimeout(() => { - ChartController.updateAllChartColors(); - }, 500); -} - function setTheme(name, nosave) { - if ( - (testActive || resultVisible) && - (config.theme === "nausea" || config.theme === "round_round_baby") - ) { - return; - } - if (resultVisible && (name === "nausea" || name === "round_round_baby")) - return; config.theme = name; - $(".keymap-key").attr("style", ""); - $("#currentTheme").attr("href", `themes/${name}.css`); - $(".current-theme").text(name.replace("_", " ")); - setTimeout(() => { - updateFavicon(32, 14); - }, 500); - try { - firebase.analytics().logEvent("changedTheme", { - theme: name, - }); - } catch (e) { - console.log("Analytics unavailable"); - } setCustomTheme(false, true); - clearCustomTheme(); - // applyCustomThemeColors(); - setTimeout(() => { - $(".keymap-key").attr("style", ""); - ChartController.updateAllChartColors(); - - $("#metaThemeColor").attr("content", ThemeColors.main); - }, 500); + ThemeController.set(config.theme); if (!nosave) saveConfigToCookie(); } -let randomTheme = null; -function randomiseTheme() { - // var randomList = Misc.getThemesList().map((t) => { - // return t.name; - // }); - var randomList; - Misc.getThemesList().then((themes) => { - randomList = themes.map((t) => { - return t.name; - }); - - if (config.randomTheme === "fav" && config.favThemes.length > 0) - randomList = config.favThemes; - randomTheme = randomList[Math.floor(Math.random() * randomList.length)]; - setTheme(randomTheme, true); - Notifications.add(randomTheme.replace(/_/g, " "), 0); - }); -} - function setRandomTheme(val, nosave) { if (val === undefined || val === true || val === false) { val = "off"; } if (val === "off") { - randomTheme = null; + ThemeController.clearRandom(); } config.randomTheme = val; if (!nosave) saveConfigToCookie(); @@ -1196,45 +1132,11 @@ function setCustomTheme(boolean, nosave) { if (!nosave) saveConfigToCookie(); } -function setCustomThemeColors(colors, nosave) { - if (colors !== undefined) { - config.customThemeColors = colors; - applyCustomThemeColors(); - } - if (!nosave) saveConfigToCookie(); -} - -function applyCustomThemeColors() { - const array = config.customThemeColors; - - if (config.customTheme === true) { - $(".current-theme").text("custom"); - previewTheme("serika_dark", false); - colorVars.forEach((e, index) => { - document.documentElement.style.setProperty(e, array[index]); - }); - } else { - $(".current-theme").text(config.theme.replace("_", " ")); - previewTheme(config.theme, false); - clearCustomTheme(); - } - setTimeout(() => { - ChartController.updateAllChartColors(); - updateFavicon(32, 14); - $(".keymap-key").attr("style", ""); - }, 500); -} - -function clearCustomTheme() { - colorVars.forEach((e) => { - document.documentElement.style.setProperty(e, ""); - }); -} - -function togglePresetCustomTheme() { +function toggleCustomTheme(nosave) { if (config.customTheme) { setCustomTheme(false); - applyCustomThemeColors(); + ThemeController.set(config.theme); + // applyCustomThemeColors(); swapElements( $('.pageSettings [tabContent="custom"]'), $('.pageSettings [tabContent="preset"]'), @@ -1242,53 +1144,25 @@ function togglePresetCustomTheme() { ); } else { setCustomTheme(true); - applyCustomThemeColors(); + ThemeController.set("custom"); + // applyCustomThemeColors(); swapElements( $('.pageSettings [tabContent="preset"]'), $('.pageSettings [tabContent="custom"]'), 250 ); } - $(".keymap-key").attr("style", ""); + if (!nosave) saveConfigToCookie(); } -function updateFavicon(size, curveSize) { - let maincolor, bgcolor; - - bgcolor = getComputedStyle(document.body) - .getPropertyValue("--bg-color") - .replace(" ", ""); - maincolor = getComputedStyle(document.body) - .getPropertyValue("--main-color") - .replace(" ", ""); - - if (bgcolor == maincolor) { - bgcolor = "#111"; - maincolor = "#eee"; +function setCustomThemeColors(colors, nosave) { + if (colors !== undefined) { + config.customThemeColors = colors; + ThemeController.setCustomColors(colors); + // ThemeController.set("custom"); + // applyCustomThemeColors(); } - - var canvas = document.createElement("canvas"); - canvas.width = size; - canvas.height = size; - let ctx = canvas.getContext("2d"); - ctx.beginPath(); - ctx.moveTo(0, curveSize); - //top left - ctx.quadraticCurveTo(0, 0, curveSize, 0); - ctx.lineTo(size - curveSize, 0); - //top right - ctx.quadraticCurveTo(size, 0, size, curveSize); - ctx.lineTo(size, size - curveSize); - ctx.quadraticCurveTo(size, size, size - curveSize, size); - ctx.lineTo(curveSize, size); - ctx.quadraticCurveTo(0, size, 0, size - curveSize); - ctx.fillStyle = bgcolor; - ctx.fill(); - ctx.font = "900 " + (size / 2) * 1.2 + "px Roboto Mono"; - ctx.textAlign = "center"; - ctx.fillStyle = maincolor; - ctx.fillText("mt", size / 2 + size / 32, (size / 3) * 2.1); - $("#favicon").attr("href", canvas.toDataURL("image/png")); + if (!nosave) saveConfigToCookie(); } function setLanguage(language, nosave) {