Commit | Line | Data |
---|---|---|
78686995 AN |
1 | YUI.add('moodle-core-notification-dialogue', function (Y, NAME) { |
2 | ||
3 | var DIALOGUE_PREFIX, | |
4 | BASE, | |
5 | COUNT, | |
6 | CONFIRMYES, | |
7 | CONFIRMNO, | |
8 | TITLE, | |
9 | QUESTION, | |
10 | CSS; | |
11 | ||
12 | DIALOGUE_PREFIX = 'moodle-dialogue', | |
13 | BASE = 'notificationBase', | |
14 | COUNT = 0, | |
15 | CONFIRMYES = 'yesLabel', | |
16 | CONFIRMNO = 'noLabel', | |
17 | TITLE = 'title', | |
18 | QUESTION = 'question', | |
19 | CSS = { | |
20 | BASE : 'moodle-dialogue-base', | |
21 | WRAP : 'moodle-dialogue-wrap', | |
22 | HEADER : 'moodle-dialogue-hd', | |
23 | BODY : 'moodle-dialogue-bd', | |
24 | CONTENT : 'moodle-dialogue-content', | |
25 | FOOTER : 'moodle-dialogue-ft', | |
26 | HIDDEN : 'hidden', | |
27 | LIGHTBOX : 'moodle-dialogue-lightbox' | |
28 | }; | |
29 | ||
30 | // Set up the namespace once. | |
31 | M.core = M.core || {}; | |
32 | /** | |
33 | * The generic dialogue class for use in Moodle. | |
34 | * | |
35 | * @module moodle-core-notification | |
36 | * @submodule moodle-core-notification-dialogue | |
37 | */ | |
38 | ||
39 | var DIALOGUE_NAME = 'Moodle dialogue', | |
bf7c86cf | 40 | DIALOGUE, |
f2b235cb SH |
41 | DIALOGUE_FULLSCREEN_CLASS = DIALOGUE_PREFIX + '-fullscreen', |
42 | DIALOGUE_HIDDEN_CLASS = DIALOGUE_PREFIX + '-hidden', | |
f2b235cb | 43 | DIALOGUE_SELECTOR =' [role=dialog]', |
2a808cef | 44 | MENUBAR_SELECTOR = '[role=menubar]'; |
78686995 AN |
45 | |
46 | /** | |
47 | * A re-usable dialogue box with Moodle classes applied. | |
48 | * | |
49 | * @param {Object} config Object literal specifying the dialogue configuration properties. | |
50 | * @constructor | |
51 | * @class M.core.dialogue | |
52 | * @extends Y.Panel | |
53 | */ | |
54 | DIALOGUE = function(config) { | |
55 | COUNT++; | |
bf7c86cf | 56 | var id = 'moodle-dialogue-'+COUNT; |
78686995 AN |
57 | config.notificationBase = |
58 | Y.Node.create('<div class="'+CSS.BASE+'">') | |
59 | .append(Y.Node.create('<div id="'+id+'" role="dialog" aria-labelledby="'+id+'-header-text" class="'+CSS.WRAP+'"></div>') | |
baffb422 | 60 | .append(Y.Node.create('<div id="'+id+'-header-text" class="'+CSS.HEADER+' yui3-widget-hd"></div>')) |
78686995 AN |
61 | .append(Y.Node.create('<div class="'+CSS.BODY+' yui3-widget-bd"></div>')) |
62 | .append(Y.Node.create('<div class="'+CSS.FOOTER+' yui3-widget-ft"></div>'))); | |
63 | Y.one(document.body).append(config.notificationBase); | |
b59f2e3b SH |
64 | |
65 | if (config.additionalBaseClass) { | |
66 | config.notificationBase.addClass(config.additionalBaseClass); | |
67 | } | |
68 | ||
78686995 AN |
69 | config.srcNode = '#'+id; |
70 | config.width = config.width || '400px'; | |
71 | config.visible = config.visible || false; | |
4fd8adab | 72 | config.center = config.centered && true; |
78686995 AN |
73 | config.centered = false; |
74 | config.COUNT = COUNT; | |
75 | ||
b59f2e3b SH |
76 | if (config.width === 'auto') { |
77 | delete config.width; | |
78 | } | |
79 | ||
78686995 AN |
80 | // lightbox param to keep the stable versions API. |
81 | if (config.lightbox !== false) { | |
82 | config.modal = true; | |
83 | } | |
84 | delete config.lightbox; | |
85 | ||
86 | // closeButton param to keep the stable versions API. | |
87 | if (config.closeButton === false) { | |
88 | config.buttons = null; | |
89 | } else { | |
90 | config.buttons = [ | |
91 | { | |
92 | section: Y.WidgetStdMod.HEADER, | |
93 | classNames: 'closebutton', | |
94 | action: function () { | |
95 | this.hide(); | |
96 | } | |
97 | } | |
98 | ]; | |
99 | } | |
100 | DIALOGUE.superclass.constructor.apply(this, [config]); | |
101 | ||
102 | if (config.closeButton !== false) { | |
103 | // The buttons constructor does not allow custom attributes | |
104 | this.get('buttons').header[0].setAttribute('title', this.get('closeButtonTitle')); | |
105 | } | |
106 | }; | |
107 | Y.extend(DIALOGUE, Y.Panel, { | |
d61c96b6 DW |
108 | // Window resize event listener. |
109 | _resizeevent : null, | |
110 | // Orientation change event listener. | |
111 | _orientationevent : null, | |
112 | ||
bf7c86cf DW |
113 | /** |
114 | * Initialise the dialogue. | |
115 | * | |
116 | * @method initializer | |
117 | * @return void | |
118 | */ | |
119 | initializer : function(config) { | |
120 | var bb; | |
121 | ||
78686995 AN |
122 | this.render(); |
123 | this.show(); | |
bf7c86cf | 124 | this.after('visibleChange', this.visibilityChanged, this); |
dd66b6ab DW |
125 | if (config.center) { |
126 | this.centerDialogue(); | |
127 | } | |
bf7c86cf DW |
128 | if (!config.visible) { |
129 | this.hide(); | |
130 | } | |
78686995 AN |
131 | this.set('COUNT', COUNT); |
132 | ||
133 | // Workaround upstream YUI bug http://yuilibrary.com/projects/yui3/ticket/2532507 | |
134 | // and allow setting of z-index in theme. | |
d61c96b6 | 135 | bb = this.get('boundingBox'); |
bf7c86cf DW |
136 | |
137 | if (config.extraClasses) { | |
138 | Y.Array.each(config.extraClasses, bb.addClass, bb); | |
139 | } | |
140 | if (config.visible) { | |
141 | this.applyZIndex(); | |
142 | } | |
143 | }, | |
144 | ||
145 | /** | |
146 | * Either set the zindex to the supplied value, or set it to one more than the highest existing | |
147 | * dialog in the page. | |
148 | * | |
149 | * @method visibilityChanged | |
150 | * @return void | |
151 | */ | |
152 | applyZIndex : function() { | |
153 | var highestzindex = 0, | |
f2b235cb SH |
154 | bb = this.get('boundingBox'), |
155 | zindex = this.get('zIndex'); | |
156 | if (zindex) { | |
bf7c86cf | 157 | // The zindex was specified so we should use that. |
f2b235cb | 158 | bb.setStyle('zIndex', zindex); |
bf7c86cf | 159 | } else { |
f2b235cb SH |
160 | // Determine the correct zindex by looking at all existing dialogs and menubars in the page. |
161 | Y.all(DIALOGUE_SELECTOR+', '+MENUBAR_SELECTOR).each(function (node) { | |
162 | var zindex = this.findZIndex(node); | |
163 | if (zindex > highestzindex) { | |
164 | highestzindex = zindex; | |
bf7c86cf | 165 | } |
f2b235cb | 166 | }, this); |
bf7c86cf DW |
167 | // Only set the zindex if we found a wrapper. |
168 | if (highestzindex > 0) { | |
f2b235cb | 169 | bb.setStyle('zIndex', (highestzindex + 1).toString()); |
bf7c86cf DW |
170 | } |
171 | } | |
172 | }, | |
173 | ||
f2b235cb SH |
174 | /** |
175 | * Finds the zIndex of the given node or its parent. | |
176 | * | |
177 | * @method findZIndex | |
178 | * @param Node node | |
179 | * @returns int Return either the zIndex of 0 if one was not found. | |
180 | */ | |
181 | findZIndex : function(node) { | |
182 | // In most cases the zindex is set on the parent of the dialog. | |
183 | var zindex = node.getStyle('zIndex') || node.ancestor().getStyle('zIndex'); | |
184 | if (zindex) { | |
185 | return parseInt(zindex, 10); | |
186 | } | |
187 | return 0; | |
188 | }, | |
189 | ||
bf7c86cf DW |
190 | /** |
191 | * Event listener for the visibility changed event. | |
192 | * | |
193 | * @method visibilityChanged | |
194 | * @return void | |
195 | */ | |
78686995 AN |
196 | visibilityChanged : function(e) { |
197 | var titlebar; | |
198 | if (e.attrName === 'visible') { | |
199 | this.get('maskNode').addClass(CSS.LIGHTBOX); | |
d61c96b6 DW |
200 | if (e.prevVal && !e.newVal) { |
201 | if (this._resizeevent) { | |
202 | this._resizeevent.detach(); | |
203 | this._resizeevent = null; | |
204 | } | |
205 | if (this._orientationevent) { | |
206 | this._orientationevent.detach(); | |
207 | this._orientationevent = null; | |
208 | } | |
209 | } | |
bf7c86cf DW |
210 | if (!e.prevVal && e.newVal) { |
211 | // This needs to be done each time the dialog is shown as new dialogs may have been opened. | |
212 | this.applyZIndex(); | |
213 | // This needs to be done each time the dialog is shown as the window may have been resized. | |
214 | this.makeResponsive(); | |
215 | if (!this.shouldResizeFullscreen()) { | |
216 | if (this.get('draggable')) { | |
217 | titlebar = '#' + this.get('id') + ' .' + CSS.HEADER; | |
218 | this.plug(Y.Plugin.Drag, {handles : [titlebar]}); | |
219 | Y.one(titlebar).setStyle('cursor', 'move'); | |
220 | } | |
221 | } | |
222 | } | |
78686995 AN |
223 | if (this.get('center') && !e.prevVal && e.newVal) { |
224 | this.centerDialogue(); | |
225 | } | |
78686995 AN |
226 | } |
227 | }, | |
bf7c86cf DW |
228 | /** |
229 | * If the responsive attribute is set on the dialog, and the window size is | |
230 | * smaller than the responsive width - make the dialog fullscreen. | |
231 | * | |
232 | * @method makeResponsive | |
233 | * @return void | |
234 | */ | |
235 | makeResponsive : function() { | |
78686995 | 236 | var bb = this.get('boundingBox'), |
bf7c86cf DW |
237 | content; |
238 | ||
239 | if (this.shouldResizeFullscreen()) { | |
d61c96b6 DW |
240 | // Make this dialogue fullscreen on a small screen. |
241 | // Disable the page scrollbars. | |
bf7c86cf | 242 | |
d61c96b6 DW |
243 | // Size and position the fullscreen dialog. |
244 | ||
2a808cef DW |
245 | bb.addClass(DIALOGUE_FULLSCREEN_CLASS); |
246 | bb.setStyles({'left' : null, | |
247 | 'top' : null, | |
248 | 'width' : null, | |
249 | 'height' : null, | |
250 | 'right' : null, | |
251 | 'bottom' : null}); | |
d61c96b6 DW |
252 | |
253 | content = Y.one('#' + this.get('id') + ' .' + CSS.BODY); | |
254 | content.setStyle('overflow', 'auto'); | |
d61c96b6 DW |
255 | } else { |
256 | if (this.get('responsive')) { | |
257 | // We must reset any of the fullscreen changes. | |
2a808cef DW |
258 | bb.removeClass(DIALOGUE_FULLSCREEN_CLASS) |
259 | .setStyles({'width' : this.get('width'), | |
bf7c86cf | 260 | 'height' : this.get('height')}); |
d61c96b6 DW |
261 | content = Y.one('#' + this.get('id') + ' .' + CSS.BODY); |
262 | content.setStyle('overflow', 'inherit'); | |
263 | ||
d61c96b6 | 264 | } |
d61c96b6 | 265 | } |
bf7c86cf DW |
266 | }, |
267 | /** | |
268 | * Center the dialog on the screen. | |
269 | * | |
270 | * @method centerDialogue | |
271 | * @return void | |
272 | */ | |
273 | centerDialogue : function() { | |
274 | var bb = this.get('boundingBox'), | |
275 | hidden = bb.hasClass(DIALOGUE_HIDDEN_CLASS), | |
276 | x, | |
277 | y; | |
278 | ||
279 | // Don't adjust the position if we are in full screen mode. | |
280 | if (this.shouldResizeFullscreen()) { | |
281 | return; | |
282 | } | |
283 | if (hidden) { | |
284 | bb.setStyle('top', '-1000px').removeClass(DIALOGUE_HIDDEN_CLASS); | |
285 | } | |
286 | x = Math.max(Math.round((bb.get('winWidth') - bb.get('offsetWidth'))/2), 15); | |
287 | y = Math.max(Math.round((bb.get('winHeight') - bb.get('offsetHeight'))/2), 15) + Y.one(window).get('scrollTop'); | |
288 | bb.setStyles({ 'left' : x, 'top' : y}); | |
78686995 AN |
289 | |
290 | if (hidden) { | |
bf7c86cf | 291 | bb.addClass(DIALOGUE_HIDDEN_CLASS); |
78686995 | 292 | } |
d61c96b6 | 293 | }, |
bf7c86cf DW |
294 | /** |
295 | * Return if this dialogue should be fullscreen or not. | |
296 | * Responsive attribute must be true and we should not be in an iframe and the screen width should | |
297 | * be less than the responsive width. | |
298 | * | |
299 | * @method shouldResizeFullscreen | |
300 | * @return Boolean | |
301 | */ | |
302 | shouldResizeFullscreen : function() { | |
303 | return (window === window.parent) && this.get('responsive') && | |
304 | Math.floor(Y.one(document.body).get('winWidth')) < this.get('responsiveWidth'); | |
2eaaae00 JF |
305 | }, |
306 | ||
307 | /** | |
308 | * Override the show method to set keyboard focus on the dialogue. | |
309 | * | |
310 | * @method show | |
311 | * @return void | |
312 | */ | |
313 | show : function() { | |
314 | var result = null, | |
315 | header = this.headerNode, | |
316 | content = this.bodyNode; | |
317 | ||
318 | result = DIALOGUE.superclass.show.call(this); | |
319 | if (header && header !== '') { | |
320 | header.focus(); | |
321 | } else if (content && content !== '') { | |
322 | content.focus(); | |
323 | } | |
324 | return result; | |
78686995 AN |
325 | } |
326 | }, { | |
327 | NAME : DIALOGUE_NAME, | |
328 | CSS_PREFIX : DIALOGUE_PREFIX, | |
329 | ATTRS : { | |
330 | notificationBase : { | |
331 | ||
332 | }, | |
333 | ||
334 | /** | |
335 | * Whether to display the dialogue modally and with a | |
336 | * lightbox style. | |
337 | * | |
338 | * @attribute lightbox | |
339 | * @type Boolean | |
340 | * @default true | |
341 | */ | |
342 | lightbox : { | |
343 | validator : Y.Lang.isBoolean, | |
344 | value : true | |
345 | }, | |
346 | ||
347 | /** | |
348 | * Whether to display a close button on the dialogue. | |
349 | * | |
350 | * Note, we do not recommend hiding the close button as this has | |
351 | * potential accessibility concerns. | |
352 | * | |
353 | * @attribute closeButton | |
354 | * @type Boolean | |
355 | * @default true | |
356 | */ | |
357 | closeButton : { | |
358 | validator : Y.Lang.isBoolean, | |
359 | value : true | |
360 | }, | |
361 | ||
362 | /** | |
363 | * The title for the close button if one is to be shown. | |
364 | * | |
365 | * @attribute closeButtonTitle | |
366 | * @type String | |
367 | * @default 'Close' | |
368 | */ | |
369 | closeButtonTitle : { | |
370 | validator : Y.Lang.isString, | |
371 | value : 'Close' | |
372 | }, | |
373 | ||
374 | /** | |
375 | * Whether to display the dialogue centrally on the screen. | |
376 | * | |
377 | * @attribute center | |
378 | * @type Boolean | |
379 | * @default true | |
380 | */ | |
381 | center : { | |
382 | validator : Y.Lang.isBoolean, | |
383 | value : true | |
384 | }, | |
385 | ||
386 | /** | |
387 | * Whether to make the dialogue movable around the page. | |
388 | * | |
389 | * @attribute draggable | |
390 | * @type Boolean | |
391 | * @default false | |
392 | */ | |
393 | draggable : { | |
394 | validator : Y.Lang.isBoolean, | |
395 | value : false | |
396 | }, | |
bf7c86cf DW |
397 | |
398 | /** | |
399 | * Used to generate a unique id for the dialogue. | |
400 | * | |
401 | * @attribute COUNT | |
402 | * @type Integer | |
403 | * @default 0 | |
404 | */ | |
78686995 AN |
405 | COUNT: { |
406 | value: 0 | |
d61c96b6 | 407 | }, |
bf7c86cf DW |
408 | |
409 | /** | |
410 | * Used to disable the fullscreen resizing behaviour if required. | |
411 | * | |
412 | * @attribute responsive | |
413 | * @type Boolean | |
414 | * @default true | |
415 | */ | |
d61c96b6 DW |
416 | responsive : { |
417 | validator : Y.Lang.isBoolean, | |
418 | value : true | |
419 | }, | |
bf7c86cf DW |
420 | |
421 | /** | |
422 | * The width that this dialogue should be resized to fullscreen. | |
423 | * | |
424 | * @attribute responsiveWidth | |
425 | * @type Integer | |
426 | * @default 768 | |
427 | */ | |
d61c96b6 DW |
428 | responsiveWidth : { |
429 | value : 768 | |
78686995 AN |
430 | } |
431 | } | |
432 | }); | |
433 | ||
434 | M.core.dialogue = DIALOGUE; | |
435 | ||
436 | ||
437 | }, '@VERSION@', {"requires": ["base", "node", "panel", "event-key", "dd-plugin"]}); |