1window.addEventListener("load", function () {
2
3    let inOutOnHover = function (event) {
4        const element = event.currentTarget;
5        let dataHoverClass = element.getAttribute("data-hover-class");
6        let classes = dataHoverClass.split(' ');
7        for(let classValue of classes) {
8            if (element.classList.contains(classValue)) {
9                element.classList.remove(classValue);
10            } else {
11                element.classList.add(classValue);
12            }
13        }
14    };
15
16    /**
17     * Bind hover class to a toggle element
18     * @param event
19     */
20    document.querySelectorAll('[data-hover-class]').forEach(dataHoverElement => {
21        dataHoverElement.addEventListener("mouseenter",inOutOnHover);
22        dataHoverElement.addEventListener("mouseleave",inOutOnHover);
23    });
24
25
26    /**
27     * Add binding when node are added
28     * @type {MutationObserver}
29     */
30    const observer = new MutationObserver(function (mutationList) {
31        // noinspection JSUnfilteredForInLoop
32        mutationList.forEach((mutation) => {
33
34            for (let index in mutation.addedNodes) {
35                let node = mutation.addedNodes[index];
36                if (node instanceof HTMLElement) {
37                    if ("hoverClass" in node.dataset) {
38                        node.addEventListener("mouseenter",inOutOnHover);
39                        node.addEventListener("mouseleave",inOutOnHover);
40                    }
41                }
42
43            }
44
45        });
46    });
47    observer.observe(document, {childList: true, subtree: true});
48
49});
50
51
52
53
54