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 27be5e2 jewel-responsivesize: change the size of a Jewel control
depending on responsiveness
27be5e2 is described below
commit 27be5e28814c51f8229129ab50b368992060dd4d
Author: Carlos Rovira <[email protected]>
AuthorDate: Sat Jul 18 16:11:06 2020 +0200
jewel-responsivesize: change the size of a Jewel control depending on
responsiveness
---
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../royale/jewel/beads/controls/ResponsiveSize.as | 243 +++++++++++++++++++++
2 files changed, 244 insertions(+)
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index c955b07..c06a4d0 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -169,6 +169,7 @@
<component id="ToolTip"
class="org.apache.royale.jewel.beads.controls.ToolTip"/>
<component id="Disabled"
class="org.apache.royale.jewel.beads.controls.Disabled"/>
<component id="SizeControl"
class="org.apache.royale.jewel.beads.controls.SizeControl"/>
+ <component id="ResponsiveSize"
class="org.apache.royale.jewel.beads.controls.ResponsiveSize"/>
<component id="TextAlign"
class="org.apache.royale.jewel.beads.controls.TextAlign"/>
<component id="ResponsiveVisibility"
class="org.apache.royale.jewel.beads.layouts.ResponsiveVisibility"/>
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/ResponsiveSize.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/ResponsiveSize.as
new file mode 100644
index 0000000..caeb452
--- /dev/null
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/ResponsiveSize.as
@@ -0,0 +1,243 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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 "License"); 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.beads.controls
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.StyledUIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.supportClasses.ResponsiveSizes;
+
+ /**
+ * The ResponsiveSize bead class is a specialty bead that can be used
to change the
+ * size of a Jewel control depending on responsiveness.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.10.0
+ */
+ public class ResponsiveSize implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.10.0
+ */
+ public function ResponsiveSize()
+ {
+ }
+
+ private var _phoneWidth:Number;
+ /**
+ * the width of this control in phones
+ */
+ public function get phoneWidth():Number {
+ return _phoneWidth;
+ }
+ public function set phoneWidth(value:Number):void {
+ _phoneWidth = value;
+ }
+
+ private var _phoneHeight:Number;
+ /**
+ * the height of this control in phones
+ */
+ public function get phoneHeight():Number {
+ return _phoneHeight;
+ }
+ public function set phoneHeight(value:Number):void {
+ _phoneHeight = value;
+ }
+
+ private var _tabletWidth:Number;
+ /**
+ * the width of this control in tablets
+ */
+ public function get tabletWidth():Number {
+ return _tabletWidth;
+ }
+ public function set tabletWidth(value:Number):void {
+ _tabletWidth = value;
+ }
+
+ private var _tabletHeight:Number;
+ /**
+ * the height of this control in tablets
+ */
+ public function get tabletHeight():Number {
+ return _tabletHeight;
+ }
+ public function set tabletHeight(value:Number):void {
+ _tabletHeight = value;
+ }
+
+ private var _desktopWidth:Number;
+ /**
+ * the width of this control in desktops
+ */
+ public function get desktopWidth():Number {
+ return _desktopWidth;
+ }
+ public function set desktopWidth(value:Number):void {
+ _desktopWidth = value;
+ }
+
+ private var _desktopHeight:Number;
+ /**
+ * the height of this control in desktops
+ */
+ public function get desktopHeight():Number {
+ return _desktopHeight;
+ }
+ public function set desktopHeight(value:Number):void {
+ _desktopHeight = value;
+ }
+
+ private var _widescreenWidth:Number;
+ /**
+ * the width of this control in widescreens
+ */
+ public function get widescreenWidth():Number {
+ return _widescreenWidth;
+ }
+ public function set widescreenWidth(value:Number):void {
+ _widescreenWidth = value;
+ }
+
+ private var _widescreenHeight:Number;
+ /**
+ * the height of this control in widescreens
+ */
+ public function get widescreenHeight():Number {
+ return _widescreenHeight;
+ }
+ public function set widescreenHeight(value:Number):void {
+ _widescreenHeight = value;
+ }
+
+ private var control:StyledUIBase;
+ private var originalWidth:Number;
+ private var originalHeight:Number;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.10.0
+ * @royaleignorecoercion org.apache.royale.core.IStrand;
+ */
+ public function set strand(value:IStrand):void
+ {
+ control = value as StyledUIBase;
+ originalWidth = control.width;
+ originalHeight = control.height;
+
+ COMPILE::JS
+ {
+ window.addEventListener('resize', resizeHandler, false);
+ }
+ resizeHandler();
+ }
+
+ /**
+ * to check only width
+ */
+ private var outerWidth:Number;
+
+ /**
+ * Make the strand change size as browser is resized
+ */
+ private function resizeHandler(event:Event = null):void
+ {
+ COMPILE::JS
+ {
+ if(outerWidth == document.body.getBoundingClientRect().width)
+ return;
+
+ outerWidth = document.body.getBoundingClientRect().width;
+
+ var responsiveFlag:Boolean = false;
+
+ if(outerWidth < ResponsiveSizes.FULL_BREAKPOINT && outerWidth
> ResponsiveSizes.WIDESCREEN_BREAKPOINT)
+ {
+ if(!isNaN(widescreenWidth))
+ {
+ // trace("WIDESCREEN");
+ if(widescreenWidth != control.width)
+ control.width = widescreenWidth;
+ if(widescreenHeight != control.height)
+ control.height = widescreenHeight;
+ responsiveFlag = true;
+ }
+ }
+ else if(outerWidth < ResponsiveSizes.WIDESCREEN_BREAKPOINT &&
outerWidth > ResponsiveSizes.DESKTOP_BREAKPOINT)
+ {
+ if(!isNaN(desktopWidth))
+ {
+ // trace("DESKTOP");
+ if(desktopWidth != control.width)
+ control.width = desktopWidth;
+ if(desktopHeight != control.height)
+ control.height = desktopHeight;
+ responsiveFlag = true;
+ }
+ }
+ else if(outerWidth < ResponsiveSizes.DESKTOP_BREAKPOINT &&
outerWidth > ResponsiveSizes.TABLET_BREAKPOINT)
+ {
+ if(!isNaN(tabletWidth))
+ {
+ // trace("TABLET");
+ if(tabletWidth != control.width)
+ control.width = tabletWidth;
+ if(tabletHeight != control.height)
+ control.height = tabletHeight;
+ responsiveFlag = true;
+ }
+ }
+ else if(outerWidth < ResponsiveSizes.TABLET_BREAKPOINT &&
outerWidth > ResponsiveSizes.PHONE_BREAKPOINT)
+ {
+ if(!isNaN(phoneWidth))
+ {
+ // trace("PHONE");
+ if(phoneWidth != control.width)
+ control.width = phoneWidth;
+ if(phoneHeight != control.height)
+ control.height = phoneHeight;
+ responsiveFlag = true;
+ }
+ }
+
+ if(!responsiveFlag)
+ {
+ // trace("use FULL size");
+ if(control.width != originalWidth)
+ control.width = originalWidth;
+ if(control.height != originalHeight)
+ control.height = originalHeight;
+ }
+ }
+ }
+ }
+}
