monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-03-12 23:20:25 +08:00
Code Issues Projects Releases Packages Wiki Activity

added custom theme popup

Browse source
This commit is contained in:
Jack 2021-03-30 22:58:45 +01:00
parent 7faa1cff57
commit 3201871be5
5 changed files with 129 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
gulpfile.js
View file

@ -123,6 +123,7 @@ const refactoredSrc = [
"./src/js/popups/word-filter-popup.js",
"./src/js/popups/result-tags-popup.js",
"./src/js/popups/edit-tags-popup.js",
"./src/js/popups/custom-theme-popup.js",
"./src/js/settings/language-picker.js",
"./src/js/settings/theme-picker.js",

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

@ -57,3 +57,4 @@ import * as ResultTagsPopup from "./result-tags-popup";
import * as Settings from "./settings";
import * as SimplePopups from "./simple-popups";
import * as ThemePicker from "./theme-picker";
import "./custom-theme-popup";

73
src/js/popups/custom-theme-popup.js Normal file
View file

@ -0,0 +1,73 @@
import Config, * as UpdateConfig from "./config";
import * as Notifications from "./notifications";
import * as ThemePicker from "./theme-picker";
function show() {
if ($("#customThemeShareWrapper").hasClass("hidden")) {
let save = [];
$.each(
$(".pageSettings .section.customTheme [type='color']"),
(index, element) => {
save.push($(element).attr("value"));
}
);
$("#customThemeShareWrapper input").val(JSON.stringify(save));
$("#customThemeShareWrapper")
.stop(true, true)
.css("opacity", 0)
.removeClass("hidden")
.animate({ opacity: 1 }, 100, (e) => {
$("#customThemeShare input").focus();
$("#customThemeShare input").select();
$("#customThemeShare input").focus();
});
}
}
function hide() {
if (!$("#customThemeShareWrapper").hasClass("hidden")) {
try {
UpdateConfig.setCustomThemeColors(
JSON.parse($("#customThemeShareWrapper input").val())
);
} catch (e) {
Notifications.add(
"Something went wrong. Reverting to default custom colors.",
0,
4
);
UpdateConfig.setCustomThemeColors(Config.defaultConfig.customThemeColors);
}
ThemePicker.setCustomInputs();
// applyCustomThemeColors();
$("#customThemeShareWrapper input").val("");
$("#customThemeShareWrapper")
.stop(true, true)
.css("opacity", 1)
.animate(
{
opacity: 0,
},
100,
(e) => {
$("#customThemeShareWrapper").addClass("hidden");
}
);
}
}
$("#customThemeShareWrapper").click((e) => {
if ($(e.target).attr("id") === "customThemeShareWrapper") {
hide();
}
});
$("#customThemeShare .button").click((e) => {
hide();
});
$("#shareCustomThemeButton").click((e) => {
if (e.shiftKey) {
show();
}
});

129
src/js/settings.js
View file

@ -387,7 +387,7 @@ export function update() {
setActiveFunboxButton();
setActiveThemeButton();
setActiveThemeTab();
setCustomThemeInputs();
ThemePicker.setCustomInputs();
updateDiscordSection();
ThemePicker.refreshButtons();
@ -427,99 +427,6 @@ export function update() {
}
}
function showCustomThemeShare() {
if ($("#customThemeShareWrapper").hasClass("hidden")) {
let save = [];
$.each(
$(".pageSettings .section.customTheme [type='color']"),
(index, element) => {
save.push($(element).attr("value"));
}
);
$("#customThemeShareWrapper input").val(JSON.stringify(save));
$("#customThemeShareWrapper")
.stop(true, true)
.css("opacity", 0)
.removeClass("hidden")
.animate({ opacity: 1 }, 100, (e) => {
$("#customThemeShare input").focus();
$("#customThemeShare input").select();
$("#customThemeShare input").focus();
});
}
}
function hideCustomThemeShare() {
if (!$("#customThemeShareWrapper").hasClass("hidden")) {
try {
UpdateConfig.setCustomThemeColors(
JSON.parse($("#customThemeShareWrapper input").val())
);
} catch (e) {
Notifications.add(
"Something went wrong. Reverting to default custom colors.",
0,
4
);
UpdateConfig.setCustomThemeColors(Config.defaultConfig.customThemeColors);
}
setCustomThemeInputs();
// applyCustomThemeColors();
$("#customThemeShareWrapper input").val("");
$("#customThemeShareWrapper")
.stop(true, true)
.css("opacity", 1)
.animate(
{
opacity: 0,
},
100,
(e) => {
$("#customThemeShareWrapper").addClass("hidden");
}
);
}
}
$("#customThemeShareWrapper").click((e) => {
if ($(e.target).attr("id") === "customThemeShareWrapper") {
hideCustomThemeShare();
}
});
$("#customThemeShare .button").click((e) => {
hideCustomThemeShare();
});
$("#shareCustomThemeButton").click((e) => {
if (e.shiftKey) {
showCustomThemeShare();
} else {
let share = [];
$.each(
$(".pageSettings .section.customTheme [type='color']"),
(index, element) => {
share.push($(element).attr("value"));
}
);
let url =
"https://monkeytype.com?" +
Misc.objectToQueryString({ customTheme: share });
navigator.clipboard.writeText(url).then(
function () {
Notifications.add("URL Copied to clipboard", 0);
},
function (err) {
Notifications.add(
"Something went wrong when copying the URL: " + err,
-1
);
}
);
}
});
function toggleFavouriteTheme(themename) {
if (Config.favThemes.includes(themename)) {
//already favourite, remove
@ -618,18 +525,6 @@ function setActiveThemeTab() {
: $(".pageSettings .section.themes .tabs .button[tab='preset']").click();
}
export function setCustomThemeInputs() {
$(
".pageSettings .section.themes .tabContainer .customTheme input[type=color]"
).each((n, index) => {
let currentColor =
Config.customThemeColors[colorVars.indexOf($(index).attr("id"))];
$(index).val(currentColor);
$(index).attr("value", currentColor);
$(index).prev().text(currentColor);
});
}
function showActiveTags() {
DB.getSnapshot().tags.forEach((tag) => {
if (tag.active === true) {
@ -837,25 +732,25 @@ $(".pageSettings .section.themes .tabs .button").click((e) => {
$(".pageSettings .section.themes .tabs .button").removeClass("active");
var $target = $(e.currentTarget);
$target.addClass("active");
setCustomThemeInputs();
ThemePicker.setCustomInputs();
if ($target.attr("tab") == "preset") {
UpdateConfig.setCustomTheme(false);
ThemeController.set(Config.theme);
// applyCustomThemeColors();
UI.swapElements(
$('.pageSettings .section.themes .tabContainer [tabContent="custom"]'),
$('.pageSettings .section.themes .tabContainer [tabContent="preset"]'),
250
);
// UI.swapElements(
// $('.pageSettings .section.themes .tabContainer [tabContent="custom"]'),
// $('.pageSettings .section.themes .tabContainer [tabContent="preset"]'),
// 250
// );
} else {
UpdateConfig.setCustomTheme(true);
ThemeController.set("custom");
// applyCustomThemeColors();
UI.swapElements(
$('.pageSettings .section.themes .tabContainer [tabContent="preset"]'),
$('.pageSettings .section.themes .tabContainer [tabContent="custom"]'),
250
);
// UI.swapElements(
// $('.pageSettings .section.themes .tabContainer [tabContent="preset"]'),
// $('.pageSettings .section.themes .tabContainer [tabContent="custom"]'),
// 250
// );
}
});

42
src/js/settings/theme-picker.js
View file

@ -1,6 +1,7 @@
import Config from "./config";
import * as ThemeController from "./theme-controller";
import * as Misc from "./misc";
import * as Notifications from "./notifications";
export function refreshButtons() {
let favThemesEl = $(
@ -49,3 +50,44 @@ export function refreshButtons() {
});
});
}
export function setCustomInputs() {
$(
".pageSettings .section.themes .tabContainer .customTheme input[type=color]"
).each((n, index) => {
let currentColor =
Config.customThemeColors[
ThemeController.colorVars.indexOf($(index).attr("id"))
];
$(index).val(currentColor);
$(index).attr("value", currentColor);
$(index).prev().text(currentColor);
});
}
$("#shareCustomThemeButton").click((e) => {
if (!e.shiftKey) {
let share = [];
$.each(
$(".pageSettings .section.customTheme [type='color']"),
(index, element) => {
share.push($(element).attr("value"));
}
);
let url =
"https://monkeytype.com?" +
Misc.objectToQueryString({ customTheme: share });
navigator.clipboard.writeText(url).then(
function () {
Notifications.add("URL Copied to clipboard", 0);
},
function (err) {
Notifications.add(
"Something went wrong when copying the URL: " + err,
-1
);
}
);
}
});