From 537cc41b36d344166824ce5b0baecc813021aceb Mon Sep 17 00:00:00 2001 From: divy123 Date: Sun, 16 Dec 2018 02:16:45 +0530 Subject: [PATCH 1/3] Added insert step button at every step --- examples/index.html | 1 + examples/lib/defaultHtmlStepUi.js | 22 +++-- examples/lib/intermediateHtmlStepUi.js | 119 +++++++++++++++++++++++++ 3 files changed, 137 insertions(+), 5 deletions(-) create mode 100644 examples/lib/intermediateHtmlStepUi.js diff --git a/examples/index.html b/examples/index.html index 91989dab..c69fa962 100644 --- a/examples/index.html +++ b/examples/index.html @@ -20,6 +20,7 @@ + diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js index 4827ecdb..a90f1cb3 100644 --- a/examples/lib/defaultHtmlStepUi.js +++ b/examples/lib/defaultHtmlStepUi.js @@ -23,13 +23,13 @@ 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.ui = '\ +
\
\
\

' + @@ -44,18 +44,25 @@ function DefaultHtmlStepUi(_sequencer, options) { \

\
\ - '; +
\ + '; var tools = '
\ \ -
'; + \ + '; + var util; + setTimeout(()=>{ + util=IntermediateHtmlStepUi(_sequencer,step) + },500) + var parser = new DOMParser(); step.ui = parser.parseFromString(step.ui, "text/html"); - step.ui = step.ui.querySelector("div.row"); + step.ui = step.ui.querySelector("div.container"); step.linkElements = step.ui.querySelectorAll("a"); step.imgElement = step.ui.querySelector("a img"); @@ -158,11 +165,16 @@ function DefaultHtmlStepUi(_sequencer, options) { } if (step.name != "load-image") - step.ui + { + step.ui .querySelector("div.details") .appendChild( parser.parseFromString(tools, "text/html").querySelector("div") ); + setTimeout(()=>{ + $(step.ui.querySelectorAll(".insert-step")).on('click',()=>util.insertStep(step.ID)); + },500) + } stepsEl.appendChild(step.ui); diff --git a/examples/lib/intermediateHtmlStepUi.js b/examples/lib/intermediateHtmlStepUi.js new file mode 100644 index 00000000..7c6a50d3 --- /dev/null +++ b/examples/lib/intermediateHtmlStepUi.js @@ -0,0 +1,119 @@ +function IntermediateHtmlStepUi(_sequencer, step, options) { + function stepUI() { + return '
\ +
\ +
\ +
\ +
\ +

Select a new module to add to your sequence.

\ +
\ +
\ + \ +

Brightness

\ +
\ +
\ + \ +

Contrast

\ +
\ +
\ + \ +

Saturation

\ +
\ +
\ + \ +

Rotate

\ +
\ +
\ + \ +

Crop

\ +
\ +
\ +
\ + \ + \ +
\ +
\ +
\ +
\ +
'; + } + function selectNewStepUi() { + var m = $("#insertStep select").val(); + $("#insertStep .info").html(_sequencer.modulesInfo(m).description); + $("#insertStep #add-step-btn").prop("disabled", false); + } + insertStep = function (id) { + var modulesInfo = _sequencer.modulesInfo(); + var parser = new DOMParser(); + var addStepUI = stepUI(); + addStepUI = parser.parseFromString(addStepUI, "text/html").querySelector("div") + step.ui + .querySelector("div.step") + .insertAdjacentElement('afterend', + addStepUI + ); + var insertStepSelect = $("#insertStep select"); + insertStepSelect.html(""); + // Add modules to the insertStep dropdown + for (var m in modulesInfo) { + if (modulesInfo[m] !== undefined) + insertStepSelect.append( + '" + ); + } + + $('#insertStep #add-step-btn').prop('disabled', true); + + insertStepSelect.append(''); + $('#insertStep .radio-group .radio').on("click", function () { + $(this).parent().find('.radio').removeClass('selected'); + $(this).addClass('selected'); + newStep = $(this).attr('data-value'); + insertStepSelect.val(newStep); + selectNewStepUi(); + doIt(id); + $(this).removeClass('selected'); + }); + $(step.ui.querySelector("#insertStep select")).on('change', selectNewStepUi); + $(step.ui.querySelector("#insertStep #add-step-btn")).on('click', () => doIt(id)); + } + + function doIt(id) { + + options = options || {}; + var insertStepSelect = $("#insertStep select"); + if (insertStepSelect.val() == "none") return; + + var newStepName = insertStepSelect.val() + $('div .insertDiv').remove(); + var sequenceLength = 1; + if (sequencer.sequences[newStepName]) { + sequenceLength = sequencer.sequences[newStepName].length; + } else if (sequencer.modules[newStepName][1]["length"]) { + sequenceLength = sequencer.modules[newStepName][1]["length"]; + } + _sequencer + .insertSteps("image1", id + 1, newStepName) + .run({ index: 0 }); + + // add to URL hash too + setUrlHashParameter("steps", _sequencer.toString()); + location.reload(); + } + return { + insertStep + } +} \ No newline at end of file From f27b09793c02589262e8e667f1676d1aaa520bb4 Mon Sep 17 00:00:00 2001 From: divy123 Date: Sun, 16 Dec 2018 15:39:48 +0530 Subject: [PATCH 2/3] Changed arrow functions to normal functions --- examples/lib/defaultHtmlStepUi.js | 4 ++-- examples/lib/intermediateHtmlStepUi.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js index a90f1cb3..af552669 100644 --- a/examples/lib/defaultHtmlStepUi.js +++ b/examples/lib/defaultHtmlStepUi.js @@ -56,7 +56,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
'; var util; - setTimeout(()=>{ + setTimeout(function(){ util=IntermediateHtmlStepUi(_sequencer,step) },500) @@ -172,7 +172,7 @@ function DefaultHtmlStepUi(_sequencer, options) { parser.parseFromString(tools, "text/html").querySelector("div") ); setTimeout(()=>{ - $(step.ui.querySelectorAll(".insert-step")).on('click',()=>util.insertStep(step.ID)); + $(step.ui.querySelectorAll(".insert-step")).on('click',function(){util.insertStep(step.ID)}); },500) } diff --git a/examples/lib/intermediateHtmlStepUi.js b/examples/lib/intermediateHtmlStepUi.js index 7c6a50d3..4a449e07 100644 --- a/examples/lib/intermediateHtmlStepUi.js +++ b/examples/lib/intermediateHtmlStepUi.js @@ -88,7 +88,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) { $(this).removeClass('selected'); }); $(step.ui.querySelector("#insertStep select")).on('change', selectNewStepUi); - $(step.ui.querySelector("#insertStep #add-step-btn")).on('click', () => doIt(id)); + $(step.ui.querySelector("#insertStep #add-step-btn")).on('click', function(){ doIt(id)}); } function doIt(id) { From 4eb386eb470633b7a2103fb0b0184f38d06e61b2 Mon Sep 17 00:00:00 2001 From: divy123 Date: Sun, 16 Dec 2018 16:02:49 +0530 Subject: [PATCH 3/3] Added font-awesome icon and added colors to it --- examples/lib/defaultHtmlStepUi.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js index af552669..2ed0935f 100644 --- a/examples/lib/defaultHtmlStepUi.js +++ b/examples/lib/defaultHtmlStepUi.js @@ -52,7 +52,9 @@ function DefaultHtmlStepUi(_sequencer, options) { \ - \ + \ '; var util;