Make clock able to change start move clicking on face

Author: javivelasco

components/clock/face.cjsx

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

components/clock/hand.cjsx

@@ -32,24 +32,28 @@ module.exports = React.createClass
       @props.onHandChange(nextState.angle)
 
   # -- Event handlers
-  _onKnobMouseDown: ->
-    _addEventsToDocument(@_getMouseEventMap())
-
   _getMouseEventMap: ->
     mousemove : @onMouseMove
     mouseup   : @onMouseUp
 
   onMouseMove: (event) ->
-    position = _getMousePosition(event)
-    @props.onHandMouseMove(@_getPositionRadius(position)) if @props.onHandMouseMove
-    newDegrees = @_trimAngleToValue(@_positionToAngle(position))
-    newDegrees = if newDegrees == 360 then 0 else newDegrees
-    @setState(angle: newDegrees) if @state.angle != newDegrees
+    @_move(_getMousePosition(event))
 
   onMouseUp: ->
     @_end(@_getMouseEventMap())
 
+  # -- Public API
+  mouseStart: (event) ->
+    _addEventsToDocument(@_getMouseEventMap())
+    @_move(_getMousePosition(event))
+
   # -- Internal methods
+  _move: (position) ->
+    @props.onHandMouseMove(@_getPositionRadius(position)) if @props.onHandMouseMove
+    newDegrees = @_trimAngleToValue(@_positionToAngle(position))
+    newDegrees = if newDegrees == 360 then 0 else newDegrees
+    @setState(angle: newDegrees) if @state.angle != newDegrees
+
   _getPositionRadius: (position) ->
     x = @props.origin.x - position.x
     y = @props.origin.y - position.y
@@ -71,7 +75,7 @@ module.exports = React.createClass
     style.height = @props.length - @state.knobWidth/2
 
     <div className={css.hand + ' ' + @props.className} style={style}>
-      <div ref='knob' className={css.knob} onMouseDown={@_onKnobMouseDown}></div>
+      <div ref='knob' className={css.knob}></div>
     </div>
 
 # -- Static Helper functions

components/clock/hours.cjsx

@@ -22,6 +22,9 @@ module.exports = React.createClass
   _onHandChange: (degrees) ->
     @props.onChange(@_valueFromDegrees(degrees))
 
+  _onMouseDown: (event)->
+    @refs.hand.mouseStart(event)
+
   # -- Internal Methods
   _valueFromDegrees: (degrees) ->
     if @props.format == 'ampm' || @props.format == '24hr' && @state.innerNumber
@@ -37,19 +40,21 @@ module.exports = React.createClass
 
     <div>
         <Face
+          onMouseDown={@_onMouseDown}
           numbers={if @props.format == '24hr' then OUTER_NUMBERS else INNER_NUMBERS}
           spacing={@props.spacing}
           radius={@props.radius}
           activeNumber={@props.selected} />
         {
           if @props.format == '24hr'
             <Face
+              onMouseDown={@_onMouseDown}
               numbers={INNER_NUMBERS}
               spacing={@props.spacing}
               radius={innerRadius}
               activeNumber={@props.selected} />
         }
-        <Hand
+        <Hand ref='hand'
           degrees={@state.degrees}
           initialAngle={@props.selected * STEP}
           length={handLength}

components/clock/minutes.cjsx

@@ -16,17 +16,21 @@ module.exports = React.createClass
   _onHandChange: (degrees) ->
     @props.onChange(degrees/STEP)
 
+  _onMouseDown: (event)->
+    @refs.hand.mouseStart(event)
+
   # -- Render
   render: ->
     handClass = if MINUTES.indexOf(('0' + @props.selected).slice(-2)) == -1 then 'smallKnob' else ''
 
     <div>
       <Face
+        onMouseDown={@_onMouseDown}
         numbers={MINUTES}
         spacing={@props.spacing}
         radius={@props.radius}
         activeNumber={@props.selected} />
-      <Hand
+      <Hand ref='hand'
         className={handClass}
         initialAngle={@props.selected * STEP}
         length={@props.radius - @props.spacing}

components/clock/style.styl

@@ -16,14 +16,14 @@ SMALL_KNOB_SIZE = 14px
 
 :local(.face)
   border-radius       : 50%
-  pointer-events      : none
   position            : relative
   z-index             : Z_INDEX_HIGH
 
 :local(.number)
   height              : NUMBER_SIZE
   margin-left         : -(NUMBER_SIZE/2)
   margin-top          : -(NUMBER_SIZE/2)
+  pointer-events      : none
   position            : relative
   text-align          : center
   width               : NUMBER_SIZE