87 lines
2 KiB
JavaScript
87 lines
2 KiB
JavaScript
// 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();
|
|
}
|