From e3d3debcb5abd9acee45aafc8454b858e5dc3e6f Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 11 May 2023 00:36:22 +0100
Subject: [PATCH] Add option to configure opacity

---
 index.html    | 20 ++++++++++++++++++++
 src/config.ts |  2 ++
 src/stage.ts  |  3 ++-
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 4e6c11a..b0a81d0 100644
--- a/index.html
+++ b/index.html
@@ -81,6 +81,8 @@
         <button id="simple-highlight-btn">Simple Highlight</button>
         <button id="transition-highlight-btn">Multiple Highlight Calls</button>
         <button id="disallow-close">Disallow Close</button>
+        <button id="dark-highlight-btn">Super Dark Highlight</button>
+        <button id="dim-highlight-btn">Super Dim Highlight</button>
         <button id="tour-btn">Start Tour</button>
         <button id="destroy-btn">Destroy</button>
       </div>
@@ -105,6 +107,24 @@
           driver({ animate: false }).highlight({ element: "ul" });
         });
 
+      document
+        .getElementById("dark-highlight-btn")
+        .addEventListener("click", () => {
+          driver({
+            animate: true,
+            opacity: 0.9,
+          }).highlight({ element: "ul" });
+        });
+
+      document
+        .getElementById("dim-highlight-btn")
+        .addEventListener("click", () => {
+          driver({
+            animate: true,
+            opacity: 0.2,
+          }).highlight({ element: ".buttons" });
+        });
+
       document
         .getElementById("transition-highlight-btn")
         .addEventListener("click", () => {
diff --git a/src/config.ts b/src/config.ts
index c87561a..b116566 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,6 +1,7 @@
 export type Config = {
   animate?: boolean;
   allowClose?: boolean;
+  opacity?: number;
 };
 
 let currentConfig: Config = {};
@@ -9,6 +10,7 @@ export function configure(config: Config = {}) {
   currentConfig = {
     animate: true,
     allowClose: true,
+    opacity: 0.7,
     ...config,
   };
 }
diff --git a/src/stage.ts b/src/stage.ts
index 0608a7e..87796fa 100644
--- a/src/stage.ts
+++ b/src/stage.ts
@@ -1,6 +1,7 @@
 import { easeInOutQuad } from "./math";
 import { onDriverClick } from "./events";
 import { trigger } from "./hooks";
+import { getConfig } from "./config";
 
 export type StageDefinition = {
   x: number;
@@ -158,7 +159,7 @@ function createStageSvg(stage: StageDefinition): SVGSVGElement {
   cutoutPath.setAttribute("d", generateSvgCutoutPathString(stage));
 
   cutoutPath.style.fill = "rgb(0,0,0)";
-  cutoutPath.style.opacity = `0.7`;
+  cutoutPath.style.opacity = `${getConfig("opacity")}`;
   cutoutPath.style.pointerEvents = "auto";
   cutoutPath.style.cursor = "auto";