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/07/18 09:44:56 UTC
[royale-asjs] branch develop updated: jewel-responsivesizelistener:
add a listener to notify when reaching responsive break points
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 c672439 jewel-responsivesizelistener: add a listener to notify when reaching responsive break points
c672439 is described below
commit c672439120f22a34bea217045fee1b87885c0f1e
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Jul 18 11:44:46 2020 +0200
jewel-responsivesizelistener: add a listener to notify when reaching responsive break points
---
.../Jewel/src/main/resources/jewel-manifest.xml | 1 +
.../beads/layouts/ResponsiveResizeListener.as | 139 +++++++++++++++++++++
.../royale/jewel/supportClasses/ResponsiveSizes.as | 2 +
3 files changed, 142 insertions(+)
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index ea516ef..c955b07 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -176,6 +176,7 @@
<component id="InputButtonSize" class="org.apache.royale.jewel.beads.controls.button.InputButtonSize"/>
<component id="ResponsiveLabelVisibility" class="org.apache.royale.jewel.beads.controls.button.ResponsiveLabelVisibility"/>
+ <component id="ResponsiveResizeListener" class="org.apache.royale.jewel.beads.layouts.ResponsiveResizeListener"/>
<component id="MultiLine" class="org.apache.royale.jewel.beads.controls.MultiLine"/>
<component id="NavigationActionNotifier" class="org.apache.royale.jewel.beads.controls.NavigationActionNotifier"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ResponsiveResizeListener.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ResponsiveResizeListener.as
new file mode 100644
index 0000000..a3cfff4
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/ResponsiveResizeListener.as
@@ -0,0 +1,139 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.layouts
+{
+ import org.apache.royale.core.Bead;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.supportClasses.ResponsiveSizes;
+ import org.apache.royale.utils.sendStrandEvent;
+
+ /**
+ * The ResponsiveResizeListener class listens for browser
+ * resizing and send events when browser cross a responsive breakpoint
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.10.0
+ */
+ public class ResponsiveResizeListener extends Bead
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.10.0
+ */
+ public function ResponsiveResizeListener()
+ {
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.10.0
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value as UIBase;
+ COMPILE::JS
+ {
+ window.addEventListener('resize', resizeHandler, false);
+ }
+ resizeHandler();
+ }
+
+ private var _currentResponsiveSize:String;
+ /**
+ * the current responsive size. read only
+ */
+ public function get currentResponsiveSize():String
+ {
+ return _currentResponsiveSize;
+ }
+
+ /**
+ * to check only width
+ */
+ private var outerWidth:Number;
+
+ /**
+ * Make the strand send events when browser is resized and cross a responsive breakpoint
+ */
+ private function resizeHandler(event:Event = null):void
+ {
+ COMPILE::JS
+ {
+ if(outerWidth == document.body.getBoundingClientRect().width)
+ return;
+
+ outerWidth = document.body.getBoundingClientRect().width;
+
+ if(outerWidth > ResponsiveSizes.FULL_BREAKPOINT)
+ {
+ if(currentResponsiveSize != ResponsiveSizes.FULL)
+ {
+ // trace("FULL");
+ _currentResponsiveSize = ResponsiveSizes.FULL;
+ sendStrandEvent(_strand, 'fullResponsiveSize');
+ }
+ } else if(outerWidth < ResponsiveSizes.FULL_BREAKPOINT && outerWidth > ResponsiveSizes.WIDESCREEN_BREAKPOINT)
+ {
+ if(currentResponsiveSize != ResponsiveSizes.WIDESCREEN)
+ {
+ // trace("WIDESCREEN");
+ _currentResponsiveSize = ResponsiveSizes.WIDESCREEN;
+ sendStrandEvent(_strand, 'widescreenResponsiveSize');
+ }
+ } else if(outerWidth < ResponsiveSizes.WIDESCREEN_BREAKPOINT && outerWidth > ResponsiveSizes.DESKTOP_BREAKPOINT)
+ {
+ if(currentResponsiveSize != ResponsiveSizes.DESKTOP)
+ {
+ // trace("DESKTOP");
+ _currentResponsiveSize = ResponsiveSizes.DESKTOP;
+ sendStrandEvent(_strand, 'desktopResponsiveSize');
+ }
+ } else if(outerWidth < ResponsiveSizes.DESKTOP_BREAKPOINT && outerWidth > ResponsiveSizes.TABLET_BREAKPOINT)
+ {
+ if(currentResponsiveSize != ResponsiveSizes.TABLET)
+ {
+ // trace("TABLET");
+ _currentResponsiveSize = ResponsiveSizes.TABLET;
+ sendStrandEvent(_strand, 'tabletResponsiveSize');
+ }
+ } else if(outerWidth < ResponsiveSizes.TABLET_BREAKPOINT && outerWidth > ResponsiveSizes.PHONE_BREAKPOINT)
+ {
+ if(currentResponsiveSize != ResponsiveSizes.PHONE)
+ {
+ // trace("PHONE");
+ _currentResponsiveSize = ResponsiveSizes.PHONE;
+ sendStrandEvent(_strand, 'phoneResponsiveSize');
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ResponsiveSizes.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ResponsiveSizes.as
index 37bfe4b..1e9b3df 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ResponsiveSizes.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ResponsiveSizes.as
@@ -41,11 +41,13 @@ package org.apache.royale.jewel.supportClasses
public static const TABLET:String = "tablet";
public static const DESKTOP:String = "desktop";
public static const WIDESCREEN:String = "widescreen";
+ public static const FULL:String = "full";
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;
+ public static const FULL_BREAKPOINT:Number = 1600;
/**
* constructor.