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

fixes #544 and final changes

Browse Source 
Signed-off-by: tech4GT <varun.gupta1798@gmail.com>
This commit is contained in:
tech4GT
2018-12-16 20:01:53 +05:30
parent 3e30c0f7ed
commit 16debae154
6 changed files with 12612 additions and 12629 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
examples/lib/defaultHtmlStepUi.js
View File

@@ -23,7 +23,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
options = options || {};
var stepsEl = options.stepsEl || document.querySelector("#steps");
var selectStepSel = options.selectStepSel = options.selectStepSel || "#selectStep";
function onSetup(step) {
function onSetup(step, stepOptions) {
if (step.options && step.options.description)
step.description = step.options.description;
@@ -57,11 +57,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
</button>\
</div>';
var util;
setTimeout(function(){
util=IntermediateHtmlStepUi(_sequencer,step)
},500)
var util = IntermediateHtmlStepUi(_sequencer, step);
var parser = new DOMParser();
step.ui = parser.parseFromString(step.ui, "text/html");
step.ui = step.ui.querySelector("div.container");
@@ -86,7 +83,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
}
html += "</select>";
} else {
let paramVal = step.options[paramName] || inputDesc.default;
let paramVal = step.options[paramName] || inputDesc.default;
html =
'<input class="form-control target" type="' +
inputDesc.type +
@@ -96,19 +93,18 @@ function DefaultHtmlStepUi(_sequencer, options) {
paramVal +
'" placeholder ="' +
(inputDesc.placeholder || "");
if(inputDesc.type.toLowerCase() == "range")
{
html+=
'"min="'+
if (inputDesc.type.toLowerCase() == "range") {
html +=
'"min="' +
inputDesc.min +
'"max="'+
'"max="' +
inputDesc.max +
'"step="' +
inputDesc.step + '">'+'<span>'+paramVal+'</span>';
inputDesc.step + '">' + '<span>' + paramVal + '</span>';
}
else html+= '">';
}
else html += '">';
}
var div = document.createElement("div");
@@ -131,18 +127,18 @@ function DefaultHtmlStepUi(_sequencer, options) {
step.ui.querySelector("div.details").appendChild(div);
}
function toggleSaveButton(){
$(step.ui.querySelector("div.details .btn-save")).prop("disabled",false);
function toggleSaveButton() {
$(step.ui.querySelector("div.details .btn-save")).prop("disabled", false);
focusInput();
}
$(step.ui.querySelectorAll(".target")).on('change',toggleSaveButton);
$(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>"
);
function focusInput(){
function focusInput() {
$(step.ui.querySelector("div.details .target")).focus();
}
@@ -158,7 +154,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
// modify the url hash
setUrlHashParameter("steps", _sequencer.toString());
// disable the save button
$(step.ui.querySelector("div.details .btn-save")).prop("disabled",true);
$(step.ui.querySelector("div.details .btn-save")).prop("disabled", true);
}
// on clicking Save in the details pane of the step
@@ -166,29 +162,31 @@ function DefaultHtmlStepUi(_sequencer, options) {
$(step.ui.querySelector("div.details .input-form")).on('submit', saveOptions);
}
if (step.name != "load-image"){
if (step.name != "load-image") {
step.ui
.querySelector("div.details")
.appendChild(
parser.parseFromString(tools, "text/html").querySelector("div")
);
setTimeout(()=>{
$(step.ui.querySelectorAll(".insert-step")).on('click',function(){util.insertStep(step.ID)});
},500)
}
$(step.ui.querySelectorAll(".insert-step")).on('click', function() { util.insertStep(step.ID) });
stepsEl.appendChild(step.ui);
// Insert the step's UI in the right place
if (stepOptions.index == _sequencer.images.image1.steps.length) {
stepsEl.appendChild(step.ui);
} else {
stepsEl.insertBefore(step.ui, $(stepsEl).children()[stepOptions.index]);
}
}
else {
$("#load-image").append(step.ui);
}
var inputs = document.querySelectorAll('input[type="range"]')
for(i in inputs)
}
var inputs = document.querySelectorAll('input[type="range"]')
for (i in inputs)
inputs[i].oninput = function(e) {
e.target.nextSibling.innerHTML = e.target.value;
}
}
function onDraw(step) {
$(step.ui.querySelector(".load")).show();
@@ -201,8 +199,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
step.imgElement.src = step.output;
var imgthumbnail = step.ui.querySelector(".img-thumbnail");
for(let index=0; index < step.linkElements.length; index++) {
if(step.linkElements[index].contains(imgthumbnail))
for (let index = 0; index < step.linkElements.length; index++) {
if (step.linkElements[index].contains(imgthumbnail))
step.linkElements[index].href = step.output;
}
@@ -211,7 +209,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
return output.split("/")[1].split(";")[0];
}
for(let index=0; index < step.linkElements.length; index++) {
for (let index = 0; index < step.linkElements.length; index++) {
step.linkElements[index].download = step.name + "." + fileExtension(step.output);
step.linkElements[index].target = "_blank";
}
@@ -222,13 +220,13 @@ function DefaultHtmlStepUi(_sequencer, options) {
var outputs = _sequencer.modulesInfo(step.name).outputs;
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];
if (inputs[i].type.toLowerCase() === "select")
step.ui.querySelector('div[name="' + i + '"] select').value =
step.options[i];
}
if (inputs[i].type.toLowerCase() === "input")
step.ui.querySelector('div[name="' + i + '"] input').value =
step.options[i];
if (inputs[i].type.toLowerCase() === "select")
step.ui.querySelector('div[name="' + i + '"] select').value =
step.options[i];
}
}
for (var i in outputs) {
if (step[i] !== undefined)
@@ -253,4 +251,4 @@ function DefaultHtmlStepUi(_sequencer, options) {
onRemove: onRemove,
onDraw: onDraw
}
}
}