diff --git a/coffee/react-countdown-clock.coffee b/coffee/react-countdown-clock.coffee
index 54b6f23..4e5c9b6 100644
--- a/coffee/react-countdown-clock.coffee
+++ b/coffee/react-countdown-clock.coffee
@@ -4,6 +4,7 @@ CreateReactClass = require 'create-react-class'
ReactCountdownClock = CreateReactClass
_seconds: 0
+ _prevSeconds: 0
_radius: null
_fraction: null
_content: null
@@ -99,6 +100,7 @@ ReactCountdownClock = CreateReactClass
start = Date.now()
@_timeoutIds.push(setTimeout ( =>
duration = (Date.now() - start) / 1000
+ @_prevSeconds = Math.round(@_seconds)
@_seconds -= duration
if @_seconds <= 0
@@ -107,6 +109,10 @@ ReactCountdownClock = CreateReactClass
@_clearTimer()
else
@_updateCanvas()
+ if @props.onSecond
+ roundSeconds = Math.round(@_seconds)
+ if roundSeconds != @_prevSeconds
+ @props.onSecond(roundSeconds)
@_tick()
), @_tickPeriod)
@@ -201,6 +207,7 @@ ReactCountdownClock.propTypes =
timeFormat: PropTypes.string
onComplete: PropTypes.func
onClick: PropTypes.func
+ onSecond: PropTypes.func
showMilliseconds: PropTypes.bool
paused: PropTypes.bool
pausedText: PropTypes.string
diff --git a/index.html b/index.html
index e963ee9..fd8d53d 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
+
react-countdown-clock
@@ -7,7 +8,8 @@
body {
background-color: #CCC;
}
- #parappa {
+
+ #parappa {
position: absolute;
top: 50%;
left: 50%;
@@ -17,6 +19,7 @@
}
+
@@ -27,31 +30,34 @@
var MAX = 120;
var MIN = 10;
- var randomAmountOfSeconds = function(){
- return Math.floor( Math.random() * ( MAX - MIN + 1) + MIN )
+ var randomAmountOfSeconds = function () {
+ return Math.floor(Math.random() * (MAX - MIN + 1) + MIN)
}
- var randomColor = function(){
- return '#' + ( Math.random() * 0xFFFFFF << 0 ).toString(16);
+ var randomColor = function () {
+ return '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
}
var Demo = createReactClass({
displayName: 'Demo',
- getState: function(){
- return {
+ getState: function () {
+ return {
seconds: randomAmountOfSeconds(),
color: randomColor(),
paused: false,
fontSize: 'auto'
}
},
- getInitialState: function(){
+ getInitialState: function () {
return this.getState();
},
- handleOnComplete: function(){
+ handleOnComplete: function () {
this.setState(this.getState());
},
- handleOnClick: function(){
+ handleOnSecond: function (seconds) {
+ console.log('seconds: ' + seconds);
+ },
+ handleOnClick: function () {
wasPaused = this.state.paused
this.setState({
// color: randomColor(),
@@ -59,7 +65,7 @@
fontSize: (wasPaused) ? 'auto' : '45px',
});
},
- render: function(){
+ render: function () {
return (
React.createElement(ReactCountdownClock, {
seconds: this.state.seconds,
@@ -69,7 +75,8 @@
alpha: 0.9,
onComplete: this.handleOnComplete,
onClick: this.handleOnClick,
- fontSize: this.state.fontSize
+ fontSize: this.state.fontSize,
+ onSecond: this.handleOnSecond
})
)
}
@@ -81,4 +88,5 @@
)
-
+
+