Hover animation

HoveredWidget.coffee

define (require, exports, module)->
  _Widget = require "../_Widget"
  HoveredWidget = _Widget.extend
    template: "#HoveredWidget"
    className: "hovered_widget"

    __delay: 3000
    __period: 1300

    initialize: ->
      @listenTo this, "onShow", @__onShow
      @listenTo this, "onClose", @__onClose

    __onShow: ->
      @__onScrollBinded ?= _.bind @__onScroll, this
      $(document).on "scroll", @__onScrollBinded
      @__initHovers()
      @__onScroll()

    __onClose: ->
      $(document).on "scroll", @__onScrollBinded

    __initHovers: ->
      hovers = @$('[data-hover]')
      hovers = for h in hovers
        order = (h.getAttribute 'data-hover')
        {
          key: order or _.uniqueId()
          order
          el: $(h)
        }
      @__hovers = _(hovers)
        .groupBy('key')
        .sortBy (item)-> item[0].order
        .value()


    __onScroll: (e)->
      scrollPos = $(document).scrollTop()
      viewPos = scrollPos + $(window).height() / 2
      minHeight = @$el.position().top
      maxHeight = minHeight + @$el.innerHeight()
      if minHeight < viewPos < maxHeight
        @__turnHover(true)
      else
        @__turnHover(false)

    __renderHovers: ->
      for items, index in @__hovers
        for i in items
          i.el.toggleClass 'active', (index is @__currentHover)

    __turnHover: (status)->
      return if @__status is status
      @__status = status
      if @__status
        @__startTick()
      else
        @__resetTick()

    __tick: ->
      @__renderHovers()
      @__currentHover++
      @__currentHover = 0 if @__currentHover >= @__hovers.length
      @__timer = _.delay (=>@__tick()), @__period

    __startTick: ->
      return if @__hovers.length is 0
      @__currentHover = 0
      @__delayTimer = _.delay (=>
         @__tick()
      ), @__delay

    __resetTick: ->
        clearTimeout @__timer
        clearTimeout @__delayTimer