live: group paging next to play/stop; add grid-split menu before fullscreen

The grid control footer is regrouped: ⏮ play/stop ⏭ now sit together in the
centre (left section empty). On the right, before fullscreen, a new ▦ split
button opens an upward popup menu with the layouts 4/9/16/25/36/49/64 that
calls setDim; the menu respects maxDim (16+ mode), highlights the active
layout, and closes on outside click.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-01 21:49:56 +05:00
parent c6cdcf55b2
commit 5b8f11dbb6
4 changed files with 52 additions and 8 deletions
+20 -3
View File
@@ -517,8 +517,8 @@ const Live = {
},
applyMaxDim() {
// скрыть пункты подменю с числом больше лимита (режим 16+)
document.querySelectorAll(".subnav .subitem[data-grid]").forEach((a) => {
// скрыть пункты с числом больше лимита (режим 16+) — и в сайдбаре, и в меню «Раскладка»
document.querySelectorAll(".subnav .subitem[data-grid], .gb-split-menu button[data-grid]").forEach((a) => {
a.hidden = +a.dataset.grid > this.maxDim;
});
},
@@ -537,7 +537,7 @@ const Live = {
localStorage.setItem("corevision.grid", String(this.dim));
this.page = 0; // смена размера сетки → первая страница
this.fillSelected(); // selected = камеры текущей страницы
document.querySelectorAll("#live-subnav .subitem, .subnav .subitem").forEach((a) =>
document.querySelectorAll("#live-subnav .subitem, .subnav .subitem, .gb-split-menu button").forEach((a) =>
a.classList.toggle("active", +a.dataset.grid === this.dim));
if (rerender) this.renderGrid();
this.updatePager();
@@ -605,6 +605,23 @@ const Live = {
if (gbPlay) gbPlay.onclick = (e) => { e.preventDefault(); this.setPlaying(!this.playing); };
const gbFs = document.getElementById("gb-fs");
if (gbFs) gbFs.onclick = (e) => { e.preventDefault(); fsMain(); };
// меню «Раскладка» (window split): 4/9/16/25/36/49/64 → setDim
const gbSplit = document.getElementById("gb-split");
const splitMenu = document.getElementById("gb-split-menu");
if (gbSplit && splitMenu) {
gbSplit.onclick = (e) => { e.preventDefault(); splitMenu.classList.toggle("open"); };
splitMenu.onclick = (e) => {
const b = e.target.closest("button[data-grid]");
if (!b) return;
e.preventDefault();
history.replaceState(null, "", "/?grid=" + b.dataset.grid);
this.setDim(+b.dataset.grid);
splitMenu.classList.remove("open");
};
document.addEventListener("click", (e) => { // клик вне меню — закрыть
if (!e.target.closest(".gb-split")) splitMenu.classList.remove("open");
});
}
this.updatePlayBtn();
this.updatePager();
},