Proyectos de Subversion Moodle

/**

 * The generic dialogue class for use in Moodle.

 *

 * @module moodle-core-notification

 * @submodule moodle-core-notification-dialogue

 */

var DIALOGUE_NAME = 'Moodle dialogue',

    DIALOGUE,

    DIALOGUE_FULLSCREEN_CLASS = DIALOGUE_PREFIX + '-fullscreen',

    DIALOGUE_HIDDEN_CLASS = DIALOGUE_PREFIX + '-hidden',

    DIALOGUE_SELECTOR = ' [role=dialog]',

    MENUBAR_SELECTOR = '[role=menubar]',

    DOT = '.',

    HAS_ZINDEX = 'moodle-has-zindex',

    CAN_RECEIVE_FOCUS_SELECTOR = 'input:not([type="hidden"]):not([disabled]):not([tabindex^="-"]),' +

        'a[href]:not([disabled]):not([tabindex^="-"]),' +

        'button:not([disabled]):not([tabindex^="-"]),' +

        'textarea:not([disabled]):not([tabindex^="-"]),' +

        'select:not([disabled]):not([tabindex^="-"]),' +

        '[tabindex]:not([disabled]):not([tabindex^="-"])',

    FORM_SELECTOR = 'form';

/**

 * A re-usable dialogue box with Moodle classes applied.

 *

 * @param {Object} c Object literal specifying the dialogue configuration properties.

 * @constructor

 * @class M.core.dialogue

 * @extends Panel

 */

DIALOGUE = function(config) {

    // 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

    // of 'srcNode' to this newly created node. Normally (see docs: https://yuilibrary.com/yui/docs/widget/widget-extend.html),

    // 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

    // during widget instantiation, however, because we're creating it on the fly (and 'config.srcNode' isn't set yet), care must

    // be taken to add it to the DOM and to properly set the value of 'config.srcNode' before calling the parent constructor.

    // Note: additional classes can be added to this content node by setting the 'additionalBaseClass' config property (a string).

    var id = 'moodle-dialogue-' + Y.stamp(this) + '-wrap'; // Can't use this.get('id') as it's not set at this stage.

    config.notificationBase =

        Y.Node.create('<div class="' + CSS_CLASSES.BASE + '">')

            .append(Y.Node.create(

                '<div id="' + id + '" role="dialog" ' +

                'aria-labelledby="' + id + '-header-text" class="' + CSS_CLASSES.WRAP + '"  aria-live="polite"></div>'

            )

            .append(Y.Node.create('<div class="' + CSS_CLASSES.HEADER + ' yui3-widget-hd"></div>'))

            .append(Y.Node.create('<div class="' + CSS_CLASSES.BODY + ' yui3-widget-bd"></div>'))

            .append(Y.Node.create('<div class="' + CSS_CLASSES.FOOTER + ' yui3-widget-ft"></div>')));

    config.attachmentPoint = config.attachmentPoint || document.body;

    Y.one(config.attachmentPoint).append(config.notificationBase);

    config.srcNode = '#' + id;

    delete config.buttons; // Don't let anyone pass in buttons as we want to control these during init. addButton can be used later.

    DIALOGUE.superclass.constructor.apply(this, [config]);

};

