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/07/17 16:20:04 UTC
[royale-asjs] branch develop updated: - ResponiveSizes class for
constants that match SASS constants - Refactor Drawer auto functionality to
a bead for PAYG purposes
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 92feefd - ResponiveSizes class for constants that match SASS constants - Refactor Drawer auto functionality to a bead for PAYG purposes
92feefd is described below
commit 92feefd01d8831c51318c91eb3e4c4d8495f7bad
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Tue Jul 17 18:19:58 2018 +0200
- ResponiveSizes class for constants that match SASS constants
- Refactor Drawer auto functionality to a bead for PAYG purposes
---
.../JewelExample/src/main/royale/MainContent.mxml | 5 +-
.../Jewel/src/main/resources/jewel-manifest.xml | 2 +
.../projects/Jewel/src/main/royale/JewelClasses.as | 2 +
.../main/royale/org/apache/royale/jewel/Drawer.as | 82 +----------
.../org/apache/royale/jewel/ResponsiveSizes.as | 62 ++++++++
.../beads/controls/drawer/ResponsiveDrawer.as | 163 +++++++++++++++++++++
.../jewel/{ => supportClasses}/DrawerBase.as | 3 +-
7 files changed, 236 insertions(+), 83 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/MainContent.mxml b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
index e13b887..41cff0f 100644
--- a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
+++ b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
@@ -52,7 +52,10 @@ limitations under the License.
<js:ContainerDataBinding/>
</j:beads>
- <j:Drawer id="drawer" auto="true">
+ <j:Drawer id="drawer">
+ <j:beads>
+ <j:ResponsiveDrawer auto="true"/>
+ </j:beads>
<j:DrawerHeader>
<j:Image src="assets/apache-royale-jewel-logo-white.svg" height="140"/>
</j:DrawerHeader>
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index e92f2ae..3a79892 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -69,6 +69,8 @@
<component id="SizeControl" class="org.apache.royale.jewel.beads.controls.SizeControl"/>
<component id="ResponsiveVisibility" class="org.apache.royale.jewel.beads.layouts.ResponsiveVisibility"/>
+ <component id="ResponsiveDrawer" class="org.apache.royale.jewel.beads.controls.drawer.ResponsiveDrawer"/>
+
<component id="TextPrompt" class="org.apache.royale.jewel.beads.controls.textinput.TextPrompt"/>
<component id="PasswordInput" class="org.apache.royale.jewel.beads.controls.textinput.PasswordInput"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index bad4e50..b786a4e 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -71,6 +71,8 @@ package
import org.apache.royale.jewel.beads.layouts.HorizontalLayout; HorizontalLayout;
import org.apache.royale.jewel.beads.layouts.VerticalLayout; VerticalLayout;
import org.apache.royale.jewel.beads.layouts.HorizontalLayoutSpaceBetween; HorizontalLayoutSpaceBetween;
+
+ import org.apache.royale.jewel.ResponsiveSizes; ResponsiveSizes;
import org.apache.royale.jewel.supportClasses.INavigationRenderer; INavigationRenderer;
import org.apache.royale.jewel.supportClasses.IActivable; IActivable;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
index 680b350..b7b9696 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Drawer.as
@@ -18,6 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel
{
+ import org.apache.royale.jewel.supportClasses.DrawerBase;
import org.apache.royale.events.MouseEvent;
import org.apache.royale.events.Event;
import org.apache.royale.core.UIBase;
@@ -45,7 +46,6 @@ package org.apache.royale.jewel
{
public static const FLOAT:String = "float";
public static const FIXED:String = "fixed";
- public static const AUTO:String = "auto";
/**
* constructor.
@@ -190,85 +190,5 @@ package org.apache.royale.jewel
}
}
}
-
- protected var _auto:Boolean = false;
- /**
- * A boolean flag to activate "auto" effect selector.
- * Optional. Makes the drawer auto adapt using
- * a float behaviour on mobile and tablets and fixed
- * behaviour on desktop.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.3
- */
- public function get auto():Boolean
- {
- return _auto;
- }
- public function set auto(value:Boolean):void
- {
- if (_auto != value)
- {
- _auto = value;
-
- COMPILE::JS
- {
- if(_auto)
- {
- window.addEventListener('resize', autoResizeHandler, false);
- }
- else
- {
- window.removeEventListener('resize', autoResizeHandler, false);
- }
- }
-
- toggleClass("auto", _auto);
- autoResizeHandler();
- }
- }
-
- /**
- * When set to "auto" this resize handler monitors the width of the app window
- * and switch between fixed and float modes.
- *
- * Note:This could be done with media queries, but since it handles open/close
- * maybe this is the right way
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.3
- */
- private function autoResizeHandler(event:Event = null):void
- {
- COMPILE::JS
- {
- var outerWidth:Number = window.outerWidth;
-
- var tmpFixed:Boolean = fixed;
-
- // Desktop width size
- if(outerWidth > 992)
- {
- fixed = true;
- if(tmpFixed != fixed)
- {
- open();
- }
- }
- else
- {
- fixed = false;
- if(tmpFixed != fixed)
- {
- close();
- }
- }
-
- }
- }
}
}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ResponsiveSizes.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ResponsiveSizes.as
new file mode 100644
index 0000000..581967a
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ResponsiveSizes.as
@@ -0,0 +1,62 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ /**
+ * The ResponsiveSizes declares consants that are related to SASS variables
+ * created to provide media queries for different screen sizes
+ *
+ * by default:
+ *
+ * // DEVICE DIMENSIONS
+ * $phone: 0px
+ * $tablet: 768px
+ * $desktop: 992px
+ * $widescreen: 1200px
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class ResponsiveSizes
+ {
+ public static const PHONE:String = "phone";
+ public static const TABLET:String = "tablet";
+ public static const DESKTOP:String = "desktop";
+ public static const WIDESCREEN:String = "widescreen";
+
+ public static const PHONE_BREAKPOINT:Number = 0;
+ public static const TABLET_BREAKPOINT:Number = 768;
+ public static const DESKTOP_BREAKPOINT:Number = 992;
+ public static const WIDESCREEN_BREAKPOINT:Number = 1200;
+
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function ResponsiveSizes()
+ {
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/drawer/ResponsiveDrawer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/drawer/ResponsiveDrawer.as
new file mode 100644
index 0000000..8088e49
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controls/drawer/ResponsiveDrawer.as
@@ -0,0 +1,163 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.drawer
+{
+ import org.apache.royale.core.IBead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.ResponsiveSizes;
+ import org.apache.royale.jewel.Drawer;
+
+ /**
+ * The ResponsiveDrawer class is a bead to use with Jewel Drawer to make it fixed or
+ * float depending on the screen size.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public class ResponsiveDrawer implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function ResponsiveDrawer()
+ {
+ }
+
+ private var drawer:Drawer;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion org.apache.royale.core.UIBase;
+ */
+ public function set strand(value:IStrand):void
+ {
+ drawer = value as Drawer;
+
+ if(drawer)
+ {
+ updateDrawer();
+ }
+ else
+ {
+ throw new Error ("ResponsiveDrawer must be used with Drawer class");
+ }
+ }
+
+ protected var _auto:Boolean = false;
+ /**
+ * A boolean flag to activate "auto" effect selector.
+ * Optional. Makes the drawer auto adapt using
+ * a float behaviour on mobile and tablets and fixed
+ * behaviour on desktop.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ public function get auto():Boolean
+ {
+ return _auto;
+ }
+ public function set auto(value:Boolean):void
+ {
+ if (_auto != value)
+ {
+ _auto = value;
+
+ updateDrawer();
+ }
+ }
+
+ private function updateDrawer():void
+ {
+ if (drawer)
+ {
+ COMPILE::JS
+ {
+ if(_auto)
+ {
+ window.addEventListener('resize', autoResizeHandler, false);
+ }
+ else
+ {
+ window.removeEventListener('resize', autoResizeHandler, false);
+ }
+ }
+
+ drawer.toggleClass("auto", _auto);
+ autoResizeHandler();
+ }
+ }
+
+ /**
+ * When set to "auto" this resize handler monitors the width of the app window
+ * and switch between fixed and float modes.
+ *
+ * Note:This could be done with media queries, but since it handles open/close
+ * maybe this is the right way
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.3
+ */
+ private function autoResizeHandler(event:Event = null):void
+ {
+ COMPILE::JS
+ {
+ var outerWidth:Number = window.outerWidth;
+ var tmpFixed:Boolean = drawer.fixed;
+
+ // Desktop width size
+ if(outerWidth > ResponsiveSizes.DESKTOP_BREAKPOINT)
+ {
+ drawer.fixed = true;
+ if(tmpFixed != drawer.fixed)
+ {
+ drawer.open();
+ }
+ }
+ else
+ {
+ drawer.fixed = false;
+ if(tmpFixed != drawer.fixed)
+ {
+ drawer.close();
+ }
+ }
+
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/DrawerBase.as
similarity index 97%
rename from frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerBase.as
rename to frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/DrawerBase.as
index 9b5a2b9..8bb52be 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/DrawerBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/DrawerBase.as
@@ -16,12 +16,13 @@
// limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
+package org.apache.royale.jewel.supportClasses
{
import org.apache.royale.events.MouseEvent;
import org.apache.royale.core.UIBase;
import org.apache.royale.core.IChild;
import org.apache.royale.core.IUIBase;
+ import org.apache.royale.jewel.Group;
COMPILE::SWF
{