Widget-Modality.js revision d76ac9ac602218a517929d3d4a9c5ac39256fcf6
/**
* 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',
CONTENT_BOX = 'contentBox',
VISIBLE = 'visible',
Z_INDEX = 'zIndex',
CHANGE = 'Change',
MaskShow = "maskShow",
MaskHide = "maskHide",
ClickOutside = "clickoutside",
FocusOutside = "focusoutside",
supportsPosFixed = (function(){
/*! IS_POSITION_FIXED_SUPPORTED - Juriy Zaytsev (kangax) - http://yura.thinkweb2.com/cft/ */
isSupported = null,
if (doc.createElement) {
}
}
}
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 = {
};
/**
* 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,
},
/**
* @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),
},
{
//node: this.get(BOUNDING_BOX),
}
];
},
}
};
/**
* 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() {
if (mask) {
return mask;
}
else {
if (supportsPosFixed) {
position : 'fixed',
width : '100%',
height : '100%',
top : '0',
left : '0',
display : 'block'
});
}
else {
position : 'absolute',
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 () {
},
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 () {
//cb = this.get(CONTENT_BOX);
//this makes the content box content appear over the mask
// cb.setStyles({
// position: ""
// });
this._repositionMask(this);
},
/**
* 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 () {
//realign the mask in the viewport if positionfixed is not supported.
//ios and android don't support it and the current feature test doesnt
//account for this, so we are doing UA sniffing here. This should be replaced
//with an updated featuretest later.
}
},
/**
* 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);
},
/**
* Provides mouse and tab focus to the widget's bounding box.
*
* @method _focus
*/
_focus : function (e) {
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) {
if (visible) {
});
// push on top of stack
//this._attachUIHandlesModal();
this._repositionMask(this);
if (isModal) {
//this._attachUIHandlesModal();
this._focus();
}
} else {
if (index >= 0) {
// Remove modal widget from global stack.
}
this._detachUIHandlesModal();
this._blur();
this._repositionMask(topModal);
//topModal._attachUIHandlesModal();
//topModal._attachUIHandlesModal();
}
} else {
}
}
}
},
/**
* Sets the z-index of the mask node.
*
* @method _uiSetHostZIndexModal
* @param {Number} Z-Index of the widget
*/
_uiSetHostZIndexModal : function (zIndex) {
if (this.get('modal')) {
}
},
/**
* 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 () {
// Quit early if we have ui handles, or if we not at the top
// of the global stack.
return;
}
uiHandles = [],
i, len, o;
o = {};
//no keycode or node defined
}
//node defined, no keycode (not a keypress)
}
//node defined, keycode defined, event defined (its a key press)
}
else {
}
}
if ( ! supportsPosFixed) {
}, 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() {
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) {
//if this is modal and host is not modal
if (currentModal && !nextModal) {
//leave the mask where it is, since the host is not modal.
}
//if the main widget is not modal but the host is modal, or both of them are modal
//then remove the mask off DOM, reposition it, and reinsert it into the DOM
}
},
/**
* 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,
"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(e) {
this._detachUIHandlesModal();
this._attachUIHandlesModal();
}
}
};