Y.extend(DIALOGUE, Y.Panel, {

    // Window resize event listener.

    _resizeevent: null,

    // Orientation change event listener.

    _orientationevent: null,

    _calculatedzindex: false,

    // Current maskNode id

    _currentMaskNodeId: null,

    /**

     * The original position of the dialogue before it was reposition to

     * avoid browser jumping.

     *

     * @property _originalPosition

     * @protected

     * @type Array

     */

    _originalPosition: null,

    /**

     * The list of elements that have been aria hidden when displaying

     * this dialogue.

     *

     * @property _hiddenSiblings

     * @protected

     * @type Array

     */

    _hiddenSiblings: null,

    /**

     * Hide the modal only if it doesn't contain a form.

     *

     * @method hideIfNotForm

     */

    hideIfNotForm: function() {

        var bb = this.get('boundingBox'),

            formElement = bb.one(FORM_SELECTOR);

        if (formElement === null) {

            this.hide();

        }

    },

    /**

     * Initialise the dialogue.

     *

     * @method initializer

     */

    initializer: function() {

        var bb;

        if (this.get('closeButton') !== false) {

            var title = this.get('closeButtonTitle');

            // The buttons constructor does not allow custom attributes.

            this.get('buttons').header[0].setAttribute('title', title);

            this.get('buttons').header[0].setAttribute('aria-label', title);

        }

        this.setStdModContent(Y.WidgetStdMod.HEADER,

            '<h5 id="' + this.get('id') + '-wrap-header-text">' + this.get('headerContent') + '</h5>',

            Y.WidgetStdMod.REPLACE);

        // Initialise the element cache.

        this._hiddenSiblings = [];

        if (this.get('render')) {

            this.render();

        }

        this.after('visibleChange', this.visibilityChanged, this);

        if (this.get('center')) {

            this.centerDialogue();

        }

        if (this.get('modal')) {

            // If we're a modal then make sure our container is ARIA

            // hidden by default. ARIA visibility is managed for modal dialogues.

            this.get(BASE).set('aria-hidden', 'true');

            this.plug(Y.M.core.LockScroll);

        }

        // Remove the `focusoutside` listener.

        // It conflicts with the ARIA focuslock manager which supports both YUI and non-YUI dialogues.

        this.set('focusOn', Y.Array(this.get('focusOn')).filter(function(node) {

            return node.eventName !== 'focusoutside';

        }));

        Y.one('document').on('orientationchange', function() {

            // This will detect a change in orientation and re-trigger centering.

            this.centerDialogOnVisible();

        }, this);

        Y.one('window').on('resize', function() {

            // Detect window resize (most browsers).

            this.centerDialogOnVisible();

        }, this);

        // Observe dialog on size change.

        this.centerDialogOnDialogSizeChange(this);

        // Workaround upstream YUI bug http://yuilibrary.com/projects/yui3/ticket/2532507

        // and allow setting of z-index in theme.

        bb = this.get('boundingBox');

        bb.addClass(HAS_ZINDEX);

        // Add any additional classes that were specified.

        Y.Array.each(this.get('extraClasses'), bb.addClass, bb);

        if (this.get('visible')) {

            this.applyZIndex();

            this.applyAndTrapFocus();

            // Only do accessibility hiding for modals because the ARIA spec

            // says that all ARIA dialogues should be modal.

            if (this.get('modal')) {

                // Make this dialogue visible to screen readers.

                this.setAccessibilityVisible();

            }

        }

        // Recalculate the zIndex every time the modal is altered.

        this.on('maskShow', this.applyZIndex);

        this.on('maskShow', function() {

            // When the mask shows, position the boundingBox at the top-left of the window such that when it is

            // focused, the position does not change.

            var w = Y.one(Y.config.win),

                bb = this.get('boundingBox');

            if (!this.get('center')) {

                this._originalPosition = bb.getXY();

            }

            // Check if maskNode already init click event.

            var maskNode = this.get('maskNode');

            if (this._currentMaskNodeId !== maskNode.get('_yuid')) {

                this._currentMaskNodeId = maskNode.get('_yuid');

                maskNode.on('click', this.hideIfNotForm, this);

            }

            if (bb.getStyle('position') !== 'fixed') {

                // If the boundingBox has been positioned in a fixed manner, then it will not position correctly to scrollTop.

                bb.setStyles({

                    top: w.get('scrollTop'),

                    left: w.get('scrollLeft')

                });

            }

        }, this);

        // Add any additional classes to the content node if required.

        var nBase = this.get('notificationBase');

        var additionalClasses = this.get('additionalBaseClass');

        if (additionalClasses !== '') {

            nBase.addClass(additionalClasses);

        }

        // Remove the dialogue from the DOM when it is destroyed.

        this.after('destroyedChange', function() {

            this.get(BASE).remove(true);

        }, this);

    },

    /**

     * Either set the zindex to the supplied value, or set it to one more than the highest existing

     * dialog in the page.

     *

     * @method applyZIndex

     */

    applyZIndex: function() {

        var highestzindex = 1040,

            zindexvalue = 1,

            bb = this.get('boundingBox'),

            ol = this.get('maskNode'),

            zindex = this.get('zIndex');

        if (zindex !== 0 && !this._calculatedzindex) {

            // The zindex was specified so we should use that.

            bb.setStyle('zIndex', zindex);

        } else {

            // Determine the correct zindex by looking at all existing dialogs and menubars in the page.

            Y.all(DIALOGUE_SELECTOR + ', ' + MENUBAR_SELECTOR + ', ' + DOT + HAS_ZINDEX).each(function(node) {

                var zindex = this.findZIndex(node);

                if (zindex > highestzindex) {

                    highestzindex = zindex;

                }

            }, this);

            // Only set the zindex if we found a wrapper.

            zindexvalue = (highestzindex + 1).toString();

            bb.setStyle('zIndex', zindexvalue);

            this.set('zIndex', zindexvalue);

            if (this.get('modal')) {

                ol.setStyle('zIndex', zindexvalue);

                // In IE8, the z-indexes do not take effect properly unless you toggle

                // the lightbox from 'fixed' to 'static' and back. This code does so

                // using the minimum setTimeouts that still actually work.

                if (Y.UA.ie && Y.UA.compareVersions(Y.UA.ie, 9) < 0) {

                    setTimeout(function() {

                        ol.setStyle('position', 'static');

                        setTimeout(function() {

                            ol.setStyle('position', 'fixed');

                        }, 0);

                    }, 0);

                }

            }

            this._calculatedzindex = true;

        }

    },

    /**

     * Finds the zIndex of the given node or its parent.

     *

     * @method findZIndex

     * @param {Node} node The Node to apply the zIndex to.

     * @return {Number} Either the zIndex, or 0 if one was not found.

     */

    findZIndex: function(node) {

        // In most cases the zindex is set on the parent of the dialog.

        var zindex = node.getStyle('zIndex') || node.ancestor().getStyle('zIndex');

        if (zindex) {

            return parseInt(zindex, 10);

        }

        return 0;

    },

    /**

     * Event listener for the visibility changed event.

     *

     * @method visibilityChanged

     * @param {EventFacade} e

     */

    visibilityChanged: function(e) {

        var titlebar, bb;

        if (e.attrName === 'visible') {

            this.get('maskNode').addClass(CSS_CLASSES.LIGHTBOX);

            // Going from visible to hidden.

            if (e.prevVal && !e.newVal) {

                bb = this.get('boundingBox');

                if (this._resizeevent) {

                    this._resizeevent.detach();

                    this._resizeevent = null;

                }

                if (this._orientationevent) {

                    this._orientationevent.detach();

                    this._orientationevent = null;

                }

                require(['core/local/aria/focuslock'], function(FocusLockManager) {

                    // Untrap focus when the dialogue is hidden.

                    FocusLockManager.untrapFocus();

                });

                if (this.get('modal')) {

                    // Hide this dialogue from screen readers.

                    this.setAccessibilityHidden();

                }

            }

            // Going from hidden to visible.

            if (!e.prevVal && e.newVal) {

                // This needs to be done each time the dialog is shown as new dialogs may have been opened.

                this.applyZIndex();

                // This needs to be done each time the dialog is shown as the window may have been resized.

                this.makeResponsive();

                if (!this.shouldResizeFullscreen()) {

                    if (this.get('draggable')) {

                        titlebar = '#' + this.get('id') + ' .' + CSS_CLASSES.HEADER;

                        this.plug(Y.Plugin.Drag, {handles: [titlebar]});

                        Y.one(titlebar).setStyle('cursor', 'move');

                    }

                }

                // Only do accessibility hiding for modals because the ARIA spec

                // says that all ARIA dialogues should be modal.

                if (this.get('modal')) {

                    // Make this dialogue visible to screen readers.

                    this.setAccessibilityVisible();

                }

            }

            if (this.get('center') && !e.prevVal && e.newVal) {

                this.centerDialogue();

            }

        }

    },

    /**

     * If the responsive attribute is set on the dialog, and the window size is

     * smaller than the responsive width - make the dialog fullscreen.

     *

     * @method makeResponsive

     */

    makeResponsive: function() {

        var bb = this.get('boundingBox');

        if (this.shouldResizeFullscreen()) {

            // Make this dialogue fullscreen on a small screen.

            // Disable the page scrollbars.

            // Size and position the fullscreen dialog.

            bb.addClass(DIALOGUE_FULLSCREEN_CLASS);

            bb.setStyles({'left': null,

                          'top': null,

                          'width': null,

                          'height': null,

                          'right': null,

                          'bottom': null});

        } else {

            if (this.get('responsive')) {

                // We must reset any of the fullscreen changes.

                bb.removeClass(DIALOGUE_FULLSCREEN_CLASS)

                    .setStyles({'width': this.get('width'),

                                'height': this.get('height')});

            }

        }

        // Update Lock scroll if the plugin is present.

        if (this.lockScroll) {

            this.lockScroll.updateScrollLock(this.shouldResizeFullscreen());

        }

    },

    /**

     * Center the dialog on the screen.

     *

     * @method centerDialogue

     */

    centerDialogue: function() {

        var bb = this.get('boundingBox'),

            hidden = bb.hasClass(DIALOGUE_HIDDEN_CLASS),

            x,

            y;

        // Don't adjust the position if we are in full screen mode.

        if (this.shouldResizeFullscreen()) {

            return;

        }

        if (hidden) {

            bb.setStyle('top', '-1000px').removeClass(DIALOGUE_HIDDEN_CLASS);

        }

        x = Math.max(Math.round((bb.get('winWidth') - bb.get('offsetWidth')) / 2), 15);

        y = Math.max(Math.round((bb.get('winHeight') - bb.get('offsetHeight')) / 2), 15) + Y.one(window).get('scrollTop');

        bb.setStyles({'left': x, 'top': y});

        if (hidden) {

            bb.addClass(DIALOGUE_HIDDEN_CLASS);

        }

        this.makeResponsive();

    },

    /**

     * Automatic re-center dialog when dialog size is changed.

     *

     * @method centerDialogOnDialogSizeChange

     * @param {M.core.dialogue} dialog object to apply centering.

     */

    centerDialogOnDialogSizeChange: function(dialog) {

        // ResizeObserver doesn't get recognized in JSHint.

        // So we need to suppress the false warning.

        var observer = new ResizeObserver(function() { // jshint ignore:line

            dialog.centerDialogOnVisible();

        });

        var bb = dialog.get('boundingBox');

        observer.observe(bb._node, {attributes: true, attributeFilter: ['class']});

    },

    /**

     * Centering dialog when dialog is visible.

     *

     * @method centerDialogOnVisible

     */

    centerDialogOnVisible: function() {

        if (!this.get('visible')) {

            return; // Only centre visible dialogue.

        }

        if (this.name !== DIALOGUE_NAME) {

            return; // Only centre Moodle dialogues.

        }

        if (this.shouldResizeFullscreen()) {

            this.makeResponsive();

        }

        this.centerDialogue();

    },

    /**

     * Return whether this dialogue should be fullscreen or not.

     *

     * Responsive attribute must be true and we should not be in an iframe and the screen width should

     * be less than the responsive width.

     *

     * @method shouldResizeFullscreen

     * @return {Boolean}

     */

    shouldResizeFullscreen: function() {

        return (window === window.parent) && this.get('responsive') &&

               Math.floor(Y.one(document.body).get('winWidth')) < this.get('responsiveWidth');

    },

    _focus: function() {

        this.focus();

    },

    show: function() {

        var result = DIALOGUE.superclass.show.call(this);

        if (!this.get('center') && this._originalPosition) {

            // Restore the dialogue position to it's location before it was moved at show time.

            this.get('boundingBox').setXY(this._originalPosition);

        }

        this.applyAndTrapFocus();

        return result;

    },

    hide: function(e) {

        if (e) {

            // If the event was closed by an escape key event, then we need to check that this

            // dialogue is currently focused to prevent closing all dialogues in the stack.

            if (e.type === 'key' && e.keyCode === 27 && !this.get('focused')) {

                return;

            }

        }

        // Unlock scroll if the plugin is present.

        if (this.lockScroll) {

            this.lockScroll.disableScrollLock();

        }

        return DIALOGUE.superclass.hide.call(this, arguments);

    },

    /**

     * Setup key delegation to keep tabbing within the open dialogue.

     *

     * @method keyDelegation

     */

    keyDelegation: function() {

        Y.log('The keyDelegation function has been deprecated in favour of the AMD core/local/aria/focuslock module');

        var bb = this.get('boundingBox');

        bb.delegate('key', function(e) {

            var target = e.target;

            var direction = 'forward';

            if (e.shiftKey) {

                direction = 'backward';

            }

            if (this.trapFocus(target, direction)) {

                e.preventDefault();

            }

        }, 'down:9', CAN_RECEIVE_FOCUS_SELECTOR, this);

    },

    /**

     * Trap the tab focus within the open modal.

     *

     * @method trapFocus

     * @param {string} target the element target

     * @param {string} direction tab key for forward and tab+shift for backward

     * @return {Boolean} The result of the focus action.

     */

    trapFocus: function(target, direction) {

        var bb = this.get('boundingBox'),

            firstitem = bb.one(CAN_RECEIVE_FOCUS_SELECTOR),

            lastitem = bb.all(CAN_RECEIVE_FOCUS_SELECTOR).pop();

        if (target === lastitem && direction === 'forward') { // Tab key.

            return firstitem.focus();

        } else if (target === firstitem && direction === 'backward') {  // Tab+shift key.

            return lastitem.focus();

        }

    },

    /**

     * Sets the appropriate aria attributes on this dialogue and the other

     * elements in the DOM to ensure that screen readers are able to navigate

     * the dialogue popup correctly.

     *

     * @method setAccessibilityVisible

     */

    setAccessibilityVisible: function() {

        // Get the element that contains this dialogue because we need it

        // to filter out from the document.body child elements.

        var container = this.get(BASE);

        // We need to get a list containing each sibling element and the shallowest

        // non-ancestral nodes in the DOM. We can shortcut this a little by leveraging

        // the fact that this dialogue is always appended to the document body therefore

        // it's siblings are the shallowest non-ancestral nodes. If that changes then

        // this code should also be updated.

        Y.one(document.body).get('children').each(function(node) {

            // Skip the element that contains us.

            if (node !== container) {

                var hidden = node.get('aria-hidden');

                // If they are already hidden we can ignore them.

                if (hidden !== 'true') {

                    // Save their current state.

                    node.setData('previous-aria-hidden', hidden);

                    this._hiddenSiblings.push(node);

                    // Hide this node from screen readers.

                    node.set('aria-hidden', 'true');

                }

            }

        }, this);

        // Make us visible to screen readers.

        container.set('aria-hidden', 'false');

    },

    /**

     * Restores the aria visibility on the DOM elements changed when displaying

     * the dialogue popup and makes the dialogue aria hidden to allow screen

     * readers to navigate the main page correctly when the dialogue is closed.

     *

     * @method setAccessibilityHidden

     */

    setAccessibilityHidden: function() {

        var container = this.get(BASE);

        container.set('aria-hidden', 'true');

        // Restore the sibling nodes back to their original values.

        Y.Array.each(this._hiddenSiblings, function(node) {

            var previousValue = node.getData('previous-aria-hidden');

            // If the element didn't previously have an aria-hidden attribute

            // then we can just remove the one we set.

            if (previousValue === null) {

                node.removeAttribute('aria-hidden');

            } else {

                // Otherwise set it back to the old value (which will be false).

                node.set('aria-hidden', previousValue);

            }

        });

        // Clear the cache. No longer need to store these.

        this._hiddenSiblings = [];

    },

    /**

     * Focuses on the node specified by focusOnShowSelector, or the first focusable node if nothing is specified.

     * It also traps the focus to the current bounding box.

     *

     * @method applyAndTrapFocus

     */

    applyAndTrapFocus: function() {

        var content = this.bodyNode;

        var focusSelector = this.get('focusOnShowSelector');

        var focusNode = null;

        // Try and find a node to focus on using the focusOnShowSelector attribute.

        if (focusSelector !== null) {

            focusNode = this.get('boundingBox').one(focusSelector);

        }

        if (!focusNode) {

            // Fall back to the first focusable element in the body of the dialogue if no focus node was found yet.

            if (content && content !== '') {

                focusNode = content.one(CAN_RECEIVE_FOCUS_SELECTOR);

            }

        }

        require(['core/local/aria/focuslock'], function(FocusLockManager) {

            // Trap focus to the current bounding box.

            FocusLockManager.trapFocus(this.get('boundingBox').getDOMNode());

            if (focusNode) {

                focusNode.focus();

            }

        }.bind(this));

    },

}, {

    NAME: DIALOGUE_NAME,

    CSS_PREFIX: DIALOGUE_PREFIX,

    ATTRS: {

        /**

         * Any additional classes to add to the base Node.

         *

         * @attribute additionalBaseClass

         * @type String

         * @default ''

         */

        additionalBaseClass: {

            value: ''

        },

        /**

         * The Notification base Node.

         *

         * @attribute notificationBase

         * @type Node

         */

        notificationBase: {

        },

        /**

         * Whether to display the dialogue modally and with a

         * lightbox style.

         *

         * @attribute lightbox

         * @type Boolean

         * @default true

         * @deprecated Since Moodle 2.7. Please use modal instead.

         */

        lightbox: {

            lazyAdd: false,

            setter: function(value) {

                Y.log("The lightbox attribute of M.core.dialogue has been deprecated since Moodle 2.7, " +

                      "please use the modal attribute instead",

                    'warn', 'moodle-core-notification-dialogue');

                this.set('modal', value);

            }

        },

        /**

         * Whether to display a close button on the dialogue.

         *

         * Note, we do not recommend hiding the close button as this has

         * potential accessibility concerns.

         *

         * @attribute closeButton

         * @type Boolean

         * @default true

         */

        closeButton: {

            validator: Y.Lang.isBoolean,

            value: true

        },

        /**

         * The title for the close button if one is to be shown.

         *

         * @attribute closeButtonTitle

         * @type String

         * @default 'Close'

         */

        closeButtonTitle: {

            validator: Y.Lang.isString,

            value: M.util.get_string('closebuttontitle', 'moodle')

        },

        /**

         * Whether to display the dialogue centrally on the screen.

         *

         * @attribute center

         * @type Boolean

         * @default true

         */

        center: {

            validator: Y.Lang.isBoolean,

            value: true

        },

        /**

         * Whether to make the dialogue movable around the page.

         *

         * @attribute draggable

         * @type Boolean

         * @default false

         */

        draggable: {

            validator: Y.Lang.isBoolean,

            value: false

        },

        /**

         * Used to generate a unique id for the dialogue.

         *

         * @attribute COUNT

         * @type String

         * @default null

         * @writeonce

         */

        COUNT: {

            writeOnce: true,

            valueFn: function() {

                return Y.stamp(this);

            }

        },

        /**

         * Used to disable the fullscreen resizing behaviour if required.

         *

         * @attribute responsive

         * @type Boolean

         * @default true

         */

        responsive: {

            validator: Y.Lang.isBoolean,

            value: true

        },

        /**

         * The width that this dialogue should be resized to fullscreen.

         *

         * @attribute responsiveWidth

         * @type Number

         * @default 768

         */

        responsiveWidth: {

            value: 768

        },

        /**

         * Selector to a node that should recieve focus when this dialogue is shown.

         *

         * The default behaviour is to focus on the header.

         *

         * @attribute focusOnShowSelector

         * @default null

         * @type String

         */

        focusOnShowSelector: {

            value: null

        }

    }

});

