https://veefriends.com/dist/StarHover-OG4MQ6JO.9fq6vessyx.js

1import {
2  $eg
3} from "./chunk-6USANRFA.js";
4import {
5  animate
6} from "./chunk-CTQMBWFQ.js";
7import "./chunk-5WRI5ZAA.js";
8
9// ../VeeFriends.Web.Www.Host/wwwroot/utils/StarHover.js
10var StarHover = class {
11  constructor() {
12    this.elements = document.querySelectorAll("[data-star-hover]");
13    this.defaultColors = [
14      "hsl(24, 98%, 44%)",
15      "hsl(53, 93%, 53%)",
16      "hsl(356, 95%, 60%)",
17      "hsl(163, 75%, 39%)",
18      "hsl(333, 57%, 60%)",
19      "hsl(198, 77%, 51%)",
20      "hsl(276, 65%, 65%)",
21      "hsl(230, 96%, 60%)",
22      "hsl(19, 74%, 61%)"
23    ];
24    this.starSizes = { small: 16, medium: 24, large: 32 };
25    this.init();
26  }
27  /**
28   * Initializes the star hover effect on the elements.
29   * This method sets up event listeners for each element that triggers a star burst animation
30   * when the mouse enters the element. The number of stars and their colors can be customized
31   * through data attributes on the elements.
32   *
33   * @throws {Error} Throws an error if the element's dataset is not properly formatted.
34   *
35   * @example
36   * // Assuming `this.elements` contains a list of DOM elements with appropriate data attributes
37   * instance.init();
38   */
39  init() {
40    this.elements.forEach((element) => {
41      const count = parseInt(element.dataset.starHoverCount) || 4;
42      const colors = element.dataset.starHoverColors ? element.dataset.starHoverColors.split(",").map((c) => c.trim()) : this.defaultColors;
43      $eg.off(element, "mouseenter");
44      $eg.on(element, "mouseenter", () => {
45        this.createStarBurst(element, count, colors);
46      });
47      $eg.off(element, "mouseleave");
48      $eg.on(element, "mouseleave", () => {
49        this.removeStarBurst(element);
50      });
51    });
52  }
53  /**
54   * Retrieves a random size from the available star sizes.
55   *
56   * This method accesses the `starSizes` property of the class instance,
57   * which should be an object containing various size values. It then
58   * randomly selects one of these sizes and returns it.
59   *
60   * @returns {number} A randomly selected size from the available star sizes.
61   *
62   * @throws {Error} Throws an error if `starSizes` is not defined or is not an object.
63   *
64   * @example
65   * const randomSize = instance.getRandomSize();
66   * console.log(randomSize); // Outputs a random size value.
67   */
68  getRandomSize() {
69    const sizes = Object.values(this.starSizes);
70    return sizes[Math.floor(Math.random() * sizes.length)];
71  }
72  /**
73   * Creates a star-shaped SVG element.
74   *
75   * @returns {HTMLElement} The star SVG element with applied styles.
76   */
77  createStar(color) {
78    const size = this.getRandomSize();
79    const star = document.createElementNS("http://www.w3.org/2000/svg", "svg");
80    star.setAttribute("width", size);
81    star.setAttribute("height", size);
82    star.setAttribute("viewBox", "0 0 35 35");
83    star.setAttribute("fill", "none");
84    star.setAttribute("xmlns", "http://www.w3.org/2000/svg");
85    star.setAttribute("class", "animated-star");
86    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
87    path.setAttribute(
88      "d",
89      "M17.5431 0H17.4838C17.2264 4.56599 15.2989 8.87526 12.0715 12.0996C8.84421 15.3239 4.54492 17.2357 0 17.4675L0 17.5162C4.5481 17.7483 8.8502 19.6622 12.0788 22.8898C15.3074 26.1174 17.2344 30.4307 17.4892 35H17.5431C17.7972 30.436 19.7197 26.127 22.9416 22.9002C26.1634 19.6734 30.4576 17.7561 35 17.5162V17.4675C30.4606 17.2268 26.1692 15.3114 22.948 12.0882C19.7268 8.86506 17.8022 4.56075 17.5431 0Z"
90    );
91    path.setAttribute("fill", color ?? "#FFE84C");
92    star.appendChild(path);
93    star.style.cssText = `
94      position: absolute;
95      pointer-events: none;
96      will-change: auto;
97    `;
98    return star;
99  }
100  /**
101   * Generates a random position on the edge of a given rectangle.
102   *
103   * This function randomly selects one of the four edges of the rectangle
104   * and calculates a position on that edge. The edges are defined as follows:
105   * - Top edge (edge 0)
106   * - Right edge (edge 1)
107   * - Bottom edge (edge 2)
108   * - Left edge (edge 3)
109   *
110   * @param {Object} rect - The rectangle from which to derive the edge position.
111   * @param {number} rect.width - The width of the rectangle.
112   * @param {number} rect.height - The height of the rectangle.
113   * @returns {Object}

113 An object containing the randomly generated position and the edge number.
114   * @returns {Object} return.position - The position on the edge with x and y coordinates.
115   * @returns {number} return.edge - The edge number (0-3) representing which edge was selected.
116   *
117   * @example
118   * const rect = { width: 100, height: 50 };
119   * const result = getRandomEdgePosition(rect);
120   * console.log(result); // { position: { x: ..., y: ... }, edge: 0 | 1 | 2 | 3 }
121   */
122  getRandomEdgePosition(rect) {
123    const edge = Math.floor(Math.random() * 4);
124    const position = { x: 0, y: 0 };
125    switch (edge) {
126      case 0:
127        position.x = Math.random() * rect.width;
128        position.y = 0;
129        break;
130      case 1:
131        position.x = rect.width;
132        position.y = Math.random() * rect.height;
133        break;
134      case 2:
135        position.x = Math.random() * rect.width;
136        position.y = rect.height;
137        break;
138      case 3:
139        position.x = 0;
140        position.y = Math.random() * rect.height;
141        break;
142    }
143    return { position, edge };
144  }
145  /**
146   * Calculates a random end position based on the specified edge, rectangle dimensions, and distance.
147   *
148   * This function generates a random angle and combines it with a base angle determined by the specified edge.
149   * The resulting angle is then used to compute the x and y coordinates of the end position, which are returned as an object.
150   *
151   * @param {number} edge - The edge from which to calculate the end position.
152   *                        Acceptable values are:
153   *                        0: Top edge,
154   *                        1: Right edge,
155   *                        2: Bottom edge,
156   *                        3: Left edge.
157   * @param {Object} rect - The rectangle object containing dimensions (not used in calculations).
158   * @param {number} distance - The distance from the edge to the calculated end position.
159   * @returns {{x: number, y: number}} An object containing the x and y coordinates of the calculated end position.
160   *
161   * @example
162   * const position = getRandomEndPosition(1, { width: 100, height: 100 }, 50);
163   * console.log(position); // { x: ..., y: ... }
164   *
165   * @throws {Error} Throws an error if the edge parameter is not between 0 and 3.
166   */
167  getRandomEndPosition(edge) {
168    const distance = 0 + Math.random() * 50;
169    const angle = Math.random() * Math.PI / 2;
170    let baseAngle;
171    switch (edge) {
172      case 0:
173        baseAngle = -Math.PI / 2;
174        break;
175      case 1:
176        baseAngle = 0;
177        break;
178      case 2:
179        baseAngle = Math.PI / 2;
180        break;
181      case 3:
182        baseAngle = Math.PI;
183        break;
184    }
185    const finalAngle = baseAngle + angle - Math.PI / 4;
186    return {
187      x: Math.cos(finalAngle) * distance,
188      y: Math.sin(finalAngle) * distance
189    };
190  }
191  /**
192   * Creates a burst of stars that animate from random edges of the given element.
193   *
194   * This asynchronous function generates a specified number of stars with random colors,
195   * positions them at random edges of the element, and animates them to random end positions.
196   * After the stars finish their animation, they will fade out and be removed from the DOM.
197   *
198   * @async
199   * @param {HTMLElement} element - The DOM element to which the stars will be appended.
200   * @param {number} count - The number of stars to create and animate.
201   * @param {string[]} colors - An array of color strings to randomly assign to each star.
202   *
203   * @returns {Promise<void>} A promise that resolves when all animations are complete.
204   *
205   * @throws {Error} Throws an error if the element is not valid or if animations fail.
206   *
207   * @example
208   * const container = document.getElementById('star-container');
209   * const colors = ['#ff0000', '#00ff00', '#0000ff'];
210   * createStarBurst(container, 10, colors)
211   *   .then(() => console.log('Star burst animation completed!'))
212   *   .catch((error) => console.error('Animation failed:', error));
213   */
214  createStarBurst(element, count, colors) {
215    const rect = element.getBoundingClientRect();
216    for (let i = 0; i < count; i++) {
217      const color = colors[Math.floor(Math.random() * colors.length)];

218      const star = this.createStar(color);
219      const { position } = this.getRandomEdgePosition(rect);
220      star.style.opacity = 0;
221      star.style.left = `${position.x}px`;
222      star.style.top = `${position.y}px`;
223      element.appendChild(star);
224    }
225    const stars = element.querySelectorAll(".animated-star");
226    console.log(stars);
227    stars.forEach((star) => {
228      const rotation = Math.random() * 360;
229      const { edge } = this.getRandomEdgePosition(rect);
230      const endPosition = this.getRandomEndPosition(edge);
231      const sequence = [
232        [
233          star,
234          { transform: ["rotate(0deg)", `translate(0px, 0px)`], opacity: 0 }
235        ],
236        [
237          star,
238          {
239            transform: [
240              `rotate(${rotation}deg)`,
241              `translate(${endPosition.x}px, ${endPosition.y}px)`
242            ],
243            opacity: 1
244          }
245        ]
246      ];
247      animate(sequence, { ease: [0.39, 0.24, 0.3, 1], duration: 1 });
248    });
249  }
250  removeStarBurst(element) {
251    const stars = element.querySelectorAll(".animated-star");
252    stars.forEach((star) => {
253      animate(
254        star,
255        { transform: ["rotate(0deg)", `translate(0px, 0px)`], opacity: 0 },
256        { duration: 0.5, easing: "ease-out" }
257      ).then(() => star.remove());
258    });
259  }
260};
261export {
262  StarHover
263};
264//# sourceMappingURL=StarHover-OG4MQ6JO.js.map