on-demand release 3.0beta+
[moodle.git] / lib / yui / build / moodle-core-notification-dialogue / moodle-core-notification-dialogue-debug.js
CommitLineData
78686995
AN
1YUI.add('moodle-core-notification-dialogue', function (Y, NAME) {
2
3var DIALOGUE_PREFIX,
4 BASE,
78686995
AN
5 CONFIRMYES,
6 CONFIRMNO,
7 TITLE,
8 QUESTION,
9 CSS;
10
11DIALOGUE_PREFIX = 'moodle-dialogue',
12BASE = 'notificationBase',
78686995
AN
13CONFIRMYES = 'yesLabel',
14CONFIRMNO = 'noLabel',
15TITLE = 'title',
16QUESTION = 'question',
17CSS = {
18 BASE : 'moodle-dialogue-base',
19 WRAP : 'moodle-dialogue-wrap',
20 HEADER : 'moodle-dialogue-hd',
21 BODY : 'moodle-dialogue-bd',
22 CONTENT : 'moodle-dialogue-content',
23 FOOTER : 'moodle-dialogue-ft',
24 HIDDEN : 'hidden',
25 LIGHTBOX : 'moodle-dialogue-lightbox'
26};
27
28// Set up the namespace once.
29M.core = M.core || {};
30/**
31 * The generic dialogue class for use in Moodle.
32 *
33 * @module moodle-core-notification
34 * @submodule moodle-core-notification-dialogue
35 */
36
37var DIALOGUE_NAME = 'Moodle dialogue',
bf7c86cf 38 DIALOGUE,
f2b235cb
SH
39 DIALOGUE_FULLSCREEN_CLASS = DIALOGUE_PREFIX + '-fullscreen',
40 DIALOGUE_HIDDEN_CLASS = DIALOGUE_PREFIX + '-hidden',
f2b235cb 41 DIALOGUE_SELECTOR =' [role=dialog]',
586d393f 42 MENUBAR_SELECTOR = '[role=menubar]',
ecf02bf5
BB
43 DOT = '.',
44 HAS_ZINDEX = 'moodle-has-zindex',
586d393f 45 CAN_RECEIVE_FOCUS_SELECTOR = 'input:not([type="hidden"]), a[href], button, textarea, select, [tabindex]';
78686995
AN
46
47/**
48 * A re-usable dialogue box with Moodle classes applied.
49 *
4246e5c7 50 * @param {Object} c Object literal specifying the dialogue configuration properties.
78686995
AN
51 * @constructor
52 * @class M.core.dialogue
1f777e5c 53 * @extends Panel
78686995 54 */
4246e5c7
AN
55DIALOGUE = function(c) {
56 var config = Y.clone(c);
d10e6118
AN
57 config.COUNT = Y.stamp(this);
58 var id = 'moodle-dialogue-' + config.COUNT;
78686995
AN
59 config.notificationBase =
60 Y.Node.create('<div class="'+CSS.BASE+'">')
557f44d9
AN
61 .append(Y.Node.create('<div id="' + id + '" role="dialog" ' +
62 'aria-labelledby="' + id + '-header-text" class="' + CSS.WRAP + '"></div>')
63 .append(Y.Node.create('<div id="' + id + '-header-text" class="'+CSS.HEADER+' yui3-widget-hd"></div>'))
78686995
AN
64 .append(Y.Node.create('<div class="'+CSS.BODY+' yui3-widget-bd"></div>'))
65 .append(Y.Node.create('<div class="'+CSS.FOOTER+' yui3-widget-ft"></div>')));
66 Y.one(document.body).append(config.notificationBase);
b59f2e3b
SH
67
68 if (config.additionalBaseClass) {
69 config.notificationBase.addClass(config.additionalBaseClass);
70 }
71
78686995 72 config.srcNode = '#'+id;
78686995 73
78686995
AN
74 // closeButton param to keep the stable versions API.
75 if (config.closeButton === false) {
76 config.buttons = null;
77 } else {
78 config.buttons = [
79 {
80 section: Y.WidgetStdMod.HEADER,
81 classNames: 'closebutton',
82 action: function () {
83 this.hide();
84 }
85 }
86 ];
87 }
88 DIALOGUE.superclass.constructor.apply(this, [config]);
89
90 if (config.closeButton !== false) {
91 // The buttons constructor does not allow custom attributes
92 this.get('buttons').header[0].setAttribute('title', this.get('closeButtonTitle'));
93 }
94};
95Y.extend(DIALOGUE, Y.Panel, {
d61c96b6
DW
96 // Window resize event listener.
97 _resizeevent : null,
98 // Orientation change event listener.
99 _orientationevent : null,
1389bcd7 100 _calculatedzindex : false,
1f777e5c 101
d247a501
AN
102 /**
103 * The original position of the dialogue before it was reposition to
104 * avoid browser jumping.
105 *
106 * @property _originalPosition
107 * @protected
108 * @type Array
109 */
110 _originalPosition: null,
111
bf7c86cf
DW
112 /**
113 * Initialise the dialogue.
114 *
115 * @method initializer
bf7c86cf 116 */
2f5c1441 117 initializer : function() {
bf7c86cf
DW
118 var bb;
119
d9bf4be4
SH
120 if (this.get('render')) {
121 this.render();
122 }
bf7c86cf 123 this.after('visibleChange', this.visibilityChanged, this);
2f5c1441 124 if (this.get('center')) {
dd66b6ab
DW
125 this.centerDialogue();
126 }
78686995 127
73747aea 128 if (this.get('modal')) {
f56ae5a7
RW
129 // If we're a modal then make sure our container is ARIA
130 // hidden by default. ARIA visibility is managed for modal dialogues.
131 this.get(BASE).set('aria-hidden', 'true');
73747aea
AN
132 this.plug(Y.M.core.LockScroll);
133 }
134
78686995
AN
135 // Workaround upstream YUI bug http://yuilibrary.com/projects/yui3/ticket/2532507
136 // and allow setting of z-index in theme.
d61c96b6 137 bb = this.get('boundingBox');
ecf02bf5 138 bb.addClass(HAS_ZINDEX);
bf7c86cf 139
2f5c1441
AN
140 // Add any additional classes that were specified.
141 Y.Array.each(this.get('extraClasses'), bb.addClass, bb);
142
143 if (this.get('visible')) {
bf7c86cf
DW
144 this.applyZIndex();
145 }
1389bcd7
JF
146 // Recalculate the zIndex every time the modal is altered.
147 this.on('maskShow', this.applyZIndex);
d247a501
AN
148
149 this.on('maskShow', function() {
150 // When the mask shows, position the boundingBox at the top-left of the window such that when it is
151 // focused, the position does not change.
152 var w = Y.one(Y.config.win),
153 bb = this.get('boundingBox');
154
155 if (!this.get('center')) {
156 this._originalPosition = bb.getXY();
157 }
2af57bdb
AN
158
159 if (bb.getStyle('position') !== 'fixed') {
160 // If the boundingBox has been positioned in a fixed manner, then it will not position correctly to scrollTop.
161 bb.setStyles({
162 top: w.get('scrollTop'),
163 left: w.get('scrollLeft')
164 });
165 }
d247a501 166 }, this);
0860dd78
AN
167
168 // Remove the dialogue from the DOM when it is destroyed.
169 this.after('destroyedChange', function(){
170 this.get(BASE).remove(true);
171 }, this);
bf7c86cf
DW
172 },
173
174 /**
175 * Either set the zindex to the supplied value, or set it to one more than the highest existing
176 * dialog in the page.
177 *
1f777e5c 178 * @method applyZIndex
bf7c86cf
DW
179 */
180 applyZIndex : function() {
1389bcd7
JF
181 var highestzindex = 1,
182 zindexvalue = 1,
f2b235cb 183 bb = this.get('boundingBox'),
1389bcd7 184 ol = this.get('maskNode'),
f2b235cb 185 zindex = this.get('zIndex');
1389bcd7 186 if (zindex !== 0 && !this._calculatedzindex) {
bf7c86cf 187 // The zindex was specified so we should use that.
f2b235cb 188 bb.setStyle('zIndex', zindex);
bf7c86cf 189 } else {
f2b235cb 190 // Determine the correct zindex by looking at all existing dialogs and menubars in the page.
ecf02bf5 191 Y.all(DIALOGUE_SELECTOR + ', ' + MENUBAR_SELECTOR + ', ' + DOT + HAS_ZINDEX).each(function (node) {
f2b235cb
SH
192 var zindex = this.findZIndex(node);
193 if (zindex > highestzindex) {
194 highestzindex = zindex;
bf7c86cf 195 }
f2b235cb 196 }, this);
bf7c86cf 197 // Only set the zindex if we found a wrapper.
1389bcd7
JF
198 zindexvalue = (highestzindex + 1).toString();
199 bb.setStyle('zIndex', zindexvalue);
1389bcd7 200 this.set('zIndex', zindexvalue);
0ef60744
AN
201 if (this.get('modal')) {
202 ol.setStyle('zIndex', zindexvalue);
5298d02f 203
204 // In IE8, the z-indexes do not take effect properly unless you toggle
205 // the lightbox from 'fixed' to 'static' and back. This code does so
206 // using the minimum setTimeouts that still actually work.
207 if (Y.UA.ie && Y.UA.compareVersions(Y.UA.ie, 9) < 0) {
208 setTimeout(function() {
209 ol.setStyle('position', 'static');
210 setTimeout(function() {
211 ol.setStyle('position', 'fixed');
212 }, 0);
213 }, 0);
214 }
0ef60744 215 }
1389bcd7 216 this._calculatedzindex = true;
bf7c86cf
DW
217 }
218 },
219
f2b235cb
SH
220 /**
221 * Finds the zIndex of the given node or its parent.
222 *
223 * @method findZIndex
1f777e5c
AN
224 * @param {Node} node The Node to apply the zIndex to.
225 * @return {Number} Either the zIndex, or 0 if one was not found.
f2b235cb
SH
226 */
227 findZIndex : function(node) {
228 // In most cases the zindex is set on the parent of the dialog.
229 var zindex = node.getStyle('zIndex') || node.ancestor().getStyle('zIndex');
230 if (zindex) {
231 return parseInt(zindex, 10);
232 }
233 return 0;
234 },
235
bf7c86cf
DW
236 /**
237 * Event listener for the visibility changed event.
238 *
239 * @method visibilityChanged
1f777e5c 240 * @param {EventFacade} e
bf7c86cf 241 */
78686995 242 visibilityChanged : function(e) {
586d393f 243 var titlebar, bb;
78686995
AN
244 if (e.attrName === 'visible') {
245 this.get('maskNode').addClass(CSS.LIGHTBOX);
d61c96b6 246 if (e.prevVal && !e.newVal) {
586d393f 247 bb = this.get('boundingBox');
d61c96b6
DW
248 if (this._resizeevent) {
249 this._resizeevent.detach();
250 this._resizeevent = null;
251 }
252 if (this._orientationevent) {
253 this._orientationevent.detach();
254 this._orientationevent = null;
255 }
586d393f 256 bb.detach('key', this.keyDelegation);
d61c96b6 257 }
bf7c86cf
DW
258 if (!e.prevVal && e.newVal) {
259 // This needs to be done each time the dialog is shown as new dialogs may have been opened.
260 this.applyZIndex();
261 // This needs to be done each time the dialog is shown as the window may have been resized.
262 this.makeResponsive();
263 if (!this.shouldResizeFullscreen()) {
264 if (this.get('draggable')) {
265 titlebar = '#' + this.get('id') + ' .' + CSS.HEADER;
266 this.plug(Y.Plugin.Drag, {handles : [titlebar]});
267 Y.one(titlebar).setStyle('cursor', 'move');
268 }
269 }
586d393f 270 this.keyDelegation();
bf7c86cf 271 }
78686995
AN
272 if (this.get('center') && !e.prevVal && e.newVal) {
273 this.centerDialogue();
274 }
78686995
AN
275 }
276 },
bf7c86cf
DW
277 /**
278 * If the responsive attribute is set on the dialog, and the window size is
279 * smaller than the responsive width - make the dialog fullscreen.
280 *
281 * @method makeResponsive
bf7c86cf
DW
282 */
283 makeResponsive : function() {
2af57bdb 284 var bb = this.get('boundingBox');
bf7c86cf
DW
285
286 if (this.shouldResizeFullscreen()) {
d61c96b6
DW
287 // Make this dialogue fullscreen on a small screen.
288 // Disable the page scrollbars.
bf7c86cf 289
d61c96b6
DW
290 // Size and position the fullscreen dialog.
291
2a808cef
DW
292 bb.addClass(DIALOGUE_FULLSCREEN_CLASS);
293 bb.setStyles({'left' : null,
294 'top' : null,
295 'width' : null,
296 'height' : null,
297 'right' : null,
298 'bottom' : null});
d61c96b6
DW
299 } else {
300 if (this.get('responsive')) {
301 // We must reset any of the fullscreen changes.
2a808cef
DW
302 bb.removeClass(DIALOGUE_FULLSCREEN_CLASS)
303 .setStyles({'width' : this.get('width'),
bf7c86cf 304 'height' : this.get('height')});
d61c96b6 305 }
d61c96b6 306 }
bf7c86cf
DW
307 },
308 /**
309 * Center the dialog on the screen.
310 *
311 * @method centerDialogue
bf7c86cf
DW
312 */
313 centerDialogue : function() {
314 var bb = this.get('boundingBox'),
315 hidden = bb.hasClass(DIALOGUE_HIDDEN_CLASS),
316 x,
317 y;
318
319 // Don't adjust the position if we are in full screen mode.
320 if (this.shouldResizeFullscreen()) {
321 return;
322 }
323 if (hidden) {
324 bb.setStyle('top', '-1000px').removeClass(DIALOGUE_HIDDEN_CLASS);
325 }
326 x = Math.max(Math.round((bb.get('winWidth') - bb.get('offsetWidth'))/2), 15);
327 y = Math.max(Math.round((bb.get('winHeight') - bb.get('offsetHeight'))/2), 15) + Y.one(window).get('scrollTop');
328 bb.setStyles({ 'left' : x, 'top' : y});
78686995
AN
329
330 if (hidden) {
bf7c86cf 331 bb.addClass(DIALOGUE_HIDDEN_CLASS);
78686995 332 }
2af57bdb 333 this.makeResponsive();
d61c96b6 334 },
bf7c86cf 335 /**
1f777e5c
AN
336 * Return whether this dialogue should be fullscreen or not.
337 *
bf7c86cf
DW
338 * Responsive attribute must be true and we should not be in an iframe and the screen width should
339 * be less than the responsive width.
340 *
341 * @method shouldResizeFullscreen
1f777e5c 342 * @return {Boolean}
bf7c86cf
DW
343 */
344 shouldResizeFullscreen : function() {
345 return (window === window.parent) && this.get('responsive') &&
346 Math.floor(Y.one(document.body).get('winWidth')) < this.get('responsiveWidth');
2eaaae00
JF
347 },
348
d247a501 349 show: function() {
2eaaae00
JF
350 var result = null,
351 header = this.headerNode,
e5ddec38 352 content = this.bodyNode,
c1660772 353 focusSelector = this.get('focusOnShowSelector'),
e5ddec38 354 focusNode = null;
2eaaae00 355
b959e508
AN
356 result = DIALOGUE.superclass.show.call(this);
357
d247a501
AN
358 if (!this.get('center') && this._originalPosition) {
359 // Restore the dialogue position to it's location before it was moved at show time.
360 this.get('boundingBox').setXY(this._originalPosition);
361 }
362
73747aea
AN
363 // Lock scroll if the plugin is present.
364 if (this.lockScroll) {
b959e508
AN
365 // We need to force the scroll locking for full screen dialogues, even if they have a small vertical size to
366 // prevent the background scrolling while the dialogue is open.
367 this.lockScroll.enableScrollLock(this.shouldResizeFullscreen());
73747aea
AN
368 }
369
f56ae5a7
RW
370 // Only do accessibility hiding for modals because the ARIA spec
371 // says that all ARIA dialogues should be modal.
372 if (this.get('modal')) {
373 // Make this dialogue visible to screen readers.
374 this.setAccessibilityVisible();
375 }
376
c1660772
DW
377 // Try and find a node to focus on using the focusOnShowSelector attribute.
378 if (focusSelector !== null) {
e5ddec38 379 focusNode = this.get('boundingBox').one(focusSelector);
2eaaae00 380 }
e5ddec38
DW
381 if (!focusNode) {
382 // Fall back to the header or the content if no focus node was found yet.
383 if (header && header !== '') {
384 focusNode = header;
385 } else if (content && content !== '') {
386 focusNode = content;
387 }
388 }
c1660772
DW
389 if (focusNode) {
390 focusNode.focus();
391 }
2eaaae00 392 return result;
586d393f 393 },
73747aea 394
bf24abd2
AN
395 hide: function(e) {
396 if (e) {
397 // If the event was closed by an escape key event, then we need to check that this
398 // dialogue is currently focused to prevent closing all dialogues in the stack.
399 if (e.type === 'key' && e.keyCode === 27 && !this.get('focused')) {
400 return;
401 }
402 }
403
f56ae5a7
RW
404 if (this.get('modal')) {
405 // Hide this dialogue from screen readers.
406 this.setAccessibilityHidden();
407 }
408
73747aea
AN
409 // Unlock scroll if the plugin is present.
410 if (this.lockScroll) {
411 this.lockScroll.disableScrollLock();
412 }
413
414 return DIALOGUE.superclass.hide.call(this, arguments);
415 },
586d393f 416 /**
417 * Setup key delegation to keep tabbing within the open dialogue.
418 *
419 * @method keyDelegation
420 */
421 keyDelegation : function() {
422 var bb = this.get('boundingBox');
423 bb.delegate('key', function(e){
424 var target = e.target;
425 var direction = 'forward';
426 if (e.shiftKey) {
427 direction = 'backward';
428 }
429 if (this.trapFocus(target, direction)) {
430 e.preventDefault();
431 }
432 }, 'down:9', CAN_RECEIVE_FOCUS_SELECTOR, this);
433 },
1f777e5c 434
586d393f 435 /**
436 * Trap the tab focus within the open modal.
437 *
1f777e5c
AN
438 * @method trapFocus
439 * @param {string} target the element target
440 * @param {string} direction tab key for forward and tab+shift for backward
441 * @return {Boolean} The result of the focus action.
586d393f 442 */
443 trapFocus : function(target, direction) {
444 var bb = this.get('boundingBox'),
445 firstitem = bb.one(CAN_RECEIVE_FOCUS_SELECTOR),
446 lastitem = bb.all(CAN_RECEIVE_FOCUS_SELECTOR).pop();
447
448 if (target === lastitem && direction === 'forward') { // Tab key.
449 return firstitem.focus();
450 } else if (target === firstitem && direction === 'backward') { // Tab+shift key.
451 return lastitem.focus();
452 }
f56ae5a7
RW
453 },
454
455 /**
456 * Sets the appropriate aria attributes on this dialogue and the other
457 * elements in the DOM to ensure that screen readers are able to navigate
458 * the dialogue popup correctly.
459 *
460 * @method setAccessibilityVisible
461 */
462 setAccessibilityVisible: function() {
463 // Get the element that contains this dialogue because we need it
464 // to filter out from the document.body child elements.
465 var container = this.get(BASE);
466 // Keep a record of any elements we change so that they can be reverted later.
467 this.hiddenSiblings = [];
468
469 // We need to get a list containing each sibling element and the shallowest
470 // non-ancestral nodes in the DOM. We can shortcut this a little by leveraging
471 // the fact that this dialogue is always appended to the document body therefore
472 // it's siblings are the shallowest non-ancestral nodes. If that changes then
473 // this code should also be updated.
474 Y.one(document.body).get('children').each(function(node) {
475 // Skip the element that contains us.
476 if (node !== container) {
477 var hidden = node.get('aria-hidden');
478 // If they are already hidden we can ignore them.
479 if (hidden !== 'true') {
480 // Save their current state.
481 node.setData('previous-aria-hidden', hidden);
482 this.hiddenSiblings.push(node);
483
484 // Hide this node from screen readers.
485 node.set('aria-hidden', 'true');
486 }
487 }
488 }, this);
489
490 // Make us visible to screen readers.
491 container.set('aria-hidden', 'false');
492 },
493
494 /**
495 * Restores the aria visibility on the DOM elements changed when displaying
496 * the dialogue popup and makes the dialogue aria hidden to allow screen
497 * readers to navigate the main page correctly when the dialogue is closed.
498 *
499 * @method setAccessibilityHidden
500 */
501 setAccessibilityHidden: function() {
502 var container = this.get(BASE);
503 container.set('aria-hidden', 'true');
504
505 // Restore the sibling nodes back to their original values.
506 Y.Array.each(this.hiddenSiblings, function(node) {
507 var previousValue = node.getData('previous-aria-hidden');
508 // If the element didn't previously have an aria-hidden attribute
509 // then we can just remove the one we set.
510 if (previousValue === null) {
511 node.removeAttribute('aria-hidden');
512 } else {
513 // Otherwise set it back to the old value (which will be false).
514 node.set('aria-hidden', previousValue);
515 }
516 });
517
518 // Clear the cache. No longer need to store these.
519 this.hiddenSiblings = [];
78686995
AN
520 }
521}, {
522 NAME : DIALOGUE_NAME,
523 CSS_PREFIX : DIALOGUE_PREFIX,
524 ATTRS : {
525 notificationBase : {
526
527 },
528
529 /**
530 * Whether to display the dialogue modally and with a
531 * lightbox style.
532 *
533 * @attribute lightbox
534 * @type Boolean
535 * @default true
cff3b8fe 536 * @deprecated Since Moodle 2.7. Please use modal instead.
78686995 537 */
cff3b8fe
AN
538 lightbox: {
539 lazyAdd: false,
540 setter: function(value) {
557f44d9
AN
541 Y.log("The lightbox attribute of M.core.dialogue has been deprecated since Moodle 2.7, " +
542 "please use the modal attribute instead",
cff3b8fe
AN
543 'warn', 'moodle-core-notification-dialogue');
544 this.set('modal', value);
545 }
78686995
AN
546 },
547
548 /**
549 * Whether to display a close button on the dialogue.
550 *
551 * Note, we do not recommend hiding the close button as this has
552 * potential accessibility concerns.
553 *
554 * @attribute closeButton
555 * @type Boolean
556 * @default true
557 */
558 closeButton : {
559 validator : Y.Lang.isBoolean,
560 value : true
561 },
562
563 /**
564 * The title for the close button if one is to be shown.
565 *
566 * @attribute closeButtonTitle
567 * @type String
568 * @default 'Close'
569 */
570 closeButtonTitle : {
571 validator : Y.Lang.isString,
0d1d5423 572 value: M.util.get_string('closebuttontitle', 'moodle')
78686995
AN
573 },
574
575 /**
576 * Whether to display the dialogue centrally on the screen.
577 *
578 * @attribute center
579 * @type Boolean
580 * @default true
581 */
582 center : {
583 validator : Y.Lang.isBoolean,
584 value : true
585 },
586
587 /**
588 * Whether to make the dialogue movable around the page.
589 *
590 * @attribute draggable
591 * @type Boolean
592 * @default false
593 */
594 draggable : {
595 validator : Y.Lang.isBoolean,
596 value : false
597 },
bf7c86cf
DW
598
599 /**
600 * Used to generate a unique id for the dialogue.
601 *
602 * @attribute COUNT
d10e6118
AN
603 * @type String
604 * @default null
bf7c86cf 605 */
78686995 606 COUNT: {
d10e6118 607 value: null
d61c96b6 608 },
bf7c86cf
DW
609
610 /**
611 * Used to disable the fullscreen resizing behaviour if required.
612 *
613 * @attribute responsive
614 * @type Boolean
615 * @default true
616 */
d61c96b6
DW
617 responsive : {
618 validator : Y.Lang.isBoolean,
619 value : true
620 },
bf7c86cf
DW
621
622 /**
623 * The width that this dialogue should be resized to fullscreen.
624 *
625 * @attribute responsiveWidth
1f777e5c 626 * @type Number
bf7c86cf
DW
627 * @default 768
628 */
d61c96b6
DW
629 responsiveWidth : {
630 value : 768
c1660772
DW
631 },
632
633 /**
634 * Selector to a node that should recieve focus when this dialogue is shown.
635 *
636 * The default behaviour is to focus on the header.
637 *
638 * @attribute focusOnShowSelector
639 * @default null
640 * @type String
641 */
642 focusOnShowSelector: {
643 value: null
78686995 644 }
c1660772 645
78686995
AN
646 }
647});
648
16d02434
AN
649Y.Base.modifyAttrs(DIALOGUE, {
650 /**
651 * String with units, or number, representing the width of the Widget.
652 * If a number is provided, the default unit, defined by the Widgets
653 * DEF_UNIT, property is used.
654 *
655 * If a value of 'auto' is used, then an empty String is instead
656 * returned.
657 *
658 * @attribute width
659 * @default '400px'
660 * @type {String|Number}
661 */
662 width: {
663 value: '400px',
664 setter: function(value) {
665 if (value === 'auto') {
666 return '';
667 }
668 return value;
669 }
c46cca4f
AN
670 },
671
672 /**
673 * Boolean indicating whether or not the Widget is visible.
674 *
675 * We override this from the default Widget attribute value.
676 *
677 * @attribute visible
678 * @default false
679 * @type Boolean
680 */
681 visible: {
682 value: false
a67233e7
AN
683 },
684
685 /**
686 * A convenience Attribute, which can be used as a shortcut for the
687 * `align` Attribute.
688 *
689 * Note: We override this in Moodle such that it sets a value for the
690 * `center` attribute if set. The `centered` will always return false.
691 *
692 * @attribute centered
693 * @type Boolean|Node
694 * @default false
695 */
696 centered: {
697 setter: function(value) {
698 if (value) {
699 this.set('center', true);
700 }
701 return false;
702 }
d9bf4be4
SH
703 },
704
705 /**
706 * Boolean determining whether to render the widget during initialisation.
707 *
708 * We override this to change the default from false to true for the dialogue.
709 * We then proceed to early render the dialogue during our initialisation rather than waiting
710 * for YUI to render it after that.
711 *
712 * @attribute render
713 * @type Boolean
714 * @default true
715 */
716 render : {
717 value : true,
718 writeOnce : true
2f5c1441
AN
719 },
720
721 /**
722 * Any additional classes to add to the boundingBox.
723 *
1f777e5c 724 * @attribute extraClasses
2f5c1441
AN
725 * @type Array
726 * @default []
727 */
728 extraClasses: {
729 value: []
16d02434
AN
730 }
731});
732
29ee3cf7
AN
733Y.Base.mix(DIALOGUE, [Y.M.core.WidgetFocusAfterHide]);
734
78686995 735M.core.dialogue = DIALOGUE;
cfa770b4
AN
736/**
737 * A dialogue type designed to display informative messages to users.
738 *
739 * @module moodle-core-notification
740 */
741
742/**
743 * Extends core Dialogue to provide a type of dialogue which can be used
744 * for informative message which are modal, and centered.
745 *
746 * @param {Object} config Object literal specifying the dialogue configuration properties.
747 * @constructor
748 * @class M.core.notification.info
749 * @extends M.core.dialogue
750 */
751var INFO = function() {
752 INFO.superclass.constructor.apply(this, arguments);
753};
754
755Y.extend(INFO, M.core.dialogue, {
78ee66c0
MM
756 initializer: function() {
757 this.show();
758 }
cfa770b4
AN
759}, {
760 NAME: 'Moodle information dialogue',
761 CSS_PREFIX: DIALOGUE_PREFIX
762});
763
764Y.Base.modifyAttrs(INFO, {
cfa770b4
AN
765 /**
766 * Whether the widget should be modal or not.
767 *
768 * We override this to change the default from false to true for a subset of dialogues.
769 *
770 * @attribute modal
771 * @type Boolean
772 * @default true
773 */
774 modal: {
775 validator: Y.Lang.isBoolean,
776 value: true
777 }
778});
779
780M.core.notification = M.core.notification || {};
781M.core.notification.info = INFO;
78686995
AN
782
783
29ee3cf7
AN
784}, '@VERSION@', {
785 "requires": [
786 "base",
787 "node",
788 "panel",
cd6e149c 789 "escape",
29ee3cf7
AN
790 "event-key",
791 "dd-plugin",
792 "moodle-core-widget-focusafterclose",
793 "moodle-core-lockscroll"
794 ]
795});