2021-02-16 Points Highlighted Within Radius

Own implementation

by Ttt Yyy

HTML

<div id='container'>
<div>
 <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
</div>
<div>
 <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
</div>
<div>
 <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
  <span class='point'></span>
</div>
</div>

CSS

#container {
  /* display: flex; */
  width: 100%;
}

.point {
  display: inline-block;
  border: 1px solid black;
  border-radius: 50%;
  height: 12px;
  width: 12px;
}

.highlight {
  background-color: yellow;
}

#radius {
  cursor: pointer;
  border: 1px solid black;
  width: 100px;
  height: 100px;
  position: absolute;
  border-radius: 100px;
}

JavaScript

const radius = document.createElement('div')
radius.id = 'radius';

document.body.appendChild(radius);

// define offset as half the width of div; puts mouse in center
const offset = radius.offsetWidth / 2;

function moveRadius(x, y) {
  radius.style.left = `${x - offset}px`;
  radius.style.top = `${y - offset}px`;
}

const points = document.getElementsByClassName('point');

document.addEventListener('mousemove', function(event) {
  moveRadius(event.pageX, event.pageY)
}, false);

document.addEventListener('click', function(event) {
  ([...points]).forEach(point => {
     if (isNear(point, 50, event)) {
        point.classList.add('highlight')
      } else {
        point.classList.remove('highlight')
      }
  })
})

function isNear(point, distance, event) {
/*   var left = $element.offset().left - distance,
    top = $element.offset().top - distance,
    right = left + $element.width() + (2 * distance),
    bottom = top + $element.height() + (2 * distance), */
    const left = point.offsetLeft - distance;
    const right = left + point.offsetWidth + (2*distance);
    const top = point.offsetTop - distance;
    const bottom = top + point.offsetHeight + (2*distance);
    let x = event.pageX;
    let y = event.pageY;
/*     console.log('left', left)
    console.log('right', right)
    console.log('top', top)
    console.log('bottom', bottom) */

  return (x > left && x < right && y > top && y < bottom);
}