weekly release 2.8dev
[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+'">')
61 .append(Y.Node.create('<div id="'+id+'" role="dialog" aria-labelledby="'+id+'-header-text" class="'+CSS.WRAP+'"></div>')
baffb422 62 .append(Y.Node.create('<div id="'+id+'-header-text" class="'+CSS.HEADER+' yui3-widget-hd"></div>'))
78686995
AN
63 .append(Y.Node.create('<div class="'+CSS.BODY+' yui3-widget-bd"></div>'))
64 .append(Y.Node.create('<div class="'+CSS.FOOTER+' yui3-widget-ft"></div>')));
65 Y.one(document.body).append(config.notificationBase);
b59f2e3b
SH
66
67 if (config.additionalBaseClass) {
68 config.notificationBase.addClass(config.additionalBaseClass);
69 }
70
78686995 71 config.srcNode = '#'+id;
78686995 72
78686995
AN
73 // closeButton param to keep the stable versions API.
74 if (config.closeButton === false) {
75 config.buttons = null;
76 } else {
77 config.buttons = [
78 {
79 section: Y.WidgetStdMod.HEADER,
80 classNames: 'closebutton',
81 action: function () {
82 this.hide();
83 }
84 }
85 ];
86 }
87 DIALOGUE.superclass.constructor.apply(this, [config]);
88
89 if (config.closeButton !== false) {
90 // The buttons constructor does not allow custom attributes
91 this.get('buttons').header[0].setAttribute('title', this.get('closeButtonTitle'));
92 }
93};
94Y.extend(DIALOGUE, Y.Panel, {
d61c96b6
DW
95 // Window resize event listener.
96 _resizeevent : null,
97 // Orientation change event listener.
98 _orientationevent : null,
1389bcd7 99 _calculatedzindex : false,
1f777e5c 100
bf7c86cf
DW
101 /**
102 * Initialise the dialogue.
103 *
104 * @method initializer
bf7c86cf 105 */
2f5c1441 106 initializer : function() {
bf7c86cf
DW
107 var bb;
108
d9bf4be4
SH
109 if (this.get('render')) {
110 this.render();
111 }
ce5867a1 112 this.makeResponsive();
bf7c86cf 113 this.after('visibleChange', this.visibilityChanged, this);
2f5c1441 114 if (this.get('center')) {
dd66b6ab
DW
115 this.centerDialogue();
116 }
78686995 117
73747aea
AN
118 if (this.get('modal')) {
119 this.plug(Y.M.core.LockScroll);
120 }
121
78686995
AN
122 // Workaround upstream YUI bug http://yuilibrary.com/projects/yui3/ticket/2532507
123 // and allow setting of z-index in theme.
d61c96b6 124 bb = this.get('boundingBox');
ecf02bf5 125 bb.addClass(HAS_ZINDEX);
bf7c86cf 126
2f5c1441
AN
127 // Add any additional classes that were specified.
128 Y.Array.each(this.get('extraClasses'), bb.addClass, bb);
129
130 if (this.get('visible')) {
bf7c86cf
DW
131 this.applyZIndex();
132 }
1389bcd7
JF
133 // Recalculate the zIndex every time the modal is altered.
134 this.on('maskShow', this.applyZIndex);
ce5867a1
DW
135 // We must show - after the dialogue has been positioned,
136 // either by centerDialogue or makeResonsive. This is because the show() will trigger
137 // a focus on the dialogue, which will scroll the page. If the dialogue has not
138 // been positioned it will scroll back to the top of the page.
2f5c1441 139 if (this.get('visible')) {
ce5867a1 140 this.show();
586d393f 141 this.keyDelegation();
ce5867a1 142 }
0860dd78
AN
143
144 // Remove the dialogue from the DOM when it is destroyed.
145 this.after('destroyedChange', function(){
146 this.get(BASE).remove(true);
147 }, this);
bf7c86cf
DW
148 },
149
150 /**
151 * Either set the zindex to the supplied value, or set it to one more than the highest existing
152 * dialog in the page.
153 *
1f777e5c 154 * @method applyZIndex
bf7c86cf
DW
155 */
156 applyZIndex : function() {
1389bcd7
JF
157 var highestzindex = 1,
158 zindexvalue = 1,
f2b235cb 159 bb = this.get('boundingBox'),
1389bcd7 160 ol = this.get('maskNode'),
f2b235cb 161 zindex = this.get('zIndex');
1389bcd7 162 if (zindex !== 0 && !this._calculatedzindex) {
bf7c86cf 163 // The zindex was specified so we should use that.
f2b235cb 164 bb.setStyle('zIndex', zindex);
bf7c86cf 165 } else {
f2b235cb 166 // Determine the correct zindex by looking at all existing dialogs and menubars in the page.
ecf02bf5 167 Y.all(DIALOGUE_SELECTOR + ', ' + MENUBAR_SELECTOR + ', ' + DOT + HAS_ZINDEX).each(function (node) {
f2b235cb
SH
168 var zindex = this.findZIndex(node);
169 if (zindex > highestzindex) {
170 highestzindex = zindex;
bf7c86cf 171 }
f2b235cb 172 }, this);
bf7c86cf 173 // Only set the zindex if we found a wrapper.
1389bcd7
JF
174 zindexvalue = (highestzindex + 1).toString();
175 bb.setStyle('zIndex', zindexvalue);
1389bcd7 176 this.set('zIndex', zindexvalue);
0ef60744
AN
177 if (this.get('modal')) {
178 ol.setStyle('zIndex', zindexvalue);
179 }
1389bcd7 180 this._calculatedzindex = true;
bf7c86cf
DW
181 }
182 },
183
f2b235cb
SH
184 /**
185 * Finds the zIndex of the given node or its parent.
186 *
187 * @method findZIndex
1f777e5c
AN
188 * @param {Node} node The Node to apply the zIndex to.
189 * @return {Number} Either the zIndex, or 0 if one was not found.
f2b235cb
SH
190 */
191 findZIndex : function(node) {
192 // In most cases the zindex is set on the parent of the dialog.
193 var zindex = node.getStyle('zIndex') || node.ancestor().getStyle('zIndex');
194 if (zindex) {
195 return parseInt(zindex, 10);
196 }
197 return 0;
198 },
199
bf7c86cf
DW
200 /**
201 * Event listener for the visibility changed event.
202 *
203 * @method visibilityChanged
1f777e5c 204 * @param {EventFacade} e
bf7c86cf 205 */
78686995 206 visibilityChanged : function(e) {
586d393f 207 var titlebar, bb;
78686995
AN
208 if (e.attrName === 'visible') {
209 this.get('maskNode').addClass(CSS.LIGHTBOX);
d61c96b6 210 if (e.prevVal && !e.newVal) {
586d393f 211 bb = this.get('boundingBox');
d61c96b6
DW
212 if (this._resizeevent) {
213 this._resizeevent.detach();
214 this._resizeevent = null;
215 }
216 if (this._orientationevent) {
217 this._orientationevent.detach();
218 this._orientationevent = null;
219 }
586d393f 220 bb.detach('key', this.keyDelegation);
d61c96b6 221 }
bf7c86cf
DW
222 if (!e.prevVal && e.newVal) {
223 // This needs to be done each time the dialog is shown as new dialogs may have been opened.
224 this.applyZIndex();
225 // This needs to be done each time the dialog is shown as the window may have been resized.
226 this.makeResponsive();
227 if (!this.shouldResizeFullscreen()) {
228 if (this.get('draggable')) {
229 titlebar = '#' + this.get('id') + ' .' + CSS.HEADER;
230 this.plug(Y.Plugin.Drag, {handles : [titlebar]});
231 Y.one(titlebar).setStyle('cursor', 'move');
232 }
233 }
586d393f 234 this.keyDelegation();
bf7c86cf 235 }
78686995
AN
236 if (this.get('center') && !e.prevVal && e.newVal) {
237 this.centerDialogue();
238 }
78686995
AN
239 }
240 },
bf7c86cf
DW
241 /**
242 * If the responsive attribute is set on the dialog, and the window size is
243 * smaller than the responsive width - make the dialog fullscreen.
244 *
245 * @method makeResponsive
bf7c86cf
DW
246 */
247 makeResponsive : function() {
78686995 248 var bb = this.get('boundingBox'),
bf7c86cf
DW
249 content;
250
251 if (this.shouldResizeFullscreen()) {
d61c96b6
DW
252 // Make this dialogue fullscreen on a small screen.
253 // Disable the page scrollbars.
bf7c86cf 254
d61c96b6
DW
255 // Size and position the fullscreen dialog.
256
2a808cef
DW
257 bb.addClass(DIALOGUE_FULLSCREEN_CLASS);
258 bb.setStyles({'left' : null,
259 'top' : null,
260 'width' : null,
261 'height' : null,
262 'right' : null,
263 'bottom' : null});
d61c96b6
DW
264
265 content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
d61c96b6
DW
266 } else {
267 if (this.get('responsive')) {
268 // We must reset any of the fullscreen changes.
2a808cef
DW
269 bb.removeClass(DIALOGUE_FULLSCREEN_CLASS)
270 .setStyles({'width' : this.get('width'),
bf7c86cf 271 'height' : this.get('height')});
d61c96b6 272 content = Y.one('#' + this.get('id') + ' .' + CSS.BODY);
d61c96b6 273 }
d61c96b6 274 }
bf7c86cf
DW
275 },
276 /**
277 * Center the dialog on the screen.
278 *
279 * @method centerDialogue
bf7c86cf
DW
280 */
281 centerDialogue : function() {
282 var bb = this.get('boundingBox'),
283 hidden = bb.hasClass(DIALOGUE_HIDDEN_CLASS),
284 x,
285 y;
286
287 // Don't adjust the position if we are in full screen mode.
288 if (this.shouldResizeFullscreen()) {
289 return;
290 }
291 if (hidden) {
292 bb.setStyle('top', '-1000px').removeClass(DIALOGUE_HIDDEN_CLASS);
293 }
294 x = Math.max(Math.round((bb.get('winWidth') - bb.get('offsetWidth'))/2), 15);
295 y = Math.max(Math.round((bb.get('winHeight') - bb.get('offsetHeight'))/2), 15) + Y.one(window).get('scrollTop');
296 bb.setStyles({ 'left' : x, 'top' : y});
78686995
AN
297
298 if (hidden) {
bf7c86cf 299 bb.addClass(DIALOGUE_HIDDEN_CLASS);
78686995 300 }
d61c96b6 301 },
bf7c86cf 302 /**
1f777e5c
AN
303 * Return whether this dialogue should be fullscreen or not.
304 *
bf7c86cf
DW
305 * Responsive attribute must be true and we should not be in an iframe and the screen width should
306 * be less than the responsive width.
307 *
308 * @method shouldResizeFullscreen
1f777e5c 309 * @return {Boolean}
bf7c86cf
DW
310 */
311 shouldResizeFullscreen : function() {
312 return (window === window.parent) && this.get('responsive') &&
313 Math.floor(Y.one(document.body).get('winWidth')) < this.get('responsiveWidth');
2eaaae00
JF
314 },
315
2eaaae00
JF
316 show : function() {
317 var result = null,
318 header = this.headerNode,
e5ddec38 319 content = this.bodyNode,
c1660772 320 focusSelector = this.get('focusOnShowSelector'),
e5ddec38 321 focusNode = null;
2eaaae00 322
b959e508
AN
323 result = DIALOGUE.superclass.show.call(this);
324
73747aea
AN
325 // Lock scroll if the plugin is present.
326 if (this.lockScroll) {
b959e508
AN
327 // We need to force the scroll locking for full screen dialogues, even if they have a small vertical size to
328 // prevent the background scrolling while the dialogue is open.
329 this.lockScroll.enableScrollLock(this.shouldResizeFullscreen());
73747aea
AN
330 }
331
c1660772
DW
332 // Try and find a node to focus on using the focusOnShowSelector attribute.
333 if (focusSelector !== null) {
e5ddec38 334 focusNode = this.get('boundingBox').one(focusSelector);
2eaaae00 335 }
e5ddec38
DW
336 if (!focusNode) {
337 // Fall back to the header or the content if no focus node was found yet.
338 if (header && header !== '') {
339 focusNode = header;
340 } else if (content && content !== '') {
341 focusNode = content;
342 }
343 }
c1660772
DW
344 if (focusNode) {
345 focusNode.focus();
346 }
2eaaae00 347 return result;
586d393f 348 },
73747aea 349
bf24abd2
AN
350 hide: function(e) {
351 if (e) {
352 // If the event was closed by an escape key event, then we need to check that this
353 // dialogue is currently focused to prevent closing all dialogues in the stack.
354 if (e.type === 'key' && e.keyCode === 27 && !this.get('focused')) {
355 return;
356 }
357 }
358
73747aea
AN
359 // Unlock scroll if the plugin is present.
360 if (this.lockScroll) {
361 this.lockScroll.disableScrollLock();
362 }
363
364 return DIALOGUE.superclass.hide.call(this, arguments);
365 },
586d393f 366 /**
367 * Setup key delegation to keep tabbing within the open dialogue.
368 *
369 * @method keyDelegation
370 */
371 keyDelegation : function() {
372 var bb = this.get('boundingBox');
373 bb.delegate('key', function(e){
374 var target = e.target;
375 var direction = 'forward';
376 if (e.shiftKey) {
377 direction = 'backward';
378 }
379 if (this.trapFocus(target, direction)) {
380 e.preventDefault();
381 }
382 }, 'down:9', CAN_RECEIVE_FOCUS_SELECTOR, this);
383 },
1f777e5c 384
586d393f 385 /**
386 * Trap the tab focus within the open modal.
387 *
1f777e5c
AN
388 * @method trapFocus
389 * @param {string} target the element target
390 * @param {string} direction tab key for forward and tab+shift for backward
391 * @return {Boolean} The result of the focus action.
586d393f 392 */
393 trapFocus : function(target, direction) {
394 var bb = this.get('boundingBox'),
395 firstitem = bb.one(CAN_RECEIVE_FOCUS_SELECTOR),
396 lastitem = bb.all(CAN_RECEIVE_FOCUS_SELECTOR).pop();
397
398 if (target === lastitem && direction === 'forward') { // Tab key.
399 return firstitem.focus();
400 } else if (target === firstitem && direction === 'backward') { // Tab+shift key.
401 return lastitem.focus();
402 }
78686995
AN
403 }
404}, {
405 NAME : DIALOGUE_NAME,
406 CSS_PREFIX : DIALOGUE_PREFIX,
407 ATTRS : {
408 notificationBase : {
409
410 },
411
412 /**
413 * Whether to display the dialogue modally and with a
414 * lightbox style.
415 *
416 * @attribute lightbox
417 * @type Boolean
418 * @default true
cff3b8fe 419 * @deprecated Since Moodle 2.7. Please use modal instead.
78686995 420 */
cff3b8fe
AN
421 lightbox: {
422 lazyAdd: false,
423 setter: function(value) {
424 Y.log("The lightbox attribute of M.core.dialogue has been deprecated since Moodle 2.7, please use the modal attribute instead",
425 'warn', 'moodle-core-notification-dialogue');
426 this.set('modal', value);
427 }
78686995
AN
428 },
429
430 /**
431 * Whether to display a close button on the dialogue.
432 *
433 * Note, we do not recommend hiding the close button as this has
434 * potential accessibility concerns.
435 *
436 * @attribute closeButton
437 * @type Boolean
438 * @default true
439 */
440 closeButton : {
441 validator : Y.Lang.isBoolean,
442 value : true
443 },
444
445 /**
446 * The title for the close button if one is to be shown.
447 *
448 * @attribute closeButtonTitle
449 * @type String
450 * @default 'Close'
451 */
452 closeButtonTitle : {
453 validator : Y.Lang.isString,
0d1d5423 454 value: M.util.get_string('closebuttontitle', 'moodle')
78686995
AN
455 },
456
457 /**
458 * Whether to display the dialogue centrally on the screen.
459 *
460 * @attribute center
461 * @type Boolean
462 * @default true
463 */
464 center : {
465 validator : Y.Lang.isBoolean,
466 value : true
467 },
468
469 /**
470 * Whether to make the dialogue movable around the page.
471 *
472 * @attribute draggable
473 * @type Boolean
474 * @default false
475 */
476 draggable : {
477 validator : Y.Lang.isBoolean,
478 value : false
479 },
bf7c86cf
DW
480
481 /**
482 * Used to generate a unique id for the dialogue.
483 *
484 * @attribute COUNT
d10e6118
AN
485 * @type String
486 * @default null
bf7c86cf 487 */
78686995 488 COUNT: {
d10e6118 489 value: null
d61c96b6 490 },
bf7c86cf
DW
491
492 /**
493 * Used to disable the fullscreen resizing behaviour if required.
494 *
495 * @attribute responsive
496 * @type Boolean
497 * @default true
498 */
d61c96b6
DW
499 responsive : {
500 validator : Y.Lang.isBoolean,
501 value : true
502 },
bf7c86cf
DW
503
504 /**
505 * The width that this dialogue should be resized to fullscreen.
506 *
507 * @attribute responsiveWidth
1f777e5c 508 * @type Number
bf7c86cf
DW
509 * @default 768
510 */
d61c96b6
DW
511 responsiveWidth : {
512 value : 768
c1660772
DW
513 },
514
515 /**
516 * Selector to a node that should recieve focus when this dialogue is shown.
517 *
518 * The default behaviour is to focus on the header.
519 *
520 * @attribute focusOnShowSelector
521 * @default null
522 * @type String
523 */
524 focusOnShowSelector: {
525 value: null
78686995 526 }
c1660772 527
78686995
AN
528 }
529});
530
16d02434
AN
531Y.Base.modifyAttrs(DIALOGUE, {
532 /**
533 * String with units, or number, representing the width of the Widget.
534 * If a number is provided, the default unit, defined by the Widgets
535 * DEF_UNIT, property is used.
536 *
537 * If a value of 'auto' is used, then an empty String is instead
538 * returned.
539 *
540 * @attribute width
541 * @default '400px'
542 * @type {String|Number}
543 */
544 width: {
545 value: '400px',
546 setter: function(value) {
547 if (value === 'auto') {
548 return '';
549 }
550 return value;
551 }
c46cca4f
AN
552 },
553
554 /**
555 * Boolean indicating whether or not the Widget is visible.
556 *
557 * We override this from the default Widget attribute value.
558 *
559 * @attribute visible
560 * @default false
561 * @type Boolean
562 */
563 visible: {
564 value: false
a67233e7
AN
565 },
566
567 /**
568 * A convenience Attribute, which can be used as a shortcut for the
569 * `align` Attribute.
570 *
571 * Note: We override this in Moodle such that it sets a value for the
572 * `center` attribute if set. The `centered` will always return false.
573 *
574 * @attribute centered
575 * @type Boolean|Node
576 * @default false
577 */
578 centered: {
579 setter: function(value) {
580 if (value) {
581 this.set('center', true);
582 }
583 return false;
584 }
d9bf4be4
SH
585 },
586
587 /**
588 * Boolean determining whether to render the widget during initialisation.
589 *
590 * We override this to change the default from false to true for the dialogue.
591 * We then proceed to early render the dialogue during our initialisation rather than waiting
592 * for YUI to render it after that.
593 *
594 * @attribute render
595 * @type Boolean
596 * @default true
597 */
598 render : {
599 value : true,
600 writeOnce : true
2f5c1441
AN
601 },
602
603 /**
604 * Any additional classes to add to the boundingBox.
605 *
1f777e5c 606 * @attribute extraClasses
2f5c1441
AN
607 * @type Array
608 * @default []
609 */
610 extraClasses: {
611 value: []
16d02434
AN
612 }
613});
614
29ee3cf7
AN
615Y.Base.mix(DIALOGUE, [Y.M.core.WidgetFocusAfterHide]);
616
78686995 617M.core.dialogue = DIALOGUE;
cfa770b4
AN
618/**
619 * A dialogue type designed to display informative messages to users.
620 *
621 * @module moodle-core-notification
622 */
623
624/**
625 * Extends core Dialogue to provide a type of dialogue which can be used
626 * for informative message which are modal, and centered.
627 *
628 * @param {Object} config Object literal specifying the dialogue configuration properties.
629 * @constructor
630 * @class M.core.notification.info
631 * @extends M.core.dialogue
632 */
633var INFO = function() {
634 INFO.superclass.constructor.apply(this, arguments);
635};
636
637Y.extend(INFO, M.core.dialogue, {
638}, {
639 NAME: 'Moodle information dialogue',
640 CSS_PREFIX: DIALOGUE_PREFIX
641});
642
643Y.Base.modifyAttrs(INFO, {
644 /**
645 * Boolean indicating whether or not the Widget is visible.
646 *
647 * We override this from the default M.core.dialogue attribute value.
648 *
649 * @attribute visible
650 * @default true
651 * @type Boolean
652 */
653 visible: {
654 value: true
655 },
656
657 /**
658 * Whether the widget should be modal or not.
659 *
660 * We override this to change the default from false to true for a subset of dialogues.
661 *
662 * @attribute modal
663 * @type Boolean
664 * @default true
665 */
666 modal: {
667 validator: Y.Lang.isBoolean,
668 value: true
669 }
670});
671
672M.core.notification = M.core.notification || {};
673M.core.notification.info = INFO;
78686995
AN
674
675
29ee3cf7
AN
676}, '@VERSION@', {
677 "requires": [
678 "base",
679 "node",
680 "panel",
cd6e149c 681 "escape",
29ee3cf7
AN
682 "event-key",
683 "dd-plugin",
684 "moodle-core-widget-focusafterclose",
685 "moodle-core-lockscroll"
686 ]
687});