Fixes #17229. When used inside a ScrollableView, the Overlay no longe…

…r appears at a wrong location thus being invisible
dojo · Sep 20, 2013 · cb8bc43 · cb8bc43
1 parent c2adc51
commit cb8bc43
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 2 deletions.
diff --git a/mobile/Overlay.js b/mobile/Overlay.js
@@ -11,8 +11,9 @@ define([
 	"dojo/_base/array",
 	"dijit/registry",
 	"dojo/touch",
+	"./viewRegistry",
 	"./_css3"
-], function(declare, lang, has, win, domClass, domGeometry, domStyle, windowUtils, WidgetBase, array, registry, touch, css3){
+], function(declare, lang, has, win, domClass, domGeometry, domStyle, windowUtils, WidgetBase, array, registry, touch, viewRegistry, css3){
 
 	return declare("dojox.mobile.Overlay", WidgetBase, {
 		// summary:
@@ -38,7 +39,14 @@ define([
 			//		private
 			var popupPos = domGeometry.position(this.domNode);
 			var vp = windowUtils.getBox();
-			if((popupPos.y+popupPos.h) != vp.h // TODO: should be a has() test for position:fixed not scrolling
+			// search for the scrollable parent if any 
+			var scrollableParent = viewRegistry.getEnclosingScrollable(this.domNode);
+			// update vp scroll position if the overlay is inside a scrollable
+		 	if(scrollableParent){
+		 		vp.t -= scrollableParent.getPos().y;
+		 	}
+		 	// reposition if needed 
+		 	if((popupPos.y+popupPos.h) != vp.h // TODO: should be a has() test for position:fixed not scrolling
 				|| (domStyle.get(this.domNode, 'position') != 'absolute' && has('android') < 3)){ // android 2.x supports position:fixed but child transforms don't persist
 				popupPos.y = vp.t + vp.h - popupPos.h;
 				domStyle.set(this.domNode, { position: "absolute", top: popupPos.y + "px", bottom: "auto" });
@@ -58,6 +66,7 @@ define([
 			if(aroundNode){
 				var aroundPos = domGeometry.position(aroundNode);
 				if(popupPos.y < aroundPos.y){ // if the aroundNode is under the popup, try to scroll it up
+					// TODO: if this widget has a scrollable parent, use its scrollTo method to make sure the aroundNode is visible?
 					win.global.scrollBy(0, aroundPos.y + aroundPos.h - popupPos.y);
 					this._reposition();
 				}

diff --git a/mobile/tests/index.js b/mobile/tests/index.js
@@ -142,6 +142,7 @@ var tests = [
 	{ url: "test_Opener-RoundSelectList-async.html", tags: "Opener" },
 	{ url: "test_Opener-SearchList-async.html", tags: "Opener" },
 	{ url: "test_Overlay.html", tags: "Opener" },
+	{ url: "test_Overlay-scroll.html", tags: "Opener" },
 	{ url: "test_ProgressBar.html", tags: "ProgressBar"},
 	{ url: "test_ProgressIndicator-color.html", tags: "ProgressIndicator" },
 	{ url: "test_ProgressIndicator-heading.html", tags: "ProgressIndicator" },

diff --git a/mobile/tests/test_Overlay-scroll.html b/mobile/tests/test_Overlay-scroll.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html style="overflow:hidden;">
+<head>
+	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+	<meta name="viewport" 
+		content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
+	<meta name="apple-mobile-web-app-capable" content="yes"/>
+	<title>Test Overlay with DateSpinWheel</title>
+
+	<link href="../themes/common/dijit/dijit.css" rel="stylesheet"/>
+	<script type="text/javascript" src="../deviceTheme.js" 
+		data-dojo-config="mblThemeFiles: ['base','Overlay','Tooltip','SpinWheel']"></script>
+	<script type="text/javascript" src="../../../dojo/dojo.js" 
+		data-dojo-config="async: true, parseOnLoad: true"></script>
+
+	<script language="JavaScript" type="text/javascript">
+		require([
+			"dijit/_base/manager",  // dijit.byId
+			"dojox/mobile",
+			"dojox/mobile/compat",
+			"dojox/mobile/parser",
+			"dojox/mobile/ScrollableView",
+			"dojox/mobile/Overlay",
+			"dojox/mobile/SpinWheelDatePicker"
+		]);
+
+		function getDate(node, v){
+			if(v === true){ // Done clicked
+				node.value = dijit.byId("spin1").get("values").join('-');
+			}
+		}
+		function setDate(node){
+			var v = node.value.split(/-/);
+			if(v.length == 3){
+				var w = dijit.byId("spin1");
+				w.set("values", v);
+			}
+		}
+	</script>
+
+	<style>
+		html, body{
+			overflow: hidden;
+		}
+		.mblTooltip.mblOpener DIV[label='Cancel'] {
+			display: none;
+		}
+	</style>
+</head>
+<body style="visibility:hidden;">
+	<div data-dojo-type="dojox/mobile/ScrollableView">
+		<div style="height: 1550px;">
+			<p>Scroll to the bottom of the view to display the input field, and 
+				then click it to display the overlay.</p>
+		</div>
+		<table cellspacing="20">
+			<tr>
+				<td style="text-align:right;">Date</td>
+				<td><input id="date1" readOnly value=""
+					onclick="dijit.byId('datePicker').show(this, ['above-centered','below-centered','after','before'])"></td>
+			</tr>
+		</table>
+
+		<div id="datePicker" data-dojo-type="dojox/mobile/Overlay" 
+			data-dojo-props="onHide:getDate, onShow:setDate">
+	 		<h1 data-dojo-type="dojox/mobile/Heading" label="Date Picker">
+				<span data-dojo-type="dojox/mobile/ToolBarButton" label="Done" 
+					class="mblColorBlue" style="position:absolute;width:45px;right:0;"
+					onclick="dijit.byId('datePicker').hide(true);getDate(document.getElementById('date1'), true);"></span>
+				<span data-dojo-type="dojox/mobile/ToolBarButton" label="Cancel" 
+					class="mblColorBlue" style="position:absolute;width:45px;left:0;"
+					onclick="dijit.byId('datePicker').hide(false)"></span>
+			</h1>
+			<div id="spin1" data-dojo-type="dojox/mobile/SpinWheelDatePicker"></div>
+		</div>
+	</div>
+</body>
+</html>