royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch develop updated: New class function "positionInsideBoundingClientRect" to make popups open and be always inside the client screen
Date Thu, 20 Sep 2018 14:40:29 GMT
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new bc8771b  New class function "positionInsideBoundingClientRect" to make popups open
and be always inside the client screen
bc8771b is described below

commit bc8771bd8cb3075cdfb4b46dfd9c132c0ea2a6c0
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Thu Sep 20 16:40:21 2018 +0200

    New class function "positionInsideBoundingClientRect" to make popups open and be always
inside the client screen
---
 .../projects/Jewel/src/main/royale/JewelClasses.as |  2 +
 .../royale/jewel/beads/views/ComboBoxView.as       | 11 ++--
 .../royale/jewel/beads/views/DateFieldView.as      | 14 ++---
 .../util/positionInsideBoundingClientRect.as       | 71 ++++++++++++++++++++++
 4 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 0151b6b..9ea0780 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -92,6 +92,8 @@ package
         import org.apache.royale.jewel.supportClasses.table.TBodyContentArea; TBodyContentArea;
         import org.apache.royale.jewel.supportClasses.combobox.ComboBoxList; ComboBoxList;
         import org.apache.royale.jewel.supportClasses.list.DataGroup; DataGroup;
+        
+        import org.apache.royale.jewel.supportClasses.util.positionInsideBoundingClientRect;
positionInsideBoundingClientRect;
 
         import org.apache.royale.jewel.supportClasses.util.HighlightCode; HighlightCode;
 
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
index b5193fe..005b2aa 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ComboBoxView.as
@@ -39,8 +39,8 @@ package org.apache.royale.jewel.beads.views
 	import org.apache.royale.jewel.supportClasses.util.getLabelFromData;
 	import org.apache.royale.jewel.supportClasses.combobox.ComboBoxList;
 	import org.apache.royale.jewel.supportClasses.ResponsiveSizes;
+	import org.apache.royale.jewel.supportClasses.util.positionInsideBoundingClientRect;
 	import org.apache.royale.utils.UIUtils;
-	import org.apache.royale.utils.PointUtils;
 	
 	/**
 	 *  The ComboBoxView class creates the visual elements of the org.apache.royale.jewel.ComboBox

@@ -280,16 +280,19 @@ package org.apache.royale.jewel.beads.views
 			COMPILE::JS
 			{
 				var outerWidth:Number = document.body.getBoundingClientRect().width;
-				var top:Number = (window.pageYOffset || document.documentElement.scrollTop)  - (document.documentElement.clientTop
|| 0);
+				// handle potential scrolls offsets
+				var top:Number = top = (window.pageYOffset || document.documentElement.scrollTop)  -
(document.documentElement.clientTop || 0);
 				
 				// Desktop width size
 				if(outerWidth > ResponsiveSizes.DESKTOP_BREAKPOINT)
 				{
+					//poopup width needs to be set before position inside bounding client to work ok
+					_list.width = _textinput.width + _button.width;
+
 					var origin:Point = new Point(0, button.y + button.height - top);
-					var relocated:Point = PointUtils.localToGlobal(origin,_strand);
+					var relocated:Point = positionInsideBoundingClientRect(_strand, _list, origin);
 					_list.x = relocated.x;
 					_list.y = relocated.y;
-					_list.width = _textinput.width + _button.width;
 				}
 				else
 				{
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
index 535929d..23d13ea 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateFieldView.as
@@ -42,11 +42,10 @@ package org.apache.royale.jewel.beads.views
     import org.apache.royale.jewel.beads.controls.datefield.DateFieldMaskedTextInput;
     import org.apache.royale.jewel.beads.controls.textinput.MaxNumberCharacters;
 	import org.apache.royale.jewel.supportClasses.ResponsiveSizes;
+	import org.apache.royale.jewel.supportClasses.util.positionInsideBoundingClientRect;
 	import org.apache.royale.jewel.Table;
 	import org.apache.royale.jewel.beads.views.DateChooserView;
-	import org.apache.royale.jewel.Alert;
     import org.apache.royale.utils.UIUtils;
-	import org.apache.royale.utils.PointUtils;
 
 	/**
 	 * The DateFieldView class is a bead for DateField that creates the
@@ -297,19 +296,14 @@ package org.apache.royale.jewel.beads.views
 			COMPILE::JS
 			{
 				var outerWidth:Number = document.body.getBoundingClientRect().width;
-				var top:Number = (window.pageYOffset || document.documentElement.scrollTop)  - (document.documentElement.clientTop
|| 0);
+				// handle potential scrolls offsets
+				var top:Number = top = (window.pageYOffset || document.documentElement.scrollTop)  -
(document.documentElement.clientTop || 0);
 				
 				// Desktop width size
 				if(outerWidth > ResponsiveSizes.DESKTOP_BREAKPOINT)
 				{
-					// var point:Point = new Point(_textInput.width, _button.height);
-					// var p2:Point = PointUtils.localToGlobal(point, _strand);
-					// _popUp.x = p3.x;
-					// _popUp.y = p3.y;
-					// var p3:Point = PointUtils.globalToLocal(p2, host);
-
 					var origin:Point = new Point(0, _button.y + _button.height - top);
-					var relocated:Point = PointUtils.localToGlobal(origin, _strand);
+					var relocated:Point = positionInsideBoundingClientRect(_strand, daysTable, origin);
 					daysTable.x = relocated.x;
 					daysTable.y = relocated.y;
 				}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/util/positionInsideBoundingClientRect.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/util/positionInsideBoundingClientRect.as
new file mode 100644
index 0000000..ec907bf
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/util/positionInsideBoundingClientRect.as
@@ -0,0 +1,71 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "Licens"); 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses.util
+{
+    import org.apache.royale.core.IUIBase;
+    import org.apache.royale.geom.Point;
+    import org.apache.royale.utils.PointUtils;
+    import org.apache.royale.core.IStrand;
+
+    /**
+     *  Determines the position of the popUp related to a point to avoid
+     *  the component get partialy out of sight.
+     * 
+     *  Ensure the popup has width before performing this operation to work properly
+     *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.4
+     * 
+     *  @royaleignorecoercion org.apache.royale.core.IUIBase 
+     */
+    public function positionInsideBoundingClientRect(_strand:IStrand, popUp:IUIBase, point:Point):Point
+    {
+        var outerWidth:Number;
+        var outerHeight:Number;
+
+        COMPILE::JS
+        {
+            outerWidth = document.body.getBoundingClientRect().width;
+            outerHeight = document.body.getBoundingClientRect().height;
+        }
+
+        var popUpWidth:Number = popUp.width;
+        var popUpHeight:Number = popUp.height;
+        
+        point = PointUtils.localToGlobal(point, _strand);
+        //make sure it's not too high or to the left.
+        point.x = Math.max(point.x,0);
+        point.y = Math.max(point.y,0);
+
+        // add an extra pixel for rounding errors
+        var extraHeight:Number = 1 + point.y + popUpHeight - outerHeight;
+        if(extraHeight > 0)
+        {
+            point.y -= extraHeight;
+        }
+        var extraWidth:Number = 1 + point.x + popUpWidth - outerWidth;
+        if(extraWidth > 0)
+        {
+            point.x -= extraWidth;
+        }
+        return point;
+    }
+}


Mime
View raw message