https://zeefdrukland.nl/templates/NOVA/js/app/helpers.js

1
2import './globals.js'
3
4export let isMobile = () => window.innerWidth < globals.breakpoints.lg
5export let isDesktop = () => !isMobile()
6export let hasTouch = () => 'ontouchstart' in window
7
8export const debounce = (fn, wait = 100) => {
9    let timeout
10    return (...args) => {
11        clearTimeout(timeout)
12        timeout = setTimeout(() => fn(...args), wait)
13    }
14}
15
16export const throttle = (fn, wait = 100) => {
17    let timeout
18    return (...args) => {
19        if(timeout)
20            return
21
22        fn(...args)
23        timeout = true
24        setTimeout(() => timeout = false, wait)
25    }
26}
27
28export const guid = () => {
29    const hex = (s, b) => {
30        return s + (b >>> 4   ).toString (16) + (b & 0b1111).toString (16)
31    }
32
33    let r = crypto.getRandomValues (new Uint8Array (16))
34
35    r[6] = r[6] >>> 4 | 0b01000000
36    r[8] = r[8] >>> 3 | 0b10000000
37
38    return	r.slice ( 0,  4).reduce (hex, '' ) +
39        r.slice ( 4,  6).reduce (hex, '-') +
40        r.slice ( 6,  8).reduce (hex, '-') +
41        r.slice ( 8, 10).reduce (hex, '-') +
42        r.slice (10, 16).reduce (hex, '-')
43}
44
45export const random = () => {
46    return Math.floor((1 + Math.random()) * 0x1000).toString(16).substring(1) + Math.floor((1 + Math.random()) * 0x1000).toString(16).substring(1)
47}
48
49export const onMobile = (fn) => {
50    return (...args) => {
51        if(isMobile()) fn(...args)
52    }
53}
54
55export const onDesktop = (fn) => {
56    return (...args) => {
57        if(!isMobile()) fn(...args)
58    }
59}
60
61export const hasScrollbar = (element = 'html') => {
62    let directions = []
63    let $element = $(element)
64
65    if($element.get(0).scrollHeight > $element.get(0).clientHeight)
66        directions.push('v')
67
68    if($element.get(0).scrollWidth > $element.get(0).clientWidth)
69        directions.push('h')
70
71    return directions.length > 0 ? directions : false
72}
73
74export const isScrollbarVisible = (element = 'html') => {
75    let directions = []
76    let $element = $(element)
77    let scrollbars = hasScrollbar(element)
78
79    if(scrollbars === false)
80        return false
81
82    if($.inArray('v', scrollbars) >= 0) {
83        if($element.get(0) === document.documentElement) {
84            if(window.innerWidth > document.documentElement.clientWidth)
85                directions.push('v')
86        } else {
87            if($element.get(0).offsetWidth > $element.get(0).clientWidth)
88                directions.push('v')
89        }
90    }
91
92    if($.inArray('h', scrollbars) >= 0) {
93        if($element.get(0) === document.documentElement) {
94            if(window.innerHeight > document.documentElement.clientHeight)
95                directions.push('h')
96        } else {
97            if($element.get(0).offsetHeight > $element.get(0).clientHeight)
98                directions.push('h')
99        }
100    }
101
102    return directions.length > 0 ? directions : false
103}
104
105export const lockScreen = () => {
106    $('html').addClass('overflow-hidden')
107}
108
109export const unlockScreen = () => {
110    $('html').removeClass('overflow-hidden')
111}
112
113export const backdrop = (animate = true) => {
114    let $backdrop = $('<div />').addClass('modal-backdrop')
115
116    if(animate)
117        $backdrop.addClass('fade')
118
119    return $backdrop
120}