refactor(bootstrap5): edit revision (ems-project#767)

EMS/admin-ui-bundle/_to_be_ref/js/editRevisionEventListeners.js

@@ -23,12 +23,6 @@ function editRevisionEventListeners(target, onChangeCallback = null){
         }
     });
 
-    if (onChangeCallback) {
-        target.find("input").not(".ignore-ems-update,.datetime-picker,datetime-picker").on('input', onChangeCallback);
-        target.find("select").not(".ignore-ems-update").on('change', onChangeCallback);
-        target.find("textarea").not(".ignore-ems-update").on('input', onChangeCallback);
-    }
-
     target.find('.add-content-button').on('click', function(e) {
         // prevent the link from creating a "#" on the URL
         e.preventDefault();

EMS/admin-ui-bundle/assets/js/core/core.js

@@ -23,6 +23,8 @@ import RevisionTask from './components/revisionTask'
 import Sidebar from './components/sidebar'
 
 import { EMS_ADDED_DOM_EVENT } from './events/addedDomEvent'
+import CtrlSaveEvent from './events/ctrlSaveEvent'
+import $ from 'jquery'
 
 class Core {
   constructor () {
@@ -68,6 +70,7 @@ class Core {
       document.addEventListener('DOMContentLoaded', this.load(document))
     }
     this.initStatusRefresh()
+    this.initCtrlSaveEvent()
     this.components = [
       new RevisionTask(),
       new Sidebar()
@@ -103,6 +106,21 @@ class Core {
 
     xhr.send()
   }
+
+  initCtrlSaveEvent () {
+    $(document).keydown(function (e) {
+      let key
+      const possible = [e.key, e.keyIdentifier, e.keyCode, e.which]
+
+      while (key === undefined && possible.length > 0) {
+        key = possible.pop()
+      }
+      if (typeof key === 'number' && (key === 115 || key === 83) && (e.ctrlKey || e.metaKey) && !(e.altKey)) {
+        const event = new CtrlSaveEvent(e)
+        event.dispatch()
+      }
+    })
+  }
 }
 
 const core = new Core()

EMS/admin-ui-bundle/assets/js/core/events/changeEvent.js

@@ -1,12 +1,22 @@
 export const EMS_CHANGE_EVENT = 'emsChangeEvent'
 export class ChangeEvent {
   constructor (input) {
-    this._event = new CustomEvent(EMS_CHANGE_EVENT, { input })
+    this._form = input.closest('form')
     this._input = input
+
+    this._event = new CustomEvent(EMS_CHANGE_EVENT, {
+      detail: {
+        form: this._form,
+        input
+      }
+    })
   }
 
   dispatch () {
-    document.dispatchEvent(this._event)
+    if (undefined === this._form) {
+      return
+    }
+    this._form.dispatchEvent(this._event)
   }
 }
 export default ChangeEvent

EMS/admin-ui-bundle/assets/js/core/events/ctrlSaveEvent.js

@@ -0,0 +1,15 @@
+export const EMS_CTRL_SAVE_EVENT = 'emsCtrlSaveEvent'
+export class CtrlSaveEvent {
+  constructor (event) {
+    this._event = new CustomEvent(EMS_CTRL_SAVE_EVENT, {
+      detail: {
+        parentEvent: event
+      }
+    })
+  }
+
+  dispatch () {
+    document.dispatchEvent(this._event)
+  }
+}
+export default CtrlSaveEvent

EMS/admin-ui-bundle/assets/js/core/plugins/form.js

@@ -1,9 +1,12 @@
 import $ from 'jquery'
 import ajaxRequest from '../components/ajaxRequest'
+import ChangeEvent from '../events/changeEvent'
+import { EMS_CTRL_SAVE_EVENT } from '../events/ctrlSaveEvent'
 
 class Form {
   load (target) {
     this.initAjaxSave(target)
+    this.initFormChangeEvent(target)
   }
 
   initAjaxSave (target) {
@@ -31,22 +34,21 @@ class Form {
       }
 
       button.on('click', ajaxSave)
+      document.addEventListener(EMS_CTRL_SAVE_EVENT, (event) => ajaxSave(event.detail.parentEvent))
+    })
+  }
 
-      $(document).keydown(function (e) {
-        let key
-        const possible = [e.key, e.keyIdentifier, e.keyCode, e.which]
-
-        while (key === undefined && possible.length > 0) {
-          key = possible.pop()
-        }
-
-        if (typeof key === 'number' && (key === 115 || key === 83) && (e.ctrlKey || e.metaKey) && !(e.altKey)) {
-          ajaxSave(e)
-          return false
-        }
-        return true
+  initFormChangeEvent (target) {
+    const inputs = document.querySelectorAll('input,textarea,select')
+    for (let i = 0; i < inputs.length; ++i) {
+      if (inputs[i].classList.contains('ignore-ems-update') || inputs[i].classList.contains('datetime-picker')) {
+        continue
+      }
+      inputs[i].addEventListener('change', function () {
+        const event = new ChangeEvent(inputs[i])
+        event.dispatch()
       })
-    })
+    }
   }
 }