Modal Popup Widget

The Modal Popup Widget is bundled with XWiki Enterprise and it is used as base class for other modal widgets like the Confirmation Box widget, the "Jump to Page" widget and the "Confirmed Ajax Request Box". Since it should not used by itself, the Modal Popup won't display a dialog box.

Constructor Fields for the "ModalPopup" Class

The constructor for the "ModalPopup" class is called with the following parameters:

  • content is an object that defines the content of the modal dialog.
  • shortcuts is an object that defines the shortcuts that will pop up the dialog. For the "Jump to Page" widget, the shortcut keys are "CTRL+META" and "CTRL+G". More specifically, shortcuts is a map having the form { "action" : actionObject, etc. }, where actionObject has a method to execute, a keys list of keyboard shortcut strings and a common map of keyboard shortcut options. More details are available here to be used for all the defined shortcuts. For the list of available XWiki keyboard shortcuts, check the documentation page listed in the "Related Pages" section, under "User Guide".
  • options is an object that defines the options for the modal dialog:
OptionDefault value
globalDialogtrue
title""
displayCloseButtontrue
extraClassNamefalse
screenColor""
borderColor""
titleColor""
backgroundColor""
screenOpacity0.5
verticalPositioncenter
horizontalPositioncenter
removeOnClosefalse
onClosePrototype.emptyFunction

Example

We will use the Modal Popup widget to load the wiki page from the Auto-Suggest Widget tutorial that uses a custom service page. The only difference is that the code from the "XWiki.JavaScriptExtension" object attached to "Code.SuggestWidgetTest" will be moved inside a function, "suggestWidget()" as follows:

var suggestWidget = function(){
  var myInput = $('suggestWidget');
 // Create the suggest widget by instantiating XWiki.widgets.Suggest
  var mySuggest = new XWiki.widgets.Suggest(myInput, {
    script: "$xwiki.getURL('Code.SuggestWidgetTestService', 'get', 'outputSyntax=plain')&",
    varname: "q",
    icon: "$xwiki.getSkinFile('icons/silk/page_white_picture.gif')",
    noresults: "No results",
    json: true,
    resultsParameter : "results",
    resultValue : "value",
  });
};
document.observe("xwiki:dom:loaded", function(){
  suggestWidget();
});

Next, we will create another wiki page, "Code.ModalPopupTest" and add an "XWiki.JavaScriptExtension" object containing the "ModalPopup" JavaScript class. This class will be used as base class for the widget that loads the content of "Code.SuggestWidgetTest" and the auto-suggest:

// Make sure the XWiki 'namespace' and the ModalPopup class exist.
if(typeof(XWiki) == "undefined" || typeof(XWiki.widgets) == "undefined" || typeof(XWiki.widgets.ModalPopup) == "undefined") {
if (typeof console != "undefined" && typeof console.warn == "function") {
    console.warn("[MessageBox widget] Required class missing: XWiki.widgets.ModalPopup");
  }
} else {

XWiki.widgets.MyModalPopup = Class.create(XWiki.widgets.ModalPopup, {
/** Default parameters can be added to the custom class. */
  defaultInteractionParameters : {
  },
/** Constructor. Registers the key listener that pops up the dialog. */
  initialize : function($super, interactionParameters) {
 this.interactionParameters = Object.extend(Object.clone(this.defaultInteractionParameters), interactionParameters || {});
  // call constructor from ModalPopup with params content, shortcuts, options
  $super(
   this.createContent(this.interactionParameters),
      {
     "show"  : { method : this.showDialog,  keys : [] },
     "close" : { method : this.closeDialog, keys : ['Esc'] }
      },
      {
         displayCloseButton : true,
         verticalPosition : "top",
         backgroundColor : "#FFF"
      }
    );
 this.showDialog();
 this.setClass("my-modal-popup");
  },
/** Get the content of the modal dialog using ajax */
  createContent : function (data) {
  var content =  new Element('div', {'class': 'modal-popup'});
  // get page content for the pageURL
  new Ajax.Request(data.pageURL,
    {
     method:'get',
     onSuccess: function(transport){
       var response = transport.responseText || "no response text";
        content.insert(response);
        suggestWidget();
      },
     onFailure: function(){ content.insert('Something went wrong...');
    }
    });

  return content;
  }
});
} // if the parent widget is defined

The name of the widget, "MyModalPopup" is defined in the line:

XWiki.widgets.MyModalPopup = Class.create(XWiki.widgets.ModalPopup, {}

A very important detail is making sure to call the "suggestWidget()" function when making the Ajax request. Otherwise, we will only get the HTML of the page "Code.SuggestWidgetTest", which is an empty input and the auto-suggest won't work:

new Ajax.Request(data.pageURL,
    {
      method:'get',
      onSuccess: function(transport){
        var response = transport.responseText || "no response text";
        content.insert(response);
        suggestWidget();
      },
      onFailure: function(){ content.insert('Something went wrong...');
    }
    });

Finally, we will edit the page "Code.ModalPopupTest" in "Wiki" mode and add the following lines:

{{velocity}}
#set($pageURL="$xwiki.getURL('Code.SuggestWidgetTest','view','xpage=plain')")
#set ($discard = $xwiki.jsx.use("Code.SuggestWidgetTest"))

{{html}}
<a href="#" onclick="new XWiki.widgets.MyModalPopup({pageURL: '$pageURL'});">Click me to open a pop-up</a>
{{/html}}

{{/velocity}}

In order for the pop-up to appear, we still need to explicitly add it to the page "Code.SuggestWidgetTest", even though we have defined the URL for it:

{{velocity}}

(((
{{html}}
<input type="text" id="suggestWidget" />
{{/html}}
)))

{{/velocity}}

The final result will be:

ModalPopupLink.png

If we then click on the "Click me to open a pop-up" link, the modal popup window will appear with an HTML input:

ModalPopupWindow.png

Once we start typing something, the auto-suggest will display the possible results that have been defined in the page "Code.SuggestWidgetTestService":

ModalPopupSuggest.png

  

Search this space