snapdrop

A Progressive Web App for local file sharing
git clone http://git.hanabi.in/repos/snapdrop.git
Log | Files | Refs | README | LICENSE

commit c6fb8899ef63d307e5524e7515a57474d9203086
parent b40c5f2053cf0b6a8f9552448a84d5d5d450a927
Author: RobinLinus <robinlinus@users.noreply.github.com>
Date:   Sun, 20 Dec 2020 22:08:16 +0100

Background animation: offset for large screens / cleanup

Diffstat:
Mclient/scripts/ui.js | 27+++++++++++----------------
1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/client/scripts/ui.js b/client/scripts/ui.js @@ -546,29 +546,24 @@ window.addEventListener('beforeinstallprompt', e => { // Background Animation Events.on('load', () => { - var requestAnimFrame = (function() { - return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || - function(callback) { - window.setTimeout(callback, 1000 / 60); - }; - })(); - var c = document.createElement('canvas'); + let c = document.createElement('canvas'); document.body.appendChild(c); - var style = c.style; + let style = c.style; style.width = '100%'; style.position = 'absolute'; style.zIndex = -1; style.top = 0; style.left = 0; - var ctx = c.getContext('2d'); - var x0, y0, w, h, dw; + let ctx = c.getContext('2d'); + let x0, y0, w, h, dw; function init() { w = window.innerWidth; h = window.innerHeight; c.width = w; c.height = h; - var offset = h > 380 ? 100 : 65; + let offset = h > 380 ? 100 : 65; + offset = h > 800 ? 116 : h; x0 = w / 2; y0 = h - offset; dw = Math.max(w, h, 1000) / 13; @@ -578,28 +573,28 @@ Events.on('load', () => { function drawCicrle(radius) { ctx.beginPath(); - var color = Math.round(255 * (1 - radius / Math.max(w, h))); + let color = Math.round(255 * (1 - radius / Math.max(w, h))); ctx.strokeStyle = 'rgba(' + color + ',' + color + ',' + color + ',0.1)'; ctx.arc(x0, y0, radius, 0, 2 * Math.PI); ctx.stroke(); ctx.lineWidth = 2; } - var step = 0; + let step = 0; function drawCircles() { ctx.clearRect(0, 0, w, h); - for (var i = 0; i < 8; i++) { + for (let i = 0; i < 8; i++) { drawCicrle(dw * i + step % dw); } step += 1; } - var loading = true; + let loading = true; function animate() { if (loading || step % dw < dw - 5) { - requestAnimFrame(function() { + requestAnimationFrame(function() { drawCircles(); animate(); });