mirror of
https://github.com/schlagmichdoch/PairDrop.git
synced 2025-04-20 15:06:15 -04:00
566 lines
No EOL
19 KiB
JavaScript
566 lines
No EOL
19 KiB
JavaScript
// Selector shortcuts
|
|
const $ = query => document.getElementById(query);
|
|
const $$ = query => document.querySelector(query);
|
|
|
|
// Event listener shortcuts
|
|
class Events {
|
|
static fire(type, detail = {}) {
|
|
window.dispatchEvent(new CustomEvent(type, { detail: detail }));
|
|
}
|
|
|
|
static on(type, callback, options) {
|
|
return window.addEventListener(type, callback, options);
|
|
}
|
|
|
|
static off(type, callback, options) {
|
|
return window.removeEventListener(type, callback, options);
|
|
}
|
|
}
|
|
|
|
// UIs needed on start
|
|
class ThemeUI {
|
|
|
|
constructor() {
|
|
this.prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
this.prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)').matches;
|
|
|
|
this.$themeAutoBtn = document.getElementById('theme-auto');
|
|
this.$themeLightBtn = document.getElementById('theme-light');
|
|
this.$themeDarkBtn = document.getElementById('theme-dark');
|
|
|
|
let currentTheme = this.getCurrentTheme();
|
|
if (currentTheme === 'dark') {
|
|
this.setModeToDark();
|
|
} else if (currentTheme === 'light') {
|
|
this.setModeToLight();
|
|
}
|
|
|
|
this.$themeAutoBtn.addEventListener('click', _ => this.onClickAuto());
|
|
this.$themeLightBtn.addEventListener('click', _ => this.onClickLight());
|
|
this.$themeDarkBtn.addEventListener('click', _ => this.onClickDark());
|
|
}
|
|
|
|
getCurrentTheme() {
|
|
return localStorage.getItem('theme');
|
|
}
|
|
|
|
setCurrentTheme(theme) {
|
|
localStorage.setItem('theme', theme);
|
|
}
|
|
|
|
onClickAuto() {
|
|
if (this.getCurrentTheme()) {
|
|
this.setModeToAuto();
|
|
} else {
|
|
this.setModeToDark();
|
|
}
|
|
}
|
|
|
|
onClickLight() {
|
|
if (this.getCurrentTheme() !== 'light') {
|
|
this.setModeToLight();
|
|
} else {
|
|
this.setModeToAuto();
|
|
}
|
|
}
|
|
|
|
onClickDark() {
|
|
if (this.getCurrentTheme() !== 'dark') {
|
|
this.setModeToDark();
|
|
} else {
|
|
this.setModeToLight();
|
|
}
|
|
}
|
|
|
|
setModeToDark() {
|
|
document.body.classList.remove('light-theme');
|
|
document.body.classList.add('dark-theme');
|
|
|
|
this.setCurrentTheme('dark');
|
|
|
|
this.$themeAutoBtn.classList.remove("selected");
|
|
this.$themeLightBtn.classList.remove("selected");
|
|
this.$themeDarkBtn.classList.add("selected");
|
|
}
|
|
|
|
setModeToLight() {
|
|
document.body.classList.remove('dark-theme');
|
|
document.body.classList.add('light-theme');
|
|
|
|
this.setCurrentTheme('light');
|
|
|
|
this.$themeAutoBtn.classList.remove("selected");
|
|
this.$themeLightBtn.classList.add("selected");
|
|
this.$themeDarkBtn.classList.remove("selected");
|
|
}
|
|
|
|
setModeToAuto() {
|
|
document.body.classList.remove('dark-theme');
|
|
document.body.classList.remove('light-theme');
|
|
if (this.prefersDarkTheme) {
|
|
document.body.classList.add('dark-theme');
|
|
}
|
|
else if (this.prefersLightTheme) {
|
|
document.body.classList.add('light-theme');
|
|
}
|
|
localStorage.removeItem('theme');
|
|
|
|
this.$themeAutoBtn.classList.add("selected");
|
|
this.$themeLightBtn.classList.remove("selected");
|
|
this.$themeDarkBtn.classList.remove("selected");
|
|
}
|
|
}
|
|
|
|
class HeaderUI {
|
|
|
|
constructor() {
|
|
this.$header = $$('header');
|
|
this.$expandBtn = $('expand');
|
|
Events.on("resize", _ => this.evaluateOverflowing());
|
|
this.$expandBtn.addEventListener('click', _ => this.onExpandBtnClick());
|
|
}
|
|
|
|
async fadeIn() {
|
|
this.$header.classList.remove('opacity-0');
|
|
}
|
|
|
|
async evaluateOverflowing() {
|
|
// remove bracket icon before evaluating
|
|
this.$expandBtn.setAttribute('hidden', true);
|
|
// reset bracket icon rotation and header overflow
|
|
this.$expandBtn.classList.add('flipped');
|
|
this.$header.classList.remove('overflow-expanded');
|
|
|
|
|
|
const rtlLocale = Localization.currentLocaleIsRtl();
|
|
let icon;
|
|
const $headerIconsShown = document.querySelectorAll('body > header:first-of-type > *:not([hidden])');
|
|
|
|
for (let i= 1; i < $headerIconsShown.length; i++) {
|
|
let isFurtherLeftThanLastIcon = $headerIconsShown[i].offsetLeft >= $headerIconsShown[i-1].offsetLeft;
|
|
let isFurtherRightThanLastIcon = $headerIconsShown[i].offsetLeft <= $headerIconsShown[i-1].offsetLeft;
|
|
if ((!rtlLocale && isFurtherLeftThanLastIcon) || (rtlLocale && isFurtherRightThanLastIcon)) {
|
|
// we have found the first icon on second row. Use previous icon.
|
|
icon = $headerIconsShown[i-1];
|
|
break;
|
|
}
|
|
}
|
|
if (icon) {
|
|
// overflowing
|
|
// add overflowing-hidden class
|
|
this.$header.classList.add('overflow-hidden');
|
|
// add expand btn 2 before icon
|
|
this.$expandBtn.removeAttribute('hidden');
|
|
icon.before(this.$expandBtn);
|
|
}
|
|
else {
|
|
// no overflowing
|
|
// remove overflowing-hidden class
|
|
this.$header.classList.remove('overflow-hidden');
|
|
}
|
|
}
|
|
|
|
onExpandBtnClick() {
|
|
// toggle overflowing-hidden class and flip expand btn icon
|
|
if (this.$header.classList.contains('overflow-hidden')) {
|
|
this.$header.classList.remove('overflow-hidden');
|
|
this.$header.classList.add('overflow-expanded');
|
|
this.$expandBtn.classList.remove('flipped');
|
|
}
|
|
else {
|
|
this.$header.classList.add('overflow-hidden');
|
|
this.$header.classList.remove('overflow-expanded');
|
|
this.$expandBtn.classList.add('flipped');
|
|
}
|
|
Events.fire('header-changed');
|
|
}
|
|
}
|
|
|
|
class CenterUI {
|
|
|
|
constructor() {
|
|
this.$center = $$('#center');
|
|
this.$xNoPeers = $$('x-no-peers');
|
|
}
|
|
|
|
async fadeIn() {
|
|
this.$center.classList.remove('opacity-0');
|
|
|
|
// Prevent flickering on load
|
|
setTimeout(() => {
|
|
this.$xNoPeers.classList.remove('no-animation-on-load');
|
|
}, 600);
|
|
}
|
|
}
|
|
|
|
class FooterUI {
|
|
|
|
constructor() {
|
|
this.$footer = $$('footer');
|
|
this.$displayName = $('display-name');
|
|
this.$discoveryWrapper = $$('footer .discovery-wrapper');
|
|
|
|
this.$displayName.addEventListener('keydown', e => this._onKeyDownDisplayName(e));
|
|
this.$displayName.addEventListener('focus', e => this._onFocusDisplayName(e));
|
|
this.$displayName.addEventListener('blur', e => this._onBlurDisplayName(e));
|
|
|
|
Events.on('display-name', e => this._onDisplayName(e.detail.displayName));
|
|
Events.on('self-display-name-changed', e => this._insertDisplayName(e.detail));
|
|
Events.on('evaluate-footer-badges', _ => this._evaluateFooterBadges());
|
|
}
|
|
|
|
async showLoading() {
|
|
this.$displayName.setAttribute('placeholder', this.$displayName.dataset.placeholder);
|
|
}
|
|
|
|
async fadeIn() {
|
|
this.$footer.classList.remove('opacity-0');
|
|
}
|
|
|
|
async _evaluateFooterBadges() {
|
|
if (this.$discoveryWrapper.querySelectorAll('div:last-of-type > span[hidden]').length < 2) {
|
|
this.$discoveryWrapper.classList.remove('row');
|
|
this.$discoveryWrapper.classList.add('column');
|
|
}
|
|
else {
|
|
this.$discoveryWrapper.classList.remove('column');
|
|
this.$discoveryWrapper.classList.add('row');
|
|
}
|
|
Events.fire('redraw-canvas');
|
|
}
|
|
|
|
async _loadSavedDisplayName() {
|
|
const displayNameSaved = await this._getSavedDisplayName()
|
|
|
|
if (!displayNameSaved) return;
|
|
|
|
console.log("Retrieved edited display name:", displayNameSaved)
|
|
Events.fire('self-display-name-changed', displayNameSaved);
|
|
}
|
|
|
|
async _onDisplayName(displayNameServer){
|
|
// load saved displayname first to prevent flickering
|
|
await this._loadSavedDisplayName();
|
|
|
|
// set original display name as placeholder
|
|
this.$displayName.setAttribute('placeholder', displayNameServer);
|
|
}
|
|
|
|
|
|
_insertDisplayName(displayName) {
|
|
this.$displayName.textContent = displayName;
|
|
}
|
|
|
|
_onKeyDownDisplayName(e) {
|
|
if (e.key === "Enter" || e.key === "Escape") {
|
|
e.preventDefault();
|
|
e.target.blur();
|
|
}
|
|
}
|
|
|
|
_onFocusDisplayName(e) {
|
|
if (!e.target.innerText) {
|
|
// Fix z-position of cursor when div is completely empty (Firefox only)
|
|
e.target.innerText = "\n";
|
|
|
|
// On Chromium based browsers the cursor position is lost when adding sth. to the focused node. This adds it back.
|
|
let sel = window.getSelection();
|
|
sel.collapse(e.target.lastChild);
|
|
}
|
|
}
|
|
|
|
async _onBlurDisplayName(e) {
|
|
// fix for Firefox inserting a linebreak into div on edit which prevents the placeholder from showing automatically when it is empty
|
|
if (/^(\n|\r|\r\n)$/.test(e.target.innerText)) {
|
|
e.target.innerText = '';
|
|
}
|
|
|
|
// Remove selection from text
|
|
window.getSelection().removeAllRanges();
|
|
|
|
await this._saveDisplayName(e.target.innerText)
|
|
}
|
|
|
|
async _saveDisplayName(newDisplayName) {
|
|
newDisplayName = newDisplayName.replace(/(\n|\r|\r\n)/, '')
|
|
const savedDisplayName = await this._getSavedDisplayName();
|
|
if (newDisplayName === savedDisplayName) return;
|
|
|
|
if (newDisplayName) {
|
|
PersistentStorage.set('edited_display_name', newDisplayName)
|
|
.then(_ => {
|
|
Events.fire('notify-user', Localization.getTranslation("notifications.display-name-changed-permanently"));
|
|
})
|
|
.catch(_ => {
|
|
console.log("This browser does not support IndexedDB. Use localStorage instead.");
|
|
localStorage.setItem('edited_display_name', newDisplayName);
|
|
Events.fire('notify-user', Localization.getTranslation("notifications.display-name-changed-temporarily"));
|
|
})
|
|
.finally(() => {
|
|
Events.fire('self-display-name-changed', newDisplayName);
|
|
Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: newDisplayName});
|
|
});
|
|
}
|
|
else {
|
|
PersistentStorage.delete('edited_display_name')
|
|
.catch(_ => {
|
|
console.log("This browser does not support IndexedDB. Use localStorage instead.")
|
|
localStorage.removeItem('edited_display_name');
|
|
})
|
|
.finally(() => {
|
|
Events.fire('notify-user', Localization.getTranslation("notifications.display-name-random-again"));
|
|
Events.fire('self-display-name-changed', '');
|
|
Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: ''});
|
|
});
|
|
}
|
|
}
|
|
|
|
_getSavedDisplayName() {
|
|
return new Promise((resolve) => {
|
|
PersistentStorage.get('edited_display_name')
|
|
.then(displayName => {
|
|
if (!displayName) displayName = "";
|
|
resolve(displayName);
|
|
})
|
|
.catch(_ => {
|
|
let displayName = localStorage.getItem('edited_display_name');
|
|
if (!displayName) displayName = "";
|
|
resolve(displayName);
|
|
})
|
|
});
|
|
}
|
|
}
|
|
|
|
class BackgroundCanvas {
|
|
constructor() {
|
|
this.$canvas = $$('canvas');
|
|
this.$footer = $$('footer');
|
|
|
|
this.initAnimation();
|
|
}
|
|
|
|
async fadeIn() {
|
|
this.$canvas.classList.remove('opacity-0');
|
|
}
|
|
|
|
initAnimation() {
|
|
this.baseColorNormal = '168 168 168';
|
|
this.baseColorShareMode = '168 168 255';
|
|
this.baseOpacityNormal = 0.4;
|
|
this.baseOpacityShareMode = 0.8;
|
|
this.speed = 0.5;
|
|
this.fps = 40;
|
|
|
|
// if browser supports OffscreenCanvas
|
|
// -> put canvas drawing into serviceworker to unblock main thread
|
|
// otherwise
|
|
// -> use main thread
|
|
let {init, startAnimation, switchAnimation, onShareModeChange} =
|
|
this.$canvas.transferControlToOffscreen
|
|
? this.initAnimationOffscreen()
|
|
: this.initAnimationOnscreen();
|
|
|
|
init();
|
|
startAnimation();
|
|
|
|
// redraw canvas
|
|
Events.on('resize', _ => init());
|
|
Events.on('redraw-canvas', _ => init());
|
|
Events.on('translation-loaded', _ => init());
|
|
|
|
// ShareMode
|
|
Events.on('share-mode-changed', e => onShareModeChange(e.detail.active));
|
|
|
|
// Start and stop animation
|
|
Events.on('background-animation', e => switchAnimation(e.detail.animate))
|
|
Events.on('offline', _ => switchAnimation(false));
|
|
Events.on('online', _ => switchAnimation(true));
|
|
}
|
|
|
|
initAnimationOnscreen() {
|
|
let $canvas = this.$canvas;
|
|
let $footer = this.$footer;
|
|
|
|
let baseColorNormal = this.baseColorNormal;
|
|
let baseColorShareMode = this.baseColorShareMode;
|
|
let baseOpacityNormal = this.baseOpacityNormal;
|
|
let baseOpacityShareMode = this.baseOpacityShareMode;
|
|
let speed = this.speed;
|
|
let fps = this.fps;
|
|
|
|
let c;
|
|
let cCtx;
|
|
|
|
let x0, y0, w, h, dw, offset;
|
|
|
|
let startTime;
|
|
let animate = true;
|
|
let currentFrame = 0;
|
|
let lastFrame;
|
|
let baseColor;
|
|
let baseOpacity;
|
|
|
|
function createCanvas() {
|
|
c = $canvas;
|
|
cCtx = c.getContext('2d');
|
|
|
|
lastFrame = fps / speed - 1;
|
|
baseColor = baseColorNormal;
|
|
baseOpacity = baseOpacityNormal;
|
|
}
|
|
|
|
function init() {
|
|
initCanvas($footer.offsetHeight, document.documentElement.clientWidth, document.documentElement.clientHeight);
|
|
}
|
|
|
|
function initCanvas(footerOffsetHeight, clientWidth, clientHeight) {
|
|
let oldW = w;
|
|
let oldH = h;
|
|
let oldOffset = offset;
|
|
w = clientWidth;
|
|
h = clientHeight;
|
|
offset = footerOffsetHeight - 28;
|
|
|
|
if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
|
|
|
|
c.width = w;
|
|
c.height = h;
|
|
x0 = w / 2;
|
|
y0 = h - offset;
|
|
dw = Math.round(Math.min(Math.max(w, h), 800) / 10);
|
|
|
|
drawFrame(currentFrame);
|
|
}
|
|
|
|
function startAnimation() {
|
|
startTime = Date.now();
|
|
animateBg();
|
|
}
|
|
|
|
function switchAnimation(state) {
|
|
if (!animate && state) {
|
|
// animation starts again. Set startTime to specific value to prevent frame jump
|
|
startTime = Date.now() - 1000 * currentFrame / fps;
|
|
}
|
|
animate = state;
|
|
requestAnimationFrame(animateBg);
|
|
}
|
|
|
|
function onShareModeChange(active) {
|
|
baseColor = active ? baseColorShareMode : baseColorNormal;
|
|
baseOpacity = active ? baseOpacityShareMode : baseOpacityNormal;
|
|
drawFrame(currentFrame);
|
|
}
|
|
|
|
function drawCircle(ctx, radius) {
|
|
ctx.lineWidth = 2;
|
|
|
|
let opacity = Math.max(0, baseOpacity * (1 - 1.2 * radius / Math.max(w, h)));
|
|
if (radius > dw * 7) {
|
|
opacity *= (8 * dw - radius) / dw
|
|
}
|
|
|
|
if (ctx.setStrokeColor) {
|
|
// older blink/webkit browsers do not understand opacity in strokeStyle. Use deprecated setStrokeColor
|
|
let baseColorRgb = baseColor.split(" ");
|
|
ctx.setStrokeColor(baseColorRgb[0], baseColorRgb[1], baseColorRgb[2], opacity);
|
|
}
|
|
else {
|
|
ctx.strokeStyle = `rgb(${baseColor} / ${opacity})`;
|
|
}
|
|
ctx.beginPath();
|
|
ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
|
|
ctx.stroke();
|
|
}
|
|
|
|
function drawCircles(ctx, frame) {
|
|
ctx.clearRect(0, 0, w, h);
|
|
for (let i = 7; i >= 0; i--) {
|
|
drawCircle(ctx, dw * i + speed * dw * frame / fps + 33);
|
|
}
|
|
}
|
|
|
|
function drawFrame(frame) {
|
|
cCtx.clearRect(0, 0, w, h);
|
|
drawCircles(cCtx, frame);
|
|
}
|
|
|
|
function animateBg() {
|
|
let now = Date.now();
|
|
|
|
if (!animate && currentFrame === lastFrame) {
|
|
// Animation stopped and cycle finished -> stop drawing frames
|
|
return;
|
|
}
|
|
|
|
let timeSinceLastFullCycle = (now - startTime) % (1000 / speed);
|
|
let nextFrame = Math.trunc(fps * timeSinceLastFullCycle / 1000);
|
|
|
|
// Only draw frame if it differs from current frame
|
|
if (nextFrame !== currentFrame) {
|
|
drawFrame(nextFrame);
|
|
currentFrame = nextFrame;
|
|
}
|
|
|
|
requestAnimationFrame(animateBg);
|
|
}
|
|
|
|
createCanvas();
|
|
|
|
return {init, startAnimation, switchAnimation, onShareModeChange};
|
|
}
|
|
|
|
initAnimationOffscreen() {
|
|
console.log("Use OffscreenCanvas to draw background animation.")
|
|
|
|
let baseColorNormal = this.baseColorNormal;
|
|
let baseColorShareMode = this.baseColorShareMode;
|
|
let baseOpacityNormal = this.baseOpacityNormal;
|
|
let baseOpacityShareMode = this.baseOpacityShareMode;
|
|
let speed = this.speed;
|
|
let fps = this.fps;
|
|
let $canvas = this.$canvas;
|
|
let $footer = this.$footer;
|
|
|
|
const offscreen = $canvas.transferControlToOffscreen();
|
|
const worker = new Worker("scripts/worker/canvas-worker.js");
|
|
|
|
function createCanvas() {
|
|
worker.postMessage({
|
|
type: "createCanvas",
|
|
canvas: offscreen,
|
|
baseColorNormal: baseColorNormal,
|
|
baseColorShareMode: baseColorShareMode,
|
|
baseOpacityNormal: baseOpacityNormal,
|
|
baseOpacityShareMode: baseOpacityShareMode,
|
|
speed: speed,
|
|
fps: fps
|
|
}, [offscreen]);
|
|
}
|
|
|
|
function init() {
|
|
worker.postMessage({
|
|
type: "initCanvas",
|
|
footerOffsetHeight: $footer.offsetHeight,
|
|
clientWidth: document.documentElement.clientWidth,
|
|
clientHeight: document.documentElement.clientHeight
|
|
});
|
|
}
|
|
|
|
function startAnimation() {
|
|
worker.postMessage({ type: "startAnimation" });
|
|
}
|
|
|
|
function onShareModeChange(active) {
|
|
worker.postMessage({ type: "onShareModeChange", active: active });
|
|
}
|
|
|
|
function switchAnimation(animate) {
|
|
worker.postMessage({ type: "switchAnimation", animate: animate });
|
|
}
|
|
|
|
createCanvas();
|
|
|
|
return {init, startAnimation, switchAnimation, onShareModeChange};
|
|
}
|
|
} |