-
+ console.log @props
+
+
+ {
+ if @props.mode == 'minutes'
+
+ else if @props.mode == 'hours'
+
+ }
-
-_getMousePosition = (event) ->
- x: event.pageX
- y: event.pageY
-
-_angle = (cx, cy, ex, ey) ->
- dy = ey - cy;
- dx = ex - cx;
- theta = Math.atan2(dy, dx) + Math.PI/2
- theta = theta * 180 / Math.PI
- return theta
-
-_angle360 = (cx, cy, ex, ey) ->
- theta = _angle(cx, cy, ex, ey)
- theta = 360 + theta if (theta < 0)
- return theta
-
-_addEventsToDocument = (events) ->
- document.addEventListener(key, events[key], false) for key of events
-
-_removeEventsFromDocument = (events) ->
- document.removeEventListener(key, events[key], false) for key of events
diff --git a/components/clock/minutes.cjsx b/components/clock/minutes.cjsx
new file mode 100644
index 00000000..1e0675c2
--- /dev/null
+++ b/components/clock/minutes.cjsx
@@ -0,0 +1,33 @@
+css = require './style'
+Face = require './face'
+Hand = require './hand'
+
+module.exports = React.createClass
+
+ # -- States & Properties
+ propTypes:
+ onChange : React.PropTypes.func
+
+ # -- Events
+ _onHandChange: (value) ->
+ @props.onChange(parseInt(value/STEP)) if @props.onChange
+
+ # -- Render
+ render: ->
+
+
+
+
+
+# -- Private constants
+MINUTES = (('0' + i).slice(-2) for i in [0..55] by 5)
+STEP = 360/60
diff --git a/components/clock/style.styl b/components/clock/style.styl
index 593d8f1d..5c4f6f12 100644
--- a/components/clock/style.styl
+++ b/components/clock/style.styl
@@ -1,54 +1,45 @@
-rootSize = 250px
-innerPadding = 12px
-knobSize = 28px
-hourSize = 28px
-handWidth = 2px
-handDotSize = 8px
-clockSize = rootSize - knobSize - innerPadding - 5px
-clockRadius = clockSize / 2
-clockHolderSize = clockSize - knobSize - innerPadding
-innerClockSize = clockHolderSize - knobSize - innerPadding
-clockInnerRadius = innerClockSize / 2
-innerClockHolderSize = innerClockSize - knobSize - innerPadding
-
-centeredCircle(circleSize)
- border-radius : 50%
- height : circleSize
- left : 50%
- margin-left : -(circleSize/2)
- margin-top : -(circleSize/2)
- position : absolute
- top : 50%
- width : circleSize
+handWidth = 4px
+handDotSize = 6px
+knobSize = 34px
:local(.root)
- border-radius : 50%
- background-color : #ccc
- height : rootSize
- margin-left : 30px
- padding : (hourSize/2)
- position : relative
- width : rootSize
+ border: 1px solid pink
+ padding: 20px
-:local(.clock)
- centeredCircle clockSize
+:local(.wrapper)
+ position: relative
-:local(.clockHolder)
- centeredCircle clockHolderSize
+:local(.face)
+ border-radius: 50%
+ position: relative
-:local(.innerClock)
- centeredCircle innerClockSize
+:local(.number)
+ width: 20px
+ text-align: center
+ pointer-events: none
+ height: 20px
+ margin-left: -10px
+ margin-top: -10px
-:local(.innerClockHolder)
- centeredCircle innerClockHolderSize
+:local(.outerSphere), :local(.innerSphere)
+ position: absolute
+ top: 50%
+ left: 50%
+ transform: translateX(-50%) translateY(-50%)
+
+:local(.outerSphere)
+ background: gray
+
+:local(.innerSphere)
+ background: yellow
:local(.hand)
background-color : magenta
bottom : 50%
display : block
- height : clockRadius - (knobSize/2)
left : 50%
margin-left : -(handWidth/2)
+ opacity : .6
position : absolute
transform-origin : 50% 100%
width : handWidth
@@ -65,9 +56,6 @@ centeredCircle(circleSize)
position : absolute
width : handDotSize
-:local(.root).hand-inner :local(.hand)
- height : clockRadius - (knobSize/2) - knobSize - innerPadding
-
:local(.knob)
background-color : magenta
border-radius : 50%
@@ -78,44 +66,3 @@ centeredCircle(circleSize)
position : absolute
top : -(knobSize)
width : knobSize
-
-:local(.root).pressed :local(.knob)
- background-color : pink
-
-:local(.hour)
- background-color : gray
- border-radius : 50%
- color : #444
- height : hourSize
- line-height : hourSize
- margin-left : -(hourSize/2)
- margin-top : -(hourSize/2)
- pointer-events : none
- position : absolute
- text-align : center
- width : hourSize
-
-:local(.innerHour)
- background-color : yellowgreen
- border-radius : 50%
- color : purple
- height : hourSize
- line-height : hourSize
- margin-left : -(hourSize/2)
- margin-top : -(hourSize/2)
- pointer-events : none
- position : absolute
- text-align : center
- width : hourSize
-
-:local(.clock)
- for num in 1 2 3 4 5 6 7 8 9 10 11 12
- :local(.hour):nth-child({num})
- left : clockRadius + clockRadius * sin(360deg / 12 * num)
- top : clockRadius - clockRadius * cos(360deg / 12 * num)
-
-:local(.innerClock)
- for num in 1 2 3 4 5 6 7 8 9 10 11 12
- :local(.innerHour):nth-child({num})
- left : clockInnerRadius + clockInnerRadius * sin(360deg / 12 * num)
- top : clockInnerRadius - clockInnerRadius * cos(360deg / 12 * num)
diff --git a/spec/components/clock.cjsx b/spec/components/clock.cjsx
index 16388ff5..a4d1d4c2 100644
--- a/spec/components/clock.cjsx
+++ b/spec/components/clock.cjsx
@@ -2,4 +2,7 @@ Clock = require '../../components/clock'
module.exports = React.createClass
render: ->
-
+
+
+
+
diff --git a/spec/index.cjsx b/spec/index.cjsx
index 3935ae4c..cf1ddb7f 100644
--- a/spec/index.cjsx
+++ b/spec/index.cjsx
@@ -21,8 +21,6 @@ Test = React.createClass
# -- Render
render: ->
- React-Toolbox New way for create
-