open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make it more niece

Browse Source
This commit is contained in:
Gusted 2021-07-02 14:51:01 +02:00
parent a5199f573a
commit c867fc7266
No known key found for this signature in database
GPG Key ID: FD821B732837125F
2 changed files with 38 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
js/dlg/message-box.css
View File

@ -17,8 +17,6 @@
} }
#message-box > div { #message-box > div {
top: 3rem;
right: 3rem;
min-width: 10rem; min-width: 10rem;
max-width: 50vw; max-width: 50vw;
min-height: 5rem; min-height: 5rem;
@ -32,6 +30,11 @@
-moz-user-select: text; -moz-user-select: text;
} }
#message-box > div:not(.dragged) {
top: 3rem;
right: 3rem;
}
#message-box.fadeout { #message-box.fadeout {
animation: fadeout .25s ease-in-out; animation: fadeout .25s ease-in-out;
} }

43
js/dlg/message-box.js
View File

@ -69,7 +69,7 @@ messageBox.show = async ({
}); });
function initOwnListeners() { function initOwnListeners() {
let dragging = false; let listening = false;
let clickX, clickY; let clickX, clickY;
let positionX, positionY; let positionX, positionY;
messageBox.listeners = { messageBox.listeners = {
@ -107,26 +107,44 @@ messageBox.show = async ({
scrollTo(messageBox._blockScroll.x, messageBox._blockScroll.y); scrollTo(messageBox._blockScroll.x, messageBox._blockScroll.y);
}, },
mouseDown(event) { mouseDown(event) {
if (event.button !== 0) {
return;
}
if (!listening) {
window.on('mouseup', messageBox.listeners.mouseUp, {passive: true});
window.on('mousemove', messageBox.listeners.mouseMove, {passive: true});
listening = true;
}
clickX = event.clientX; clickX = event.clientX;
clickY = event.clientY; clickY = event.clientY;
const element = $('#message-box > div'); const element = $('#message-box > div');
// Due to how transform and translate work we cannot rely
// on the offsets and must fallback to getBoundingClientRect
if (element.classList.contains('dragged')) {
const bounds = element.getBoundingClientRect();
positionX = bounds.left;
positionY = bounds.top;
} else {
positionX = element.offsetLeft; positionX = element.offsetLeft;
positionY = element.offsetTop; positionY = element.offsetTop;
dragging = true; }
}, },
mouseUp() { mouseUp(event) {
dragging = false; if (event.button !== 0) {
return;
}
window.off('mouseup', messageBox.listeners.mouseUp);
window.off('mousemove', messageBox.listeners.mouseMove);
listening = false;
}, },
mouseMove(event) { mouseMove(event) {
if (dragging) {
const x = positionX + event.clientX - clickX; const x = positionX + event.clientX - clickX;
const y = positionY + event.clientY - clickY; const y = positionY + event.clientY - clickY;
const element = $('#message-box > div'); const element = $('#message-box > div');
element.style.left = x + 'px'; element.style.transform = `translateX(${x}px) translateY(${y}px)`;
element.style.top = y + 'px'; element.classList.add('dragged');
}
}, },
}; };
} }
@ -175,15 +193,10 @@ messageBox.show = async ({
window.on('scroll', messageBox.listeners.scroll, {passive: false}); window.on('scroll', messageBox.listeners.scroll, {passive: false});
} }
window.on('keydown', messageBox.listeners.key, true); window.on('keydown', messageBox.listeners.key, true);
window.on('mouseup', messageBox.listeners.mouseUp, {passive: true});
window.on('mousemove', messageBox.listeners.mouseMove, {passive: true});
} }
function bindElementLiseners() { function bindElementLiseners() {
const messageBoxHeader = $('#message-box-title'); $('#message-box-title').on('mousedown', messageBox.listeners.mouseDown, {passive: true});
if (messageBoxHeader) {
messageBoxHeader.on('mousedown', messageBox.listeners.mouseDown, {passive: true});
}
} }
function unbindGlobalListeners() { function unbindGlobalListeners() {
@ -194,7 +207,7 @@ messageBox.show = async ({
const messageBoxHeader = $('#message-box-title'); const messageBoxHeader = $('#message-box-title');
if (messageBoxHeader) { if (messageBoxHeader) {
messageBoxHeader.on('mousedown', messageBox.listeners.mouseDown); messageBoxHeader.off('mousedown', messageBox.listeners.mouseDown);
} }
} }