{% extends "layout.html" %} {% block title %}Sprite combiner{% endblock %} {% block head %} {% endblock %} {% block content %}
Drop files here or Click to upload multiple images
TEMPLATE 1234
Rows: Set name: .png
no result image yet click show - convert - convert
{% endblock %} {% block jsfooter %} $('.sp-showimages').click(function(e) { if ($(".sp-showimages span").first().hasClass("glyphicon-eye-open")){ $(".sp-showimages span").removeClass("glyphicon-eye-open" ).addClass("glyphicon-eye-close" ) $(".sp-showimages span").text(" Hide images") $(".sp-image").addClass("in") }else{ $(".sp-showimages span").removeClass("glyphicon-eye-close" ).addClass("glyphicon-eye-open" ) $(".sp-showimages span").text(" Show images") $(".sp-image").removeClass("in") } }); $('.sp-row ul.dropdown-menu a').click(function(e) { idstring=$($(e.target).closest( "div.sp-row" )).attr("id") $('#'+idstring+' div.sp-show').removeClass("in"); showdiv=$(e.target).attr("sp-show"); $('#'+idstring+' div.sp-'+showdiv).addClass("in"); //e.preventDefault();// prevent the default anchor functionality }); $('.sp-row button.sp-delete').click(function(e) { idstring=$($(e.target).closest( "div.sp-row" )).attr("id") delete files[idstring.substr(5)]; $("#"+idstring).remove(); }); $('.sp-row button.sp-download').click(function(e) { idstring=$($(e.target).closest( "div.sp-row" )).attr("id") blob = dataURItoBlob($("#"+idstring).find(".sp-resultimg").first().attr("src"),"image/png;"); saveAs(blob, $("#"+idstring).find(".sp-rename").first().val()+".png"); }); function dataURItoBlob(dataURI, dataTYPE) { var binary = atob(dataURI.split(',')[1]), array = []; for(var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i)); return new Blob([new Uint8Array(array)], {type: dataTYPE}); } $('.sp-row button.sp-convert').click(function(e) { idstring=$($(e.target).closest( "div.sp-row" )).attr("id") $("#"+idstring+" button.sp-download").prop('disabled', true); $("#"+idstring+" button.sp-convert").addClass("btn-info").prop('disabled', true); $("#"+idstring+" button.sp-convert span").addClass("glyphicon-cog").removeClass("glyphicon-play"); $.ajax({ url:'/_spritecomb', type: "POST", contentType:"application/json", dataType:"json", data: JSON.stringify({ name: $("#"+idstring).find(".sp-rename").first().val(), nrcols: $("#"+idstring).find(".sp-nrcols").first().val(), idstring: idstring, files: files[idstring.substr(5)]["fobj"] }) }).done(function(data) { //$("#"+data["idstring"]+" div.sp-image").html("") $("#"+data["idstring"]+" div.sp-image img.sp-resultimg").attr("src",data["resimg"]).addClass("imgresok").removeClass("imgresfail") $("#"+data["idstring"]+" div.sp-image span").text("") $("#"+data["idstring"]+" button.sp-download").prop('disabled', false); $("#"+data["idstring"]+" button.sp-convert").removeClass("btn-info").prop('disabled', false);; $("#"+data["idstring"]+" button.sp-convert span").removeClass("btn-info").removeClass("glyphicon-cog").addClass("glyphicon-play"); }).fail(new function(spid){ return function(data) { //$("#"+spid+" div.sp-image").html("") $("#"+spid+" div.sp-image img.sp-resultimg").attr("src",$("#spcomptemplate div.sp-image img.sp-resultimg").attr("src")).addClass("imgresfail").removeClass("imgresok") $("#"+spid+" button.sp-convert").removeClass("btn-info").addClass("btn-danger") $("#"+spid+" button.sp-convert span").removeClass("btn-info").removeClass("glyphicon-cog").addClass("glyphicon-fire").text(" Error"); } }(idstring)); }); function copysprow(idstring){ t=$("#spcomptemplate").clone( withDataAndEvents=true, deepWithDataAndEvents =true ); t.removeClass("collapse"); t.find(".sp-idval").text(n) t.find(".sp-rename").val(n.replace(/....$/,"")) t.prop("id",idstring); $("#sp-rows").append(t); } var myDropzone = new Dropzone("#dropzone", { url: "/file/post",previewsContainer:document.getElementById("imgout"), createImageThumbnails:false, thumbnailWidth:32, thumbnailHeight:40, fallback: function(){ messageElement = Dropzone.createElement("
Your browser does not support drag'n'drop file uploads. There is no fallback :( use a more recent browser.
"); return this.element.appendChild(messageElement); } }); myDropzone.options.autoProcessQueue=false; myDropzone.options.previewTemplate='
'; myDropzone.on("addedfile", function(file) { if ((file.type=="image/gif" || file.type=="image/png") && file.size<20000 ){ n=file.name.replace(/[^A-Za-z-_]/g, "_"); if(! files.hasOwnProperty(n)){ files[n]={fnlist:[],fobj:[],recreatethumb:true}; copysprow("spid-"+n); } if ( files[n]["fnlist"].indexOf(file.name) <0){ files[n]["fnlist"].push(file.name); //files[n]["fobj"].push(file); $("#spid-"+n+" span.badge").text(files[n]["fobj"].length+"/"+files[n]["fnlist"].length).removeClass("badge-success").addClass("alert-warning"); $("#spid-"+n+" button.sp-convert").prop('disabled', true); $("#spid-"+n+" div.sp-filenames").append("
"+file.name+"
"); readers[file.name]=new FileReader(); readers[file.name].onload=function(spid,fname){ return function(event) { dataURL = readers[fname].result; $("#spid-"+spid+" div.sp-image div.sp-putimages").append(""+fname+"") files[spid]["fobj"].push({"fn":fname,"cont":dataURL}) if (files[spid]["fobj"].length==files[spid]["fnlist"].length){ $("#spid-"+spid+" span.badge").text(files[spid]["fnlist"].length).addClass("badge-success").removeClass("alert-warning"); $("#spid-"+spid+" button.sp-convert").prop('disabled', false); }else{ $("#spid-"+spid+" span.badge").text(files[spid]["fobj"].length+"/"+files[spid]["fnlist"].length).removeClass("badge-success").addClass("alert-warning"); } //console.log(spid,event); } }(n,file.name); readers[file.name].readAsDataURL(file); } } }); {% endblock %} {% block help %} you can drop files here... {% endblock %}