From 45f31593e41be0ac11e4495b2642b092868a4cea Mon Sep 17 00:00:00 2001 From: HarshKhandeparkar Date: Wed, 14 Nov 2018 23:31:34 +0530 Subject: [PATCH 1/8] GCI task commit --- examples/lib/defaultHtmlStepUi.js | 78 +++++++++++++++++++++++-------- 1 file changed, 59 insertions(+), 19 deletions(-) diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js index d27dd32f5e..e88959320f 100644 --- a/examples/lib/defaultHtmlStepUi.js +++ b/examples/lib/defaultHtmlStepUi.js @@ -6,27 +6,59 @@ // onRemove : Called everytime a step is removed // The variable 'step' stores useful data like input and // output values, step information. -// See documetation for more details. +// See documetation for more details.\ + +function stepRemovedNotify (){ + if ($('#stepRemovedNotification').length == 0){ + var notificationStyle = '\ + background-color: #808b96;\ + padding:4px;\ + color:white;\ + border-radius:3px;\ + font-size:2rem;\ + position:fixed;\ + bottom:8px;\ + left:45%;\ + min-width:14rem;\ + text-align:center;\ + display:none;\ + '; + + var notification = document.createElement('span'); + notification.innerHTML = ' Step Removed '; + notification.style = notificationStyle; + notification.id = 'stepRemovedNotification'; + + $('body').append(notification); + } + + var DOMNotification = $('#stepRemovedNotification'); + + DOMNotification.fadeIn(500).delay(200).fadeOut(500); +} + function DefaultHtmlStepUi(_sequencer, options) { options = options || {}; var stepsEl = options.stepsEl || document.querySelector("#steps"); var selectStepSel = options.selectStepSel = options.selectStepSel || "#selectStep"; + function onSetup(step) { + if (step.options && step.options.description) - step.description = step.options.description; + step.description = step.options.description; step.ui = - '\ + '\
\
\

' + - step.name + - "

\ + step.name + + "\

" + - (step.description || "") + - '

\ + (step.description || "") + + '

