mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-20 15:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Include header buttons installation and edit-paired-devices to evaluation before fading in header

Browse source
This commit is contained in:
schlagmichdoch 2023-10-12 19:02:04 +02:00
parent 2131307fc6
commit 787cd8dab5
2 changed files with 62 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

45
public/scripts/ui.js
View file

@ -68,12 +68,25 @@ class PeersUI {
this.fadedIn = false; this.fadedIn = false;
this.$header = document.querySelector('header.opacity-0'); this.$header = document.querySelector('header.opacity-0');
Events.on('header-evaluated', () => this._fadeInHeader()); Events.on('header-evaluated', e => this._fadeInHeader(e.detail));
// wait for evaluation of notification, install and edit-paired-devices buttons
this.evaluateHeaderCount = 3;
if (!('Notification' in window)) this.evaluateHeaderCount -= 1;
if (
!('BeforeInstallPromptEvent' in window) ||
('BeforeInstallPromptEvent' in window && window.matchMedia('(display-mode: minimal-ui)').matches)
) {
this.evaluateHeaderCount -= 1;
}
} }
_fadeInHeader() { _fadeInHeader(id) {
//prevent flickering this.evaluateHeaderCount -= 1;
setTimeout(() => this.$header.classList.remove('opacity-0'), 50); console.log(`Header btn ${id} evaluated. ${this.evaluateHeaderCount} to go.`);
if (this.evaluateHeaderCount !== 0) return;
this.$header.classList.remove('opacity-0');
} }
_fadeInUI() { _fadeInUI() {
@ -1413,6 +1426,7 @@ class PairDeviceDialog extends Dialog {
this.$footerInstructionsPairedDevices.setAttribute('hidden', ''); this.$footerInstructionsPairedDevices.setAttribute('hidden', '');
} }
Events.fire('evaluate-footer-badges'); Events.fire('evaluate-footer-badges');
Events.fire('header-evaluated', 'edit-paired-devices');
}); });
} }
} }
@ -2092,10 +2106,7 @@ class Notifications {
constructor() { constructor() {
// Check if the browser supports notifications // Check if the browser supports notifications
if (!('Notification' in window)) { if (!('Notification' in window)) return;
Events.fire('header-evaluated');
return;
}
// Check whether notification permissions have already been granted // Check whether notification permissions have already been granted
if (Notification.permission !== 'granted') { if (Notification.permission !== 'granted') {
@ -2104,7 +2115,7 @@ class Notifications {
this.$headerNotificationButton.addEventListener('click', _ => this._requestPermission()); this.$headerNotificationButton.addEventListener('click', _ => this._requestPermission());
} }
Events.fire('header-evaluated'); Events.fire('header-evaluated', 'notification');
Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId)); Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId));
Events.on('files-received', e => this._downloadNotification(e.detail.files)); Events.on('files-received', e => this._downloadNotification(e.detail.files));
@ -2818,12 +2829,16 @@ if ('serviceWorker' in navigator) {
}); });
} }
window.addEventListener('beforeinstallprompt', e => { window.addEventListener('beforeinstallprompt', installEvent => {
if (!window.matchMedia('(display-mode: minimal-ui)').matches) { if (!window.matchMedia('(display-mode: minimal-ui)').matches) {
// only display install btn when installed // only display install btn when not installed
const btn = document.querySelector('#install') const installBtn = document.querySelector('#install')
btn.hidden = false; installBtn.removeAttribute('hidden');
btn.onclick = _ => e.prompt(); installBtn.addEventListener('click', () => {
installBtn.setAttribute('hidden', '');
installEvent.prompt();
});
Events.fire('header-evaluated', 'install');
} }
return e.preventDefault(); return installEvent.preventDefault();
}); });

45
public_included_ws_fallback/scripts/ui.js
View file

@ -68,12 +68,25 @@ class PeersUI {
this.fadedIn = false; this.fadedIn = false;
this.$header = document.querySelector('header.opacity-0'); this.$header = document.querySelector('header.opacity-0');
Events.on('header-evaluated', () => this._fadeInHeader()); Events.on('header-evaluated', e => this._fadeInHeader(e.detail));
// wait for evaluation of notification, install and edit-paired-devices buttons
this.evaluateHeaderCount = 3;
if (!('Notification' in window)) this.evaluateHeaderCount -= 1;
if (
!('BeforeInstallPromptEvent' in window) ||
('BeforeInstallPromptEvent' in window && window.matchMedia('(display-mode: minimal-ui)').matches)
) {
this.evaluateHeaderCount -= 1;
}
} }
_fadeInHeader() { _fadeInHeader(id) {
//prevent flickering this.evaluateHeaderCount -= 1;
setTimeout(() => this.$header.classList.remove('opacity-0'), 50); console.log(`Header btn ${id} evaluated. ${this.evaluateHeaderCount} to go.`);
if (this.evaluateHeaderCount !== 0) return;
this.$header.classList.remove('opacity-0');
} }
_fadeInUI() { _fadeInUI() {
@ -1415,6 +1428,7 @@ class PairDeviceDialog extends Dialog {
this.$footerInstructionsPairedDevices.setAttribute('hidden', ''); this.$footerInstructionsPairedDevices.setAttribute('hidden', '');
} }
Events.fire('evaluate-footer-badges'); Events.fire('evaluate-footer-badges');
Events.fire('header-evaluated', 'edit-paired-devices');
}); });
} }
} }
@ -2094,10 +2108,7 @@ class Notifications {
constructor() { constructor() {
// Check if the browser supports notifications // Check if the browser supports notifications
if (!('Notification' in window)) { if (!('Notification' in window)) return;
Events.fire('header-evaluated');
return;
}
// Check whether notification permissions have already been granted // Check whether notification permissions have already been granted
if (Notification.permission !== 'granted') { if (Notification.permission !== 'granted') {
@ -2106,7 +2117,7 @@ class Notifications {
this.$headerNotificationButton.addEventListener('click', _ => this._requestPermission()); this.$headerNotificationButton.addEventListener('click', _ => this._requestPermission());
} }
Events.fire('header-evaluated'); Events.fire('header-evaluated', 'notification');
Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId)); Events.on('text-received', e => this._messageNotification(e.detail.text, e.detail.peerId));
Events.on('files-received', e => this._downloadNotification(e.detail.files)); Events.on('files-received', e => this._downloadNotification(e.detail.files));
@ -2820,12 +2831,16 @@ if ('serviceWorker' in navigator) {
}); });
} }
window.addEventListener('beforeinstallprompt', e => { window.addEventListener('beforeinstallprompt', installEvent => {
if (!window.matchMedia('(display-mode: minimal-ui)').matches) { if (!window.matchMedia('(display-mode: minimal-ui)').matches) {
// only display install btn when installed // only display install btn when not installed
const btn = document.querySelector('#install') const installBtn = document.querySelector('#install')
btn.hidden = false; installBtn.removeAttribute('hidden');
btn.onclick = _ => e.prompt(); installBtn.addEventListener('click', () => {
installBtn.setAttribute('hidden', '');
installEvent.prompt();
});
Events.fire('header-evaluated', 'install');
} }
return e.preventDefault(); return installEvent.preventDefault();
}); });