Alert message for form unsaved changes

src/assets/js/react/gfpdf-main.js

@@ -5,6 +5,8 @@ import coreFontBootstrap from './bootstrap/coreFontBootstrap'
 import helpBootstrap from './bootstrap/helpBootstrap'
 import addEditButton from './utilities/PdfSettings/addEditButton'
 import autoSelectShortcode from './utilities/PdfList/autoSelectShortcode'
+import checkFormUnsavedChanges from './utilities/PdfSettings/checkFormUnsavedChanges'
+import disableOnbeforeunload from './utilities/PdfSettings/disableOnbeforeunload'
 import '../../scss/gfpdf-styles.scss'
 
 /**
@@ -59,9 +61,11 @@ $(function () {
   const fmGeneralSettingsTab = document.querySelector('#gfpdf-settings-field-wrapper-default_font select')
   const fmToolsTab = document.querySelector('#gfpdf-settings-field-wrapper-manage_fonts')
   const fmPdfSettings = document.querySelector('#gfpdf-settings-field-wrapper-font select')
-  const pdfSettingsForm = document.querySelector('#gfpdf_pdf_form')
+  const pdfSettingsForm = document.querySelector('form#gfpdf_pdf_form')
   const pdfSettingFieldSets = document.querySelectorAll('fieldset.gform-settings-panel--full')
   const gfPdfListForm = document.querySelector('form#gfpdf_list_form')
+  const gPdfTabsForm = document.querySelector('form.gform_settings_form')
+  const currentUrl = window.location.href
 
   /* Initialize font manager under general settings tab */
   if (fmGeneralSettingsTab !== null) {
@@ -87,4 +91,22 @@ $(function () {
   if (gfPdfListForm !== null) {
     autoSelectShortcode(gfPdfListForm)
   }
+
+  /* Initialize form unsaved changes checker on General settings tab */
+  if (currentUrl.includes('tab=general') || currentUrl.includes('subview=PDF#/')) {
+    checkFormUnsavedChanges(gPdfTabsForm)
+    disableOnbeforeunload(gPdfTabsForm)
+  }
+
+  /* Initialize form unsaved changes checker on License tab */
+  if (currentUrl.includes('tab=license')) {
+    checkFormUnsavedChanges(gPdfTabsForm)
+    disableOnbeforeunload(gPdfTabsForm)
+  }
+
+  /* Initialize form unsaved changes checker on New / Existing PDF settings */
+  if (currentUrl.includes('&pid=')) {
+    checkFormUnsavedChanges(pdfSettingsForm)
+    disableOnbeforeunload(pdfSettingsForm)
+  }
 })

src/assets/js/react/utilities/PdfSettings/checkFormUnsavedChanges.js

@@ -0,0 +1,7 @@
+export default function checkFormUnsavedChanges (form) {
+  form.addEventListener('change', () => {
+    window.onbeforeunload = () => ''
+
+    return window
+  })
+}

src/assets/js/react/utilities/PdfSettings/disableOnbeforeunload.js

@@ -0,0 +1,8 @@
+export default function disableOnbeforeunload (form) {
+  /* Disable onbeforeunload event during form submission */
+  form.onsubmit = () => {
+    window.onbeforeunload = null
+
+    return window
+  }
+}