76 lines
2.0 KiB
JavaScript
76 lines
2.0 KiB
JavaScript
let dragging = false
|
|
let offsetX = 0;
|
|
let offsetY = 0;
|
|
|
|
const closeBtn = document.getElementById('closeBtn');
|
|
const phone = document.getElementById('phone');
|
|
const topbar = document.getElementById('topbar');
|
|
|
|
phone.classList.add('absolute', 'top-20', 'left-20');
|
|
topbar.classList.add('cursor-grab');
|
|
|
|
topbar.addEventListener('mousedown', e => {
|
|
if (e.target.closest('button') || e.target.closest('span')) return;
|
|
dragging = true;
|
|
topbar.classList.add('cursor-grabbing');
|
|
topbar.classList.remove('cursor-grab');
|
|
|
|
const rect = phone.getBoundingClientRect();
|
|
offsetX = e.clientX - rect.left;
|
|
offsetY = e.clientY - rect.top;
|
|
});
|
|
|
|
window.addEventListener('mousemove', e => {
|
|
if (!dragging) return;
|
|
phone.style.left = `${e.clientX - offsetX}px`;
|
|
phone.style.top = `${e.clientY - offsetY}px`;
|
|
});
|
|
|
|
window.addEventListener('mouseup', () => {
|
|
if (!dragging) return;
|
|
dragging = false;
|
|
topbar.classList.remove('cursor-grabbing');
|
|
topbar.classList.add('cursor-grab');
|
|
});
|
|
|
|
window.addEventListener('message', function(event) {
|
|
const d = event.data;
|
|
if (!d) return;
|
|
|
|
if (d.action === 'toggle') {
|
|
if (d.open) {
|
|
phone.classList.remove('hidden');
|
|
updateTime();
|
|
} else {
|
|
phone.classList.add('hidden');
|
|
}
|
|
}
|
|
});
|
|
|
|
closeBtn?.addEventListener('click', () => {
|
|
phone.classList.add('hidden');
|
|
|
|
const parentResource = getParentResourceName();
|
|
fetch(`https://${parentResource}/close`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({})
|
|
});
|
|
});
|
|
|
|
function updateTime() {
|
|
const t = document.getElementById('time');
|
|
const now = new Date();
|
|
const hh = String(now.getHours()).padStart(2, '0');
|
|
const mm = String(now.getMinutes()).padStart(2, '0');
|
|
t.innerText = hh + ':' + mm;
|
|
}
|
|
|
|
function getParentResourceName() {
|
|
try {
|
|
return new URL(document.location).searchParams.get('parent') || window.parentResource || 'gb-phone';
|
|
} catch {
|
|
return 'gb-phone';
|
|
}
|
|
}
|