1 /* global DIALOGUE_PREFIX, BASE */
4 * The generic dialogue class for use in Moodle.
6 * @module moodle-core-notification
7 * @submodule moodle-core-notification-dialogue
10 var DIALOGUE_NAME = 'Moodle dialogue',
12 DIALOGUE_FULLSCREEN_CLASS = DIALOGUE_PREFIX + '-fullscreen',
13 DIALOGUE_HIDDEN_CLASS = DIALOGUE_PREFIX + '-hidden',
14 DIALOGUE_SELECTOR = ' [role=dialog]',
15 MENUBAR_SELECTOR = '[role=menubar]',
17 HAS_ZINDEX = 'moodle-has-zindex',
18 CAN_RECEIVE_FOCUS_SELECTOR = 'input:not([type="hidden"]), a[href], button, textarea, select, [tabindex]',
19 FORM_SELECTOR = 'form';
22 * A re-usable dialogue box with Moodle classes applied.
24 * @param {Object} c Object literal specifying the dialogue configuration properties.
26 * @class M.core.dialogue
29 DIALOGUE = function(config) {
30 // 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
31 // of 'srcNode' to this newly created node. Normally (see docs: https://yuilibrary.com/yui/docs/widget/widget-extend.html),
32 // 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
33 // during widget instantiation, however, because we're creating it on the fly (and 'config.srcNode' isn't set yet), care must
34 // be taken to add it to the DOM and to properly set the value of 'config.srcNode' before calling the parent constructor.
35 // Note: additional classes can be added to this content node by setting the 'additionalBaseClass' config property (a string).
36 var id = 'moodle-dialogue-' + Y.stamp(this); // Can't use this.get('id') as it's not set at this stage.
37 config.notificationBase =
38 Y.Node.create('<div class="' + CSS.BASE + '">')
39 .append(Y.Node.create('<div id="' + id + '" role="dialog" ' +
40 'aria-labelledby="' + id + '-header-text" class="' + CSS.WRAP + '" aria-live="polite"></div>')
41 .append(Y.Node.create('<div id="' + id + '-header-text" class="' + CSS.HEADER + ' yui3-widget-hd"></div>'))
42 .append(Y.Node.create('<div class="' + CSS.BODY + ' yui3-widget-bd"></div>'))
43 .append(Y.Node.create('<div class="' + CSS.FOOTER + ' yui3-widget-ft"></div>')));
44 Y.one(document.body).append(config.notificationBase);
45 config.srcNode = '#' + id;
46 delete config.buttons; // Don't let anyone pass in buttons as we want to control these during init. addButton can be used later.
47 DIALOGUE.superclass.constructor.apply(this, [config]);
49 Y.extend(DIALOGUE, Y.Panel, {
50 // Window resize event listener.
52 // Orientation change event listener.
53 _orientationevent: null,
54 _calculatedzindex: false,
55 // Current maskNode id
56 _currentMaskNodeId: null,
58 * The original position of the dialogue before it was reposition to
59 * avoid browser jumping.
61 * @property _originalPosition
65 _originalPosition: null,
68 * The list of elements that have been aria hidden when displaying
71 * @property _hiddenSiblings
75 _hiddenSiblings: null,
78 * Hide the modal only if it doesn't contain a form.
80 * @method hideIfNotForm
82 hideIfNotForm: function() {
83 var bb = this.get('boundingBox'),
84 formElement = bb.one(FORM_SELECTOR);
86 if (formElement === null) {
92 * Initialise the dialogue.
96 initializer: function() {
99 if (this.get('closeButton') !== false) {
100 // The buttons constructor does not allow custom attributes
101 this.get('buttons').header[0].setAttribute('title', this.get('closeButtonTitle'));
104 // Initialise the element cache.
105 this._hiddenSiblings = [];
107 if (this.get('render')) {
110 this.after('visibleChange', this.visibilityChanged, this);
111 if (this.get('center')) {
112 this.centerDialogue();
115 if (this.get('modal')) {
116 // If we're a modal then make sure our container is ARIA
117 // hidden by default. ARIA visibility is managed for modal dialogues.
118 this.get(BASE).set('aria-hidden', 'true');
119 this.plug(Y.M.core.LockScroll);
122 // Workaround upstream YUI bug http://yuilibrary.com/projects/yui3/ticket/2532507
123 // and allow setting of z-index in theme.
124 bb = this.get('boundingBox');
125 bb.addClass(HAS_ZINDEX);
127 // Add any additional classes that were specified.
128 Y.Array.each(this.get('extraClasses'), bb.addClass, bb);
130 if (this.get('visible')) {
133 // Recalculate the zIndex every time the modal is altered.
134 this.on('maskShow', this.applyZIndex);
136 this.on('maskShow', function() {
137 // When the mask shows, position the boundingBox at the top-left of the window such that when it is
138 // focused, the position does not change.
139 var w = Y.one(Y.config.win),
140 bb = this.get('boundingBox');
142 if (!this.get('center')) {
143 this._originalPosition = bb.getXY();
146 // Check if maskNode already init click event.
147 var maskNode = this.get('maskNode');
148 if (this._currentMaskNodeId !== maskNode.get('_yuid')) {
149 this._currentMaskNodeId = maskNode.get('_yuid');
150 maskNode.on('click', this.hideIfNotForm, this);
153 if (bb.getStyle('position') !== 'fixed') {
154 // If the boundingBox has been positioned in a fixed manner, then it will not position correctly to scrollTop.
156 top: w.get('scrollTop'),
157 left: w.get('scrollLeft')
162 // Add any additional classes to the content node if required.
163 var nBase = this.get('notificationBase');
164 var additionalClasses = this.get('additionalBaseClass');
165 if (additionalClasses !== '') {
166 nBase.addClass(additionalClasses);
169 // Remove the dialogue from the DOM when it is destroyed.
170 this.after('destroyedChange', function() {
171 this.get(BASE).remove(true);
176 * Either set the zindex to the supplied value, or set it to one more than the highest existing
177 * dialog in the page.
179 * @method applyZIndex
181 applyZIndex: function() {
182 var highestzindex = 1040,
184 bb = this.get('boundingBox'),
185 ol = this.get('maskNode'),
186 zindex = this.get('zIndex');
187 if (zindex !== 0 && !this._calculatedzindex) {
188 // The zindex was specified so we should use that.
189 bb.setStyle('zIndex', zindex);
191 // Determine the correct zindex by looking at all existing dialogs and menubars in the page.
192 Y.all(DIALOGUE_SELECTOR + ', ' + MENUBAR_SELECTOR + ', ' + DOT + HAS_ZINDEX).each(function(node) {
193 var zindex = this.findZIndex(node);
194 if (zindex > highestzindex) {
195 highestzindex = zindex;
198 // Only set the zindex if we found a wrapper.
199 zindexvalue = (highestzindex + 1).toString();
200 bb.setStyle('zIndex', zindexvalue);
201 this.set('zIndex', zindexvalue);
202 if (this.get('modal')) {
203 ol.setStyle('zIndex', zindexvalue);
205 // In IE8, the z-indexes do not take effect properly unless you toggle
206 // the lightbox from 'fixed' to 'static' and back. This code does so
207 // using the minimum setTimeouts that still actually work.
208 if (Y.UA.ie && Y.UA.compareVersions(Y.UA.ie, 9) < 0) {
209 setTimeout(function() {
210 ol.setStyle('position', 'static');
211 setTimeout(function() {
212 ol.setStyle('position', 'fixed');
217 this._calculatedzindex = true;
222 * Finds the zIndex of the given node or its parent.
225 * @param {Node} node The Node to apply the zIndex to.
226 * @return {Number} Either the zIndex, or 0 if one was not found.
228 findZIndex: function(node) {
229 // In most cases the zindex is set on the parent of the dialog.
230 var zindex = node.getStyle('zIndex') || node.ancestor().getStyle('zIndex');
232 return parseInt(zindex, 10);
238 * Event listener for the visibility changed event.
240 * @method visibilityChanged
241 * @param {EventFacade} e
243 visibilityChanged: function(e) {
245 if (e.attrName === 'visible') {
246 this.get('maskNode').addClass(CSS.LIGHTBOX);
247 // Going from visible to hidden.
248 if (e.prevVal && !e.newVal) {
249 bb = this.get('boundingBox');
250 if (this._resizeevent) {
251 this._resizeevent.detach();
252 this._resizeevent = null;
254 if (this._orientationevent) {
255 this._orientationevent.detach();
256 this._orientationevent = null;
258 bb.detach('key', this.keyDelegation);
260 if (this.get('modal')) {
261 // Hide this dialogue from screen readers.
262 this.setAccessibilityHidden();
265 // Going from hidden to visible.
266 if (!e.prevVal && e.newVal) {
267 // This needs to be done each time the dialog is shown as new dialogs may have been opened.
269 // This needs to be done each time the dialog is shown as the window may have been resized.
270 this.makeResponsive();
271 if (!this.shouldResizeFullscreen()) {
272 if (this.get('draggable')) {
273 titlebar = '#' + this.get('id') + ' .' + CSS.HEADER;
274 this.plug(Y.Plugin.Drag, {handles: [titlebar]});
275 Y.one(titlebar).setStyle('cursor', 'move');
278 this.keyDelegation();
280 // Only do accessibility hiding for modals because the ARIA spec
281 // says that all ARIA dialogues should be modal.
282 if (this.get('modal')) {
283 // Make this dialogue visible to screen readers.
284 this.setAccessibilityVisible();
287 if (this.get('center') && !e.prevVal && e.newVal) {
288 this.centerDialogue();
293 * If the responsive attribute is set on the dialog, and the window size is
294 * smaller than the responsive width - make the dialog fullscreen.
296 * @method makeResponsive
298 makeResponsive: function() {
299 var bb = this.get('boundingBox');
301 if (this.shouldResizeFullscreen()) {
302 // Make this dialogue fullscreen on a small screen.
303 // Disable the page scrollbars.
305 // Size and position the fullscreen dialog.
307 bb.addClass(DIALOGUE_FULLSCREEN_CLASS);
308 bb.setStyles({'left': null,
315 if (this.get('responsive')) {
316 // We must reset any of the fullscreen changes.
317 bb.removeClass(DIALOGUE_FULLSCREEN_CLASS)
318 .setStyles({'width': this.get('width'),
319 'height': this.get('height')});
323 // Update Lock scroll if the plugin is present.
324 if (this.lockScroll) {
325 this.lockScroll.updateScrollLock(this.shouldResizeFullscreen());
329 * Center the dialog on the screen.
331 * @method centerDialogue
333 centerDialogue: function() {
334 var bb = this.get('boundingBox'),
335 hidden = bb.hasClass(DIALOGUE_HIDDEN_CLASS),
339 // Don't adjust the position if we are in full screen mode.
340 if (this.shouldResizeFullscreen()) {
344 bb.setStyle('top', '-1000px').removeClass(DIALOGUE_HIDDEN_CLASS);
346 x = Math.max(Math.round((bb.get('winWidth') - bb.get('offsetWidth')) / 2), 15);
347 y = Math.max(Math.round((bb.get('winHeight') - bb.get('offsetHeight')) / 2), 15) + Y.one(window).get('scrollTop');
348 bb.setStyles({'left': x, 'top': y});
351 bb.addClass(DIALOGUE_HIDDEN_CLASS);
353 this.makeResponsive();
356 * Return whether this dialogue should be fullscreen or not.
358 * Responsive attribute must be true and we should not be in an iframe and the screen width should
359 * be less than the responsive width.
361 * @method shouldResizeFullscreen
364 shouldResizeFullscreen: function() {
365 return (window === window.parent) && this.get('responsive') &&
366 Math.floor(Y.one(document.body).get('winWidth')) < this.get('responsiveWidth');
371 header = this.headerNode,
372 content = this.bodyNode,
373 focusSelector = this.get('focusOnShowSelector'),
376 result = DIALOGUE.superclass.show.call(this);
378 if (!this.get('center') && this._originalPosition) {
379 // Restore the dialogue position to it's location before it was moved at show time.
380 this.get('boundingBox').setXY(this._originalPosition);
383 // Try and find a node to focus on using the focusOnShowSelector attribute.
384 if (focusSelector !== null) {
385 focusNode = this.get('boundingBox').one(focusSelector);
388 // Fall back to the header or the content if no focus node was found yet.
389 if (header && header !== '') {
391 } else if (content && content !== '') {
403 // If the event was closed by an escape key event, then we need to check that this
404 // dialogue is currently focused to prevent closing all dialogues in the stack.
405 if (e.type === 'key' && e.keyCode === 27 && !this.get('focused')) {
410 // Unlock scroll if the plugin is present.
411 if (this.lockScroll) {
412 this.lockScroll.disableScrollLock();
415 return DIALOGUE.superclass.hide.call(this, arguments);
418 * Setup key delegation to keep tabbing within the open dialogue.
420 * @method keyDelegation
422 keyDelegation: function() {
423 var bb = this.get('boundingBox');
424 bb.delegate('key', function(e) {
425 var target = e.target;
426 var direction = 'forward';
428 direction = 'backward';
430 if (this.trapFocus(target, direction)) {
433 }, 'down:9', CAN_RECEIVE_FOCUS_SELECTOR, this);
437 * Trap the tab focus within the open modal.
440 * @param {string} target the element target
441 * @param {string} direction tab key for forward and tab+shift for backward
442 * @return {Boolean} The result of the focus action.
444 trapFocus: function(target, direction) {
445 var bb = this.get('boundingBox'),
446 firstitem = bb.one(CAN_RECEIVE_FOCUS_SELECTOR),
447 lastitem = bb.all(CAN_RECEIVE_FOCUS_SELECTOR).pop();
449 if (target === lastitem && direction === 'forward') { // Tab key.
450 return firstitem.focus();
451 } else if (target === firstitem && direction === 'backward') { // Tab+shift key.
452 return lastitem.focus();
457 * Sets the appropriate aria attributes on this dialogue and the other
458 * elements in the DOM to ensure that screen readers are able to navigate
459 * the dialogue popup correctly.
461 * @method setAccessibilityVisible
463 setAccessibilityVisible: function() {
464 // Get the element that contains this dialogue because we need it
465 // to filter out from the document.body child elements.
466 var container = this.get(BASE);
468 // We need to get a list containing each sibling element and the shallowest
469 // non-ancestral nodes in the DOM. We can shortcut this a little by leveraging
470 // the fact that this dialogue is always appended to the document body therefore
471 // it's siblings are the shallowest non-ancestral nodes. If that changes then
472 // this code should also be updated.
473 Y.one(document.body).get('children').each(function(node) {
474 // Skip the element that contains us.
475 if (node !== container) {
476 var hidden = node.get('aria-hidden');
477 // If they are already hidden we can ignore them.
478 if (hidden !== 'true') {
479 // Save their current state.
480 node.setData('previous-aria-hidden', hidden);
481 this._hiddenSiblings.push(node);
483 // Hide this node from screen readers.
484 node.set('aria-hidden', 'true');
489 // Make us visible to screen readers.
490 container.set('aria-hidden', 'false');
494 * Restores the aria visibility on the DOM elements changed when displaying
495 * the dialogue popup and makes the dialogue aria hidden to allow screen
496 * readers to navigate the main page correctly when the dialogue is closed.
498 * @method setAccessibilityHidden
500 setAccessibilityHidden: function() {
501 var container = this.get(BASE);
502 container.set('aria-hidden', 'true');
504 // Restore the sibling nodes back to their original values.
505 Y.Array.each(this._hiddenSiblings, function(node) {
506 var previousValue = node.getData('previous-aria-hidden');
507 // If the element didn't previously have an aria-hidden attribute
508 // then we can just remove the one we set.
509 if (previousValue === null) {
510 node.removeAttribute('aria-hidden');
512 // Otherwise set it back to the old value (which will be false).
513 node.set('aria-hidden', previousValue);
517 // Clear the cache. No longer need to store these.
518 this._hiddenSiblings = [];
522 CSS_PREFIX: DIALOGUE_PREFIX,
525 * Any additional classes to add to the base Node.
527 * @attribute additionalBaseClass
531 additionalBaseClass: {
536 * The Notification base Node.
538 * @attribute notificationBase
546 * Whether to display the dialogue modally and with a
549 * @attribute lightbox
552 * @deprecated Since Moodle 2.7. Please use modal instead.
556 setter: function(value) {
557 Y.log("The lightbox attribute of M.core.dialogue has been deprecated since Moodle 2.7, " +
558 "please use the modal attribute instead",
559 'warn', 'moodle-core-notification-dialogue');
560 this.set('modal', value);
565 * Whether to display a close button on the dialogue.
567 * Note, we do not recommend hiding the close button as this has
568 * potential accessibility concerns.
570 * @attribute closeButton
575 validator: Y.Lang.isBoolean,
580 * The title for the close button if one is to be shown.
582 * @attribute closeButtonTitle
587 validator: Y.Lang.isString,
588 value: M.util.get_string('closebuttontitle', 'moodle')
592 * Whether to display the dialogue centrally on the screen.
599 validator: Y.Lang.isBoolean,
604 * Whether to make the dialogue movable around the page.
606 * @attribute draggable
611 validator: Y.Lang.isBoolean,
616 * Used to generate a unique id for the dialogue.
625 valueFn: function() {
626 return Y.stamp(this);
631 * Used to disable the fullscreen resizing behaviour if required.
633 * @attribute responsive
638 validator: Y.Lang.isBoolean,
643 * The width that this dialogue should be resized to fullscreen.
645 * @attribute responsiveWidth
654 * Selector to a node that should recieve focus when this dialogue is shown.
656 * The default behaviour is to focus on the header.
658 * @attribute focusOnShowSelector
662 focusOnShowSelector: {
668 Y.Base.modifyAttrs(DIALOGUE, {
670 * String with units, or number, representing the width of the Widget.
671 * If a number is provided, the default unit, defined by the Widgets
672 * DEF_UNIT, property is used.
674 * If a value of 'auto' is used, then an empty String is instead
679 * @type {String|Number}
683 setter: function(value) {
684 if (value === 'auto') {
692 * Boolean indicating whether or not the Widget is visible.
694 * We override this from the default Widget attribute value.
705 * A convenience Attribute, which can be used as a shortcut for the
708 * Note: We override this in Moodle such that it sets a value for the
709 * `center` attribute if set. The `centered` will always return false.
711 * @attribute centered
716 setter: function(value) {
718 this.set('center', true);
725 * Boolean determining whether to render the widget during initialisation.
727 * We override this to change the default from false to true for the dialogue.
728 * We then proceed to early render the dialogue during our initialisation rather than waiting
729 * for YUI to render it after that.
741 * Any additional classes to add to the boundingBox.
743 * @attribute extraClasses
752 * Identifier for the widget.
756 * @default a product of guid().
761 valueFn: function() {
762 var id = 'moodle-dialogue-' + Y.stamp(this);
768 * Collection containing the widget's buttons.
775 getter: Y.WidgetButtons.prototype._getButtons,
776 setter: Y.WidgetButtons.prototype._setButtons,
777 valueFn: function() {
778 if (this.get('closeButton') === false) {
783 section: Y.WidgetStdMod.HEADER,
784 classNames: 'closebutton',
795 Y.Base.mix(DIALOGUE, [Y.M.core.WidgetFocusAfterHide]);
797 M.core.dialogue = DIALOGUE;