Current Path : C:/xampp/htdocs/moodle/lib/yuilib/3.17.2/widget-modality/ |
Current File : C:/xampp/htdocs/moodle/lib/yuilib/3.17.2/widget-modality/widget-modality-debug.js |
/* YUI 3.17.2 (build 9c3c78e) Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ YUI.add('widget-modality', function (Y, NAME) { /** * Provides modality support for Widgets, though an extension * * @module widget-modality */ var WIDGET = 'widget', RENDER_UI = 'renderUI', BIND_UI = 'bindUI', SYNC_UI = 'syncUI', BOUNDING_BOX = 'boundingBox', VISIBLE = 'visible', Z_INDEX = 'zIndex', CHANGE = 'Change', isBoolean = Y.Lang.isBoolean, getCN = Y.ClassNameManager.getClassName, MaskShow = "maskShow", MaskHide = "maskHide", ClickOutside = "clickoutside", FocusOutside = "focusoutside", supportsPosFixed = (function(){ /*! IS_POSITION_FIXED_SUPPORTED - Juriy Zaytsev (kangax) - http://yura.thinkweb2.com/cft/ */ var doc = Y.config.doc, isSupported = null, el, root; if (doc.createElement) { el = doc.createElement('div'); if (el && el.style) { el.style.position = 'fixed'; el.style.top = '10px'; root = doc.body; if (root && root.appendChild && root.removeChild) { root.appendChild(el); isSupported = (el.offsetTop === 10); root.removeChild(el); } } } return isSupported; }()); /** * Widget extension, which can be used to add modality support to the base Widget class, * through the Base.create method. * * @class WidgetModality * @param {Object} config User configuration object */ function WidgetModal(config) {} var MODAL = 'modal', MASK = 'mask', MODAL_CLASSES = { modal : getCN(WIDGET, MODAL), mask : getCN(WIDGET, MASK) }; /** * Static property used to define the default attribute * configuration introduced by WidgetModality. * * @property ATTRS * @static * @type Object */ WidgetModal.ATTRS = { /** * @attribute maskNode * @type Y.Node * * @description Returns a Y.Node instance of the node being used as the mask. */ maskNode : { getter : '_getMaskNode', readOnly : true }, /** * @attribute modal * @type boolean * * @description Whether the widget should be modal or not. */ modal: { value:false, validator: isBoolean }, /** * @attribute focusOn * @type array * * @description An array of objects corresponding to the nodes and events that will trigger a re-focus back on the widget. * The implementer can supply an array of objects, with each object having the following properties: * <p>eventName: (string, required): The eventName to listen to.</p> * <p>node: (Y.Node, optional): The Y.Node that will fire the event (defaults to the boundingBox of the widget)</p> * <p>By default, this attribute consists of two objects which will cause the widget to re-focus if anything * outside the widget is clicked on or focussed upon.</p> */ focusOn: { valueFn: function() { return [ { // node: this.get(BOUNDING_BOX), eventName: ClickOutside }, { //node: this.get(BOUNDING_BOX), eventName: FocusOutside } ]; }, validator: Y.Lang.isArray } }; WidgetModal.CLASSES = MODAL_CLASSES; WidgetModal._MASK = null; /** * Returns the mask if it exists on the page - otherwise creates a mask. There's only * one mask on a page at a given time. * <p> * This method in invoked internally by the getter of the maskNode ATTR. * </p> * @method _GET_MASK * @static */ WidgetModal._GET_MASK = function() { var mask = WidgetModal._MASK, win = Y.one('win'); if (mask && (mask.getDOMNode() !== null) && mask.inDoc()) { return mask; } mask = Y.Node.create('<div></div>').addClass(MODAL_CLASSES.mask); WidgetModal._MASK = mask; if (supportsPosFixed) { mask.setStyles({ position: 'fixed', width : '100%', height : '100%', top : '0', left : '0', display : 'block' }); } else { mask.setStyles({ position: 'absolute', width : win.get('winWidth') +'px', height : win.get('winHeight') + 'px', top : '0', left : '0', display : 'block' }); } return mask; }; /** * A stack of Y.Widget objects representing the current hierarchy of modal widgets presently displayed on the screen * @property STACK */ WidgetModal.STACK = []; WidgetModal.prototype = { initializer: function () { Y.after(this._renderUIModal, this, RENDER_UI); Y.after(this._syncUIModal, this, SYNC_UI); Y.after(this._bindUIModal, this, BIND_UI); }, destructor: function () { // Hack to remove this thing from the STACK. this._uiSetHostVisibleModal(false); }, // *** Instance Members *** // _uiHandlesModal: null, /** * Adds modal class to the bounding box of the widget * <p> * This method in invoked after renderUI is invoked for the Widget class * using YUI's aop infrastructure. * </p> * @method _renderUIModal * @protected */ _renderUIModal : function () { var bb = this.get(BOUNDING_BOX); //cb = this.get(CONTENT_BOX); //this makes the content box content appear over the mask // cb.setStyles({ // position: "" // }); this._repositionMask(this); bb.addClass(MODAL_CLASSES.modal); }, /** * Hooks up methods to be executed when the widget's visibility or z-index changes * <p> * This method in invoked after bindUI is invoked for the Widget class * using YUI's aop infrastructure. * </p> * @method _bindUIModal * @protected */ _bindUIModal : function () { this.after(VISIBLE+CHANGE, this._afterHostVisibleChangeModal); this.after(Z_INDEX+CHANGE, this._afterHostZIndexChangeModal); this.after("focusOnChange", this._afterFocusOnChange); // Re-align the mask in the viewport if `position: fixed;` is not // supported. iOS < 5 and Android < 3 don't actually support it even // though they both pass the feature test; the UA sniff is here to // account for that. Ideally this should be replaced with a better // feature test. if (!supportsPosFixed || (Y.UA.ios && Y.UA.ios < 5) || (Y.UA.android && Y.UA.android < 3)) { Y.one('win').on('scroll', this._resyncMask, this); } }, /** * Syncs the mask with the widget's current state, namely the visibility and z-index of the widget * <p> * This method in invoked after syncUI is invoked for the Widget class * using YUI's aop infrastructure. * </p> * @method _syncUIModal * @protected */ _syncUIModal : function () { //var host = this.get(HOST); this._uiSetHostVisibleModal(this.get(VISIBLE)); }, /** * Provides mouse and tab focus to the widget's bounding box. * * @method _focus */ _focus : function () { var bb = this.get(BOUNDING_BOX), oldTI = bb.get('tabIndex'); bb.set('tabIndex', oldTI >= 0 ? oldTI : 0); this.focus(); }, /** * Blurs the widget. * * @method _blur */ _blur : function () { this.blur(); }, /** * Returns the Y.Node instance of the maskNode * * @method _getMaskNode * @return {Node} The Y.Node instance of the mask, as returned from WidgetModal._GET_MASK */ _getMaskNode : function () { return WidgetModal._GET_MASK(); }, /** * Performs events attaching/detaching, stack shifting and mask repositioning based on the visibility of the widget * * @method _uiSetHostVisibleModal * @param {boolean} Whether the widget is visible or not */ _uiSetHostVisibleModal : function (visible) { var stack = WidgetModal.STACK, maskNode = this.get('maskNode'), isModal = this.get('modal'), topModal, index; if (visible) { Y.Array.each(stack, function(modal){ modal._detachUIHandlesModal(); modal._blur(); }); // push on top of stack stack.unshift(this); this._repositionMask(this); this._uiSetHostZIndexModal(this.get(Z_INDEX)); if (isModal) { maskNode.show(); Y.later(1, this, '_attachUIHandlesModal'); this._focus(); } } else { index = Y.Array.indexOf(stack, this); if (index >= 0) { // Remove modal widget from global stack. stack.splice(index, 1); } this._detachUIHandlesModal(); this._blur(); if (stack.length) { topModal = stack[0]; this._repositionMask(topModal); //topModal._attachUIHandlesModal(); topModal._uiSetHostZIndexModal(topModal.get(Z_INDEX)); if (topModal.get('modal')) { //topModal._attachUIHandlesModal(); Y.later(1, topModal, '_attachUIHandlesModal'); topModal._focus(); } } else { if (maskNode.getStyle('display') === 'block') { maskNode.hide(); } } } }, /** * Sets the z-index of the mask node. * * @method _uiSetHostZIndexModal * @param {Number} Z-Index of the widget */ _uiSetHostZIndexModal : function (zIndex) { if (this.get('modal')) { this.get('maskNode').setStyle(Z_INDEX, zIndex || 0); } }, /** * Attaches UI Listeners for "clickoutside" and "focusoutside" on the * widget. When these events occur, and the widget is modal, focus is * shifted back onto the widget. * * @method _attachUIHandlesModal */ _attachUIHandlesModal : function () { if (this._uiHandlesModal || WidgetModal.STACK[0] !== this) { // Quit early if we have ui handles, or if we not at the top // of the global stack. return; } var bb = this.get(BOUNDING_BOX), maskNode = this.get('maskNode'), focusOn = this.get('focusOn'), focus = Y.bind(this._focus, this), uiHandles = [], i, len, o; for (i = 0, len = focusOn.length; i < len; i++) { o = {}; o.node = focusOn[i].node; o.ev = focusOn[i].eventName; o.keyCode = focusOn[i].keyCode; //no keycode or node defined if (!o.node && !o.keyCode && o.ev) { uiHandles.push(bb.on(o.ev, focus)); } //node defined, no keycode (not a keypress) else if (o.node && !o.keyCode && o.ev) { uiHandles.push(o.node.on(o.ev, focus)); } //node defined, keycode defined, event defined (its a key press) else if (o.node && o.keyCode && o.ev) { uiHandles.push(o.node.on(o.ev, focus, o.keyCode)); } else { Y.Log('focusOn ATTR Error: The event with name "'+o.ev+'" could not be attached.'); } } if ( ! supportsPosFixed) { uiHandles.push(Y.one('win').on('scroll', Y.bind(function(){ maskNode.setStyle('top', maskNode.get('docScrollY')); }, this))); } this._uiHandlesModal = uiHandles; }, /** * Detaches all UI Listeners that were set in _attachUIHandlesModal from the widget. * * @method _detachUIHandlesModal */ _detachUIHandlesModal : function () { Y.each(this._uiHandlesModal, function(h){ h.detach(); }); this._uiHandlesModal = null; }, /** * Default function that is called when visibility is changed on the widget. * * @method _afterHostVisibleChangeModal * @param {EventFacade} e The event facade of the change */ _afterHostVisibleChangeModal : function (e) { this._uiSetHostVisibleModal(e.newVal); }, /** * Default function that is called when z-index is changed on the widget. * * @method _afterHostZIndexChangeModal * @param {EventFacade} e The event facade of the change */ _afterHostZIndexChangeModal : function (e) { this._uiSetHostZIndexModal(e.newVal); }, /** * Returns a boolean representing whether the current widget is in a "nested modality" state. * This is done by checking the number of widgets currently on the stack. * * @method isNested * @public */ isNested: function() { var length = WidgetModal.STACK.length, retval = (length > 1) ? true : false; return retval; }, /** * Repositions the mask in the DOM for nested modality cases. * * @method _repositionMask * @param {Widget} nextElem The Y.Widget instance that will be visible in the stack once the current widget is closed. */ _repositionMask: function(nextElem) { var currentModal = this.get('modal'), nextModal = nextElem.get('modal'), maskNode = this.get('maskNode'), bb, bbParent; //if this is modal and host is not modal if (currentModal && !nextModal) { //leave the mask where it is, since the host is not modal. maskNode.remove(); this.fire(MaskHide); } //if the main widget is not modal but the host is modal, or both of them are modal else if ((!currentModal && nextModal) || (currentModal && nextModal)) { //then remove the mask off DOM, reposition it, and reinsert it into the DOM maskNode.remove(); this.fire(MaskHide); bb = nextElem.get(BOUNDING_BOX); bbParent = bb.get('parentNode') || Y.one('body'); bbParent.insert(maskNode, bbParent.get('firstChild')); this.fire(MaskShow); } }, /** * Resyncs the mask in the viewport for browsers that don't support fixed positioning * * @method _resyncMask * @param {Y.Widget} nextElem The Y.Widget instance that will be visible in the stack once the current widget is closed. * @private */ _resyncMask: function (e) { var o = e.currentTarget, offsetX = o.get('docScrollX'), offsetY = o.get('docScrollY'), w = o.get('innerWidth') || o.get('winWidth'), h = o.get('innerHeight') || o.get('winHeight'), mask = this.get('maskNode'); mask.setStyles({ "top": offsetY + "px", "left": offsetX + "px", "width": w + 'px', "height": h + 'px' }); }, /** * Default function called when focusOn Attribute is changed. Remove existing listeners and create new listeners. * * @method _afterFocusOnChange */ _afterFocusOnChange : function() { this._detachUIHandlesModal(); if (this.get(VISIBLE)) { this._attachUIHandlesModal(); } } }; Y.WidgetModality = WidgetModal; }, '3.17.2', {"requires": ["base-build", "event-outside", "widget"], "skinnable": true});