Column Resizer

gistfile1.coffee

class @ColumnResizer
  doc            : null
  columnsWrapper : null
  dragging       : false
  currentGutter  : null
  snapped        : 
    x1: 0,
    x2: 0
  gutterWidth    : 20
  spanWidth      : 60

  constructor: (iframe, columnsWrapper) ->
    @doc            = iframe.contents()
    @columnsWrapper = @doc.find(columnsWrapper)
    @handle()

  # Handle columnsWrapper
  handle: ->
    # Handle start dragging
    @columnsWrapper.find('.ui-gutter').bind('mousedown', $.proxy((e) ->
      @currentGutter = $(e.currentTarget)
      @dragging      = true
      @snapped       =
        x1: @calculateStartPos(),
        x2: @snapped.x1 + @gutterWidth

      @currentGutter.find('span').show()
    , @))

    # Handle end dragging
    @doc.bind('mouseup', $.proxy((e) ->
      @currentGutter.find('span').hide() if @currentGutter

      @dragging      = false
      @currentGutter = null
      @snapped       = 
        x1: 0,
        x2: 0
    , @))
    
    # Handle while dragging
    @columnsWrapper.bind('mousemove', $.proxy((e) ->
      return unless @dragging

      # Get x coordinate relative to .ui-columns element
      offset = @currentGutter.parent().offset()
      x = e.pageX - offset.left
      
      @snap(x)
    , @))

  snap: (x) ->
    #x1, x2, dir = null

    if @movedTo(x, 'right')
      x1  = @snapped.x1 + (@spanWidth + @gutterWidth)
      dir = 'right'

    if @movedTo(x, 'left')
      x1  = @snapped.x1 - (@gutterWidth + @spanWidth)
      dir = 'left'

    x2 = x1 + @gutterWidth

    if x > x1 && x < x2
      # Find left & right columns
      leftColumn  = @currentGutter.prev('[class*="ui-column"]')
      rightColumn = @currentGutter.next('[class*="ui-column"]')

      # Find num of spans for left & right columns
      leftColumnSpan  = parseInt(leftColumn.attr('class').match(/(\d+)$/)[1])
      rightColumnSpan = parseInt(rightColumn.attr('class').match(/(\d+)$/)[1])

      if dir == 'right'
        leftColumnSpan++
        rightColumnSpan--

      if dir == 'left'
        leftColumnSpan--
        rightColumnSpan++

      # Check that we have positive column span
      if leftColumnSpan && rightColumnSpan
        leftColumn.attr('class', 'ui-column' + leftColumnSpan)
        rightColumn.attr('class', 'ui-column' + rightColumnSpan)

        @currentGutter.find('.ui-gutter-left').html('span' + leftColumnSpan)
        @currentGutter.find('.ui-gutter-right').html('span' + rightColumnSpan)

        @snapped = 
          'x1': x1,
          'x2': x2

  # In which direction we move gutter?
  movedTo: (x, where) ->
    return true if x > this.snapped.x2 && where == 'right'
    return true if x < this.snapped.x1 && where == 'left'
    return false

  # Calculate start position (relative to .ui-columns element)
  calculateStartPos: ->
    totalOffset = 0

    @currentGutter.prevAll('[class*="ui-column"], .ui-gutter').each ->
      totalOffset += $(@).outerWidth(true)

    totalOffset