Skip to content

Commit

Permalink
Revert "only assign show for non modals"
Browse files Browse the repository at this point in the history 
This reverts commit 7c451d7.
  • Loading branch information
@AlexanderGeere
AlexanderGeere committed Feb 7, 2025
1 parent 7c451d7 commit 10adb59
Showing 1 changed file with 99 additions and 98 deletions.
197 changes: 99 additions & 98 deletions lib/ui/elements/dialog.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,78 +47,84 @@ The show method will be called on an existing dialog unless the creation is impl
*/

export default function dialog(dialog) {

// Shortcircuit method and show existing dialog.
// The new flag can be used to always create a new dialog.
if (!dialog.new && typeof dialog.show === 'function') {
dialog.show();
if(!dialog.new && typeof dialog.show === 'function'){
dialog.show()
return;
}

dialog.show = show

if (!dialog.target) {

// The dialog must be modal if no target is provided.
dialog.modal = true;

// Ensure the target is an HTMLElement before proceeding
// Ensure the target is an HTMLElement before proceeding
} else if (!(dialog.target instanceof HTMLElement)) return;
else dialog.show = show;

// Close existing modal.
document.querySelector('dialog.modal')?.close();
document.querySelector('dialog.modal')?.close()

dialog.minimizeBtn &&= mapp.utils.html`<button
class="mask-icon minimize-btn"
onclick=${(e) => {
e.target.closest('dialog').classList.toggle('minimized');
}}>`;
onclick=${e => {
e.target.closest('dialog').classList.toggle('minimized')
}}>`

function closeDialog(e) {
if (dialog.onClose instanceof Function) {
dialog.onClose(e);
dialog.onClose(e)
}
dialog.node.remove();
dialog.node.remove()
}

dialog.close = closeDialog;
dialog.close = closeDialog

dialog.closeBtn &&= mapp.utils.html`<button
data-id=close
class="mask-icon close"
onclick=${closeDialog}>`;
onclick=${closeDialog}>`

dialog.headerHtml = mapp.utils.html`<header
class=${dialog.headerDrag ? 'headerDrag' : ''}>
${dialog.header}${dialog.minimizeBtn}${dialog.closeBtn}`;
class=${dialog.headerDrag ? 'headerDrag': ''}>
${dialog.header}${dialog.minimizeBtn}${dialog.closeBtn}`

dialog.data_id ??= 'dialog';

dialog.class ??= 'box-shadow';
dialog.class += dialog.modal ? ' modal' : ' dialog';


dialog.data_id ??= 'dialog'

dialog.class ??= 'box-shadow'
dialog.class += dialog.modal ? ' modal' : ' dialog'

dialog.node = mapp.utils.html.node`<dialog
onclose=${closeDialog}
style=${dialog.css_style}
data-id=${dialog.data_id}
class=${dialog.class}>
${dialog.headerHtml}
<div class="content">${dialog.content}`;

<div class="content">${dialog.content}`
if (dialog.modal) {
document.body.append(dialog.node);
dialog.node.showModal();

document.body.append(dialog.node)
dialog.node.showModal()

} else {
dialog.target.appendChild(dialog.node);
dialog.node.show();

dialog.target.appendChild(dialog.node)
dialog.node.show()

if (dialog.right) {

// Calc left from right and offSetWidth
dialog.left =
dialog.target.offsetWidth -
dialog.node.offsetWidth -
parseInt(dialog.right);
dialog.left = dialog.target.offsetWidth - dialog.node.offsetWidth - parseInt(dialog.right)
}

dialog.node.style.top = `${dialog.top || 0}`;
dialog.node.style.left = `${dialog.left || 0}`;
dialog.node.style.top = `${dialog.top || 0}`
dialog.node.style.left = `${dialog.left || 0}`

dialog.node.addEventListener('mousedown', handleStartEvent);
dialog.node.addEventListener('touchstart', handleStartEvent);
Expand All @@ -130,6 +136,7 @@ export default function dialog(dialog) {

// Function to handle the start of a drag event, setting up the necessary event listeners for moving and ending the drag
function handleStartEvent(e) {

// If headerDrag is true, the dialog can only be dragged by the header
if (dialog.headerDrag && !e.target.closest('header')) return;

Expand All @@ -141,11 +148,11 @@ export default function dialog(dialog) {
const eventsMap = {
mousedown: {
move: 'mousemove',
end: 'mouseup',
end: 'mouseup'
},
touchstart: {
move: 'touchmove',
end: 'touchend',
end: 'touchend'
},
};

Expand All @@ -156,9 +163,9 @@ export default function dialog(dialog) {
}

function adjustDialogPosition() {

const { offsetWidth: mapWidth, offsetHeight: mapHeight } = dialog.target;
const { offsetWidth: dialogWidth, offsetHeight: dialogHeight } =
dialog.node;
const { offsetWidth: dialogWidth, offsetHeight: dialogHeight } = dialog.node;

// Calculate the maximum allowed positions for the dialog
const maxLeft = mapWidth - dialogWidth;
Expand All @@ -171,8 +178,8 @@ export default function dialog(dialog) {

// Function to end the drag event, resetting cursor style and removing the move and end event listeners
function stopShift() {
delete dialog.x;
delete dialog.y;
delete dialog.x
delete dialog.y

// If headerDrag is true - the cursor should be set to auto on mouseup
dialog.node.style.cursor = dialog.headerDrag ? 'auto' : 'grab';
Expand All @@ -185,42 +192,45 @@ export default function dialog(dialog) {

// Function to handle the move event during a drag, updating the position of the dialog while keeping it within the window bounds
function shiftEvent(e) {

// Set initial x
dialog.x ??= e.x;
dialog.x ??= e.x

const leftShift = e.x - dialog.x;
const leftShift = e.x - dialog.x

dialog.x = e.x;
dialog.x = e.x

// Set initial y
dialog.y ??= e.y;
dialog.y ??= e.y

const topShift = e.y - dialog.y;
const topShift = e.y - dialog.y

dialog.y = e.y;
dialog.y = e.y

if (dialog.contained && !dialog.modal) {
shiftContained(dialog, leftShift, topShift);

shiftContained(dialog, leftShift, topShift)
return;
}

if (dialog.containedCentre && !dialog.modal) {
shiftContainedCentre(dialog, leftShift, topShift);
return;

shiftContainedCentre(dialog, leftShift, topShift)
return
}

// left shift
dialog.node.style.left = `${dialog.node.offsetLeft + leftShift}px`;
dialog.node.style.left = `${dialog.node.offsetLeft + leftShift}px`

// top shift
dialog.node.style.top = `${dialog.node.offsetTop + topShift}px`;
dialog.node.style.top = `${dialog.node.offsetTop + topShift}px`
}

// Maintain a reference to the dialog
dialog.dialog = dialog;
dialog.dialog = dialog

return dialog;
}
return dialog
};

/**
@function shiftContained
Expand All @@ -237,42 +247,40 @@ Shift from top offset
*/

function shiftContained(dialog, leftShift, topShift) {

// Exceeds left offset
if (dialog.node.offsetLeft + leftShift < 0) {
dialog.node.style.left = 0;
if ((dialog.node.offsetLeft + leftShift) < 0) {

dialog.node.style.left = 0

// Shifts left
} else if (leftShift < 0) {
dialog.node.style.left = `${dialog.node.offsetLeft + leftShift}px`;

dialog.node.style.left = `${dialog.node.offsetLeft + leftShift}px`

// Does NOT exceed right offset
} else if (
dialog.target.offsetWidth -
dialog.node.offsetWidth -
dialog.node.offsetLeft >
0
) {
} else if ((dialog.target.offsetWidth - dialog.node.offsetWidth - dialog.node.offsetLeft) > 0) {

// Shifts right
dialog.node.style.left = `${dialog.node.offsetLeft + leftShift}px`;
dialog.node.style.left = `${dialog.node.offsetLeft + leftShift}px`
}


// Exceeds top offset
if (dialog.node.offsetTop + topShift < 0) {
dialog.node.style.top = 0;
if ((dialog.node.offsetTop + topShift) < 0) {

dialog.node.style.top = 0

// Shift top
} else if (topShift < 0) {
dialog.node.style.top = `${dialog.node.offsetTop + topShift}px`;

dialog.node.style.top = `${dialog.node.offsetTop + topShift}px`

// Does NOT exceed bottom offset
} else if (
dialog.target.offsetHeight -
dialog.node.offsetHeight -
dialog.node.offsetTop >
0
) {
} else if ((dialog.target.offsetHeight - dialog.node.offsetHeight - dialog.node.offsetTop) > 0) {

// Shift bottom
dialog.node.style.top = `${dialog.node.offsetTop + topShift}px`;
dialog.node.style.top = `${dialog.node.offsetTop + topShift}px`
}
}

Expand All @@ -291,48 +299,40 @@ Shift from top offset
*/

function shiftContainedCentre(dialog, leftShift, topShift) {

// Exceeds left offset
if (
dialog.node.offsetLeft + parseInt(dialog.node.offsetWidth / 2) + leftShift <
0
) {
if ((dialog.node.offsetLeft + parseInt(dialog.node.offsetWidth / 2) + leftShift) < 0) {

return;

// Shifts left
} else if (leftShift < 0) {
dialog.node.style.left = `${dialog.node.offsetLeft + leftShift}px`;

dialog.node.style.left = `${dialog.node.offsetLeft + leftShift}px`

// Does NOT exceed right offset
} else if (
dialog.target.offsetWidth -
parseInt(dialog.node.offsetWidth / 2) -
dialog.node.offsetLeft >
0
) {
} else if ((dialog.target.offsetWidth - parseInt(dialog.node.offsetWidth / 2) - dialog.node.offsetLeft) > 0) {

// Shifts right
dialog.node.style.left = `${dialog.node.offsetLeft + leftShift}px`;
dialog.node.style.left = `${dialog.node.offsetLeft + leftShift}px`
}


// Exceeds top offset
if (
dialog.node.offsetTop + parseInt(dialog.node.offsetHeight / 2) + topShift <
0
) {
if ((dialog.node.offsetTop + parseInt(dialog.node.offsetHeight / 2) + topShift) < 0) {

return;

// Shift top
} else if (topShift < 0) {
dialog.node.style.top = `${dialog.node.offsetTop + topShift}px`;

dialog.node.style.top = `${dialog.node.offsetTop + topShift}px`

// Does NOT exceed bottom offset
} else if (
dialog.target.offsetHeight -
parseInt(dialog.node.offsetHeight / 2) -
dialog.node.offsetTop >
0
) {
} else if ((dialog.target.offsetHeight - parseInt(dialog.node.offsetHeight / 2) - dialog.node.offsetTop) > 0) {

// Shift bottom
dialog.node.style.top = `${dialog.node.offsetTop + topShift}px`;
dialog.node.style.top = `${dialog.node.offsetTop + topShift}px`
}
}

Expand All @@ -343,10 +343,11 @@ function shiftContainedCentre(dialog, leftShift, topShift) {
Appends the dialog node to its target.
Called upon re-opening a dialog.
*/
function show() {
function show(){

//check for a node
if (!this.node) return;
if(!this.node) return;

//append the node to the target if there is one
this.target instanceof HTMLElement && this.target.append(this.node);
}
this.target instanceof HTMLElement && this.target.append(this.node)
}

0 comments on commit 10adb59

Please sign in to comment.