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