You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.2 KiB
44 lines
1.2 KiB
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;
|
|
|