homepage/_assets/js/lens.js

// OK so the next thing to do is make it so it's blurry when the screen is too
// big or too small, and thne prompt someone to make their screen bigger or smaller
// to be a lens and then you have to move the window around to be able to see the different
// links on the page

const FOCUS_SIZE = 400;

function _init(){
  let root = document.querySelector(':root');
  let lens = document.getElementsByClassName('lens')[0];
  let filter = document.getElementById('filter');
  let hid_hint = false;

  if (!lens){
    console.log('not doing lens')
    return
  }

  // let FOCUS_SIZE = root.style.getPropertyValue('--lens-size')

  root.style.setProperty(
      '--screen-width',
      `${window.screen.availWidth}px`
  );
  root.style.setProperty(
      '--screen-height',
      `${window.screen.availHeight}px`
  );
  function set_position(){
    lens.style.transform = `translate(-${window.screenX}px, -${window.screenY}px)`
    setTimeout(set_position, 10);
  }

  function get_blur(){
    return Math.max(
        Math.sqrt(
            (
                Math.abs(window.innerHeight-FOCUS_SIZE) +
                Math.abs(window.innerWidth-FOCUS_SIZE)
            ) / 4)-5,
        0)
  }

  function set_blur(){
    let blur_radius = get_blur()
    filter.style.setProperty(
        '--blur-radius',
        `${blur_radius}px`
    )
    setTimeout(set_blur, 50);
  }

  function show_hint(){
    if (get_blur() > 3) {
      let hint = document.getElementById('hint');
      hint.classList.remove('hidden')

      setTimeout(check_hint, 2000);
    }
  }

  function check_hint(){
    if (get_blur() < 3){
      let hint = document.getElementById('hint');
      hint.classList.add('rehidden');
      hid_hint = true;

    }
    if (hid_hint === false){
      setTimeout(check_hint, 100);
    }
  }

  set_position();
  set_blur();
  setTimeout(show_hint, 2000);
  // setTimeout(set_size,100);
  // set_size()
}

export function init(){

  // document.addEventListener('load', () => {
  //   _init();
  // })
  _init();
}