Add nav resize utility functions.
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Captain ALM 2022-08-17 18:27:13 +01:00
parent 685ea662f5
commit c807754bea
Signed by: alfred
GPG Key ID: 4E4ADD02609997B1
3 changed files with 61 additions and 8 deletions

View File

@ -73,6 +73,7 @@ main{
position: relative; position: relative;
float: right; float: right;
width: auto; width: auto;
height: 100%;
overflow: hidden; overflow: hidden;
} }
.so-pane{ .so-pane{
@ -332,6 +333,9 @@ main{
float: right; float: right;
width: auto; width: auto;
} }
.vnav{
display: none;
}
.menu li{ .menu li{
float: left; float: left;
} }

View File

@ -96,13 +96,13 @@
<input class="nav-menu" type="checkbox" id="nav-menu"/> <input class="nav-menu" type="checkbox" id="nav-menu"/>
<label class="hmb" for="nav-menu" title="Navigation Links"><span class="hmb-line"></span></label> <label class="hmb" for="nav-menu" title="Navigation Links"><span class="hmb-line"></span></label>
<nav class="vnav" id="vnav"> <nav class="vnav" id="vnav">
<ul class="vmenu no-lst-style"> <ul class="vmenu no-lst-style" id="vmenu">
</ul> </ul>
</nav> </nav>
<nav class="nav" id="nav"> <nav class="nav" id="nav">
<ul class="menu no-lst-style"> <ul class="menu no-lst-style" id="menu">
{{ range .Data.GetHeaderLabels }} {{ range .Data.GetHeaderLabels }}
<li><b><a href="{{ $.Data.GetHeaderLink . }}" class="no-dec" title="{{ . }}">{{ . }}</a></b></li> <li><a href="{{ $.Data.GetHeaderLink . }}" class="no-dec" title="{{ . }}">{{ . }}</a></li>
{{ end }} {{ end }}
</ul> </ul>
</nav> </nav>
@ -192,7 +192,7 @@
</p> </p>
<p> <p>
This page's content is licensed under Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/"> This page's content is licensed under Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/">
<img src="https://mirrors.creativecommons.org/presskit/buttons/80x15/png/by-nc-nd.png" alt="License" height="16"></a>. <img src="https://mirrors.creativecommons.org/presskit/buttons/80x15/png/by-nc-nd.png" alt="License" title="License" height="16"></a>.
</p> </p>
</footer> </footer>
<div id="st"></div> <div id="st"></div>

View File

@ -77,7 +77,7 @@ function ReplaceHistory(url) {
var s = true var s = true
if (window.history) { if (window.history) {
if (window.history.replaceState) { if (window.history.replaceState) {
window.history.replaceState({}, "", url); window.history.replaceState({}, "", url)
s = false s = false
} }
} }
@ -291,13 +291,62 @@ function SortDurationD(a, b) {
return 1 return 1
} }
} }
function PerformNavResize() {
var ht = document.getElementsByTagName("html")
if (ht && ht.length > 0) {
var maxbarsz = ht[0].clientWidth - 324;
var men = document.getElementById("menu")
var vmen = document.getElementById("vmenu")
if (men && vmen) {
if (ht[0].clientWidth > 679) {
while (vmen.childNodes.length > 0) {InsertBefore(men, vmen.removeChild(vmen.childNodes[vmen.childNodes.length-1]));}
} else {
var vmeni
var mensz = 0
var menc = []
var imenc = 0
for (vmeni = 0; vmeni < vmen.childNodes.length; vmeni++) {
if (vmen.childNodes[vmeni].nodeType === Node.ELEMENT_NODE) {
if (mensz+vmen.childNodes[vmeni].clientWidth > maxbarsz) {menc[imenc] = vmen.childNodes[vmeni]; imenc++;}
mensz += vmen.childNodes[vmeni].clientWidth
}
}
if (menc.length > 0) {
for (vmeni = 0; vmeni < menc.length; vmeni++) {vmen.removeChild(menc[vmeni]);}
for (vmeni = menc.length - 1; vmeni >= 0; vmeni--) {InsertBefore(men, menc[vmeni]);}
} else {
for (vmeni = 0; vmeni < men.childNodes.length; vmeni++) {
if (men.childNodes[vmeni].nodeType === Node.ELEMENT_NODE) {
var mena = GetFirstSubElement(men.childNodes[vmeni], 0)
var menaw = GetNavTextWidth(mena.textContent)
if (mensz+menaw <= maxbarsz) {menc[imenc] = men.childNodes[vmeni]; imenc++;}
mensz += menaw
}
}
for (vmeni = 0; vmeni < menc.length; vmeni++) {vmen.appendChild(men.removeChild(menc[vmeni]));}
}
}
}
}
}
function GetFirstSubElement(t,r) {
for (var gfsei = 0; gfsei < t.childNodes.length; gfsei++) {
if (t.childNodes[gfsei].nodeType === Node.ELEMENT_NODE) {
if (r < 1) {return t.childNodes[gfsei];} else {return GetFirstSubElement(t.childNodes[gfsei], r - 1);}
}
}
return t
}
function InsertBefore(p,c) {
if (p.childNodes > 0) {p.insertBefore(c, p.childNodes[0]);} else {p.appendChild(c);}
}
function GetNavTextWidth(s) { function GetNavTextWidth(s) {
var st = document.getElementById("st"); var st = document.getElementById("st")
if (st) { if (st) {
st.textContent = s st.textContent = s
var trw = st.clientWidth; var trw = st.clientWidth
st.textContent = "" st.textContent = ""
return trw; return trw
} }
return 8 * s.length + 32 return 8 * s.length + 32
} }