chore(release): bump version number to 10.16.0

harryy2510 · Oct 10, 2018 · fc8f2d4 · fc8f2d4
1 parent c815bb3
commit fc8f2d4
Show file tree

Hide file tree

Showing 6 changed files with 1,335 additions and 57 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+<a name="10.16.0"></a>
+# [10.16.0](https://github.com/harryy2510/ngx-img/compare/v10.15.3...v10.16.0) (2018-10-10)
+
+
+
 <a name="10.15.3"></a>
 ## [10.15.3](https://github.com/harryy2510/ngx-img/compare/v10.15.2...v10.15.3) (2018-04-25)
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ngx-img",
   "description": "Angular Image Upload &amp; Crop",
-  "version": "10.15.3",
+  "version": "10.16.0",
   "filename": "./src/ngx-img.js",
   "homepage": "http://github.com/harryy2510/ngx-img",
   "author": {
@@ -32,20 +32,20 @@
     "check-travis": " travis-status --repo=harryy2510/ngx-img --branch=master --fail-pending || echo 'Not yet passing'"
   },
   "dependencies": {
-    "@angular/common": "^4.4.6",
-    "@angular/compiler": "^4.4.6",
-    "@angular/core": "^4.4.6",
-    "@angular/forms": "^4.4.6",
-    "@types/cropperjs": "^1.1.0",
+    "@angular/common": "4.4.7",
+    "@angular/compiler": "4.4.7",
+    "@angular/core": "4.4.7",
+    "@angular/forms": "4.4.7",
+    "@types/cropperjs": "1.1.3",
     "cropperjs": "^1.3.2"
   },
   "devDependencies": {
     "@angular-devkit/core": "^0.0.29",
-    "@angular/animations": "^4.4.6",
-    "@angular/compiler-cli": "^4.4.6",
-    "@angular/platform-browser": "^4.4.6",
-    "@angular/platform-browser-dynamic": "^4.4.6",
-    "@angular/platform-server": "^4.4.6",
+    "@angular/animations": "4.4.7",
+    "@angular/compiler-cli": "4.4.7",
+    "@angular/platform-browser": "4.4.7",
+    "@angular/platform-browser-dynamic": "4.4.7",
+    "@angular/platform-server": "4.4.7",
     "@types/jasmine": "2.6.3",
     "@types/node": "8.0.51",
     "angular-cli-ghpages": "0.5.1",

diff --git a/src/module/component/ngx-img-crop.component.ts b/src/module/component/ngx-img-crop.component.ts
@@ -1,12 +1,23 @@
-import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewEncapsulation
+} from '@angular/core';
 import Cropper from 'cropperjs';
 import {NgxImgService} from '../service/ngx-img.service';
 
 @Component({
   selector: 'ngx-img-crop',
   templateUrl: './ngx-img-crop.component.html',
   styleUrls: ['./ngx-img-crop.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 
 export class NgxImgCropComponent implements OnInit, OnDestroy {
@@ -30,7 +41,7 @@ export class NgxImgCropComponent implements OnInit, OnDestroy {
   cropper: any = [];
   imgData: any = [];
 
-  constructor(private _service: NgxImgService) {
+  constructor(private _service: NgxImgService, private _ref: ChangeDetectorRef) {
   }
 
   ngOnInit() {
@@ -72,10 +83,13 @@ export class NgxImgCropComponent implements OnInit, OnDestroy {
             }
             this.timer[i] = setTimeout(() => {
               this.onCropEvent(i, this.cropper[i].getCroppedCanvas(options).toDataURL('image/png'));
+              this.markForCheck();
             }, 500);
           }
         });
+        this.markForCheck();
       });
+      this.markForCheck();
     }, 100);
   }
 
