Skip to content

Instantly share code, notes, and snippets.

@burakcan
Created January 29, 2014 19:01
Show Gist options
  • Save burakcan/8694575 to your computer and use it in GitHub Desktop.
Save burakcan/8694575 to your computer and use it in GitHub Desktop.
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
.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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment