Merge pull request #147 from niteeshkanna-sh/claude/stoic-rubin-fnglq7

A click an inch wide of the form no longer empties it

Author: niteeshkanna-sh

admin/admin.js

@@ -473,9 +473,9 @@ document.getElementById('carOwnership').addEventListener('change', syncOwnerFiel
 
 document.getElementById('addCarBtn').addEventListener('click', () => openCarModal(null));
 document.getElementById('carModalCancel').addEventListener('click', closeCarModal);
-carModalOverlay.addEventListener('click', (e) => {
-  if (e.target === carModalOverlay) closeCarModal();
-});
+// Closing by clicking away asks first when the form has been filled in.
+// See nsModal.guard in dialog.js.
+nsModal.guard(carModalOverlay, closeCarModal);
 
 carForm.addEventListener('submit', async (e) => {
   e.preventDefault();
@@ -1987,9 +1987,7 @@ function closeBookingModal() {
 
 document.getElementById('addBookingBtn').addEventListener('click', () => openBookingModal(null));
 document.getElementById('bookingModalCancel').addEventListener('click', closeBookingModal);
-bookingModalOverlay.addEventListener('click', (e) => {
-  if (e.target === bookingModalOverlay) closeBookingModal();
-});
+nsModal.guard(bookingModalOverlay, closeBookingModal);
 
 bookingForm.addEventListener('submit', async (e) => {
   e.preventDefault();
@@ -3102,7 +3100,7 @@ function openPaymentModal(bookingId) {
   paymentModalOverlay.hidden = false;
 }
 document.getElementById('paymentModalCancel').addEventListener('click', () => { paymentModalOverlay.hidden = true; });
-paymentModalOverlay.addEventListener('click', (e) => { if (e.target === paymentModalOverlay) paymentModalOverlay.hidden = true; });
+nsModal.guard(paymentModalOverlay, () => { paymentModalOverlay.hidden = true; });
 
 document.getElementById('paymentForm').addEventListener('submit', async (e) => {
   e.preventDefault();
@@ -3143,7 +3141,7 @@ function openDepositModal(bookingId, booking) {
   depositModalOverlay.hidden = false;
 }
 document.getElementById('depositModalCancel').addEventListener('click', () => { depositModalOverlay.hidden = true; });
-depositModalOverlay.addEventListener('click', (e) => { if (e.target === depositModalOverlay) depositModalOverlay.hidden = true; });
+nsModal.guard(depositModalOverlay, () => { depositModalOverlay.hidden = true; });
 
 document.getElementById('depositForm').addEventListener('submit', async (e) => {
   e.preventDefault();
@@ -3186,7 +3184,7 @@ function openRefundModal(bookingId, booking) {
   refundModalOverlay.hidden = false;
 }
 document.getElementById('refundModalCancel').addEventListener('click', () => { refundModalOverlay.hidden = true; });
-refundModalOverlay.addEventListener('click', (e) => { if (e.target === refundModalOverlay) refundModalOverlay.hidden = true; });
+nsModal.guard(refundModalOverlay, () => { refundModalOverlay.hidden = true; });
 document.getElementById('refundDeduction').addEventListener('input', updateRefundPreview);
 
 document.getElementById('refundForm').addEventListener('submit', async (e) => {
@@ -3260,7 +3258,7 @@ async function openServiceModal(car) {
 }
 
 document.getElementById('serviceModalCancel').addEventListener('click', () => { serviceModalOverlay.hidden = true; });
-serviceModalOverlay.addEventListener('click', (e) => { if (e.target === serviceModalOverlay) serviceModalOverlay.hidden = true; });
+nsModal.guard(serviceModalOverlay, () => { serviceModalOverlay.hidden = true; });
 
 document.getElementById('serviceForm').addEventListener('submit', async (e) => {
   e.preventDefault();
@@ -3300,7 +3298,7 @@ function openPickupModal(bookingId, booking) {
   pickupModalOverlay.hidden = false;
 }
 document.getElementById('pickupModalCancel').addEventListener('click', () => { pickupModalOverlay.hidden = true; });
-pickupModalOverlay.addEventListener('click', (e) => { if (e.target === pickupModalOverlay) pickupModalOverlay.hidden = true; });
+nsModal.guard(pickupModalOverlay, () => { pickupModalOverlay.hidden = true; });
 
 document.getElementById('pickupForm').addEventListener('submit', async (e) => {
   e.preventDefault();
@@ -3354,7 +3352,7 @@ function openReturnModal(bookingId, booking) {
   returnModalOverlay.hidden = false;
 }
 document.getElementById('returnModalCancel').addEventListener('click', () => { returnModalOverlay.hidden = true; });
-returnModalOverlay.addEventListener('click', (e) => { if (e.target === returnModalOverlay) returnModalOverlay.hidden = true; });
+nsModal.guard(returnModalOverlay, () => { returnModalOverlay.hidden = true; });
 document.getElementById('returnEndKm').addEventListener('input', updateReturnKmPreview);
 
 document.getElementById('returnForm').addEventListener('submit', async (e) => {

admin/dialog.js

@@ -341,6 +341,90 @@
     });
   }, true);
 
+  /**
+   * The panel's form modals, and the click that used to throw them away.
+   *
+   * Every one of them closed on a click anywhere outside the card. On a
+   * booking form that is twenty fields and several minutes of typing, and a
+   * press that lands an inch wide of the card -- or a drag that starts on a
+   * field and ends on the grey -- emptied all of it with nothing asked and
+   * nothing kept. The owner reported doing it two or three times in a row.
+   *
+   * Three things close that hole:
+   *
+   *   The press has to start and end on the backdrop. Selecting text in a
+   *   field and releasing outside the card is not a press on the backdrop,
+   *   and it was being counted as one.
+   *
+   *   A form with nothing typed in it still closes immediately. Opening the
+   *   wrong form and clicking away is not worth a question.
+   *
+   *   A form with something typed in it asks first, and the default answer
+   *   is to stay. What was typed is still there behind the question either
+   *   way -- answering "keep writing" leaves every field exactly as it was.
+   *
+   * What counts as "something typed" is the form's values against the ones
+   * it opened with, so a form that pre-fills itself from an enquiry is not
+   * treated as edited before it has been touched.
+   */
+  var opened = new WeakMap();
+
+  function snapshot(overlay) {
+    var fields = overlay.querySelectorAll('input, select, textarea');
+    var out = [];
+    for (var i = 0; i < fields.length; i++) {
+      var f = fields[i];
+      if (f.type === 'file') { out.push(f.value); continue; }
+      out.push(f.type === 'checkbox' || f.type === 'radio' ? String(f.checked) : f.value);
+    }
+    return out.join('\u0000');
+  }
+
+  function wasTypedIn(overlay) {
+    var before = opened.get(overlay);
+    return before !== undefined && snapshot(overlay) !== before;
+  }
+
+  window.nsModal = {
+    /**
+     * Wires one overlay: a click on the backdrop, and Escape, close it --
+     * through a question first when there is something to lose.
+     */
+    guard: function (overlay, close) {
+      if (!overlay) return;
+
+      // Taken whenever the modal is shown, whatever showed it. The alternative
+      // is a snapshot call at every place that opens one, which is nine places
+      // and a tenth one someone adds later without knowing.
+      new MutationObserver(function () {
+        if (!overlay.hidden) opened.set(overlay, snapshot(overlay));
+      }).observe(overlay, { attributes: true, attributeFilter: ['hidden'] });
+
+      var leave = function () {
+        if (!wasTypedIn(overlay)) { close(); return; }
+        window.nsDialog.confirm('What you have filled in is lost.', {
+          title: 'Leave this form?',
+          confirmLabel: 'Discard it',
+          cancelLabel: 'Keep writing',
+          tone: 'danger',
+        }).then(function (yes) { if (yes) close(); });
+      };
+
+      var fromBackdrop = false;
+      overlay.addEventListener('pointerdown', function (e) { fromBackdrop = e.target === overlay; });
+      overlay.addEventListener('click', function (e) {
+        if (e.target === overlay && fromBackdrop) leave();
+      });
+      document.addEventListener('keydown', function (e) {
+        // Not while a question is up: Escape belongs to whatever is on top,
+        // and the question is.
+        if (e.key !== 'Escape' || overlay.hidden) return;
+        if (showing) return;
+        leave();
+      });
+    },
+  };
+
   document.addEventListener('click', function (e) {
     var button = e.target.closest ? e.target.closest('[data-confirm]') : null;
     // A form carrying it is the submit handler's, not this one's -- that is

admin/shell.js

@@ -236,10 +236,9 @@
   if (overlay) {
     document.getElementById('nsBellAdd').addEventListener('click', function () { openForm(null); });
     document.getElementById('nsReminderCancel').addEventListener('click', closeForm);
-    overlay.addEventListener('click', function (ev) { if (ev.target === overlay) closeForm(); });
-    document.addEventListener('keydown', function (ev) {
-      if (ev.key === 'Escape' && !overlay.hidden) closeForm();
-    });
+    // Clicking away from a half-written reminder asks before it throws it
+    // away, the same as every other form in the panel. See dialog.js.
+    nsModal.guard(overlay, closeForm);
 
     form.addEventListener('submit', function (ev) {
       ev.preventDefault();

build.json

@@ -1,8 +1,8 @@
 {
-  "publishedAt": "2026-10-08T05:35:24.248Z",
-  "commit": "3dc49f3f",
-  "commitAt": "2026-10-07T13:59:35+05:30",
-  "sourceHash": "c395949794dfa02d",
+  "publishedAt": "2026-10-08T05:46:13.246Z",
+  "commit": "c5406747",
+  "commitAt": "2026-10-08T11:08:18+05:30",
+  "sourceHash": "741ac4ee9b231df4",
   "assets": [
     "About-CI1hic09.js",
     "Bikes-DLleZl6n.js",