mirror of
https://github.com/mjl-/mox.git
synced 2024-12-26 08:23:48 +03:00
tweaks to cross-referenced html
- 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
parent
9cf8ee2162
commit
d9dde0d89e
1 changed files with 29 additions and 16 deletions
45
rfc/xr.go
45
rfc/xr.go
|
|
@ -292,6 +292,7 @@ var indexHTML = `<!doctype html>
|
|||
<style>
|
||||
body { margin: 0; padding: 0; font-family: 'ubuntu', 'lato', sans-serif; }
|
||||
[title] { text-decoration: underline; text-decoration-style: dotted; }
|
||||
.iframe { border: 1px solid #aaa; width: 100%; height: 100%; background-color: #eee; border-radius: .25em; }
|
||||
</style>
|
||||
</head>
|
||||
<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; 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>
|
||||
<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 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>
|
||||
<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>
|
||||
|
|
@ -325,12 +326,15 @@ function updateHash() {
|
|||
const rfc = trimDotHTML(rfciframe.contentWindow.location.pathname.substring(basepath.length))+hashline(rfciframe.contentWindow.location.hash)
|
||||
codefile.innerText = code
|
||||
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
|
||||
location.hash = '#' + code + ',' + rfc
|
||||
location.hash = nhash
|
||||
window.setTimeout(() => {
|
||||
changinghash = false
|
||||
console.log('done updating updating window hash')
|
||||
}, 0)
|
||||
}
|
||||
codeiframe.addEventListener('load', function(e) {
|
||||
|
|
@ -356,13 +360,10 @@ rfciframe.addEventListener('load', function(e) {
|
|||
})
|
||||
})
|
||||
window.addEventListener('hashchange', function() {
|
||||
console.log('window hashchange', location.hash)
|
||||
if (changinghash) {
|
||||
console.log('not updating iframes src')
|
||||
return
|
||||
console.log('window hashchange', location.hash, changinghash)
|
||||
if (!changinghash) {
|
||||
updateIframes()
|
||||
}
|
||||
console.log('updating iframes src')
|
||||
updateIframes()
|
||||
})
|
||||
function hashlink2src(s) {
|
||||
const t = s.split(':')
|
||||
|
|
@ -377,22 +378,32 @@ function hashlink2src(s) {
|
|||
console.log('hashlink', s, 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() {
|
||||
const h = location.hash.length > 1 ? location.hash.substring(1) : 'code,rfc'
|
||||
const t = h.split(',')
|
||||
const codesrc = hashlink2src(t[0])
|
||||
const rfcsrc = hashlink2src(t[1])
|
||||
codeiframe.src = codesrc
|
||||
rfciframe.src = rfcsrc
|
||||
if (codesrc) {
|
||||
if (codeiframe.src !== codesrc) {
|
||||
codeiframe = replaceIframe(codeiframe, codesrc)
|
||||
codefile.innerText = t[0]
|
||||
}
|
||||
if (rfcsrc) {
|
||||
if (rfciframe.src !== rfcsrc) {
|
||||
rfciframe = replaceIframe(rfciframe, rfcsrc)
|
||||
rfcfile.innerText = t[1]
|
||||
}
|
||||
}
|
||||
window.addEventListener('load', function() {
|
||||
console.log('document load')
|
||||
updateIframes()
|
||||
})
|
||||
</script>
|
||||
|
|
@ -407,6 +418,7 @@ var codeTemplate = htmltemplate.Must(htmltemplate.New("code").Parse(`<!doctype h
|
|||
<title>code index</title>
|
||||
<style>
|
||||
* { font-size: inherit; font-family: 'ubuntu mono', monospace; margin: 0; padding: 0; box-sizing: border-box; }
|
||||
tr:nth-child(odd) { background-color: #ddd; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -433,6 +445,7 @@ var rfcTemplate = htmltemplate.Must(htmltemplate.New("rfc").Parse(`<!doctype htm
|
|||
<meta charset="utf-8" />
|
||||
<style>
|
||||
* { font-size: inherit; font-family: 'ubuntu mono', monospace; margin: 0; padding: 0; }
|
||||
tr:nth-child(odd) { background-color: #ddd; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue