https://xjo.ch/js/common.js

1window.$claudia = {
2    throttle: function (func, time) {
3        var wait = false
4        return function () {
5            if (wait) return
6            wait = true
7
8            setTimeout(function () {
9                func()
10                wait = false
11            }, time || 100)
12        }
13    },
14    fadeInImage: function(imgs, imageLoadedCallback) {
15        var images = imgs || document.querySelectorAll('.js-img-fadeIn')
16
17        function loaded(event) {
18            var image = event.currentTarget
19
20            image.ontransitionend = function () {
21                image.ontransitionend = null
22                image.style.transition = null
23            }
24            image.style.transition = 'opacity 320ms'
25            image.style.opacity = 1
26
27            if (image.parentElement && image.parentElement.classList.contains('skeleton')) {
28                image.parentElement.classList.remove('skeleton')
29            }
30            imageLoadedCallback && imageLoadedCallback(image)
31        }
32
33        images.forEach(function (img) {
34            if (img.complete) {
35                return loaded({ currentTarget: img })
36            }
37
38            img.addEventListener('load', loaded)
39        })
40    },
41    blurBackdropImg: function(image) {
42        if (!image.dataset.backdrop) return
43
44        var parent = image.parentElement //TODO: Not finish yes, must be a pure function
45        var parentWidth = Math.round(parent.getBoundingClientRect().width)
46        var childImgWidth = Math.round(image.getBoundingClientRect().width)
47
48        var isCovered = parentWidth === childImgWidth
49        var blurImg = parent.previousElementSibling //TODO: Not finish yes, must be a pure function
50
51        isCovered ? blurImg.classList.add('is-hidden') : blurImg.classList.remove('is-hidden')
52    },
53    getSystemTheme(callback) {
54        var media = window.matchMedia('(prefers-color-scheme: dark)')
55        media.addEventListener('change', function (e){
56            callback && callback(e.matches ? "dark" : "light")
57        })
58
59        callback && callback(media.matches ? 'dark' : 'light')
60    }
61}