|
@@ -57,7 +57,7 @@
|
|
|
/* maximized: the frame disappears and the window IS the layer; its title
|
|
/* maximized: the frame disappears and the window IS the layer; its title
|
|
|
moves into the header (with a restore button) */
|
|
moves into the header (with a restore button) */
|
|
|
.win.max { border: 0; border-radius: 0; box-shadow: none; }
|
|
.win.max { border: 0; border-radius: 0; box-shadow: none; }
|
|
|
- .win.max .win-resize { display: none; }
|
|
|
|
|
|
|
+ .win.max .win-bar, .win.max .win-resize { display: none; }
|
|
|
#maxinfo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
|
|
#maxinfo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
|
|
|
#maxinfo .maxtitle { color: var(--fg); font-weight: 600; }
|
|
#maxinfo .maxtitle { color: var(--fg); font-weight: 600; }
|
|
|
.win-bar {
|
|
.win-bar {
|
|
@@ -357,7 +357,9 @@
|
|
|
<header>
|
|
<header>
|
|
|
<h1>sm121</h1>
|
|
<h1>sm121</h1>
|
|
|
<div id="maxinfo" hidden><span>⛶</span><span class="maxtitle" id="max-title"></span>
|
|
<div id="maxinfo" hidden><span>⛶</span><span class="maxtitle" id="max-title"></span>
|
|
|
- <button class="tbtn" id="max-restore" title="restore window size">❐</button></div>
|
|
|
|
|
|
|
+ <button class="wbtn" id="max-restore" title="restore window size">❐</button>
|
|
|
|
|
+ <button class="wbtn" id="max-min" title="minimize">–</button>
|
|
|
|
|
+ <button class="wbtn" id="max-close" title="close">×</button></div>
|
|
|
<div class="spacer"></div>
|
|
<div class="spacer"></div>
|
|
|
<div class="ssec" id="sse"><span class="dot"></span><span id="sse-t">connecting…</span></div>
|
|
<div class="ssec" id="sse"><span class="dot"></span><span id="sse-t">connecting…</span></div>
|
|
|
<button class="tbtn" id="theme">◐</button>
|
|
<button class="tbtn" id="theme">◐</button>
|
|
@@ -418,7 +420,9 @@ function sameSnapshot(a, b) {
|
|
|
// --- theme ---------------------------------------------------------------
|
|
// --- theme ---------------------------------------------------------------
|
|
|
const root = document.documentElement;
|
|
const root = document.documentElement;
|
|
|
root.dataset.theme = localStorage.getItem("sm121-theme") || (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
|
|
root.dataset.theme = localStorage.getItem("sm121-theme") || (matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark");
|
|
|
-$("#max-restore").onclick = () => { if (maxedHandle) maxedHandle.unmaximize(); };
|
|
|
|
|
|
|
+$("#max-restore").onclick = () => maxedHandle?.unmaximize();
|
|
|
|
|
+$("#max-min").onclick = () => maxedHandle?.minimize();
|
|
|
|
|
+$("#max-close").onclick = () => maxedHandle?.close();
|
|
|
$("#theme").onclick = () => {
|
|
$("#theme").onclick = () => {
|
|
|
root.dataset.theme = root.dataset.theme === "dark" ? "light" : "dark";
|
|
root.dataset.theme = root.dataset.theme === "dark" ? "light" : "dark";
|
|
|
localStorage.setItem("sm121-theme", root.dataset.theme);
|
|
localStorage.setItem("sm121-theme", root.dataset.theme);
|
|
@@ -486,11 +490,12 @@ function makeWin({ id, title, short, x, y, w, h, bodyHtml, onClosed, extraCls, r
|
|
|
win.append(bar, body, rz);
|
|
win.append(bar, body, rz);
|
|
|
$("#winlayer").appendChild(win);
|
|
$("#winlayer").appendChild(win);
|
|
|
const closed = { value: false };
|
|
const closed = { value: false };
|
|
|
- bar.querySelector('[data-act="min"]').onclick = () => {
|
|
|
|
|
|
|
+ const doMin = () => {
|
|
|
unmax(); // minimize a normal-shaped window; the dock chip restores it
|
|
unmax(); // minimize a normal-shaped window; the dock chip restores it
|
|
|
win.style.display = "none";
|
|
win.style.display = "none";
|
|
|
renderDock();
|
|
renderDock();
|
|
|
};
|
|
};
|
|
|
|
|
+ bar.querySelector('[data-act="min"]').onclick = doMin;
|
|
|
// maximize = drop the frame and fill the window layer (the dock is a
|
|
// maximize = drop the frame and fill the window layer (the dock is a
|
|
|
// sibling below it, so it stays usable); the title moves to the header
|
|
// sibling below it, so it stays usable); the title moves to the header
|
|
|
const maxBtn = bar.querySelector('[data-act="max"]');
|
|
const maxBtn = bar.querySelector('[data-act="max"]');
|
|
@@ -517,7 +522,7 @@ function makeWin({ id, title, short, x, y, w, h, bodyHtml, onClosed, extraCls, r
|
|
|
maxBtn.title = "restore size";
|
|
maxBtn.title = "restore size";
|
|
|
showMaxTitle(handle);
|
|
showMaxTitle(handle);
|
|
|
};
|
|
};
|
|
|
- bar.querySelector('[data-act="close"]').onclick = () => {
|
|
|
|
|
|
|
+ const doClose = () => {
|
|
|
if (removeOnClose) win.remove(); // log windows die with their attach
|
|
if (removeOnClose) win.remove(); // log windows die with their attach
|
|
|
else win.style.display = "none";
|
|
else win.style.display = "none";
|
|
|
closed.value = true;
|
|
closed.value = true;
|
|
@@ -526,6 +531,7 @@ function makeWin({ id, title, short, x, y, w, h, bodyHtml, onClosed, extraCls, r
|
|
|
renderDock();
|
|
renderDock();
|
|
|
if (onClosed) onClosed();
|
|
if (onClosed) onClosed();
|
|
|
};
|
|
};
|
|
|
|
|
+ bar.querySelector('[data-act="close"]').onclick = doClose;
|
|
|
bar.addEventListener("pointerdown", (e) => {
|
|
bar.addEventListener("pointerdown", (e) => {
|
|
|
if (e.target.closest(".wbtn") || win.classList.contains("max")) return;
|
|
if (e.target.closest(".wbtn") || win.classList.contains("max")) return;
|
|
|
front(win);
|
|
front(win);
|
|
@@ -549,6 +555,8 @@ function makeWin({ id, title, short, x, y, w, h, bodyHtml, onClosed, extraCls, r
|
|
|
win, body, title,
|
|
win, body, title,
|
|
|
label: short || title,
|
|
label: short || title,
|
|
|
unmaximize: unmax,
|
|
unmaximize: unmax,
|
|
|
|
|
+ minimize: doMin,
|
|
|
|
|
+ close: doClose,
|
|
|
restore() { win.style.display = ""; closed.value = false; front(win); renderDock(); },
|
|
restore() { win.style.display = ""; closed.value = false; front(win); renderDock(); },
|
|
|
isMinimized: () => win.style.display === "none",
|
|
isMinimized: () => win.style.display === "none",
|
|
|
isClosed: () => closed.value,
|
|
isClosed: () => closed.value,
|