[GCI] InsertStep functionality added for loadImage step (#1360)

* add markuo

* add markupfix insertPreview

* fix insertPreview test

* make the new insertPreview work

* fix disabled

* small fix

* fix comments

* remove console log

* fix enabling/disabling of insert-step btn

Author: harshkhandeparkar

Diff for: examples/demo.css

@@ -313,4 +313,10 @@ a.name-header{
   bottom: 7px;
   font-size: 16px;
   color: #444;
+}
+
+/* Non float rightward alignment*/
+.right {
+  margin-left: auto;
+  display: block;
 }

Diff for: examples/demo.js

@@ -9,24 +9,24 @@ window.onload = function () {
   sequencer = ImageSequencer();
 
   options = {
-      sortField: 'text',
-      openOnFocus: false,
-      onInitialize: function () {
-          this.$control.on("click", () => {
-            this.ignoreFocusOpen = true;
-            setTimeout(() => { 
-              // Trigger onFocus and open dropdown.
-              this.ignoreFocusOpen = false;
-            }, 50);
-          });
-      }, 
-      // Open dropdown after timeout of onClick.
-      onFocus: function () {
-          if (!this.ignoreFocusOpen) {
-              this.open();
-          }
+    sortField: 'text',
+    openOnFocus: false,
+    onInitialize: function () {
+      this.$control.on('click', () => {
+        this.ignoreFocusOpen = true;
+        setTimeout(() => {
+          // Trigger onFocus and open dropdown.
+          this.ignoreFocusOpen = false;
+        }, 50);
+      });
+    },
+    // Open dropdown after timeout of onClick.
+    onFocus: function () {
+      if (!this.ignoreFocusOpen) {
+        this.open();
       }
-  }
+    }
+  };
 
   function refreshOptions(options) {
     // Default options if parameter is empty.
@@ -239,8 +239,8 @@ window.onload = function () {
   function getLastImage() {
     // Get the image from the last step.
     let imgs = document.getElementsByClassName('step-thumbnail');
-    let lastStepImage = imgs[imgs.length-1];
-    return lastStepImage.getAttribute("src");
+    let lastStepImage = imgs[imgs.length - 1];
+    return lastStepImage.getAttribute('src');
   }
 
   /**
@@ -255,16 +255,16 @@ window.onload = function () {
 
       // Create a new pdf with the same dimensions as the image.
       const pdf = new jsPDF({
-        orientation: pageHeight > pageWidth ? "portrait": "landscape",
-        unit: "px",
+        orientation: pageHeight > pageWidth ? 'portrait' : 'landscape',
+        unit: 'px',
         format: [pageHeight, pageWidth]
       });
 
       // Add the image to the pdf with dimensions equal to the internal dimensions of the page.
       pdf.addImage(imageDataURL, 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());
 
       // Save the pdf with the filename specified here:
-      pdf.save("index.pdf");
+      pdf.save('index.pdf');
     });
   }
 
@@ -301,8 +301,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, '.insertDiv');
+      
+      insertPreview.updatePreviews(reader.result, document.querySelector('#addStep'));
     },
     onTakePhoto: function (url) {
       var step = sequencer.steps[0];
@@ -312,16 +312,15 @@ 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, '.insertDiv');
+      insertPreview.updatePreviews(url, document.querySelector('#addStep'));
     }
   });
 
   setupCache();
 
   if (urlHash.getUrlHashParameter('src')) {
-    insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'), '#addStep');
+    insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'), document.querySelector('#addStep'));
   } else {
-    insertPreview.updatePreviews('images/tulips.png', '#addStep');
+    insertPreview.updatePreviews('images/tulips.png', document.querySelector('#addStep'));
   }
 };

Diff for: examples/lib/defaultHtmlStepUi.js

@@ -20,7 +20,6 @@ function DefaultHtmlStepUi(_sequencer, options) {
   var selectStepSel = options.selectStepSel = options.selectStepSel || '#selectStep';
 
   function onSetup(step, stepOptions) {
-
     if (step.options && step.options.description)
       step.description = step.options.description;
 
@@ -169,7 +168,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
         );
 
       $stepAll('.remove').on('click', function() {notify('Step Removed', 'remove-notification');});
-      $stepAll('.insert-step').on('click', function() { util.insertStep(step.ID); });
+      $step('.insert-step').on('click', function() { util.insertStep(step.ID); });
       // Insert the step's UI in the right place
       if (stepOptions.index == _sequencer.steps.length) {
         stepsEl.appendChild(step.ui);
@@ -180,9 +179,24 @@ function DefaultHtmlStepUi(_sequencer, options) {
       else {
         stepsEl.insertBefore(step.ui, $(stepsEl).children()[stepOptions.index]);
       }
+
+      // Enable the load-image insert-step button when there are steps after load-image
+      // The logical operator is `> 0` because the number of steps is found before adding the step, actual logic is `steps.length + 1 > 1` which is later simplified.
+      if (_sequencer.steps.length > 0) $('#load-image .insert-step').prop('disabled', false);
+      else $('#load-image .insert-step').prop('disabled', true);
     }
     else {
       $('#load-image').append(step.ui);
+
+
+      $step('div.panel-footer').prepend( `
+          <button class="right btn btn-default btn-sm insert-step" disabled="true">
+            <span class="insert-text"><i class="fa fa-plus"></i> Insert Step</span>
+            <span class="no-insert-text" style="display:none">Close</span>
+          </button>`
+      );
+
+      $step('.insert-step').on('click', function() { util.insertStep(step.ID); });
     }
     $step('.toggle').on('click', () => {
       $step('.toggleIcon').toggleClass('rotated');
@@ -346,6 +360,12 @@ function DefaultHtmlStepUi(_sequencer, options) {
   function onRemove(step) {
     step.ui.remove();
     $('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled', true);
+
+    // Enable the load-image insert-step button when there are steps after load-image
+    // The logical operator is `> 2` because the number of steps is found before removing the step, actual logic is `steps.length - 1 > 1` which is later simplified.
+    if (_sequencer.steps.length - 1 > 1) $('#load-image .insert-step').prop('disabled', false);
+    else $('#load-image .insert-step').prop('disabled', true);
+
     $('div[class*=imgareaselect-]').remove();
   }
 

Diff for: examples/lib/insertPreview.js

@@ -1,5 +1,4 @@
-function generatePreview(previewStepName, customValues, path, selector) {
-
+function generatePreview(previewStepName, customValues, path, DomNode) {
   var previewSequencer = ImageSequencer();
   function insertPreview(src) {
     var img = document.createElement('img');
@@ -8,9 +7,9 @@ function generatePreview(previewStepName, customValues, path, selector) {
     img.src = src;
     $(img).css('max-width', '200%');
     $(img).css('transform', 'translateX(-20%)');
-    $(selector + ' .radio-group').find('div').each(function() {
-      if ($(this).find('div').attr('data-value') === previewStepName) {
-        $(this).find('div').append(img);
+    $(DomNode.querySelector('.radio-group')).find('.radio').each(function() {
+      if ($(this).attr('data-value') === previewStepName) {
+        $(this).append(img);
       }
     });
   }
@@ -29,8 +28,8 @@ function generatePreview(previewStepName, customValues, path, selector) {
     previewSequencer.loadImage(path, loadPreview);
 }
 
-function updatePreviews(src, selector) {
-  $(selector + ' img').remove();
+function updatePreviews(src, DomNode) {
+  $(DomNode).find('img').remove();
 
   var previewSequencerSteps = {
     'resize': '125%',
@@ -48,6 +47,7 @@ function updatePreviews(src, selector) {
   };
 
   var img = new Image();
+
   img.onload = function(){
     var height = img.height;
     var width = img.width;
@@ -62,7 +62,7 @@ function updatePreviews(src, selector) {
       this.addSteps('resize', {['resize']: percentage + '%'});
       this.run((src)=>{
         Object.keys(previewSequencerSteps).forEach(function (step, index) {
-          generatePreview(step, Object.values(previewSequencerSteps)[index], src, selector);
+          generatePreview(step, Object.values(previewSequencerSteps)[index], src, DomNode);
         });
       });
     });

Diff for: examples/lib/intermediateHtmlStepUi.js

@@ -81,6 +81,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
     var parser = new DOMParser();
     var addStepUI = stepUI();
     addStepUI = parser.parseFromString(addStepUI, 'text/html').querySelector('div');
+
     if ($step('.insertDiv').length > 0){
       toggleDiv($step);
     }
@@ -91,9 +92,11 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
           addStepUI
         );
       toggleDiv($step, function(){
-        insertPreview.updatePreviews(step.output, '.insertDiv');
+        if (step.name === 'load-image') insertPreview.updatePreviews(step.output.src, $step('.insertDiv').getDomElem());
+        else insertPreview.updatePreviews(step.output, $step('.insertDiv').getDomElem());
       });
     }
+    
 
     $step('.insertDiv .close-insert-box').off('click').on('click', function(){
       toggleDiv($step);
@@ -102,21 +105,25 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
 
     var insertStepSelect = $step('.insert-step-select');
     insertStepSelect.html('');
+
     // Add modules to the insertStep dropdown
     for (var m in modulesInfo) {
       if (modulesInfo[m] && modulesInfo[m].name)
         insertStepSelect.append(
           '<option value="' + m + '">' + modulesInfo[m].name + '</option>'
         );
     }
+
     insertStepSelect.selectize({
       sortField: 'text'
     });
+
     $('.insertDiv .radio-group .radio').on('click', function () {
       var newStepName = $(this).attr('data-value');
       id = $($step('.insertDiv').parents()[3]).prevAll().length;
       insert(id, $step, newStepName);
     });
+
     $step('.insertDiv .add-step-btn').on('click', function () {
       var newStepName = insertStepSelect.val();
       id = $($step('.insertDiv').parents()[3]).prevAll().length;

Diff for: test/ui/spec/insertPreview.spec.js

@@ -5,22 +5,25 @@ describe('Preview UI HTML', function() {
   var insertPreview;
   var options = { brightness: 50 };
 
+  // TODO: Add rigorous tests with virtual DOM Nodes
+  const DomNode = {};
+
   beforeEach(()=>{
     insertPreview = InsertPreview;
 
     spyOn(insertPreview, 'generatePreview');
     spyOn(insertPreview, 'updatePreviews');
 
-    insertPreview.generatePreview('brightness', options, 'src', 'selector');
-    insertPreview.updatePreviews('src', 'selector');
+    insertPreview.generatePreview('brightness', options, 'src', DomNode);
+    insertPreview.updatePreviews('src',  DomNode);
   });
 
   it('generate preview ui', function() {
-    expect(insertPreview.generatePreview).toHaveBeenCalledWith('brightness', options, 'src', 'selector');
+    expect(insertPreview.generatePreview).toHaveBeenCalledWith('brightness', options, 'src', DomNode);
   });
 
   it('update preview ui', function() {
-    expect(insertPreview.updatePreviews).toHaveBeenCalledWith('src', 'selector');
+    expect(insertPreview.updatePreviews).toHaveBeenCalledWith('src',  DomNode);
   });
 
 });