@janarendvw/spotlight - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

CHANGELOG.md

 # @janaredvw/spotlight
 
+## 2.2.0
+
+### Minor Changes
+
+- 19f2a00: Added basic spotlight visual elements & logic
+
 ## 2.1.1
@@ -4,0 +10,0 @@

dist/index.d.ts

@@ -0,2 +1,18 @@
+declare class Spotlight {
+    spotlightArray: HTMLElement[];
+    spotlightBox: HTMLElement | null;
+    spotlightDescription: HTMLElement | null;
+    currentSpotlightIndex: number;
+    currentElement: HTMLElement | null;
+    constructor();
+    createSpotlightBox(): void;
+    createSpotlightDescription(): void;
+    createNextButton(): void;
+    gatherSpotlights(): void;
+    destroySpotlightBox(): void;
+    listAllSpotlights(): void;
+    injectSpotlightBoxStyles(): void;
+    startSpotlight(): void;
+}
 
-export {  }
+export { Spotlight as default };

dist/index.js

 "use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
 // src/spotlight.ts
 var Spotlight = class {
+  // Initialize the spotlight box and description elements
   constructor() {
@@ -9,2 +34,4 @@ this.spotlightArray = [];
     this.spotlightDescription = null;
+    this.currentSpotlightIndex = 0;
+    this.currentElement = null;
     this.createSpotlightBox();
@@ -14,2 +41,3 @@ this.createSpotlightDescription();
   }
+  // Create the spotlight box element and append it to the body
   createSpotlightBox() {
@@ -19,9 +47,24 @@ this.spotlightBox = document.createElement("div");
     document.body.appendChild(this.spotlightBox);
+    this.injectSpotlightBoxStyles();
   }
+  // Create the spotlight description element and append it to the spotlight box
   createSpotlightDescription() {
-    var _a;
     this.spotlightDescription = document.createElement("div");
-    this.spotlightDescription.classList.add("spotlight-description");
-    (_a = this.spotlightBox) == null ? void 0 : _a.appendChild(this.spotlightDescription);
+    this.spotlightBox && this.spotlightBox.appendChild(this.spotlightDescription);
+    this.createNextButton();
+    this.spotlightDescription.style.setProperty("position", "absolute");
+    this.spotlightDescription.style.setProperty("padding", "3rem");
+    this.spotlightDescription.style.setProperty("background-color", "rgba(0, 0, 0, 0.8)");
+    this.spotlightDescription.style.top = "100%";
   }
+  createNextButton() {
+    const nextButton = document.createElement("button");
+    nextButton.innerText = "Next";
+    nextButton.addEventListener("click", () => {
+      this.currentSpotlightIndex++;
+      this.startSpotlight();
+    });
+    this.spotlightDescription && this.spotlightDescription.appendChild(nextButton);
+  }
+  // Gather all elements with the data-spotlight attribute
   gatherSpotlights() {
@@ -32,9 +75,51 @@ this.spotlightArray = Array.from(
   }
-  static start() {
+  destroySpotlightBox() {
+    this.spotlightBox && this.spotlightBox.remove();
   }
+  listAllSpotlights() {
+    console.log(this.spotlightArray);
+  }
+  injectSpotlightBoxStyles() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    (_a = this.spotlightBox) == null ? void 0 : _a.style.setProperty(
+      "box-shadow",
+      "0px 0px 50px 0px rgba(255, 255, 200, 0.8)"
+    );
+    (_b = this.spotlightBox) == null ? void 0 : _b.style.setProperty("padding", "5px");
+    (_c = this.spotlightBox) == null ? void 0 : _c.style.setProperty("border-radius", "6px");
+    (_d = this.spotlightBox) == null ? void 0 : _d.style.setProperty("display", "none");
+    (_e = this.spotlightBox) == null ? void 0 : _e.style.setProperty("position", "absolute");
+    (_f = this.spotlightBox) == null ? void 0 : _f.style.setProperty("top", "0");
+    (_g = this.spotlightBox) == null ? void 0 : _g.style.setProperty("left", "0");
+    (_h = this.spotlightBox) == null ? void 0 : _h.style.setProperty("width", "100%");
+    (_i = this.spotlightBox) == null ? void 0 : _i.style.setProperty("height", "100%");
+    (_j = this.spotlightBox) == null ? void 0 : _j.style.setProperty("z-index", "999999");
+  }
+  startSpotlight() {
+    if (this.spotlightBox) {
+      this.spotlightBox.style.setProperty("display", "block");
+      console.log(this.spotlightArray[this.currentSpotlightIndex]);
+      this.currentElement = this.spotlightArray[this.currentSpotlightIndex] || null;
+      if (this.currentElement) {
+        const spotlightBoxRect = this.spotlightBox.getBoundingClientRect();
+        const currentElementRect = this.currentElement.getBoundingClientRect();
+        const currentElementTop = currentElementRect.top - spotlightBoxRect.top;
+        const currentElementLeft = currentElementRect.left - spotlightBoxRect.left;
+        const currentElementWidth = currentElementRect.width;
+        const currentElementHeight = currentElementRect.height;
+        this.spotlightBox.style.setProperty("display", "block");
+        this.spotlightBox.style.setProperty("top", `${currentElementTop - 3}px`);
+        this.spotlightBox.style.setProperty("left", `${currentElementLeft - 3}px`);
+        this.spotlightBox.style.setProperty("width", `${currentElementWidth}px`);
+        this.spotlightBox.style.setProperty("height", `${currentElementHeight}px`);
+      } else {
+        console.log("Spotlight box not found");
+      }
+    } else {
+      console.log("Spotlight box not found");
+    }
+  }
 };
 
 // src/index.ts
-module.exports = {
-  Spotlight
-};
+var src_default = Spotlight;

package.json

 {
   "name": "@janarendvw/spotlight",
   "license": "MIT",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "A simple spotlight effect for your web app",
@@ -31,3 +31,3 @@ "keywords": [
   "main": "dist/index.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -34,0 +34,0 @@ "devDependencies": {

src/index.ts

 import { Spotlight } from "./spotlight"
 
-module.exports = {
-    Spotlight,
-};
+export default Spotlight

src/spotlight.ts

@@ -5,3 +5,6 @@ export class Spotlight {
   spotlightDescription: HTMLElement | null = null;
+  currentSpotlightIndex: number = 0;
+  currentElement: HTMLElement | null = null;
 
+  // Initialize the spotlight box and description elements
   constructor() {
@@ -13,2 +16,3 @@ this.createSpotlightBox();
 
+  // Create the spotlight box element and append it to the body
   createSpotlightBox() {
@@ -18,10 +22,29 @@ this.spotlightBox = document.createElement("div");
     document.body.appendChild(this.spotlightBox);
+    this.injectSpotlightBoxStyles();
   }
 
+  // Create the spotlight description element and append it to the spotlight box
   createSpotlightDescription() {
     this.spotlightDescription = document.createElement("div");
-    this.spotlightDescription.classList.add("spotlight-description");
-    this.spotlightBox?.appendChild(this.spotlightDescription);
+    this.spotlightBox && this.spotlightBox.appendChild(this.spotlightDescription);
+    this.createNextButton();
+
+    this.spotlightDescription.style.setProperty("position", "absolute");
+    this.spotlightDescription.style.setProperty("padding", "3rem");
+    this.spotlightDescription.style.setProperty("background-color", "rgba(0, 0, 0, 0.8)");
+    this.spotlightDescription.style.top = "100%";
+    
   }
 
+  createNextButton() {
+    const nextButton = document.createElement("button");
+    nextButton.innerText = "Next";
+    nextButton.addEventListener("click", () => {
+      this.currentSpotlightIndex++;
+      this.startSpotlight();
+    });
+    this.spotlightDescription && this.spotlightDescription.appendChild(nextButton);
+  }
+
+  // Gather all elements with the data-spotlight attribute
   gatherSpotlights() {
@@ -33,5 +56,53 @@ this.spotlightArray = Array.from(
 
-  static start() {
-    
+  destroySpotlightBox() {
+    this.spotlightBox && this.spotlightBox.remove();
   }
+
+  listAllSpotlights() {
+    console.log(this.spotlightArray);
+  }
+
+  injectSpotlightBoxStyles() {
+    this.spotlightBox?.style.setProperty(
+      "box-shadow",
+      "0px 0px 50px 0px rgba(255, 255, 200, 0.8)"
+    );
+    this.spotlightBox?.style.setProperty("padding", "5px")
+    this.spotlightBox?.style.setProperty("border-radius", "6px");
+    this.spotlightBox?.style.setProperty("display", "none");
+    this.spotlightBox?.style.setProperty("position", "absolute");
+    this.spotlightBox?.style.setProperty("top", "0");
+    this.spotlightBox?.style.setProperty("left", "0");
+    this.spotlightBox?.style.setProperty("width", "100%");
+    this.spotlightBox?.style.setProperty("height", "100%");
+    this.spotlightBox?.style.setProperty("z-index", "999999");
+  }
+
+  startSpotlight() {
+    if (this.spotlightBox) {
+      this.spotlightBox.style.setProperty("display", "block");
+      console.log(this.spotlightArray[this.currentSpotlightIndex])
+        this.currentElement = this.spotlightArray[this.currentSpotlightIndex] || null;
+        if (this.currentElement) {
+            const spotlightBoxRect = this.spotlightBox.getBoundingClientRect();
+            const currentElementRect = this.currentElement.getBoundingClientRect();
+            const currentElementTop = currentElementRect.top - spotlightBoxRect.top;
+            const currentElementLeft = currentElementRect.left - spotlightBoxRect.left;
+            const currentElementWidth = currentElementRect.width;
+            const currentElementHeight = currentElementRect.height;
+            this.spotlightBox.style.setProperty("display", "block");
+            this.spotlightBox.style.setProperty("top", `${currentElementTop - 3}px`);
+            this.spotlightBox.style.setProperty("left", `${currentElementLeft -3}px`);
+            this.spotlightBox.style.setProperty("width", `${currentElementWidth}px`);
+            this.spotlightBox.style.setProperty("height", `${currentElementHeight}px`);
+        }
+        else {
+          console.log("Spotlight box not found");
+        }
+    }
+    else {
+      console.log("Spotlight box not found");
+    }
+  }
+
 }

tsconfig.json

@@ -28,3 +28,3 @@ {
     /* Modules */
-    "module": "commonjs" /* Specify what module code is generated. */,
+    "module": "esNext" /* Specify what module code is generated. */,
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
@@ -31,0 +31,0 @@ // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

65977

increased by20.53%

Lines of code

438

increased by89.61%

No dependency changes