Added thumbnails to insert preview. (#653)

* Adds thumbnail to insert step view

* removed redundant code

* Resolved merge conflicts

* Resolved merge conflicts

* made changes in intermediateHtmlStepUi

* Update intermediateHtmlStepUi.js

examples/demo.js

@@ -1,34 +1,4 @@
 window.onload = function() {
-  function generatePreview(previewStepName, customValues, path) {
-    var previewSequencer = ImageSequencer();
-
-    function insertPreview(src) {
-      var img = document.createElement('img');
-      img.classList.add('img-thumbnail')
-      img.classList.add('no-border');
-      img.src = src;
-      $(img).css("max-width", "200%");
-      $(img).css("transform", "translateX(-20%)");
-      var stepDiv = $('#addStep .row').find('div').each(function() {
-        if ($(this).find('div').attr('data-value') === previewStepName) {
-          $(this).find('div').append(img);
-        }
-      });
-    }
-    function loadPreview() {
-      previewSequencer = previewSequencer.addSteps('resize', { resize: "40%" });
-
-      if (previewStepName === "crop") {
-        previewSequencer.addSteps(previewStepName, customValues).run(insertPreview);
-      }
-      else {
-        previewSequencer.addSteps(previewStepName, { [previewStepName]: customValues }).run(insertPreview);
-      }
-    }
-    previewSequencer.loadImage(path, loadPreview);
-  }
-
-
   sequencer = ImageSequencer();
 
   function refreshOptions() {
@@ -210,10 +180,12 @@ window.onload = function() {
     onLoad: function onFileReaderLoad(progress) {
       var reader = progress.target;
       var step = sequencer.images.image1.steps[0];
+      var util=IntermediateHtmlStepUi(sequencer);
       step.output.src = reader.result;
       sequencer.run({ index: 0 });
       step.options.step.imgElement.src = reader.result;
-      updatePreviews(reader.result);
+      updatePreviews(reader.result,'addStep');
+      updatePreviews(sequencer.images.image1.steps[0].options.step.imgElement.src,'insertStep');
     },
     onTakePhoto: function (url) {
       var step = sequencer.images.image1.steps[0];
@@ -225,31 +197,9 @@ window.onload = function() {
 
   setupCache();
 
-  function updatePreviews(src) {
-    $('#addStep img').remove();
-
-    var previewSequencerSteps = {
-      "brightness": "175",
-      "saturation": "0.5",
-      "rotate": 90,
-      "contrast": 90,
-      "crop": {
-        "x": 0,
-        "y": 0,
-        "w": "(50%)",
-        "h": "(50%)",
-        "noUI": true
-      }
-    }
-
-    Object.keys(previewSequencerSteps).forEach(function(step, index) {
-      generatePreview(step, Object.values(previewSequencerSteps)[index], src);
-    });
-  }
-
   if (getUrlHashParameter('src')) {
-    updatePreviews(getUrlHashParameter('src'));
+    updatePreviews(getUrlHashParameter('src'),'addStep');
   } else {
-    updatePreviews("images/tulips.png");
+    updatePreviews("images/tulips.png",'addStep');
   }
 };

examples/index.html

@@ -21,6 +21,7 @@
   <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="lib/insertPreview.js" charset="utf-8"></script>
   <script src="lib/cache.js" charset="utf-8"></script>
   <script src="demo.js" charset="utf-8"></script>
   <!-- for crop module: -->

examples/lib/insertPreview.js

@@ -0,0 +1,50 @@
+function generatePreview(previewStepName, customValues, path, selector) {
+
+    var previewSequencer = ImageSequencer();
+    function insertPreview(src) {
+      var img = document.createElement('img');
+      img.classList.add('img-thumbnail')
+      img.classList.add('no-border');
+      img.src = src;
+      $(img).css("max-width", "200%");
+      $(img).css("transform", "translateX(-20%)");
+      var stepDiv = $('#'+selector+' .row').find('div').each(function() {
+        if ($(this).find('div').attr('data-value') === previewStepName) {
+          $(this).find('div').append(img);
+        }
+      });
+    }
+
+    function loadPreview() {
+      previewSequencer = previewSequencer.addSteps('resize', { resize: "40%" });
+      if (previewStepName === "crop") {
+        previewSequencer.addSteps(previewStepName, customValues).run(insertPreview);
+      }
+      else {
+        previewSequencer.addSteps(previewStepName, { [previewStepName]: customValues }).run(insertPreview);
+      }
+    }
+    previewSequencer.loadImage(path, loadPreview);
+  }
+
+  function updatePreviews(src, selector) {
+    $('#'+selector+' img').remove();
+
+    var previewSequencerSteps = {
+      "brightness": "20",
+      "saturation": "5",
+      "rotate": 90,
+      "contrast": 90,
+      "crop": {
+        "x": 0,
+        "y": 0,
+        "w": "(50%)",
+        "h": "(50%)",
+        "noUI": true
+      }
+    }
+
+    Object.keys(previewSequencerSteps).forEach(function (step, index) {
+      generatePreview(step, Object.values(previewSequencerSteps)[index], src, selector);
+    });
+  }

examples/lib/intermediateHtmlStepUi.js

@@ -1,40 +1,40 @@
 function IntermediateHtmlStepUi(_sequencer, step, options) {
   function stepUI() {
     return '<div class="row insertDiv">\
-        <div class="col-md-6" style="margin-top:5%">\
+        <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>\
-                  <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="brightness">\
+                <div class="radio" data-value="brightness">\
-                    <i class="fa fa-sun-o fa-4x"></i>\
+                <i class="fa fa-sun-o fa-4x i-over"></i>\
-                  </button>\
+              </div>\
                   <p>Brightness</p>\
                 </div>\
                 <div>\
-                  <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="contrast">\
+                <div class="radio" data-value="contrast">\
-                    <i class="fa fa-adjust fa-4x"></i>\
+                <i class="fa fa-adjust fa-4x i-over"></i>\
-                  </button>\
+              </div>\
                   <p>Contrast</p>\
                 </div>\
                 <div>\
-                  <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="saturation">\
+                <div class="radio" data-value="saturation">\
-                    <i class="fa fa-tint fa-4x"></i>\
+                <i class="fa fa-tint fa-4x i-over i-small"></i>\
-                  </button>\
+              </div>\
                   <p>Saturation</p>\
                 </div>\
                 <div>\
-                  <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="rotate">\
+                <div class="radio" data-value="rotate">\
-                    <i class="fa fa-rotate-right fa-4x"></i>\
+                <i class="fa fa-rotate-right fa-4x i-over"></i>\
-                  </button>\
+              </div>\
                   <p>Rotate</p>\
                 </div>\
                 <div>\
-                  <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="crop">\
+                <div class="radio" data-value="crop">\
-                    <i class="fa fa-crop fa-4x"></i>\
+                <i class="fa fa-crop fa-4x i-over"></i>\
-                  </button>\
+              </div>\
                   <p>Crop</p>\
                 </div>\
               </div>\
@@ -50,6 +50,8 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
         </section>\
         </div>';
   }
+
+
   function selectNewStepUi() {
     var m = $("#insertStep select").val();
     $("#insertStep .info").html(_sequencer.modulesInfo(m).description);
@@ -65,6 +67,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
       .insertAdjacentElement('afterend',
         addStepUI
       );
+      updatePreviews(step.output,'insertStep');
     var insertStepSelect = $("#insertStep select");
     insertStepSelect.html("");
     // Add modules to the insertStep dropdown
@@ -112,6 +115,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
     setUrlHashParameter("steps", _sequencer.toString());
 
   }
+
   return {
     insertStep
   }