CoffeeScript

by Greg Borreson

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation/foundation.clearing.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<br/><br/>
<div class="row">
  <div class="colummns large-12">
    <div class="row">
    <div class="large-4 columns">
      <h4>Background</h4>
      <br/>
      <ul id="bg_clearing" class="clearing-thumbs" data-clearing>
      </ul>
      <br/>
      <label for='bg'>Upload a background image</label>
      <input type="file" id="bg" name="bg" />
      <br/>
      <br/>
      <div id="framesets">
<!--       <h4>Frameset 1</h4>
      <ul id="frames1_clearing" class="clearing-thumbs" data-clearing>
      </ul>
      <br/>
      <label for='frames1'>Upload a frame sequence</label>
      <input type="file" id="frames1" name="frames1[]" multiple/>
      <label for='frames1'>Animation delay? (milliseconds)</label>
      <input type="text" id="frames1_pre_delay" name="frames1_pre_delay" value="0"/>
      <label for='frames1'>Animation duration? (milliseconds)</label>
      <input type="text" id="frames1_duration" name="frames1_duration" value="2000"/>
      <label for='frames1'>Loop?</label>
      <input type="checkbox" id="frames1_loop" value="true" checked />
      <br/><br/>
      <h4>Frameset 2</h4>
      <ul id="frames2_clearing" class="clearing-thumbs" data-clearing>
      </ul>
      <br/>
      <label for='frames2'>Upload a frame sequence</label>
      <input type="file" id="frames1" name="frames2[]" multiple/>
      <label for='frames1'>Animation delay? (milliseconds)</label>
      <input type="text" id="frames2_pre_delay" name="frames2_pre_delay" value="0" />
      <label for='frames1'>Animation duration? (milliseconds)</label>
      <input type="text"...

CSS

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}
input[type=text] {
  width: 100px;
}

CoffeeScript

window.order = 1 #Starting Frameset
window.framesets = []
window.frames = []

window.util = {}
window.util.multiPhotoDisplay = (input, target) ->
  #
  # Read the contents of the image file to be uploaded and display it.
  #
  
  #Build an array of data hrefs
  include = [];
  
  fileCount = 0;
  if (input.files && input.files[0])
    for file in input.files
      # console.log file
      reader = new FileReader()

      reader.onload = (e) ->
        image_html = """<li><a class="th" href="#{e.target.result}"><img width="75" src="#{e.target.result}"></a></li>"""
        include.push e.target.result
        # console.log e.target.result

        $(target).append(image_html)

        if $('.pics-label.hide').length != 0
          $('.pics-label').toggle('hide').removeClass('hide')

        $(document).foundation('reflow')

      reader.readAsDataURL(file)

    window.post_files = input.files
    if window.post_files != undefined
      input.files = $.merge(window.post_files, input.files)
  return include
  

class Frameset
  constructor: (@order) ->
    tempHtml = """
      <div id="frameset#{@order}">
      <h4>Frameset #{@order}</h4>
      <ul id="frames#{@order}_clearing" class="clearing-thumbs" data-clearing>
      </ul>
      <br/>
      <label for='frames#{@order}'>Upload a frame sequence</label>
      <input type="file" id="frames#{@order}" name="frames#{@order}[]" multiple/>
      <label for='frames#{@order}'>Animation delay? (milliseconds)</label>
      <input type="text" id="frames#{@order}_pre_delay" name="frames#{@order}_pre_delay" value="0"/>
      <label for='frames#{@order}'>Animation duration? (milliseconds)</label>
      <input type="text" id="frames#{@order}_duration" name="frames#{@order}_duration" value="2000"/>
      <label for='frames#{@order}'>Loop delay? (milliseconds)</label>
      <input type="text" id="frames#{@order}_loop_delay" name="frames#{@order}_loop_delay" value="2000"/>
      <label for='frames#{@order}'>Number of loops? (-1 for...