Integrate SweetAlert2 for improved alerts and confirmations in HTMX functionality. Adjust alert handling across event triggers

Author: eduardolat

internal/view/static/js/app.js

@@ -1,9 +1,11 @@
+import { initSweetAlert2 } from './init-sweetalert2.js'
 import { initNotyf } from './init-notyf.js'
 import { initHTMX } from './init-htmx.js'
 import { initAlpineComponents } from './init-alpine-components.js'
 import { initHelpers } from './init-helpers.js'
 import { initDashboardAsideScroll } from './dashboard-aside-scroll.js'
 
+initSweetAlert2()
 initNotyf()
 initHTMX()
 initAlpineComponents()

internal/view/static/js/init-htmx.js

@@ -2,12 +2,13 @@ export function initHTMX () {
   const triggers = {
     ctm_alert: function (evt) {
       const message = decodeURIComponent(evt.detail.value)
-      alert(message)
+      window.swalAlert(message)
     },
     ctm_alert_with_refresh: function (evt) {
       const message = decodeURIComponent(evt.detail.value)
-      alert(message)
-      location.reload()
+      window.swalAlert(message).then(() => {
+        location.reload()
+      })
     },
     ctm_alert_with_redirect: function (evt) {
       const payload = decodeURIComponent(evt.detail.value)
@@ -18,8 +19,9 @@ export function initHTMX () {
       const message = parts[0]
       const url = parts[1]
 
-      alert(message)
-      location.href = url
+      window.swalAlert(message).then(() => {
+        location.href = url
+      })
     },
     ctm_toast_success: function (evt) {
       const message = decodeURIComponent(evt.detail.value)
@@ -43,10 +45,18 @@ export function initHTMX () {
     document.addEventListener(key, triggers[key])
   }
 
-  /*
-    This fixes this issue:
-    https://stackoverflow.com/questions/73658449/htmx-request-not-firing-when-hx-attributes-are-added-dynamically-from-javascrip
-  */
+  //  Add trigger to use sweetalert2 for confirms
+  document.addEventListener('htmx:confirm', function (e) {
+    if (!e.detail.target.hasAttribute('hx-confirm')) return
+
+    e.preventDefault()
+    window.swalConfirm(e.detail.question).then(function (result) {
+      if (result.isConfirmed) e.detail.issueRequest(true)
+    })
+  })
+
+  // This fixes this issue:
+  // https://stackoverflow.com/questions/73658449/htmx-request-not-firing-when-hx-attributes-are-added-dynamically-from-javascrip
   const observer = new MutationObserver((mutations) => {
     mutations.forEach((mutation) => {
       mutation.addedNodes.forEach((node) => {

internal/view/static/js/init-sweetalert2.js

@@ -0,0 +1,34 @@
+export function initSweetAlert2 () {
+  // Docs at https://sweetalert2.github.io/#configuration
+  const defaultConfig = {
+    icon: 'info',
+    confirmButtonText: 'Okay',
+    cancelButtonText: 'Cancel',
+    customClass: {
+      popup: 'rounded-box bg-base-100 text-base-content',
+      confirmButton: 'btn btn-primary',
+      denyButton: 'btn btn-warning',
+      cancelButton: 'btn btn-error'
+    }
+  }
+
+  async function swalAlert (text) {
+    return Swal.fire({
+      ...defaultConfig,
+      title: text
+    })
+  }
+
+  async function swalConfirm (text) {
+    return Swal.fire({
+      ...defaultConfig,
+      icon: 'question',
+      title: text,
+      confirmButtonText: 'Confirm',
+      showCancelButton: true
+    })
+  }
+
+  window.swalAlert = swalAlert
+  window.swalConfirm = swalConfirm
+}

internal/view/web/layout/dashboard.go

@@ -29,6 +29,7 @@ func Dashboard(params DashboardParams) gomponents.Node {
 			html.Script(html.Src("/libs/htmx/htmx-2.0.1.min.js"), html.Defer()),
 			html.Script(html.Src("/libs/alpinejs/alpinejs-3.14.1.min.js"), html.Defer()),
 			html.Script(html.Src("/libs/theme-change/theme-change-2.0.2.min.js")),
+			html.Script(html.Src("/libs/sweetalert2/sweetalert2-11.13.1.min.js")),
 
 			html.Link(html.Rel("stylesheet"), html.Href("/libs/notyf/notyf-3.10.0.min.css")),
 			html.Script(html.Src("/libs/notyf/notyf-3.10.0.min.js")),

package.json

@@ -14,13 +14,13 @@
   "standard": {
     "globals": [
       "localStorage",
-      "alert",
       "location",
       "toaster",
       "Alpine",
       "Notyf",
       "htmx",
-      "MutationObserver"
+      "MutationObserver",
+      "Swal"
     ]
   }
 }