FlipCounterView

flipcounterview.coffee

class FlipCounterView extends KDView
  constructor : (options = {}, data = {}) ->
    options.style        ?= "dark"
    options.from         ?= 5000
    options.to           ?= 10000
    options.interval     ?= 1000
    options.step         ?= 1
    options.autoStart    ?= yes
    options.direction     = if options.from < options.to then "up" else "down"
    options.digits       ?= if options.direction is "up" then options.to.toString().length else options.from.toString().length
    options.cssClass      = KD.utils.curry "#{options.style} #{options.direction} flip-counter", options.cssClass

    super options, data

    @digitsList = []
    @currentValue = options.from

    @createCounter()
    @start() if options.autoStart

    window.a = @

  createCounter : ->
    {digits, from} = @getOptions()

    givenDigits = if @getOption "direction" is "up" then @getOption("to").toString().length else @getOption("from").toString().length

    for i in [0...digits]
      @digitsList.push @addSubView new FlipCounterDigitView
        initialValue  : @getOption("from").toString()[i]

  setValue : (value) ->
    if value is @currentValue then return

    @currentValue = value
    value = value.toString()

    for i in [0...value.length]
      @digitsList[i].setValue value[i]

  start : ->
    @counterInterval = setInterval =>
      if @getOption("direction") is "up"
        newValue = @currentValue + @getOption "step"
      else
        newValue = @currentValue - @getOption "step"

      @setValue newValue
      @currentValue = newValue

    , @getOption "interval"



class FlipCounterDigitView extends KDCustomHTMLView
  constructor : (options = {}, data = {}) ->
    options.tagName       = "ul"
    options.initialValue ?= 0

    super options, data

    @currentValue = options.initialValue

    @createDigit()

  createDigit : ->
    @addSubView @digit = new KDCustomHTMLView
      tagName   : "li"
      cssClass  : "real"
      partial   :
        """
          <span class="top">#{@getOption('initialValue')}</span>
          <span class="bottom">#{@getOption('initialValue')}</span>
        """

    @addSubView @fakeDigit = new KDCustomHTMLView
      tagName   : "li"
      cssClass  : "fake"
      partial   :
        """
          <span class="top">#{@getOption('initialValue')}</span>
          <span class="bottom">#{@getOption('initialValue')}</span>
        """

    @setValue @getOption "initialValue"

  setValue : (value) ->
    if value is @currentValue then return

    @currentValue  = value

    @digit.updatePartial """
      <span class="top">#{value}</span>
      <span class="bottom">#{value}</span>
    """

    @setClass "animate"

    KD.utils.wait 500, =>
      @fakeDigit.updatePartial """
        <span class="top">#{value}</span>
        <span class="bottom">#{value}</span>
      """
      @unsetClass "animate"

appView.addSubView new FlipCounterView
  from     : 1000
  to       : 5000
  interval : 1000
  step     : 1

main.styl

.flip-counter
  size              auto, auto
  abs               100px 0 0 100px
  vendor            transform-style, preserve-3d
  vendor            perspective, 500px
  overflow          visible
  ul
    position        relative
    size            50px, 50px
    margin          0 0 0 3px
    fl()

    li
      abs             0px 0 0 0px
      display         block
      size            50px, 50px
      vendor          transform-style, preserve-3d

      span
        background    #000
        color         #fff
        font-size     26px
        font-weight   bold
        size          50px, 25px
        line-height   50px
        overflow      hidden
        display       block
        text-align    center
        rounded       6px 6px 0 0
        vendor        backface-visibility, hidden

        &.top
          gradient    #333 #000
          vendor      transform-origin-y, 100%

        &.bottom
          gradient    #333 #000
          line-height 0
          rounded     0 0 6px 6px
          vendor      transform-origin-y, 0

    &.animate li.real span.bottom
      vendor          animation, flipCounterReal .5s 1 forwards ease

    &.animate li.fake span.top
      vendor          animation, flipCounterFake .5s 1 forwards ease

@-webkit-keyframes flipCounterReal
  0%
    -webkit-transform       rotateX(180deg)
  100%
    -webkit-transform       rotateX(0deg)

@-webkit-keyframes flipCounterFake
  0%
    -webkit-transform       rotateX(0deg)
  100%
    -webkit-transform       rotateX(-180deg)