Issue #3427181: Rework the javascript.

Closes #3427181

node-edit-protection.js

@@ -3,57 +3,69 @@
  * Stops page from changing when user is posting.
  */
 
-(function($, Drupal, drupalSettings) {
-  Drupal.node_edit_protection = {};
-  var click = false;
+(function($, Drupal) {
   // Allow Submit/Edit button.
-  var edit = false;
+  var click = false;
+
   // Dirty form flag.
+  var edit = false;
+
+  /**
+   * Checks if any elements on the page might have unsaved changes.
+   *
+   * @returns {boolean}
+   *   TRUE if changes seem to exist.
+   */
+  const unsavedChangesExist = () => {
+    if (edit) {
+      return true;
+    }
+    // Find modifications in CKEditor 5 instances.
+    if (document.querySelector('[data-ckeditor5-id][data-editor-value-is-changed=true]')) {
+      return true;
+    }
+    // Find modifications in CKEditor 4 instances.
+    if (typeof (CKEDITOR) !== 'undefined' && typeof (CKEDITOR.instances) !== 'undefined') {
+      for (var i in CKEDITOR.instances) {
+        if (CKEDITOR.instances[i].checkDirty()) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+
+  /**
+   * Adds a dialog to protect users from leaving a form with unsaved changes.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the behavior to new or updated elements.
+   */
   Drupal.behaviors.nodeEditProtection = {
-    attach : function(context) {
+    attach: function(context) {
       // If they leave an input field, assume they changed it.
-      $(".node-form :input").each(function() {
-        $(this).blur(function() {
-          edit = true;
-        });
+      // The ':input' selector only works in jQuery, therefore the $(...) is
+      // needed.
+      $(once('node-edit-protection-input', $('.node-form :input'), context)).blur(function() {
+        edit = true;
       });
 
       // Let all form submit buttons through.
-      $(".node-form input[type='submit'], .node-form button[type='submit']").each(function() {
-        $(this).addClass('node-edit-protection-processed');
-        $(this).click(function() {
-          click = true;
-        });
+      $(once('node-edit-protection-submit', '.node-form :is(input,button)[type="submit"]', context)).click(function() {
+        click = true;
       });
 
-      // Catch all links and buttons EXCEPT for "#" links.
-      $("a, button, input[type='submit']:not(.node-edit-protection-processed), button[type='submit']:not(.node-edit-protection-processed)")
-          .each(function() {
-            $(this).click(function() {
-              // Return when a "#" link is clicked so as to skip the
-              // window.onbeforeunload function.
-              if (edit && $(this).attr("href") != "#") {
-                return 0;
-              }
-            });
-          });
-
       // Handle backbutton, exit etc.
       window.onbeforeunload = function() {
-        // Add CKEditor support.
-        if (typeof (CKEDITOR) != 'undefined' && typeof (CKEDITOR.instances) != 'undefined') {
-          for (var i in CKEDITOR.instances) {
-            if (CKEDITOR.instances[i].checkDirty()) {
-              edit = true;
-              break;
-            }
-          }
+        if (click) {
+          return;
         }
-        if (edit && !click) {
-          click = false;
-          return (Drupal.t("You will lose all unsaved work."));
+        if (unsavedChangesExist()) {
+          return (Drupal.t('You will lose all unsaved work.'));
         }
       }
     }
   };
-})(jQuery, Drupal, drupalSettings);
+})(jQuery, Drupal);