├── .gitignore ├── LICENSE ├── README.md ├── countdown.ts ├── lib └── countdown.ts ├── package.json └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | 30 | # Don’t commit the following directories created by pub. 31 | /dist/ 32 | packages/ 33 | .buildlog 34 | .pub 35 | .DS_STOR 36 | 37 | # Include when developing application packages. 38 | pubspec.lock 39 | .c9 40 | .idea/ 41 | *.swo 42 | 43 | 44 | # Compiled binary addons (http://nodejs.org/api/addons.html) 45 | 46 | 47 | # Dependency directory 48 | # Commenting this out is preferred by some people, see 49 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 50 | 51 | .tsdrc 52 | 53 | #IntelliJ configuration files 54 | .idea 55 | 56 | dist 57 | dev 58 | test 59 | tsd_typings 60 | 61 | # Dependency directory 62 | # Commenting this out is preferred by some people, see 63 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 64 | bower_components -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 gökhan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular2-simple-countdown 2 | a simple countdown angular2 directive with multiple language 3 | 4 | [![npm version](https://badge.fury.io/js/angular2-simple-countdown.svg)](https://badge.fury.io/js/angular2-simple-countdown) 5 | 6 | ## Installation 7 | 8 | ### Npm 9 | 10 | `npm install angular2-simple-countdown` 11 | 12 | 13 | ## Usage 14 | ```javascript 15 | import {CountDown} from "../../node_modules/angular2-simple-countdown/countdown"; 16 | 17 | @NgModule({ 18 | declarations: [ 19 | CountDown 20 | ], 21 | .... 22 | 23 | }) 24 | 25 | text: any = { "Weeks": "Weeks", 26 | "Days": "Days", "Hours": "Hours", 27 | Minutes: "Minutes", "Seconds": "Seconds", 28 | "MilliSeconds":"MilliSeconds" }; 29 | 30 | `Change Default Text` 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | ``` 39 | ## Field Schema 40 | 41 | `count-down`: initializes directive 42 | 43 | `end-date`: the end date. _takes any format js Date() allows_ 44 | 45 | `units`: which units you want the countdown to be viewed in 46 | 47 | -------------------------------------------------------------------------------- /countdown.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by previousdeveloper on 14.11.2015. 3 | */ 4 | export * from './lib/countdown'; -------------------------------------------------------------------------------- /lib/countdown.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core'; 2 | import Timer = NodeJS.Timer; 3 | 4 | @Component({ 5 | selector: 'count-down', 6 | template: `

{{displayString}}

` 7 | }) 8 | export class CountDown implements OnInit { 9 | 10 | _to: Timer; 11 | 12 | @Input() 13 | units: any; 14 | 15 | @Input() 16 | end: any; 17 | 18 | @Input() 19 | text: any; 20 | 21 | @Output() 22 | endCount = new EventEmitter(); 23 | 24 | givenDate: any; 25 | displayString: string; 26 | 27 | constructor() { 28 | } 29 | 30 | ngOnInit(): void { 31 | 32 | if (typeof this.units === 'string') { 33 | this.units = this.units.toLowerCase().split('|'); 34 | } 35 | 36 | this.givenDate = new Date(this.end); 37 | 38 | if (!this.text) { 39 | this.text = { 40 | 'Weeks': 'Weeks', 41 | 'Days': 'Days', 42 | 'Hours': 'Hours', 43 | 'Minutes': 'Minutes', 44 | 'Seconds': 'Seconds', 45 | 'MilliSeconds': 'Milliseconds' 46 | }; 47 | } 48 | 49 | this._to = setInterval(() => this._displayString(), this.units['milliseconds'] ? 1 : 1000); 50 | 51 | } 52 | 53 | 54 | _displayString() { 55 | 56 | const now: any = new Date(), 57 | lastUnit = this.units[this.units.length - 1], 58 | unitsLeft = [], 59 | unitConstantMillis = { 60 | 'weeks': 6048e5, 61 | 'days': 864e5, 62 | 'hours': 36e5, 63 | 'minutes': 6e4, 64 | 'seconds': 1e3, 65 | 'milliseconds': 1 66 | }; 67 | 68 | let msLeft: any = this.givenDate - now, 69 | returnString = ''; 70 | 71 | if (msLeft <= 0) { 72 | this.endCount.emit(); 73 | clearInterval(this._to); 74 | } 75 | 76 | this.units.forEach((unit: string) => { 77 | 78 | if (!unitConstantMillis[unit]) { 79 | // $interval.cancel(countDownInterval); 80 | throw new Error('Cannot repeat unit: ' + unit); 81 | } 82 | 83 | if (!unitConstantMillis.hasOwnProperty(unit)) { 84 | throw new Error('Unit: ' + unit + ' is not supported. Please use following units: weeks, days, hours, minutes, seconds, milliseconds'); 85 | } 86 | 87 | unitsLeft[unit] = msLeft / unitConstantMillis[unit]; 88 | 89 | unitsLeft[unit] = lastUnit === unit ? Math.ceil(unitsLeft[unit]) : Math.floor(unitsLeft[unit]); 90 | 91 | msLeft -= unitsLeft[unit] * unitConstantMillis[unit]; 92 | 93 | unitConstantMillis[unit] = false; 94 | 95 | returnString += ' ' + unitsLeft[unit] + ' ' + unit; 96 | 97 | }); 98 | 99 | this.displayString = returnString 100 | .replace('Weeks', this.text.Weeks) 101 | .replace('Days', this.text.Days) 102 | .replace('Hours', this.text.Hours) 103 | .replace('Minutes', this.text.Minutes) 104 | .replace('Seconds', this.text.Seconds) 105 | .replace('Milliseconds', this.text.MilliSeconds); 106 | } 107 | 108 | } 109 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-simple-countdown", 3 | "version": "0.0.6", 4 | "description": "Simple Angular2 CountDown", 5 | "main": "countdown.js", 6 | "typings": "./countdown.d.ts", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/previousdeveloper/angular2-simple-countdown.git" 13 | }, 14 | "keywords": [ 15 | "angular2 countdown", 16 | "simple countdown" 17 | ], 18 | "author": "Gokhan Karadas (http://www.gokhankaradas.com)", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/previousdeveloper/angular2-simple-countdown/issues" 22 | }, 23 | "homepage": "https://github.com/previousdeveloper/angular2-simple-countdown/issues#readme", 24 | "dependencies": { 25 | "colors": "^1.1.2", 26 | "request": "^2.64.0", 27 | "yargs": "^3.29.0" 28 | } 29 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "noImplicitAny": true, 4 | "module": "commonjs", 5 | "target": "ES5", 6 | "emitDecoratorMetadata": true, 7 | "experimentalDecorators": true, 8 | "sourceMap": true, 9 | "declaration": true 10 | }, 11 | "files": [ 12 | "countdown.ts" 13 | ], 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } --------------------------------------------------------------------------------