From 5d82597d14977e71013833d62f02985811939416 Mon Sep 17 00:00:00 2001
From: jordi fita mas <jordi@tandem.blog>
Date: Sun, 26 Mar 2023 14:06:26 +0200
Subject: [PATCH] Manually update and restore the <title> when showing dialog
 with HTMx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 web/static/numerus.js | 4 ++++
 1 file changed, 4 insertions(+)

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