@@ -84,11 +98,13 @@ export class NgxImgCropComponent implements OnInit, OnDestroy {
       this.imgData[i] = res;
       const img = this.imgData.length === 1 ? this.imgData[i] : this.imgData;
       this.onCrop.emit(img);
+      this.markForCheck();
     })
     .catch(() => {
       this.imgData[i] = data;
       const img = this.imgData.length === 1 ? this.imgData[i] : this.imgData;
       this.onCrop.emit(img);
+      this.markForCheck();
     });
   }
 
@@ -102,9 +118,26 @@ export class NgxImgCropComponent implements OnInit, OnDestroy {
     this.imgData = [];
     this.imgSrc = '';
     this.onReset.emit();
+    this.markForCheck();
+  }
+
+  public markForCheck() {
+    setTimeout(() => {
+      if (!this._ref['destroyed']) {
+        this._ref.markForCheck();
+        this._ref.detectChanges();
+      }
+    });
+    setTimeout(() => {
+      if (!this._ref['destroyed']) {
+        this._ref.markForCheck();
+        this._ref.detectChanges();
+      }
+    }, 300);
   }
 
   ngOnDestroy() {
     this.reset();
+    this._ref.detach();
   }
 }
diff --git a/src/module/component/ngx-img.component.ts b/src/module/component/ngx-img.component.ts
@@ -1,10 +1,21 @@
-import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild
+} from '@angular/core';
 import {NgxImgService} from '../service/ngx-img.service';
 
 @Component({
   selector: 'ngx-img',
   templateUrl: './ngx-img.component.html',
-  styleUrls: ['./ngx-img.component.scss']
+  styleUrls: ['./ngx-img.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NgxImgComponent implements OnInit, OnDestroy {
   @Input() alt = '';
@@ -105,14 +116,15 @@ export class NgxImgComponent implements OnInit, OnDestroy {
   @Output() onSelect: EventEmitter<any> = new EventEmitter();
   @Output() onReset: EventEmitter<any> = new EventEmitter();
 
-  constructor(private _service: NgxImgService) {
+  constructor(private _service: NgxImgService, private _ref: ChangeDetectorRef) {
   }
 
   ngOnInit() {
     this.reset();
     this._text = Object.assign(this._text, this.text);
     this._errorTexts = Object.assign(this._errorTexts, this.errorTexts);
     this._config = Object.assign(this._config, this.config);
+    this.markForCheck();
   }
 
   fileChangeListener(e: any) {
@@ -143,17 +155,22 @@ export class NgxImgComponent implements OnInit, OnDestroy {
         this.isLoading = false;
         if (this._config.crop) {
           this.mode = 'crop';
+          this.markForCheck();
         } else {
           this._service.compress(this.imgSrc, this._config).then((res: any) => {
             this.onSelectEvent(res);
+            this.markForCheck();
           })
             .catch(() => {
               this.onSelectEvent(this.imgSrc);
+              this.markForCheck();
             });
         }
       };
       reader.readAsDataURL(this.file);
+      this.markForCheck();
     }
+    this.markForCheck();
   }
 
   reset() {
@@ -166,6 +183,7 @@ export class NgxImgComponent implements OnInit, OnDestroy {
       this.fileInput.nativeElement.value = '';
     }
     this.onReset.emit();
+    this.markForCheck();
   }
 
   validate() {
@@ -209,9 +227,26 @@ export class NgxImgComponent implements OnInit, OnDestroy {
 
   onSelectEvent(data: any) {
     this.onSelect.emit(data);
+    this.markForCheck();
+  }
+
+  public markForCheck() {
+    setTimeout(() => {
+      if (!this._ref['destroyed']) {
+        this._ref.markForCheck();
+        this._ref.detectChanges();
+      }
+    });
+    setTimeout(() => {
+      if (!this._ref['destroyed']) {
+        this._ref.markForCheck();
+        this._ref.detectChanges();
+      }
+    }, 300);
   }
 
   ngOnDestroy() {
     this.reset();
+    this._ref.detach();
   }
 }