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