126 lines
3.6 KiB
JavaScript
126 lines
3.6 KiB
JavaScript
(() => {
|
|
const board = document.querySelector('[data-pinboard-surface]');
|
|
|
|
if (!board) {
|
|
return;
|
|
}
|
|
|
|
const notes = Array.from(board.querySelectorAll('[data-pin-note]'));
|
|
|
|
if (!notes.length) {
|
|
return;
|
|
}
|
|
|
|
let zCounter = 200;
|
|
|
|
const randomBetween = (min, max) => Math.random() * (max - min) + min;
|
|
|
|
const placeNotes = () => {
|
|
const boardRect = board.getBoundingClientRect();
|
|
const maxXBase = Math.max(24, boardRect.width - 300);
|
|
const maxYBase = Math.max(24, boardRect.height - 220);
|
|
|
|
notes.forEach((note, index) => {
|
|
const maxX = Math.max(16, maxXBase - note.offsetWidth * 0.2);
|
|
const maxY = Math.max(16, maxYBase - note.offsetHeight * 0.2);
|
|
|
|
const x = randomBetween(12, maxX);
|
|
const y = randomBetween(12, maxY);
|
|
const rotation = randomBetween(-7, 7);
|
|
const highlighted = note.dataset.highlighted === '1';
|
|
const level = highlighted ? 1000 + index : 100 + index;
|
|
|
|
note.dataset.baseRotation = String(rotation);
|
|
note.dataset.x = String(x);
|
|
note.dataset.y = String(y);
|
|
note.style.zIndex = String(level);
|
|
note.style.transform = `translate(${x}px, ${y}px) rotate(${rotation}deg)`;
|
|
});
|
|
};
|
|
|
|
const clampToBoard = (note, x, y) => {
|
|
const boardRect = board.getBoundingClientRect();
|
|
const noteRect = note.getBoundingClientRect();
|
|
const maxX = Math.max(0, boardRect.width - noteRect.width);
|
|
const maxY = Math.max(0, boardRect.height - noteRect.height);
|
|
|
|
return {
|
|
x: Math.min(Math.max(0, x), maxX),
|
|
y: Math.min(Math.max(0, y), maxY),
|
|
};
|
|
};
|
|
|
|
const enableDrag = (note) => {
|
|
let dragging = false;
|
|
let pointerId = null;
|
|
let offsetX = 0;
|
|
let offsetY = 0;
|
|
|
|
note.addEventListener('pointerdown', (event) => {
|
|
if (event.target instanceof Element && event.target.closest('a, button, input, select, textarea, label')) {
|
|
return;
|
|
}
|
|
|
|
dragging = true;
|
|
pointerId = event.pointerId;
|
|
note.setPointerCapture(pointerId);
|
|
note.classList.add('is-dragging');
|
|
note.style.zIndex = String(++zCounter + 2000);
|
|
|
|
const startX = Number.parseFloat(note.dataset.x ?? '0');
|
|
const startY = Number.parseFloat(note.dataset.y ?? '0');
|
|
offsetX = event.clientX - startX;
|
|
offsetY = event.clientY - startY;
|
|
});
|
|
|
|
note.addEventListener('pointermove', (event) => {
|
|
if (!dragging || event.pointerId !== pointerId) {
|
|
return;
|
|
}
|
|
|
|
const baseRotation = Number.parseFloat(note.dataset.baseRotation ?? '0');
|
|
const nextX = event.clientX - offsetX;
|
|
const nextY = event.clientY - offsetY;
|
|
const clamped = clampToBoard(note, nextX, nextY);
|
|
|
|
note.dataset.x = String(clamped.x);
|
|
note.dataset.y = String(clamped.y);
|
|
note.style.transform = `translate(${clamped.x}px, ${clamped.y}px) rotate(${baseRotation}deg)`;
|
|
});
|
|
|
|
const releaseDrag = (event) => {
|
|
if (!dragging || event.pointerId !== pointerId) {
|
|
return;
|
|
}
|
|
|
|
dragging = false;
|
|
note.classList.remove('is-dragging');
|
|
note.releasePointerCapture(pointerId);
|
|
pointerId = null;
|
|
};
|
|
|
|
note.addEventListener('pointerup', releaseDrag);
|
|
note.addEventListener('pointercancel', releaseDrag);
|
|
};
|
|
|
|
const adjustBoardHeight = () => {
|
|
let requiredHeight = 620;
|
|
|
|
notes.forEach((note) => {
|
|
const y = Number.parseFloat(note.dataset.y ?? '0');
|
|
requiredHeight = Math.max(requiredHeight, y + note.offsetHeight + 36);
|
|
});
|
|
|
|
board.style.minHeight = `${Math.ceil(requiredHeight)}px`;
|
|
};
|
|
|
|
placeNotes();
|
|
notes.forEach(enableDrag);
|
|
adjustBoardHeight();
|
|
|
|
window.addEventListener('resize', () => {
|
|
placeNotes();
|
|
adjustBoardHeight();
|
|
});
|
|
})();
|