Fix insert step and allow "closing" it (#655)

* update dist Signed-off-by: tech4GT <varun.gupta1798@gmail.com> dist update Revert "dist update" This reverts commit 9ee2a987e8f978961656ae8f71f6e6702bbbd30d. * fix insert step button * add icon * add dist * use normal functions * use normal functions * no lag * changes * changes * changes * Update intermediateHtmlStepUi.js * toggleDiv global - Globalised toggleDiv - toggleDiv has default callback which does nothing.
2025-12-10 10:20:00 +01:00 · 2019-04-06 00:38:42 +05:30
parent b95728f95c
commit 2a0eff41f4
6 changed files with 123 additions and 90 deletions
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -252,6 +252,15 @@ a.name-header{
 .trash-container button.btn-xs {
  margin-top: -5px !important;
 }
+
+.toggleIcon {
+  transition: transform 0.2s;
+}
+
+.rotated {
+  transform: rotate(180deg);
+}
+
 #gif{
  margin-left:0px;
  margin-top:5px;
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -197,8 +197,8 @@ window.onload = function() {
        step.options.step.imgElement.src = reader.result;
      else
        step.imgElement.src = reader.result;
-      insertPreview.updatePreviews(reader.result,'addStep');
-      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'insertStep');
+      insertPreview.updatePreviews(reader.result,'#addStep');
+      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv');
    },
    onTakePhoto: function (url) {
      var step = sequencer.steps[0];
@@ -208,16 +208,16 @@ window.onload = function() {
        step.options.step.imgElement.src = url;
      else
        step.imgElement.src = url;
-      insertPreview.updatePreviews(url,'addStep');
-      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'insertStep');
+      insertPreview.updatePreviews(url,'#addStep');
+      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv');
    }
  });

  setupCache();

  if (urlHash.getUrlHashParameter('src')) {
-    insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'),'addStep');
+    insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'),'#addStep');
  } else {
-    insertPreview.updatePreviews("images/tulips.png",'addStep');
+    insertPreview.updatePreviews("images/tulips.png",'#addStep');
  }
 };
--- a/examples/lib/defaultHtmlStepUi.js
+++ b/examples/lib/defaultHtmlStepUi.js
@@ -31,7 +31,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
            <div class="panel-heading">\
              <div class="trash-container pull-right"></div>\
              <h3 class="panel-title">' +  
-                '<span class="toggle">' +step.name + ' <span class="caret"></span>\
+                '<span class="toggle">' +step.name + ' <span class="caret toggleIcon rotated"></span>\
                 <span class="load-spin pull-right" style="display:none;padding:1px 8px;"><i class="fa fa-circle-o-notch fa-spin"></i></span>\
              </h3>\
            </div>\
@@ -134,8 +134,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
      );
      $(step.ui.querySelector("div.panel-footer")).prepend(
        '<button class="pull-right btn btn-default btn-sm insert-step" >\
-      <i class="fa fa-plus"></i> Insert Step\
-      </button>'
+          <span class="insert-text"><i class="fa fa-plus"></i> Insert Step</span><span class="no-insert-text" style="display:none">Close</span>\
+        </button>'
      );  
    }

@@ -161,7 +161,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
      $("#load-image").append(step.ui);
    }
    $(step.ui.querySelector(".toggle")).on("click", () => {
-      $(step.ui.querySelector('.toggleIcon')).toggleClass('fa-caret-up').toggleClass('fa-caret-down');
+      $(step.ui.querySelector('.toggleIcon')).toggleClass('rotated');
       $(step.ui.querySelectorAll(".cal")).collapse('toggle');
    });
    
