#47 Support button disabling issue fixed while multiple PDF file down…

…load, DOM element selections converted to data attribute catch to prevent inconvenient future problems related on classname changes, Code refactor
ofcyln · Jun 20, 2020 · bbf7fb2 · bbf7fb2
1 parent 1eaff5a
commit bbf7fb2
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 69 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -6,7 +6,8 @@
               [ngStyle]="{'z-index': '2', 'box-shadow': '0px 3px 9px -4px #333'}"></app-header>
 
   <section [ngStyle]="{'overflow-y': 'auto', 'height': 'calc(100% - 64px)'}"
-           class="w-100 router-container">
+           data-router-container
+           class="w-100">
     <router-outlet></router-outlet>
   </section>
 </main>
diff --git a/src/app/components/calculate/calculate.component.html b/src/app/components/calculate/calculate.component.html
@@ -56,7 +56,7 @@
              pattern="[0-9]*"
              mask="separator"
              thousandSeparator=","
-             class="mortgage-amount"
+             data-mortgage-amount
              [(ngModel)]="value"
              (keydown.enter)="setCalculationState()">
 

diff --git a/src/app/components/calculate/calculate.component.ts b/src/app/components/calculate/calculate.component.ts
@@ -1,10 +1,11 @@
 import { Component, HostListener, Inject, OnInit } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
-import { PDFExportUtils } from '../../shared/utils/pdf-export.utils';
 import { ExpenseItemService } from '../../shared/expense-item.service';
 import { LoadingService } from '../loading/loading.service';
 
