diff --git a/gulpfile.js b/gulpfile.js index 1e33ad77f..14028aecd 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -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", diff --git a/src/js/global-dependencies.js b/src/js/global-dependencies.js index 2a09bebf1..47aacabb8 100644 --- a/src/js/global-dependencies.js +++ b/src/js/global-dependencies.js @@ -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"; diff --git a/src/js/popups/custom-theme-popup.js b/src/js/popups/custom-theme-popup.js new file mode 100644 index 000000000..19ace2c7e --- /dev/null +++ b/src/js/popups/custom-theme-popup.js @@ -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(); + } +}); diff --git a/src/js/settings.js b/src/js/settings.js index 7cf132a88..fed9dd01b 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -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 + // ); } }); diff --git a/src/js/settings/theme-picker.js b/src/js/settings/theme-picker.js index c05c9e89d..9f676e447 100644 --- a/src/js/settings/theme-picker.js +++ b/src/js/settings/theme-picker.js @@ -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 + ); + } + ); + } +});