diff --git a/src/widget-modality/js/Widget-Modality.js b/src/widget-modality/js/Widget-Modality.js index 2446b6dc144..794b6fc8fa1 100644 --- a/src/widget-modality/js/Widget-Modality.js +++ b/src/widget-modality/js/Widget-Modality.js @@ -9,7 +9,6 @@ var WIDGET = 'widget', BIND_UI = 'bindUI', SYNC_UI = 'syncUI', BOUNDING_BOX = 'boundingBox', - CONTENT_BOX = 'contentBox', VISIBLE = 'visible', Z_INDEX = 'zIndex', CHANGE = 'Change', @@ -127,6 +126,7 @@ var WIDGET = 'widget', 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. @@ -138,14 +138,15 @@ var WIDGET = 'widget', */ WidgetModal._GET_MASK = function() { - var mask = Y.one('.' + MODAL_CLASSES.mask), + var mask = WidgetModal._MASK, win = Y.one('win'); - if (mask) { + if (mask && (mask.getDOMNode() !== null) && mask.inDoc()) { return mask; } mask = Y.Node.create('
').addClass(MODAL_CLASSES.mask); + WidgetModal._MASK = mask; if (supportsPosFixed) { mask.setStyles({ @@ -270,7 +271,7 @@ var WIDGET = 'widget', * * @method _focus */ - _focus : function (e) { + _focus : function () { var bb = this.get(BOUNDING_BOX), oldTI = bb.get('tabIndex'); @@ -430,7 +431,7 @@ var WIDGET = 'widget', } if ( ! supportsPosFixed) { - uiHandles.push(Y.one('win').on('scroll', Y.bind(function(e){ + uiHandles.push(Y.one('win').on('scroll', Y.bind(function(){ maskNode.setStyle('top', maskNode.get('docScrollY')); }, this))); } @@ -547,7 +548,7 @@ var WIDGET = 'widget', * * @method _afterFocusOnChange */ - _afterFocusOnChange : function(e) { + _afterFocusOnChange : function() { this._detachUIHandlesModal(); if (this.get(VISIBLE)) { diff --git a/src/widget-modality/tests/unit/assets/widget-modality-test.js b/src/widget-modality/tests/unit/assets/widget-modality-test.js index f78805f0548..aad506d3235 100644 --- a/src/widget-modality/tests/unit/assets/widget-modality-test.js +++ b/src/widget-modality/tests/unit/assets/widget-modality-test.js @@ -101,6 +101,47 @@ suite.add(new Y.Test.Case({ modal1.destroy(); modal2.destroy(); + }, + + 'WidgetModality should not get distracted by cloned masks': function () { + var modal, + widget, + before_clone, + after_clone, + orig_mask, + test = Y.one('#test'), + test_orig = Y.Node.create('
'); + + test.append(test_orig); + + this.widget = new TestWidget({ + modal : true, + render: test_orig + }); + + this.widget.hide(); + orig_mask = Y.one('.yui3-widget-mask'); + Assert.areSame(orig_mask, this.widget.get('maskNode')); + + // clone the widget + // typically this would happen because other code clones the + // widget and does not clean up. i.e. a drag-drop proxy + before_clone = test_orig.cloneNode(true); + test.prepend(before_clone); + + after_clone = test_orig.cloneNode(true); + test.append(after_clone); + + Assert.areNotSame(orig_mask, Y.one('.yui3-widget-mask')); + Assert.areSame(orig_mask, this.widget.get('maskNode')); + + // if we show the widget, only the original mask is shown + this.widget.show(); + + Assert.areSame('block', orig_mask.getStyle('display')); + Assert.areSame('none', before_clone.one('.yui3-widget-mask').getStyle('display')); + Assert.areSame('none', after_clone.one('.yui3-widget-mask').getStyle('display')); + } }));