flip.html

<div class='halo_unit'>
  <div class="photos two">
    <div class="flip_frame" id="helo_frame">
      <div class="tenant photo flip">
        <img alt="" src="f858aa44eddaf08f72354409bca7ac9d.jpg">
      </div>
      <div class="vegetable_set photo flip">
        <img alt="" src="bec0812cd17eb787240ac23ce76b986d.jpg">
      </div>
    </div>
    <ul class="flip_navs" data-flip="#helo_frame">
      <li class="nav tenant" data-flip_to="0">おまかせ相手</li>
      <li class="nav vegetable_set" data-flip_to="1">実際のお届け商品</li>
    </ul>
  </div>
</div>

flip.js.coffee

class FlipNavigator
  constructor: (navigationElement) ->
    @element = navigationElement

  isActive: () ->
    @element.hasClass('active')

  activate: () ->
    @element.addClass('active') unless @isActive()
    @correspondance.activate() unless @correspondance.isActive()

  deactivate: () ->
    @element.removeClass('active')

class FlipPanel
  constructor: (flipper) ->
    @flipper = flipper

  isActive: () ->
    @flipper.currentPoint == @index

  activate: () ->
    @flipper.moveToPoint(@index) unless @isActive()
    @correspondance.activate() unless @correspondance.isActive()

  deactivate:() ->
    if @flipper.hasNext()
      @flipper.toNext()
    else
      @flipper.moveToPoint(0)

class FlipController
  constructor: (navigationsElement) ->
    @navigators = []
    @panels = []
    @element = navigationsElement
    @flipper = Flipsnap(@element.data('flip'))
    @createNavigators()
    @createPanels()
    @reconcileNavigatorsAndFlips()
    @bindFlipEvent()
    @navigators[0].activate()

  reconcileNavigatorsAndFlips: () ->
    for navigator in @navigators
      correspongind_panel = @panels[navigator.index]
      navigator.correspondance = correspongind_panel
      correspongind_panel.correspondance = navigator

  bindFlipEvent: () ->
    @flipper.element.addEventListener('fspointmove', () =>
      for navigator in @navigators
        navigator.deactivate() 
        navigator.activate() if navigator.index == @flipper.currentPoint
    )

  createNavigators: () ->
    for el in @navigationElements()
      navigator = new FlipNavigator($(el))
      navigator.index = $(el).data('flip_to')
      @bindNavigationEvent(navigator)
      @navigators.push(navigator)

  bindNavigationEvent: (navigator)->
    navigator.element.bind('click', () =>
      navigator.element.parent().find('.active').removeClass('active')
      navigator.activate()
    )

  createPanels: () ->
    i = 0
    for el in @panelElements()
      panel = new FlipPanel(@flipper)
      $(el).bind('click', () ->
        panel.deactivate()
      )
      panel.index = i
      @panels.push(panel)
      i++

  navigationElements: () ->
    @element.find("[data-flip_to]")

  panelElements: () ->
    @panelsElement().find('.flip')

  panelsElement: () ->
    $(@element.data('flip'))

jQuery ($) ->
  navEmement = $('body.products_controller.show_action').find('.halo_unit').find('.flip_navs')
  if navEmement.length > 0
    flip = new FlipController(navEmement)
    setTimeout(( () -> flip.navigators[1].activate()), 2000) if flip

flipSpec.js.coffee

describe 'Flip', ->

  beforeEach ->
    loadFixtures('flip.html')
    @flip = new FlipController($('.halo_unit').find('.flip_navs'))

  describe 'initialization of FlipController', ->
    it 'stores navigations element', ->
      expect(@flip.element).toBe('.flip_navs')

    it 'creates 2 navigator instances', ->
      expect(@flip.navigationElements().length).toEqual(2)
      expect(@flip.navigators.length).toEqual(2)
      expect(@flip.navigators[0].element).toBe('.nav')
      expect(@flip.navigators[0].index).toEqual(0)
      expect(@flip.navigators[1].index).toEqual(1)

    it 'creates 2 panel instances', ->
      expect(@flip.panelElements().length).toEqual(2)
      expect(@flip.panelElements()[0]).toBe('.flip')
      expect(@flip.panelElements()[1]).toBe('.flip')
      expect(@flip.panels[0].index).toEqual(0)
      expect(@flip.panels[1].index).toEqual(1)
      expect(@flip.panels[0].flipper.element).toBe('#helo_frame')
      expect(@flip.panels[1].flipper.element).toBe('#helo_frame')

    it 'reconciles panel and navigator', ->
      expect(@flip.navigators[0].correspondance).toEqual(@flip.panels[0])
      expect(@flip.panels[0].correspondance).toEqual(@flip.navigators[0])

  describe 'integration', ->
    it 'works', ->
      expect($('.nav.tenant')).toBe('.active')
      expect($('.nav.vegetable_set')).not.toBe('.active')
      expect(@flip.navigators[0].isActive()).toBeTruthy()
      expect(@flip.panels[0].isActive()).toBeTruthy()

      $('.nav.tenant').click()
      expect(@flip.flipper.currentPoint).toEqual(0)
      expect($('.nav.tenant')).toBe('.active')
      expect($('.nav.vegetable_set')).not.toBe('.active')
      expect(@flip.navigators[0].isActive()).toBeTruthy()
      expect(@flip.panels[0].isActive()).toBeTruthy()

      $('.nav.vegetable_set').click()
      expect(@flip.flipper.currentPoint).toEqual(1)
      expect($('.nav.tenant')).not.toBe('.active')
      expect($('.nav.vegetable_set')).toBe('.active')
      expect(@flip.navigators[0].isActive()).toBeFalsy()
      expect(@flip.panels[0].isActive()).toBeFalsy()

      $('.vegetable_set.photo.flip').click()
      expect(@flip.flipper.currentPoint).toEqual(0)
      expect($('.nav.tenant')).toBe('.active')
      expect($('.nav.vegetable_set')).not.toBe('.active')
      expect(@flip.navigators[0].isActive()).toBeTruthy()
      expect(@flip.panels[0].isActive()).toBeTruthy()

      $('.tenant.photo.flip').click()
      expect(@flip.flipper.currentPoint).toEqual(1)
      expect($('.nav.tenant')).not.toBe('.active')
      expect($('.nav.vegetable_set')).toBe('.active')
      expect(@flip.navigators[0].isActive()).toBeFalsy()
      expect(@flip.panels[0].isActive()).toBeFalsy()