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

simplify messageBox code

Browse Source 
also bind events correctly in case messageBox is called when a messageBox was already shown
This commit is contained in:
tophf 2021-08-02 14:28:37 +03:00
parent 295cb4541c
commit cc74469295
1 changed files with 5 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,10 +40,9 @@ messageBox.show = async ({
}) => { }) => {
await require(['/js/dlg/message-box.css']); await require(['/js/dlg/message-box.css']);
if (!messageBox.listeners) initOwnListeners(); if (!messageBox.listeners) initOwnListeners();
bindGlobalListeners();
createElement(); createElement();
bindGlobalListeners();
document.body.appendChild(messageBox.element); document.body.appendChild(messageBox.element);
bindElementLiseners();
messageBox._originalFocus = document.activeElement; messageBox._originalFocus = document.activeElement;
// focus the first focusable child but skip the first external link which is usually `feedback` // focus the first focusable child but skip the first external link which is usually `feedback`
@ -132,15 +131,9 @@ messageBox.show = async ({
listening = false; listening = false;
}, },
mouseMove(event) { mouseMove(event) {
const x = clamp(event.clientX, 30, innerWidth - 30) - clickX; offsetX = clamp(event.clientX, 30, innerWidth - 30) - clickX;
const y = clamp(event.clientY, 30, innerHeight - 30) - clickY; offsetY = clamp(event.clientY, 30, innerHeight - 30) - clickY;
messageBox.element.firstChild.style.transform = `translate(${offsetX}px,${offsetY}px)`;
offsetX = x;
offsetY = y;
$('#message-box > div').style.transform =
`translateX(${x}px)
translateY(${y}px)`;
}, },
}; };
} }
@ -164,7 +157,7 @@ messageBox.show = async ({
messageBox.element = messageBox.element =
$create({id, className}, [ $create({id, className}, [
$create([ $create([
$create(`#${id}-title`, title), $create(`#${id}-title`, {onmousedown: messageBox.listeners.mouseDown}, title),
$create(`#${id}-close-icon`, {onclick: messageBox.listeners.closeIcon}, $create(`#${id}-close-icon`, {onclick: messageBox.listeners.closeIcon},
$create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'}, $create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'},
$create('SVG:path', {d: 'M11.69,10l4.55,4.55-1.69,1.69L10,11.69,' + $create('SVG:path', {d: 'M11.69,10l4.55,4.55-1.69,1.69L10,11.69,' +
@ -191,16 +184,11 @@ messageBox.show = async ({
window.on('keydown', messageBox.listeners.key, true); window.on('keydown', messageBox.listeners.key, true);
} }
function bindElementLiseners() {
$('#message-box-title').on('mousedown', messageBox.listeners.mouseDown, {passive: true});
}
function unbindGlobalListeners() { function unbindGlobalListeners() {
window.off('keydown', messageBox.listeners.key, true); window.off('keydown', messageBox.listeners.key, true);
window.off('scroll', messageBox.listeners.scroll); window.off('scroll', messageBox.listeners.scroll);
window.off('mouseup', messageBox.listeners.mouseUp); window.off('mouseup', messageBox.listeners.mouseUp);
window.off('mousemove', messageBox.listeners.mouseMove); window.off('mousemove', messageBox.listeners.mouseMove);
$('#message-box-title').off('mousedown', messageBox.listeners.mouseDown);
} }
function removeSelf() { function removeSelf() {