royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch develop updated: - ResponiveSizes class for constants that match SASS constants - Refactor Drawer auto functionality to a bead for PAYG purposes
Date Tue, 17 Jul 2018 16:20:04 GMT
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 <carlosrovira@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
     {


Mime
View raw message