monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-11-09 21:51:29 +08:00
Code Issues Projects Releases Packages Wiki Activity

moved theme related code to a new module. part of #495

Browse source
This commit is contained in:
Miodec 2021-03-14 03:59:13 +00:00
parent d853c38b60
commit 7e25de8a0b
8 changed files with 208 additions and 189 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
gulpfile.js
View file

@ -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

1
src/js/account.js
View file

@ -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];

56
src/js/commandline.js
View file

@ -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;
}

1
src/js/global-dependencies.js
View file

@ -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";

7
src/js/script.js
View file

@ -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");

29
src/js/settings.js
View file

@ -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, "");
});

146
src/js/theme-controller.js Normal file
View file

@ -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, "");
});
}

156
src/js/userconfig.js
View file

@ -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) {