tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adjust events

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-18 17:34:47 +08:00
parent 22dbcf8db2
commit 046ed387e6
2 changed files with 31 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
lib/ui/popup.js
View File

@ -101,19 +101,26 @@ class Popup {
});
}
header.appendChild(title);
const move = title.querySelector('.popup-move') ?? title;
move.addEventListener('mousedown', e => {
const x = e.clientX - container.offsetLeft;
const y = e.clientY - container.offsetTop;
const move = e => {
container.style.left = `${e.clientX - x}px`;
container.style.top = `${e.clientY - y}px`;
};
mask.addEventListener('mousemove', move, { passive: false });
mask.addEventListener('mouseup', () => {
mask.removeEventListener('mousemove', move, { passive: false });
if (this.#option.movable !== false) {
const move = title.querySelector('.popup-move') ?? title;
move.addEventListener('mousedown', e => {
const x = e.clientX - container.offsetLeft;
const y = e.clientY - container.offsetTop;
const move = e => {
container.style.left = `${e.clientX - x}px`;
container.style.top = `${e.clientY - y}px`;
};
mask.addEventListener('mousemove', move, { passive: false });
const up = () => {
mask.removeEventListener('mousemove', move, { passive: false });
mask.removeEventListener('mouseup', up);
if (typeof this.#option.onMoveEnded === 'function') {
this.#option.onMoveEnded.call(this);
}
};
mask.addEventListener('mouseup', up);
});
});
}
if (this.#option.collapsable === true) {
const collapse = createIcon('fa-regular', 'compress-alt');
collapse.classList.add('icon-expand');
@ -309,13 +316,15 @@ class Popup {
}
const parent = option.mask === false ? mask.parentElement : mask;
parent.addEventListener('mousemove', move, { passive: false });
parent.addEventListener('mouseup', () => {
const up = () => {
parent.removeEventListener('mousemove', move, { passive: false });
parent.removeEventListener('mouseup', up);
// mask.style.cursor = this.#cursor;
if (typeof option.onResizeEnded === 'function') {
option.onResizeEnded.call(this);
}
});
};
parent.addEventListener('mouseup', up);
}
}