@trap_stevo/legendarybuilderproreact-ui/dist/HUDComponents/HUDScrollerObserver.js

The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton

/*

     Created by Hassan Steven Compton.
     
     March 7, 2024.

*/
function HUDScrollerObserver(document) {
  var hudScroller = document.querySelector('.hud-scroller');
  if (hudScroller === null || hudScroller === undefined) {
    return function () {};
  }
  var verticalOrientation = false;
  if (hudScroller.scrollHeight > hudScroller.clientHeight) {
    verticalOrientation = true;
  }
  var mouseDown = false;
  var hovered = false;
  var handleHUDScroll = function handleHUDScroll() {
    var scrollPosition = verticalOrientation ? hudScroller.scrollTop : hudScroller.scrollLeft;
    var maxScroll = verticalOrientation ? hudScroller.scrollHeight - hudScroller.clientHeight : hudScroller.scrollWidth - hudScroller.clientWidth;
    var atScrollEnd = scrollPosition === maxScroll;
    var red = [227, 14, 14];
    var black = [0, 0, 0];
    var interpolatedColor = interpolateColor(hovered && mouseDown ? [255, 31, 34] : red, hovered && mouseDown ? [69, 69, 69] : black, scrollPosition / maxScroll);
    var rgbColor = "rgb(".concat(interpolatedColor.join(','), ")");
    hudScroller.style.setProperty('--scrollbar-thumb-color', rgbColor);
    if (atScrollEnd) {
      hudScroller.classList.add('end-scroll');
      return;
    }
    hudScroller.classList.remove('end-scroll');
    return;
  };
  var handleMouseMove = function handleMouseMove(event) {
    var _hudScroller$getBound = hudScroller.getBoundingClientRect(),
      top = _hudScroller$getBound.top,
      bottom = _hudScroller$getBound.bottom,
      left = _hudScroller$getBound.left,
      right = _hudScroller$getBound.right;
    hovered = verticalOrientation && event.clientY >= top && event.clientY <= bottom || !verticalOrientation && event.clientX >= left && event.clientX <= right;
    handleHUDScroll();
    return;
  };
  var handleMouseLeave = function handleMouseLeave() {
    hudScroller.classList.remove('thumb-hovered');
    return;
  };
  var handleMouseEnter = function handleMouseEnter() {
    hudScroller.classList.add('thumb-hovered');
    return;
  };
  var handleMouseDown = function handleMouseDown() {
    mouseDown = true;
    handleHUDScroll();
    return;
  };
  var handleMouseUp = function handleMouseUp() {
    mouseDown = false;
    handleHUDScroll();
    return;
  };
  hudScroller.addEventListener('scroll', handleHUDScroll);
  hudScroller.addEventListener('mouseenter', handleMouseEnter);
  hudScroller.addEventListener('mouseleave', handleMouseLeave);
  hudScroller.addEventListener('mousemove', handleMouseMove);
  hudScroller.addEventListener('mousedown', handleMouseDown);
  hudScroller.addEventListener('mouseup', handleMouseUp);
  return function () {
    hudScroller.removeEventListener('scroll', handleHUDScroll);
    hudScroller.removeEventListener('mouseenter', handleMouseEnter);
    hudScroller.removeEventListener('mouseleave', handleMouseLeave);
    hudScroller.removeEventListener('mousemove', handleMouseMove);
    hudScroller.removeEventListener('mousedown', handleMouseDown);
    hudScroller.removeEventListener('mouseup', handleMouseUp);
  };
}
function interpolateColor(color1, color2, factor) {
  return color1.map(function (channel, index) {
    var blendedChannel = Math.round(channel + factor * (color2[index] - channel));
    return Math.min(255, Math.max(0, blendedChannel));
  });
}
export default HUDScrollerObserver;