Animations

« Examples

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
class Animations extends Backbone.View

  @template: new Gunther.Template (model) ->
    @e 'div.ball-container', ->

      # When clicked, update the model's x/y using the event
      @haltedOn 'click touchstart', (e) ->

        # The offset of the container
        containerOffset = (($ e.target).closest '.ball-container').offset()

        eventX = if e.originalEvent? then e.originalEvent.pageX else e.pageX
        eventY = if e.originalEvent? then e.originalEvent.pageY else e.pageY

        model.set
          # Set the new x/y properties based on offset and event's pageX/Y
          x: eventX - containerOffset.left
          y: eventY- containerOffset.top

          # Update the clicked counter
          clicked: (model.get 'clicked') + 1

      @e 'div.ball', ->
        @css
          # The top/left are bound to the model's x/y properties
          top:   @bind model, 'y', () -> "#{(model.get 'y') - 40}px"
          left:  @bind model, 'x', () -> "#{(model.get 'x') - 40}px"

        @e 'span', -> @bind model, 'clicked'

  initialize: () ->
    @model = new Backbone.Model
      x:    100,
      y:    100,
      clicked:  0

  render: () -> Animations.template.renderInto @el, @model

$ ->
  animations = new Animations
    el: $ '#animations-example-container'

  do animations.render