Modal dialog in Web Author

Post here questions and problems related to oXygen frameworks/document types.
NicoAMP
Posts: 97
Joined: Tue Mar 06, 2018 2:07 pm
Contact:

Modal dialog in Web Author

Post by NicoAMP »

Hi,

I would like to launch dialog box on a button in Web Author.
On this dialog I would like to select one or more values in a select box. And after I would like to add these values in an attribute.

I try to make this dialog "modal" to wait before to continue handling.
It doesn't work : the dialog is displayed and at the same time the attribute is changed.

Do you know how to makes the dialog modal?
It is possible to get selected values in the dialog to use it?

My code:

Code: Select all

WebLinkAction.prototype.actionPerformed = function(callback) {
text = window.prompt("Please enter the link attribute");

this.dialog = workspace.createDialog();
this.dialog.setModal(true);
this.dialog.setPreferredSize(150,120);
this.dialog.setContentPreferredSize(150,120);
this.dialog.setTitle('Select audience');
this.dialog.setButtonConfiguration(sync.api.Dialog.ButtonConfiguration.OK_CANCEL);
this.dialog.getElement().innerHTML = '<select name="audience" multiple style="width:100px;height:100px;"><option value="internal">internal</option><option value="ADA">ADA</option></select>';
this.dialog.show();

this.editor.getActionsManager().invokeOperation(
'ro.sync.ecss.extensions.commons.operations.ChangeAttributeOperation', {
name: 'audience',
value: 'internal'
}, callback);

};
Thanks.
Nicolas Delobel
AmeXio
nicolas.delobel at group.amexio.net
NicoAMP
Posts: 97
Joined: Tue Mar 06, 2018 2:07 pm
Contact:

Re: Modal dialog in Web Author

Post by NicoAMP »

I found how to wait dialog response to apply my handling.
But now how can I get selected items in my list inside the dialog?

Code: Select all

WebLinkAction = function(editor) {
this.editor = editor;
this.dialog = workspace.createDialog();
this.dialog.setModal(true);
this.dialog.setPreferredSize(150,120);
this.dialog.setContentPreferredSize(150,120);
this.dialog.setTitle('Select audience');
this.dialog.setButtonConfiguration(sync.api.Dialog.ButtonConfiguration.OK_CANCEL);
this.dialog.getElement().innerHTML = '<select name="audience" multiple style="width:100px;height:100px;"><option value="internal">internal</option><option value="ADA">ADA</option></select>';
};
WebLinkAction.prototype.actionPerformed = function(callback) {
this.dialog.show();
this.dialog.onSelect(function(e) {
// The event contains information on the selected button.
window.prompt('Event: ', e);
});
};
Thanks.
Nicolas Delobel
AmeXio
nicolas.delobel at group.amexio.net
Gabriel Titerlea
Site Admin
Posts: 95
Joined: Thu Jun 09, 2016 2:01 pm

Re: Modal dialog in Web Author

Post by Gabriel Titerlea »

Hello,

Here's an example of how to retrieve the selected option:

Code: Select all


WebLinkAction.prototype.actionPerformed = function(callback) {
this.dialog.show();
var dialogElement = this.dialog.getElement();

this.dialog.onSelect(function(key, e) {

if (key === 'ok') { // If the user pressed the 'ok' button from the dialog

var selectElement = dialogElement.querySelector('select[name=audience]');
var selectedValue = selectElement.options[selectElement.selectedIndex].value;

console.log(selectedValue); // use the selected value here however you want.
}

// Call the callback method to indicate that the action has completed it's execution.
callback();
});
};
Best,
Gabriel
NicoAMP
Posts: 97
Joined: Tue Mar 06, 2018 2:07 pm
Contact:

Re: Modal dialog in Web Author

Post by NicoAMP »

Thanks a lot Gabriel, it's exactly what I needed.
Nicolas Delobel
AmeXio
nicolas.delobel at group.amexio.net
NicoAMP
Posts: 97
Joined: Tue Mar 06, 2018 2:07 pm
Contact:

Re: Modal dialog in Web Author

Post by NicoAMP »

I think I'm close to completion, but nothing append when I click on OK in my dialog.

Any ideas?

Code: Select all

WebLinkAction.prototype.actionPerformed = function(callback) {    
this.dialog.show();
var dialogElement = this.dialog.getElement();

this.dialog.onSelect(function(e) {
if (e === 'ok') {// If the user pressed the 'ok' button from the dialog
/*window.prompt('Event: ', e); */
var selectElement = dialogElement.querySelector('select[name=audience]');
var selectedValue = '';

for (var i = 0; i < selectElement.length; i++) {
if (selectElement.options[i].selected){
selectedValue = selectedValue + selectElement.options[i].value + ' ';
}
}

if (selectedValue !== ''){
if (this.editor.getSelectionManager().getSelection().isEmpty()){
this.editor.getActionsManager().invokeOperation(
'ro.sync.ecss.extensions.commons.operations.ChangeAttributeOperation', {
name: 'audience',
value: selectedValue
}, callback);
} else {
this.editor.getActionsManager().invokeOperation(
'ro.sync.ecss.extensions.commons.operations.ToggleSurroundWithElementOperation', {
element: '<ph audience="'+selectedValue+'"/>'
}, callback);
}
}

}
});

// Call the callback method to indicate that the action has completed it's execution.
callback();
};
Nicolas Delobel
AmeXio
nicolas.delobel at group.amexio.net
cristi_talau
Posts: 493
Joined: Thu Sep 04, 2014 4:22 pm

Re: Modal dialog in Web Author

Post by cristi_talau »

Hello,

There is a typo in the code

Code: Select all


for (var i = 0; i < selectElement.length; i++) {
should be

Code: Select all


for (var i = 0; i < selectElement.options.length; i++) {
Best,
Cristi
Gabriel Titerlea
Site Admin
Posts: 95
Joined: Thu Jun 09, 2016 2:01 pm

Re: Modal dialog in Web Author

Post by Gabriel Titerlea »

There are 2 more problems:

1. The function passed to the onSelect method should be bound to your WebLinkAction object because you are calling this.editor.getSelectionManager().

Example:

Code: Select all

this.dialog.onSelect(function () {
// function body here
}.bind(this)); // Notice the bind here. This will ensure that `this` will be the same here and inside the function.
2. You are calling the callback method to early. You should call it when the user presses cancel or when the ChangeAttributeOperation or ToggleSurroundWithElementOperation actions complete.

Example:

Code: Select all

if (e === 'ok') {
this.editor.getActionsManager().invokeOperation(
'ro.sync.ecss.extensions.commons.operations.ChangeAttributeOperation', {
name: 'name',
value: 'value'
}, callback);
} else {
callback();
}
Best,
Gabriel
NicoAMP
Posts: 97
Joined: Tue Mar 06, 2018 2:07 pm
Contact:

Re: Modal dialog in Web Author

Post by NicoAMP »

Thanks, It works perfectly now :D
Nicolas Delobel
AmeXio
nicolas.delobel at group.amexio.net
Post Reply