Foros de discusión

[SOLVED] Liferay Faces prevent escape key in modal/dialog

Damien Guillermet, modificado hace 6 años.

[SOLVED] Liferay Faces prevent escape key in modal/dialog

Junior Member Mensajes: 44 Fecha de incorporación: 9/07/15 Mensajes recientes
Hello,

I'm using Liferay Faces Alloy 3.0.0 and for a best user experience I would like to prevent client escape key event to close the dialog box. At least, display a confirm box in order to prevent loosing all data entered in form contained in dialog box.

So I tried to achieve this using the dialog's onkeydown attribute like:
<alloy:dialog clientkey="myDialog" headertext="My Dialog" modal="true" hideiconrendered="false" dismissible="false" onkeydown="preventDefaultEscapeKeyHandler(event)">
	<alloy:form>
		<!-- Something. -->
	</alloy:form>
</alloy:dialog>


With JS function as:
function preventDefaultEscapeKeyHandler(event) {
	if (event.keyCode === 27) {
    	console.log('Prevent default escape key.');
    	event.preventDefault();
	}
}


The function is called as expected but that does not prevent the dialog to be closed.
Furthermore if a modal is opened behind the one with the prevent escape key function then all modals are closed. So if there is a way to prevent escape key everywhere (not only inside modals) I'm interested too.

Anybody has an idea to achieve this goal ?

Best regards.
Damien.
thumbnail
Kyle Joseph Stiemann, modificado hace 6 años.

RE: Liferay Faces prevent escape key in modal/dialog

Liferay Master Mensajes: 760 Fecha de incorporación: 14/01/13 Mensajes recientes
Hi Damien,
alloy:dialog uses AlloyUI Modal under the hood, so you can use the same method as my answer for AlloyUI Modal:

<alloy:outputScript use="aui-modal,event-key" target="body">
A.one('body').on('key', function(event) {
Liferay.component('myDialog').once('visibleChange', function(event) {
// If the dialog was already visible, then keep it visible.
if (event.prevVal === true) {
event.newVal = true;
}
});
}, 'esc');
</alloy:outputScript>


The above code attaches a one-time visibleChange listener to the dialog each time ESC is pressed that ensures it will remain visible after ESC is pressed. Otherwise, the dialog can be hidden normally.

- Kyle
Damien Guillermet, modificado hace 6 años.

RE: Liferay Faces prevent escape key in modal/dialog

Junior Member Mensajes: 44 Fecha de incorporación: 9/07/15 Mensajes recientes
Hello Kyle,

Firstly sorry because I should try to search on Liferay forum for a similar answer.
Now I tried your code and it works well thank you very much.

By the way if I have 10 modals I have to add this script 10 times. I guess there is no way to factorise this?

Regards,
Damien.
thumbnail
Kyle Joseph Stiemann, modificado hace 6 años.

RE: Liferay Faces prevent escape key in modal/dialog

Liferay Master Mensajes: 760 Fecha de incorporación: 14/01/13 Mensajes recientes
Hi Damien,
No need to apologize! I actually had a pretty hard time finding that old answer, so I wouldn't expect anyone else to find it emoticon.

I think you should be able to use a for loop to make this work for multiple dialogs:

<alloy:outputScript use="aui-modal,event-key" target="body">// <![CDATA[
var dialogClientKeys = ['dialogKey1', 'dialogKey2', 'dialogKey3'];

A.one('body').on('key', function(event) {

for (var i = 0; i < dialogClientKeys.length; i++) {
var dialog = Liferay.component(dialogClientKeys[i]);

if (dialog.get('visible')) {

dialog.once('visibleChange', function(event) {
// If the dialog was already visible, then keep it visible.
if (event.prevVal === true) {
event.newVal = true;
}
});
}
}
}, 'esc');
/* ]]> */</alloy:outputScript>


You could also programmatically search the view for alloy:dialog components and obtain their client keys if you really didn't want to write them twice (var dialogClientKeys = [#{bean.dialogClientKeys}];), but that seems like overkill unless you need generic code for many views.

- Kyle
Damien Guillermet, modificado hace 6 años.

RE: Liferay Faces prevent escape key in modal/dialog

Junior Member Mensajes: 44 Fecha de incorporación: 9/07/15 Mensajes recientes
Storing dialog client keys in an array, nice idea! Well I just have to be sure that all dialogs are in the same naming container as the script.
I will try your solution. Again, thank you very much emoticon

Damien.