snw/bot_pozhitki
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace native action with floating app control

Browse source
This commit is contained in:
Codex 2026-09-07 20:56:19 +00:00
parent 135d7f0203
commit d928811e7e
3 changed files with 34 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
static/app.js
View file

@ -60,7 +60,7 @@
} }
function bindNavigation() { function bindNavigation() {
document.querySelectorAll(".bottom-nav button").forEach((button) => { document.querySelectorAll(".nav-tabs button").forEach((button) => {
button.addEventListener("click", () => showView(button.dataset.view)); button.addEventListener("click", () => showView(button.dataset.view));
}); });
} }
@ -75,7 +75,7 @@
const nextIndex = viewOrder.indexOf(viewId); const nextIndex = viewOrder.indexOf(viewId);
const direction = nextIndex >= previousIndex ? "forward" : "backward"; const direction = nextIndex >= previousIndex ? "forward" : "backward";
document.querySelectorAll(".bottom-nav button, .view").forEach((item) => item.classList.remove("active")); document.querySelectorAll(".nav-tabs button, .view").forEach((item) => item.classList.remove("active"));
$(`#${viewId}`).classList.add("active"); $(`#${viewId}`).classList.add("active");
document.querySelector(`.bottom-nav button[data-view="${viewId}"]`)?.classList.add("active"); document.querySelector(`.bottom-nav button[data-view="${viewId}"]`)?.classList.add("active");
state.currentView = viewId; state.currentView = viewId;
@ -114,30 +114,24 @@
} }
function setupNativeControls() { function setupNativeControls() {
const isTelegramClient = Boolean(tg?.platform && tg.platform !== "unknown"); $("#appActionButton").addEventListener("click", () => {
if (!isTelegramClient || !tg?.MainButton) return;
safeTelegram(() => tg.MainButton.onClick(() => {
if (state.currentView === "addView") { if (state.currentView === "addView") {
$("#transactionForm").requestSubmit(); $("#transactionForm").requestSubmit();
} else { } else {
openAddView(); openAddView();
} }
})); });
safeTelegram(() => tg.BackButton?.onClick(closeAddView)); if (tg) safeTelegram(() => tg.BackButton?.onClick(closeAddView));
updateNativeControls(); updateNativeControls();
} }
function updateNativeControls() { function updateNativeControls() {
const isTelegramClient = Boolean(tg?.platform && tg.platform !== "unknown");
if (!isTelegramClient || !tg?.MainButton) return;
const isForm = state.currentView === "addView"; const isForm = state.currentView === "addView";
safeTelegram(() => tg.MainButton.setParams({ const action = $("#appActionButton");
text: isForm ? "Сохранить операцию" : "Добавить запись", action.textContent = isForm ? "Сохранить" : "+";
color: "#f0d28a", action.setAttribute("aria-label", isForm ? "Сохранить операцию" : "Добавить запись");
text_color: "#17130b", if (!tg) return;
is_active: true, safeTelegram(() => tg.MainButton?.hide());
is_visible: true,
}));
safeTelegram(() => isForm ? tg.BackButton?.show() : tg.BackButton?.hide()); safeTelegram(() => isForm ? tg.BackButton?.show() : tg.BackButton?.hide());
} }
@ -220,13 +214,16 @@
return false; return false;
} }
if (!canSendViaTelegram()) return false; if (!canSendViaTelegram()) return false;
const action = $("#appActionButton");
try { try {
safeTelegram(() => tg.MainButton?.showProgress()); action.disabled = true;
action.textContent = "Сохраняем…";
tg.HapticFeedback?.notificationOccurred("success"); tg.HapticFeedback?.notificationOccurred("success");
tg.sendData(encoded); tg.sendData(encoded);
return true; return true;
} catch (error) { } catch (error) {
safeTelegram(() => tg.MainButton?.hideProgress()); action.disabled = false;
updateNativeControls();
console.error("Telegram sendData failed", error); console.error("Telegram sendData failed", error);
showToast("Telegram не принял запись. Обновите приложение и попробуйте снова"); showToast("Telegram не принял запись. Обновите приложение и попробуйте снова");
return false; return false;

13
static/index.html
View file

@ -6,9 +6,9 @@
<meta name="color-scheme" content="dark" /> <meta name="color-scheme" content="dark" />
<meta name="theme-color" content="#111111" /> <meta name="theme-color" content="#111111" />
<title>Пожитки</title> <title>Пожитки</title>
<link rel="stylesheet" href="./styles.css?v=8" /> <link rel="stylesheet" href="./styles.css?v=10" />
<script src="./telegram-web-app.js"></script> <script src="./telegram-web-app.js"></script>
<script src="./app.js?v=8" defer></script> <script src="./app.js?v=10" defer></script>
</head> </head>
<body> <body>
<main class="shell"> <main class="shell">
@ -123,9 +123,12 @@
</main> </main>
<nav class="bottom-nav" aria-label="Основная навигация"> <nav class="bottom-nav" aria-label="Основная навигация">
<button id="dashboardTab" class="active" data-view="dashboardView"><span>◫</span>Обзор</button> <div class="nav-tabs">
<button id="historyTab" data-view="historyView"><span>☷</span>История</button> <button id="dashboardTab" class="active" data-view="dashboardView"><span>◫</span>Обзор</button>
<button id="leaderboardTab" data-view="leaderboardView"><span>♜</span>Рейтинг</button> <button id="historyTab" data-view="historyView"><span>☷</span>История</button>
<button id="leaderboardTab" data-view="leaderboardView"><span>♜</span>Рейтинг</button>
</div>
<button id="appActionButton" class="app-action" type="button" aria-label="Добавить запись">+</button>
</nav> </nav>
<div id="toast" class="toast" role="status" aria-live="polite"></div> <div id="toast" class="toast" role="status" aria-live="polite"></div>

18
static/styles.css
View file

@ -95,8 +95,8 @@ h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
min-height: 190px; min-height: 148px;
padding: 27px; padding: 21px 23px;
border-radius: 29px; border-radius: 29px;
border: 1px solid var(--line); border: 1px solid var(--line);
color: var(--text); color: var(--text);
@ -186,11 +186,15 @@ h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.leader-percent.negative { color: var(--danger); } .leader-percent.negative { color: var(--danger); }
.friend-hint { margin: 13px 18px; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; } .friend-hint { margin: 13px 18px; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.bottom-nav { position: fixed; z-index: 10; right: max(12px, var(--tg-content-safe-area-inset-right, 0px), env(safe-area-inset-right)); bottom: max(12px, var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom)); left: max(12px, var(--tg-content-safe-area-inset-left, 0px), env(safe-area-inset-left)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: auto; max-width: 540px; margin: 0 auto; padding: 8px 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); } .bottom-nav { position: fixed; z-index: 10; right: max(12px, var(--tg-content-safe-area-inset-right, 0px), env(safe-area-inset-right)); bottom: max(12px, var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom)); left: max(12px, var(--tg-content-safe-area-inset-left, 0px), env(safe-area-inset-left)); display: flex; align-items: stretch; gap: 10px; width: auto; max-width: 540px; height: 62px; margin: 0 auto; }
.bottom-nav button { display: grid; place-items: center; gap: 2px; padding: 3px; border: 0; background: transparent; color: var(--muted); font-size: 9px; font-weight: 650; } .nav-tabs { display: grid; flex: 1; grid-template-columns: repeat(3, 1fr); gap: 4px; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
.bottom-nav button > span { font-size: 22px; line-height: 30px; } .nav-tabs button { display: grid; place-items: center; gap: 1px; min-width: 0; padding: 2px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 650; }
.bottom-nav button.active { color: var(--accent); } .nav-tabs button > span { font-size: 20px; line-height: 26px; }
.form-open .bottom-nav { display: none; } .nav-tabs button.active { color: var(--accent); background: rgba(255, 255, 255, .07); }
.app-action { display: grid; flex: 0 0 62px; place-items: center; width: 62px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: 34px; font-weight: 500; line-height: 1; box-shadow: var(--shadow); transition: flex-basis .24s ease, width .24s ease, border-radius .24s ease; }
.app-action:disabled { opacity: .72; cursor: default; }
.form-open .nav-tabs { display: none; }
.form-open .app-action { flex-basis: 100%; width: 100%; border-radius: 999px; font-size: 16px; font-weight: 800; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: calc(92px + max(var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom))); max-width: calc(100% - 36px); padding: 11px 16px; border: 1px solid var(--line); border-radius: 12px; transform: translate(-50%, 20px); background: rgba(0, 0, 0, .62); color: var(--text); opacity: 0; pointer-events: none; transition: .2s ease; font-size: 12px; box-shadow: var(--shadow); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); } .toast { position: fixed; z-index: 20; left: 50%; bottom: calc(92px + max(var(--tg-content-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom))); max-width: calc(100% - 36px); padding: 11px 16px; border: 1px solid var(--line); border-radius: 12px; transform: translate(-50%, 20px); background: rgba(0, 0, 0, .62); color: var(--text); opacity: 0; pointer-events: none; transition: .2s ease; font-size: 12px; box-shadow: var(--shadow); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.show { opacity: 1; transform: translate(-50%, 0); }