Russell2259
71 lines
2.8 KiB
JavaScript
71 lines
2.8 KiB
JavaScript
import { loadProxyWorker } from './utils.js';
|
|
import PolarisError from './error.js';
|
|
|
|
const tiltEffectSettings = {
|
|
max: 8,
|
|
perspective: 1000,
|
|
scale: 1.05,
|
|
speed: 800,
|
|
easing: 'cubic-bezier(.03,.98,.52,.99)'
|
|
};
|
|
|
|
const load = () => {
|
|
fetch('/assets/JSON/apps.json').then(res => res.json()).then(apps => {
|
|
apps.forEach(app => {
|
|
const el = document.createElement('div');
|
|
el.classList = 'app';
|
|
el.innerHTML = `<img src='${app.image}'><h3>${app.name}</h3>`;
|
|
document.querySelector('.apps').appendChild(el);
|
|
|
|
el.addEventListener('click', async () => {
|
|
await loadProxyWorker('uv');
|
|
|
|
localStorage.setItem('frameData', JSON.stringify({
|
|
type: 'app',
|
|
app
|
|
}));
|
|
location.href = '/view';
|
|
});
|
|
|
|
el.addEventListener('mouseenter', appMouseEnter);
|
|
el.addEventListener('mousemove', appMouseMove);
|
|
el.addEventListener('mouseleave', appMouseLeave);
|
|
});
|
|
}).catch(e => new PolarisError('Failed to load Apps'));
|
|
};
|
|
|
|
function appMouseEnter(event) {
|
|
setTransition(event);
|
|
}
|
|
|
|
function appMouseMove(event) {
|
|
const app = event.currentTarget;
|
|
const appWidth = app.offsetWidth;
|
|
const appHeight = app.offsetHeight;
|
|
const centerX = app.offsetLeft + appWidth / 2;
|
|
const centerY = app.offsetTop + appHeight / 2;
|
|
const mouseX = event.clientX - centerX;
|
|
const mouseY = event.clientY - centerY;
|
|
const rotateXUncapped = (+1) * tiltEffectSettings.max * mouseY / (appHeight / 2);
|
|
const rotateYUncapped = (-1) * tiltEffectSettings.max * mouseX / (appWidth / 2);
|
|
const rotateX = rotateXUncapped < -tiltEffectSettings.max ? -tiltEffectSettings.max : (rotateXUncapped > tiltEffectSettings.max ? tiltEffectSettings.max : rotateXUncapped);
|
|
const rotateY = rotateYUncapped < -tiltEffectSettings.max ? -tiltEffectSettings.max : (rotateYUncapped > tiltEffectSettings.max ? tiltEffectSettings.max : rotateYUncapped);
|
|
|
|
app.style.transform = `perspective(${tiltEffectSettings.perspective}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(${tiltEffectSettings.scale}, ${tiltEffectSettings.scale}, ${tiltEffectSettings.scale})`;
|
|
}
|
|
|
|
function appMouseLeave(event) {
|
|
event.currentTarget.style.transform = `perspective(${tiltEffectSettings.perspective}px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;
|
|
setTransition(event);
|
|
}
|
|
|
|
function setTransition(event) {
|
|
const app = event.currentTarget;
|
|
clearTimeout(app.transitionTimeoutId);
|
|
app.style.transition = `transform ${tiltEffectSettings.speed}ms ${tiltEffectSettings.easing}`;
|
|
app.transitionTimeoutId = setTimeout(() => app.style.transition = '', tiltEffectSettings.speed);
|
|
}
|
|
|
|
export default {
|
|
load
|
|
}; |