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 <[email protected]>
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;
+ }
+}
