peisongxiao/SiteCompanion
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

[fixed] toc folding now working

Browse Source
This commit is contained in:
Peisong Xiao
2026-01-18 08:23:16 -05:00
parent ec3b2220a2
commit 01551790ea
3 changed files with 83 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
sitecompanion/settings.css
View File

@@ -86,6 +86,34 @@ body {
min-height: 0; min-height: 0;
} }
.toc-group {
margin: 0;
}
.toc-group summary {
padding: 4px 6px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
color: var(--ink);
list-style-position: inside;
}
.toc-group summary::marker {
color: var(--muted);
}
.toc-group summary:hover {
background: var(--card-bg);
}
.toc-group summary a {
display: inline;
padding: 0;
color: inherit;
text-decoration: none;
}
.toc-resizer { .toc-resizer {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -112,40 +140,7 @@ body.is-resizing {
.toc-sub { .toc-sub {
padding-left: 12px !important; padding-left: 12px !important;
margin-top: 2px !important; margin-top: 2px !important;
display: none; display: grid;
}
.toc-sub.expanded {
display: grid !important;
}
.toc-item {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 6px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
color: var(--ink);
text-decoration: none;
}
.toc-item:hover {
background: var(--card-bg);
}
.toc-item .toc-caret {
display: inline-block;
width: 10px;
text-align: center;
color: var(--muted);
font-size: 10px;
transition: transform 0.15s;
}
.toc-item.expanded .toc-caret {
transform: rotate(90deg);
} }
.toc li a { .toc li a {
@@ -161,6 +156,16 @@ body.is-resizing {
background: var(--card-bg); background: var(--card-bg);
} }
.toc-group summary a {
display: inline;
padding: 0;
background: transparent;
}
.toc-group summary a:hover {
background: transparent;
}
.toc-sub li a { .toc-sub li a {
color: var(--muted); color: var(--muted);
} }

42
sitecompanion/settings.html
View File

@@ -21,31 +21,31 @@
<div class="toc-links"> <div class="toc-links">
<ul> <ul>
<li> <li>
<div class="toc-item"> <details class="toc-group" open>
<span class="toc-caret">▸</span> <a href="#global-config-panel">Global Configuration</a> <summary><a href="#global-config-panel">Global Configuration</a></summary>
</div> <ul class="toc-sub">
<ul class="toc-sub"> <li><a href="#appearance-panel">Appearance</a></li>
<li><a href="#appearance-panel">Appearance</a></li> <li><a href="#api-keys-panel">API Keys</a></li>
<li><a href="#api-keys-panel">API Keys</a></li> <li><a href="#api-panel">API</a></li>
<li><a href="#api-panel">API</a></li> <li><a href="#environment-panel">Environments</a></li>
<li><a href="#environment-panel">Environments</a></li> <li><a href="#profiles-panel">Profiles</a></li>
<li><a href="#profiles-panel">Profiles</a></li> <li><a href="#tasks-panel">Tasks</a></li>
<li><a href="#tasks-panel">Tasks</a></li> <li><a href="#shortcuts-panel">Toolbar Shortcuts</a></li>
<li><a href="#shortcuts-panel">Toolbar Shortcuts</a></li> <li><a href="#global-sites-panel">Sites</a></li>
<li><a href="#global-sites-panel">Sites</a></li> </ul>
</ul> </details>
</li> </li>
<li> <li>
<div class="toc-item"> <details class="toc-group">
<span class="toc-caret">▸</span> <a href="#workspaces-panel">Workspaces</a> <summary><a href="#workspaces-panel">Workspaces</a></summary>
</div> <ul class="toc-sub" id="toc-workspaces-list"></ul>
<ul class="toc-sub" id="toc-workspaces-list"></ul> </details>
</li> </li>
<li> <li>
<div class="toc-item"> <details class="toc-group">
<span class="toc-caret">▸</span> <a href="#sites-panel">Sites</a> <summary><a href="#sites-panel">Sites</a></summary>
</div> <ul class="toc-sub" id="toc-sites-list"></ul>
<ul class="toc-sub" id="toc-sites-list"></ul> </details>
</li> </li>
</ul> </ul>
</div> </div>

92
sitecompanion/settings.js
View File

@@ -3916,14 +3916,6 @@ function openDetailsChain(target) {
} }
} }
function toggleTocSection(item, sub, force) {
if (!sub) return;
const shouldExpand =
typeof force === "boolean" ? force : !sub.classList.contains("expanded");
sub.classList.toggle("expanded", shouldExpand);
item.classList.toggle("expanded", shouldExpand);
}
function updateToc(workspaces, sites) { function updateToc(workspaces, sites) {
const wsList = document.getElementById("toc-workspaces-list"); const wsList = document.getElementById("toc-workspaces-list");
if (!wsList) return; if (!wsList) return;
@@ -3931,20 +3923,14 @@ function updateToc(workspaces, sites) {
wsList.innerHTML = ""; wsList.innerHTML = "";
for (const ws of workspaces) { for (const ws of workspaces) {
const li = document.createElement("li"); const li = document.createElement("li");
const details = document.createElement("details");
const itemDiv = document.createElement("div"); details.className = "toc-group toc-workspace";
itemDiv.className = "toc-item"; const summary = document.createElement("summary");
const caret = document.createElement("span");
caret.className = "toc-caret";
caret.textContent = "▸";
const a = document.createElement("a"); const a = document.createElement("a");
a.href = "#"; a.href = "#";
a.textContent = ws.name || "Untitled"; a.textContent = ws.name || "Untitled";
summary.appendChild(a);
itemDiv.appendChild(caret); details.appendChild(summary);
itemDiv.appendChild(a);
const subUl = document.createElement("ul"); const subUl = document.createElement("ul");
subUl.className = "toc-sub"; subUl.className = "toc-sub";
@@ -3985,13 +3971,6 @@ function updateToc(workspaces, sites) {
subUl.appendChild(subLi); subUl.appendChild(subLi);
} }
itemDiv.addEventListener("click", (e) => {
if (e.target.closest("a")) return;
e.preventDefault();
e.stopPropagation();
toggleTocSection(itemDiv, subUl);
});
a.addEventListener("click", (e) => { a.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@@ -4000,11 +3979,11 @@ function updateToc(workspaces, sites) {
card.scrollIntoView({ behavior: "smooth", block: "start" }); card.scrollIntoView({ behavior: "smooth", block: "start" });
openDetailsChain(document.getElementById("workspaces-panel")); openDetailsChain(document.getElementById("workspaces-panel"));
} }
toggleTocSection(itemDiv, subUl); details.open = true;
}); });
li.appendChild(itemDiv); details.appendChild(subUl);
li.appendChild(subUl); li.appendChild(details);
wsList.appendChild(li); wsList.appendChild(li);
} }
@@ -4032,52 +4011,25 @@ function updateToc(workspaces, sites) {
} }
function initToc() { function initToc() {
const items = document.querySelectorAll(".toc-links > ul > li > .toc-item"); const links = document.querySelectorAll(".toc-links a[href^=\"#\"]");
items.forEach(item => { links.forEach((link) => {
item.addEventListener("click", (e) => { const href = link.getAttribute("href");
const sub = item.nextElementSibling; if (!href || href === "#") return;
const isSummaryLink = Boolean(link.closest("summary"));
// Handle link click link.addEventListener("click", (e) => {
if (e.target.closest("a")) { const target = document.querySelector(href);
const link = e.target.closest("a"); if (target) {
const href = link.getAttribute("href"); openDetailsChain(target);
if (href && href.startsWith("#")) { if (!isSummaryLink) {
openDetailsChain(document.querySelector(href));
if (sub && sub.classList.contains("toc-sub")) {
toggleTocSection(item, sub);
}
}
return;
}
// Toggle sub-list on row click (excluding link)
if (sub && sub.classList.contains("toc-sub")) {
e.preventDefault();
e.stopPropagation();
toggleTocSection(item, sub);
}
});
});
const subLinks = document.querySelectorAll(".toc-sub a[href^=\"#\"]");
subLinks.forEach((link) => {
const href = link.getAttribute("href");
if (!href || href === "#") return;
link.addEventListener("click", (e) => {
const target = document.querySelector(href);
if (target) {
openDetailsChain(target);
target.scrollIntoView({ behavior: "smooth", block: "start" }); target.scrollIntoView({ behavior: "smooth", block: "start" });
} }
const sub = link.closest(".toc-sub"); }
const parentItem = sub?.previousElementSibling; if (!isSummaryLink) {
if (parentItem?.classList?.contains("toc-item")) {
toggleTocSection(parentItem, sub, true);
}
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}); }
}); });
});
} }
document.addEventListener("DOMContentLoaded", initToc); document.addEventListener("DOMContentLoaded", initToc);