tandem
/
numerus
2
0
Fork 0
Code Issues 39 Pull Requests Packages Projects 1 Releases 1 Wiki Activity

Manually update and restore the <title> when showing dialog with HTMx 

Mostly, the same problem as before: if the document title does not
reflect the application’s state, it becomes useless when there are
multiple open tabs.

In this case, however, i do not know how to tell HTMx to restore the
title to how it was before opening the dialog without a new request to
the server, that makes no sense when the dialog was closed without any
change whatsoever.  Thus, i do it with JavaScript on the client side.
This commit is contained in:
jordi fita mas 2023-03-26 14:06:26 +02:00
parent b0db8df732
commit 5d82597d14
1 changed files with 4 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/static/numerus.js
View File

@ -401,6 +401,7 @@ class Tags extends HTMLDivElement {
customElements.define('numerus-multiselect', Multiselect, {extends: 'div'}); customElements.define('numerus-multiselect', Multiselect, {extends: 'div'});
customElements.define('numerus-tags', Tags, {extends: 'div'}); customElements.define('numerus-tags', Tags, {extends: 'div'});
let savedTitle = '';
htmx.onLoad((target) => { htmx.onLoad((target) => {
if (target.tagName === 'DIALOG') { if (target.tagName === 'DIALOG') {
@ -408,6 +409,8 @@ htmx.onLoad((target) => {
for (const detail of details) { for (const detail of details) {
detail.removeAttribute('open'); detail.removeAttribute('open');
} }
savedTitle = document.title;
document.title = target.querySelector('h2').textContent + ' — ' + savedTitle.substring(savedTitle.indexOf("—") + 1);
target.showModal(); target.showModal();
const button = target.querySelector('.close-dialog'); const button = target.querySelector('.close-dialog');
if (button) { if (button) {
@ -425,6 +428,7 @@ htmx.on('closeModal', () => {
} }
openDialog.close(); openDialog.close();
openDialog.remove(); openDialog.remove();
document.title = savedTitle;
}); });
htmx.on(document, 'alpine:init', () => { htmx.on(document, 'alpine:init', () => {