masonry-ppt/js/main.coffee

jQuery(document).ready(() ->
  jQuery("#masonryslide-container").hide()
)

jQuery(document).on('click', '#pack', () ->
  container = jQuery("#masonryslide-container")
  container.show()
  jQuery("#masonryslide").width(container.width() - 100)
  jQuery("#masonryslide").height(container.height() - 300)

  slide = document.getElementById('masonryslide')
  slide.innerHTML = ""
  grid = jQuery(slide).packery({
    itemSelector: ".grid-item"
    columnWidth: 400
  })
  for file in document.getElementById('masonryslide-files').files
    img = document.createElement("img")
    img.classList.add("obj")
    img.file = file

    fr = new FileReader()
    fr.onload = ((aImg) ->
      (e) ->
        aImg.src = e.target.result
        d = jQuery("<div class='grid-item'></div>")
        d.append(aImg)
        grid.append(d)
        grid.packery('layout')
        jQuery(document).trigger("masonryloadedImg")
    )(img)
    fr.readAsDataURL(file)

  jQuery(document).on("masonryloadedImg", () ->
    items = jQuery('#masonryslide .grid-item')
    if items.length == document.getElementById('masonryslide-files').files.length
      items.draggable()
      jQuery("#masonryslide").packery('bindUIDraggableEvents', items).packery('layout')
  )
)

getFileData = () ->
  data = []
  jQuery("#masonryslide .grid-item").each(() ->
    file = {}
    file.data = $(this).find("img").attr("src") # base64 string
    file.relx = $(this).css("left")
    file.rely = $(this).css("top")
    file.height = $(this).css("height")
    file.width = $(this).css("width")
    file.x = x
    file.x = y
    data.push(file)
  )
  return data

jQuery("#pngdownload").click(() ->
  data = getFileData()
  jQuery.post(ajaxurl, data, (response) ->
    window.location.href = response.redirect
  )
)