eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-11 19:00:00 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
0e6e1837a6f0e66895b6d00729fe3e2179b1dbb6
image-sequencer/dist/image-sequencer-ui.min.js
Mridul97 0e6e1837a6 Use browserify for ui js files and refactor ui js files (#668) 
* changes

* changes

* changes
2019-01-22 18:15:23 -04:00

1 line
16 KiB
JavaScript
Raw Blame History

!function(){return function e(t,n,a){function i(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 i(t[r][1][e]||e)},d,d.exports,e,t,n,a)}return n[r].exports}for(var s="function"==typeof require&&require,r=0;r<a.length;r++)i(a[r]);return i}}()({1:[function(e,t,n){var a=e("./lib/defaultHtmlSequencerUi.js"),i=e("./lib/cache.js"),s=e("./lib/defaultHtmlStepUi.js"),r=e("./lib/urlHash.js"),o=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(s(sequencer));var t=a(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 a=document.getElementsByClassName("step-thumbnail"),i=[],s=0;s<a.length;s++)i.push(a[s].src);var r={gifWidth:a[0].width,gifHeight:a[0].height,images:i,frameDuration:7};gifshot.createGIF(r,function(e){if(!e.error){var a=e.image,i=document.createElement("img");i.id="gif_element",i.src=a;var s=$("#js-download-gif-modal");$("#js-download-as-gif-button").one("click",function(){download(a,"index.gif","image/gif"),s.modal("hide")});var r=document.getElementById("js-download-modal-gif-container");r.innerHTML="",r.appendChild(i),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];IntermediateHtmlStepUi(sequencer);n.output.src=t.result,sequencer.run({index:0}),n.options.step.imgElement.src=t.result,o.updatePreviews(t.result,"addStep"),o.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}}),i(),r.getUrlHashParameter("src")?o.updatePreviews(r.getUrlHashParameter("src"),"addStep"):o.updatePreviews("images/tulips.png","addStep")}},{"./lib/cache.js":2,"./lib/defaultHtmlSequencerUi.js":3,"./lib/defaultHtmlStepUi.js":4,"./lib/insertPreview.js":5,"./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 a=e("./urlHash.js");t.exports=function(e,t){var n=(t=t||{}).addStepSel=t.addStepSel||"#addStep",i=t.removeStepSel=t.removeStepSel||"button.remove";function s(){var t=a.getUrlHashParameter("steps");t&&(e.importString(t),e.run({index:0})),a.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=$(i).index(this)+1;sequencer.removeSteps(e).run({index:e-1}),a.setUrlHashParameter("steps",sequencer.toString()),r()},addStepUi:function(){if("none"!=$(n+" select").val()){var i=$(n+" select").val(),s=1;sequencer.sequences[i]?s=sequencer.sequences[i].length:sequencer.modules[i][1].length&&(s=sequencer.modules[i][1].length),e.addSteps(i,t).run({index:e.images.image1.steps.length-s-1}),$(n+" .info").html("Select a new module to add to your sequence."),r(),a.setUrlHashParameter("steps",e.toString())}}}}},{"./urlHash.js":7}],4:[function(e,t,n){var a=e("./intermediateHtmlStepUi.js"),i=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></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=a(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}),i.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,a,i;$(this).focus().data("hasChangedBefore",(e=$(this).val(),n=$(this).data("initValue"),a=$(this).data("hasChangedBefore"),i=!(isNaN(n)||isNaN(e)?e===n:e-n==0),q=(b+=a?i?0:-1:i?1:0)>0,$(t.ui.querySelector(".btn-save")).prop("disabled",!q),i))})}),$('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,i=e.modulesInfo(t.name).outputs;for(var s in a)void 0!==t.options[s]&&("input"===a[s].type.toLowerCase()&&$(t.ui.querySelector('div[name="'+s+'"] input')).val(t.options[s]).data("initValue",t.options[s]),"select"===a[s].type.toLowerCase()&&$(t.ui.querySelector('div[name="'+s+'"] select')).val(t.options[s]).data("initValue",t.options[s]));for(var s in i)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()},notify:s}}"undefined"==typeof window&&(t.exports={DefaultHtmlStepUi:s}),t.exports=s},{"./intermediateHtmlStepUi.js":6,"./urlHash.js":7}],5:[function(e,t,n){function a(e,t,n,a){var i=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%)");$("#"+a+" .row").find("div").each(function(){$(this).find("div").attr("data-value")===e&&$(this).find("div").append(n)})}i.loadImage(n,function(){i=i.addSteps("resize",{resize:"40%"}),"crop"===e?i.addSteps(e,t).run(s):i.addSteps(e,{[e]:t}).run(s)})}t.exports={generatePreview:a,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(i,s){a(i,Object.values(n)[s],e,t)})}}},{}],6:[function(e,t,n){var a=e("./urlHash.js");t.exports=function(e,t,n){function i(){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 i=$("#insertStep select");if("none"!=i.val()){var s=i.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}),a.setUrlHashParameter("steps",e.toString())}}return insertStep=function(n){var a=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),updatePreviews(t.output,"insertStep");var o=$("#insertStep select");for(var l in o.html(""),a)void 0!==a[l]&&o.append('<option value="'+l+'">'+a[l].name+"</option>");$("#insertStep #add-step-btn").prop("disabled",!0),o.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"),o.val(newStep),i(),s(n),$(this).removeClass("selected")}),$(t.ui.querySelector("#insertStep select")).on("change",i),$(t.ui.querySelector("#insertStep #add-step-btn")).on("click",function(){s(n)})},{insertStep:insertStep}}},{"./urlHash.js":7}],7:[function(e,t,n){function a(){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 i(e){var t=Object.keys(e),n=Object.values(e),a=[];t.forEach(function(e,i){""!=e&&a.push(t[i]+"="+n[i])});var i=a.join("&");window.location.hash=i}t.exports={getUrlHashParameter:function(e){return a()[e]},setUrlHashParameter:function(e,t){var n=a();n[e]=t,i(n)},getUrlHashParameters:a,setUrlHashParameters:i}},{}]},{},[1]);
Reference in New Issue View Git Blame Copy Permalink