From 21b1c2a97b164047ba79fe4131f97a400187c7e7 Mon Sep 17 00:00:00 2001
From: 9itish <programmer.nitish@gmail.com>
Date: Fri, 1 Nov 2024 18:03:01 +0530
Subject: [PATCH] Added Option to Add Overlay

---
 neat-gradient.js | 35 ++++++++++++++++++++++++++++-------
 style.css        |  6 +++++-
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/neat-gradient.js b/neat-gradient.js
index ef813f1..894e021 100644
--- a/neat-gradient.js
+++ b/neat-gradient.js
@@ -3,11 +3,12 @@ class AnimatedGradient {
   #colors;
   #styleOptions;
   #tickSpeed;
+  #overlay;
   #classes;
 
   #ticks;
 
-  constructor({ element, colors, styleOptions, tickSpeed, classes }) {
+  constructor({ element, colors, styleOptions, tickSpeed, overlay, classes }) {
     if (new.target === AnimatedGradient) {
       throw new Error(
         "Cannot instantiate an abstract class directly. Please extend this class and implement the required methods."
@@ -21,8 +22,16 @@ class AnimatedGradient {
       animDuration: 30
     });
 
-    this.#classes = classes || "";
+    console.log(overlay);
+
     this.#tickSpeed = tickSpeed || 1;
+    this.#overlay = overlay || {
+      isPresent: false
+    };
+
+    console.log(this.#overlay);
+
+    this.#classes = classes || "";
 
     this.#ticks = 0;
   }
@@ -84,7 +93,7 @@ class AnimatedGradient {
 
   updateAnimationDuration() {
     let backgroundDiv = this.#element.querySelector(".ngrad-background");
-    let animDuration = this.#styleOptions.animDuration || 30;
+    let animDuration = this.#styleOptions.animDuration;
     backgroundDiv.style.setProperty(`--anim-duration`, `${animDuration}s`);
   }
 
@@ -139,13 +148,14 @@ class AnimatedGradient {
     }
 
     const backgroundWrapperDiv = document.createElement("div");
-
     backgroundWrapperDiv.className = "ngrad-wrapper";
 
     const backgroundDiv = document.createElement("div");
-
     backgroundDiv.className = "ngrad-background";
 
+    const overlayDiv = document.createElement("div");
+    overlayDiv.className = "ngrad-overlay";
+
     if (this.#classes) {
       if (this.#classes.includes("nbg-move-lr") || this.#classes.includes("nbg-move-rl")) {
         if (this.gradientType() == 'NeatLinear' || this.gradientType() == 'NeatAbstract') {
@@ -171,6 +181,10 @@ class AnimatedGradient {
 
     backgroundWrapperDiv.appendChild(backgroundDiv);
 
+    if(this.#overlay.isPresent) {
+      backgroundWrapperDiv.appendChild(overlayDiv);
+    }
+
     this.#element.appendChild(backgroundWrapperDiv);
 
     const computedElementStyles = window.getComputedStyle(this.#element);
@@ -178,6 +192,13 @@ class AnimatedGradient {
     if (computedElementStyles.position === 'static') {
       this.#element.style.position = 'relative';
     }
+
+    if(this.#overlay.background) {  
+      overlayDiv.style.setProperty(
+        `--bg-string`,
+        `${this.#overlay.background}`
+      );
+    }
   }
 
   applyGradient() {
@@ -666,8 +687,8 @@ class NeatThreeTriangles extends AnimatedGradient {
 
 class NeatZigZag extends AnimatedGradient {
 
-  constructor({ element, colors, style, styleOptions, tickSpeed, classes }) {
-    super({ element, colors, style, styleOptions, tickSpeed, classes });
+  constructor({ element, colors, style, styleOptions, tickSpeed,  overlay, classes }) {
+    super({ element, colors, style, styleOptions, tickSpeed, overlay, classes });
 
     this.styleOptions = {
       bgPosMultipliers: [-0.5, 0, -0.5, 0, 0, 0, 0, 0],
diff --git a/style.css b/style.css
index 4ebcf54..d37ebdf 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-.ngrad-wrapper, .ngrad-background {
+.ngrad-wrapper, .ngrad-background, .ngrad-overlay {
     position: absolute;
     top: 0;
     left: 0;
@@ -11,6 +11,10 @@
     z-index: -1;
 }
 
+.ngrad-overlay {
+    background: var(--bg-string);
+}
+
 
 .nbg-move-lr {
     animation: moveLR var(--anim-duration) linear infinite;