Merge branch 'master' into gh-pages

Author: pughpugh

README.md

@@ -26,18 +26,20 @@ npm install react-countdown-clock
 
 ## Props
 
-| prop             | type           | default | description                                    |
-|------------------|----------------|---------|------------------------------------------------|
-| seconds          | integer        | 60      | Seconds to countdown                           |
-| color            | string         | #000    | Colour of counter                              |
-| alpha            | float          | 1.0     | Alpha transparency of counter                  |
-| size             | integer        | 300     | Width & height of canvas element               |
-| weight           | integer        |         | Weight of circle, in pixels                    |
-| fontSize         | integer/string | auto    | px size of font. `auto` for dynamic sizing.    |
-| font             | string         | Arial   | Font of counter                                |
-| timeFormat       | string         | seconds | Counter style; `seconds` or `hms`              |
-| showMilliseconds | boolean        | true    | Show milliseconds for last 10 seconds          |
-| onComplete       | func           |         | Callback when time completes                   |
+| prop             | type           | default | description                                               |
+|------------------|----------------|---------|-----------------------------------------------------------|
+| seconds          | integer        | 60      | Seconds to countdown                                      |
+| color            | string         | #000    | Colour of counter                                         |
+| alpha            | float          | 1.0     | Alpha transparency of counter                             |
+| size             | integer        | 300     | Width & height of canvas element                          |
+| weight           | integer        |         | Weight of circle, in pixels                               |
+| fontSize         | integer/string | auto    | px size of font. `auto` for dynamic sizing.               |
+| font             | string         | Arial   | Font of counter                                           |
+| timeFormat       | string         | seconds | Counter style; `seconds` or `hms`                         |
+| showMilliseconds | boolean        | true    | Show milliseconds for last 10 seconds                     |
+| onComplete       | func           |         | Callback when time completes                              |
+| paused           | boolean        | false   | Pause countdown of the timer                              |
+| pausedText       | string         |         | Text to display when paused, defaults to the current time |
 
 ## Bugs & Contributions
 

build/react-countdown-clock.js

@@ -22,6 +22,8 @@ module.exports = React.createClass
     onComplete: React.PropTypes.func
     onClick: React.PropTypes.func
     showMilliseconds: React.PropTypes.bool
+    paused: React.PropTypes.bool
+    pausedText: React.PropTypes.string
 
   getDefaultProps: ->
     seconds: 60
@@ -32,6 +34,7 @@ module.exports = React.createClass
     fontSize: 'auto'
     font: 'Arial'
     showMilliseconds: true
+    paused: false
 
   componentDidUpdate: (props) ->
     if props.seconds != @props.seconds
@@ -43,6 +46,10 @@ module.exports = React.createClass
       @_drawBackground()
       @_updateCanvas()
 
+    if props.paused != @props.paused
+      @_startTimer() if !@props.paused
+      @_pauseTimer() if @props.paused
+
   componentDidMount: ->
     @_seconds = @props.seconds
     @_setupTimer()
@@ -55,7 +62,7 @@ module.exports = React.createClass
     @_setupCanvases()
     @_drawBackground()
     @_drawTimer()
-    @_startTimer()
+    @_startTimer() unless @props.paused
 
   _updateCanvas: ->
     @_clearTimer()
@@ -90,10 +97,17 @@ module.exports = React.createClass
     # Give it a moment to collect it's thoughts for smoother render
     @_timeoutIds.push(setTimeout ( => @_tick() ), 200)
 
-  _cancelTimer: ->
+  _pauseTimer: ->
+    @_stopTimer()
+    @_updateCanvas()
+
+  _stopTimer: ->
     for timeout in @_timeoutIds
       clearTimeout timeout
 
+  _cancelTimer: ->
+    @_stopTimer()
+
     if @props.onClick?
       @refs.component.removeEventListener 'click', @props.onClick
 
@@ -166,15 +180,16 @@ module.exports = React.createClass
   _drawTimer: ->
     percent = @_fraction * @_seconds + 1.5
     formattedTime = @_formattedTime()
+    text = if (@props.paused && @props.pausedText?) then @props.pausedText else formattedTime
 
     # Timer
     @_timer.globalAlpha = @props.alpha
     @_timer.fillStyle = @props.color
     @_timer.font = "bold #{@_fontSize(formattedTime)} #{@props.font}"
-    @_timer.fillText formattedTime, @_radius, @_radius
+    @_timer.fillText text, @_radius, @_radius
     @_timer.beginPath()
-    @_timer.arc @_radius, @_radius,      @_radius,     Math.PI * 1.5, Math.PI * percent, false
-    @_timer.arc @_radius, @_radius, @_innerRadius, Math.PI * percent,     Math.PI * 1.5, true
+    @_timer.arc @_radius, @_radius, @_radius,      Math.PI * 1.5,     Math.PI * percent, false
+    @_timer.arc @_radius, @_radius, @_innerRadius, Math.PI * percent, Math.PI * 1.5,     true
     @_timer.closePath()
     @_timer.fill()
 

build/react-countdown-clock.js.map

@@ -39,7 +39,9 @@
       getState: function(){
         return { 
           seconds: randomAmountOfSeconds(),
-          color: randomColor()
+          color: randomColor(),
+          paused: false,
+          fontSize: 'auto'
         }
       },
       getInitialState: function(){
@@ -49,19 +51,24 @@
         this.setState(this.getState());
       },
       handleOnClick: function(){
-        console.log("CLICK")
+        wasPaused = this.state.paused
         this.setState({
-          color: randomColor()
+          // color: randomColor(),
+          paused: (wasPaused) ? false : true,
+          fontSize: (wasPaused) ? 'auto' : '45px',
         });
       },
       render: function(){
         return (
           React.createElement(ReactCountdownClock, {
             seconds: this.state.seconds,
             color: this.state.color,
+            paused: this.state.paused,
+            pausedText: "▐▐ ",
             alpha: 0.9,
             onComplete: this.handleOnComplete,
-            onClick: this.handleOnClick
+            onClick: this.handleOnClick,
+            fontSize: this.state.fontSize
           })
         )
       }