Add configform js component (will be renamed later)

refs #4622

application/forms/Config/LoggingForm.php

@@ -126,7 +126,7 @@ class LoggingForm extends Form
         if ($this->config === null) {
             $this->config = new Zend_Config(array());
         }
-
+        $this->setAttrib('data-icinga-component', 'app/configForm');
         $logging = $this->config->logging;
         if ($logging === null) {
             $logging = new IcingaConfig(array());

library/Icinga/Web/Form.php

@@ -308,7 +308,7 @@ class Form extends Zend_Form
         foreach ($triggerElements as $elementName) {
             $element = $this->getElement($elementName);
             if ($element !== null) {
-                $element->setAttrib('onchange', '$(this.form).submit();');
+                $element->setAttrib('data-icinga-autosubmit', 'true');
             } else {
                 throw new ProgrammingError(
                     'You need to add the element "' . $elementName . '" to' .
@@ -345,6 +345,7 @@ class Form extends Zend_Form
         } else {
             // only populate if not submitted
             $this->populate($checkData);
+            $this->setAttrib('data-icinga-form-modified', 'true');
             return false;
         }
     }

public/js/icinga/componentLoader.js

@@ -24,14 +24,7 @@ define(['jquery', 'logging', 'icinga/componentRegistry'], function ($, log, regi
             requirejs(
                 ['modules/' + cmpType],
                 function (Cmp) {
-                    var cmp;
+                    var cmp = new Cmp(target);
-                    try {
-                        cmp = new Cmp(target);
-                    } catch (e) {
-                        log.emergency(e);
-                        err(e);
-                        return;
-                    }
                     if (fin) {
                         fin(cmp);
                     }
@@ -77,7 +70,7 @@ define(['jquery', 'logging', 'icinga/componentRegistry'], function ($, log, regi
 
             registry.markAllInactive();
 
-            $('div[data-icinga-component]')
+            $('[data-icinga-component]')
                 .each(function(index, el) {
                     var type = $(el).attr('data-icinga-component');
                     pendingFns++;

public/js/icinga/components/configForm.js

@@ -0,0 +1,50 @@
+// {{{ICINGA_LICENSE_HEADER}}}
+// {{{ICINGA_LICENSE_HEADER}}}
+
+define(['jquery'], function($) {
+    "use strict";
+
+    var ATTR_MODIFIED = 'data-icinga-form-modified';
+
+    var isAutoSubmitInput = function(el) {
+        return $(el).attr('data-icinga-autosubmit') == 'true';
+    }
+
+    var getFormObject = function(targetForm) {
+        var form = $(targetForm);
+
+        form.isModified = function() {
+            return form.attr(ATTR_MODIFIED) == 'true';
+        }
+        form.setModificationFlag = function() {
+            form.attr(ATTR_MODIFIED, true);
+        }
+        form.clearModificationFlag = function() {
+            form.attr(ATTR_MODIFIED, false);
+        }
+        return form;
+    }
+
+    var registerChangeDetection = function(form) {
+        form.change(function(changed) {
+            if (isAutoSubmitInput(changed.target)) {
+                form.clearModificationFlag();
+                form.submit();
+            } else {
+                form.setModificationFlag();
+            }
+        });
+
+        form.submit(form.clearModificationFlag);
+        window.addEventListener('beforeunload', function() {
+            if (form.isModified()) {
+                return 'All unsaved changes will be lost when leaving this page';
+            }
+        })
+    }
+
+    return function(targetForm) {
+        var form = getFormObject(targetForm);
+        registerChangeDetection(form);
+    }
+});