68 lines
1.5 KiB
JavaScript
68 lines
1.5 KiB
JavaScript
(() => {
|
|
const board = document.querySelector('[data-pinboard-surface]');
|
|
|
|
if (!board) {
|
|
return;
|
|
}
|
|
|
|
if (typeof Muuri === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
const notes = Array.from(board.querySelectorAll('[data-pin-note]'));
|
|
|
|
if (!notes.length) {
|
|
return;
|
|
}
|
|
|
|
let zCounter = 500;
|
|
|
|
const highlighted = notes.filter((note) => note.dataset.highlighted === '1');
|
|
const normal = notes.filter((note) => note.dataset.highlighted !== '1');
|
|
const ordered = [...highlighted, ...normal];
|
|
|
|
ordered.forEach((note) => {
|
|
board.appendChild(note);
|
|
});
|
|
|
|
ordered.forEach((note, index) => {
|
|
const isHighlighted = note.dataset.highlighted === '1';
|
|
note.style.zIndex = String(isHighlighted ? 300 + index : 100 + index);
|
|
});
|
|
|
|
const grid = new Muuri(board, {
|
|
items: '.pin-note',
|
|
dragEnabled: false,
|
|
layout: {
|
|
fillGaps: false,
|
|
horizontal: false,
|
|
alignRight: false,
|
|
alignBottom: false,
|
|
rounding: false,
|
|
},
|
|
layoutDuration: 250,
|
|
layoutEasing: 'ease',
|
|
});
|
|
|
|
const bringToFront = (note) => {
|
|
zCounter += 1;
|
|
note.style.zIndex = String(zCounter);
|
|
|
|
ordered.forEach((item) => item.classList.remove('is-front'));
|
|
note.classList.add('is-front');
|
|
};
|
|
|
|
ordered.forEach((note) => {
|
|
note.addEventListener('pointerdown', () => {
|
|
bringToFront(note);
|
|
});
|
|
});
|
|
|
|
const relayout = () => {
|
|
grid.refreshItems().layout();
|
|
};
|
|
|
|
relayout();
|
|
window.addEventListener('resize', relayout);
|
|
})();
|