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

9
static/js/app.mjs
View file

@ -30,11 +30,18 @@ export class App {
})
_mbus.subscribe('SHOW_PAGE', ({ detail: { data: { page } } }) => {
const classList = document.querySelector('#main-page').classList
let classList = document.querySelector('#main-page').classList
classList.forEach(e =>
classList.remove(e)
)
classList.add(page)
classList = document.querySelector('#notes2').classList
classList.forEach(e => {
if (e.startsWith('page-'))
classList.remove(e)
})
classList.add('page-'+page)
})
window.addEventListener('keydown', event => this.keyHandler(event))

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()
}
}// }}}