eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-11 19:00:00 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fixed Save Button (#562)

Browse Source 
* 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
This commit is contained in:
HarshKhandeparkar
2019-01-08 01:46:25 +05:30
committed by Jeffrey Warren
parent c2477bc3f7
commit 4e5f8728fa
1 changed files with 69 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
examples/lib/defaultHtmlStepUi.js
View File

@@ -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.options[i];
$(step.ui.querySelector('div[name="' + i + '"] input'))
.val(step.options[i])
.data('initValue', step.options[i]);
if (inputs[i].type.toLowerCase() === "select")
step.ui.querySelector('div[name="' + i + '"] select').value =
step.options[i];
$(step.ui.querySelector('div[name="' + i + '"] select'))
.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[i];
$(step.ui.querySelector('div[name="' + i + '"] input'))
.val(step[i]);
}
}
}