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.