serv/mox
1
0
Fork 0
mirror of https://github.com/mjl-/mox.git synced 2025-01-14 01:06:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

tweaks to cross-referenced html

Browse source 
- on the two index pages, show rows with alternating background color so the
  files in the 2nd column are more easily matched to the name in the 1st
  column.
- unbreak browser history when navigating files/line numbers. changing an
  iframe src attribute adds an entry to the history. that happens on "back" to,
  causing a 2nd "back" to go forward again. instead of replacing the iframe src,
  we now replace the iframe, as that doesn't cause an entry to be added to the
  browser history. dark browser magic...
This commit is contained in:
Mechiel Lukkien 2024-01-23 19:29:20 +01:00
parent 9cf8ee2162
commit d9dde0d89e
No known key found for this signature in database
1 changed files with 29 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
rfc/xr.go
View file

@ -292,6 +292,7 @@ var indexHTML = `<!doctype html>
<style> <style>
body { margin: 0; padding: 0; font-family: 'ubuntu', 'lato', sans-serif; } body { margin: 0; padding: 0; font-family: 'ubuntu', 'lato', sans-serif; }
[title] { text-decoration: underline; text-decoration-style: dotted; } [title] { text-decoration: underline; text-decoration-style: dotted; }
.iframe { border: 1px solid #aaa; width: 100%; height: 100%; background-color: #eee; border-radius: .25em; }
</style> </style>
</head> </head>
<body> <body>
@ -300,11 +301,11 @@ body { margin: 0; padding: 0; font-family: 'ubuntu', 'lato', sans-serif; }
<div style="flex-grow: 1; display: flex; align-items: stretch"> <div style="flex-grow: 1; display: flex; align-items: stretch">
<div style="flex-grow: 1; margin: 1ex; position: relative; display: flex; flex-direction: column"> <div style="flex-grow: 1; margin: 1ex; position: relative; display: flex; flex-direction: column">
<div style="margin-bottom: .5ex"><span id="codefile" style="font-weight: bold">...</span>, <a href="code.html" target="code">index</a></div> <div style="margin-bottom: .5ex"><span id="codefile" style="font-weight: bold">...</span>, <a href="code.html" target="code">index</a></div>
<iframe id="codeiframe" name="code" style="border: 1px solid #aaa; width: 100%; height: 100%; background-color: #eee; border-radius: .25em"></iframe> <iframe id="codeiframe" class="iframe"></iframe>
</div> </div>
<div style="flex-grow: 1; margin: 1ex; position: relative; display: flex; flex-direction: column"> <div style="flex-grow: 1; margin: 1ex; position: relative; display: flex; flex-direction: column">
<div style="margin-bottom: .5ex"><span id="rfcfile" style="font-weight: bold">...</span>, <a href="rfc.html" target="rfc">index</a></div> <div style="margin-bottom: .5ex"><span id="rfcfile" style="font-weight: bold">...</span>, <a href="rfc.html" target="rfc">index</a></div>
<iframe id="rfciframe" name="rfc" style="border: 1px solid #aaa; width: 100%; height: 100%; background-color: #eee; border-radius: .25em"></iframe> <iframe id="rfciframe" clsas="iframe"></iframe>
</div> </div>
</div> </div>
</div> </div>
@ -325,12 +326,15 @@ function updateHash() {
const rfc = trimDotHTML(rfciframe.contentWindow.location.pathname.substring(basepath.length))+hashline(rfciframe.contentWindow.location.hash) const rfc = trimDotHTML(rfciframe.contentWindow.location.pathname.substring(basepath.length))+hashline(rfciframe.contentWindow.location.hash)
codefile.innerText = code codefile.innerText = code
rfcfile.innerText = rfc rfcfile.innerText = rfc
console.log('updating window hash') const nhash = '#' + code + ',' + rfc
if (location.hash === nhash || location.hash === '' && nhash === '#code,rfc') {
return
}
console.log('updating window hash', {code, rfc})
changinghash = true changinghash = true
location.hash = '#' + code + ',' + rfc location.hash = nhash
window.setTimeout(() => { window.setTimeout(() => {
changinghash = false changinghash = false
console.log('done updating updating window hash')
}, 0) }, 0)
} }
codeiframe.addEventListener('load', function(e) { codeiframe.addEventListener('load', function(e) {
@ -356,13 +360,10 @@ rfciframe.addEventListener('load', function(e) {
}) })
}) })
window.addEventListener('hashchange', function() { window.addEventListener('hashchange', function() {
console.log('window hashchange', location.hash) console.log('window hashchange', location.hash, changinghash)
if (changinghash) { if (!changinghash) {
console.log('not updating iframes src') updateIframes()
return
} }
console.log('updating iframes src')
updateIframes()
}) })
function hashlink2src(s) { function hashlink2src(s) {
const t = s.split(':') const t = s.split(':')
@ -377,22 +378,32 @@ function hashlink2src(s) {
console.log('hashlink', s, h) console.log('hashlink', s, h)
return h return h
} }
// We need to replace iframes. Before, we replaced the "src" attribute. But
// that adds a new entry to the history, while replacing an iframe element does
// not. The added entries would break the browser back button...
function replaceIframe(iframe, src) {
const o = iframe
iframe = document.createElement('iframe')
iframe.classList.add('iframe')
iframe.setAttribute('src', src)
o.replaceWith(iframe)
return iframe
}
function updateIframes() { function updateIframes() {
const h = location.hash.length > 1 ? location.hash.substring(1) : 'code,rfc' const h = location.hash.length > 1 ? location.hash.substring(1) : 'code,rfc'
const t = h.split(',') const t = h.split(',')
const codesrc = hashlink2src(t[0]) const codesrc = hashlink2src(t[0])
const rfcsrc = hashlink2src(t[1]) const rfcsrc = hashlink2src(t[1])
codeiframe.src = codesrc if (codeiframe.src !== codesrc) {
rfciframe.src = rfcsrc codeiframe = replaceIframe(codeiframe, codesrc)
if (codesrc) {
codefile.innerText = t[0] codefile.innerText = t[0]
} }
if (rfcsrc) { if (rfciframe.src !== rfcsrc) {
rfciframe = replaceIframe(rfciframe, rfcsrc)
rfcfile.innerText = t[1] rfcfile.innerText = t[1]
} }
} }
window.addEventListener('load', function() { window.addEventListener('load', function() {
console.log('document load')
updateIframes() updateIframes()
}) })
</script> </script>
@ -407,6 +418,7 @@ var codeTemplate = htmltemplate.Must(htmltemplate.New("code").Parse(`<!doctype h
<title>code index</title> <title>code index</title>
<style> <style>
* { font-size: inherit; font-family: 'ubuntu mono', monospace; margin: 0; padding: 0; box-sizing: border-box; } * { font-size: inherit; font-family: 'ubuntu mono', monospace; margin: 0; padding: 0; box-sizing: border-box; }
tr:nth-child(odd) { background-color: #ddd; }
</style> </style>
</head> </head>
<body> <body>
@ -433,6 +445,7 @@ var rfcTemplate = htmltemplate.Must(htmltemplate.New("rfc").Parse(`<!doctype htm
<meta charset="utf-8" /> <meta charset="utf-8" />
<style> <style>
* { font-size: inherit; font-family: 'ubuntu mono', monospace; margin: 0; padding: 0; } * { font-size: inherit; font-family: 'ubuntu mono', monospace; margin: 0; padding: 0; }
tr:nth-child(odd) { background-color: #ddd; }
</style> </style>
</head> </head>
<body> <body>