--- a/examples/lib/insertPreview.js
+++ b/examples/lib/insertPreview.js
@@ -8,7 +8,7 @@ function generatePreview(previewStepName, customValues, path, selector) {
      img.src = src;
      $(img).css("max-width", "200%");
      $(img).css("transform", "translateX(-20%)");
-      var stepDiv = $('#'+selector+' .row').find('div').each(function() {
+      $(selector + ' .radio-group').find('div').each(function() {
        if ($(this).find('div').attr('data-value') === previewStepName) {
          $(this).find('div').append(img);
        }
@@ -27,7 +27,7 @@ function generatePreview(previewStepName, customValues, path, selector) {
  }

  function updatePreviews(src, selector) {
-    $('#'+selector+' img').remove();
+    $(selector+' img').remove();

    var previewSequencerSteps = {
      "resize": "125%",
--- a/examples/lib/intermediateHtmlStepUi.js
+++ b/examples/lib/intermediateHtmlStepUi.js
@@ -3,85 +3,109 @@ var urlHash = require('./urlHash.js'),

 function IntermediateHtmlStepUi(_sequencer, step, options) {
  function stepUI() {
-    return '<div class="row insertDiv">\
-        <div class="col-md-6 col-md-offset-2" 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>\
-              <div class="radio" data-value="resize">\
-              <i class="fa fa-arrows-alt fa-4x i-over"></i>\
-            </div>\
-                <p>Resize</p>\
+    return '<div class="row insertDiv collapse">\
+          <section class="panel panel-primary .insert-step">\
+            <button class="btn btn-default close-insert-box"><i class="fa fa-times" aria-hidden="true"></i> Close</button>\
+            <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>\
+                    <div class="radio" data-value="resize">\
+                      <i class="fa fa-arrows-alt fa-4x i-over"></i>\
+                    </div>\
+                    <p>Resize</p>\
+                  </div>\
+                  <div>\
+                    <div class="radio" data-value="brightness">\
+                      <i class="fa fa-sun-o fa-4x i-over"></i>\
+                    </div>\
+                    <p>Brightness</p>\
+                  </div>\
+                  <div>\
+                    <div class="radio" data-value="contrast">\
+                      <i class="fa fa-adjust fa-4x i-over"></i>\
+                    </div>\
+                    <p>Contrast</p>\
+                  </div>\
+                  <div>\
+                    <div class="radio" data-value="saturation">\
+                      <i class="fa fa-tint fa-4x i-over i-small"></i>\
+                    </div>\
+                    <p>Saturation</p>\
+                  </div>\
+                  <div>\
+                    <div class="radio" data-value="rotate">\
+                      <i class="fa fa-rotate-right fa-4x i-over"></i>\
+                    </div>\
+                    <p>Rotate</p>\
+                  </div>\
+                  <div>\
+                    <div class="radio" data-value="crop">\
+                      <i class="fa fa-crop fa-4x i-over"></i>\
+                    </div>\
+                    <p>Crop</p>\
+                  </div>\
                </div>\
-                <div>\
-                <div class="radio" data-value="brightness">\
-                <i class="fa fa-sun-o fa-4x i-over"></i>\
-              </div>\
-                  <p>Brightness</p>\
+                <div class="row center-align">\
+                  <div class="col-md-8">\
+                    <select class="insert-step-select">\
+                      <!-- 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>\
+                  <div>\
+                  <div class="col-md-4">\
+                    <button class="btn btn-success btn-lg insert-save-btn add-step-btn" name="add">Add Step</button>\
+                  <div>\
                </div>\
-                <div>\
-                <div class="radio" data-value="contrast">\
-                <i class="fa fa-adjust fa-4x i-over"></i>\
-              </div>\
-                  <p>Contrast</p>\
-                </div>\
-                <div>\
-                <div class="radio" data-value="saturation">\
-                <i class="fa fa-tint fa-4x i-over i-small"></i>\
-              </div>\
-                  <p>Saturation</p>\
-                </div>\
-                <div>\
-                <div class="radio" data-value="rotate">\
-                <i class="fa fa-rotate-right fa-4x i-over"></i>\
-              </div>\
-                  <p>Rotate</p>\
-                </div>\
-                <div>\
-                <div class="radio" data-value="crop">\
-                <i class="fa fa-crop fa-4x i-over"></i>\
-              </div>\
-                  <p>Crop</p>\
-                </div>\
-              </div>\
-              <div class="row center-align">\
-                <div class="col-md-8">\
-                <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>\
-                <div>\
-                <div class="col-md-4">\
-                <button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>\
-                <div>\
              </div>\
            </div>\
-          </div>\
-        </section>\
+          </section>\
        </div>';
  }


  function selectNewStepUi() {
-    var m = $("#insertStep select").val();
-    $("#insertStep .info").html(_sequencer.modulesInfo(m).description);
-    $("#insertStep #add-step-btn").prop("disabled", false);
+    var insertSelect = $(step.ui.querySelector('.insert-step-select'))
+    var m = insertSelect.val();
+    $(step.ui.querySelector('.insertDiv .info')).html(_sequencer.modulesInfo(m).description);
+    $(step.ui.querySelector('.insertDiv .add-step-btn')).prop("disabled", false);
  }
+    
+    
+  var toggleDiv = function(callback = function(){}){
+    $(step.ui.querySelector('.insertDiv')).collapse('toggle');
+    if ($(step.ui.querySelector('.insert-text')).css('display') != "none"){
+      $(step.ui.querySelector('.insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.no-insert-text')).fadeToggle(200, callback)})
+    }
+    else {
+      $(step.ui.querySelector('.no-insert-text')).fadeToggle(200, function(){$(step.ui.querySelector('.insert-text')).fadeToggle(200, callback)})
+    }
+  }
+
  insertStep = function (id) {
    var modulesInfo = _sequencer.modulesInfo();
    var parser = new DOMParser();
    var addStepUI = stepUI();
    addStepUI = parser.parseFromString(addStepUI, "text/html").querySelector("div")
-    step.ui
+
+    if ($(step.ui.querySelector('.insertDiv')).length > 0){
+      toggleDiv();
+    }
+    else {
+      step.ui
      .querySelector("div.step")
      .insertAdjacentElement('afterend',
        addStepUI
      );
-    insertPreview.updatePreviews(step.output,'insertStep');
-    var insertStepSelect = $("#insertStep select");
+      toggleDiv(function(){
+        insertPreview.updatePreviews(step.output, '.insertDiv');
+      });
+    }
+
+    $(step.ui.querySelector('.insertDiv .close-insert-box')).off('click').on('click', function(){toggleDiv(function(){})});
+    
+    var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
    insertStepSelect.html("");
    // Add modules to the insertStep dropdown
    for (var m in modulesInfo) {
@@ -90,33 +114,33 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
          '<option value="' + m + '">' + modulesInfo[m].name + "</option>"
        );
    }
-    $('#insertStep #add-step-btn').selectize({
+    insertStepSelect.selectize({
      sortField: 'text'
    });
-    $('#insertStep #add-step-btn').prop('disabled', true);
+    $(step.ui.querySelector('.inserDiv .add-step-btn')).prop('disabled', true);

    insertStepSelect.append('<option value="none" disabled selected>More modules...</option>');
-    $('#insertStep .radio-group .radio').on("click", function () {
+    $(step.ui.querySelector('.insertDiv .radio-group .radio')).on("click", function () {
      $(this).parent().find('.radio').removeClass('selected');
      $(this).addClass('selected');
      newStep = $(this).attr('data-value');
-      insertStepSelect.val(newStep);
+      $(step.ui.querySelector('.insert-step-select')).val(newStep);
      selectNewStepUi();
      insert(id);
      $(this).removeClass('selected');
    });
-    $(step.ui.querySelector("#insertStep select")).on('change', selectNewStepUi);
-    $(step.ui.querySelector("#insertStep #add-step-btn")).on('click', function () { insert(id) });
+    insertStepSelect.on('change', selectNewStepUi);
+    $(step.ui.querySelector('.insertDiv .add-step-btn')).on('click', function () { insert(id) });
  }

  function insert(id) {

    options = options || {};
-    var insertStepSelect = $("#insertStep select");
+    var insertStepSelect = $(step.ui.querySelector('.insert-step-select'));
    if (insertStepSelect.val() == "none") return;

    var newStepName = insertStepSelect.val()
-    $('div .insertDiv').remove();
+    toggleDiv();
    var sequenceLength = 1;
    if (sequencer.sequences[newStepName]) {
      sequenceLength = sequencer.sequences[newStepName].length;
--- a/package-lock.json
+++ b/package-lock.json
@@ -643,7 +643,7 @@
        },
        "minimist": {
          "version": "0.0.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.5.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.5.tgz",
          "integrity": "sha1-16oye87PUY+RBqxrjwA/o7zqhWY=",
          "dev": true
        },
@@ -3515,7 +3515,7 @@
    },
    "gif-encoder": {
      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/gif-encoder/-/gif-encoder-0.4.3.tgz",
+      "resolved": "http://registry.npmjs.org/gif-encoder/-/gif-encoder-0.4.3.tgz",
      "integrity": "sha1-iitP6MqJWkjjoLbLs0CgpqNXGJk=",
      "requires": {
        "readable-stream": "~1.1.9"
@@ -4306,7 +4306,7 @@
        },
        "minimist": {
          "version": "0.0.10",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
          "dev": true
        },
@@ -4371,7 +4371,7 @@
      "dependencies": {
        "minimist": {
          "version": "0.0.10",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
          "dev": true
        },
@@ -5263,7 +5263,7 @@
    },
    "magic-string": {
      "version": "0.22.5",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
+      "resolved": "http://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
      "integrity": "sha512-oreip9rJZkzvA8Qzk9HFs8fZGF/u7H/gtrE8EN6RjKJ9kh2HlC+yQ2QezifqTZfGyiuAV0dRv5a+y/8gBb1m9w==",
      "requires": {
        "vlq": "^0.2.2"
@@ -5602,7 +5602,7 @@
    },
    "minimist": {
      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
    },
    "mitt": {
@@ -5643,7 +5643,7 @@
      "dependencies": {
        "minimist": {
          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
          "dev": true
        }
@@ -6023,7 +6023,7 @@
      "dependencies": {
        "minimist": {
          "version": "0.0.10",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
        }
      }
@@ -6738,7 +6738,7 @@
      "dependencies": {
        "minimist": {
          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
        },
        "object-keys": {
@@ -7305,7 +7305,7 @@
    },
    "sax": {
      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-0.1.5.tgz",
+      "resolved": "http://registry.npmjs.org/sax/-/sax-0.1.5.tgz",
      "integrity": "sha1-0YKaYSD6AWZetNv/bEPyn9bWFHE=",
      "dev": true
    },