mirror of
https://github.com/publiclab/image-sequencer.git
synced 2025-12-12 19:30:00 +01:00
1 line
16 KiB
JavaScript
1 line
16 KiB
JavaScript
var setupCache=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()})};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=' <i class="fa fa-info-circle" aria-hidden="true"></i> 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=' <div class="container"> <div class="row step"> <form class="input-form"> <div class="col-md-4 details"> <h3>'+t.name+' <span class="toggle"><i class="fa fa-caret-up" aria-hidden="true"></i></span></h3><div class="collapse"><p><i>"'+(t.description||"")+'</i></p></div> </div> </form> <div class="col-md-8 collapse"> <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 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+='<select class="form-control target" name="'+c+'">',p.values)u+="<option>"+p.values[m]+"</option>";u+="</select>"}else{let e=t.options[c]||p.default;u='<input class="form-control target" type="'+p.type+'" name="'+c+'" value="'+e+'" placeholder ="'+(p.placeholder||""),"range"==p.type.toLowerCase()?u+='"min="'+p.min+'"max="'+p.max+'"step="'+p.step+'"><span>'+e+"</span>":u+='">'}else u+='<span class="output"></span>';var f=document.createElement("div");f.className="row",f.setAttribute("name",c);var v=o[c].desc||c;f.innerHTML="<div class='det collapse'> <label for='"+c+"'>"+v+"</label> "+u+" </div>",t.ui.querySelector("div.details").appendChild(f)}$(t.ui.querySelector("div.details")).append('<div class="collapse"><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(i.parseFromString('<div class="collapse"><div class="tools btn-group"> <button confirm="Are you sure?" onclick="stepRemovedNotify()" 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(".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=>{var n=e.target.className;console.log("ele "+element),"fa fa-caret-up"==n?($(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<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 a=e.modulesInfo(t.name).inputs,s=e.modulesInfo(t.name).outputs;for(var i in a)void 0!==t.options[i]&&("input"===a[i].type.toLowerCase()&&$(t.ui.querySelector('div[name="'+i+'"] input')).val(t.options[i]).data("initValue",t.options[i]),"select"===a[i].type.toLowerCase()&&$(t.ui.querySelector('div[name="'+i+'"] select')).val(t.options[i]).data("initValue",t.options[i]));for(var i in s)void 0!==t[i]&&$(t.ui.querySelector('div[name="'+i+'"] input')).val(t[i])}},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()}}}function IntermediateHtmlStepUi(e,t,n){function a(){var t=$("#insertStep select").val();$("#insertStep .info").html(e.modulesInfo(t).description),$("#insertStep #add-step-btn").prop("disabled",!1)}function s(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}),setUrlHashParameter("steps",e.toString())}}return insertStep=function(n){var i=e.modulesInfo(),o='<div class="row insertDiv"> <div class="col-md-6" 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"> <i class="fa fa-sun-o fa-4x"></i> </button> <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> <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> <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> <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> <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);var r=$("#insertStep select");for(var l in r.html(""),i)void 0!==i[l]&&r.append('<option value="'+l+'">'+i[l].name+"</option>");$("#insertStep #add-step-btn").prop("disabled",!0),r.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"),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('<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(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<a.length;i++)s.push(a[i].src);var o={gifWidth:a[0].width,gifHeight:a[0].height,images:s,frameDuration:7};gifshot.createGIF(o,function(e){if(!e.error){var a=e.image,s=document.createElement("img");s.id="gif_element",s.src=a;var i=$("#js-download-gif-modal");$("#js-download-as-gif-button").one("click",function(){download(a,"index.gif","image/gif"),i.modal("hide")});var o=document.getElementById("js-download-modal-gif-container");o.innerHTML="",o.appendChild(s),i.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];n.output.src=t.result,sequencer.run({index:0}),n.options.step.imgElement.src=t.result,a(t.result)},onTakePhoto:function(e){var t=sequencer.images.image1.steps[0];t.output.src=e,sequencer.run({index:0}),t.options.step.imgElement.src=e}}),setupCache(),getUrlHashParameter("src")?a(getUrlHashParameter("src")):a("images/tulips.png")}; |