const container = document.querySelector('.particles'); const containerBounds = container.getBoundingClientRect(); const DOM = { container, containerBounds, getEventOffsetCoords: (evt, bounds) => { const { pageX, pageY } = evt; return { evtX: (pageX - bounds.left), evtY: (pageY - bounds.top) }; }, highlight: (evt) => { const { evtX, evtY } = DOM.getEventOffsetCoords(evt, DOM.containerBounds); const highlightDiv = document.createElement('div'); highlightDiv.className = 'highlight'; highlightDiv.style.left = `${evtX}px`; highlightDiv.style.top = `${evtY}px`; DOM.container.appendChild(highlightDiv); setTimeout(() => { DOM.container.removeChild(highlightDiv); }, 500); }, addClass: (node, str) => { node.className = node.className.split(' ').concat(str).join(' '); }, removeClass: (node, str) => { const arr = node.className.split(' '); const i = arr.indexOf(str); node.className = arr.slice(0, i).concat(arr.slice(i + 1)).join(' '); }, // calcBounds: () => { // DOM.containerBounds = container.getBoundingClientRect(); // }, }; export default DOM;