dragdrop.coffee

# Defaults
grid = [10,10]
container = "#container"

# Button types
buttons =
  text :
    html :  '<div>
              <div class="content">
                Double click to edit me
              </div>
            </div>'
    dblclick : ->
      console.log this
      content_el = $(this).children('.content')
      content = content_el.html()

      # Make new instance of CKEditor -> remove current if exists.
      editor = CKEDITOR.instances.editor
      if editor?
        editor.destroy()
      $('#editor').ckeditor()
      editor = CKEDITOR.instances.editor

      # Add .edits content to ckeditor, add event handler to update .edit
      editor.setData(content)
      editor.on 'change', -> content_el.html editor.getData()
      this
  
  image :
    html :  '<div>
              <strong>Image will go here</strong>
            </div>'
    dblclick : ->
      alert "this works"

# Function to update the server with position and dimensions of .edits
updatePosition = (evt) ->
  self = evt.target
  $self = $(self)

  pos = $self.position()
  xPos = pos.left
  yPos = pos.top
  width = $self.width()
  height = $self.height()
  console.log(xPos,yPos,width,height)

observeEdits = ->
  $('.edit:not(.ui-draggable)')
    .append('<div class="gridline gridline_x"></div><div class="gridline gridline_y"></div>')
    
    .mousedown ->
      # This should be the only edit with class .selected
      $('.edit.selected').removeClass('selected')
      $(this).addClass('selected')
      this

    .dblclick ->
      # get edit type (eg. text / img etc) and match against buttons to find dblclick function
      edit_class = @className.match(/edit_([^\s]*)/)[1]
      buttons[edit_class].dblclick.apply @

    .draggable(
      grid : grid

      # Always should be highest z-index of .edits
      stack : '.edit'

      # Snap to other .edits
      # snap: '.edit'
      snapMode : 'outer'

      containment : container

      # functions to run during drag events
      start : (evt) ->
        # show gridlines
        $(this).children('.gridline').show()

      drag : (evt, ui) ->
        # Force draggable to stay on grid
        ui.position.left -= ui.position.left % grid[0]
        ui.position.top -= ui.position.top % grid[1]

      stop : (evt) ->
        # hide gridlines
        $(this).children('.gridline').hide()

        updatePosition(evt, this)
     )
     
     .resizable(
      grid : grid
      handles : 'n, e, s, w, ne, se, sw, nw '
      containment : container
      stop : updatePosition
      resize : (evt,ui) ->
        # Force resize to stay on grid
        ui.size.width -= ui.size.width % grid[0]
    )
$ ->
  observeEdits()

  # Toolbox items can be dragged onto the container to create new
  # text fields/ images / etc...
  $('#toolbox > a')
    .draggable(
      helper : 'clone'
    )
    # We will clone the 'helper' when we finish dragging
    .bind 'dragstop', (event,ui) ->
      # Find the position relative to the container
      {left,top} = ui.position
      left -= $(container).position().left
      top -= $(container).position().top

      # Find the button in the button object that matches this button
      button_class = @className.match(/button_([^\s]*)/)[1]
      button = buttons[button_class]
      console.log button

      $(button.html)
        .addClass('edit')
        .addClass("edit_#{button_class}")
        .appendTo(container)
        .css
          left : left
          top : top

      # Call observeEdits to make this act as one of the .edits
      observeEdits()