+import { PDFExportUtils } from '../../shared/utils/pdf-export.utils';
+
 @Component({
   selector: 'app-calculate',
   templateUrl: './calculate.component.html',
@@ -16,7 +17,6 @@ export class CalculateComponent implements OnInit {
   show = false;
   innerHeight = window.innerHeight;
   innerWidth = window.innerWidth;
-  donationContainerElementClassName = '.donation-container';
 
   private readonly MOBILE_DEVICE_CONTROL_HEIGHT = 674;
   private readonly MOBILE_DEVICE_CONTROL_WIDTH = 599;
@@ -76,13 +76,18 @@ export class CalculateComponent implements OnInit {
   captureScreen() {
     this.loadingService.isLoading = true;
 
-    this.animate('#bmc-wbtn', 'animate', '.donation-container');
-    this.animate('#at4-share', 'animate');
-    this.animate('.at-expanding-share-button-toggle-bg', 'animate');
+    this.loadingService.animate('#bmc-wbtn', 'animate', '[data-donation-container]');
+    this.loadingService.animate('#at4-share', 'animate');
+    this.loadingService.animate('.at-expanding-share-button-toggle-bg', 'animate');
 
-    const calculatedListItemElements = document.querySelectorAll('mat-list-item article:last-child span') as NodeList;
-    const calculatedResultItemElements = document.querySelectorAll('.total-expense-amount') as NodeList;
-    const mortgageAmount = document.querySelector('.mortgage-amount') as HTMLInputElement;
+    // Items in Angular Material calculated item output
+    const calculatedListItemElements = this.loadingService.getQueryElements('mat-list-item article:last-child span') as NodeList;
+
+    // Items in Angular Material calculated results output
+    const calculatedResultItemElements = this.loadingService.getQueryElements('[data-total-expense-amount]') as NodeList;
+
+    // Mortgage amount field
+    const mortgageAmount = this.loadingService.getQueryElement('[data-mortgage-amount]') as HTMLInputElement;
 
     const pdfExportUtils = new PDFExportUtils(
       calculatedListItemElements,
@@ -96,52 +101,9 @@ export class CalculateComponent implements OnInit {
 
       this.loadingService.isLoading = false;
 
-      this.stopAnimate('#bmc-wbtn', 'animate', '.donation-container');
-      this.stopAnimate('#at4-share', 'animate');
-      this.stopAnimate('.at-expanding-share-button-toggle-bg', 'animate');
+      this.loadingService.stopAnimate('#bmc-wbtn', 'animate', '[data-donation-container]');
+      this.loadingService.stopAnimate('#at4-share', 'animate');
+      this.loadingService.stopAnimate('.at-expanding-share-button-toggle-bg', 'animate');
     });
   }
-
-  animate(querySelector: string, className: string, source?: string) {
-    const affectedElement = this.doc.querySelector(querySelector);
-
-    if (source === this.donationContainerElementClassName) {
-      const container = this.doc.querySelector('.router-container');
-      const node = this.doc.createElement('section');
-      node.classList.add('donation-container');
-      container?.appendChild(node);
-
-      const donationContainer = this.doc.querySelector('.donation-container');
-
-      if (!!donationContainer && !!affectedElement) {
-        donationContainer.appendChild(affectedElement);
-
-        donationContainer.classList.add(className);
-      }
-
-      return;
-    }
-
-    if (affectedElement) {
-      affectedElement.classList.add(className);
-    }
-  }
-
-  stopAnimate(querySelector: string, className: string, source?: string) {
-    const affectedElement = this.doc.querySelector(querySelector);
-
-    if (source === this.donationContainerElementClassName) {
-      const donationContainer = this.doc.querySelector('.donation-container');
-
-      if (!!donationContainer && !!affectedElement) {
-        donationContainer.classList.remove(className);
-      }
-
-      return;
-    }
-
-    if (affectedElement) {
-      affectedElement.classList.remove(className);
-    }
-  }
 }
diff --git a/src/app/components/calculate/results/results.component.html b/src/app/components/calculate/results/results.component.html
@@ -125,7 +125,7 @@
     <mat-divider class="position-relative"></mat-divider>
 
     <mat-list-item fxFlex
-                   class="total-expense-amount">
+                   data-total-expense-amount>
       <div fxFlex="70"
            [fxFlex.sm]="'60'"
            [fxFlex.xs]="'60'"
@@ -153,7 +153,7 @@
     </mat-list-item>
 
     <mat-list-item fxFlex
-                   class="total-expense-amount">
+                   data-total-expense-amount>
       <div fxFlex="70"
            [fxFlex.sm]="'60'"
            [fxFlex.xs]="'60'"
@@ -181,7 +181,7 @@
     </mat-list-item>
 
     <mat-list-item fxFlex
-                   class="total-expense-amount">
+                   data-total-expense-amount>
       <div fxFlex="70"
            [fxFlex.sm]="'60'"
            [fxFlex.xs]="'60'"

diff --git a/src/app/components/calculate/results/results.component.ts b/src/app/components/calculate/results/results.component.ts
@@ -1,10 +1,12 @@
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 
-import { ExpenseItem, ExpenseVariations, MinMaxModel } from '../../../shared/expense-data.model';
-import { CustomIconService } from '../../../shared/custom-icon.service';
 import { ScrollToConfigOptions, ScrollToService } from '@nicky-lenaers/ngx-scroll-to';
+
+import { CustomIconService } from '../../../shared/custom-icon.service';
 import { ExpenseItemService } from '../../../shared/expense-item.service';
 
+import { ExpenseItem, ExpenseVariations, MinMaxModel } from '../../../shared/expense-data.model';
+
 @Component({
   selector: 'app-results',
   templateUrl: './results.component.html',

diff --git a/src/app/components/loading/loading.component.ts b/src/app/components/loading/loading.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+
 import { LoadingService } from './loading.service';
 
 @Component({

diff --git a/src/app/components/loading/loading.service.ts b/src/app/components/loading/loading.service.ts
@@ -1,15 +1,19 @@
-import { Injectable } from '@angular/core';
-import { PDFExportUtils } from '../../shared/utils/pdf-export.utils';
+import { Inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
 import { ExpenseItemService } from '../../shared/expense-item.service';
 
+import { PDFExportUtils } from '../../shared/utils/pdf-export.utils';
+
 @Injectable({
   providedIn: 'root',
 })
 export class LoadingService {
   isLoading = false;
   timeout!: number;
+  donationContainerElementClassName = '[data-donation-container]';
 
-  constructor(private expenseItemService: ExpenseItemService) {}
+  constructor(@Inject(DOCUMENT) private doc: Document, private expenseItemService: ExpenseItemService) {}
 
   pause(milliseconds: number) {
     return new Promise((resolve) => {
@@ -22,9 +26,14 @@ export class LoadingService {
   processFaster() {
     clearTimeout(this.timeout);
 
-    const calculatedListItemElements = document.querySelectorAll('mat-list-item article:last-child span') as NodeList;
-    const calculatedResultItemElements = document.querySelectorAll('.total-expense-amount') as NodeList;
-    const mortgageAmount = document.querySelector('.mortgage-amount') as HTMLInputElement;
+    // Items in Angular Material calculated item output
+    const calculatedListItemElements = this.getQueryElements('mat-list-item article:last-child span') as NodeList;
+
+    // Items in Angular Material calculated results output
+    const calculatedResultItemElements = this.getQueryElements('[data-total-expense-amount]') as NodeList;
+
+    // Mortgage amount field
+    const mortgageAmount = this.getQueryElement('[data-mortgage-amount]') as HTMLInputElement;
 
     const pdfExportUtils = new PDFExportUtils(
       calculatedListItemElements,
@@ -36,5 +45,64 @@ export class LoadingService {
     pdfExportUtils.exportAsPDF();
 
     this.isLoading = false;
+
+    this.stopAnimate('#bmc-wbtn', 'animate', '[data-donation-container]');
+    this.stopAnimate('#at4-share', 'animate');
+    this.stopAnimate('.at-expanding-share-button-toggle-bg', 'animate');
+  }
+
+  getQueryElement(query: string) {
+    return this.doc.querySelector(query);
+  }
+
+  getQueryElements(query: string) {
+    return this.doc.querySelectorAll(query);
+  }
+
+  animate(querySelector: string, className: string, source?: string) {
+    const affectedElement = this.getQueryElement(querySelector);
+
+    if (source === this.donationContainerElementClassName) {
+      const container = this.getQueryElement('[data-router-container]');
+      const isDataDonationContainer = !!this.getQueryElement('[data-donation-container]');
+
+      if (!isDataDonationContainer) {
+        const node = this.doc.createElement('section');
+        node.setAttribute('data-donation-container', '');
+        container?.appendChild(node);
+      }
+
+      const donationContainer = this.getQueryElement('[data-donation-container]');
+
+      if (!!donationContainer && !!affectedElement) {
+        donationContainer.appendChild(affectedElement);
+
+        donationContainer.classList.add(className);
+      }
+
+      return;
+    }
+
+    if (affectedElement) {
+      affectedElement.classList.add(className);
+    }
+  }
+
+  stopAnimate(querySelector: string, className: string, source?: string) {
+    const affectedElement = this.getQueryElement(querySelector);
+
+    if (source === this.donationContainerElementClassName) {
+      const donationContainer = this.getQueryElement('[data-donation-container]');
+
+      if (!!donationContainer && !!affectedElement) {
+        donationContainer.classList.remove(className);
+      }
+
+      return;
+    }
+
+    if (affectedElement) {
+      affectedElement.classList.remove(className);
+    }
   }
 }
diff --git a/src/assets/scss/custom-buymeacoffee-service-styles.scss b/src/assets/scss/custom-buymeacoffee-service-styles.scss
@@ -10,7 +10,7 @@ body {
 		}
 	}
 
-	.donation-container {
+	[data-donation-container] {
 		border-radius: 50%;
 		position: fixed;
 		width: 50px;
@@ -57,7 +57,7 @@ body {
 
 @media only screen and (max-width: 800px) {
 	body {
-		.donation-container {
+		[data-donation-container] {
 			width: 30px !important;
 			height: 30px !important;
 			right: initial !important;