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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
lib/ui/popup.html
View File

@ -15,8 +15,11 @@
document.querySelector('#button-popup').addEventListener('click', () => {
const popup = new ui.Popup({
title: 'title long title, looooooong title, looooooooooooooooooooooooong ~',
content: 'content',
content: ui.createElement('div', 'class-content',
ui.createElement('span', span => span.innerText = 'Text content.')
),
mask: false,
// movable: false,
resizable: true,
collapsable: true,
minWidth: 210,
@ -30,7 +33,9 @@
}
},
{ text: 'OK' }
]
],
onMoveEnded: () => console.log('move ended.', popup.rect),
onResizeEnded: () => console.log('resize ended.', popup.rect)
});
popup.show();
});
@ -40,6 +45,7 @@
--title-bg-color: lightgray;
--title-color: #333;
}
.popup-mask .popup-container {
min-width: 210px;
min-height: 200px;

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);
}
}