diff --git a/.travis.yml b/.travis.yml index fa0831f..26c5c50 100644 --- a/.travis.yml +++ b/.travis.yml @@ -6,11 +6,11 @@ addons: firefox: latest apt: sources: - - google-chrome + - google-chrome packages: - - google-chrome-stable + - google-chrome-stable before_script: -- npm install -g bower polylint web-component-tester -- bower install -- polylint -script: xvfb-run wct + - npm install -g polylint web-component-tester + - polylint +script: xvfb-run wct --module-resolution=node --npm + diff --git a/bower.json b/bower.json index d312a29..3fc0dee 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "flip-clock", - "version": "2.0.0", + "version": "3.0.0", "keywords": [ "polymer", "web-components" diff --git a/demo/index.html b/demo/index.html index 93ca0cf..9337b33 100644 --- a/demo/index.html +++ b/demo/index.html @@ -6,24 +6,47 @@ flip-clock demo - + - - - + + + - + + + -
+ diff --git a/flip-clock.html b/flip-clock.html deleted file mode 100644 index cdcd6b1..0000000 --- a/flip-clock.html +++ /dev/null @@ -1,168 +0,0 @@ - - - - - - - - diff --git a/flip-clock.js b/flip-clock.js new file mode 100644 index 0000000..e10457a --- /dev/null +++ b/flip-clock.js @@ -0,0 +1,166 @@ +import { PolymerElement } from '@polymer/polymer/polymer-element.js'; +import './moment-import.js'; +import { html } from '@polymer/polymer/lib/utils/html-tag.js'; +/** + * `flip-clock` + * + * + * @customElement + * @polymer + * @demo demo/index.html + */ +class FlipClock extends PolymerElement { + static get template() { + return html` + +
+ + [[time.0]][[time.1]]: + + [[time.2]][[time.3]] + + :[[time.4]][[time.5]] + + +
+
+ + + +
+`; + } + + static get is() { return 'flip-clock'; } + static get properties() { + return { + displayMode: { + type: String + }, + showButtons: { + type: Boolean, + value: false + }, + hideHours: { + type: Boolean, + value: false + }, + hideSeconds: { + type: Boolean, + value: false + }, + startFrom: { + type: Number, + value: null + }, + auto: { + type: Boolean, + value: false + }, + isRunning: { + type: Boolean, + value: false + } + }; + } + constructor() { + super(); + this.time = '000000'; + this.timer = null; + } + _createClock() { + this.time = moment().format('HHmmss'); + setTimeout(() => this._createClock(), 1000); + } + _createTimer() { + if(this.isRunning) { + this.time = this.timer.add(1, 's').format('HHmmss'); + setTimeout(() => this._createTimer(), 1000); + } + } + _createCountdown() { + if(this.isRunning) { + if(this.time > 0) { + this.time = this.timer.subtract(1, 's').format('HHmmss'); + setTimeout(() => this._createCountdown(), 1000); + } + } + } + _startCount() { + if(!this.timer) { + this.timer = moment().hours(0).minutes(this.startFrom || 0).seconds(0); + } + this.isRunning = true; + this.startFrom ? this._createCountdown() : this._createTimer(); + } + _stopCount() { + this.isRunning = false; + } + _resetCount() { + this.isRunning = false; + this.time = this.startFrom ? '00' + this.startFrom + '00' : '000000'; + this.timer = null; + } + ready() { + super.ready(); + this._resetCount(); + + if(this.displayMode === 'timer' || this.displayMode === 'countdown') { + if(this.auto === true) { + this._startCount(); + } + } else { + this._createClock(); + } + + if(this.startFrom) { + this.time = '00' + ('00' + this.startFrom).slice(-2) + '00'; + } + } +} + +window.customElements.define(FlipClock.is, FlipClock); diff --git a/moment-import.html b/moment-import.html deleted file mode 100644 index 2055a4e..0000000 --- a/moment-import.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/moment-import.js b/moment-import.js new file mode 100644 index 0000000..632bc77 --- /dev/null +++ b/moment-import.js @@ -0,0 +1 @@ +import 'moment/moment.js'; diff --git a/package.json b/package.json new file mode 100644 index 0000000..2bfc746 --- /dev/null +++ b/package.json @@ -0,0 +1,27 @@ +{ + "description": "A flip clock, timer and countdown made with Polymer", + "keywords": [ + "polymer", + "web-components" + ], + "homepage": "https://github.com/Craftoncu/flip-clock", + "name": "@polymer/flip-clock", + "version": "3.0.0", + "resolutions": { + "inherits": "2.0.3", + "samsam": "1.1.3", + "supports-color": "3.1.2", + "type-detect": "1.0.0" + }, + "main": "flip-clock.js", + "author": "Daniel Kollmannsberger ", + "license": "MIT", + "dependencies": { + "@polymer/polymer": "^3.0.0" + }, + "devDependencies": { + "@polymer/iron-demo-helpers": "^3.0.0", + "wct-browser-legacy": "^1.0.1", + "@webcomponents/webcomponentsjs": "^2.0.0" + } +} diff --git a/test/flip-clock-test.html b/test/flip-clock-test.html index 32a9011..04db8e3 100644 --- a/test/flip-clock-test.html +++ b/test/flip-clock-test.html @@ -3,10 +3,10 @@ - - + + - + @@ -29,47 +29,48 @@ - + startBtn.click(); + assert.isTrue(startBtn.hasAttribute('disabled')); + }); + + test('should start from 20 minutes', function() { + assert.equal(countdown.time, '002000'); + }); +}); +