From c1ed25fe3502ca2665211e66df97fa1f6b87c6b2 Mon Sep 17 00:00:00 2001
From: Chris Xiong <chirs241097@gmail.com>
Date: Fri, 9 Aug 2024 21:01:13 -0400
Subject: Add a panel toggle button to some pages.

---
 index.shtml       |  1 +
 libs/music/player |  3 ++-
 panel.css         | 12 ++++++++++++
 panel.js          | 20 ++++++++++++++++----
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/index.shtml b/index.shtml
index c0f4696..4d13cc6 100644
--- a/index.shtml
+++ b/index.shtml
@@ -101,6 +101,7 @@ document.addEventListener("DOMContentLoaded", swonload);
 			<li><a id="aboutlk" href="#about" onclick="contsw('about');">About</a></li>
 			<li><a id="linkslk" href="#links" onclick="contsw('links');">Links</a></li>
 			<li><a href="javascript:showthemesw()">Themes</a></li>
+			<li><a href="javascript:togglepanel()" id="paneltoggle" style="display:none;">«</a></li>
 		</ul>
 	</div>
 	<div id="content" class="TText">
diff --git a/libs/music/player b/libs/music/player
index 3ec6f29..43e1d91 100644
--- a/libs/music/player
+++ b/libs/music/player
@@ -129,7 +129,8 @@ All tracks on this site are available for download. You can simply right click t
 			<li><ul id="plists"></ul></li>
 			<li><a href="//filestorage.chrisoft.org/music/" target="_blank">Downloads</a></li>
 			<li><a href="javascript:NSUI.showHelp()">Help</a></li>
-			<li><a>TSOP 2.7.1</a></li>
+			<li><a href="https://cgit.chrisoft.org/web.git/tree/libs/music">TSOP 2.7.1</a></li>
+			<li><a href="javascript:togglepanel()" id="paneltoggle">«</a></li>
 		</ul>
 	</div>
 	<div id="content">
diff --git a/panel.css b/panel.css
index 9f4cba6..db0c5e9 100644
--- a/panel.css
+++ b/panel.css
@@ -26,6 +26,11 @@ padding-left:1.5em;
 padding-top:0.5em;
 padding-bottom:0.5em;
 }
+#panel li a#paneltoggle {
+text-align:right;
+padding:0.1em;
+padding-right:0.3em;
+}
 #panel li span {
 display:block;
 padding-left:1.5em;
@@ -49,6 +54,12 @@ padding-top:0.5em;
 #content {
 margin-left: 16em;
 }
+#content.expanded {
+margin-left: 1em;
+}
+#panel.collapsed {
+left:-15em;
+}
 #content p{text-indent:2em;}
 #content .block h2{font-weight:normal;}
 #content .block h3{font-weight:normal;}
@@ -68,4 +79,5 @@ padding: 1em;
 	#panel{left:-15em;}
 	#content{margin-left:1em;}
 	#footer,div.footer{width:calc(100% - 1em);left:1em;}
+	#panel li a#paneltoggle{display:none;}
 }
diff --git a/panel.js b/panel.js
index f100020..13444af 100644
--- a/panel.js
+++ b/panel.js
@@ -38,14 +38,26 @@ function setupevents()
 	{
 		if(!fold)
 		{document.getElementById("panel").style.left="-15em";fold=true;}
-	} 
+	}
+	document.getElementById("panel").classList.remove("collapsed");
+	document.getElementById("content").classList.remove("expanded");
 }
 function unsetevents()
 {
 	window.ontouchstart=undefined;
 	window.ontouchmove=undefined;
 	window.ontouchend=undefined;
-	document.getElementById("panel").onmouseenter=undefined;
-	document.getElementById("panel").onmouseleave=undefined;
-	document.getElementById("panel").style.left=null;
+	const p=document.getElementById("panel");
+	p.onmouseenter=undefined;
+	p.onmouseleave=undefined;
+	p.style.left=null;
+	if (!p.classList.contains("collapsed"))
+		document.getElementById("paneltoggle").innerHTML="«";
+}
+function togglepanel()
+{
+	let c = document.getElementById("panel").classList.toggle("collapsed");
+	if (c) document.getElementById("content").classList.add("expanded");
+	else document.getElementById("content").classList.remove("expanded");
+	document.getElementById("paneltoggle").innerHTML=c?"»":"«";
 }
-- 
cgit v1.2.3