\
\
\ \ @@ -36,12 +68,13 @@ function DefaultHtmlStepUi(_sequencer, options) { '; var tools = - '
\ - \
'; + var parser = new DOMParser(); step.ui = parser.parseFromString(step.ui, "text/html"); step.ui = step.ui.querySelector("div.row"); @@ -76,7 +109,7 @@ function DefaultHtmlStepUi(_sequencer, options) { paramVal + '" placeholder ="' + (inputDesc.placeholder || ""); - + if(inputDesc.type.toLowerCase() == "range") { html+= @@ -144,18 +177,24 @@ function DefaultHtmlStepUi(_sequencer, options) { parser.parseFromString(tools, "text/html").querySelector("div") ); - stepsEl.appendChild(step.ui); - - var inputs = document.querySelectorAll('input[type="range"]') - for(i in inputs) - inputs[i].oninput = function(e) { - e.target.nextSibling.innerHTML = e.target.value; - } + stepsEl.appendChild(step.ui); + + + 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) { + function onDraw(step) { $(step.ui.querySelector(".load")).show(); $(step.ui.querySelector("img")).hide(); + + if(step.name != "load-image"){ + + } + } function onComplete(step) { @@ -209,6 +248,7 @@ function DefaultHtmlStepUi(_sequencer, options) { return step.imgElement; } + return { getPreview: getPreview, onSetup: onSetup, @@ -216,4 +256,4 @@ function DefaultHtmlStepUi(_sequencer, options) { onRemove: onRemove, onDraw: onDraw } -} +} \ No newline at end of file From a17193aff655ebc3b868eac209e0b9178475c97a Mon Sep 17 00:00:00 2001 From: HarshKhandeparkar Date: Wed, 14 Nov 2018 23:36:40 +0530 Subject: [PATCH 2/8] GCI task commit --- examples/lib/defaultHtmlStepUi.js | 104 +++++++++++++++--------------- 1 file changed, 52 insertions(+), 52 deletions(-) diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js index e88959320f..37dcc6408c 100644 --- a/examples/lib/defaultHtmlStepUi.js +++ b/examples/lib/defaultHtmlStepUi.js @@ -8,9 +8,9 @@ // output values, step information. // See documetation for more details.\ -function stepRemovedNotify (){ - if ($('#stepRemovedNotification').length == 0){ - var notificationStyle = '\ +function stepRemovedNotify() { + if ($('#stepRemovedNotification').length == 0) { + var notificationStyle = '\ background-color: #808b96;\ padding:4px;\ color:white;\ @@ -24,12 +24,12 @@ function stepRemovedNotify (){ display:none;\ '; - var notification = document.createElement('span'); - notification.innerHTML = ' Step Removed '; - notification.style = notificationStyle; - notification.id = 'stepRemovedNotification'; + var notification = document.createElement('span'); + notification.innerHTML = ' Step Removed '; + notification.style = notificationStyle; + notification.id = 'stepRemovedNotification'; - $('body').append(notification); + $('body').append(notification); } var DOMNotification = $('#stepRemovedNotification'); @@ -47,18 +47,18 @@ function DefaultHtmlStepUi(_sequencer, options) { function onSetup(step) { if (step.options && step.options.description) - step.description = step.options.description; + step.description = step.options.description; step.ui = - '\ + '\
\
\

' + - step.name + - "

\ + step.name + + "\

" + - (step.description || "") + - '

\ + (step.description || "") + + '

\
\
\ \ @@ -68,7 +68,7 @@ function DefaultHtmlStepUi(_sequencer, options) { '; var tools = - '
\ + '
\ \ @@ -99,7 +99,7 @@ function DefaultHtmlStepUi(_sequencer, options) { } html += ""; } else { - let paramVal = step.options[paramName] || inputDesc.default; + let paramVal = step.options[paramName] || inputDesc.default; html = ''+''+paramVal+''; + inputDesc.step + '">' + '' + paramVal + ''; - } - else html+= '">'; + } else html += '">'; } var div = document.createElement("div"); @@ -142,8 +140,8 @@ 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); } $(step.ui.querySelectorAll(".target")).focus(toggleSaveButton); @@ -155,15 +153,17 @@ function DefaultHtmlStepUi(_sequencer, options) { function saveOptions() { $(step.ui.querySelector("div.details")) .find("input,select") - .each(function(i, input) { + .each(function (i, input) { step.options[$(input).attr("name")] = input.value; }); - _sequencer.run({ index: step.index - 1 }); + _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); + $(step.ui.querySelector("div.details .btn-save")).prop("disabled", true); } // on clicking Save in the details pane of the step @@ -172,26 +172,26 @@ function DefaultHtmlStepUi(_sequencer, options) { if (step.name != "load-image") step.ui - .querySelector("div.details") - .appendChild( - parser.parseFromString(tools, "text/html").querySelector("div") - ); + .querySelector("div.details") + .appendChild( + parser.parseFromString(tools, "text/html").querySelector("div") + ); - stepsEl.appendChild(step.ui); + stepsEl.appendChild(step.ui); - var inputs = document.querySelectorAll('input[type="range"]') - for(i in inputs) - inputs[i].oninput = function(e) { - e.target.nextSibling.innerHTML = e.target.value; - } + 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) { + function onDraw(step) { $(step.ui.querySelector(".load")).show(); $(step.ui.querySelector("img")).hide(); - if(step.name != "load-image"){ + if (step.name != "load-image") { } @@ -203,8 +203,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; } @@ -213,7 +213,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"; } @@ -224,18 +224,18 @@ 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) step.ui.querySelector('div[name="' + i + '"] input').value = - step[i]; + step[i]; } } } From a713351a921e36971cc419c9e6738387d100cc7f Mon Sep 17 00:00:00 2001 From: HarshKhandeparkar Date: Sun, 18 Nov 2018 21:14:47 +0530 Subject: [PATCH 3/8] Cleaned up the code --- examples/lib/defaultHtmlStepUi.js | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js index 37dcc6408c..2514390a20 100644 --- a/examples/lib/defaultHtmlStepUi.js +++ b/examples/lib/defaultHtmlStepUi.js @@ -6,7 +6,7 @@ // onRemove : Called everytime a step is removed // The variable 'step' stores useful data like input and // output values, step information. -// See documetation for more details.\ +// See documetation for more details. function stepRemovedNotify() { if ($('#stepRemovedNotification').length == 0) { @@ -38,14 +38,11 @@ function stepRemovedNotify() { } function DefaultHtmlStepUi(_sequencer, options) { - options = options || {}; var stepsEl = options.stepsEl || document.querySelector("#steps"); var selectStepSel = options.selectStepSel = options.selectStepSel || "#selectStep"; - function onSetup(step) { - if (step.options && step.options.description) step.description = step.options.description; @@ -74,7 +71,6 @@ function DefaultHtmlStepUi(_sequencer, options) { \
'; - var parser = new DOMParser(); step.ui = parser.parseFromString(step.ui, "text/html"); step.ui = step.ui.querySelector("div.row"); @@ -179,7 +175,6 @@ function DefaultHtmlStepUi(_sequencer, options) { stepsEl.appendChild(step.ui); - var inputs = document.querySelectorAll('input[type="range"]') for (i in inputs) inputs[i].oninput = function (e) { @@ -191,10 +186,6 @@ function DefaultHtmlStepUi(_sequencer, options) { $(step.ui.querySelector(".load")).show(); $(step.ui.querySelector("img")).hide(); - if (step.name != "load-image") { - - } - } function onComplete(step) { @@ -248,7 +239,6 @@ function DefaultHtmlStepUi(_sequencer, options) { return step.imgElement; } - return { getPreview: getPreview, onSetup: onSetup, From 5140c0b72997edf0b051b68a32d95ee4e00a7b29 Mon Sep 17 00:00:00 2001 From: HarshKhandeparkar Date: Sun, 18 Nov 2018 21:18:17 +0530 Subject: [PATCH 4/8] Added the css to demo.css file --- examples/demo.css | 14 ++++++++++++++ examples/lib/defaultHtmlStepUi.js | 14 -------------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/examples/demo.css b/examples/demo.css index cdca6e3cfc..1f1596e152 100644 --- a/examples/demo.css +++ b/examples/demo.css @@ -158,3 +158,17 @@ h1 { opacity:0.5; color:#BABABA; } + +#stepRemovedNotification{ + background-color: #808b96; + padding:4px; + color:white; + border-radius:3px; + font-size:2rem; + position:fixed; + bottom:8px; + left:45%; + min-width:14rem; + text-align:center; + display:none; +} diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js index 2514390a20..9bd752fe55 100644 --- a/examples/lib/defaultHtmlStepUi.js +++ b/examples/lib/defaultHtmlStepUi.js @@ -10,23 +10,9 @@ function stepRemovedNotify() { if ($('#stepRemovedNotification').length == 0) { - var notificationStyle = '\ - background-color: #808b96;\ - padding:4px;\ - color:white;\ - border-radius:3px;\ - font-size:2rem;\ - position:fixed;\ - bottom:8px;\ - left:45%;\ - min-width:14rem;\ - text-align:center;\ - display:none;\ - '; var notification = document.createElement('span'); notification.innerHTML = ' Step Removed '; - notification.style = notificationStyle; notification.id = 'stepRemovedNotification'; $('body').append(notification); From b6ec90f4f63546efc96a83d4d1d22fa66f3a9999 Mon Sep 17 00:00:00 2001 From: HarshKhandeparkar Date: Sun, 18 Nov 2018 21:34:30 +0530 Subject: [PATCH 5/8] Final cleanup and shortened code --- examples/lib/defaultHtmlStepUi.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js index 9bd752fe55..ed8929e27b 100644 --- a/examples/lib/defaultHtmlStepUi.js +++ b/examples/lib/defaultHtmlStepUi.js @@ -7,10 +7,8 @@ // The variable 'step' stores useful data like input and // output values, step information. // See documetation for more details. - function stepRemovedNotify() { if ($('#stepRemovedNotification').length == 0) { - var notification = document.createElement('span'); notification.innerHTML = ' Step Removed '; notification.id = 'stepRemovedNotification'; @@ -18,9 +16,7 @@ function stepRemovedNotify() { $('body').append(notification); } - var DOMNotification = $('#stepRemovedNotification'); - - DOMNotification.fadeIn(500).delay(200).fadeOut(500); + $('#stepRemovedNotification').DOMNotification.fadeIn(500).delay(200).fadeOut(500); } function DefaultHtmlStepUi(_sequencer, options) { @@ -171,7 +167,6 @@ function DefaultHtmlStepUi(_sequencer, options) { function onDraw(step) { $(step.ui.querySelector(".load")).show(); $(step.ui.querySelector("img")).hide(); - } function onComplete(step) { From 015bb951e68d21638053fb74d010c8db1c5b0680 Mon Sep 17 00:00:00 2001 From: HarshKhandeparkar Date: Sun, 18 Nov 2018 22:14:06 +0530 Subject: [PATCH 6/8] Code compacting --- examples/lib/defaultHtmlStepUi.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js index ed8929e27b..4cc50e9386 100644 --- a/examples/lib/defaultHtmlStepUi.js +++ b/examples/lib/defaultHtmlStepUi.js @@ -25,7 +25,7 @@ function DefaultHtmlStepUi(_sequencer, options) { var selectStepSel = options.selectStepSel = options.selectStepSel || "#selectStep"; function onSetup(step) { - if (step.options && step.options.description) + if(step.options && step.options.description) step.description = step.options.description; step.ui = @@ -90,12 +90,12 @@ function DefaultHtmlStepUi(_sequencer, options) { if (inputDesc.type.toLowerCase() == "range") { html += - '"min="' + + '"min="'+ inputDesc.min + - '"max="' + + '"max="'+ inputDesc.max + '"step="' + - inputDesc.step + '">' + '' + paramVal + ''; + inputDesc.step + '">'+''+paramVal+''; } else html += '">'; } @@ -118,7 +118,7 @@ function DefaultHtmlStepUi(_sequencer, options) { step.ui.querySelector("div.details").appendChild(div); } - function toggleSaveButton() { + function toggleSaveButton(){ $(step.ui.querySelector("div.details .btn-save")).prop("disabled", false); } @@ -131,7 +131,7 @@ function DefaultHtmlStepUi(_sequencer, options) { function saveOptions() { $(step.ui.querySelector("div.details")) .find("input,select") - .each(function (i, input) { + .each(function(i, input) { step.options[$(input).attr("name")] = input.value; }); _sequencer.run({ @@ -158,10 +158,10 @@ function DefaultHtmlStepUi(_sequencer, options) { stepsEl.appendChild(step.ui); var inputs = document.querySelectorAll('input[type="range"]') - for (i in inputs) - inputs[i].oninput = function (e) { - e.target.nextSibling.innerHTML = e.target.value; - } + for(i in inputs) + inputs[i].oninput = function(e) { + e.target.nextSibling.innerHTML = e.target.value; + } } function onDraw(step) { @@ -175,10 +175,10 @@ 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; - } +} // TODO: use a generalized version of this function fileExtension(output) { From 0909353b17fbc8abde11ba2697786389d061ee7b Mon Sep 17 00:00:00 2001 From: HarshKhandeparkar Date: Sun, 18 Nov 2018 22:24:36 +0530 Subject: [PATCH 7/8] All beautify changes reverted --- examples/lib/defaultHtmlStepUi.js | 46 +++++++++++++++---------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js index 4cc50e9386..48c5f57f86 100644 --- a/examples/lib/defaultHtmlStepUi.js +++ b/examples/lib/defaultHtmlStepUi.js @@ -25,7 +25,7 @@ function DefaultHtmlStepUi(_sequencer, options) { var selectStepSel = options.selectStepSel = options.selectStepSel || "#selectStep"; function onSetup(step) { - if(step.options && step.options.description) + if (step.options && step.options.description) step.description = step.options.description; step.ui = @@ -77,7 +77,7 @@ function DefaultHtmlStepUi(_sequencer, options) { } html += ""; } else { - let paramVal = step.options[paramName] || inputDesc.default; + let paramVal = step.options[paramName] || inputDesc.default; html = ''+''+paramVal+''; - } else html += '">'; + } + else html += '">'; } var div = document.createElement("div"); @@ -119,7 +121,7 @@ function DefaultHtmlStepUi(_sequencer, options) { } function toggleSaveButton(){ - $(step.ui.querySelector("div.details .btn-save")).prop("disabled", false); + $(step.ui.querySelector("div.details .btn-save")).prop("disabled",false); } $(step.ui.querySelectorAll(".target")).focus(toggleSaveButton); @@ -134,14 +136,12 @@ function DefaultHtmlStepUi(_sequencer, options) { .each(function(i, input) { step.options[$(input).attr("name")] = input.value; }); - _sequencer.run({ - index: step.index - 1 - }); + _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); + $(step.ui.querySelector("div.details .btn-save")).prop("disabled",true); } // on clicking Save in the details pane of the step @@ -150,10 +150,10 @@ function DefaultHtmlStepUi(_sequencer, options) { if (step.name != "load-image") step.ui - .querySelector("div.details") - .appendChild( - parser.parseFromString(tools, "text/html").querySelector("div") - ); + .querySelector("div.details") + .appendChild( + parser.parseFromString(tools, "text/html").querySelector("div") + ); stepsEl.appendChild(step.ui); @@ -178,14 +178,14 @@ function DefaultHtmlStepUi(_sequencer, options) { for(let index=0; index < step.linkElements.length; index++) { if(step.linkElements[index].contains(imgthumbnail)) step.linkElements[index].href = step.output; -} + } // TODO: use a generalized version of this function fileExtension(output) { 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"; } @@ -196,18 +196,18 @@ 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) step.ui.querySelector('div[name="' + i + '"] input').value = - step[i]; + step[i]; } } } From 17f2e6cb272ab2ad54c0af917a27366f0ba1f50e Mon Sep 17 00:00:00 2001 From: HarshKhandeparkar Date: Sun, 18 Nov 2018 22:39:00 +0530 Subject: [PATCH 8/8] Spacing corrected --- examples/lib/defaultHtmlStepUi.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js index 48c5f57f86..d337768bc1 100644 --- a/examples/lib/defaultHtmlStepUi.js +++ b/examples/lib/defaultHtmlStepUi.js @@ -18,8 +18,8 @@ function stepRemovedNotify() { $('#stepRemovedNotification').DOMNotification.fadeIn(500).delay(200).fadeOut(500); } - function DefaultHtmlStepUi(_sequencer, options) { + options = options || {}; var stepsEl = options.stepsEl || document.querySelector("#steps"); var selectStepSel = options.selectStepSel = options.selectStepSel || "#selectStep"; @@ -48,7 +48,7 @@ function DefaultHtmlStepUi(_sequencer, options) { var tools = '
\ - \
'; @@ -77,7 +77,7 @@ function DefaultHtmlStepUi(_sequencer, options) { } html += ""; } else { - let paramVal = step.options[paramName] || inputDesc.default; + let paramVal = step.options[paramName] || inputDesc.default; html = ''+''+paramVal+''; - } - else html += '">'; + } + else html+= '">'; } var div = document.createElement("div"); @@ -136,7 +136,7 @@ function DefaultHtmlStepUi(_sequencer, options) { .each(function(i, input) { step.options[$(input).attr("name")] = input.value; }); - _sequencer.run({index: step.index - 1}); + _sequencer.run({ index: step.index - 1 }); // modify the url hash setUrlHashParameter("steps", _sequencer.toString()); @@ -156,7 +156,7 @@ function DefaultHtmlStepUi(_sequencer, options) { ); stepsEl.appendChild(step.ui); - + var inputs = document.querySelectorAll('input[type="range"]') for(i in inputs) inputs[i].oninput = function(e) {