Modal dialog in Web Author

[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.

[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.

[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]

Thanks a lot Gabriel, it's exactly what I needed.

[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();

    };

[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]

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]

Thanks, It works perfectly now