mapp.ui.elements.alert/ confirm methods

lib/dictionaries/en.mjs

@@ -1,6 +1,9 @@
 export default {
   save: 'Save',
   cancel: 'Cancel',
+  ok: 'OK',
+  confirm: 'Confirm',
+  information: 'Information',
   confirm_delete: 'Are you sure you want to delete this feature? This cannot be undone.',
   invalid_geometry: 'Invalid geometry',
   no_results: 'No results for this search',

lib/location/decorate.mjs

@@ -236,7 +236,9 @@ function flyTo(maxZoom) {
 
 async function trash() {
 
-  if (!confirm(mapp.dictionary.confirm_delete)) return;
+  const confirm = await mapp.ui.elements.confirm({text: mapp.dictionary.confirm_delete})
+
+  if (!confirm) return;
 
   await mapp.utils.xhr(`${this.layer.mapview.host}/api/query?` +
     mapp.utils.paramString({

lib/ui/elements/_elements.mjs

@@ -14,6 +14,8 @@ import dropdown_multi from './dropdown_multi.mjs';
 import btnPanel from './btnPanel.mjs';
 import legendIcon from './legendIcon.mjs';
 import dialog from './dialog.mjs';
+import alert from './alert.mjs';
+import confirm from './confirm.mjs';
 import helpDialog from './helpDialog.mjs';
 import searchbox from './searchbox.mjs';
 import slider from './slider.mjs';
@@ -35,6 +37,8 @@ UI elements object containing various UI components.
 @property {Function} dropdown_multi - Multi-select dropdown component.
 @property {Function} legendIcon - Legend icon component.
 @property {Function} dialog - Dialog component.
+@property {Function} alert - Alert component.
+@property {Function} confirm - Confirm component.
 @property {Function} helpDialog - Help Dialog component.
 @property {Function} searchbox - Searchbox component.
 @property {Function} slider - Slider component.
@@ -57,6 +61,8 @@ export default {
   layerStyle,
   legendIcon,
   dialog,
+  alert,
+  confirm,
   pills,
   helpDialog,
   searchbox,

lib/ui/elements/alert.mjs

@@ -0,0 +1,52 @@
+/**
+### /ui/elements/alert
+
+Exports the alert dialog method as mapp.ui.elements.alert()
+
+@requires /ui/elements/dialog
+
+@module /ui/elements/alert
+*/
+
+/**
+@function alert
+
+@description
+This is an alert element to display information to the user.
+
+It is a framework alternative way to using window.alert() browser function.
+
+```js
+mapp.ui.elements.alert({
+  text: "Drivetimes have been created."
+})
+```
+@param {Object} params Params for the alert dialog.
+@property {string} [params.data_id='alert'] The data-id attribute value for the dialog.
+@property {string} [params.title] Text to display in the alert header. Defaults to 'Information'.
+@property {string} [params.text] Text to display in the alert content. 
+@returns {HTMLElement} alert The alert element.
+*/
+export default function alert(params) {
+
+  params.title ??= `${mapp.dictionary.information}`;
+
+  params.data_id ??= 'alert'
+
+  params.class ??= 'alert-confirm'
+
+  params.header = mapp.utils.html`
+    <h4>${params.title}`
+
+  params.content = mapp.utils.html`
+    <p>${params.text}</p>
+    <div class="buttons">
+      <button 
+        class="raised primary-colour bold"
+        style="grid-column: 1/3; margin: 0 5em;"
+        onclick=${e => {
+          e.target.closest('dialog').close();
+        }}>${mapp.dictionary.ok}`
+
+  return mapp.ui.elements.dialog(params)
+}

lib/ui/elements/confirm.mjs

@@ -0,0 +1,72 @@
+/**
+## /ui/elements/confirm
+
+Exports the confirm dialog method as mapp.ui.elements.confirm()
+
+@requires /ui/elements/dialog
+
+@module /ui/elements/confirm
+*/
+
+/**
+@function confirm
+
+@description
+This is a confirm element to display information to the user and resolving to yes/no response.
+
+It is a framework alternative way to using window.confirm() browser function.
+
+```js
+const confirm = await mapp.ui.elements.confirm({
+   text: "Please confim changes."
+})
+if(confirm) {
+// proceed
+} else {
+// prevent
+}
+```
+
+@param {Object} params Params for the configuration dialog.
+@property {string} [params.data_id='confirm'] The data-id attribute value for the dialog.
+@property {string} [params.title] Text to display in the confirm header. Defaults to 'Confirm'.
+@property {string} [params.text] Text to display in the confirm content.
+@returns {Promise<boolean>} Returns promise which resolves to true or false whether the question was confirmed.
+*/
+export default function confirm(params) {
+
+  return new Promise((resolve, reject) => {
+
+    params.title ??= `${mapp.dictionary.confirm}`;
+
+    params.data_id ??= 'confirm'
+
+    params.header = mapp.utils.html`<h4>${params.title}`
+
+    const btn_true = mapp.utils.html`<button 
+      onclick=${e => {
+        e.target.closest('dialog').close();
+        resolve(true);
+      }}
+      class="raised primary-colour bold">
+      ${mapp.dictionary.ok}`;
+
+    const btn_false = mapp.utils.html`<button
+      onclick=${e => {
+        e.target.closest('dialog').close();
+        resolve(false);
+      }}
+      class="raised primary-colour bold">
+      ${mapp.dictionary.cancel}`
+
+    params.content ??= mapp.utils.html`
+      <p>${params.text}</p>
+      <div class="buttons">
+        ${btn_true}  
+        ${btn_false}`
+
+    params.class ??= 'alert-confirm'
+
+    mapp.ui.elements.dialog(params)
+  });
+}

lib/ui/elements/dialog.mjs

@@ -30,14 +30,16 @@ const dialog = mapp.ui.elements.dialog({
 @property {string} [dialog.header] The HTML content for the dialog header.
 @property {string} [dialog.content] The HTML content for the dialog body.
 @property {boolean} [dialog.modal] A flag to determine if its a Modal or Dialog.
-@property {Function} [dialog.close] A function to be called when the dialog is closed. Boolean to indicate whether there should be a close method.
+@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 {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.
 @property {number} [dialog.right] The right position of the dialog (used to calculate left position).
 @property {boolean} [dialog.contained] A flag indicating whether to keep the dialog within the target element's boundaries.
 @property {boolean} [dialog.containedCentre] A flag indicating whether to keep the dialog centered within the target element's boundaries.
 @property {boolean} [dialog.headerDrag] A flag indicating whether the dialog can be dragged only by the header.By default, the dialog can be dragged from anywhere.
-@returns {HTMLElement} dialog.node The dialog element.
+@returns {Object} Decorated dialog configuration object
 */
 
 export default function dialog(dialog) {
@@ -47,35 +49,45 @@ export default function dialog(dialog) {
     // The dialog must be modal if no target is provided.
     dialog.modal = true;
 
-    // Ensure the target is an HTMLElement before proceeding
+  // Ensure the target is an HTMLElement before proceeding
   } else if (!(dialog.target instanceof HTMLElement)) return;
 
   // Close existing modal.
   document.querySelector('dialog.modal')?.close()
 
-  dialog.closeBtn ??= dialog.close && mapp.utils.html.node`
-    <button
-      data-id=close
-      class="mask-icon close"
-      onclick=${closeDialog}>`
-
   dialog.data_id ??= 'dialog'
 
-  // If headerDrag is true - add the headerDrag class to the dialog header
-  dialog.headerDrag && (dialog.header = mapp.utils.html.node`<header class="headerDrag">${dialog.header}</header>`);
+  if (dialog.headerDrag) {
 
-  let classList = `${dialog.modal ? 'modal' : 'dialog'} ${dialog.class || ''}`
+    dialog.header = mapp.utils.html.node`
+      <header class="headerDrag">${dialog.header}`
+  }
 
-  dialog.node = mapp.utils.html.node`
-    <dialog 
-      style=${dialog.css_style}
-      data-id=${dialog.data_id}
-      class="${classList}">
-      ${dialog.closeBtn}
-      ${dialog.header}
-      ${dialog.content}`
+  const classList = `${dialog.modal ? 'modal' : 'dialog'} ${dialog.class || ''}`
 
+  function closeDialog(e) {
+    if (dialog.onClose instanceof Function) {
+      dialog.onClose(e)
+    }
+    dialog.node.remove()
+  }
 
+  dialog.close = closeDialog
+
+  dialog.closeBtn &&= mapp.utils.html`<button
+    data-id=close
+    class="mask-icon close"
+    onclick=${closeDialog}>`
+
+  dialog.node = mapp.utils.html.node`<dialog 
+    onclose=${closeDialog}
+    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)
@@ -103,12 +115,6 @@ export default function dialog(dialog) {
     resizeObserver.observe(dialog.target);
   }
 
-  // Function to handle the dialog closure
-  function closeDialog() {
-    if (dialog.close instanceof Function) dialog.close()
-    dialog.node.close();
-  }
-
   // Function to handle the start of a drag event, setting up the necessary event listeners for moving and ending the drag
   function handleStartEvent(e) {
 
@@ -200,6 +206,8 @@ export default function dialog(dialog) {
     // top shift
     dialog.node.style.top = `${dialog.node.offsetTop + topShift}px`
   }
+
+  return dialog
 };
 
 /**

lib/ui/locations/entries/cloudinary.mjs

@@ -14,6 +14,7 @@ mapp.utils.merge(mapp.dictionaries, {
   en: {
     image_upload_failed: 'Image upload failed.',
     document_upload_failed: 'Document upload failed.',
+    remove_item_confirm: 'Remove item?'
   },
   de: {
     image_upload_failed: 'Hochladen des Bildes gescheitert.',
@@ -275,7 +276,9 @@ async function docLoad(e, entry) {
 
 async function trash(e, entry) {
 
-  if (!confirm('Remove item?')) return;
+  const confirm = await mapp.ui.elements.confirm({text: mapp.dictionary.remove_item_confirm});
+
+  if (!confirm) return;
 
   // Send request to cloudinary to destroy resource.
   await mapp.utils.xhr(`${entry.location.layer.mapview.host}/api/provider/cloudinary?${mapp.utils.paramString({

lib/ui/locations/view.mjs

@@ -147,17 +147,29 @@ export default function view(location) {
 
   // Clear selection.
   header.push(mapp.utils.html`<button
-    title = ${mapp.dictionary.location_remove}
-    class = "mask-icon close no"
-    onclick = ${() => {
+    title= ${mapp.dictionary.location_remove}
+    class= "mask-icon close no"
+    onclick= ${location_remove}>`)
 
-      if (location.infoj.some(entry => typeof entry.newValue !== 'undefined')) {
+  /**
+  @function location_remove
 
-        if (!confirm(`${mapp.dictionary.location_close_without_save}`)) return;
-      }
+  @description
+  The method checks whether a location.infoj has some unsaved changes. A confirm dialog will be shown to confirm the location.remove() without saving changes.
+  */
+  async function location_remove() {
+
+    const changesUnsaved = location.infoj.some(entry => typeof entry.newValue !== 'undefined');
 
-      location.remove()
-    }}>`)
+    if(changesUnsaved) {
+
+      const confirm = await mapp.ui.elements.confirm({text: mapp.dictionary.location_close_without_save})
+
+      if (!confirm) return;
+    }
+
+    location.remove()
+  }
 
   location.view = mapp.ui.elements.drawer({
     class: 'location-view raised expanded',
@@ -262,21 +274,23 @@ function toggleLocationViewEdits(location) {
   */
   async function onClickEditToggle(e) {
 
-    // There are edits to be saved.
-    if (location.infoj.some(entry => typeof entry.newValue !== 'undefined')
+    // Check for unsaved edits
+    const unsavedChanges = location.infoj.some(entry => typeof entry.newValue !== 'undefined');
 
-      // Confirm whether to save edits.
-      && confirm(mapp.dictionary.location_save_changes)) {
+    if(unsavedChanges) {
+      // There are edits to be saved.
+      const confirm = await mapp.ui.elements.confirm({text: mapp.dictionary.location_save_changes})
 
-      const update = await location.update()
+      if(confirm) {
 
-      // The update may err due to invalid entries.
-      if (update instanceof Error) {
+        const update = await location.update()
+
+        // The update may err due to invalid entries.
+        if (update instanceof Error) return;
 
-        return;
       }
+
 
-      // There are no unsaved edits.
     } else if (e.target.classList.toggle('on')) {
 
       // Button is toggled on.
@@ -287,6 +301,7 @@ function toggleLocationViewEdits(location) {
       // Button is toggled off.
       location.removeEdits()
       location.view.querySelector('.btn-save').style.display = 'none'
+
     }
 
     location.renderLocationView()