@flxng/circle-timer
Version:
Circle Timer (countdown) component for Angular.
308 lines (300 loc) • 11.5 kB
JavaScript
import { Injectable, ɵɵdefineInjectable, EventEmitter, Component, NgZone, Input, Output, NgModule } from '@angular/core';
import { Subject, timer } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: lib/circle-timer.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CircleTimerService {
constructor() { }
}
CircleTimerService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root',
},] }
];
/** @nocollapse */
CircleTimerService.ctorParameters = () => [];
/** @nocollapse */ CircleTimerService.ngInjectableDef = ɵɵdefineInjectable({ factory: function CircleTimerService_Factory() { return new CircleTimerService(); }, token: CircleTimerService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* Generated from: lib/circle-timer.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CircleTimerComponent {
/**
* @param {?} ngZone
*/
constructor(ngZone) {
this.ngZone = ngZone;
// only to set initial state (ngOnInit)
this.duration = 0; // milliseconds
// milliseconds
this.color = '#1cbbf8';
this.onComplete = new EventEmitter();
this.destroy$ = new Subject();
this.startTime = 0;
this.timeLeft = 0;
this.ticking = false;
this.completed = false;
this.formattedTimeLeft = '';
this.fullDasharray = 283;
this.dasharray = `${this.fullDasharray} ${this.fullDasharray}`;
}
/**
* @return {?}
*/
ngOnInit() {
this.init(this.startDate);
}
/**
* @return {?}
*/
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
/**
* @param {?=} startDate
* @return {?}
*/
init(startDate) {
this.setTimeLeft(startDate);
this.formatTimeLeft();
this.setDasharray();
if (this.timeLeft === 0) {
this.completed = true;
}
}
/**
* @param {?=} startDate
* @return {?}
*/
setTimeLeft(startDate) {
this.ticking = false;
this.completed = false;
this.destroy$.next();
if (!startDate) {
this.timeLeft = this.duration;
return 0;
}
/** @type {?} */
const startTime = new Date((/** @type {?} */ (startDate))).getTime();
/** @type {?} */
const endTime = startTime + this.duration;
/** @type {?} */
const timeLeftRaw = endTime - Date.now();
if (timeLeftRaw <= 0) {
this.timeLeft = 0;
return 0;
}
/** @type {?} */
const timeLeftSeconds = timeLeftRaw / 1000;
this.timeLeft = Math.floor(timeLeftSeconds) * 1000;
return timeLeftSeconds % 1;
}
/**
* @param {?=} startDate
* @param {?=} delayMs
* @param {?=} replaying
* @return {?}
*/
start(startDate, delayMs = 0, replaying = false) {
if (this.ticking) {
console.log('Cannot start: timer already running.');
return;
}
/** @type {?} */
const decimalPortion = this.setTimeLeft(startDate);
/** @type {?} */
const startDelayMs = delayMs + decimalPortion * 1000;
this.formatTimeLeft();
this.setDasharray();
if (this.timeLeft === 0) {
this.completed = true;
console.log('Cannot start: timer already completed.');
return;
}
timer(startDelayMs, 1000)
.pipe(takeUntil(this.destroy$))
.subscribe((/**
* @param {?} e
* @return {?}
*/
(e) => {
this.ticking = true;
this.timeLeft -= 1000;
if (this.timeLeft <= 0) {
this.timeLeft = 0;
this.ticking = false;
this.completed = true;
this.onComplete.emit(replaying);
this.destroy$.next();
}
this.formatTimeLeft();
this.setDasharray();
}));
}
/**
* @param {?=} startDate
* @return {?}
*/
replay(startDate) {
this.start(startDate, 1200, true);
}
/**
* @return {?}
*/
pause() { }
/**
* @return {?}
*/
continue() { }
/**
* @return {?}
*/
complete() {
this.timeLeft = 0;
this.ticking = false;
this.completed = true;
this.destroy$.next();
this.formatTimeLeft();
this.setDasharray();
}
/**
* @return {?}
*/
isTicking() {
return this.ticking;
}
/**
* @return {?}
*/
isCompleted() {
return this.completed;
}
/**
* @return {?}
*/
formatTimeLeft() {
if (this.timeLeft <= 0) {
this.timeLeft = 0;
}
/** @type {?} */
const daysLeft = Math.floor(this.timeLeft / (1000 * 60 * 60 * 24));
/** @type {?} */
const hoursLeft = Math.floor((this.timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
/** @type {?} */
const minutesLeft = Math.floor((this.timeLeft % (1000 * 60 * 60)) / (1000 * 60));
/** @type {?} */
const secondsLeft = Math.floor((this.timeLeft % (1000 * 60)) / 1000);
/** @type {?} */
const formattedDays = daysLeft < 10 ? `0${daysLeft}` : `${daysLeft}`;
/** @type {?} */
const formattedHours = hoursLeft < 10 ? `0${hoursLeft}` : `${hoursLeft}`;
/** @type {?} */
const formattedMinutes = minutesLeft < 10 ? `0${minutesLeft}` : `${minutesLeft}`;
/** @type {?} */
const formattedSeconds = secondsLeft < 10 ? `0${secondsLeft}` : `${secondsLeft}`;
this.formattedTimeLeft = `${formattedMinutes}:${formattedSeconds}`;
if (formattedHours !== '00' || formattedDays !== '00') {
this.formattedTimeLeft = `${formattedHours}:` + this.formattedTimeLeft;
}
if (formattedDays !== '00') {
this.formattedTimeLeft = `${formattedDays}:` + this.formattedTimeLeft;
}
}
/**
* @return {?}
*/
setDasharray() {
/** @type {?} */
const rawFraction = this.timeLeft / this.duration;
/** @type {?} */
const fraction = rawFraction - (1 / this.duration) * (1 - rawFraction);
/** @type {?} */
const remaining = Math.round(fraction * this.fullDasharray);
this.dasharray = `${remaining} ${this.fullDasharray}`;
}
}
CircleTimerComponent.decorators = [
{ type: Component, args: [{
selector: 'flx-circle-timer',
template: "<div class=\"base-timer\">\r\n <svg class=\"base-timer-svg\"\r\n viewBox=\"0 0 100 100\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g class=\"base-timer-circle\">\r\n <circle [ngClass]=\"completed ? 'base-timer-completed' : 'base-timer-stroke'\"\r\n cx=\"50\"\r\n cy=\"50\"\r\n r=\"45\" />\r\n <path [attr.stroke-dasharray]=\"dasharray\"\r\n [style.stroke]=\"color\"\r\n id=\"remaining-time-stroke\"\r\n d=\" M 50, 50\r\n m -45, 0\r\n a 45,45 0 1,0 90,0\r\n a 45,45 0 1,0 -90,0\">\r\n </path>\r\n </g>\r\n </svg>\r\n <span class=\"time\">\r\n <!-- <img *ngIf=\"completed\"\r\n src=\"../../../assets/image/check.svg\"\r\n alt=\"\">\r\n <span *ngIf=\"!completed\">{{formattedTimeLeft}}</span> -->\r\n <span>{{formattedTimeLeft}}</span>\r\n </span>\r\n</div>",
styles: [":host .base-timer{position:relative;height:200px;width:200px}:host .base-timer-circle{fill:none;stroke:none}:host .base-timer-stroke{stroke-width:1px;stroke:grey}:host .base-timer-completed{stroke-width:1px;stroke:grey}:host .base-timer .time{position:absolute;width:200px;height:200px;top:0;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;font-size:26px}:host .base-timer .time img{height:80px}:host .base-timer #remaining-time-stroke{stroke-width:2px;-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transform-origin:center;transform-origin:center;-webkit-transition:1s linear;transition:1s linear;stroke:#1cbbf8}:host .base-timer .base-timer-svg{-webkit-transform:scaleX(-1);transform:scaleX(-1)}"]
}] }
];
/** @nocollapse */
CircleTimerComponent.ctorParameters = () => [
{ type: NgZone }
];
CircleTimerComponent.propDecorators = {
startDate: [{ type: Input }],
duration: [{ type: Input }],
color: [{ type: Input }],
onComplete: [{ type: Output }]
};
if (false) {
/** @type {?} */
CircleTimerComponent.prototype.startDate;
/** @type {?} */
CircleTimerComponent.prototype.duration;
/** @type {?} */
CircleTimerComponent.prototype.color;
/** @type {?} */
CircleTimerComponent.prototype.onComplete;
/** @type {?} */
CircleTimerComponent.prototype.destroy$;
/** @type {?} */
CircleTimerComponent.prototype.startTime;
/** @type {?} */
CircleTimerComponent.prototype.timeLeft;
/** @type {?} */
CircleTimerComponent.prototype.ticking;
/** @type {?} */
CircleTimerComponent.prototype.completed;
/** @type {?} */
CircleTimerComponent.prototype.formattedTimeLeft;
/** @type {?} */
CircleTimerComponent.prototype.fullDasharray;
/** @type {?} */
CircleTimerComponent.prototype.dasharray;
/**
* @type {?}
* @protected
*/
CircleTimerComponent.prototype.ngZone;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/circle-timer.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CircleTimerModule {
}
CircleTimerModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [CircleTimerComponent],
exports: [CircleTimerComponent],
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: lib/index.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: flxng-circle-timer.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { CircleTimerComponent, CircleTimerModule, CircleTimerService };
//# sourceMappingURL=flxng-circle-timer.js.map