https://website-cms-preprod.fly.dev/modules/App/assets/vendor/kiss/js/utils.js

1
2
3export function debounce(func, wait, immediate) {
4
5    let timeout;
6
7    return function () {
8        let context = this, args = arguments;
9        let later = () => {
10            timeout = null;
11            if (!immediate) func.apply(context, args);
12        };
13        let callNow = immediate && !timeout;
14        clearTimeout(timeout);
15        timeout = setTimeout(later, wait);
16        if (callNow) func.apply(context, args);
17    };
18};
19
20export function isInViewport(element, partly = false) {
21
22    let rect = element.getBoundingClientRect();
23
24    // If partly is false, check if the element is fully in the viewport
25    if (partly === false) {
26        return (
27            rect.top >= 0 &&
28            rect.left >= 0 &&
29            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
30            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
31        );
32    }
33
34    // Calculate the visible percentage of the element
35    let visibleHeight = Math.min(rect.bottom, window.innerHeight || document.documentElement.clientHeight) -
36        Math.max(rect.top, 0);
37    let visibleWidth = Math.min(rect.right, window.innerWidth || document.documentElement.clientWidth) -
38        Math.max(rect.left, 0);
39
40    // Ensure that the dimensions are not negative
41    visibleHeight = Math.max(visibleHeight, 0);
42    visibleWidth = Math.max(visibleWidth, 0);
43
44    // Calculate the percentage of the element that is visible
45    let visiblePercentage = (visibleHeight * visibleWidth) / (rect.height * rect.width) * 100;
46
47    // If partly is between 0 and 100, check if the visible percentage of the element is >= partly
48    return (partly > 0 && partly <= 100) && visiblePercentage >= partly;
49}
50
51export function isElementInView(element, container = null) {
52    // Find the closest scrollable parent if no container is specified
53    if (!container) {
54        container = document.body;
55    }
56
57    // If we still don't have a container, use the viewport
58    if (!container) {
59        const rect = element.getBoundingClientRect();
60        return (
61            rect.top >= 0 &&
62            rect.left >= 0 &&
63            rect.bottom <= window.innerHeight &&
64            rect.right <= window.innerWidth
65        );
66    }
67
68    // Regular container check
69    const containerRect = container.getBoundingClientRect();
70    const containerTop = container.scrollTop;
71    const containerBottom = containerTop + container.clientHeight;
72
73    const elementRect = element.getBoundingClientRect();
74    const elementTop = elementRect.top - containerRect.top + container.scrollTop;
75    const elementBottom = elementTop + element.clientHeight;
76
77    return (
78        elementBottom > containerTop &&
79        elementTop < containerBottom
80    );
81}
82
83export function isElementOnTop(element) {
84    const rect = element.getBoundingClientRect();
85    let topElement = document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2);
86    while (topElement && topElement.parentElement) {
87        if (topElement === element) {
88            return true;
89        }
90        topElement = topElement.parentElement;
91    }
92    return false;
93}
94
95export function setHighestZindex(element, max = 19998) {
96
97    let highestZindex = parseInt(getComputedStyle(element).zIndex) || 0,
98        offsetParent = element.offsetParent || document.body,
99        zIndex;
100
101    Array.from(offsetParent.children).forEach((node) => {
102        zIndex = parseInt(getComputedStyle(node).zIndex) || 0;
103
104        if (max > 0 && zIndex > max) {
105            return;
106        }
107
108        if (zIndex > highestZindex) highestZindex = zIndex;
109    });
110
111    if (max > 0 && highestZindex >= max) {
112        highestZindex = max;
113    }
114
115    element.style.zIndex = highestZindex + 1;
116}
117
118
119export default {
120    debounce,
121    isInViewport,
122    isElementInView,
123    isElementOnTop,
124    setHighestZindex,
125}