Merge branch 'main' into add-step-btn

examples/demo.css

@@ -175,25 +175,27 @@ h1 {
 }
 
 .btn-circle{
-  width: 80px;
-  height: 80px;
+  min-width: 80px;
+  min-height: 80px;
   text-align: center;
+  display: flex !important;
+  flex-direction: column;
   padding: 6px 0;
   font-size: 12px;
   line-height: 1.42;
-  border-radius: 40px;
+  border-radius: 10px;
   margin-left: 5px;
   margin-right: 5px;
 }
-.radio button{
+.radio{
   cursor:pointer;
+  overflow: hidden;
+  height: 80px;
+  width: 80px;
+  margin-left: 5px;
+  margin-right: 5px;
 }
-.radio.selected button{
-  color: #fff;
-  background-color: #5cb85c;
-  border-color: #5cb85c;
-  outline: none;
-}
+
 .radio-group {
   margin-bottom: 20px;
 }
@@ -211,3 +213,19 @@ h1 {
   text-align:center;
   display:none;
 }
+
+.no-border {
+  border: 0px;
+}
+
+.i-over {
+  position: absolute;
+  left: 15px;
+  top: 15px;
+  z-index: 2;
+  color: white;
+}
+
+.i-small {
+  left: 25px;
+}

examples/demo.js

@@ -1,4 +1,35 @@
 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") {
+        console.log(customValues);
+        previewSequencer.addSteps(previewStepName, customValues).run(insertPreview);
+      }
+      else {
+        previewSequencer.addSteps(previewStepName, {[previewStepName]: customValues}).run(insertPreview);
+      }
+    }
+    previewSequencer.loadImage(path, loadPreview);
+  }
+
+
   sequencer = ImageSequencer();
 
   function refreshOptions() {
@@ -144,6 +175,7 @@ window.onload = function() {
       step.output.src = reader.result;
       sequencer.run({ index: 0 });
       step.options.step.imgElement.src = reader.result;
+      updatePreviews(reader.result);
     }
   });
 
@@ -182,4 +214,32 @@ window.onload = function() {
       }
   location.reload();
   });
+
+  function updatePreviews(src) {
+    $('#addStep 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);
+    });
+  }
+
+  if (getUrlHashParameter('src')) {
+    updatePreviews(getUrlHashParameter('src'));
+  } else {
+    updatePreviews("images/tulips.png");
+  }
 };

examples/index.html

@@ -70,7 +70,9 @@
       </center>
     </div>
 
-    <section id="steps" class="row"></section>
+    <section id="steps" class="row">
+      <div id="load-image"></div>
+    </section>
 
     <hr />
   <div class="row">
@@ -81,33 +83,33 @@
           <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>
+              <div class="radio" data-value="brightness">
+                <i class="fa fa-sun-o fa-4x i-over"></i>
+              </div>
               <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>
+              <div class="radio" data-value="contrast">
+                <i class="fa fa-adjust fa-4x i-over"></i>
+              </div>
               <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>
+              <div class="radio" data-value="saturation">
+                <i class="fa fa-tint fa-4x i-over i-small"></i>
+              </div>
               <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>
+              <div class="radio" data-value="rotate">
+                <i class="fa fa-rotate-right fa-4x i-over"></i>
+              </div>
               <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>
+              <div class="radio" data-value="crop">
+                <i class="fa fa-crop fa-4x i-over"></i>
+              </div>
               <p>Crop</p>
             </div>
           </div>
@@ -164,7 +166,7 @@
   <form class="move-up" action="#up">
     <button><i class="fa fa-arrow-circle-o-up"></i></button>
   </form>
-  
+
   <footer>
     <hr style="margin:20px;"><center><a class="color:grey;" id="clear-cache">Clear offline cache</a></center>
   </footer>

examples/lib/defaultHtmlStepUi.js

@@ -137,7 +137,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
       $(step.ui.querySelectorAll(".target")).on('change',toggleSaveButton);
 
       $(step.ui.querySelector("div.details")).append(
-        "<p><button class='btn btn-default btn-save' disabled = 'true' >Apply</button><span> Press save to see changes</span></p>"
+        "<p><button class='btn btn-default btn-save' disabled = 'true' >Apply</button><span> Press apply to see changes</span></p>"
       );
 
       function focusInput(){
@@ -164,9 +164,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
       $(step.ui.querySelector("div.details .input-form")).on('submit', saveOptions);
     }
 
-    if (step.name != "load-image")
-      {
-        step.ui
+    if (step.name != "load-image"){
+      step.ui
         .querySelector("div.details")
         .appendChild(
           parser.parseFromString(tools, "text/html").querySelector("div")
@@ -176,7 +175,11 @@ function DefaultHtmlStepUi(_sequencer, options) {
         },500)
       }
 
-    stepsEl.appendChild(step.ui);
+      stepsEl.appendChild(step.ui);
+    }
+    else {
+      $("#load-image").append(step.ui);
+    }
     
     var inputs = document.querySelectorAll('input[type="range"]')
     for(i in inputs)
@@ -248,4 +251,4 @@ function DefaultHtmlStepUi(_sequencer, options) {
     onRemove: onRemove,
     onDraw: onDraw
   }
-}
+}