propagation rodeo

GEOLYTIX · Sep 27, 2024 · 6fe6ead · 6fe6ead
1 parent 7bb0b49
commit 6fe6ead
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 47 deletions.
diff --git a/lib/ui/elements/alert.mjs b/lib/ui/elements/alert.mjs
@@ -35,19 +35,16 @@ export default function alert(params) {
 
   params.class ??= 'alert-confirm'
 
-  params.closeOnClick = true
-
   params.header = mapp.utils.html`
-    <h4 onclick=${e => { e.stopPropagation() }}>${params.title}`
+    <h4>${params.title}`
 
   params.content = mapp.utils.html`
-    <p onclick=${e => { e.stopPropagation() }}>${params.text}</p>
-    <div onclick=${e => { e.stopPropagation() }} class="buttons">
+    <p>${params.text}</p>
+    <div class="buttons">
       <button 
         class="raised primary-colour bold"
         style="grid-column: 1/3; margin: 0 5em;"
         onclick=${e => {
-          e.stopPropagation();
           e.target.closest('dialog').close();
         }}>${mapp.dictionary.ok}`
 

diff --git a/lib/ui/elements/confirm.mjs b/lib/ui/elements/confirm.mjs
@@ -41,13 +41,10 @@ export default function confirm(params) {
 
     params.data_id ??= 'confirm'
 
-    params.header = mapp.utils.html`<h4 onclick=${(e) => { 
-      e.stopPropagation()
-    }}>${params.title}`
-
+    params.header = mapp.utils.html`<h4>${params.title}`
+
     const btn_true = mapp.utils.html`<button 
       onclick=${e => {
-        e.stopPropagation();
         e.target.closest('dialog').close();
         resolve(true);
       }}
@@ -56,23 +53,20 @@ export default function confirm(params) {
 
     const btn_false = mapp.utils.html`<button
       onclick=${e => {
-        e.stopPropagation();
         e.target.closest('dialog').close();
         resolve(false);
       }}
       class="raised primary-colour bold">
       ${mapp.dictionary.cancel}`
 
     params.content ??= mapp.utils.html`
-      <p onclick=${(e) => { e.stopPropagation() }}>${params.text}</p>
-      <div onclick=${(e) => { e.stopPropagation() }} class="buttons">
+      <p>${params.text}</p>
+      <div class="buttons">
         ${btn_true}  
         ${btn_false}`
 
     params.class ??= 'alert-confirm'
-
-    params.closeOnClick = true
-
+
     mapp.ui.elements.dialog(params)
   });
 }
diff --git a/lib/ui/elements/dialog.mjs b/lib/ui/elements/dialog.mjs
@@ -32,7 +32,6 @@ const dialog = mapp.ui.elements.dialog({
 @property {boolean} [dialog.modal] A flag to determine if its a Modal or Dialog.
 @property {boolean} [dialog.closeBtn] The flag property will become the closeBtn element.
 @property {Function} [dialog.close] A function called by default when the dialog is closed. The dialog element is closed and removed from DOM.
-@property {boolean} [dialog.closeOnClick] Optional parameter to close the dialog when backdrop or the dialog itself is clicked. In order to prevent unwanted behaviour use .stopPropagation() on custom elements within dialog header and content.
 @property {Function} [dialog.onClose] Optional function to run after dialog element is closed - uses onclose dialog event and overrides dialog.close().
 @property {number} [dialog.top] The top position of the dialog.
 @property {number} [dialog.left] The left position of the dialog.
@@ -56,12 +55,6 @@ export default function dialog(dialog) {
   // Close existing modal.
   document.querySelector('dialog.modal')?.close()
 
-  dialog.closeBtn &&= mapp.utils.html`
-    <button
-      data-id=close
-      class="mask-icon close"
-      onclick=${closeDialog}>`
-
   dialog.data_id ??= 'dialog'
 
   if (dialog.headerDrag) {
@@ -72,32 +65,26 @@ export default function dialog(dialog) {
 
   const classList = `${dialog.modal ? 'modal' : 'dialog'} ${dialog.class || ''}`
 
-  dialog.node = mapp.utils.html.node`
-    <dialog 
-      onclose=${e => {
-        if(dialog.onClose instanceof Function) return dialog.onClose(e)
-        dialog.close()
-      }}
-      onclick=${e => {
-         e.stopPropagation()
-        if(dialog.closeOnClick) {
-          if(dialog.onClose instanceof Function) return dialog.onClose(e)
-          dialog.close()
-        }
-      }}
-      style=${dialog.css_style}
-      data-id=${dialog.data_id}
-      class="${classList}">
-      ${dialog.closeBtn}
-      ${dialog.header}
-      ${dialog.content}`
-
-  dialog.close = () => {
+  dialog.close = e => {
+    if(dialog.onClose instanceof Function) dialog.onClose(e)
     dialog.node.close()
     dialog.node.remove()
   }
-
-
+
+  dialog.closeBtn &&= mapp.utils.html`<button
+    data-id=close
+    class="mask-icon close"
+    onclick=${closeDialog}>`  
+
+  dialog.node = mapp.utils.html.node`<dialog 
+    onclose=${dialog.close}
+    style=${dialog.css_style}
+    data-id=${dialog.data_id}
+    class="${classList}">
+    ${dialog.closeBtn}
+    ${dialog.header}
+    ${dialog.content}`
+
   if (dialog.modal) {
 
     document.body.append(dialog.node)