Skip to Content

Wiki source code of Modal Popup UI Component

Version 2.1 by Oana Florea on 2010/01/07
Show last authors
1
2 {{warning}}
3 This tutorial is a work in progress.
4 {{/warning}}
5 {{toc/}}
6 {{info}}
7 This is a Javascript widget bundled by default with the XWiki platform.
8 {{/info}}
9 =Usage=
10
11 The Modal Popup is a widget used as a base class for different modal widgets in XWiki, like the [[Confirmation Box>>DevGuide.ConfirmationBox]] or the Jump To Page widget. It will not display a dialog box since it should not be used by itself.
12
13 =Constructor fields for the **ModalPopup** Javascript class=
14 ; content
15 : Object that defines the content of the modal dialog.
16 ; shortcuts
17 : Object that defines the shortcuts that will pop up the dialog.
18 ; options
19 : Object that defines the options for the modal dialog: //title//, //displayCloseButton//, //screenColor//, //borderColor//, //titleColor//, //backgroundColor//, //screenOpacity//, //verticalPosition// and //horizontalPosition//.
20
21 =Examples=
22
23 The Modal Popup Javascript class could be used as a base class for a widget that loads the content of another page:
24
25 {{code language="javascript"}}
26 // Make sure the XWiki 'namespace' and the ModalPopup class exist.
27 if(typeof(XWiki) == "undefined" || typeof(XWiki.widgets) == "undefined" || typeof(XWiki.widgets.ModalPopup) == "undefined") {
28 if (typeof console != "undefined" && typeof console.warn == "function") {
29 console.warn("[MessageBox widget] Required class missing: XWiki.widgets.ModalPopup");
30 }
31 } else {
32
33 XWiki.widgets.MyModalPopup = Class.create(XWiki.widgets.ModalPopup, {
34 /** Default parameters can be added to the custom class. */
35 defaultInteractionParameters : {
36 },
37 /** Constructor. Registers the key listener that pops up the dialog. */
38 initialize : function($super, interactionParameters) {
39 this.interactionParameters = Object.extend(Object.clone(this.defaultInteractionParameters), interactionParameters || {});
40 // call constructor from ModalPopup with params content, shortcuts, options
41 $super(
42 this.createContent(this.interactionParameters),
43 {
44 "show" : { method : this.showDialog, keys : [] },
45 "close" : { method : this.closeDialog, keys : ['Esc'] }
46 },
47 {
48 displayCloseButton : true,
49 verticalPosition : "top",
50 backgroundColor : "#FFF"
51 }
52 );
53 this.showDialog();
54 this.setClass("my-modal-popup");
55 },
56 /** Get the content of the modal dialog using ajax */
57 createContent : function (data) {
58 var content = new Element('div', {'class': 'modal-popup'});
59 // get page content for the pageURL
60 new Ajax.Request(data.pageURL,
61 {
62 method:'get',
63 onSuccess: function(transport){
64 var response = transport.responseText || "no response text";
65 content.insert(response);
66 },
67 onFailure: function(){ content.insert('Something went wrong...');
68 }
69 });
70
71 return content;
72 }
73 });
74 } // if the parent widget is defined
75 {{/code}}
76
77 Define the URL of the page to be loaded and just call the new widget from the wiki page:
78 {{code}}
79 #set($pageURL="$xwiki.getURL('Sandbox.TestPage1','view','xpage=plain')")
80 <a href="#" onclick="new XWiki.widgets.MyModalPopup({pageURL: '$pageURL'});">
81 {{/code}}
82
83 {{html wiki="false"}}
84 <script type="text/javascript" language="javascript">
85 // Make sure the XWiki 'namespace' and the ModalPopup class exist.
86 if(typeof(XWiki) == "undefined" || typeof(XWiki.widgets) == "undefined" || typeof(XWiki.widgets.ModalPopup) == "undefined") {
87 if (typeof console != "undefined" && typeof console.warn == "function") {
88 console.warn("[MessageBox widget] Required class missing: XWiki.widgets.ModalPopup");
89 }
90 } else {
91
92 XWiki.widgets.MyModalPopup = Class.create(XWiki.widgets.ModalPopup, {
93 /** Default parameters can be added to the custom class. */
94 defaultInteractionParameters : {
95 },
96 /** Constructor. Registers the key listener that pops up the dialog. */
97 initialize : function($super, interactionParameters) {
98 this.interactionParameters = Object.extend(Object.clone(this.defaultInteractionParameters), interactionParameters || {});
99 // call constructor from ModalPopup with params content, shortcuts, options
100 $super(
101 this.createContent(this.interactionParameters),
102 {
103 "show" : { method : this.showDialog, keys : [] },
104 "close" : { method : this.closeDialog, keys : ['Esc'] }
105 },
106 {
107 displayCloseButton : true,
108 verticalPosition : "top",
109 backgroundColor : "#FFF"
110 }
111 );
112 this.showDialog();
113 this.setClass("my-modal-popup");
114 },
115 /** Get the content of the modal dialog using ajax */
116 createContent : function (data) {
117 var content = new Element('div', {'class': 'modal-popup'});
118 // get page content for the pageURL
119 new Ajax.Request(data.pageURL,
120 {
121 method:'get',
122 onSuccess: function(transport){
123 var response = transport.responseText || "no response text";
124 content.insert(response);
125 },
126 onFailure: function(){ content.insert('Something went wrong...');
127 }
128 });
129
130 return content;
131 }
132 });
133 } // if the parent widget is defined
134 </script>
135 {{/html}}
136
137 {{velocity}}
138 {{html wiki="false"}}
139 #set($pageURL="$xwiki.getURL('Sandbox.TestPage1','view','xpage=plain')")
140 Check out the example above live: <a href="#" onclick="new XWiki.widgets.MyModalPopup({pageURL: '$pageURL'});">My Modal Popup</a>
141 {{/html}}
142 {{/velocity}}
143
144 Widgets bundled by default with XWiki build on top of the Model Popup class:
145 * [[Confirmation Box>>DevGuide.ConfirmationBox]] widget
146 * Jump to page widget (for tag xwiki-web-2.0): [[http://svn.xwiki.org/svnroot/xwiki/platform/web/tags/xwiki-web-2.0/standard/src/main/webapp/resources/js/xwiki/widgets/jumpToPage.js]]
147
148 =Tips=
149
150 Check out the Javascript code:
151 * for your wiki instance: **{{{http://localhost:8080/xwiki/bin/skin/resources/js/xwiki/widgets/modalPopup.js}}}**
152 * from svn (for tag xwiki-web-2.0): [[http://svn.xwiki.org/svnroot/xwiki/platform/web/tags/xwiki-web-2.0/standard/src/main/webapp/resources/js/xwiki/widgets/modalPopup.js]].
153
154 Check out the CSS code:
155 * for your wiki instance: **{{{http://localhost:8080/xwiki/bin/skin/resources/js/xwiki/widgets/modalPopup.css}}}**
156 * from svn (for tag xwiki-web-2.0): [[http://svn.xwiki.org/svnroot/xwiki/platform/web/tags/xwiki-web-2.0/standard/src/main/webapp/resources/js/xwiki/widgets/modalPopup.css]].

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected