Merge branch 'master' into gh-pages

Author: pughpugh

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.0.8 - Aug 8, 2016
+
+  * Updated React version in peerDependencies
+  * Added new props for fontSize, font, timeFormat and showMilliseconds
+  * Added ability to render minutes and hours
+  * Fixed long countdowns having a tick period longer than 1 second
+
 ## 1.0.7 - Aug 7, 2016
 
   * Weight of circle can now be configured. Thanks @rutan.

README.md

@@ -1,6 +1,6 @@
 # React Countdown Clock
 
-A HTML 5 canvas countdown clock as a React component
+A HTML 5 canvas countdown clock as a React component.
 
 ![Screenshot](http://pughpugh.github.io/react-countdown-clock/screenshot.png?=0)
 
@@ -26,13 +26,26 @@ npm install react-countdown-clock
 
 ## Props
 
-* `seconds` to count down
-* `color` you'd like it to be as a hex/css colour code
-* `alpha` transparency for component
-* `size` for height and width of canvas element, in pixels.
-* `weight` for weight of circle, in pixels.
-* `onComplete` callback when timer 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                   |
 
-## Bugs
+## Bugs & Contributions
+
+Bugs, features and pull requests always welcome.
 
 [github.com/pughpugh/react-countdown-clock/issues](https://github.com/pughpugh/react-countdown-clock/issues)
+
+Also, it's always just nice to hear how people are using it. Feel free to get in touch.
+
+* Email: [hugh@hcgallagher.co.uk](mailto:hugh@hcgallagher.co.uk)
+* Web: [www.hughgallagher.co.uk](http://www.hughgallagher.co.uk/)

RELEASE_PROCESS.md

@@ -1,26 +1,32 @@
-Just to remind myself of my own release process for this repo
+Just to remind myself of my own release process for this repo.
 
 1. Make some changes / merge PR
 2. Bump version in `package.json`
 3. Update `README.md` if needed
 4. Update `CHANGELOG.md`
 5. Webpack build
-        ```
+
         webpack -p
-        ```
+
 6. Test it all works
-        ```
+
         serve
         open index.html -a 'Google Chrome'
-        ```
+
 7. Tag and push the release
-        ```
+
         git tag 1.0.x
         git push
         git push --tags
-        ```
+
 8. Publish on NPM
-        ```
+
         npm publish
-        ```
+
+9. Update Githup Pages
+
+        git checkout gh-pages
+        git merge master
+        git push
+
 9. Cup of tea

build/react-countdown-clock.js

@@ -15,13 +15,22 @@ module.exports = React.createClass
     size: React.PropTypes.number
     weight: React.PropTypes.number
     color: React.PropTypes.string
+    fontSize: React.PropTypes.string
+    font: React.PropTypes.string
     alpha: React.PropTypes.number
+    timeFormat: React.PropTypes.string
     onComplete: React.PropTypes.func
+    showMilliseconds: React.PropTypes.boolean
 
   getDefaultProps: ->
+    seconds: 60
     size: 300
     color: '#000'
     alpha: 1
+    timeFormat: 'hms'
+    fontSize: 'auto'
+    font: 'Arial'
+    showMilliseconds: true
 
   componentWillReceiveProps: (props) ->
     @_seconds = props.seconds
@@ -47,19 +56,25 @@ module.exports = React.createClass
   _setScale: ->
     @_radius      = @props.size / 2
     @_fraction    = 2 / @_seconds
-    @_tickPeriod  = @_seconds * 1.8
+    @_tickPeriod  = @_calculateTick()
     @_innerRadius =
       if @props.weight
         @_radius - @props.weight
       else
         @_radius / 1.8
 
+  _calculateTick: ->
+    # Tick period (milleseconds) needs to be fast for smaller time periods and slower
+    # for longer ones. This provides smoother rendering. It should never exceed 1 second.
+    tickScale = 1.8
+    tick = @_seconds * tickScale
+    if tick > 1000 then 1000 else tick
+
   _setupCanvas: ->
     @_canvas  = @refs.canvas
     @_context = @_canvas.getContext '2d'
     @_context.textAlign = 'center'
     @_context.textBaseline = 'middle'
-    @_context.font = "bold #{@_radius/2}px Arial"
 
   _startTimer: ->
     # Give it a moment to collect it's thoughts for smoother render
@@ -99,12 +114,45 @@ module.exports = React.createClass
     @_context.arc @_radius, @_radius, @_innerRadius, Math.PI * 2,           0, true
     @_context.fill()
 
+  _formattedTime: ->
+    decimals = (@_seconds <= 9.9 && @props.showMilliseconds) ? 1 : 0
+
+    if @props.timeFormat == 'hms'
+      hours   = parseInt( @_seconds / 3600 ) % 24
+      minutes = parseInt( @_seconds / 60 ) % 60
+      seconds = (@_seconds % 60).toFixed(decimals)
+
+      hours   = "0#{hours}" if hours < 10
+      minutes = "0#{minutes}" if minutes < 10
+      seconds = "0#{seconds}" if seconds < 10 && minutes >= 1
+
+      timeParts = []
+      timeParts.push hours if hours > 0
+      timeParts.push minutes if minutes > 0
+      timeParts.push seconds
+
+      timeParts.join ':'
+    else
+      return @_seconds.toFixed(decimals)
+
+  _fontSize: (timeString) ->
+    if @props.fontSize == 'auto'
+      scale = switch timeString.length
+        when 8 then 4 # hh:mm:ss
+        when 5 then 3 # mm:ss
+        else 2        # ss or ss.s
+      size = @_radius / scale
+      "#{size}px"
+    else
+      @props.fontSize
+
   _drawTimer: ->
     percent = @_fraction * @_seconds + 1.5
-    decimals = (@_seconds <= 9.9) ? 1 : 0
+    formattedTime = @_formattedTime()
     @_context.globalAlpha = @props.alpha
     @_context.fillStyle = @props.color
-    @_context.fillText @_seconds.toFixed(decimals), @_radius, @_radius
+    @_context.font = "bold #{@_fontSize(formattedTime)} #{@props.font}"
+    @_context.fillText formattedTime, @_radius, @_radius
     @_context.beginPath()
     @_context.arc @_radius, @_radius,      @_radius,     Math.PI * 1.5, Math.PI * percent, false
     @_context.arc @_radius, @_radius, @_innerRadius, Math.PI * percent,     Math.PI * 1.5, true

build/react-countdown-clock.js.map

@@ -19,12 +19,12 @@
 </head>
 <body>
   <div id="parappa"></div>
-  <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
-  <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
   <script src="./build/react-countdown-clock.js"></script>
   <script>
-    var MAX = 30;
-    var MIN = 5;
+    var MAX = 120;
+    var MIN = 30;
 
     var randomAmountOfSeconds = function(){
       return Math.floor( Math.random() * ( MAX - MIN + 1) + MIN )

coffee/react-countdown-clock.coffee

@@ -1,6 +1,6 @@
 {
   "name": "react-countdown-clock",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "HTML5 canvas countdown clock React component",
   "main": "build/react-countdown-clock.js",
   "repository": {
@@ -24,9 +24,10 @@
     "cjsx-loader": "^2.1.0",
     "coffee-loader": "^0.7.2",
     "coffee-script": "^1.8.0",
-    "webpack": "^1.4.15"
+    "webpack": "^1.13.1",
+    "react": "15.*"
   },
   "peerDependencies": {
-    "react": "^0.14.3"
+    "react": "15.*"
   }
 }