Y.Base.modifyAttrs(DIALOGUE, {

    /**

     * String with units, or number, representing the width of the Widget.

     * If a number is provided, the default unit, defined by the Widgets

     * DEF_UNIT, property is used.

     *

     * If a value of 'auto' is used, then an empty String is instead

     * returned.

     *

     * @attribute width

     * @default '400px'

     * @type {String|Number}

     */

    width: {

        value: '400px',

        setter: function(value) {

            if (value === 'auto') {

                return '';

            }

            return value;

        }

    },

    /**

     * Boolean indicating whether or not the Widget is visible.

     *

     * We override this from the default Widget attribute value.

     *

     * @attribute visible

     * @default false

     * @type Boolean

     */

    visible: {

        value: false

    },

    /**

     * A convenience Attribute, which can be used as a shortcut for the

     * `align` Attribute.

     *

     * Note: We override this in Moodle such that it sets a value for the

     * `center` attribute if set. The `centered` will always return false.

     *

     * @attribute centered

     * @type Boolean|Node

     * @default false

     */

    centered: {

        setter: function(value) {

            if (value) {

                this.set('center', true);

            }

            return false;

        }

    },

    /**

     * Boolean determining whether to render the widget during initialisation.

     *

     * We override this to change the default from false to true for the dialogue.

     * We then proceed to early render the dialogue during our initialisation rather than waiting

     * for YUI to render it after that.

     *

     * @attribute render

     * @type Boolean

     * @default true

     */

    render: {

        value: true,

        writeOnce: true

    },

    /**

     * Any additional classes to add to the boundingBox.

     *

     * @attribute extraClasses

     * @type Array

     * @default []

     */

    extraClasses: {

        value: []

    },

    /**

     * Identifier for the widget.

     *

     * @attribute id

     * @type String

     * @default a product of guid().

     * @writeOnce

     */

    id: {

        writeOnce: true,

        valueFn: function() {

            var id = 'moodle-dialogue-' + Y.stamp(this);

            return id;

        }

    },

    /**

     * Collection containing the widget's buttons.

     *

     * @attribute buttons

     * @type Object

     * @default {}

     */

    buttons: {

        getter: Y.WidgetButtons.prototype._getButtons,

        setter: Y.WidgetButtons.prototype._setButtons,

        valueFn: function() {

            if (this.get('closeButton') === false) {

                return null;

            } else {

                return [

                    {

                        section: Y.WidgetStdMod.HEADER,

                        classNames: 'closebutton',

                        action: function() {

                            this.hide();

                        }

                    }

                ];

            }

        }

    }

});

Y.Base.mix(DIALOGUE, [Y.M.core.WidgetFocusAfterHide]);

M.core.dialogue = DIALOGUE;