Fixed Save Button (#562)

* update dist

Signed-off-by: tech4GT <varun.gupta1798@gmail.com>

dist update

Revert "dist update"

This reverts commit 9ee2a987e8f978961656ae8f71f6e6702bbbd30d.

* fix save button

* cleanup

* fix update initValue

* fix select type inputs

* fix integer type values

* fix integer type values

* cleanup

* changes and cleanup

* changes

* changes

* better solution

cleanup

* change detection finalized

* Fix <form> placement

* fix form ending

* changes

* cleanup

* fix merge conflicts

* better event listener

* cleanup

* cleanup

* Changes

* cleanup

examples/lib/defaultHtmlStepUi.js

@@ -31,6 +31,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
       '\
       <div class="container">\
     <div class="row step">\
+    <form class="input-form">\
     <div class="col-md-4 details">\
     <h3>' +
       step.name +
@@ -39,6 +40,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
       (step.description || "") +
       '</i></p>\
     </div>\
+    </form>\
     <div class="col-md-8">\
     <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>\
     <a><img alt="" style="max-width=100%" class="img-thumbnail step-thumbnail"/></a>\
@@ -113,7 +115,6 @@ function DefaultHtmlStepUi(_sequencer, options) {
         var description = inputs[paramName].desc || paramName;
         div.innerHTML =
           "<div class='det'>\
-          <form class='input-form'>\
                            <label for='" +
           paramName +
           "'>" +
@@ -122,44 +123,15 @@ function DefaultHtmlStepUi(_sequencer, options) {
                            " +
           html +
           "\
-          </form>\
                          </div>";
         step.ui.querySelector("div.details").appendChild(div);
       }
 
-      function toggleSaveButton() {
-        $(step.ui.querySelector("div.details .btn-save")).prop("disabled", false);
-        focusInput();
-      }
-
-      $(step.ui.querySelectorAll(".target")).on('change', toggleSaveButton);
-
       $(step.ui.querySelector("div.details")).append(
-        "<p><button class='btn btn-default btn-save' disabled = 'true' >Apply</button><span> Press apply to see changes</span></p>"
+        "<p><button type='submit' class='btn btn-default btn-save' disabled = 'true' >Apply</button><span> Press apply to see changes</span></p>"
       );
 
-      function focusInput() {
-        $(step.ui.querySelector("div.details .target")).focus();
-      }
       
-      function saveOptions(e) {
-        e.preventDefault();
-        $(step.ui.querySelector("div.details"))
-          .find("input,select")
-          .each(function(i, input) {
-            step.options[$(input).attr("name")] = input.value;
-          });
-        _sequencer.run({ index: step.index - 1 });
-
-        // modify the url hash
-        setUrlHashParameter("steps", _sequencer.toString());
-        // disable the save button
-        $(step.ui.querySelector("div.details .btn-save")).prop("disabled", true);
-      }
-
-      // on clicking Save in the details pane of the step
-      $(step.ui.querySelector("div.details .btn-save")).click(saveOptions);
-      $(step.ui.querySelector("div.details .input-form")).on('submit', saveOptions);
     }
 
     if (step.name != "load-image") {
@@ -184,6 +156,63 @@ function DefaultHtmlStepUi(_sequencer, options) {
       $("#load-image").append(step.ui);
     }
 
+    
+
+    function saveOptions(e) {
+      e.preventDefault();
+      if (optionsChanged){
+        $(step.ui.querySelector("div.details"))
+          .find("input,select")
+          .each(function(i, input) {
+            $(input)
+              .data('initValue', $(input).val())
+              .data('hasChangedBefore', false);
+            step.options[$(input).attr("name")] = $(input).val();
+          });
+        _sequencer.run({ index: step.index - 1 });
+
+        // modify the url hash
+        setUrlHashParameter("steps", _sequencer.toString());
+
+        // disable the save button
+        $(step.ui.querySelector('.btn-save')).prop('disabled', true);
+        optionsChanged = false;
+        changedInputs = 0;
+      }
+    }
+
+    function handleInputValueChange(currentValue, initValue, hasChangedBefore) {
+      var inputChanged = !(isNaN(initValue) || isNaN(currentValue) ? currentValue === initValue : currentValue - initValue === 0);
+      changedInputs += hasChangedBefore ? inputChanged ? 0 : -1 : inputChanged ? 1 : 0;
+      optionsChanged = changedInputs > 0;
+
+      $(step.ui.querySelector('.btn-save')).prop('disabled', !optionsChanged);
+      return inputChanged;
+    }
+
+    var 
+      changedInputs = 0,
+      optionsChanged = false;
+    $(step.ui.querySelector('.input-form')).on('submit', saveOptions);
+    $(step.ui.querySelectorAll('.target')).each(function(i, input) {
+      $(input)
+        .data('initValue', $(input).val())
+        .data('hasChangedBefore', false)
+        .on('input', function() {
+          $(this)
+            .focus()
+            .data('hasChangedBefore',
+              handleInputValueChange(
+                $(this).val(),
+                $(this).data('initValue'),
+                $(this).data('hasChangedBefore')
+            )
+          )
+        })
+    })
+
+
+
     $('input[type="range"]').on('input', function() {
         $(this).next().html($(this).val());
     })
@@ -223,17 +252,19 @@ function DefaultHtmlStepUi(_sequencer, options) {
       for (var i in inputs) {
         if (step.options[i] !== undefined) {
           if (inputs[i].type.toLowerCase() === "input")
-            step.ui.querySelector('div[name="' + i + '"] input').value =
+            $(step.ui.querySelector('div[name="' + i + '"] input'))
-              step.options[i];
+              .val(step.options[i])
+              .data('initValue', step.options[i]);
           if (inputs[i].type.toLowerCase() === "select")
-            step.ui.querySelector('div[name="' + i + '"] select').value =
+            $(step.ui.querySelector('div[name="' + i + '"] select'))
-              step.options[i];
+              .val(step.options[i])
+              .data('initValue', step.options[i]);
         }
       }
       for (var i in outputs) {
         if (step[i] !== undefined)
-          step.ui.querySelector('div[name="' + i + '"] input').value =
+          $(step.ui.querySelector('div[name="' + i + '"] input'))
-            step[i];
+            .val(step[i]);
       }
     }
   }