Make the opacity configurable

Author: mpalourdio

CHANGELOG.md

@@ -1,7 +1,9 @@
 # Changelog
 
 ## v5.1.0
-- This release introduces the **backdrop** option (`true` by default). If set to `false`, the spinner background elements will remain clickable, without any background color.
+- This release introduces 2 new options: 
+    - **backdrop** (`true` by default): If set to `false`, the spinner background elements will remain clickable, without any background color.
+    - **opacity**: This option lets you override the spinner opacity (0.7 by default).
 
 ## v5.0.1
 - The `rxjs` `peerDependency` has been relaxed from `~6.3.3` to `^6.3.3` so that no warning is thrown when the `rxjs` version has been bumped at application side.

README.md

@@ -80,19 +80,28 @@ In your app.component.html, simply add:
 
 ## Customizing the spinner
 
-You can customize the **background-color**, the **spinner type**, the spinner **backdrop** (visible by default), the **debounce delay** (ie. after how many milliseconds the spinner will be visible, if needed), the **minimum duration** (ie. how many milliseconds should the spinner be visible at least), the **extra duration** (ie. how many extra milliseconds should the spinner be visible):
+You can customize the following parameters:
+  - The spinner **backdrop** (visible by default).
+  - The **background-color** (ie. the color of the spinner itself).
+  - The **debounce delay** (ie. after how many milliseconds the spinner will be visible, if needed).
+  - The **extra duration** (ie. how many extra milliseconds should the spinner be visible).
+  - The **minimum duration** (ie. how many milliseconds should the spinner be visible at least).
+  - The spinner **opacity**.
+  - The **spinner type**.
+
 ```xml
 <ng-http-loader 
-    [backgroundColor]="'#ff0000'"
-    [spinner]="spinkit.skWave"
     [backdrop]="false"
+    [backgroundColor]="'#ff0000'"
     [debounceDelay]="100"
+    [extraDuration]="300"
     [minDuration]="300"
-    [extraDuration]="300">
+    [opacity]=".6"
+    [spinner]="spinkit.skWave">
 </ng-http-loader>
 ```
 
-**_To use this syntax, you must reference the `Spinkit` const as a public property in your app.component.ts_**:
+**_To specify the spinner type this way, you must reference the `Spinkit` const as a public property in your app.component.ts_**:
 
 ```typescript
 import { Spinkit } from 'ng-http-loader'; // <============

src/lib/components/_variables.scss

@@ -2,7 +2,6 @@ $spinkit-spinner-margin: auto !default;
 $spinkit-size: 40px !default;
 $spinkit-top: 50% !default;
 $spinkit-position: relative !default;
+$spinkit-background-color: #333 !default;
 
-$spinner-background-color: #f1f1f1 !default;
-$spinner-opacity: .7 !default;
-$colored-background-color: #333 !default;
+$backdrop-background-color: #f1f1f1 !default;

src/lib/components/ng-http-loader.component.html

@@ -1,4 +1,7 @@
-<div id="spinner" [class.backdrop]="backdrop" *ngIf="isVisible$ | async">
+<div id="spinner"
+     *ngIf="isVisible$ | async"
+     [class.backdrop]="backdrop"
+     [style.opacity]="opacity">
 
     <ng-container *ngComponentOutlet="entryComponent"></ng-container>
 

src/lib/components/ng-http-loader.component.scss

@@ -6,14 +6,13 @@
     transform: translate(-50%, -50%);
     position: fixed;
     z-index: 9999;
-    opacity: $spinner-opacity;
 
     &.backdrop {
         top: 0;
         left: 0;
         height: 100%;
         width: 100%;
-        background-color: $spinner-background-color;
+        background-color: $backdrop-background-color;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -22,5 +21,5 @@
 }
 
 ::ng-deep .colored-parent, ::ng-deep .colored > div {
-    background-color: $colored-background-color;
+    background-color: $spinkit-background-color;
 }

src/lib/components/ng-http-loader.component.ts

@@ -34,6 +34,7 @@ export class NgHttpLoaderComponent implements OnDestroy, OnInit {
     @Input() public filteredMethods: string[] = [];
     @Input() public filteredUrlPatterns: string[] = [];
     @Input() public minDuration = 0;
+    @Input() public opacity = '.7';
     @Input() public spinner = Spinkit.skWave;
 
     constructor(private pendingRequestsInterceptor: PendingRequestsInterceptor, private spinnerVisibility: SpinnerVisibilityService) {

src/test/components/ng-http-loader.component.spec.ts

@@ -878,4 +878,31 @@ describe('NgHttpLoaderComponent', () => {
 
         expect(element).toBeNull();
     });
+
+    it('should have a default opacity', () => {
+        spyOnProperty(component, 'isVisible$')
+            .and.returnValue(new BehaviorSubject(true).asObservable());
+        fixture.detectChanges();
+
+        const element: HTMLElement = fixture
+            .debugElement
+            .query(By.css('#spinner'))
+            .nativeElement;
+
+        expect(element.style.opacity).toBe('0.7');
+    });
+
+    it('should be possible to override opacity', () => {
+        spyOnProperty(component, 'isVisible$')
+            .and.returnValue(new BehaviorSubject(true).asObservable());
+        component.opacity = '.3';
+        fixture.detectChanges();
+
+        const element: HTMLElement = fixture
+            .debugElement
+            .query(By.css('#spinner'))
+            .nativeElement;
+
+        expect(element.style.opacity).toBe(`0${component.opacity}`);
+    });
 });