Skip to content
Permalink
Browse files

Add ui elements

  • Loading branch information
Koen Bok
Koen Bok committed Apr 30, 2013
1 parent 62dfbf3 commit 518df87d93c68059c69e57c4175fea5edc19b3f7
Showing with 178 additions and 5 deletions.
  1. +12 −5 src/init.coffee
  2. +125 −0 src/ui/draggable.coffee
  3. +39 −0 src/ui/gridview.coffee
  4. +2 −0 src/ui/init.coffee
@@ -13,18 +13,29 @@ debug = require "./debug"
{Frame} = require "./primitives/frame"
{Matrix} = require "./primitives/matrix"
{EventEmitter} = require "./eventemitter"
{Events} = require "./primitives/events"


Global = {}

Global.View = View
Global.ScrollView = ScrollView
Global.ImageView = ImageView
Global.Animation = Animation




Global.Frame = Frame
Global.Matrix = Matrix
Global.EventEmitter = EventEmitter
Global.Events = Events

Global.utils = utils
Global.tools = tools

Global.ui = require "./ui/init"

Global.ViewList = ViewList
Global.debug = debug.debug
Global.css = css
@@ -35,11 +46,7 @@ if window
window.Framer = Global
window._ = require "underscore"

for k, v of Global
window[k] = v

# Add underscore
window._ = require "underscore"
_.extend window, Global

# Alert if not WebKit
if not utils.isWebKit()
@@ -0,0 +1,125 @@
_ = require "underscore"

{Events} = require "../primitives/events"

class exports.Draggable

constructor: (@view) ->

@speed = {x:1.0, y:1.0}

if @view.__draggable
console.error "Draggable: already registered draggable for #{@view.name}"

@view.__draggable = @
@_deltas = []
@_isDragging = false

@attach()

attach: -> @view.on Events.TouchStart, @_touchStart
remove: -> @view.off Events.TouchStart, @_touchStart

_updatePosition: (event) =>

touchEvent = Events.sanitize event

delta =
x: touchEvent.clientX - @_start.x
y: touchEvent.clientY - @_start.y

correctedDelta =
x: delta.x * @speed.x
y: delta.y * @speed.y
t: event.timeStamp

@view.x = @_start.x + correctedDelta.x - @_offset.x
@view.y = @_start.y + correctedDelta.y - @_offset.y

@_deltas.push correctedDelta

@view.emit Events.DragMove, event

_touchStart: (event) =>

@view.animateStop()

@_isDragging = true

touchEvent = Events.sanitize event

@_start =
x: touchEvent.clientX
y: touchEvent.clientY

@_offset =
x: touchEvent.clientX - @view.x
y: touchEvent.clientY - @view.y

document.addEventListener Events.TouchMove, @_updatePosition
document.addEventListener Events.TouchEnd, @_touchEnd

@view.emit Events.DragStart, event

_touchEnd: (event) =>

@_isDragging = false

document.removeEventListener Events.TouchMove, @_updatePosition
document.removeEventListener Events.TouchEnd, @_touchEnd

@view.emit Events.DragEnd, event
@_deltas = []

_calculateVelocity: (time=20) =>

if @_deltas.length < 2
return {x:0, y:0}

curr = @_deltas[-1..-1][0]
prev = @_deltas[-2..-2][0]
time = curr.t - prev.t

# Bail out if the last move updates where a while ago
timeSinceLastMove = (new Date().getTime() - prev.t)

if timeSinceLastMove > 100
return {x:0, y:0}

velocity =
x: (curr.x - prev.x) / time
y: (curr.y - prev.y) / time

velocity.x = 0 if velocity.x is Infinity
velocity.y = 0 if velocity.y is Infinity

velocity

_calculateAverageVelocity: (time=100) =>

if @_deltas.length < 2
return {x:0, y:0}

currTime = lastTime = _.last(@_deltas).t

deltas = for i in [@_deltas.length - 1..0] by -1

currDelta = @_deltas[i]
currTime = currDelta.t

if currTime < (lastTime - time)
break

currDelta

totalDelta =
x: utils.sum(_.pluck deltas, "x")
y: utils.sum(_.pluck deltas, "y")

totalTime = _.first(deltas).t - _.last(deltas).t

return {x:0, y:0} if totalTime is 0

velocity =
x: (totalDelta.x / totalTime)
y: (totalDelta.y / totalTime)
@@ -0,0 +1,39 @@
{View} = require "../views/view"

class exports.GridView extends View

constructor: (args) ->
super
@rows = args.rows or 2
@cols = args.cols or 2
@views = {}
@update()

update: ->
for rowIndex in [1..@rows]
for colIndex in [1..@cols]

view = @createView()
view.superView = @

frame =
width: @width / @cols
height: @height / @cols

frame.x = (colIndex - 1) * frame.width
frame.y = (rowIndex - 1) * frame.height

view.frame = frame
@views["#{rowIndex}.#{colIndex}"] = view

createView: ->
view = new View
view.style.backgroundColor = utils.randomColor(.1)
view.clip = false
view

# gv = new GridView
# width: 1000
# height: 1000
# rows: 5
# cols: 5
@@ -0,0 +1,2 @@
exports.GridView = (require "./gridview").GridView
exports.Draggable = (require "./draggable").Draggable

0 comments on commit 518df87

Please sign in to comment.