Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New dot:ModalDialog control, wrapper for <dialog> #1776

Merged
merged 5 commits into from
Feb 27, 2024
Merged

New dot:ModalDialog control, wrapper for <dialog> #1776

merged 5 commits into from
Feb 27, 2024

Conversation

exyi
Copy link
Member

@exyi exyi commented Feb 18, 2024

The control closes or shows the modal based on an Open property. The modal is always shown using the .showModal() method, non-modal dialog is already accessible by binding the open attribute of dialog HTML element.
The Open property may either be a boolean or a nullable object, the dialog is shown if the value isn't false nor null.

On close event, false or null is written back into the Open property. Otherwise, we'd quickly have inconsistent viewModel whenever the user closes the dialog with ESC.
Close event is also provided for explicit event handling.

We also optionaly provide a helper for implementing "close after backdrop click" functionality. It is not supported by the dialog element natively and could not be otherwise implemented without writing custom JS.
It is enabled by setting CloseOnBackdropClick=true

Resolves #1708

@exyi exyi added this to the Version 4.3 milestone Feb 18, 2024
Copy link
Member

@tomasherceg tomasherceg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please do not fire Closed event when the value in the ViewModel changes - fire it only when the user makes some action to close the dialog (click on backdrop, press escape, and so on).

}
},
},
"dotvvm-model-backdrop-close": {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"dotvvm-model-backdrop-close": {
"dotvvm-modal-backdrop-close": {

@exyi exyi force-pushed the modal-dialog branch 2 times, most recently from 9f54659 to efeee05 Compare February 23, 2024 18:59
The control closes or shows the modal based on an Open property.
The modal is always shown using the .showModal() method,
non-modal dialog is already accessible by binding the open
attribute of dialog HTML element.
The Open property may either be a boolean or a nullable object,
the dialog is shown if the value isn't false nor null.

On close event, false or null is written back into the Open property.
Otherwise, we'd quickly have inconsistent viewModel whenever
the user closes the dialog with ESC.
Close event is also provided for explicit event handling.

We also optionaly provide a helper for implementing
"close after backdrop click" functionality. It is not supported by
the dialog element natively and could not be otherwise
implemented without writing custom JS.
It is enabled by setting CloseOnBackdropClick=true

Resolves  #1708
@exyi exyi force-pushed the modal-dialog branch 3 times, most recently from f6b2dca to 75e7bf7 Compare February 26, 2024 12:20
@exyi exyi merged commit d73e409 into main Feb 27, 2024
14 of 15 checks passed
@exyi exyi deleted the modal-dialog branch February 27, 2024 13:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

dot:ModalDialog control
2 participants