Skip to content

Commit

Permalink
fix #675 Dialog disappears after resize
Browse files Browse the repository at this point in the history
When the viewport was resized significantly, so that dialogOldPosition.left
> newViewport.width, the Dialog disappeared and never appeared again.

The problem was introduced in e6405a1 by
the check if reference position is in viewport before displaying the
popup. However this check is valid only in reaction to scrolling events.

The check is now performed only in the onmousewheel event listener.
  • Loading branch information
jakub-g authored and flongo committed Feb 7, 2014
1 parent e334b82 commit 9ef43ed
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 12 deletions.
28 changes: 16 additions & 12 deletions src/aria/popups/Popup.js
Expand Up @@ -631,18 +631,16 @@ Aria.classDefinition({
} else {
this.computedStyle = this._getComputedStyle();
}
// Need to check that the reference point is still completely visible after a scroll
var referenceIsInViewSet = aria.utils.Dom.isInViewport(this.referencePosition, this.referenceSize, this.domElement);
if (referenceIsInViewSet) {
this.domElement.style.cssText = ['top:', this.computedStyle.top, 'px;', 'left:',
this.computedStyle.left, 'px;', 'z-index:', this.computedStyle.zIndex, ';',
'position:absolute;display:inline-block;'].join('');
if (aria.core.Browser.isIE7 && !this.isOpen) {
// Without the following line, the autocomplete does not
// initially display its content on IE7:
this._document.body.appendChild(this.domElement);
}

this.domElement.style.cssText = ['top:', this.computedStyle.top, 'px;', 'left:', this.computedStyle.left,
'px;', 'z-index:', this.computedStyle.zIndex, ';', 'position:absolute;display:inline-block;'].join('');


if (aria.core.Browser.isIE7 && !this.isOpen) {
// Without the following line, the autocomplete does not initially display its content on IE7:
this._document.body.appendChild(this.domElement);
}

},

/**
Expand Down Expand Up @@ -768,8 +766,14 @@ Aria.classDefinition({
_isScrolling : function () {
var domReference = this.reference;
if (domReference) {

var geometry = aria.utils.Dom.getGeometry(domReference);
if (geometry) {
var referenceIsInViewport = geometry && (aria.utils.Dom.isInViewport({
left : geometry.x,
top : geometry.y
}, geometry, this.domElement));

if (referenceIsInViewport) {
this.referencePosition = {
left : geometry.x,
top : geometry.y
Expand Down
@@ -0,0 +1,47 @@
/*
* Copyright 2013 Amadeus s.a.s.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

{Template {
$classpath:"test.aria.widgets.container.dialog.viewportResize.ViewportHugeShrinkTemplate"
}}

{macro main()}
{@aria:Dialog {
id : "theDialog",
contentMacro: "dialogContent",
modal: false,
center : false,
visible : true,
width : 111,
height : 111,
bind : {
xpos : {
to : "xpos",
inside : data.dialog
},
ypos : {
to : "ypos",
inside : data.dialog
}
}
}}
{/@aria:Dialog}
{/macro}

{macro dialogContent()}
TEST
{/macro}

{/Template}
@@ -0,0 +1,119 @@
/*
* Copyright 2013 Amadeus s.a.s.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

/**
* Test case for aria.widgets.container.Dialog
*/
Aria.classDefinition({
$classpath : "test.aria.widgets.container.dialog.viewportResize.ViewportHugeShrinkTestCase",
$extends : "aria.jsunit.TemplateTestCase",
$dependencies : ["aria.utils.Dom"],
$constructor : function () {

this.$TemplateTestCase.constructor.call(this);

this.data = {
dialog : {
width : 111,
height : 111,
xpos : 555,
ypos : 555
},
iframeWrapper : {
width : 700,
height : 700
}
};

var frameDim = this.data.iframeWrapper;
this.setTestEnv({
template : "test.aria.widgets.container.dialog.viewportResize.ViewportHugeShrinkTemplate",
data : this.data,
css : "overflow:hidden; width:" + frameDim.width + "px; height:" + frameDim.height + "px",
iframe : true
});

this.widgetUnderTestId = "theDialog";
},
$prototype : {

/*
* The aim of this test is to check what happens when the viewport is dramatically shrinked, so that the
* Dialog's [x,y] coords before resize were bigger than new viewport's width & height. (e.g. dialog was
* positioned at 555x555, and the new window size is much smaller and doesn't contain this reference point).
*
* The core of the possible issues is that if something goes wrong during the execution of popup handling logic,
* the popup, which is temporarily positioned in a remote place at [-15000, -15000], might not be moved back
* to the viewport.
*/
runTemplateTest : function () {
// in Chrome, overflow:hidden on iframe is not enough, need to set it on <HTML> inside iframe
this.testWindow.document.documentElement.style.overflow = "hidden";
this._testIsInViewportAfterHugeViewportShrink();
},

_testIsInViewportAfterHugeViewportShrink : function () {
this.__resizeIframe(-400, this.__checkVisibility);
},
__checkVisibility : function () {
var geometry = this.__getDialogGeometry();

// calling AT in an iframe to use iframe's viewport in computations
var inViewport = this.testWindow.aria.utils.Dom.isInViewport({
top : geometry.y,
left : geometry.x
}, {
width : geometry.width,
height : geometry.height
});

this.assertTrue(inViewport, "Dialog is not in the viewport after window resize");
this.end();
},

__resizeIframe : function (delta, continueWith) {
var initialDimensions = this.data.iframeWrapper;
this.testIframe.style.width = (initialDimensions.width + delta) + "px";
this.testIframe.style.height = (initialDimensions.height + delta) + "px";
this.waitFor({
condition : function () {
return this.__getDialog(); // wait until the dialog is re-instantiated
},
callback : {
fn : continueWith,
scope : this
}
});
},

/**
* @override
*/
notifyTemplateTestEnd : function () {
Aria.$window.document.documentElement.style.backgroundColor = "#fff";
this.$TemplateTestCase.notifyTemplateTestEnd.call(this);
},

__getDialog : function () {
return this.getWidgetInstance(this.widgetUnderTestId);
},

__getDialogGeometry : function () {
var container = this.getWidgetInstance(this.widgetUnderTestId);
var geometry = aria.utils.Dom.getGeometry(container.getDom());
return geometry;
}
}
});

0 comments on commit 9ef43ed

Please sign in to comment.