feature/improve-cropper-button-loading (#71)

* feature/improve-cropper-button-loading * feature/improve-cropper-button-loading Co-authored-by: Vugar_Abdullayev <[email protected]>
vugar005 · May 15, 2021 · 9421977 · 9421977
1 parent 4d270a2
commit 9421977
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 4 deletions.
diff --git a/projects/file-picker/package.json b/projects/file-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-awesome-uploader",
-  "version": "12.0.1",
+  "version": "12.0.2",
   "description": "Angular Library for uploading files with Real-Time Progress bar, File Preview, Drag && Drop and Custom Template with Multi Language support",
   "peerDependencies": {
     "@angular/common": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0",

diff --git a/projects/file-picker/src/lib/file-picker.component.html b/projects/file-picker/src/lib/file-picker.component.html
@@ -32,7 +32,11 @@
     (load)="cropperImgLoaded($event)"
   />
   <div class="cropper-actions">
-    <button class="cropSubmit" (click)="onCropSubmit()" type="button">
+    <button class="cropSubmit"
+    (click)="onCropSubmit()"
+    [disabled]="isCroppingBusy"
+    type="button" [ngClass]="{'is-loading':isCroppingBusy }"
+    >
       {{ captions?.cropper?.crop }}
     </button>
     <button

diff --git a/projects/file-picker/src/lib/file-picker.component.scss b/projects/file-picker/src/lib/file-picker.component.scss
@@ -126,3 +126,48 @@
     -webkit-appearance: none;
     -moz-appearance: none;
   }
+
+  button.is-loading {
+    color: rgba(0,0,0,.26)!important;
+    background-color: #ffffff!important;
+    box-shadow: none;
+    cursor: not-allowed;
+    outline: none;
+    &:after {
+      content: "";
+      font-family: sans-serif;
+      font-weight: 100;
+      -webkit-animation: 1.25s linear infinite three-quarters;
+      animation: 1.25s linear infinite three-quarters;
+      border: 3px solid #7f8c8d;
+      border-right-color: transparent;
+      border-radius: 100%;
+      box-sizing: border-box;
+      display: inline-block;
+      position: relative;
+      vertical-align: middle;
+      overflow: hidden;
+      text-indent: -9999px;
+      width: 18px;
+      height: 18px;
+      opacity: 1;
+      margin-left: 10px;
+  }
+    }
+    @keyframes three-quarters {
+      0% {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          -o-transform: rotate(0deg);
+          transform: rotate(0deg);
+      }
+
+      100% {
+          -webkit-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          -o-transform: rotate(360deg);
+          transform: rotate(360deg);
+      }
+    }
diff --git a/projects/file-picker/src/lib/file-picker.component.ts b/projects/file-picker/src/lib/file-picker.component.ts
@@ -89,8 +89,11 @@ export class FilePickerComponent implements OnInit, OnDestroy {
   /** Current file to be shown in cropper */
   public currentCropperFile: File;
   public safeCropImgUrl: SafeResourceUrl;
+  public isCroppingBusy: boolean;
+
   private _cropClosed$ = new Subject<FilePreviewModel>();
   private _onDestroy$ = new Subject<void>();
+
   constructor(
     private fileService: FilePickerService,
     private changeRef: ChangeDetectorRef
@@ -100,10 +103,12 @@ export class FilePickerComponent implements OnInit, OnDestroy {
     this._setCropperOptions();
     this._listenToCropClose();
   }
+
   public ngOnDestroy() {
     this._onDestroy$.next();
     this._onDestroy$.complete();
   }
+
   /** On input file selected */
   public onChange(event: File[]) {
     const files: File[] = Array.from(event);
@@ -185,6 +190,7 @@ export class FilePickerComponent implements OnInit, OnDestroy {
         }
       });
   }
+
   /** Sets custom cropper options if avaiable */
   private _setCropperOptions() {
     if (!this.cropperOptions) {
@@ -215,6 +221,7 @@ export class FilePickerComponent implements OnInit, OnDestroy {
       })
     );
   }
+
   /** Validates synchronous validations */
   private _validateFileSync(file: File): boolean {
     if (!file) {
@@ -298,10 +305,12 @@ export class FilePickerComponent implements OnInit, OnDestroy {
     this.changeRef.detectChanges();
   }
 
+  /** @description Set files for uploader */
   public setFiles(files: FilePreviewModel[]): void {
     this.files = files;
     this.changeRef.detectChanges();
   }
+
   /** Opens cropper for image crop */
   openCropper(file: File): void {
     if ((window as any).CROPPER  || typeof Cropper !== 'undefined') {
@@ -321,6 +330,7 @@ export class FilePickerComponent implements OnInit, OnDestroy {
     const image = document.getElementById('cropper-img');
     this.cropper = new Cropper(image, this.cropperOptions);
   }
+
   /** Close or cancel cropper */
   closeCropper(filePreview: FilePreviewModel): void {
     this.currentCropperFile = undefined;
@@ -348,6 +358,7 @@ export class FilePickerComponent implements OnInit, OnDestroy {
     }
     return true;
   }
+
   /** Validates selected file size and total file size */
   isValidSize(file: File, size: number): boolean {
     /** Validating selected file size */
@@ -383,10 +394,12 @@ export class FilePickerComponent implements OnInit, OnDestroy {
 
   /** when crop button submitted */
   onCropSubmit(): void {
+    this.isCroppingBusy = true;
     this.cropper
-      .getCroppedCanvas(this.croppedCanvasOptions)
-      .toBlob(this._blobFallBack.bind(this), 'image/png');
+    .getCroppedCanvas(this.croppedCanvasOptions)
+    .toBlob(this._blobFallBack.bind(this), 'image/png');
   }
+
   /** After crop submit */
   private _blobFallBack(blob: Blob): void {
     if (!blob) {
@@ -399,6 +412,8 @@ export class FilePickerComponent implements OnInit, OnDestroy {
       file: blob as File,
       fileName: this.currentCropperFile.name
     });
+    this.isCroppingBusy = false;
+    this.changeRef.detectChanges();
   }
 
 }