Page 1 of 1
Modal dialog in Web Author
Posted: Wed Sep 26, 2018 9:30 am
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.
Re: Modal dialog in Web Author
Posted: Wed Sep 26, 2018 12:42 pm
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.
Re: Modal dialog in Web Author
Posted: Wed Sep 26, 2018 4:21 pm
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
Re: Modal dialog in Web Author
Posted: Wed Sep 26, 2018 4:40 pm
by NicoAMP
Thanks a lot Gabriel, it's exactly what I needed.
Re: Modal dialog in Web Author
Posted: Fri Sep 28, 2018 12:30 pm
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();
};
Re: Modal dialog in Web Author
Posted: Fri Sep 28, 2018 1:39 pm
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
Re: Modal dialog in Web Author
Posted: Fri Sep 28, 2018 1:56 pm
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
Re: Modal dialog in Web Author
Posted: Tue Oct 16, 2018 4:50 pm
by NicoAMP
Thanks, It works perfectly now
