54 lines
1.9 KiB
JavaScript
54 lines
1.9 KiB
JavaScript
function confirmDelete(event, {float = false} = {}) {
|
|
const id = getClickedStyleId(event);
|
|
const box = $('#confirm');
|
|
box.dataset.id = id;
|
|
box.dataset.display = true;
|
|
box.style.cssText = '';
|
|
$('b', box).textContent = ((cachedStyles.byId.get(id) || {}).style || {}).name;
|
|
if (float) {
|
|
const GAP = 50;
|
|
const {width:W, height:H} = box.firstElementChild.getBoundingClientRect();
|
|
const {left:L, top:T, right:R, bottom:B} = event.target.getBoundingClientRect();
|
|
Object.assign(box.style, {
|
|
paddingTop: (Math.min(T - H/2, innerHeight - H) - GAP) + 'px',
|
|
paddingLeft: (Math.min(L - W/2, innerWidth - W) - GAP) + 'px',
|
|
paddingRight: (innerWidth - Math.max(R + W/2, W) - GAP) + 'px',
|
|
paddingBottom: (innerHeight - Math.max(B + H/2, H) - GAP) + 'px',
|
|
});
|
|
}
|
|
let resolveMe;
|
|
$('[data-cmd="ok"]', box).onclick = event => doDelete(true);
|
|
$('[data-cmd="cancel"]', box).onclick = event => doDelete(false);
|
|
window.addEventListener('keydown', onKey);
|
|
|
|
const stopScroll = {x: scrollX, y: scrollY};
|
|
window.addEventListener('scroll', preventScroll);
|
|
|
|
return new Promise(resolve => resolveMe = resolve);
|
|
|
|
function doDelete(confirmed) {
|
|
window.removeEventListener('keydown', onKey);
|
|
window.removeEventListener('scroll', preventScroll);
|
|
box.classList.add('lights-on');
|
|
box.addEventListener('animationend', function _() {
|
|
box.removeEventListener('animationend', _);
|
|
box.dataset.display = false;
|
|
box.classList.remove('lights-on');
|
|
});
|
|
Promise.resolve(confirmed && deleteStyle(id))
|
|
.then(resolveMe);
|
|
}
|
|
|
|
function onKey(event) {
|
|
if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
|
|
&& (event.keyCode == 13 || event.keyCode == 27)) {
|
|
event.preventDefault();
|
|
doDelete(event.keyCode == 13);
|
|
}
|
|
}
|
|
|
|
function preventScroll() {
|
|
window.scrollTo(stopScroll.x, stopScroll.y);
|
|
}
|
|
}
|