https://blog.nitroimagens.com.br/wp-content/themes/agntix/assets/js/img-revel/utils.js

1const body = document.body;
2const docEl = document.documentElement;
3
4/**
5 * Preloads images specified by the CSS selector.
6 * @function
7 * @param {string} [selector='img'] - CSS selector for target images.
8 * @returns {Promise} - Resolves when all specified images are loaded.
9 */
10const preloadImages = (selector = 'img') => {
11    return new Promise((resolve) => {
12        // The imagesLoaded library is used to ensure all images (including backgrounds) are fully loaded.
13        imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve);
14    });
15};
16
17/**
18 * Performs linear interpolation between two numbers.
19 * @function
20 * @param {number} a - The starting value.
21 * @param {number} b - The target value.
22 * @param {number} n - Normalization factor, typically between 0 and 1.
23 * @returns {number} - Result of the linear interpolation.
24 */
25const lerp = (a, b, n) => (1 - n) * a + n * b;
26
27/**
28 * Calculates the Euclidean distance between two points in a 2D space.
29 * @function
30 * @param {number} x1 - X-coordinate of the first point.
31 * @param {number} y1 - Y-coordinate of the first point.
32 * @param {number} x2 - X-coordinate of the second point.
33 * @param {number} y2 - Y-coordinate of the second point.
34 * @returns {number} - Distance between the two points.
35 */
36const distance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1);
37
38/**
39 * Retrieves the current position from a mouse or touch event.
40 * @function
41 * @param {Event} ev - The mouse or touch event.
42 * @returns {Object} - Object containing the x and y coordinates of the cursor or finger.
43 */
44const getPointerPos = ev => {
45    let posx = 0;
46    let posy = 0;
47    
48    // If the event is not provided, use the global window event object.
49    if (!ev) ev = window.event;
50
51    // Handle touch events
52    if (ev.touches) {
53        if (ev.touches.length > 0) { // Check if there are any touches available
54            posx = ev.touches[0].pageX;
55            posy = ev.touches[0].pageY;
56        }
57    }
58    // Handle mouse events
59    else if (ev.pageX || ev.pageY) {
60        posx = ev.pageX;
61        posy = ev.pageY;
62    }
63    else if (ev.clientX || ev.clientY) {
64        posx = ev.clientX + body.scrollLeft + docEl.scrollLeft;
65        posy = ev.clientY + body.scrollTop + docEl.scrollTop;
66    }
67
68    // Return the position.
69    return {x: posx, y: posy};
70}
71
72/**
73 * Computes the distance between current and last recorded mouse positions.
74 * @function
75 * @param {Object} mousePos - Current mouse position with x and y coordinates.
76 * @param {Object} lastMousePos - Last recorded mouse position with x and y coordinates.
77 * @returns {number} - Distance between the two mouse positions.
78 */
79const getMouseDistance = (mousePos, lastMousePos) => {
80    return distance(mousePos.x, mousePos.y, lastMousePos.x, lastMousePos.y);
81};
82
83/**
84 * Computes the new position in an array after moving by a given offset.
85 * The array is treated as circular, meaning subtracting from the beginning 
86 * wraps to the end of the array.
87 *
88 * @function
89 * @param {number} position - The starting position in the array.
90 * @param {number} offset - The number of positions to move backward.
91 * @param {Array} arr - The array in which to compute the new position.
92 * @returns {number} The new position in the array after moving by the offset.
93 */
94const getNewPosition = (position, offset, arr) => {
95    // Ensure offset is non-negative and is within the range of the array's length
96    const realOffset = Math.abs(offset) % arr.length;
97    
98    // Check if subtracting the offset stays within the array's bounds
99    if (position - realOffset >= 0) {
100        return position - realOffset;
101    } else {
102        // If not, wrap around to the end of the array and compute the new position
103        return arr.length - (realOffset - position);
104    }
105};
106
107/**
108 * Set the clip path for each of the clipInnerElements based on the provided grid dimensions.
109 * @param {Array} clipInnerElements - The list of elements to set the clip paths on.
110 * @param {number} numRows - The number of rows in the grid.
111 * @param {number} numCols - The number of columns in the grid.
112 */
113const setClipPath = (clipInnerElements, numRows, numCols) => {
114    if (clipInnerElements.length !== numRows * numCols) {
115        console.error('Mismatch between provided grid dimensions and number of elements.');
116        return;
117    }
118
119    for (let i = 0; i < numRows; i++) {
120        for (let j = 0; j < numCols; j++) {
121            const idx = i * numCols + j;
122
123            const top = (100 / numRows) * i + '%';
124            const bottom = (100 / numRows) * (i + 1) + '%';
125            const left = (100 / numCols) * j + '%';
126            const right = (100 / numCols) * (j + 1) + '%';
127
128            const clipPathValue = `polygon(${left} ${top}, ${right} ${top}, ${right} ${bottom}, ${left} ${bottom})`;
129
130            clipInnerElements[idx].style.clipPath = clipPathValue;
131        }
132    }
133}
134
135// Exporting utility functions for use in other modules.
136export {
137    preloadImages,
138    lerp,
139    distance,
140    getPointerPos,
141    getMouseDistance,
142    getNewPosition,
143    setClipPath
144};