diff --git a/dist/image-sequencer-ui.js b/dist/image-sequencer-ui.js index 1dd01913..5e516a02 100644 --- a/dist/image-sequencer-ui.js +++ b/dist/image-sequencer-ui.js @@ -155,14 +155,14 @@ function DefaultHtmlStepUi(_sequencer, options) {
\
\
\ -

' +step.name + - ' ' + - '

"'+ +

\ + ' +step.name + ' ' + + '

"'+ (step.description || "") + '

\
\ \ -
\ +
\ \ \
\ @@ -171,7 +171,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
'; var tools = - '
\ + '
\ \ @@ -236,7 +236,7 @@ function DefaultHtmlStepUi(_sequencer, options) { div.setAttribute("name", paramName); var description = inputs[paramName].desc || paramName; div.innerHTML = - "
\ + "
\
';var s=IntermediateHtmlStepUi(e,t),i=new DOMParser;if(t.ui=i.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 o=e.modulesInfo(t.name).inputs,r=e.modulesInfo(t.name).outputs,l=Object.assign(o,r);for(var c in l){var d=o.hasOwnProperty(c),u="",p=d?o[c]:{};if(d)if("select"==p.type.toLowerCase()){for(var m in u+='"}else{let e=t.options[c]||p.default;u=''+e+"":u+='">'}else u+='';var f=document.createElement("div");f.className="row",f.setAttribute("name",c);var v=o[c].desc||c;f.innerHTML="
"+u+"
",t.ui.querySelector("div.details").appendChild(f)}$(t.ui.querySelector("div.details")).append('

Press apply to see changes

')}"load-image"!=t.name?(t.ui.querySelector("div.details").appendChild(i.parseFromString('
',"text/html").querySelector("div")),$(t.ui.querySelectorAll(".insert-step")).on("click",function(){s.insertStep(t.ID)}),a.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()[a.index])):$("#load-image").append(t.ui),$(t.ui.querySelector(".toggle")).on("click",e=>{"fa fa-caret-up"==e.target.className?($(t.ui.querySelectorAll(".collapse")).show(),e.target.className="fa fa-caret-down"):($(t.ui.querySelectorAll(".collapse")).hide(),e.target.className="fa fa-caret-up")});var h=0,g=!1;$(t.ui.querySelector(".input-form")).on("submit",function(n){n.preventDefault(),g&&($(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}),setUrlHashParameter("steps",e.toString()),$(t.ui.querySelector(".btn-save")).prop("disabled",!0),g=!1,h=0)}),$(t.ui.querySelectorAll(".target")).each(function(e,n){$(n).data("initValue",$(n).val()).data("hasChangedBefore",!1).on("input",function(){var e,n,a,s;$(this).focus().data("hasChangedBefore",(e=$(this).val(),n=$(this).data("initValue"),a=$(this).data("hasChangedBefore"),s=!(isNaN(n)||isNaN(e)?e===n:e-n==0),g=(h+=a?s?0:-1:s?1:0)>0,$(t.ui.querySelector(".btn-save")).prop("disabled",!g),s))})}),$('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.imgElement.src=t.output;var n=t.ui.querySelector(".img-thumbnail");for(let e=0;e

Select a new module to add to your sequence.

Brightness

Contrast

Saturation

Rotate

Crop

';o=(new DOMParser).parseFromString(o,"text/html").querySelector("div"),t.ui.querySelector("div.step").insertAdjacentElement("afterend",o);var r=$("#insertStep select");for(var l in r.html(""),i)void 0!==i[l]&&r.append('");$("#insertStep #add-step-btn").prop("disabled",!0),r.append(''),$("#insertStep .radio-group .radio").on("click",function(){$(this).parent().find(".radio").removeClass("selected"),$(this).addClass("selected"),newStep=$(this).attr("data-value"),r.val(newStep),a(),s(n),$(this).removeClass("selected")}),$(t.ui.querySelector("#insertStep select")).on("change",a),$(t.ui.querySelector("#insertStep #add-step-btn")).on("click",function(){s(n)})},{insertStep:insertStep}}$(document).ready(function(e){e(function(){e(window).scroll(function(){e(this).scrollTop()>100?e(".move-up").fadeIn():e(".move-up").fadeOut()}),e(".move-up button").click(function(){return e("body,html").animate({scrollTop:0},800),!1})})});const staticCacheName="image-sequencer-static-v3";function getUrlHashParameter(e){return getUrlHashParameters()[e]}function getUrlHashParameters(){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 setUrlHashParameters(e){var t=Object.keys(e),n=Object.values(e),a=[];t.forEach(function(e,s){""!=e&&a.push(t[s]+"="+n[s])});var s=a.join("&");window.location.hash=s}function setUrlHashParameter(e,t){var n=getUrlHashParameters();n[e]=t,setUrlHashParameters(n)}self.addEventListener("install",e=>{console.log("Attempting to install service worker")}),self.addEventListener("activate",function(e){console.log("[ServiceWorker] Activate"),e.waitUntil(caches.keys().then(function(e){return Promise.all(e.filter(function(e){return e.startsWith("image-sequencer-")&&e!=staticCacheName}).map(function(e){return caches.delete(e)}))}))}),self.addEventListener("fetch",function(e){e.respondWith(caches.open(staticCacheName).then(function(t){return t.match(e.request).then(function(n){return n||fetch(e.request).then(function(n){return"GET"==e.request.method&&t.put(e.request,n.clone()),n})})}))}),window.onload=function(){function e(){var e=sequencer.modulesInfo();console.log(e);var t=$("#addStep select");for(var n in t.html(""),e)e[n]&&e[n].name&&t.append('");t.append('')}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(DefaultHtmlStepUi(sequencer));var t=DefaultHtmlSequencerUi(sequencer);getUrlHashParameter("src")?sequencer.loadImage(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"),console.log(newStep),$("#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;function a(e){$("#addStep img").remove();var t={brightness:"175",saturation:"0.5",rotate:90,contrast:90,crop:{x:0,y:0,w:"(50%)",h:"(50%)",noUI:!0}};Object.keys(t).forEach(function(n,a){!function(e,t,n){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%)"),$("#addStep .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?(console.log(t),a.addSteps(e,t).run(s)):a.addSteps(e,{[e]:t}).run(s)})}(n,Object.values(t)[a],e)})}$(".js-view-as-gif").on("click",function(e){if(!n){n=!0;var t=e.target;t.disabled=!0;try{for(var a=document.getElementsByClassName("step-thumbnail"),s=[],i=0;i{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()})};function DefaultHtmlSequencerUi(e,t){var n=(t=t||{}).addStepSel=t.addStepSel||"#addStep",a=t.removeStepSel=t.removeStepSel||"button.remove";t.selectStepSel=t.selectStepSel||"#selectStep";function s(){var t=getUrlHashParameter("steps");t&&(e.importString(t),e.run({index:0})),setUrlHashParameter("steps",sequencer.toString())}function i(){sequencer.images.image1.steps.length<2?$(" #save-seq").prop("disabled",!0):$(" #save-seq").prop("disabled",!1)}return{onLoad:function(){s(),$("#selectStep").val()||$(n+" #add-step-btn").prop("disabled",!0),i()},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}),setUrlHashParameter("steps",sequencer.toString()),i()},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."),i(),setUrlHashParameter("steps",e.toString())}}}}function stepRemovedNotify(){if(0==$("#stepRemovedNotification").length){var e=document.createElement("span");e.innerHTML=' Step Removed ',e.id="stepRemovedNotification",$("body").append(e)}$("#stepRemovedNotification").fadeIn(500).delay(200).fadeOut(500)}function DefaultHtmlStepUi(e,t){var n=(t=t||{}).stepsEl||document.querySelector("#steps");t.selectStepSel=t.selectStepSel||"#selectStep";return{getPreview:function(){return step.imgElement},onSetup:function(t,a){t.options&&t.options.description&&(t.description=t.options.description),t.ui='

'+t.name+'

"'+(t.description||"")+'

';var s=IntermediateHtmlStepUi(e,t),i=new DOMParser;if(t.ui=i.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 o=e.modulesInfo(t.name).inputs,r=e.modulesInfo(t.name).outputs,l=Object.assign(o,r);for(var c in l){var d=o.hasOwnProperty(c),u="",p=d?o[c]:{};if(d)if("select"==p.type.toLowerCase()){for(var m in u+='"}else{let e=t.options[c]||p.default;u=''+e+"":u+='">'}else u+='';var f=document.createElement("div");f.className="row",f.setAttribute("name",c);var v=o[c].desc||c;f.innerHTML="
"+u+"
",t.ui.querySelector("div.details").appendChild(f)}$(t.ui.querySelector("div.details")).append('

Press apply to see changes

')}"load-image"!=t.name?(t.ui.querySelector("div.details").appendChild(i.parseFromString('
',"text/html").querySelector("div")),$(t.ui.querySelectorAll(".insert-step")).on("click",function(){s.insertStep(t.ID)}),a.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()[a.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 h=0,g=!1;$(t.ui.querySelector(".input-form")).on("submit",function(n){n.preventDefault(),g&&($(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}),setUrlHashParameter("steps",e.toString()),$(t.ui.querySelector(".btn-save")).prop("disabled",!0),g=!1,h=0)}),$(t.ui.querySelectorAll(".target")).each(function(e,n){$(n).data("initValue",$(n).val()).data("hasChangedBefore",!1).on("input",function(){var e,n,a,s;$(this).focus().data("hasChangedBefore",(e=$(this).val(),n=$(this).data("initValue"),a=$(this).data("hasChangedBefore"),s=!(isNaN(n)||isNaN(e)?e===n:e-n==0),g=(h+=a?s?0:-1:s?1:0)>0,$(t.ui.querySelector(".btn-save")).prop("disabled",!g),s))})}),$('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.imgElement.src=t.output;var n=t.ui.querySelector(".img-thumbnail");for(let e=0;e

Select a new module to add to your sequence.

Brightness

Contrast

Saturation

Rotate

Crop

';o=(new DOMParser).parseFromString(o,"text/html").querySelector("div"),t.ui.querySelector("div.step").insertAdjacentElement("afterend",o);var r=$("#insertStep select");for(var l in r.html(""),i)void 0!==i[l]&&r.append('");$("#insertStep #add-step-btn").prop("disabled",!0),r.append(''),$("#insertStep .radio-group .radio").on("click",function(){$(this).parent().find(".radio").removeClass("selected"),$(this).addClass("selected"),newStep=$(this).attr("data-value"),r.val(newStep),a(),s(n),$(this).removeClass("selected")}),$(t.ui.querySelector("#insertStep select")).on("change",a),$(t.ui.querySelector("#insertStep #add-step-btn")).on("click",function(){s(n)})},{insertStep:insertStep}}$(document).ready(function(e){e(function(){e(window).scroll(function(){e(this).scrollTop()>100?e(".move-up").fadeIn():e(".move-up").fadeOut()}),e(".move-up button").click(function(){return e("body,html").animate({scrollTop:0},800),!1})})});const staticCacheName="image-sequencer-static-v3";function getUrlHashParameter(e){return getUrlHashParameters()[e]}function getUrlHashParameters(){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 setUrlHashParameters(e){var t=Object.keys(e),n=Object.values(e),a=[];t.forEach(function(e,s){""!=e&&a.push(t[s]+"="+n[s])});var s=a.join("&");window.location.hash=s}function setUrlHashParameter(e,t){var n=getUrlHashParameters();n[e]=t,setUrlHashParameters(n)}self.addEventListener("install",e=>{console.log("Attempting to install service worker")}),self.addEventListener("activate",function(e){console.log("[ServiceWorker] Activate"),e.waitUntil(caches.keys().then(function(e){return Promise.all(e.filter(function(e){return e.startsWith("image-sequencer-")&&e!=staticCacheName}).map(function(e){return caches.delete(e)}))}))}),self.addEventListener("fetch",function(e){e.respondWith(caches.open(staticCacheName).then(function(t){return t.match(e.request).then(function(n){return n||fetch(e.request).then(function(n){return"GET"==e.request.method&&t.put(e.request,n.clone()),n})})}))}),window.onload=function(){function e(){var e=sequencer.modulesInfo();console.log(e);var t=$("#addStep select");for(var n in t.html(""),e)e[n]&&e[n].name&&t.append('");t.append('')}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(DefaultHtmlStepUi(sequencer));var t=DefaultHtmlSequencerUi(sequencer);getUrlHashParameter("src")?sequencer.loadImage(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"),console.log(newStep),$("#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;function a(e){$("#addStep img").remove();var t={brightness:"175",saturation:"0.5",rotate:90,contrast:90,crop:{x:0,y:0,w:"(50%)",h:"(50%)",noUI:!0}};Object.keys(t).forEach(function(n,a){!function(e,t,n){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%)"),$("#addStep .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?(console.log(t),a.addSteps(e,t).run(s)):a.addSteps(e,{[e]:t}).run(s)})}(n,Object.values(t)[a],e)})}$(".js-view-as-gif").on("click",function(e){if(!n){n=!0;var t=e.target;t.disabled=!0;try{for(var a=document.getElementsByClassName("step-thumbnail"),s=[],i=0;i\
\
\ -

' +step.name + - ' ' + - '

"'+ +

\ + ' +step.name + ' ' + + '

"'+ (step.description || "") + '

\
\ \ -
\ +
\ \ \
\ @@ -49,7 +49,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
'; var tools = - '
\ + '
\ \ @@ -114,7 +114,7 @@ function DefaultHtmlStepUi(_sequencer, options) { div.setAttribute("name", paramName); var description = inputs[paramName].desc || paramName; div.innerHTML = - "
\ + "
\