magnus/Notes2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Handle page resizes on history, bumped to v12

Browse source
This commit is contained in:
Magnus Åhall 2026-06-07 11:48:10 +02:00
parent 7002a00972
commit 9c07611f95
6 changed files with 108 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

62
static/js/page_history.mjs
View file

@ -24,35 +24,39 @@ export class N2PageHistory extends CustomHTMLElement {
<h1 data-el="node-name"></h1>
</div>
<div class="group-label">Actions</div>
<div class="group">
<button data-el="download-history">Fetch all history from server</button>
<div data-el="fetch-history-progress"></div>
</div>
<div class="group-label">History</div>
<div class="group">
<div data-el="stats">
<div>History on server:</div>
<div data-el="stats-on-server"></div>
<div>History on client:</div>
<div data-el="stats-on-client"></div>
<div class="column-1">
<div class="group-label">Actions</div>
<div class="group">
<button data-el="download-history">Fetch all history from server</button>
<div data-el="fetch-history-progress"></div>
</div>
<div data-el="nodes"></div>
<div data-el="pagination">
<div data-el="prev">&lt;</div>
<div data-el="page"></div>
<div data-el="next">&gt;</div>
<div class="group-label">History</div>
<div class="group">
<div data-el="stats">
<div>History on server:</div>
<div data-el="stats-on-server"></div>
<div>History on client:</div>
<div data-el="stats-on-client"></div>
</div>
<div data-el="nodes"></div>
<div data-el="pagination">
<div data-el="prev">&lt;</div>
<div data-el="page"></div>
<div data-el="next">&gt;</div>
</div>
</div>
</div>
<div class="group-label">Document</div>
<div class="group">
<div data-el="node-markdown"></div>
<div class="column-2">
<div class="group-label">Document</div>
<div class="group">
<div data-el="node-markdown"></div>
</div>
</div>
`
}// }}}
@ -129,23 +133,35 @@ export class N2PageHistory extends CustomHTMLElement {
this.pages = Math.ceil(this.nodesTotal / N2PageHistory.PAGESIZE)
}// }}}
keyHandler(event) {// {{{
let handled = true
switch (event.key) {
case 'ArrowLeft':
this.prevPage()
break
case 'ArrowRight':
this.nextPage()
break
case 'ArrowUp':
const prevNode = this.selectedNode?.previousElementSibling
if (prevNode)
prevNode.select()
break
case 'ArrowDown':
const nextNode = this.selectedNode?.nextElementSibling
if (nextNode)
nextNode.select()
break
default:
handled = false
}
if (handled) {
event.stopPropagation()
event.preventDefault()
}
}// }}}