Make the clock touch friendly

components/clock/face.cjsx

@@ -20,7 +20,11 @@ module.exports = React.createClass
 
   # -- Render
   render: ->
-    <div ref="root" className={css.face} onMouseDown={@props.onMouseDown} style={@_faceStyle()}>
+    <div ref="root"
+         className={css.face}
+         onTouchStart={@props.onTouchStart}
+         onMouseDown={@props.onMouseDown}
+         style={@_faceStyle()}>
       { for i, k in @props.numbers
           <span className={css.number + (if parseInt(i) == @props.active then ' active' else '')}
                 style={@_numberStyle(@props.radius - @props.spacing, k + 1)}

components/clock/hand.cjsx

@@ -36,17 +36,32 @@ module.exports = React.createClass
     mousemove : @onMouseMove
     mouseup   : @onMouseUp
 
+  _getTouchEventMap: ->
+    touchmove: @onTouchMove
+    touchend:  @onTouchEnd
+
   onMouseMove: (event) ->
     @_move(_getMousePosition(event))
 
+  onTouchMove: (event) ->
+    @_move(_getTouchPosition(event))
+
   onMouseUp: ->
     @_end(@_getMouseEventMap())
 
+  onTouchEnd: ->
+    @_end(@_getTouchEventMap())
+
   # -- Public API
   mouseStart: (event) ->
     _addEventsToDocument(@_getMouseEventMap())
     @_move(_getMousePosition(event))
 
+  touchStart: (event) ->
+    _addEventsToDocument(@_getTouchEventMap())
+    @_move(_getTouchPosition(event))
+    _pauseEvent(event)
+
   # -- Internal methods
   _move: (position) ->
     @props.onHandMouseMove(@_getPositionRadius(position)) if @props.onHandMouseMove
@@ -85,10 +100,21 @@ _addEventsToDocument = (events) ->
 _removeEventsFromDocument = (events) ->
   document.removeEventListener(key, events[key], false) for key of events
 
+_pauseEvent = (event) ->
+  event.stopPropagation()
+  event.preventDefault()
+  event.returnValue = false
+  event.cancelBubble = true
+  return null
+
 _getMousePosition = (event) ->
   x: event.pageX
   y: event.pageY
 
+_getTouchPosition = (event) ->
+  x: event.touches[0]['pageX']
+  y: event.touches[0]['pageY']
+
 _angle360 = (cx, cy, ex, ey) ->
   theta = _angle(cx, cy, ex, ey)
   if (theta < 0) then 360 + theta else theta

components/clock/hours.cjsx

@@ -25,6 +25,9 @@ module.exports = React.createClass
   _onMouseDown: (event)->
     @refs.hand.mouseStart(event)
 
+  _onTouchStart: (event) ->
+    @refs.hand.touchStart(event)
+
   # -- Internal Methods
   _valueFromDegrees: (degrees) ->
     if @props.format == 'ampm' || @props.format == '24hr' && @state.innerNumber
@@ -41,6 +44,7 @@ module.exports = React.createClass
 
     <div>
         <Face
+          onTouchStart={@_onTouchStart}
           onMouseDown={@_onMouseDown}
           numbers={if @props.format == '24hr' then OUTER_NUMBERS else INNER_NUMBERS}
           spacing={@props.spacing}

components/clock/minutes.cjsx

@@ -19,12 +19,16 @@ module.exports = React.createClass
   _onMouseDown: (event)->
     @refs.hand.mouseStart(event)
 
+  _onTouchStart: (event) ->
+    @refs.hand.touchStart(event)
+
   # -- Render
   render: ->
     handClass = if MINUTES.indexOf(('0' + @props.selected).slice(-2)) == -1 then 'smallKnob' else ''
 
     <div>
       <Face
+        onTouchStart={@_onTouchStart}
         onMouseDown={@_onMouseDown}
         numbers={MINUTES}
         spacing={@props.spacing}