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