You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/09/20 14:40:29 UTC
[royale-asjs] branch develop updated: New class function
"positionInsideBoundingClientRect" to make popups open and be always inside
the client screen
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 <ca...@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;
+ }
+}