From 5a1460208acab76dace850e5ad49675881c453c2 Mon Sep 17 00:00:00 2001 From: Jack Date: Sun, 28 Mar 2021 23:39:11 +0100 Subject: [PATCH] moved sign out button to a module, smoothed out the transition between the config and sign out button --- gulpfile.js | 1 + src/js/account.js | 8 ------ src/js/global-dependencies.js | 1 + src/js/script.js | 48 ++++++++++++++++++++++------------- src/js/sign-out-button.js | 46 +++++++++++++++++++++++++++++++++ src/js/test/test-config.js | 32 +++++++++++++++++++++-- src/js/ui.js | 4 +++ src/sass/style.scss | 2 +- 8 files changed, 114 insertions(+), 28 deletions(-) create mode 100644 src/js/sign-out-button.js diff --git a/gulpfile.js b/gulpfile.js index 3f521c8f1..6b28ce40e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -135,6 +135,7 @@ const refactoredSrc = [ "./src/js/test/test-config.js", "./src/js/loader.js", "./src/js/mini-result-chart.js", + "./src/js/sign-out-button.js", ]; //legacy files diff --git a/src/js/account.js b/src/js/account.js index 96f6fe44a..41a5c9d08 100644 --- a/src/js/account.js +++ b/src/js/account.js @@ -1,13 +1,5 @@ var gmailProvider = new firebase.auth.GoogleAuthProvider(); -function showSignOutButton() { - $(".signOut").removeClass("hidden").css("opacity", 1); -} - -function hideSignOutButton() { - $(".signOut").css("opacity", 0).addClass("hidden"); -} - function signIn() { $(".pageLogin .preloader").removeClass("hidden"); let email = $(".pageLogin .login input")[0].value; diff --git a/src/js/global-dependencies.js b/src/js/global-dependencies.js index e643b9092..08e36cf28 100644 --- a/src/js/global-dependencies.js +++ b/src/js/global-dependencies.js @@ -49,3 +49,4 @@ import * as ChallengeController from "./challenge-controller"; import * as TestConfig from "./test-config"; import * as Loader from "./loader"; import * as MiniResultChart from "./mini-result-chart"; +import * as SignOutButton from "./sign-out-button"; diff --git a/src/js/script.js b/src/js/script.js index 223f1720f..e69e786ed 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -181,14 +181,21 @@ function changePage(page) { $("#wordsInput").focusout(); if (page == "test" || page == "") { UI.setPageTransition(true); - UI.swapElements(activePage, $(".page.pageTest"), 250, () => { - UI.setPageTransition(false); - TestUI.focusWords(); - $(".page.pageTest").addClass("active"); - history.pushState("/", null, "/"); - }); - TestConfig.show(); - hideSignOutButton(); + UI.swapElements( + activePage, + $(".page.pageTest"), + 250, + () => { + UI.setPageTransition(false); + TestUI.focusWords(); + $(".page.pageTest").addClass("active"); + history.pushState("/", null, "/"); + }, + () => { + TestConfig.show(); + } + ); + SignOutButton.hide(); // restartCount = 0; // incompleteTestSeconds = 0; TestStats.resetIncomplete(); @@ -203,7 +210,7 @@ function changePage(page) { $(".page.pageAbout").addClass("active"); }); TestConfig.hide(); - hideSignOutButton(); + SignOutButton.hide(); } else if (page == "settings") { UI.setPageTransition(true); TestLogic.restart(); @@ -214,21 +221,28 @@ function changePage(page) { }); updateSettingsPage(); TestConfig.hide(); - hideSignOutButton(); + SignOutButton.hide(); } else if (page == "account") { if (!firebase.auth().currentUser) { changePage("login"); } else { UI.setPageTransition(true); TestLogic.restart(); - UI.swapElements(activePage, $(".page.pageAccount"), 250, () => { - UI.setPageTransition(false); - history.pushState("account", null, "account"); - $(".page.pageAccount").addClass("active"); - }); + UI.swapElements( + activePage, + $(".page.pageAccount"), + 250, + () => { + UI.setPageTransition(false); + history.pushState("account", null, "account"); + $(".page.pageAccount").addClass("active"); + }, + () => { + SignOutButton.show(); + } + ); refreshAccountPage(); TestConfig.hide(); - showSignOutButton(); } } else if (page == "login") { if (firebase.auth().currentUser != null) { @@ -242,7 +256,7 @@ function changePage(page) { $(".page.pageLogin").addClass("active"); }); TestConfig.hide(); - hideSignOutButton(); + SignOutButton.hide(); } } } diff --git a/src/js/sign-out-button.js b/src/js/sign-out-button.js new file mode 100644 index 000000000..0fe149942 --- /dev/null +++ b/src/js/sign-out-button.js @@ -0,0 +1,46 @@ +export function show() { + // $(".signOut").removeClass("hidden").css("opacity", 1); + $(".signOut") + .stop(true, true) + .removeClass("hidden") + .css({ + opacity: 0, + transition: "0s", + }) + .animate( + { + opacity: 1, + }, + 125, + () => { + $(".signOut").css({ transition: "0.25s" }); + } + ); +} + +export function hide() { + $(".signOut") + .stop(true, true) + .css({ + opacity: 1, + transition: "0s", + }) + .animate( + { + opacity: 0, + }, + 125, + () => { + $(".signOut").css({ transition: "0.25s" }); + $(".signOut").addClass("hidden"); + } + ); + // $(".signOut").css("opacity", 0).addClass("hidden"); +} + +// $("#liveWpm").removeClass("hidden").css("opacity", 0).animate( +// { +// opacity: Config.timerOpacity, +// }, +// 125 +// ); diff --git a/src/js/test/test-config.js b/src/js/test/test-config.js index a86e41cc6..594e3119b 100644 --- a/src/js/test/test-config.js +++ b/src/js/test/test-config.js @@ -6,12 +6,40 @@ import * as TestLogic from "./test-logic"; import * as QuoteSearchPopup from "./quote-search-popup"; import * as CustomTextPopup from "./custom-text-popup"; +// export function show() { +// $("#top .config").removeClass("hidden").css("opacity", 1); +// } + +// export function hide() { +// $("#top .config").css("opacity", 0).addClass("hidden"); +// } + export function show() { - $("#top .config").removeClass("hidden").css("opacity", 1); + $("#top .config") + .stop(true, true) + .removeClass("hidden") + .css("opacity", 0) + .animate( + { + opacity: 1, + }, + 125 + ); } export function hide() { - $("#top .config").css("opacity", 0).addClass("hidden"); + $("#top .config") + .stop(true, true) + .css("opacity", 1) + .animate( + { + opacity: 0, + }, + 125, + () => { + $("#top .config").addClass("hidden"); + } + ); } $(document).on("click", "#top .config .wordCount .text-button", (e) => { diff --git a/src/js/ui.js b/src/js/ui.js index e605fb56f..22c487d6c 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -34,6 +34,9 @@ export function swapElements( totalDuration, callback = function () { return; + }, + middleCallback = function () { + return; } ) { if ( @@ -54,6 +57,7 @@ export function swapElements( }, totalDuration / 2, () => { + middleCallback(); $(el1).addClass("hidden"); $(el2) .removeClass("hidden") diff --git a/src/sass/style.scss b/src/sass/style.scss index 066e8ec81..f78d37261 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -1609,7 +1609,7 @@ a:hover { grid-gap: 0.2rem; // width: min-content; // width: -moz-min-content; - transition: 0.25s; + // transition: 0.25s; /* margin-bottom: 0.1rem; */ justify-items: self-end;