3
Copyright 2012 Yahoo! Inc. All rights reserved.
4
Licensed under the BSD License.
5
http://yuilibrary.com/license/
7
YUI.add('widget-modality', function(Y) {
10
* Provides modality support for Widgets, though an extension
12
* @module widget-modality
15
var WIDGET = 'widget',
16
RENDER_UI = 'renderUI',
19
BOUNDING_BOX = 'boundingBox',
20
CONTENT_BOX = 'contentBox',
24
isBoolean = Y.Lang.isBoolean,
25
getCN = Y.ClassNameManager.getClassName,
26
MaskShow = "maskShow",
27
MaskHide = "maskHide",
28
ClickOutside = "clickoutside",
29
FocusOutside = "focusoutside",
31
supportsPosFixed = (function(){
33
/*! IS_POSITION_FIXED_SUPPORTED - Juriy Zaytsev (kangax) - http://yura.thinkweb2.com/cft/ */
35
var doc = Y.config.doc,
39
if (doc.createElement) {
40
el = doc.createElement('div');
42
el.style.position = 'fixed';
43
el.style.top = '10px';
45
if (root && root.appendChild && root.removeChild) {
47
isSupported = (el.offsetTop === 10);
57
* Widget extension, which can be used to add modality support to the base Widget class,
58
* through the Base.create method.
60
* @class WidgetModality
61
* @param {Object} config User configuration object
63
function WidgetModal(config) {}
68
modal : getCN(WIDGET, MODAL),
69
mask : getCN(WIDGET, MASK)
73
* Static property used to define the default attribute
74
* configuration introduced by WidgetModality.
85
* @description Returns a Y.Node instance of the node being used as the mask.
88
getter : '_getMaskNode',
97
* @description Whether the widget should be modal or not.
108
* @description An array of objects corresponding to the nodes and events that will trigger a re-focus back on the widget.
109
* The implementer can supply an array of objects, with each object having the following properties:
110
* <p>eventName: (string, required): The eventName to listen to.</p>
111
* <p>node: (Y.Node, optional): The Y.Node that will fire the event (defaults to the boundingBox of the widget)</p>
112
* <p>By default, this attribute consists of two objects which will cause the widget to re-focus if anything
113
* outside the widget is clicked on or focussed upon.</p>
116
valueFn: function() {
119
// node: this.get(BOUNDING_BOX),
120
eventName: ClickOutside
123
//node: this.get(BOUNDING_BOX),
124
eventName: FocusOutside
129
validator: Y.Lang.isArray
135
WidgetModal.CLASSES = MODAL_CLASSES;
139
* Returns the mask if it exists on the page - otherwise creates a mask. There's only
140
* one mask on a page at a given time.
142
* This method in invoked internally by the getter of the maskNode ATTR.
147
WidgetModal._GET_MASK = function() {
149
var mask = Y.one(".yui3-widget-mask") || null,
150
win = Y.one('window');
157
mask = Y.Node.create('<div></div>');
158
mask.addClass(MODAL_CLASSES.mask);
159
if (supportsPosFixed) {
171
position : 'absolute',
172
width : win.get('winWidth') +'px',
173
height : win.get('winHeight') + 'px',
188
* A stack of Y.Widget objects representing the current hierarchy of modal widgets presently displayed on the screen
191
WidgetModal.STACK = [];
194
WidgetModal.prototype = {
196
initializer: function () {
197
Y.after(this._renderUIModal, this, RENDER_UI);
198
Y.after(this._syncUIModal, this, SYNC_UI);
199
Y.after(this._bindUIModal, this, BIND_UI);
202
destructor: function () {
203
// Hack to remove this thing from the STACK.
204
this._uiSetHostVisibleModal(false);
207
// *** Instance Members *** //
209
_uiHandlesModal: null,
213
* Adds modal class to the bounding box of the widget
215
* This method in invoked after renderUI is invoked for the Widget class
216
* using YUI's aop infrastructure.
218
* @method _renderUIModal
221
_renderUIModal : function () {
223
var bb = this.get(BOUNDING_BOX);
224
//cb = this.get(CONTENT_BOX);
226
//this makes the content box content appear over the mask
231
this._repositionMask(this);
232
bb.addClass(MODAL_CLASSES.modal);
238
* Hooks up methods to be executed when the widget's visibility or z-index changes
240
* This method in invoked after bindUI is invoked for the Widget class
241
* using YUI's aop infrastructure.
243
* @method _bindUIModal
246
_bindUIModal : function () {
248
this.after(VISIBLE+CHANGE, this._afterHostVisibleChangeModal);
249
this.after(Z_INDEX+CHANGE, this._afterHostZIndexChangeModal);
250
this.after("focusOnChange", this._afterFocusOnChange);
252
// Re-align the mask in the viewport if `position: fixed;` is not
253
// supported. iOS < 5 and Android < 3 don't actually support it even
254
// though they both pass the feature test; the UA sniff is here to
255
// account for that. Ideally this should be replaced with a better
257
if (!supportsPosFixed || Y.UA.ios < 5 || Y.UA.android < 3) {
258
Y.one('win').on('scroll', this._resyncMask, this);
263
* Syncs the mask with the widget's current state, namely the visibility and z-index of the widget
265
* This method in invoked after syncUI is invoked for the Widget class
266
* using YUI's aop infrastructure.
268
* @method _syncUIModal
271
_syncUIModal : function () {
273
//var host = this.get(HOST);
275
this._uiSetHostVisibleModal(this.get(VISIBLE));
276
this._uiSetHostZIndexModal(this.get(Z_INDEX));
281
* Provides mouse and tab focus to the widget's bounding box.
285
_focus : function (e) {
287
var bb = this.get(BOUNDING_BOX),
288
oldTI = bb.get('tabIndex');
290
bb.set('tabIndex', oldTI >= 0 ? oldTI : 0);
298
_blur : function () {
304
* Returns the Y.Node instance of the maskNode
306
* @method _getMaskNode
307
* @return {Node} The Y.Node instance of the mask, as returned from WidgetModal._GET_MASK
309
_getMaskNode : function () {
311
return WidgetModal._GET_MASK();
315
* Performs events attaching/detaching, stack shifting and mask repositioning based on the visibility of the widget
317
* @method _uiSetHostVisibleModal
318
* @param {boolean} Whether the widget is visible or not
320
_uiSetHostVisibleModal : function (visible) {
321
var stack = WidgetModal.STACK,
322
maskNode = this.get('maskNode'),
323
isModal = this.get('modal'),
328
Y.Array.each(stack, function(modal){
329
modal._detachUIHandlesModal();
333
// push on top of stack
336
this._repositionMask(this);
337
this._uiSetHostZIndexModal(this.get(Z_INDEX));
341
Y.later(1, this, '_attachUIHandlesModal');
348
index = Y.Array.indexOf(stack, this);
350
// Remove modal widget from global stack.
351
stack.splice(index, 1);
354
this._detachUIHandlesModal();
359
this._repositionMask(topModal);
360
//topModal._attachUIHandlesModal();
361
topModal._uiSetHostZIndexModal(topModal.get(Z_INDEX));
363
if (topModal.get('modal')) {
364
//topModal._attachUIHandlesModal();
365
Y.later(1, topModal, '_attachUIHandlesModal');
371
if (maskNode.getStyle('display') === 'block') {
381
* Sets the z-index of the mask node.
383
* @method _uiSetHostZIndexModal
384
* @param {Number} Z-Index of the widget
386
_uiSetHostZIndexModal : function (zIndex) {
388
if (this.get('modal')) {
389
this.get('maskNode').setStyle(Z_INDEX, zIndex || 0);
395
* 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.
397
* @method _attachUIHandlesModal
399
_attachUIHandlesModal : function () {
401
if (this._uiHandlesModal || WidgetModal.STACK[0] !== this) {
402
// Quit early if we have ui handles, or if we not at the top
403
// of the global stack.
407
var bb = this.get(BOUNDING_BOX),
408
maskNode = this.get('maskNode'),
409
focusOn = this.get('focusOn'),
410
focus = Y.bind(this._focus, this),
414
for (i = 0, len = focusOn.length; i < len; i++) {
417
o.node = focusOn[i].node;
418
o.ev = focusOn[i].eventName;
419
o.keyCode = focusOn[i].keyCode;
421
//no keycode or node defined
422
if (!o.node && !o.keyCode && o.ev) {
423
uiHandles.push(bb.on(o.ev, focus));
426
//node defined, no keycode (not a keypress)
427
else if (o.node && !o.keyCode && o.ev) {
428
uiHandles.push(o.node.on(o.ev, focus));
431
//node defined, keycode defined, event defined (its a key press)
432
else if (o.node && o.keyCode && o.ev) {
433
uiHandles.push(o.node.on(o.ev, focus, o.keyCode));
437
Y.Log('focusOn ATTR Error: The event with name "'+o.ev+'" could not be attached.');
442
if ( ! supportsPosFixed) {
443
uiHandles.push(Y.one('win').on('scroll', Y.bind(function(e){
444
maskNode.setStyle('top', maskNode.get('docScrollY'));
448
this._uiHandlesModal = uiHandles;
452
* Detaches all UI Listeners that were set in _attachUIHandlesModal from the widget.
454
* @method _detachUIHandlesModal
456
_detachUIHandlesModal : function () {
457
Y.each(this._uiHandlesModal, function(h){
460
this._uiHandlesModal = null;
464
* Default function that is called when visibility is changed on the widget.
466
* @method _afterHostVisibleChangeModal
467
* @param {EventFacade} e The event facade of the change
469
_afterHostVisibleChangeModal : function (e) {
471
this._uiSetHostVisibleModal(e.newVal);
475
* Default function that is called when z-index is changed on the widget.
477
* @method _afterHostZIndexChangeModal
478
* @param {EventFacade} e The event facade of the change
480
_afterHostZIndexChangeModal : function (e) {
482
this._uiSetHostZIndexModal(e.newVal);
486
* Returns a boolean representing whether the current widget is in a "nested modality" state.
487
* This is done by checking the number of widgets currently on the stack.
492
isNested: function() {
493
var length = WidgetModal.STACK.length,
494
retval = (length > 1) ? true : false;
499
* Repositions the mask in the DOM for nested modality cases.
501
* @method _repositionMask
502
* @param {Widget} nextElem The Y.Widget instance that will be visible in the stack once the current widget is closed.
504
_repositionMask: function(nextElem) {
506
var currentModal = this.get('modal'),
507
nextModal = nextElem.get('modal'),
508
maskNode = this.get('maskNode'),
511
//if this is modal and host is not modal
512
if (currentModal && !nextModal) {
513
//leave the mask where it is, since the host is not modal.
518
//if the main widget is not modal but the host is modal, or both of them are modal
519
else if ((!currentModal && nextModal) || (currentModal && nextModal)) {
521
//then remove the mask off DOM, reposition it, and reinsert it into the DOM
524
bb = nextElem.get(BOUNDING_BOX);
525
bbParent = bb.get('parentNode') || Y.one('body');
526
bbParent.insert(maskNode, bbParent.get('firstChild'));
533
* Resyncs the mask in the viewport for browsers that don't support fixed positioning
535
* @method _resyncMask
536
* @param {Y.Widget} nextElem The Y.Widget instance that will be visible in the stack once the current widget is closed.
539
_resyncMask: function (e) {
540
var o = e.currentTarget,
541
offsetX = o.get('docScrollX'),
542
offsetY = o.get('docScrollY'),
543
w = o.get('innerWidth') || o.get('winWidth'),
544
h = o.get('innerHeight') || o.get('winHeight'),
545
mask = this.get('maskNode');
548
"top": offsetY + "px",
549
"left": offsetX + "px",
556
* Default function called when focusOn Attribute is changed. Remove existing listeners and create new listeners.
558
* @method _afterFocusOnChange
560
_afterFocusOnChange : function(e) {
561
this._detachUIHandlesModal();
563
if (this.get(VISIBLE)) {
564
this._attachUIHandlesModal();
569
Y.WidgetModality = WidgetModal;
573
}, '3.5.0' ,{requires:['base-build', 'event-outside', 'widget'], skinnable:true});