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 2020/03/19 23:29:43 UTC
[royale-asjs] branch develop updated: jewel-viewport: refactor
viewport and add cliipContent method
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 90c15fb jewel-viewport: refactor viewport and add cliipContent method
90c15fb is described below
commit 90c15fbf0eb3caaf803f42563c4a4fb8262458ea
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Mar 20 00:29:39 2020 +0100
jewel-viewport: refactor viewport and add cliipContent method
---
.../projects/Jewel/src/main/resources/defaults.css | 6 +-
.../apache/royale/jewel/supportClasses/Viewport.as | 74 ++++++++++++++++++----
.../supportClasses/scrollbar/ScrollingViewport.as | 18 ++----
.../Jewel/src/main/sass/components/_layout.sass | 8 +--
4 files changed, 76 insertions(+), 30 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index ee8f325..e01db13 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -1000,14 +1000,14 @@ j|Label {
}
.viewport {
+ overflow: visible;
+}
+.viewport.clipped {
overflow: hidden;
}
.viewport.scroll {
overflow: auto;
}
-.viewport.visible {
- overflow: visible;
-}
.layout.basic {
position: relative;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/Viewport.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/Viewport.as
index d0ee025..26c0235 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/Viewport.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/Viewport.as
@@ -20,17 +20,19 @@ package org.apache.royale.jewel.supportClasses
{
COMPILE::JS
{
- import org.apache.royale.core.IContentView;
import org.apache.royale.core.IStrand;
- import org.apache.royale.core.UIBase;
- import org.apache.royale.utils.loadBeadFromValuesManager;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.StyledUIBase;
+ import org.apache.royale.core.ValuesManager;
}
import org.apache.royale.html.supportClasses.Viewport;
+ import org.apache.royale.utils.loadBeadFromValuesManager;
+ import org.apache.royale.core.IContentView;
/**
- * A Viewport is the area of a Container set aside for displaying
- * content. If the content exceeds the visible area of the viewport
- * it will be clipped or hidden.
+ * A Viewport is the area of a Container set aside for displaying
+ * content. If the content exceeds the visible area of the viewport
+ * it will be clipped or hidden.
*
* @langversion 3.0
* @playerversion Flash 10.2
@@ -51,7 +53,15 @@ package org.apache.royale.jewel.supportClasses
{
super();
}
+
+ protected var styledContentArea:StyledUIBase;
+ COMPILE::JS
+ override public function get contentView():IUIBase
+ {
+ return styledContentArea as IUIBase;
+ }
+
/**
* @royaleignorecoercion Class
* @royaleignorecoercion org.apache.royale.core.UIBase
@@ -61,13 +71,53 @@ package org.apache.royale.jewel.supportClasses
{
_strand = value;
- contentArea = loadBeadFromValuesManager(IContentView, "iContentView", _strand) as UIBase;
-
- if (!contentArea)
- contentArea = value as UIBase;
+ styledContentArea = loadBeadFromValuesManager(IContentView, "iContentView", _strand) as StyledUIBase;
+
+ if (!styledContentArea)
+ styledContentArea = value as StyledUIBase;
- // contentArea.element.style.overflow = "hidden";
- contentArea.element.classList.add("viewport");
+ setScrollStyle();
+ }
+
+ /**
+ * Subclasses override this method to change scrolling behavior
+ */
+ COMPILE::JS
+ override protected function setScrollStyle():void
+ {
+ styledContentArea.addClass("viewport");
+ clipContent = true;
+ }
+
+ private var _clipContent:Boolean;
+ /**
+ * Whether to apply a clip mask if the positions and/or sizes of this container's children extend outside the borders of this container.
+ *
+ * If false, the children of this container remain visible when they are moved or sized outside the borders of this container.
+ * If true, the children of this container are clipped.
+ *
+ * If clipContent is false, then scrolling is disabled for this container and scrollbars will not appear.
+ * If clipContent is true, then scrollbars will usually appear when the container's children extend outside the border of the container.
+ * For additional control over the appearance of scrollbars, see horizontalScrollPolicy and verticalScrollPolicy.
+ *
+ * The default value is true.
+ */
+ public function get clipContent():Boolean
+ {
+ return _clipContent;
+ }
+
+ public function set clipContent(value:Boolean):void
+ {
+ if(_clipContent != value)
+ {
+ _clipContent = value;
+
+ if(_clipContent)
+ styledContentArea.addClass("clipped");
+ else
+ styledContentArea.removeClass("clipped");
+ }
}
}
}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/scrollbar/ScrollingViewport.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/scrollbar/ScrollingViewport.as
index 024fa20..cef6266 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/scrollbar/ScrollingViewport.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/scrollbar/ScrollingViewport.as
@@ -94,19 +94,15 @@ package org.apache.royale.jewel.supportClasses.scrollbar
override public function set strand(value:IStrand):void
{
super.strand = value;
- var component:UIBase;
- if (contentView == null) {
- component = value as UIBase;
- } else {
- component = contentView as UIBase;
- }
updateScroll();
}
private var _scroll:Boolean = true;
/**
- * enable or disable scrolling on the strand
- * @return true for scroll, false for no scroll
+ * enable or disable scrolling on the strand
+ *
+ * @return true for scroll, false for no scroll
+ *
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
@@ -126,7 +122,7 @@ package org.apache.royale.jewel.supportClasses.scrollbar
}
/**
- * adds or remove the scroll
+ * adds or remove the scroll
*
* @langversion 3.0
* @playerversion Flash 10.2
@@ -136,8 +132,8 @@ package org.apache.royale.jewel.supportClasses.scrollbar
public function updateScroll():void
{
_scroll ?
- contentArea.positioner.classList.add("scroll") :
- contentArea.positioner.classList.remove("scroll");
+ styledContentArea.addClass("scroll") :
+ styledContentArea.removeClass("scroll");
}
/**
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index 1b2738d..da23952 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -28,14 +28,14 @@ $grid-columns: 12 !default
$gap-size: 10px !default
.viewport
- overflow: hidden
+ overflow: visible
+
+ &.clipped
+ overflow: hidden
&.scroll
overflow: auto
- &.visible
- overflow: visible
-
// Basic
.layout.basic
position: relative