From 8bf2e5197eb51d012c3f4e46d74c7ba32c8d4dd8 Mon Sep 17 00:00:00 2001 From: shanshanzhu Date: Tue, 16 May 2017 14:13:32 -0700 Subject: [PATCH] add support to use backgroundColor and fontColor --- README.md | 4 +- build/react-countdown-clock.js | 329 +++++++++++++++++++++++++++- build/react-countdown-clock.js.map | 2 +- coffee/react-countdown-clock.coffee | 12 +- index.html | 4 + 5 files changed, 345 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 3200519..f640ae3 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,9 @@ npm install react-countdown-clock | prop | type | default | description | |------------------|----------------|---------|-----------------------------------------------------------| | seconds | integer | 60 | Seconds to countdown | -| color | string | #000 | Colour of counter | +| color | string | #000 | Colour of progressing counter | +| backgroundColor | string | #000 | Colour of counter background, default to color | +| fontColor | string | #000 | Colour of counter text, default to color | | alpha | float | 1.0 | Alpha transparency of counter | | size | integer | 300 | Width & height of canvas element | | weight | integer | | Weight of circle, in pixels | diff --git a/build/react-countdown-clock.js b/build/react-countdown-clock.js index 2f7d888..23dc69a 100644 --- a/build/react-countdown-clock.js +++ b/build/react-countdown-clock.js @@ -1,2 +1,329 @@ -!function(t,s){"object"==typeof exports&&"object"==typeof module?module.exports=s(require("react")):"function"==typeof define&&define.amd?define(["react"],s):"object"==typeof exports?exports.ReactCountdownClock=s(require("react")):t.ReactCountdownClock=s(t.React)}(this,function(t){return function(t){function s(i){if(e[i])return e[i].exports;var r=e[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,s),r.loaded=!0,r.exports}var e={};return s.m=t,s.c=e,s.p="/build/",s(0)}([function(t,s,e){var i;i=e(1),t.exports=i.createClass({_seconds:0,_radius:null,_fraction:null,_content:null,_canvas:null,_timeoutIds:[],displayName:"ReactCountdownClock",propTypes:{seconds:i.PropTypes.number,size:i.PropTypes.number,weight:i.PropTypes.number,color:i.PropTypes.string,fontSize:i.PropTypes.string,font:i.PropTypes.string,alpha:i.PropTypes.number,timeFormat:i.PropTypes.string,onComplete:i.PropTypes.func,onClick:i.PropTypes.func,showMilliseconds:i.PropTypes.bool,paused:i.PropTypes.bool,pausedText:i.PropTypes.string},getDefaultProps:function(){return{seconds:60,size:300,color:"#000",alpha:1,timeFormat:"hms",fontSize:"auto",font:"Arial",showMilliseconds:!0,paused:!1}},componentDidUpdate:function(t){if(t.seconds!==this.props.seconds&&(this._seconds=t.seconds,this._setupTimer()),t.color!==this.props.color&&(this._clearBackground(),this._drawBackground(),this._updateCanvas()),t.paused!==this.props.paused&&(this.props.paused||this._startTimer(),this.props.paused))return this._pauseTimer()},componentDidMount:function(){return this._seconds=this.props.seconds,this._setupTimer()},componentWillUnmount:function(){return this._cancelTimer()},_setupTimer:function(){if(this._setScale(),this._setupCanvases(),this._drawBackground(),this._drawTimer(),!this.props.paused)return this._startTimer()},_updateCanvas:function(){return this._clearTimer(),this._drawTimer()},_setScale:function(){return this._radius=this.props.size/2,this._fraction=2/this._seconds,this._tickPeriod=this._calculateTick(),this._innerRadius=this.props.weight?this._radius-this.props.weight:this._radius/1.8},_calculateTick:function(){var t,s;return s=1.8,t=this._seconds*s,t>1e3?1e3:t},_setupCanvases:function(){if(this._background=this.refs.background.getContext("2d"),this._timer=this.refs.timer.getContext("2d"),this._timer.textAlign="center",this._timer.textBaseline="middle",null!=this.props.onClick)return this.refs.component.addEventListener("click",this.props.onClick)},_startTimer:function(){return this._timeoutIds.push(setTimeout(function(t){return function(){return t._tick()}}(this),200))},_pauseTimer:function(){return this._stopTimer(),this._updateCanvas()},_stopTimer:function(){var t,s,e,i,r;for(e=this._timeoutIds,i=[],t=0,s=e.length;t=1&&(r="0"+r),o=[],s>0&&o.push(s),e>0&&o.push(e),o.push(r),o.join(":")):this._seconds.toFixed(t)},_fontSize:function(t){var s,e;return"auto"===this.props.fontSize?(s=function(){switch(t.length){case 8:return 4;case 5:return 3;default:return 2}}(),e=this._radius/s,e+"px"):this.props.fontSize},_drawTimer:function(){var t,s,e;return s=this._fraction*this._seconds+1.5,t=this._formattedTime(),e=this.props.paused&&null!=this.props.pausedText?this.props.pausedText:t,this._timer.globalAlpha=this.props.alpha,this._timer.fillStyle=this.props.color,this._timer.font="bold "+this._fontSize(t)+" "+this.props.font,this._timer.fillText(e,this._radius,this._radius),this._timer.beginPath(),this._timer.arc(this._radius,this._radius,this._radius,1.5*Math.PI,Math.PI*s,!1),this._timer.arc(this._radius,this._radius,this._innerRadius,Math.PI*s,1.5*Math.PI,!0),this._timer.closePath(),this._timer.fill()},render:function(){return i.createElement("div",{ref:"component",className:"react-countdown-clock"},i.createElement("canvas",{ref:"background",style:{position:"absolute"},width:this.props.size,height:this.props.size}),i.createElement("canvas",{ref:"timer",style:{position:"absolute"},width:this.props.size,height:this.props.size}))}})},function(s,e){s.exports=t}])}); +(function webpackUniversalModuleDefinition(root, factory) { + if(typeof exports === 'object' && typeof module === 'object') + module.exports = factory(require("react")); + else if(typeof define === 'function' && define.amd) + define(["react"], factory); + else if(typeof exports === 'object') + exports["ReactCountdownClock"] = factory(require("react")); + else + root["ReactCountdownClock"] = factory(root["React"]); +})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) { +return /******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; +/******/ +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.loaded = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = "/build/"; +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ (function(module, exports, __webpack_require__) { + + var React; + + React = __webpack_require__(1); + + module.exports = React.createClass({ + _seconds: 0, + _radius: null, + _fraction: null, + _content: null, + _canvas: null, + _timeoutIds: [], + displayName: 'ReactCountdownClock', + propTypes: { + seconds: React.PropTypes.number, + size: React.PropTypes.number, + weight: React.PropTypes.number, + backgroundColor: React.PropTypes.string, + color: React.PropTypes.string, + fontSize: React.PropTypes.string, + font: React.PropTypes.string, + fontColor: React.PropTypes.string, + alpha: React.PropTypes.number, + timeFormat: React.PropTypes.string, + onComplete: React.PropTypes.func, + onClick: React.PropTypes.func, + showMilliseconds: React.PropTypes.bool, + paused: React.PropTypes.bool, + pausedText: React.PropTypes.string + }, + getDefaultProps: function() { + return { + seconds: 60, + size: 300, + color: '#000', + alpha: 1, + timeFormat: 'hms', + fontSize: 'auto', + font: 'Arial', + showMilliseconds: true, + paused: false + }; + }, + componentDidUpdate: function(props) { + if (props.seconds !== this.props.seconds) { + this._seconds = props.seconds; + this._setupTimer(); + } + if (props.color !== this.props.color) { + this._clearBackground(); + this._drawBackground(); + this._updateCanvas(); + } + if (props.paused !== this.props.paused) { + if (!this.props.paused) { + this._startTimer(); + } + if (this.props.paused) { + return this._pauseTimer(); + } + } + }, + componentDidMount: function() { + this._seconds = this.props.seconds; + return this._setupTimer(); + }, + componentWillUnmount: function() { + return this._cancelTimer(); + }, + _setupTimer: function() { + this._setScale(); + this._setupCanvases(); + this._drawBackground(); + this._drawTimer(); + if (!this.props.paused) { + return this._startTimer(); + } + }, + _updateCanvas: function() { + this._clearTimer(); + return this._drawTimer(); + }, + _setScale: function() { + this._radius = this.props.size / 2; + this._fraction = 2 / this._seconds; + this._tickPeriod = this._calculateTick(); + return this._innerRadius = this.props.weight ? this._radius - this.props.weight : this._radius / 1.8; + }, + _calculateTick: function() { + var tick, tickScale; + tickScale = 1.8; + tick = this._seconds * tickScale; + if (tick > 1000) { + return 1000; + } else { + return tick; + } + }, + _setupCanvases: function() { + this._background = this.refs.background.getContext('2d'); + this._timer = this.refs.timer.getContext('2d'); + this._timer.textAlign = 'center'; + this._timer.textBaseline = 'middle'; + if (this.props.onClick != null) { + return this.refs.component.addEventListener('click', this.props.onClick); + } + }, + _startTimer: function() { + return this._timeoutIds.push(setTimeout(((function(_this) { + return function() { + return _this._tick(); + }; + })(this)), 200)); + }, + _pauseTimer: function() { + this._stopTimer(); + return this._updateCanvas(); + }, + _stopTimer: function() { + var i, len, ref, results, timeout; + ref = this._timeoutIds; + results = []; + for (i = 0, len = ref.length; i < len; i++) { + timeout = ref[i]; + results.push(clearTimeout(timeout)); + } + return results; + }, + _cancelTimer: function() { + this._stopTimer(); + if (this.props.onClick != null) { + return this.refs.component.removeEventListener('click', this.props.onClick); + } + }, + _tick: function() { + var start; + start = Date.now(); + return this._timeoutIds.push(setTimeout(((function(_this) { + return function() { + var duration; + duration = (Date.now() - start) / 1000; + _this._seconds -= duration; + if (_this._seconds <= 0) { + _this._seconds = 0; + _this._handleComplete(); + return _this._clearTimer(); + } else { + _this._updateCanvas(); + return _this._tick(); + } + }; + })(this)), this._tickPeriod)); + }, + _handleComplete: function() { + if (this.props.onComplete) { + return this.props.onComplete(); + } + }, + _clearBackground: function() { + return this._background.clearRect(0, 0, this.refs.timer.width, this.refs.timer.height); + }, + _clearTimer: function() { + return this._timer.clearRect(0, 0, this.refs.timer.width, this.refs.timer.height); + }, + _drawBackground: function() { + this._background.beginPath(); + this._background.globalAlpha = this.props.alpha / 3; + this._background.fillStyle = this.props.backgroundColor || this.props.color; + this._background.arc(this._radius, this._radius, this._radius, 0, Math.PI * 2, false); + this._background.arc(this._radius, this._radius, this._innerRadius, Math.PI * 2, 0, true); + this._background.closePath(); + return this._background.fill(); + }, + _formattedTime: function() { + var decimals, hours, minutes, ref, seconds, timeParts; + decimals = (ref = this._seconds <= 9.9 && this.props.showMilliseconds) != null ? ref : { + 1: 0 + }; + if (this.props.timeFormat === 'hms') { + hours = parseInt(this._seconds / 3600) % 24; + minutes = parseInt(this._seconds / 60) % 60; + seconds = (this._seconds % 60).toFixed(decimals); + if (hours < 10) { + hours = "0" + hours; + } + if (minutes < 10) { + minutes = "0" + minutes; + } + if (seconds < 10 && minutes >= 1) { + seconds = "0" + seconds; + } + timeParts = []; + if (hours > 0) { + timeParts.push(hours); + } + if (minutes > 0) { + timeParts.push(minutes); + } + timeParts.push(seconds); + return timeParts.join(':'); + } else { + return this._seconds.toFixed(decimals); + } + }, + _fontSize: function(timeString) { + var scale, size; + if (this.props.fontSize === 'auto') { + scale = (function() { + switch (timeString.length) { + case 8: + return 4; + case 5: + return 3; + default: + return 2; + } + })(); + size = this._radius / scale; + return size + "px"; + } else { + return this.props.fontSize; + } + }, + _drawTimer: function() { + var formattedTime, percent, text; + percent = this._fraction * this._seconds + 1.5; + formattedTime = this._formattedTime(); + text = (this.props.paused && (this.props.pausedText != null)) ? this.props.pausedText : formattedTime; + this._timer.fillStyle = this.props.fontColor || this.props.color; + this._timer.font = "bold " + (this._fontSize(formattedTime)) + " " + this.props.font; + this._timer.fillText(text, this._radius, this._radius); + this._timer.fill(); + this._timer.globalAlpha = this.props.alpha; + this._timer.fillStyle = this.props.color; + this._timer.beginPath(); + this._timer.arc(this._radius, this._radius, this._radius, Math.PI * 1.5, Math.PI * percent, false); + this._timer.arc(this._radius, this._radius, this._innerRadius, Math.PI * percent, Math.PI * 1.5, true); + this._timer.closePath(); + return this._timer.fill(); + }, + render: function() { + return React.createElement("div", { + "ref": 'component', + "className": "react-countdown-clock" + }, React.createElement("canvas", { + "ref": 'background', + "style": { + position: 'absolute' + }, + "width": this.props.size, + "height": this.props.size + }), React.createElement("canvas", { + "ref": 'timer', + "style": { + position: 'absolute' + }, + "width": this.props.size, + "height": this.props.size + })); + } + }); + + +/***/ }), +/* 1 */ +/***/ (function(module, exports) { + + module.exports = __WEBPACK_EXTERNAL_MODULE_1__; + +/***/ }) +/******/ ]) +}); +; //# sourceMappingURL=react-countdown-clock.js.map \ No newline at end of file diff --git a/build/react-countdown-clock.js.map b/build/react-countdown-clock.js.map index 21a1d9a..6ee9eb7 100644 --- a/build/react-countdown-clock.js.map +++ b/build/react-countdown-clock.js.map @@ -1 +1 @@ -{"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///react-countdown-clock.js","webpack:///webpack/bootstrap dc312312b6eb1140e427","webpack:///./react-countdown-clock.coffee","webpack:///external {\"root\":\"React\",\"commonjs\":\"react\",\"commonjs2\":\"react\",\"amd\":\"react\"}"],"names":["root","factory","exports","module","require","define","amd","this","__WEBPACK_EXTERNAL_MODULE_1__","modules","__webpack_require__","moduleId","installedModules","id","loaded","call","m","c","p","React","createClass","_seconds","_radius","_fraction","_content","_canvas","_timeoutIds","displayName","propTypes","seconds","PropTypes","number","size","weight","color","string","fontSize","font","alpha","timeFormat","onComplete","func","onClick","showMilliseconds","bool","paused","pausedText","getDefaultProps","componentDidUpdate","props","_setupTimer","_clearBackground","_drawBackground","_updateCanvas","_startTimer","_pauseTimer","componentDidMount","componentWillUnmount","_cancelTimer","_setScale","_setupCanvases","_drawTimer","_clearTimer","_tickPeriod","_calculateTick","_innerRadius","tick","tickScale","_background","refs","background","getContext","_timer","timer","textAlign","textBaseline","component","addEventListener","push","setTimeout","_this","_tick","_stopTimer","i","len","ref","results","timeout","length","clearTimeout","removeEventListener","start","Date","now","duration","_handleComplete","clearRect","width","height","beginPath","globalAlpha","fillStyle","arc","Math","PI","closePath","fill","_formattedTime","decimals","hours","minutes","timeParts","1","parseInt","toFixed","join","_fontSize","timeString","scale","formattedTime","percent","text","fillText","render","createElement","className","style","position"],"mappings":"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","file":"react-countdown-clock.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ReactCountdownClock\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"ReactCountdownClock\"] = factory(root[\"React\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {\nreturn \n\n\n/** WEBPACK FOOTER **\n ** webpack/universalModuleDefinition\n **/","(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ReactCountdownClock\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"ReactCountdownClock\"] = factory(root[\"React\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {\nreturn /******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"/build/\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar React;\n\t\n\tReact = __webpack_require__(1);\n\t\n\tmodule.exports = React.createClass({\n\t _seconds: 0,\n\t _radius: null,\n\t _fraction: null,\n\t _content: null,\n\t _canvas: null,\n\t _timeoutIds: [],\n\t displayName: 'ReactCountdownClock',\n\t propTypes: {\n\t seconds: React.PropTypes.number,\n\t size: React.PropTypes.number,\n\t weight: React.PropTypes.number,\n\t color: React.PropTypes.string,\n\t fontSize: React.PropTypes.string,\n\t font: React.PropTypes.string,\n\t alpha: React.PropTypes.number,\n\t timeFormat: React.PropTypes.string,\n\t onComplete: React.PropTypes.func,\n\t onClick: React.PropTypes.func,\n\t showMilliseconds: React.PropTypes.bool,\n\t paused: React.PropTypes.bool,\n\t pausedText: React.PropTypes.string\n\t },\n\t getDefaultProps: function() {\n\t return {\n\t seconds: 60,\n\t size: 300,\n\t color: '#000',\n\t alpha: 1,\n\t timeFormat: 'hms',\n\t fontSize: 'auto',\n\t font: 'Arial',\n\t showMilliseconds: true,\n\t paused: false\n\t };\n\t },\n\t componentDidUpdate: function(props) {\n\t if (props.seconds !== this.props.seconds) {\n\t this._seconds = props.seconds;\n\t this._setupTimer();\n\t }\n\t if (props.color !== this.props.color) {\n\t this._clearBackground();\n\t this._drawBackground();\n\t this._updateCanvas();\n\t }\n\t if (props.paused !== this.props.paused) {\n\t if (!this.props.paused) {\n\t this._startTimer();\n\t }\n\t if (this.props.paused) {\n\t return this._pauseTimer();\n\t }\n\t }\n\t },\n\t componentDidMount: function() {\n\t this._seconds = this.props.seconds;\n\t return this._setupTimer();\n\t },\n\t componentWillUnmount: function() {\n\t return this._cancelTimer();\n\t },\n\t _setupTimer: function() {\n\t this._setScale();\n\t this._setupCanvases();\n\t this._drawBackground();\n\t this._drawTimer();\n\t if (!this.props.paused) {\n\t return this._startTimer();\n\t }\n\t },\n\t _updateCanvas: function() {\n\t this._clearTimer();\n\t return this._drawTimer();\n\t },\n\t _setScale: function() {\n\t this._radius = this.props.size / 2;\n\t this._fraction = 2 / this._seconds;\n\t this._tickPeriod = this._calculateTick();\n\t return this._innerRadius = this.props.weight ? this._radius - this.props.weight : this._radius / 1.8;\n\t },\n\t _calculateTick: function() {\n\t var tick, tickScale;\n\t tickScale = 1.8;\n\t tick = this._seconds * tickScale;\n\t if (tick > 1000) {\n\t return 1000;\n\t } else {\n\t return tick;\n\t }\n\t },\n\t _setupCanvases: function() {\n\t this._background = this.refs.background.getContext('2d');\n\t this._timer = this.refs.timer.getContext('2d');\n\t this._timer.textAlign = 'center';\n\t this._timer.textBaseline = 'middle';\n\t if (this.props.onClick != null) {\n\t return this.refs.component.addEventListener('click', this.props.onClick);\n\t }\n\t },\n\t _startTimer: function() {\n\t return this._timeoutIds.push(setTimeout(((function(_this) {\n\t return function() {\n\t return _this._tick();\n\t };\n\t })(this)), 200));\n\t },\n\t _pauseTimer: function() {\n\t this._stopTimer();\n\t return this._updateCanvas();\n\t },\n\t _stopTimer: function() {\n\t var i, len, ref, results, timeout;\n\t ref = this._timeoutIds;\n\t results = [];\n\t for (i = 0, len = ref.length; i < len; i++) {\n\t timeout = ref[i];\n\t results.push(clearTimeout(timeout));\n\t }\n\t return results;\n\t },\n\t _cancelTimer: function() {\n\t this._stopTimer();\n\t if (this.props.onClick != null) {\n\t return this.refs.component.removeEventListener('click', this.props.onClick);\n\t }\n\t },\n\t _tick: function() {\n\t var start;\n\t start = Date.now();\n\t return this._timeoutIds.push(setTimeout(((function(_this) {\n\t return function() {\n\t var duration;\n\t duration = (Date.now() - start) / 1000;\n\t _this._seconds -= duration;\n\t if (_this._seconds <= 0) {\n\t _this._seconds = 0;\n\t _this._handleComplete();\n\t return _this._clearTimer();\n\t } else {\n\t _this._updateCanvas();\n\t return _this._tick();\n\t }\n\t };\n\t })(this)), this._tickPeriod));\n\t },\n\t _handleComplete: function() {\n\t if (this.props.onComplete) {\n\t return this.props.onComplete();\n\t }\n\t },\n\t _clearBackground: function() {\n\t return this._background.clearRect(0, 0, this.refs.timer.width, this.refs.timer.height);\n\t },\n\t _clearTimer: function() {\n\t return this._timer.clearRect(0, 0, this.refs.timer.width, this.refs.timer.height);\n\t },\n\t _drawBackground: function() {\n\t this._background.beginPath();\n\t this._background.globalAlpha = this.props.alpha / 3;\n\t this._background.fillStyle = this.props.color;\n\t this._background.arc(this._radius, this._radius, this._radius, 0, Math.PI * 2, false);\n\t this._background.arc(this._radius, this._radius, this._innerRadius, Math.PI * 2, 0, true);\n\t this._background.closePath();\n\t return this._background.fill();\n\t },\n\t _formattedTime: function() {\n\t var decimals, hours, minutes, ref, seconds, timeParts;\n\t decimals = (ref = this._seconds <= 9.9 && this.props.showMilliseconds) != null ? ref : {\n\t 1: 0\n\t };\n\t if (this.props.timeFormat === 'hms') {\n\t hours = parseInt(this._seconds / 3600) % 24;\n\t minutes = parseInt(this._seconds / 60) % 60;\n\t seconds = (this._seconds % 60).toFixed(decimals);\n\t if (hours < 10) {\n\t hours = \"0\" + hours;\n\t }\n\t if (minutes < 10) {\n\t minutes = \"0\" + minutes;\n\t }\n\t if (seconds < 10 && minutes >= 1) {\n\t seconds = \"0\" + seconds;\n\t }\n\t timeParts = [];\n\t if (hours > 0) {\n\t timeParts.push(hours);\n\t }\n\t if (minutes > 0) {\n\t timeParts.push(minutes);\n\t }\n\t timeParts.push(seconds);\n\t return timeParts.join(':');\n\t } else {\n\t return this._seconds.toFixed(decimals);\n\t }\n\t },\n\t _fontSize: function(timeString) {\n\t var scale, size;\n\t if (this.props.fontSize === 'auto') {\n\t scale = (function() {\n\t switch (timeString.length) {\n\t case 8:\n\t return 4;\n\t case 5:\n\t return 3;\n\t default:\n\t return 2;\n\t }\n\t })();\n\t size = this._radius / scale;\n\t return size + \"px\";\n\t } else {\n\t return this.props.fontSize;\n\t }\n\t },\n\t _drawTimer: function() {\n\t var formattedTime, percent, text;\n\t percent = this._fraction * this._seconds + 1.5;\n\t formattedTime = this._formattedTime();\n\t text = this.props.paused && (this.props.pausedText != null) ? this.props.pausedText : formattedTime;\n\t this._timer.globalAlpha = this.props.alpha;\n\t this._timer.fillStyle = this.props.color;\n\t this._timer.font = \"bold \" + (this._fontSize(formattedTime)) + \" \" + this.props.font;\n\t this._timer.fillText(text, this._radius, this._radius);\n\t this._timer.beginPath();\n\t this._timer.arc(this._radius, this._radius, this._radius, Math.PI * 1.5, Math.PI * percent, false);\n\t this._timer.arc(this._radius, this._radius, this._innerRadius, Math.PI * percent, Math.PI * 1.5, true);\n\t this._timer.closePath();\n\t return this._timer.fill();\n\t },\n\t render: function() {\n\t return React.createElement(\"div\", {\n\t \"ref\": 'component',\n\t \"className\": \"react-countdown-clock\"\n\t }, React.createElement(\"canvas\", {\n\t \"ref\": 'background',\n\t \"style\": {\n\t position: 'absolute'\n\t },\n\t \"width\": this.props.size,\n\t \"height\": this.props.size\n\t }), React.createElement(\"canvas\", {\n\t \"ref\": 'timer',\n\t \"style\": {\n\t position: 'absolute'\n\t },\n\t \"width\": this.props.size,\n\t \"height\": this.props.size\n\t }));\n\t }\n\t});\n\n\n/***/ },\n/* 1 */\n/***/ function(module, exports) {\n\n\tmodule.exports = __WEBPACK_EXTERNAL_MODULE_1__;\n\n/***/ }\n/******/ ])\n});\n;\n\n\n/** WEBPACK FOOTER **\n ** react-countdown-clock.js\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/build/\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap dc312312b6eb1140e427\n **/","React = require 'react'\n\nmodule.exports = React.createClass\n _seconds: 0\n _radius: null\n _fraction: null\n _content: null\n _canvas: null\n _timeoutIds: []\n\n displayName: 'ReactCountdownClock'\n\n propTypes:\n seconds: React.PropTypes.number\n size: React.PropTypes.number\n weight: React.PropTypes.number\n color: React.PropTypes.string\n fontSize: React.PropTypes.string\n font: React.PropTypes.string\n alpha: React.PropTypes.number\n timeFormat: React.PropTypes.string\n onComplete: React.PropTypes.func\n onClick: React.PropTypes.func\n showMilliseconds: React.PropTypes.bool\n paused: React.PropTypes.bool\n pausedText: React.PropTypes.string\n\n getDefaultProps: ->\n seconds: 60\n size: 300\n color: '#000'\n alpha: 1\n timeFormat: 'hms'\n fontSize: 'auto'\n font: 'Arial'\n showMilliseconds: true\n paused: false\n\n componentDidUpdate: (props) ->\n if props.seconds != @props.seconds\n @_seconds = props.seconds\n @_setupTimer()\n\n if props.color != @props.color\n @_clearBackground()\n @_drawBackground()\n @_updateCanvas()\n\n if props.paused != @props.paused\n @_startTimer() if !@props.paused\n @_pauseTimer() if @props.paused\n\n componentDidMount: ->\n @_seconds = @props.seconds\n @_setupTimer()\n\n componentWillUnmount: ->\n @_cancelTimer()\n\n _setupTimer: ->\n @_setScale()\n @_setupCanvases()\n @_drawBackground()\n @_drawTimer()\n @_startTimer() unless @props.paused\n\n _updateCanvas: ->\n @_clearTimer()\n @_drawTimer()\n\n _setScale: ->\n @_radius = @props.size / 2\n @_fraction = 2 / @_seconds\n @_tickPeriod = @_calculateTick()\n @_innerRadius =\n if @props.weight\n @_radius - @props.weight\n else\n @_radius / 1.8\n\n _calculateTick: ->\n # Tick period (milleseconds) needs to be fast for smaller time periods and slower\n # for longer ones. This provides smoother rendering. It should never exceed 1 second.\n tickScale = 1.8\n tick = @_seconds * tickScale\n if tick > 1000 then 1000 else tick\n\n _setupCanvases: ->\n @_background = @refs.background.getContext '2d'\n @_timer = @refs.timer.getContext '2d'\n @_timer.textAlign = 'center'\n @_timer.textBaseline = 'middle'\n if @props.onClick?\n @refs.component.addEventListener 'click', @props.onClick\n\n _startTimer: ->\n # Give it a moment to collect it's thoughts for smoother render\n @_timeoutIds.push(setTimeout ( => @_tick() ), 200)\n\n _pauseTimer: ->\n @_stopTimer()\n @_updateCanvas()\n\n _stopTimer: ->\n for timeout in @_timeoutIds\n clearTimeout timeout\n\n _cancelTimer: ->\n @_stopTimer()\n\n if @props.onClick?\n @refs.component.removeEventListener 'click', @props.onClick\n\n _tick: ->\n start = Date.now()\n @_timeoutIds.push(setTimeout ( =>\n duration = (Date.now() - start) / 1000\n @_seconds -= duration\n\n if @_seconds <= 0\n @_seconds = 0\n @_handleComplete()\n @_clearTimer()\n else\n @_updateCanvas()\n @_tick()\n ), @_tickPeriod)\n\n _handleComplete: ->\n if @props.onComplete\n @props.onComplete()\n\n _clearBackground: ->\n @_background.clearRect 0, 0, @refs.timer.width, @refs.timer.height\n\n _clearTimer: ->\n @_timer.clearRect 0, 0, @refs.timer.width, @refs.timer.height\n\n _drawBackground: ->\n @_background.beginPath()\n @_background.globalAlpha = @props.alpha / 3\n @_background.fillStyle = @props.color\n @_background.arc @_radius, @_radius, @_radius, 0, Math.PI * 2, false\n @_background.arc @_radius, @_radius, @_innerRadius, Math.PI * 2, 0, true\n @_background.closePath()\n @_background.fill()\n\n _formattedTime: ->\n decimals = (@_seconds <= 9.9 && @props.showMilliseconds) ? 1 : 0\n\n if @props.timeFormat == 'hms'\n hours = parseInt( @_seconds / 3600 ) % 24\n minutes = parseInt( @_seconds / 60 ) % 60\n seconds = (@_seconds % 60).toFixed(decimals)\n\n hours = \"0#{hours}\" if hours < 10\n minutes = \"0#{minutes}\" if minutes < 10\n seconds = \"0#{seconds}\" if seconds < 10 && minutes >= 1\n\n timeParts = []\n timeParts.push hours if hours > 0\n timeParts.push minutes if minutes > 0\n timeParts.push seconds\n\n timeParts.join ':'\n else\n return @_seconds.toFixed(decimals)\n\n _fontSize: (timeString) ->\n if @props.fontSize == 'auto'\n scale = switch timeString.length\n when 8 then 4 # hh:mm:ss\n when 5 then 3 # mm:ss\n else 2 # ss or ss.s\n size = @_radius / scale\n \"#{size}px\"\n else\n @props.fontSize\n\n _drawTimer: ->\n percent = @_fraction * @_seconds + 1.5\n formattedTime = @_formattedTime()\n text = if (@props.paused && @props.pausedText?) then @props.pausedText else formattedTime\n\n # Timer\n @_timer.globalAlpha = @props.alpha\n @_timer.fillStyle = @props.color\n @_timer.font = \"bold #{@_fontSize(formattedTime)} #{@props.font}\"\n @_timer.fillText text, @_radius, @_radius\n @_timer.beginPath()\n @_timer.arc @_radius, @_radius, @_radius, Math.PI * 1.5, Math.PI * percent, false\n @_timer.arc @_radius, @_radius, @_innerRadius, Math.PI * percent, Math.PI * 1.5, true\n @_timer.closePath()\n @_timer.fill()\n\n render: ->\n React.createElement(\"div\", {\"ref\": 'component', \"className\": \"react-countdown-clock\"},\n React.createElement(\"canvas\", {\"ref\": 'background', \"style\": ( position: 'absolute' ), \"width\": (@props.size), \"height\": (@props.size)}),\n React.createElement(\"canvas\", {\"ref\": 'timer', \"style\": ( position: 'absolute' ), \"width\": (@props.size), \"height\": (@props.size)})\n )\n\n\n\n/** WEBPACK FOOTER **\n ** ../~/cjsx-loader!./react-countdown-clock.coffee\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_1__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external {\"root\":\"React\",\"commonjs\":\"react\",\"commonjs2\":\"react\",\"amd\":\"react\"}\n ** module id = 1\n ** module chunks = 0\n **/"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap f27ae4c482998ce80260","webpack:///./react-countdown-clock.coffee","webpack:///external {\"root\":\"React\",\"commonjs\":\"react\",\"commonjs2\":\"react\",\"amd\":\"react\"}"],"names":[],"mappings":"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","file":"react-countdown-clock.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ReactCountdownClock\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"ReactCountdownClock\"] = factory(root[\"React\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/build/\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap f27ae4c482998ce80260","React = require 'react'\n\nmodule.exports = React.createClass\n _seconds: 0\n _radius: null\n _fraction: null\n _content: null\n _canvas: null\n _timeoutIds: []\n\n displayName: 'ReactCountdownClock'\n\n propTypes:\n seconds: React.PropTypes.number\n size: React.PropTypes.number\n weight: React.PropTypes.number\n backgroundColor: React.PropTypes.string\n color: React.PropTypes.string\n fontSize: React.PropTypes.string\n font: React.PropTypes.string\n fontColor: React.PropTypes.string\n alpha: React.PropTypes.number\n timeFormat: React.PropTypes.string\n onComplete: React.PropTypes.func\n onClick: React.PropTypes.func\n showMilliseconds: React.PropTypes.bool\n paused: React.PropTypes.bool\n pausedText: React.PropTypes.string\n\n getDefaultProps: ->\n seconds: 60\n size: 300\n color: '#000'\n alpha: 1\n timeFormat: 'hms'\n fontSize: 'auto'\n font: 'Arial'\n showMilliseconds: true\n paused: false\n\n componentDidUpdate: (props) ->\n if props.seconds != @props.seconds\n @_seconds = props.seconds\n @_setupTimer()\n\n if props.color != @props.color\n @_clearBackground()\n @_drawBackground()\n @_updateCanvas()\n\n if props.paused != @props.paused\n @_startTimer() if !@props.paused\n @_pauseTimer() if @props.paused\n\n componentDidMount: ->\n @_seconds = @props.seconds\n @_setupTimer()\n\n componentWillUnmount: ->\n @_cancelTimer()\n\n _setupTimer: ->\n @_setScale()\n @_setupCanvases()\n @_drawBackground()\n @_drawTimer()\n @_startTimer() unless @props.paused\n\n _updateCanvas: ->\n @_clearTimer()\n @_drawTimer()\n\n _setScale: ->\n @_radius = @props.size / 2\n @_fraction = 2 / @_seconds\n @_tickPeriod = @_calculateTick()\n @_innerRadius =\n if @props.weight\n @_radius - @props.weight\n else\n @_radius / 1.8\n\n _calculateTick: ->\n # Tick period (milleseconds) needs to be fast for smaller time periods and slower\n # for longer ones. This provides smoother rendering. It should never exceed 1 second.\n tickScale = 1.8\n tick = @_seconds * tickScale\n if tick > 1000 then 1000 else tick\n\n _setupCanvases: ->\n @_background = @refs.background.getContext '2d'\n @_timer = @refs.timer.getContext '2d'\n @_timer.textAlign = 'center'\n @_timer.textBaseline = 'middle'\n if @props.onClick?\n @refs.component.addEventListener 'click', @props.onClick\n\n _startTimer: ->\n # Give it a moment to collect it's thoughts for smoother render\n @_timeoutIds.push(setTimeout ( => @_tick() ), 200)\n\n _pauseTimer: ->\n @_stopTimer()\n @_updateCanvas()\n\n _stopTimer: ->\n for timeout in @_timeoutIds\n clearTimeout timeout\n\n _cancelTimer: ->\n @_stopTimer()\n\n if @props.onClick?\n @refs.component.removeEventListener 'click', @props.onClick\n\n _tick: ->\n start = Date.now()\n @_timeoutIds.push(setTimeout ( =>\n duration = (Date.now() - start) / 1000\n @_seconds -= duration\n\n if @_seconds <= 0\n @_seconds = 0\n @_handleComplete()\n @_clearTimer()\n else\n @_updateCanvas()\n @_tick()\n ), @_tickPeriod)\n\n _handleComplete: ->\n if @props.onComplete\n @props.onComplete()\n\n _clearBackground: ->\n @_background.clearRect 0, 0, @refs.timer.width, @refs.timer.height\n\n _clearTimer: ->\n @_timer.clearRect 0, 0, @refs.timer.width, @refs.timer.height\n\n _drawBackground: ->\n @_background.beginPath()\n @_background.globalAlpha = @props.alpha / 3\n @_background.fillStyle = @props.backgroundColor or @props.color\n @_background.arc @_radius, @_radius, @_radius, 0, Math.PI * 2, false\n @_background.arc @_radius, @_radius, @_innerRadius, Math.PI * 2, 0, true\n @_background.closePath()\n @_background.fill()\n\n _formattedTime: ->\n decimals = (@_seconds <= 9.9 && @props.showMilliseconds) ? 1 : 0\n\n if @props.timeFormat == 'hms'\n hours = parseInt( @_seconds / 3600 ) % 24\n minutes = parseInt( @_seconds / 60 ) % 60\n seconds = (@_seconds % 60).toFixed(decimals)\n\n hours = \"0#{hours}\" if hours < 10\n minutes = \"0#{minutes}\" if minutes < 10\n seconds = \"0#{seconds}\" if seconds < 10 && minutes >= 1\n\n timeParts = []\n timeParts.push hours if hours > 0\n timeParts.push minutes if minutes > 0\n timeParts.push seconds\n\n timeParts.join ':'\n else\n return @_seconds.toFixed(decimals)\n\n _fontSize: (timeString) ->\n if @props.fontSize == 'auto'\n scale = switch timeString.length\n when 8 then 4 # hh:mm:ss\n when 5 then 3 # mm:ss\n else 2 # ss or ss.s\n size = @_radius / scale\n \"#{size}px\"\n else\n @props.fontSize\n\n _drawTimer: ->\n percent = @_fraction * @_seconds + 1.5\n formattedTime = @_formattedTime()\n text = if (@props.paused && @props.pausedText?) then @props.pausedText else formattedTime\n\n # Timer Text\n @_timer.fillStyle = @props.fontColor or @props.color\n @_timer.font = \"bold #{@_fontSize(formattedTime)} #{@props.font}\"\n @_timer.fillText text, @_radius, @_radius\n @_timer.fill()\n\n # Timer\n @_timer.globalAlpha = @props.alpha\n @_timer.fillStyle = @props.color\n @_timer.beginPath()\n @_timer.arc @_radius, @_radius, @_radius, Math.PI * 1.5, Math.PI * percent, false\n @_timer.arc @_radius, @_radius, @_innerRadius, Math.PI * percent, Math.PI * 1.5, true\n @_timer.closePath()\n @_timer.fill()\n\n render: ->\n React.createElement(\"div\", {\"ref\": 'component', \"className\": \"react-countdown-clock\"},\n React.createElement(\"canvas\", {\"ref\": 'background', \"style\": ( position: 'absolute' ), \"width\": (@props.size), \"height\": (@props.size)}),\n React.createElement(\"canvas\", {\"ref\": 'timer', \"style\": ( position: 'absolute' ), \"width\": (@props.size), \"height\": (@props.size)})\n )\n\n\n\n// WEBPACK FOOTER //\n// ../~/cjsx-loader!./react-countdown-clock.coffee","module.exports = __WEBPACK_EXTERNAL_MODULE_1__;\n\n\n//////////////////\n// WEBPACK FOOTER\n// external {\"root\":\"React\",\"commonjs\":\"react\",\"commonjs2\":\"react\",\"amd\":\"react\"}\n// module id = 1\n// module chunks = 0"],"sourceRoot":""} \ No newline at end of file diff --git a/coffee/react-countdown-clock.coffee b/coffee/react-countdown-clock.coffee index f41de4d..e9b0e49 100644 --- a/coffee/react-countdown-clock.coffee +++ b/coffee/react-countdown-clock.coffee @@ -14,9 +14,11 @@ module.exports = React.createClass seconds: React.PropTypes.number size: React.PropTypes.number weight: React.PropTypes.number + backgroundColor: React.PropTypes.string color: React.PropTypes.string fontSize: React.PropTypes.string font: React.PropTypes.string + fontColor: React.PropTypes.string alpha: React.PropTypes.number timeFormat: React.PropTypes.string onComplete: React.PropTypes.func @@ -139,7 +141,7 @@ module.exports = React.createClass _drawBackground: -> @_background.beginPath() @_background.globalAlpha = @props.alpha / 3 - @_background.fillStyle = @props.color + @_background.fillStyle = @props.backgroundColor or @props.color @_background.arc @_radius, @_radius, @_radius, 0, Math.PI * 2, false @_background.arc @_radius, @_radius, @_innerRadius, Math.PI * 2, 0, true @_background.closePath() @@ -182,11 +184,15 @@ module.exports = React.createClass formattedTime = @_formattedTime() text = if (@props.paused && @props.pausedText?) then @props.pausedText else formattedTime + # Timer Text + @_timer.fillStyle = @props.fontColor or @props.color + @_timer.font = "bold #{@_fontSize(formattedTime)} #{@props.font}" + @_timer.fillText text, @_radius, @_radius + @_timer.fill() + # Timer @_timer.globalAlpha = @props.alpha @_timer.fillStyle = @props.color - @_timer.font = "bold #{@_fontSize(formattedTime)} #{@props.font}" - @_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 diff --git a/index.html b/index.html index 39b7df8..8197398 100644 --- a/index.html +++ b/index.html @@ -40,6 +40,8 @@ return { seconds: randomAmountOfSeconds(), color: randomColor(), + fontColor: '#aaa', + backgroundColor: '#fff', paused: false, fontSize: 'auto' } @@ -63,6 +65,8 @@ React.createElement(ReactCountdownClock, { seconds: this.state.seconds, color: this.state.color, + fontColor: this.state.fontColor, + backgroundColor: this.state.backgroundColor, paused: this.state.paused, pausedText: "▐▐ ", alpha: 0.9,