https://ysicing.me/static/cactus/js/main.js?v=2024022221

1function ready(fn) {
2    if (document.readyState != 'loading') {
3        fn();
4    } else {
5        document.addEventListener('DOMContentLoaded', fn);
6    }
7}
8
9function scrollToTop(el) {
10    window.scrollTo(0, 0);
11}
12
13function toggle(sel) {
14    if (document.querySelector(sel).style.display) {
15        document.querySelector(sel).style.display = ''
16    } else { document.querySelector(sel).style.display = 'none' }
17}
18
19function randomColor() {
20    const color = '#' + Math.floor(Math.random() * 16777215).toString(16)
21    const m = color.match(/^#([0-9a-f]{2})[0-9a-f]{6}$/i)
22    if (m && parseInt(m[1], 16) / 255 == 0) {
23        return randomColor()
24    }
25    return color
26}
27
28function matches(el, selector) {
29    return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
30};
31
32ready(function () {
33    /**
34     * 标签云
35     */
36    const tagsCloud = document.querySelectorAll("#tags>a");
37    if (tagsCloud.length > 0) {
38        for (let i = 0; i < tagsCloud.length; i++) {
39            while (!tagsCloud[i].style.backgroundColor) {
40                tagsCloud[i].style.backgroundColor = randomColor();
41            }
42        }
43    }
44
45    /**
46     * video height
47     */
48    document.querySelectorAll('.iframe__video').forEach(v => {
49        v.setAttribute('height', v.clientWidth * 9 / 16)
50    })
51
52    /**
53     * Shows the responsive navigation menu on mobile.
54     */
55    const mobileMenu = document.querySelector(".header nav ul .icon, #header > #nav > ul > .icon");
56    if (mobileMenu) {
57        mobileMenu.addEventListener('click', function (e) {
58            const navUl = document.querySelector(".header nav ul") || document.querySelector("#header > #nav > ul");
59            if (navUl) navUl.classList.toggle("responsive");
60        });
61    }
62
63    /**
64     * Controls the different versions of  the menu in blog post articles 
65     * for Desktop, tablet and mobile.
66     */
67    if (document.querySelectorAll(".post").length) {
68        var menu = document.querySelector("#menu");
69        var nav = document.querySelector("#menu > #nav");
70        var menuIcon = document.querySelector("#menu-icon, #menu-icon-tablet");
71
72        if (menu && menuIcon) {
73        const screenWidth = parseFloat(getComputedStyle(document.documentElement, null).width.replace("px", ""));
74        if (screenWidth >= 1440) {
75            menu.style.visibility = "visible";
76            menuIcon.classList.add("active");
77        }
78
79        /**
80         * Display the menu if the menu icon is clicked.
81         */
82        menuIcon.addEventListener('click', function () {
83            if (menu.style.visibility === "hidden") {
84                menu.style.visibility = "visible";
85                menuIcon.classList.add("active");
86            } else {
87                menu.style.visibility = "hidden";
88                menuIcon.classList.remove("active");
89            }
90            return false;
91        });
92
93        /**
94         * Add a scroll listener to the menu to hide/show the navigation links.
95         */
96        if (document.querySelectorAll("#menu").length) {
97            window.onscroll = function () {
98                const rect = menu.getBoundingClientRect();
99                const topDistance = rect.top + document.body.scrollTop;
100
101                // hide only the navigation links on desktop
102                if (!matches(nav, ":visible") && topDistance < 50) {
103                    nav.style.display = '';
104                } else if (matches(nav, ":visible") && topDistance > 100) {
105                    nav.style.display = 'none';
106                }
107
108                // on tablet, hide the navigation icon as well and show a "scroll to top
109                // icon" instead
110                const menuIconVisible = matches(document.querySelector("#menu-icon"), ":visible");
111                if (!menuIconVisible && topDistance < 50) {
112                    document.querySelector("#menu-icon-tablet").style.display = '';
113                    document.querySelector("#top-icon-tablet").style.display = 'none';
114                } else if (!menuIconVisible && topDistance > 100) {
115                    document.querySelector("#top-icon-tablet").style.display = '';
116                    document.querySelector("#menu-icon-tablet").style.display = 'none';
117                }
118            };
119        }
120
121        /**
122         * Show mobile navigation menu after scrolling upwards,
123         * hide it again after scrolling downwards.
124         */
125        if (document.querySelectorAll("#footer-post").length) {
126            var lastScrollTop = 0;
127            window.onscroll = function () {
128                var topDistance = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
129
130                if (topDistance > lastScrollTop) {
131                    // downscroll -> show menu
132                    document.querySelector("#footer-post").style.display = 'none';
133                } else {
134                    // upscroll -> hide menu
135                    document.querySelector("#footer-post").style.display = '';
136                }
137                lastScrollTop = topDistance;
138
139                // close all submenu"s on scroll
140                document.querySelector("#nav-footer").style.display = 'none';
141                document.querySelector("#toc-footer").style.display = 'none';
142                document.querySelector("#share-footer").style.display = 'none';
143
144                // show a "navigation" icon when close to the top of the page, 
145                // otherwise show a "scroll to the top" icon
146                if (topDistance < 50) {
147                    document.querySelector("#actions-footer > #top").style.display = 'none';
148                } else if (topDistance > 100) {
149                    document.querySelector("#actions-footer > #top").style.display = '';
150                }
151            };
152        }
153        }
154    }
155})