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

37
lib/ui/popup.js
View File

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