From fdb38f7fdfc38b355f079e2ecbd58b933e702d86 Mon Sep 17 00:00:00 2001
From: Harshith pabbati <pabbatiharshith@gmail.com>
Date: Mon, 18 Feb 2019 05:46:15 +0530
Subject: [PATCH] Added the resize quick button (#782)

* Added the resize module

* Added the resize quick button

* Made the icon to fit into the box

* Added the footer to the main page

* Added the resize quick button

* Added the resize quick button

* Added the resize quick button
---
 dist/image-sequencer-ui.js             | 7 +++++++
 dist/image-sequencer-ui.min.js         | 2 +-
 examples/demo.css                      | 2 +-
 examples/index.html                    | 6 ++++++
 examples/lib/insertPreview.js          | 1 +
 examples/lib/intermediateHtmlStepUi.js | 6 ++++++
 6 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/dist/image-sequencer-ui.js b/dist/image-sequencer-ui.js
index 0e2a660f..84298ee1 100644
--- a/dist/image-sequencer-ui.js
+++ b/dist/image-sequencer-ui.js
@@ -694,6 +694,7 @@ function generatePreview(previewStepName, customValues, path, selector) {
     $('#'+selector+' img').remove();
 
     var previewSequencerSteps = {
+      "resize": "125%",
       "brightness": "20",
       "saturation": "5",
       "rotate": 90,
@@ -729,6 +730,12 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
             <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>\
diff --git a/dist/image-sequencer-ui.min.js b/dist/image-sequencer-ui.min.js
index 2f5cc42e..676ed940 100644
--- a/dist/image-sequencer-ui.min.js
+++ b/dist/image-sequencer-ui.min.js
@@ -1 +1 @@
-!function(){return function e(t,n,i){function a(o,r){if(!n[o]){if(!t[o]){var l="function"==typeof require&&require;if(!r&&l)return l(o,!0);if(s)return s(o,!0);var c=new Error("Cannot find module '"+o+"'");throw c.code="MODULE_NOT_FOUND",c}var d=n[o]={exports:{}};t[o][0].call(d.exports,function(e){return a(t[o][1][e]||e)},d,d.exports,e,t,n,i)}return n[o].exports}for(var s="function"==typeof require&&require,o=0;o<i.length;o++)a(i[o]);return a}}()({1:[function(e,t,n){var i=e("./lib/defaultHtmlSequencerUi.js"),a=e("./lib/cache.js"),s=e("./lib/intermediateHtmlStepUi.js"),o=e("./lib/defaultHtmlStepUi.js"),r=e("./lib/urlHash.js"),l=e("./lib/insertPreview.js");window.onload=function(){function e(){var e=sequencer.modulesInfo(),t=$("#addStep select");for(var n in t.html(""),e)e[n]&&e[n].name&&t.append('<option value="'+n+'">'+e[n].name+"</option>");t.append('<option value="none" disabled selected>More modules...</option>')}sequencer=ImageSequencer(),e(),$(window).on("scroll",function(){var e=$("body").scrollTop()>20||$(":root").scrollTop()>20;$("#move-up").css({display:e?"block":"none"})}),$("#move-up").on("click",function(){$("body").animate({scrollTop:0}),$(":root").animate({scrollTop:0})}),sequencer.setUI(o(sequencer));var t=i(sequencer);r.getUrlHashParameter("src")?sequencer.loadImage(r.getUrlHashParameter("src"),t.onLoad):sequencer.loadImage("images/tulips.png",t.onLoad);$("#addStep select").on("change",t.selectNewStepUi),$("#addStep #add-step-btn").on("click",t.addStepUi),$("#resetButton").on("click",function(){confirm("Do you want to reset the sequence?")&&(window.location="/")}),$(".radio-group .radio").on("click",function(){$(this).parent().find(".radio").removeClass("selected"),$(this).addClass("selected"),newStep=$(this).attr("data-value"),$("#addStep select").val(newStep),t.selectNewStepUi(),t.addStepUi(),$(this).removeClass("selected")}),$("#download-btn").click(function(){return $(".step-thumbnail:last()").trigger("click"),!1}),$("body").on("click","button.remove",t.removeStepUi),$("#save-seq").click(()=>{var t=window.prompt("Please give a name to your sequence... (Saved sequence will only be available in this browser).");t&&(t+=" (local)",sequencer.saveSequence(t,sequencer.toString()),sequencer.loadModules(),$(".savesequencemsg").fadeIn(),setTimeout(function(){$(".savesequencemsg").fadeOut()},1e3),e())});var n=!1;$(".js-view-as-gif").on("click",function(e){if(!n){n=!0;var t=e.target;t.disabled=!0;try{for(var i=document.getElementsByClassName("step-thumbnail"),a=[],s=0;s<i.length;s++)a.push(i[s].src);var o={gifWidth:i[0].width,gifHeight:i[0].height,images:a,frameDuration:7};gifshot.createGIF(o,function(e){if(!e.error){var i=e.image,a=document.createElement("img");a.id="gif_element",a.src=i;var s=$("#js-download-gif-modal");$("#js-download-as-gif-button").one("click",function(){download(i,"index.gif","image/gif"),s.modal("hide")});var o=document.getElementById("js-download-modal-gif-container");o.innerHTML="",o.appendChild(a),s.modal(),t.disabled=!1,n=!1}})}catch(e){console.error(e),t.disabled=!1,n=!1}}}),sequencer.setInputStep({dropZoneSelector:"#dropzone",fileInputSelector:"#fileInput",takePhotoSelector:"#take-photo",onLoad:function(e){var t=e.target,n=sequencer.images.image1.steps[0];s(sequencer);n.output.src=t.result,sequencer.run({index:0}),n.options.step.imgElement.src=t.result,l.updatePreviews(t.result,"addStep"),l.updatePreviews(sequencer.images.image1.steps[0].options.step.imgElement.src,"insertStep")},onTakePhoto:function(e){var t=sequencer.images.image1.steps[0];t.output.src=e,sequencer.run({index:0}),t.options.step.imgElement.src=e}}),a(),r.getUrlHashParameter("src")?l.updatePreviews(r.getUrlHashParameter("src"),"addStep"):l.updatePreviews("images/tulips.png","addStep")}},{"./lib/cache.js":2,"./lib/defaultHtmlSequencerUi.js":3,"./lib/defaultHtmlStepUi.js":4,"./lib/insertPreview.js":5,"./lib/intermediateHtmlStepUi.js":6,"./lib/urlHash.js":7}],2:[function(e,t,n){t.exports=function(){"serviceWorker"in navigator&&navigator.serviceWorker.register("sw.js",{scope:"/examples/"}).then(function(e){const t=e.installing;t.onstatechange=(()=>{console.log(t),"installed"===t.state&&location.reload()}),console.log("Registration successful, scope is:",e.scope)}).catch(function(e){console.log("Service worker registration failed, error:",e)}),"serviceWorker"in navigator&&caches.keys().then(function(e){e.forEach(function(e){$("#clear-cache").append(" "+e)})}),$("#clear-cache").click(function(){"serviceWorker"in navigator&&caches.keys().then(function(e){e.forEach(function(e){caches.delete(e)})}),location.reload()})}},{}],3:[function(e,t,n){var i=e("./urlHash.js");t.exports=function(e,t){var n=(t=t||{}).addStepSel=t.addStepSel||"#addStep",a=t.removeStepSel=t.removeStepSel||"button.remove";function s(){var t=i.getUrlHashParameter("steps");t&&(e.importString(t),e.run({index:0})),i.setUrlHashParameter("steps",sequencer.toString())}function o(){sequencer.images.image1.steps.length<2?$(" #save-seq").prop("disabled",!0):$(" #save-seq").prop("disabled",!1)}return t.selectStepSel=t.selectStepSel||"#selectStep",{onLoad:function(){s(),$("#selectStep").val()||$(n+" #add-step-btn").prop("disabled",!0),o()},importStepsFromUrlHash:s,selectNewStepUi:function(){var t=$(n+" select").val();$(n+" .info").html(e.modulesInfo(t).description),$(n+" #add-step-btn").prop("disabled",!1)},removeStepUi:function(){var e=$(a).index(this)+1;sequencer.removeSteps(e).run({index:e-1}),i.setUrlHashParameter("steps",sequencer.toString()),o()},addStepUi:function(){if("none"!=$(n+" select").val()){var a=$(n+" select").val(),s=1;sequencer.sequences[a]?s=sequencer.sequences[a].length:sequencer.modules[a][1].length&&(s=sequencer.modules[a][1].length),e.addSteps(a,t).run({index:e.images.image1.steps.length-s-1}),$(n+" .info").html("Select a new module to add to your sequence."),$(n+" select").val("none"),o(),i.setUrlHashParameter("steps",e.toString())}}}}},{"./urlHash.js":7}],4:[function(e,t,n){var i=e("./intermediateHtmlStepUi.js"),a=e("./urlHash.js");function s(e,t){var n=(t=t||{}).stepsEl||document.querySelector("#steps");t.selectStepSel=t.selectStepSel||"#selectStep";function s(e,t){if(0==$("#"+t).length){var n=document.createElement("span");n.innerHTML=' <i class="fa fa-info-circle" aria-hidden="true"></i> '+e,n.id=t,n.classList.add("notification"),$("body").append(n)}$("#"+t).fadeIn(500).delay(200).fadeOut(500)}return{getPreview:function(){return step.imgElement},onSetup:function(t,o){t.options&&t.options.description&&(t.description=t.options.description),t.ui='      <div class="container">    <div class="row step">    <form class="input-form">    <div class="col-md-4 details">    <h3>    <span class = "toggle">'+t.name+' <i class="fa fa-caret-up toggleIcon" aria-hidden="true"></i></span><span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span></h3><div class="cal"><p><i>"'+(t.description||"")+'</i></p></div>    </div>    </form>    <div class="col-md-8 cal">    <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>    <a><img alt="" style="max-width=100%" class="img-thumbnail step-thumbnail"/></a>    </div>    </div>    </div>    </div>';var r=i(e,t),l=new DOMParser;if(t.ui=l.parseFromString(t.ui,"text/html"),t.ui=t.ui.querySelector("div.container"),t.linkElements=t.ui.querySelectorAll("a"),t.imgElement=t.ui.querySelector("a img"),e.modulesInfo().hasOwnProperty(t.name)){var c=e.modulesInfo(t.name).inputs,d=e.modulesInfo(t.name).outputs,u=Object.assign(c,d);for(var p in u){var v=c.hasOwnProperty(p),m="",f=v?c[p]:{};if(v)if("select"==f.type.toLowerCase()){for(var h in m+='<select class="form-control target" name="'+p+'">',f.values)m+="<option>"+f.values[h]+"</option>";m+="</select>"}else{let e=t.options[p]||f.default;m='<input class="form-control target" type="'+f.type+'" name="'+p+'" value="'+e+'" placeholder ="'+(f.placeholder||""),"range"==f.type.toLowerCase()?m+='"min="'+f.min+'"max="'+f.max+'"step="'+f.step+'"><span>'+e+"</span>":m+='">'}else m+='<span class="output"></span>';var g=document.createElement("div");g.className="row",g.setAttribute("name",p);var S=c[p].desc||p;g.innerHTML="<div class='det cal'>                           <label for='"+p+"'>"+S+"</label>                           "+m+"                         </div>",t.ui.querySelector("div.details").appendChild(g)}$(t.ui.querySelector("div.details")).append('<div class="cal"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>')}"load-image"!=t.name?(t.ui.querySelector("div.details").appendChild(l.parseFromString('<div class="cal"><div class="tools btn-group">    <button confirm="Are you sure?" class="remove btn btn btn-default">      <i class="fa fa-trash"></i>    </button>    <button class="btn  insert-step" style="margin-left:10px;border-radius:6px;background-color:#fff;border:solid #bababa 1.1px;" >      <i class="fa fa-plus"></i> Add    </button>    </div>    </div>',"text/html").querySelector("div")),$(t.ui.querySelectorAll(".remove")).on("click",function(){s("Step Removed","remove-notification")}),$(t.ui.querySelectorAll(".insert-step")).on("click",function(){r.insertStep(t.ID)}),o.index==e.images.image1.steps.length?(n.appendChild(t.ui),$("#steps .container:nth-last-child(1) .insert-step").prop("disabled",!0),$("#steps .container:nth-last-child(2)")&&$("#steps .container:nth-last-child(2) .insert-step").prop("disabled",!1)):n.insertBefore(t.ui,$(n).children()[o.index])):$("#load-image").append(t.ui),$(t.ui.querySelector(".toggle")).on("click",()=>{$(t.ui.querySelector(".toggleIcon")).toggleClass("fa-caret-up").toggleClass("fa-caret-down"),$(t.ui.querySelectorAll(".cal")).toggleClass("collapse")});var b=0,q=!1;$(t.ui.querySelector(".input-form")).on("submit",function(n){n.preventDefault(),q&&($(t.ui.querySelector("div.details")).find("input,select").each(function(e,n){$(n).data("initValue",$(n).val()).data("hasChangedBefore",!1),t.options[$(n).attr("name")]=$(n).val()}),e.run({index:t.index-1}),a.setUrlHashParameter("steps",e.toString()),$(t.ui.querySelector(".btn-save")).prop("disabled",!0),q=!1,b=0)}),$(t.ui.querySelectorAll(".target")).each(function(e,n){$(n).data("initValue",$(n).val()).data("hasChangedBefore",!1).on("input",function(){var e,n,i,a;$(this).focus().data("hasChangedBefore",(e=$(this).val(),n=$(this).data("initValue"),i=$(this).data("hasChangedBefore"),a=!(isNaN(n)||isNaN(e)?e===n:e-n==0),q=(b+=i?a?0:-1:a?1:0)>0,$(t.ui.querySelector(".btn-save")).prop("disabled",!q),a))})}),$('input[type="range"]').on("input",function(){$(this).next().html($(this).val())})},onComplete:function(t){$(t.ui.querySelector(".load")).hide(),$(t.ui.querySelector("img")).show(),$(t.ui.querySelector(".load-spin")).hide(),t.imgElement.src=t.output;var n=t.ui.querySelector(".img-thumbnail");for(let e=0;e<t.linkElements.length;e++)t.linkElements[e].contains(n)&&(t.linkElements[e].href=t.output);for(let e=0;e<t.linkElements.length;e++)t.linkElements[e].download=t.name+"."+t.output.split("/")[1].split(";")[0],t.linkElements[e].target="_blank";if(e.modulesInfo().hasOwnProperty(t.name)){var i=e.modulesInfo(t.name).inputs,a=e.modulesInfo(t.name).outputs;for(var s in i)void 0!==t.options[s]&&("input"===i[s].type.toLowerCase()&&$(t.ui.querySelector('div[name="'+s+'"] input')).val(t.options[s]).data("initValue",t.options[s]),"select"===i[s].type.toLowerCase()&&$(t.ui.querySelector('div[name="'+s+'"] select')).val(t.options[s]).data("initValue",t.options[s]));for(var s in a)void 0!==t[s]&&$(t.ui.querySelector('div[name="'+s+'"] input')).val(t[s])}},onRemove:function(e){e.ui.remove(),$("#steps .container:nth-last-child(1) .insert-step").prop("disabled",!0),$("div[class^=imgareaselect-]").remove()},onDraw:function(e){$(e.ui.querySelector(".load")).show(),$(e.ui.querySelector("img")).hide(),$(e.ui.querySelector(".toggleIcon")).hasClass("fa-caret-down")&&$(e.ui.querySelector(".load-spin")).show()},notify:s}}"undefined"==typeof window&&(t.exports={DefaultHtmlStepUi:s}),t.exports=s},{"./intermediateHtmlStepUi.js":6,"./urlHash.js":7}],5:[function(e,t,n){function i(e,t,n,i){var a=ImageSequencer();function s(t){var n=document.createElement("img");n.classList.add("img-thumbnail"),n.classList.add("no-border"),n.src=t,$(n).css("max-width","200%"),$(n).css("transform","translateX(-20%)");$("#"+i+" .row").find("div").each(function(){$(this).find("div").attr("data-value")===e&&$(this).find("div").append(n)})}a.loadImage(n,function(){a=a.addSteps("resize",{resize:"40%"}),"crop"===e?a.addSteps(e,t).run(s):a.addSteps(e,{[e]:t}).run(s)})}t.exports={generatePreview:i,updatePreviews:function(e,t){$("#"+t+" img").remove();var n={brightness:"20",saturation:"5",rotate:90,contrast:90,crop:{x:0,y:0,w:"(50%)",h:"(50%)",noUI:!0}};Object.keys(n).forEach(function(a,s){i(a,Object.values(n)[s],e,t)})}}},{}],6:[function(e,t,n){var i=e("./urlHash.js"),a=e("./insertPreview.js");t.exports=function(e,t,n){function s(){var t=$("#insertStep select").val();$("#insertStep .info").html(e.modulesInfo(t).description),$("#insertStep #add-step-btn").prop("disabled",!1)}function o(t){n=n||{};var a=$("#insertStep select");if("none"!=a.val()){var s=a.val();$("div .insertDiv").remove(),sequencer.sequences[s]?sequencer.sequences[s].length:sequencer.modules[s][1].length&&sequencer.modules[s][1].length,e.insertSteps(t+1,s).run({index:t}),i.setUrlHashParameter("steps",e.toString())}}return insertStep=function(n){var i=e.modulesInfo(),r='<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="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 class="center-align">                <select class="form-control input-lg" id="selectStep">                  \x3c!-- The default null selection has been appended manually in demo.js                  This is because the options in select are overritten when options are appended.--\x3e                </select>                <button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>              </div>            </div>          </div>        </section>        </div>';r=(new DOMParser).parseFromString(r,"text/html").querySelector("div"),t.ui.querySelector("div.step").insertAdjacentElement("afterend",r),a.updatePreviews(t.output,"insertStep");var l=$("#insertStep select");for(var c in l.html(""),i)void 0!==i[c]&&l.append('<option value="'+c+'">'+i[c].name+"</option>");$("#insertStep #add-step-btn").prop("disabled",!0),l.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"),l.val(newStep),s(),o(n),$(this).removeClass("selected")}),$(t.ui.querySelector("#insertStep select")).on("change",s),$(t.ui.querySelector("#insertStep #add-step-btn")).on("click",function(){o(n)})},{insertStep:insertStep}}},{"./insertPreview.js":5,"./urlHash.js":7}],7:[function(e,t,n){function i(){var e=window.location.hash;e&&(e=e.split("#")[1]);var t={};return e.split("&").forEach(function(e,n){""!=(e=e.split("="))[0]&&(t[e[0]]=e[1])}),t}function a(e){var t=Object.keys(e),n=Object.values(e),i=[];t.forEach(function(e,a){""!=e&&i.push(t[a]+"="+n[a])});var a=i.join("&");window.location.hash=a}t.exports={getUrlHashParameter:function(e){return i()[e]},setUrlHashParameter:function(e,t){var n=i();n[e]=t,a(n)},getUrlHashParameters:i,setUrlHashParameters:a}},{}]},{},[1]);
\ No newline at end of file
+!function(){return function e(t,n,i){function a(r,o){if(!n[r]){if(!t[r]){var l="function"==typeof require&&require;if(!o&&l)return l(r,!0);if(s)return s(r,!0);var c=new Error("Cannot find module '"+r+"'");throw c.code="MODULE_NOT_FOUND",c}var d=n[r]={exports:{}};t[r][0].call(d.exports,function(e){return a(t[r][1][e]||e)},d,d.exports,e,t,n,i)}return n[r].exports}for(var s="function"==typeof require&&require,r=0;r<i.length;r++)a(i[r]);return a}}()({1:[function(e,t,n){var i=e("./lib/defaultHtmlSequencerUi.js"),a=e("./lib/cache.js"),s=e("./lib/intermediateHtmlStepUi.js"),r=e("./lib/defaultHtmlStepUi.js"),o=e("./lib/urlHash.js"),l=e("./lib/insertPreview.js");window.onload=function(){function e(){var e=sequencer.modulesInfo(),t=$("#addStep select");for(var n in t.html(""),e)e[n]&&e[n].name&&t.append('<option value="'+n+'">'+e[n].name+"</option>");t.append('<option value="none" disabled selected>More modules...</option>')}sequencer=ImageSequencer(),e(),$(window).on("scroll",function(){var e=$("body").scrollTop()>20||$(":root").scrollTop()>20;$("#move-up").css({display:e?"block":"none"})}),$("#move-up").on("click",function(){$("body").animate({scrollTop:0}),$(":root").animate({scrollTop:0})}),sequencer.setUI(r(sequencer));var t=i(sequencer);o.getUrlHashParameter("src")?sequencer.loadImage(o.getUrlHashParameter("src"),t.onLoad):sequencer.loadImage("images/tulips.png",t.onLoad);$("#addStep select").on("change",t.selectNewStepUi),$("#addStep #add-step-btn").on("click",t.addStepUi),$("#resetButton").on("click",function(){confirm("Do you want to reset the sequence?")&&(window.location="/")}),$(".radio-group .radio").on("click",function(){$(this).parent().find(".radio").removeClass("selected"),$(this).addClass("selected"),newStep=$(this).attr("data-value"),$("#addStep select").val(newStep),t.selectNewStepUi(),t.addStepUi(),$(this).removeClass("selected")}),$("#download-btn").click(function(){return $(".step-thumbnail:last()").trigger("click"),!1}),$("body").on("click","button.remove",t.removeStepUi),$("#save-seq").click(()=>{var t=window.prompt("Please give a name to your sequence... (Saved sequence will only be available in this browser).");t&&(t+=" (local)",sequencer.saveSequence(t,sequencer.toString()),sequencer.loadModules(),$(".savesequencemsg").fadeIn(),setTimeout(function(){$(".savesequencemsg").fadeOut()},1e3),e())});var n=!1;$(".js-view-as-gif").on("click",function(e){if(!n){n=!0;var t=e.target;t.disabled=!0;try{for(var i=document.getElementsByClassName("step-thumbnail"),a=[],s=0;s<i.length;s++)a.push(i[s].src);var r={gifWidth:i[0].width,gifHeight:i[0].height,images:a,frameDuration:7};gifshot.createGIF(r,function(e){if(!e.error){var i=e.image,a=document.createElement("img");a.id="gif_element",a.src=i;var s=$("#js-download-gif-modal");$("#js-download-as-gif-button").one("click",function(){download(i,"index.gif","image/gif"),s.modal("hide")});var r=document.getElementById("js-download-modal-gif-container");r.innerHTML="",r.appendChild(a),s.modal(),t.disabled=!1,n=!1}})}catch(e){console.error(e),t.disabled=!1,n=!1}}}),sequencer.setInputStep({dropZoneSelector:"#dropzone",fileInputSelector:"#fileInput",takePhotoSelector:"#take-photo",onLoad:function(e){var t=e.target,n=sequencer.images.image1.steps[0];s(sequencer);n.output.src=t.result,sequencer.run({index:0}),n.options.step.imgElement.src=t.result,l.updatePreviews(t.result,"addStep"),l.updatePreviews(sequencer.images.image1.steps[0].options.step.imgElement.src,"insertStep")},onTakePhoto:function(e){var t=sequencer.images.image1.steps[0];t.output.src=e,sequencer.run({index:0}),t.options.step.imgElement.src=e}}),a(),o.getUrlHashParameter("src")?l.updatePreviews(o.getUrlHashParameter("src"),"addStep"):l.updatePreviews("images/tulips.png","addStep")}},{"./lib/cache.js":2,"./lib/defaultHtmlSequencerUi.js":3,"./lib/defaultHtmlStepUi.js":4,"./lib/insertPreview.js":5,"./lib/intermediateHtmlStepUi.js":6,"./lib/urlHash.js":7}],2:[function(e,t,n){t.exports=function(){"serviceWorker"in navigator&&navigator.serviceWorker.register("sw.js",{scope:"/examples/"}).then(function(e){const t=e.installing;t.onstatechange=(()=>{console.log(t),"installed"===t.state&&location.reload()}),console.log("Registration successful, scope is:",e.scope)}).catch(function(e){console.log("Service worker registration failed, error:",e)}),"serviceWorker"in navigator&&caches.keys().then(function(e){e.forEach(function(e){$("#clear-cache").append(" "+e)})}),$("#clear-cache").click(function(){"serviceWorker"in navigator&&caches.keys().then(function(e){e.forEach(function(e){caches.delete(e)})}),location.reload()})}},{}],3:[function(e,t,n){var i=e("./urlHash.js");t.exports=function(e,t){var n=(t=t||{}).addStepSel=t.addStepSel||"#addStep",a=t.removeStepSel=t.removeStepSel||"button.remove";function s(){var t=i.getUrlHashParameter("steps");t&&(e.importString(t),e.run({index:0})),i.setUrlHashParameter("steps",sequencer.toString())}function r(){sequencer.images.image1.steps.length<2?$(" #save-seq").prop("disabled",!0):$(" #save-seq").prop("disabled",!1)}return t.selectStepSel=t.selectStepSel||"#selectStep",{onLoad:function(){s(),$("#selectStep").val()||$(n+" #add-step-btn").prop("disabled",!0),r()},importStepsFromUrlHash:s,selectNewStepUi:function(){var t=$(n+" select").val();$(n+" .info").html(e.modulesInfo(t).description),$(n+" #add-step-btn").prop("disabled",!1)},removeStepUi:function(){var e=$(a).index(this)+1;sequencer.removeSteps(e).run({index:e-1}),i.setUrlHashParameter("steps",sequencer.toString()),r()},addStepUi:function(){if("none"!=$(n+" select").val()){var a=$(n+" select").val(),s=1;sequencer.sequences[a]?s=sequencer.sequences[a].length:sequencer.modules[a][1].length&&(s=sequencer.modules[a][1].length),e.addSteps(a,t).run({index:e.images.image1.steps.length-s-1}),$(n+" .info").html("Select a new module to add to your sequence."),$(n+" select").val("none"),r(),i.setUrlHashParameter("steps",e.toString())}}}}},{"./urlHash.js":7}],4:[function(e,t,n){var i=e("./intermediateHtmlStepUi.js"),a=e("./urlHash.js");function s(e,t){var n=(t=t||{}).stepsEl||document.querySelector("#steps");t.selectStepSel=t.selectStepSel||"#selectStep";function s(e,t){if(0==$("#"+t).length){var n=document.createElement("span");n.innerHTML=' <i class="fa fa-info-circle" aria-hidden="true"></i> '+e,n.id=t,n.classList.add("notification"),$("body").append(n)}$("#"+t).fadeIn(500).delay(200).fadeOut(500)}return{getPreview:function(){return step.imgElement},onSetup:function(t,r){t.options&&t.options.description&&(t.description=t.options.description),t.ui='      <div class="container">    <div class="row step">    <form class="input-form">    <div class="col-md-4 details">    <h3>    <span class = "toggle">'+t.name+' <i class="fa fa-caret-up toggleIcon" aria-hidden="true"></i></span><span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span></h3><div class="cal"><p><i>"'+(t.description||"")+'</i></p></div>    </div>    </form>    <div class="col-md-8 cal">    <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>    <a><img alt="" style="max-width=100%" class="img-thumbnail step-thumbnail"/></a>    </div>    </div>    </div>    </div>';var o=i(e,t),l=new DOMParser;if(t.ui=l.parseFromString(t.ui,"text/html"),t.ui=t.ui.querySelector("div.container"),t.linkElements=t.ui.querySelectorAll("a"),t.imgElement=t.ui.querySelector("a img"),e.modulesInfo().hasOwnProperty(t.name)){var c=e.modulesInfo(t.name).inputs,d=e.modulesInfo(t.name).outputs,u=Object.assign(c,d);for(var p in u){var v=c.hasOwnProperty(p),m="",f=v?c[p]:{};if(v)if("select"==f.type.toLowerCase()){for(var h in m+='<select class="form-control target" name="'+p+'">',f.values)m+="<option>"+f.values[h]+"</option>";m+="</select>"}else{let e=t.options[p]||f.default;m='<input class="form-control target" type="'+f.type+'" name="'+p+'" value="'+e+'" placeholder ="'+(f.placeholder||""),"range"==f.type.toLowerCase()?m+='"min="'+f.min+'"max="'+f.max+'"step="'+f.step+'"><span>'+e+"</span>":m+='">'}else m+='<span class="output"></span>';var g=document.createElement("div");g.className="row",g.setAttribute("name",p);var S=c[p].desc||p;g.innerHTML="<div class='det cal'>                           <label for='"+p+"'>"+S+"</label>                           "+m+"                         </div>",t.ui.querySelector("div.details").appendChild(g)}$(t.ui.querySelector("div.details")).append('<div class="cal"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>')}"load-image"!=t.name?(t.ui.querySelector("div.details").appendChild(l.parseFromString('<div class="cal"><div class="tools btn-group">    <button confirm="Are you sure?" class="remove btn btn btn-default">      <i class="fa fa-trash"></i>    </button>    <button class="btn  insert-step" style="margin-left:10px;border-radius:6px;background-color:#fff;border:solid #bababa 1.1px;" >      <i class="fa fa-plus"></i> Add    </button>    </div>    </div>',"text/html").querySelector("div")),$(t.ui.querySelectorAll(".remove")).on("click",function(){s("Step Removed","remove-notification")}),$(t.ui.querySelectorAll(".insert-step")).on("click",function(){o.insertStep(t.ID)}),r.index==e.images.image1.steps.length?(n.appendChild(t.ui),$("#steps .container:nth-last-child(1) .insert-step").prop("disabled",!0),$("#steps .container:nth-last-child(2)")&&$("#steps .container:nth-last-child(2) .insert-step").prop("disabled",!1)):n.insertBefore(t.ui,$(n).children()[r.index])):$("#load-image").append(t.ui),$(t.ui.querySelector(".toggle")).on("click",()=>{$(t.ui.querySelector(".toggleIcon")).toggleClass("fa-caret-up").toggleClass("fa-caret-down"),$(t.ui.querySelectorAll(".cal")).toggleClass("collapse")});var b=0,q=!1;$(t.ui.querySelector(".input-form")).on("submit",function(n){n.preventDefault(),q&&($(t.ui.querySelector("div.details")).find("input,select").each(function(e,n){$(n).data("initValue",$(n).val()).data("hasChangedBefore",!1),t.options[$(n).attr("name")]=$(n).val()}),e.run({index:t.index-1}),a.setUrlHashParameter("steps",e.toString()),$(t.ui.querySelector(".btn-save")).prop("disabled",!0),q=!1,b=0)}),$(t.ui.querySelectorAll(".target")).each(function(e,n){$(n).data("initValue",$(n).val()).data("hasChangedBefore",!1).on("input",function(){var e,n,i,a;$(this).focus().data("hasChangedBefore",(e=$(this).val(),n=$(this).data("initValue"),i=$(this).data("hasChangedBefore"),a=!(isNaN(n)||isNaN(e)?e===n:e-n==0),q=(b+=i?a?0:-1:a?1:0)>0,$(t.ui.querySelector(".btn-save")).prop("disabled",!q),a))})}),$('input[type="range"]').on("input",function(){$(this).next().html($(this).val())})},onComplete:function(t){$(t.ui.querySelector(".load")).hide(),$(t.ui.querySelector("img")).show(),$(t.ui.querySelector(".load-spin")).hide(),t.imgElement.src=t.output;var n=t.ui.querySelector(".img-thumbnail");for(let e=0;e<t.linkElements.length;e++)t.linkElements[e].contains(n)&&(t.linkElements[e].href=t.output);for(let e=0;e<t.linkElements.length;e++)t.linkElements[e].download=t.name+"."+t.output.split("/")[1].split(";")[0],t.linkElements[e].target="_blank";if(e.modulesInfo().hasOwnProperty(t.name)){var i=e.modulesInfo(t.name).inputs,a=e.modulesInfo(t.name).outputs;for(var s in i)void 0!==t.options[s]&&("input"===i[s].type.toLowerCase()&&$(t.ui.querySelector('div[name="'+s+'"] input')).val(t.options[s]).data("initValue",t.options[s]),"select"===i[s].type.toLowerCase()&&$(t.ui.querySelector('div[name="'+s+'"] select')).val(t.options[s]).data("initValue",t.options[s]));for(var s in a)void 0!==t[s]&&$(t.ui.querySelector('div[name="'+s+'"] input')).val(t[s])}},onRemove:function(e){e.ui.remove(),$("#steps .container:nth-last-child(1) .insert-step").prop("disabled",!0),$("div[class^=imgareaselect-]").remove()},onDraw:function(e){$(e.ui.querySelector(".load")).show(),$(e.ui.querySelector("img")).hide(),$(e.ui.querySelector(".toggleIcon")).hasClass("fa-caret-down")&&$(e.ui.querySelector(".load-spin")).show()},notify:s}}"undefined"==typeof window&&(t.exports={DefaultHtmlStepUi:s}),t.exports=s},{"./intermediateHtmlStepUi.js":6,"./urlHash.js":7}],5:[function(e,t,n){function i(e,t,n,i){var a=ImageSequencer();function s(t){var n=document.createElement("img");n.classList.add("img-thumbnail"),n.classList.add("no-border"),n.src=t,$(n).css("max-width","200%"),$(n).css("transform","translateX(-20%)");$("#"+i+" .row").find("div").each(function(){$(this).find("div").attr("data-value")===e&&$(this).find("div").append(n)})}a.loadImage(n,function(){a=a.addSteps("resize",{resize:"40%"}),"crop"===e?a.addSteps(e,t).run(s):a.addSteps(e,{[e]:t}).run(s)})}t.exports={generatePreview:i,updatePreviews:function(e,t){$("#"+t+" img").remove();var n={resize:"125%",brightness:"20",saturation:"5",rotate:90,contrast:90,crop:{x:0,y:0,w:"(50%)",h:"(50%)",noUI:!0}};Object.keys(n).forEach(function(a,s){i(a,Object.values(n)[s],e,t)})}}},{}],6:[function(e,t,n){var i=e("./urlHash.js"),a=e("./insertPreview.js");t.exports=function(e,t,n){function s(){var t=$("#insertStep select").val();$("#insertStep .info").html(e.modulesInfo(t).description),$("#insertStep #add-step-btn").prop("disabled",!1)}function r(t){n=n||{};var a=$("#insertStep select");if("none"!=a.val()){var s=a.val();$("div .insertDiv").remove(),sequencer.sequences[s]?sequencer.sequences[s].length:sequencer.modules[s][1].length&&sequencer.modules[s][1].length,e.insertSteps(t+1,s).run({index:t}),i.setUrlHashParameter("steps",e.toString())}}return insertStep=function(n){var i=e.modulesInfo(),o='<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>                </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 class="center-align">                <select class="form-control input-lg" id="selectStep">                  \x3c!-- The default null selection has been appended manually in demo.js                  This is because the options in select are overritten when options are appended.--\x3e                </select>                <button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>              </div>            </div>          </div>        </section>        </div>';o=(new DOMParser).parseFromString(o,"text/html").querySelector("div"),t.ui.querySelector("div.step").insertAdjacentElement("afterend",o),a.updatePreviews(t.output,"insertStep");var l=$("#insertStep select");for(var c in l.html(""),i)void 0!==i[c]&&l.append('<option value="'+c+'">'+i[c].name+"</option>");$("#insertStep #add-step-btn").prop("disabled",!0),l.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"),l.val(newStep),s(),r(n),$(this).removeClass("selected")}),$(t.ui.querySelector("#insertStep select")).on("change",s),$(t.ui.querySelector("#insertStep #add-step-btn")).on("click",function(){r(n)})},{insertStep:insertStep}}},{"./insertPreview.js":5,"./urlHash.js":7}],7:[function(e,t,n){function i(){var e=window.location.hash;e&&(e=e.split("#")[1]);var t={};return e.split("&").forEach(function(e,n){""!=(e=e.split("="))[0]&&(t[e[0]]=e[1])}),t}function a(e){var t=Object.keys(e),n=Object.values(e),i=[];t.forEach(function(e,a){""!=e&&i.push(t[a]+"="+n[a])});var a=i.join("&");window.location.hash=a}t.exports={getUrlHashParameter:function(e){return i()[e]},setUrlHashParameter:function(e,t){var n=i();n[e]=t,a(n)},getUrlHashParameters:i,setUrlHashParameters:a}},{}]},{},[1]);
\ No newline at end of file
diff --git a/examples/demo.css b/examples/demo.css
index dad2495e..b1c57ebc 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -249,4 +249,4 @@ h1 {
 a.name-header{
   text-decoration: none;
   color: #445;
-}
+}
\ No newline at end of file
diff --git a/examples/index.html b/examples/index.html
index a2aa37b7..1830b17c 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -86,6 +86,12 @@
           </div>
           <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>
diff --git a/examples/lib/insertPreview.js b/examples/lib/insertPreview.js
index f5a474ad..26b8cfca 100644
--- a/examples/lib/insertPreview.js
+++ b/examples/lib/insertPreview.js
@@ -31,6 +31,7 @@ function generatePreview(previewStepName, customValues, path, selector) {
     $('#'+selector+' img').remove();
 
     var previewSequencerSteps = {
+      "resize": "125%",
       "brightness": "20",
       "saturation": "5",
       "rotate": 90,
diff --git a/examples/lib/intermediateHtmlStepUi.js b/examples/lib/intermediateHtmlStepUi.js
index 591c0b4c..1431b381 100644
--- a/examples/lib/intermediateHtmlStepUi.js
+++ b/examples/lib/intermediateHtmlStepUi.js
@@ -10,6 +10,12 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
             <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>\