Rewrite clock
parent
b907fb9822
commit
26cef5fd1d
|
@ -0,0 +1,29 @@
|
||||||
|
css = require './style'
|
||||||
|
|
||||||
|
module.exports = React.createClass
|
||||||
|
|
||||||
|
# -- States & Properties
|
||||||
|
getDefaultProps: ->
|
||||||
|
className : ''
|
||||||
|
numbers : []
|
||||||
|
radius : 0
|
||||||
|
|
||||||
|
# -- Internal methods
|
||||||
|
_numberStyle: (radius, num) ->
|
||||||
|
position : 'absolute'
|
||||||
|
left : (radius + radius * Math.sin(360 * (Math.PI/180) / 12 * (num - 1)) + @props.spacing)
|
||||||
|
top : (radius - radius * Math.cos(360 * (Math.PI/180) / 12 * (num - 1)) + @props.spacing)
|
||||||
|
|
||||||
|
_faceStyle: ->
|
||||||
|
height : @props.radius * 2
|
||||||
|
width : @props.radius * 2
|
||||||
|
|
||||||
|
# -- Render
|
||||||
|
render: ->
|
||||||
|
<div ref="root" className={"#{@props.className} #{css.face}"} style={@_faceStyle()}>
|
||||||
|
{ for i, k in @props.numbers
|
||||||
|
<span className={css.number}
|
||||||
|
key={i} style={@_numberStyle(@props.radius - @props.spacing, k + 1)}>
|
||||||
|
{i}
|
||||||
|
</span> }
|
||||||
|
</div>
|
|
@ -0,0 +1,87 @@
|
||||||
|
prefixer = require "../prefixer"
|
||||||
|
css = require './style'
|
||||||
|
|
||||||
|
module.exports = React.createClass
|
||||||
|
|
||||||
|
# -- States & Properties
|
||||||
|
propTypes:
|
||||||
|
onHandChange : React.PropTypes.func
|
||||||
|
|
||||||
|
getDefaultProps: ->
|
||||||
|
angle : 0
|
||||||
|
length : 0
|
||||||
|
origin : {}
|
||||||
|
|
||||||
|
getInitialState: ->
|
||||||
|
angle : @props.angle
|
||||||
|
knobWidth : 0
|
||||||
|
radius : 0
|
||||||
|
|
||||||
|
# -- Lifecycle
|
||||||
|
componentDidMount: ->
|
||||||
|
@setState
|
||||||
|
knobWidth : @refs.knob.getDOMNode().offsetWidth
|
||||||
|
|
||||||
|
componentWillUpdate: (nextProps, nextState) ->
|
||||||
|
@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
|
||||||
|
|
||||||
|
# -- Internal methods
|
||||||
|
_getPositionRadius: (position) ->
|
||||||
|
x = @props.origin.x - position.x
|
||||||
|
y = @props.origin.y - position.y
|
||||||
|
Math.sqrt(x * x + y * y)
|
||||||
|
|
||||||
|
_trimAngleToValue: (angle) ->
|
||||||
|
@props.step * Math.round(angle/@props.step)
|
||||||
|
|
||||||
|
_positionToAngle: (position) ->
|
||||||
|
_angle360(@props.origin.x, @props.origin.y, position.x, position.y)
|
||||||
|
|
||||||
|
onMouseUp: ->
|
||||||
|
@_end(@_getMouseEventMap())
|
||||||
|
|
||||||
|
_end: (events) ->
|
||||||
|
_removeEventsFromDocument(events)
|
||||||
|
|
||||||
|
# -- Render
|
||||||
|
render: ->
|
||||||
|
style = prefixer.transform("rotate(#{@state.angle}deg)")
|
||||||
|
style.height = @props.length - @state.knobWidth/2
|
||||||
|
|
||||||
|
<div className={css.hand} style={style}>
|
||||||
|
<div ref='knob' className={css.knob} onMouseDown={@_onKnobMouseDown}></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
# -- Static Helper functions
|
||||||
|
_addEventsToDocument = (events) ->
|
||||||
|
document.addEventListener(key, events[key], false) for key of events
|
||||||
|
|
||||||
|
_removeEventsFromDocument = (events) ->
|
||||||
|
document.removeEventListener(key, events[key], false) for key of events
|
||||||
|
|
||||||
|
_getMousePosition = (event) ->
|
||||||
|
x: event.pageX
|
||||||
|
y: event.pageY
|
||||||
|
|
||||||
|
_angle360 = (cx, cy, ex, ey) ->
|
||||||
|
theta = _angle(cx, cy, ex, ey)
|
||||||
|
if (theta < 0) then 360 + theta else theta
|
||||||
|
|
||||||
|
_angle = (cx, cy, ex, ey) ->
|
||||||
|
theta = Math.atan2(ey - cy, ex - cx) + Math.PI/2
|
||||||
|
theta * 180 / Math.PI
|
|
@ -0,0 +1,64 @@
|
||||||
|
css = require './style'
|
||||||
|
Face = require './face'
|
||||||
|
Hand = require './hand'
|
||||||
|
|
||||||
|
module.exports = React.createClass
|
||||||
|
|
||||||
|
# -- States & Properties
|
||||||
|
propTypes:
|
||||||
|
format : React.PropTypes.oneOf(['24hr', 'ampm'])
|
||||||
|
onChange : React.PropTypes.func
|
||||||
|
|
||||||
|
getDefaultProps: ->
|
||||||
|
format : '24hr'
|
||||||
|
onChange : null
|
||||||
|
|
||||||
|
getInitialState: ->
|
||||||
|
am : false
|
||||||
|
|
||||||
|
# -- Events
|
||||||
|
_onHandMouseMove: (radius) ->
|
||||||
|
if @props.format == '24hr'
|
||||||
|
currentAm = radius < @props.radius - @props.spacing * 2
|
||||||
|
@setState am: currentAm if @state.am != currentAm
|
||||||
|
|
||||||
|
_onHandChange: (value) ->
|
||||||
|
if @props.format == '24hr'
|
||||||
|
values = if @state.am then AM_HOURS else PM_HOURS
|
||||||
|
else
|
||||||
|
values = AM_HOURS
|
||||||
|
@props.onChange(parseInt(values[value/STEP])) if @props.onChange
|
||||||
|
|
||||||
|
# -- Render
|
||||||
|
render: ->
|
||||||
|
innerRadius = @props.radius - @props.spacing * 2
|
||||||
|
handRadius = if @props.format == '24hr' && @state.am then innerRadius else @props.radius
|
||||||
|
handLength = handRadius - @props.spacing
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Face
|
||||||
|
className={css.outerSphere}
|
||||||
|
numbers={if @props.format == '24hr' then PM_HOURS else AM_HOURS}
|
||||||
|
spacing={@props.spacing}
|
||||||
|
radius={@props.radius} />
|
||||||
|
{
|
||||||
|
if @props.format == '24hr'
|
||||||
|
<Face
|
||||||
|
className={css.innerSphere}
|
||||||
|
numbers={AM_HOURS}
|
||||||
|
spacing={@props.spacing}
|
||||||
|
radius={innerRadius} />
|
||||||
|
}
|
||||||
|
<Hand
|
||||||
|
degrees={0}
|
||||||
|
length={handLength}
|
||||||
|
onHandMouseMove={@_onHandMouseMove}
|
||||||
|
onHandChange={@_onHandChange}
|
||||||
|
origin={@props.center}
|
||||||
|
step={STEP} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
# -- Private constants
|
||||||
|
AM_HOURS = [12].concat([1..11])
|
||||||
|
PM_HOURS = ['00'].concat([13..23])
|
||||||
|
STEP = 360/12
|
|
@ -1,149 +1,75 @@
|
||||||
css = require './style'
|
css = require './style'
|
||||||
|
Hours = require './hours'
|
||||||
|
Minutes = require './minutes'
|
||||||
|
|
||||||
module.exports = React.createClass
|
module.exports = React.createClass
|
||||||
|
|
||||||
# -- States & Properties
|
# -- States & Properties
|
||||||
propTypes:
|
propTypes:
|
||||||
className : React.PropTypes.string
|
className : React.PropTypes.string
|
||||||
|
mode : React.PropTypes.oneOf(['hours', 'minutes'])
|
||||||
|
|
||||||
getDefaultProps: ->
|
getDefaultProps: ->
|
||||||
className : ''
|
className : ''
|
||||||
|
mode : 'hours'
|
||||||
|
|
||||||
getInitialState: ->
|
getInitialState: ->
|
||||||
clockCenter : undefined
|
radius : 0
|
||||||
clockCenter : undefined
|
|
||||||
clockInnerMaxRadius : undefined
|
|
||||||
clockInnerMinRadius : undefined
|
|
||||||
clockMaxRadius : undefined
|
|
||||||
clockMinRadius : undefined
|
|
||||||
handInner : false
|
|
||||||
pressed : false
|
|
||||||
handAngle : 0
|
|
||||||
|
|
||||||
# -- Lifecycle
|
# -- Lifecycle
|
||||||
componentDidMount: ->
|
componentDidMount: ->
|
||||||
@setState
|
window.addEventListener('resize', @handleResize)
|
||||||
clockCenter : @_getClockCenter()
|
@setState radius: @_getRadius()
|
||||||
clockMaxRadius : @_getRefRadius('root')
|
|
||||||
clockMinRadius : @_getRefRadius('clockHolder')
|
|
||||||
clockInnerMaxRadius : @_getRefRadius('clockHolder')
|
|
||||||
clockInnerMinRadius : @_getRefRadius('innerClockHolder')
|
|
||||||
|
|
||||||
# -- Position Functions
|
componentWillUpdate: ->
|
||||||
_getClockCenter: ->
|
center = @_getCenter()
|
||||||
bounds = @refs.root.getDOMNode().getBoundingClientRect()
|
if @state.center?.x != center.x && @state.center?.y != center.y
|
||||||
return {
|
@setState center: center
|
||||||
|
|
||||||
|
componentWillUnmount: ->
|
||||||
|
window.removeEventListener('resize', @handleResize)
|
||||||
|
|
||||||
|
# -- Events handlers
|
||||||
|
onHourChange: (hour) ->
|
||||||
|
console.log "Hour changed to #{hour}"
|
||||||
|
|
||||||
|
onMinuteChange: (minute) ->
|
||||||
|
console.log "Minute changed to #{minute}"
|
||||||
|
|
||||||
|
# -- Helper methods
|
||||||
|
_getRadius: ->
|
||||||
|
@refs.wrapper.getDOMNode().getBoundingClientRect().width/2
|
||||||
|
|
||||||
|
handleResize: ->
|
||||||
|
@setState
|
||||||
|
center: @_getCenter()
|
||||||
|
radius: @_getRadius()
|
||||||
|
|
||||||
|
_getCenter: ->
|
||||||
|
bounds = @getDOMNode().getBoundingClientRect()
|
||||||
|
{
|
||||||
x: bounds.left + (bounds.right - bounds.left)/2
|
x: bounds.left + (bounds.right - bounds.left)/2
|
||||||
y: bounds.top + (bounds.bottom - bounds.top) /2
|
y: bounds.top + (bounds.bottom - bounds.top) /2
|
||||||
}
|
}
|
||||||
|
|
||||||
_getRefRadius: (ref) ->
|
# -- Render
|
||||||
bounds = @refs[ref].getDOMNode().getBoundingClientRect()
|
|
||||||
(bounds.right - bounds.left)/2
|
|
||||||
|
|
||||||
_isInsideClockArea: (position) ->
|
|
||||||
@state.clockMinRadius < @_getPositionRadius(position) < @state.clockMaxRadius
|
|
||||||
|
|
||||||
_isInsideClockInnerArea: (position) ->
|
|
||||||
@state.clockInnerMinRadius < @_getPositionRadius(position) < @state.clockInnerMaxRadius
|
|
||||||
|
|
||||||
_getPositionRadius: (position) ->
|
|
||||||
x = @state.clockCenter.x - position.x
|
|
||||||
y = @state.clockCenter.y - position.y
|
|
||||||
Math.sqrt(x * x + y * y)
|
|
||||||
|
|
||||||
# -- Helper Functions
|
|
||||||
_positionToAngle: (position) ->
|
|
||||||
_angle360(@state.clockCenter.x, @state.clockCenter.y, position.x, position.y)
|
|
||||||
|
|
||||||
_trimAngleToValue: (angle) ->
|
|
||||||
step = 360/12
|
|
||||||
step * Math.round(angle/step)
|
|
||||||
|
|
||||||
_getMouseEventMap: ->
|
|
||||||
mousemove: @onMouseMove
|
|
||||||
mouseup: @onMouseUp
|
|
||||||
|
|
||||||
_moveHandToPosition: (position) ->
|
|
||||||
trimAngle = @_trimAngleToValue(@_positionToAngle(position))
|
|
||||||
if @_isInsideClockInnerArea(position)
|
|
||||||
@setState
|
|
||||||
handAngle: trimAngle
|
|
||||||
handInner: true
|
|
||||||
else if @_isInsideClockArea(position)
|
|
||||||
@setState
|
|
||||||
handAngle: trimAngle
|
|
||||||
handInner: false
|
|
||||||
|
|
||||||
_end: (events) ->
|
|
||||||
_removeEventsFromDocument(events)
|
|
||||||
|
|
||||||
# -- Event handlers
|
|
||||||
onClockMouseDown: (event) ->
|
|
||||||
position = _getMousePosition(event)
|
|
||||||
@_moveHandToPosition(position)
|
|
||||||
_addEventsToDocument(@_getMouseEventMap())
|
|
||||||
@setState pressed: true
|
|
||||||
|
|
||||||
onKnobMouseDown: (event) ->
|
|
||||||
_addEventsToDocument(@_getMouseEventMap())
|
|
||||||
@setState pressed: true
|
|
||||||
|
|
||||||
onMouseMove: (event) ->
|
|
||||||
position = _getMousePosition(event)
|
|
||||||
@_moveHandToPosition(position)
|
|
||||||
|
|
||||||
onMouseUp: ->
|
|
||||||
@_end(@_getMouseEventMap())
|
|
||||||
@setState pressed: false
|
|
||||||
|
|
||||||
render: ->
|
render: ->
|
||||||
className = @props.className
|
console.log @props
|
||||||
className += css.root
|
<div className={css.root}>
|
||||||
className += " hand-inner" if @state.handInner
|
<div ref="wrapper" className={css.wrapper} style={height: @state.radius * 2} >
|
||||||
className += " pressed" if @state.pressed
|
{
|
||||||
handStyle = transform: "rotate(#{@state.handAngle}deg)"
|
if @props.mode == 'minutes'
|
||||||
|
<Minutes
|
||||||
<div ref="root" className={className} onMouseDown={@onClockMouseDown}>
|
center={@state.center}
|
||||||
{# Main Clock }
|
onChange={@onMinuteChange}
|
||||||
<div ref="clock" className={css.clock}>
|
radius={@state.radius}
|
||||||
{ <span className={css.hour} key="hour-#{i}">{i}</span> for i in [13..23] }
|
spacing={@state.radius * 0.16} />
|
||||||
<span className={css.hour} key="hour-00">00</span>
|
else if @props.mode == 'hours'
|
||||||
</div>
|
<Hours
|
||||||
|
center={@state.center}
|
||||||
{# Inner Clock }
|
onChange={@onHourChange}
|
||||||
<div ref="innerClock" className={css.innerClock}>
|
radius={@state.radius}
|
||||||
{ <span className={css.innerHour} key="hour-#{i}">{i}</span> for i in [1..12] }
|
spacing={@state.radius * 0.16} />
|
||||||
</div>
|
}
|
||||||
|
|
||||||
{# Support area holders }
|
|
||||||
<div ref="clockHolder" className={css.clockHolder}></div>
|
|
||||||
<div ref="innerClockHolder" className={css.innerClockHolder}></div>
|
|
||||||
|
|
||||||
{# Clock hand }
|
|
||||||
<div ref="hand" style={handStyle} className={css.hand}>
|
|
||||||
<div className={css.knob} onMouseDown={@onKnobMouseDown}></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
_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
|
|
||||||
|
|
|
@ -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: ->
|
||||||
|
<div>
|
||||||
|
<Face
|
||||||
|
className={css.outerSphere}
|
||||||
|
numbers={MINUTES}
|
||||||
|
spacing={@props.spacing}
|
||||||
|
radius={@props.radius} />
|
||||||
|
<Hand
|
||||||
|
degrees={0}
|
||||||
|
length={@props.radius - @props.spacing}
|
||||||
|
onHandChange={@_onHandChange}
|
||||||
|
origin={@props.center}
|
||||||
|
step={STEP} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
# -- Private constants
|
||||||
|
MINUTES = (('0' + i).slice(-2) for i in [0..55] by 5)
|
||||||
|
STEP = 360/60
|
|
@ -1,54 +1,45 @@
|
||||||
rootSize = 250px
|
handWidth = 4px
|
||||||
innerPadding = 12px
|
handDotSize = 6px
|
||||||
knobSize = 28px
|
knobSize = 34px
|
||||||
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
|
|
||||||
|
|
||||||
:local(.root)
|
:local(.root)
|
||||||
border-radius : 50%
|
border: 1px solid pink
|
||||||
background-color : #ccc
|
padding: 20px
|
||||||
height : rootSize
|
|
||||||
margin-left : 30px
|
|
||||||
padding : (hourSize/2)
|
|
||||||
position : relative
|
|
||||||
width : rootSize
|
|
||||||
|
|
||||||
:local(.clock)
|
:local(.wrapper)
|
||||||
centeredCircle clockSize
|
position: relative
|
||||||
|
|
||||||
:local(.clockHolder)
|
:local(.face)
|
||||||
centeredCircle clockHolderSize
|
border-radius: 50%
|
||||||
|
position: relative
|
||||||
|
|
||||||
:local(.innerClock)
|
:local(.number)
|
||||||
centeredCircle innerClockSize
|
width: 20px
|
||||||
|
text-align: center
|
||||||
|
pointer-events: none
|
||||||
|
height: 20px
|
||||||
|
margin-left: -10px
|
||||||
|
margin-top: -10px
|
||||||
|
|
||||||
:local(.innerClockHolder)
|
:local(.outerSphere), :local(.innerSphere)
|
||||||
centeredCircle innerClockHolderSize
|
position: absolute
|
||||||
|
top: 50%
|
||||||
|
left: 50%
|
||||||
|
transform: translateX(-50%) translateY(-50%)
|
||||||
|
|
||||||
|
:local(.outerSphere)
|
||||||
|
background: gray
|
||||||
|
|
||||||
|
:local(.innerSphere)
|
||||||
|
background: yellow
|
||||||
|
|
||||||
:local(.hand)
|
:local(.hand)
|
||||||
background-color : magenta
|
background-color : magenta
|
||||||
bottom : 50%
|
bottom : 50%
|
||||||
display : block
|
display : block
|
||||||
height : clockRadius - (knobSize/2)
|
|
||||||
left : 50%
|
left : 50%
|
||||||
margin-left : -(handWidth/2)
|
margin-left : -(handWidth/2)
|
||||||
|
opacity : .6
|
||||||
position : absolute
|
position : absolute
|
||||||
transform-origin : 50% 100%
|
transform-origin : 50% 100%
|
||||||
width : handWidth
|
width : handWidth
|
||||||
|
@ -65,9 +56,6 @@ centeredCircle(circleSize)
|
||||||
position : absolute
|
position : absolute
|
||||||
width : handDotSize
|
width : handDotSize
|
||||||
|
|
||||||
:local(.root).hand-inner :local(.hand)
|
|
||||||
height : clockRadius - (knobSize/2) - knobSize - innerPadding
|
|
||||||
|
|
||||||
:local(.knob)
|
:local(.knob)
|
||||||
background-color : magenta
|
background-color : magenta
|
||||||
border-radius : 50%
|
border-radius : 50%
|
||||||
|
@ -78,44 +66,3 @@ centeredCircle(circleSize)
|
||||||
position : absolute
|
position : absolute
|
||||||
top : -(knobSize)
|
top : -(knobSize)
|
||||||
width : 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)
|
|
||||||
|
|
|
@ -2,4 +2,7 @@ Clock = require '../../components/clock'
|
||||||
|
|
||||||
module.exports = React.createClass
|
module.exports = React.createClass
|
||||||
render: ->
|
render: ->
|
||||||
<Clock />
|
<div>
|
||||||
|
<Clock mode="hours" />
|
||||||
|
<Clock mode="minutes" />
|
||||||
|
</div>
|
||||||
|
|
|
@ -21,8 +21,6 @@ Test = React.createClass
|
||||||
# -- Render
|
# -- Render
|
||||||
render: ->
|
render: ->
|
||||||
<app data-toolbox={true}>
|
<app data-toolbox={true}>
|
||||||
<h1>React-Toolbox <small>New way for create</small></h1>
|
|
||||||
|
|
||||||
<Clock />
|
<Clock />
|
||||||
</app>
|
</app>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue