diff --git a/static/app.js b/static/app.js index cd091a7..53bab0a 100644 --- a/static/app.js +++ b/static/app.js @@ -19,6 +19,8 @@ config: null, customCategories: { income: [], expense: [] }, }; + const viewOrder = ["dashboardView", "historyView", "leaderboardView", "addView"]; + let transitionCleanupTimer = 0; const categories = { income: ["Зарплата", "Фриланс", "Подарок", "Продажа", "Инвестиции", "Другое"], expense: ["Продукты", "Жильё", "Транспорт", "Здоровье", "Развлечения", "Покупки", "Другое"], @@ -34,6 +36,7 @@ if (!tg) return; safeTelegram(() => tg.ready()); safeTelegram(() => tg.expand()); + if (tg.isVersionAtLeast?.("8.0")) safeTelegram(() => tg.requestFullscreen()); safeTelegram(() => tg.enableClosingConfirmation?.()); if (tg.isVersionAtLeast?.("6.1")) safeTelegram(() => tg.setBackgroundColor("#111111")); if (tg.isVersionAtLeast?.("6.9")) safeTelegram(() => tg.setHeaderColor("#111111")); @@ -63,6 +66,15 @@ } function showView(viewId) { + const previousView = state.currentView; + if (viewId === previousView) { + if (viewId === "leaderboardView") loadLeaderboard(); + return; + } + const previousIndex = viewOrder.indexOf(previousView); + const nextIndex = viewOrder.indexOf(viewId); + const direction = nextIndex >= previousIndex ? "forward" : "backward"; + document.querySelectorAll(".bottom-nav button, .view").forEach((item) => item.classList.remove("active")); $(`#${viewId}`).classList.add("active"); document.querySelector(`.bottom-nav button[data-view="${viewId}"]`)?.classList.add("active"); @@ -70,9 +82,27 @@ document.body.classList.toggle("form-open", viewId === "addView"); updateNativeControls(); window.scrollTo({ top: 0, behavior: "auto" }); + animateViewStage(direction); if (viewId === "leaderboardView") loadLeaderboard(); } + function animateViewStage(direction) { + const stage = $("#viewStage"); + const className = direction === "backward" ? "transition-backward" : "transition-forward"; + window.clearTimeout(transitionCleanupTimer); + stage.onanimationend = null; + stage.classList.remove("transition-forward", "transition-backward"); + void stage.offsetWidth; + stage.classList.add(className); + + const cleanup = () => { + stage.classList.remove("transition-forward", "transition-backward"); + stage.onanimationend = null; + }; + stage.onanimationend = cleanup; + transitionCleanupTimer = window.setTimeout(cleanup, 400); + } + function openAddView() { if (state.currentView !== "addView") state.previousView = state.currentView; showView("addView"); diff --git a/static/index.html b/static/index.html index 949c570..6edebf1 100644 --- a/static/index.html +++ b/static/index.html @@ -6,9 +6,9 @@ Пожитки - + - +
@@ -23,6 +23,7 @@ +
@@ -118,6 +119,7 @@
Загружаем рейтинг…
+