Added insert step button at every step

examples/index.html

@@ -20,6 +20,7 @@
   <script src="lib/urlHash.js" charset="utf-8"></script>
   <script src="lib/defaultHtmlStepUi.js" charset="utf-8"></script>
   <script src="lib/defaultHtmlSequencerUi.js" charset="utf-8"></script>
+  <script src="lib/intermediateHtmlStepUi.js" charset="utf-8"></script>
   <script src="demo.js" charset="utf-8"></script>
   <!-- for crop module: -->
   <script src="../node_modules/imgareaselect/jquery.imgareaselect.dev.js"></script>

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 =
       '\
+      <div class="container">\
     <div class="row step">\
     <div class="col-md-4 details">\
     <h3>' +
@@ -44,18 +44,25 @@ function DefaultHtmlStepUi(_sequencer, options) {
     <a><img alt="" style="max-width=100%" class="img-thumbnail" /></a>\
     </div>\
     </div>\
-    ';
+    </div>\
+    </div>';
 
     var tools =
       '<div class="tools btn-group">\
        <button confirm="Are you sure?" onclick="stepRemovedNotify()" class="remove btn btn btn-default">\
          <i class="fa fa-trash"></i>\
        </button>\
+       <button class="btn btn-success btn-lg insert-step" style="margin-left:10px;border-radius:6px" >Insert Step</button>\
        </div>';
 
+       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
         .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);
     

examples/lib/intermediateHtmlStepUi.js

@@ -0,0 +1,119 @@
+function IntermediateHtmlStepUi(_sequencer, step, options) {
+  function stepUI() {
+    return '<div class="row insertDiv">\
+        <div class="col-md-6" style="margin-top:5%">\
+        <section id="insertStep" class="panel panel-primary">\
+          <div class="form-inline">\
+            <div class="panel-body">\
+              <p class="info">Select a new module to add to your sequence.</p>\
+              <div class="row center-align radio-group">\
+                <div>\
+                  <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="brightness">\
+                    <i class="fa fa-sun-o fa-4x"></i>\
+                  </button>\
+                  <p>Brightness</p>\
+                </div>\
+                <div>\
+                  <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="contrast">\
+                    <i class="fa fa-adjust fa-4x"></i>\
+                  </button>\
+                  <p>Contrast</p>\
+                </div>\
+                <div>\
+                  <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="saturation">\
+                    <i class="fa fa-tint fa-4x"></i>\
+                  </button>\
+                  <p>Saturation</p>\
+                </div>\
+                <div>\
+                  <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="rotate">\
+                    <i class="fa fa-rotate-right fa-4x"></i>\
+                  </button>\
+                  <p>Rotate</p>\
+                </div>\
+                <div>\
+                  <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="crop">\
+                    <i class="fa fa-crop fa-4x"></i>\
+                  </button>\
+                  <p>Crop</p>\
+                </div>\
+              </div>\
+              <div class="center-align">\
+                <select class="form-control input-lg" id="selectStep">\
+                  <!-- The default null selection has been appended manually in demo.js\
+                  This is because the options in select are overritten when options are appended.-->\
+                </select>\
+                <button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>\
+              </div>\
+            </div>\
+          </div>\
+        </section>\
+        </div>';
+  }
+  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(
+          '<option value="' + m + '">' + modulesInfo[m].name + "</option>"
+        );
+    }
+
+    $('#insertStep #add-step-btn').prop('disabled', true);
+
+    insertStepSelect.append('<option value="none" disabled selected>More modules...</option>');
+    $('#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
+  }
+}