Merge pull request #26 from ezeaniiandrew/feat/add-overlay-color-option

Feat: add `overlayColor` option to Boarding class

Author: josias-r

index.html

@@ -642,10 +642,11 @@ <h4>Boarding Definition</h4>
           <pre><code class="javascript">const boarding = new Boarding({
   className: 'scoped-class', // className to wrap boarding.js popover
   animate: true, // Animate while changing highlighted element
-  opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
+  opacity: 0.75, // Overlay opacity (0 means only popovers and without overlay)
   padding: 10, // Distance of element from around the edges
   allowClose: true, // Whether clicking on overlay should close or not
   overlayClickNext: false, // Should it move to next step on overlay click
+  overlayColor: 'rgb(0,0,0)', // Fill color for the overlay
   doneBtnText: 'Done', // Text on the final button
   closeBtnText: 'Close', // Text on the close button for this step
   nextBtnText: 'Next', // Next button text for this step

readme.md

@@ -260,10 +260,11 @@ Here are the options that Boarding understands:
 const boarding = new Boarding({
   className: "scoped-class", // className to wrap boarding.js popover
   animate: true, // Whether to animate or not
-  opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
+  opacity: 0.75, // Overlay opacity (0 means only popovers and without overlay)
   padding: 10, // Distance of element from around the edges
   allowClose: true, // Whether the click on overlay should close or not
   overlayClickNext: false, // Whether the click on overlay should move next
+  overlayColor: "rgb(0,0,0)", // Fill color for the overlay
   doneBtnText: "Done", // Text on the final button
   closeBtnText: "Close", // Text on the close button for this step
   nextBtnText: "Next", // Next button text for this step

src/lib/boarding.ts

@@ -104,6 +104,7 @@ class Boarding {
       radius: this.options.radius,
       onReset: this.options.onReset,
       opacity: this.options.opacity,
+      overlayColor: this.options.overlayColor,
       onOverlayClick: () => {
         // Perform the 'Next' operation when clicked outside the highlighted element
         if (this.options.overlayClickNext) {

src/lib/common/constants.ts

@@ -1,4 +1,5 @@
 export const OVERLAY_OPACITY = 0.75;
+export const OVERLAY_FILL_COLOR = "rgb(0,0,0)";
 export const OVERLAY_RADIUS = 5;
 export const OVERLAY_PADDING = 10;
 export const POPOVER_OFFSET = 10;

src/lib/core/overlay.ts

@@ -1,5 +1,5 @@
 import { BoardingSharedOptions } from "../boarding-types";
-import { OVERLAY_OPACITY } from "../common/constants";
+import { OVERLAY_FILL_COLOR, OVERLAY_OPACITY } from "../common/constants";
 import {
   assertVarIsNotFalsy,
   attachHighPrioClick,
@@ -37,6 +37,11 @@ export interface OverlayTopLevelOptions {
    * @default 0.75
    */
   opacity?: number;
+  /**
+   * Fill color for the overlay
+   * @default rgb(0,0,0)
+   */
+  overlayColor?: string;
 }
 
 interface OverlayOptions
@@ -69,9 +74,14 @@ class Overlay {
 
   constructor(options: OverlayOptions) {
     this.options = {
-      // padding: Padding default will come from outside, as it affects more then just the overlay
-      opacity: OVERLAY_OPACITY,
       ...options,
+      opacity:
+        options.opacity === undefined ? OVERLAY_OPACITY : options.opacity,
+      overlayColor:
+        options.overlayColor === undefined
+          ? OVERLAY_FILL_COLOR
+          : options.overlayColor,
+      // padding: Padding default will come from outside, as it affects more then just the overlay
     };
   }
 
@@ -377,6 +387,7 @@ class Overlay {
       opacity: this.options.opacity,
       radius: definition.radius,
       animated: this.options.animate,
+      fillColor: this.options.overlayColor,
     };
 
     // mount svg if its not mounted already