time-ago-pipe - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

package.json

 {
   "name": "time-ago-pipe",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A simple Angular 2 pipe to change a date into a string of how long ago from it is from now",
@@ -5,0 +5,0 @@ "main": "time-ago-pipe.js",

README.md

 # time-ago-pipe
-[![Build Status](https://travis-ci.org/AndrewPoyntz/time-ago-pipe.svg?branch=master)](https://travis-ci.org/AndrewPoyntz/time-ago-pipe) [![npm](https://img.shields.io/npm/v/time-ago-pipe.svg)](https://www.npmjs.com/package/time-ago-pipe) [![npm](https://img.shields.io/npm/dt/time-ago-pipe.svg?maxAge=2592000)](https://www.npmjs.com/package/time-ago-pipe) [![GitHub issues](https://img.shields.io/github/issues/AndrewPoyntz/time-ago-pipe.svg?maxAge=2592000?style=plastic)](https://github.com/AndrewPoyntz/time-ago-pipe/issues) [![npm](https://img.shields.io/npm/l/time-ago-pipe.svg?maxAge=2592000?style=plastic)](https://github.com/AndrewPoyntz/time-ago-pipe/blob/master/LICENSE)
+[![Build Status](https://travis-ci.org/AndrewPoyntz/time-ago-pipe.svg?branch=master)](https://travis-ci.org/AndrewPoyntz/time-ago-pipe) [![npm](https://img.shields.io/npm/v/time-ago-pipe.svg)](https://www.npmjs.com/package/time-ago-pipe) [![npm](https://img.shields.io/npm/dt/time-ago-pipe.svg?maxAge=25920)](https://www.npmjs.com/package/time-ago-pipe) [![GitHub issues](https://img.shields.io/github/issues/AndrewPoyntz/time-ago-pipe.svg?maxAge=25920?style=plastic)](https://github.com/AndrewPoyntz/time-ago-pipe/issues) [![npm](https://img.shields.io/npm/l/time-ago-pipe.svg?maxAge=25920?style=plastic)](https://github.com/AndrewPoyntz/time-ago-pipe/blob/master/LICENSE)
 
@@ -4,0 +4,0 @@

time-ago-pipe.d.ts

@@ -1,4 +0,11 @@
-import { PipeTransform } from "@angular/core";
-export declare class TimeAgoPipe implements PipeTransform {
+import { PipeTransform, NgZone, ChangeDetectorRef, OnDestroy } from "@angular/core";
+export declare class TimeAgoPipe implements PipeTransform, OnDestroy {
+    private changeDetectorRef;
+    private ngZone;
+    private timer;
+    constructor(changeDetectorRef: ChangeDetectorRef, ngZone: NgZone);
     transform(value: string): string;
+    ngOnDestroy(): void;
+    private removeTimer();
+    private getSecondsUntilUpdate(seconds);
 }

time-ago-pipe.js

@@ -13,8 +13,20 @@ "use strict";
 var TimeAgoPipe = (function () {
-    function TimeAgoPipe() {
+    function TimeAgoPipe(changeDetectorRef, ngZone) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.ngZone = ngZone;
     }
     TimeAgoPipe.prototype.transform = function (value) {
+        var _this = this;
+        this.removeTimer();
         var d = new Date(value);
         var now = new Date();
         var seconds = Math.round(Math.abs((now.getTime() - d.getTime()) / 1000));
+        var timeToUpdate = this.getSecondsUntilUpdate(seconds) * 1000;
+        this.timer = this.ngZone.runOutsideAngular(function () {
+            if (typeof window !== 'undefined') {
+                return window.setTimeout(function () {
+                    _this.ngZone.run(function () { return _this.changeDetectorRef.markForCheck(); });
+                }, timeToUpdate);
+            }
+        });
         var minutes = Math.round(Math.abs(seconds / 60));
@@ -59,2 +71,28 @@ var hours = Math.round(Math.abs(minutes / 60));
     };
+    TimeAgoPipe.prototype.ngOnDestroy = function () {
+        this.removeTimer();
+    };
+    TimeAgoPipe.prototype.removeTimer = function () {
+        if (this.timer) {
+            window.clearTimeout(this.timer);
+            this.timer = null;
+        }
+    };
+    TimeAgoPipe.prototype.getSecondsUntilUpdate = function (seconds) {
+        var min = 60;
+        var hr = min * 60;
+        var day = hr * 24;
+        if (seconds < min) {
+            return 2;
+        }
+        else if (seconds < hr) {
+            return 30;
+        }
+        else if (seconds < day) {
+            return 300;
+        }
+        else {
+            return 3600;
+        }
+    };
     TimeAgoPipe = __decorate([
@@ -65,3 +103,3 @@ core_1.Pipe({
         }), 
-        __metadata('design:paramtypes', [])
+        __metadata('design:paramtypes', [core_1.ChangeDetectorRef, core_1.NgZone])
     ], TimeAgoPipe);
@@ -68,0 +106,0 @@ return TimeAgoPipe;

time-ago-pipe.ts

@@ -1,2 +0,2 @@
-import {Pipe, PipeTransform} from "@angular/core";
+import {Pipe, PipeTransform, NgZone, ChangeDetectorRef, OnDestroy} from "@angular/core";
 @Pipe({
@@ -6,7 +6,18 @@ name:'timeAgo',
 })
-export class TimeAgoPipe implements PipeTransform {
+export class TimeAgoPipe implements PipeTransform, OnDestroy {
+	private timer: number;
+	constructor(private changeDetectorRef: ChangeDetectorRef, private ngZone: NgZone) {}
 	transform(value:string) {
+		this.removeTimer();
 		let d = new Date(value);
 		let now = new Date();
 		let seconds = Math.round(Math.abs((now.getTime() - d.getTime())/1000));
+		let timeToUpdate = this.getSecondsUntilUpdate(seconds) *1000;
+		this.timer = this.ngZone.runOutsideAngular(() => {
+			if (typeof window !== 'undefined') {
+				return window.setTimeout(() => {
+					this.ngZone.run(() => this.changeDetectorRef.markForCheck());
+				}, timeToUpdate);
+			}
+		});
 		let minutes = Math.round(Math.abs(seconds / 60));
@@ -41,2 +52,25 @@ let hours = Math.round(Math.abs(minutes / 60));
 	}
+	ngOnDestroy(): void {
+		this.removeTimer();
+	}
+	private removeTimer() {
+		if (this.timer) {
+			window.clearTimeout(this.timer);
+			this.timer = null;
+		}
+	}
+	private getSecondsUntilUpdate(seconds:number) {
+		let min = 60;
+		let hr = min * 60;
+		let day = hr * 24;
+		if (seconds < min) { // less than 1 min, update ever 2 secs
+			return 2;
+		} else if (seconds < hr) { // less than an hour, update every 30 secs
+			return 30;
+		} else if (seconds < day) { // less then a day, update every 5 mins
+			return 300;
+		} else { // update every hour
+			return 3600;
+		}
+	}
 }

No alert changes

Improved metrics

Total package byte prevSize

14597

increased by36.82%

Lines of code

189

increased by71.82%

No dependency changes