gdoc_comment_carousel.coffee

# --DEMO CODE--
# Mimics the carousel sliding behavior found when clicking text links
# in a Google Drive Document that have comments
# <a href="#" class="screen" data-screen="1">Click!</a>

$(document).on 'click', '.screen', (evt) ->
  evt.preventDefault()
  console.log evt
  screen = $(this).data 'screen'

  # Drag the thumbs up the stack
  $(".screens li").removeClass 'active'
  $(".screen_#{screen}").addClass 'active'

  current = $(".screen_#{screen}").position().top
  target = $(evt.currentTarget).position().top
  dest = (target - current) - 85 # 85 comes from the CSS height I applied to the thumbnail.

  debug =
    current: current
    target: target
    dest: dest

  $('.screens').animate(top: dest)