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 2019/04/19 21:22:02 UTC
[royale-asjs] branch develop updated: jewel-tabbar: add animation
to tabbar buttons indicators using Google Material guidelines. Animation
uses FLIP technique (First, Last, Invert,
Play). This adds Web Animations API polifyll from a CDN as usual. Apache
License 2.0 :
https://github.com/web-animations/web-animations-js/blob/dev/COPYING
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 0b3bc80 jewel-tabbar: add animation to tabbar buttons indicators using Google Material guidelines. Animation uses FLIP technique (First, Last, Invert, Play). This adds Web Animations API polifyll from a CDN as usual. Apache License 2.0 : https://github.com/web-animations/web-animations-js/blob/dev/COPYING
0b3bc80 is described below
commit 0b3bc8067c09c16ca534ba09ed5863f445ea8637
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Apr 19 23:21:53 2019 +0200
jewel-tabbar: add animation to tabbar buttons indicators using Google Material guidelines. Animation uses FLIP technique (First, Last, Invert, Play).
This adds Web Animations API polifyll from a CDN as usual. Apache License 2.0 : https://github.com/web-animations/web-animations-js/blob/dev/COPYING
---
.../projects/Jewel/src/main/resources/defaults.css | 8 +-
.../projects/Jewel/src/main/royale/JewelClasses.as | 1 +
.../main/royale/org/apache/royale/jewel/Alert.as | 1 +
.../apache/royale/jewel/beads/views/TabBarView.as | 85 ++++++++++++++++++++++
.../itemRenderers/TabBarButtonItemRenderer.as | 40 +++++++---
.../Jewel/src/main/sass/components/_tabbar.sass | 10 +--
6 files changed, 126 insertions(+), 19 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 876bc16..a36304e 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3486,7 +3486,7 @@ j|Snackbar {
}
j|TabBar {
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ListView");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TabBarView");
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController");
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
@@ -3508,6 +3508,7 @@ j|TabBar {
text-transform: uppercase;
text-decoration: none;
z-index: 1;
+ overflow: initial;
}
.jewel.tabbarbutton .content {
display: flex;
@@ -3526,14 +3527,13 @@ j|TabBar {
pointer-events: none;
z-index: 1;
}
-.jewel.tabbarbutton .indicator .indicatorContent {
+.jewel.tabbarbutton .indicator > .indicatorContent {
align-self: flex-end;
width: 100%;
transform-origin: left;
opacity: 0;
- transition: transform 0.25s ease;
}
-.jewel.tabbarbutton.selected .indicator .indicatorContent {
+.jewel.tabbarbutton.selected .indicator > .indicatorContent {
opacity: 1;
}
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 4899278..63a8393 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -66,6 +66,7 @@ package
import org.apache.royale.jewel.beads.views.TitleBarView; TitleBarView;
import org.apache.royale.jewel.beads.views.AlertTitleBarView; AlertTitleBarView;
import org.apache.royale.jewel.beads.views.ListView; ListView;
+ import org.apache.royale.jewel.beads.views.TabBarView; TabBarView;
import org.apache.royale.jewel.beads.views.DropDownListView; DropDownListView;
import org.apache.royale.jewel.beads.views.DropDownListView; DropDownListView;
import org.apache.royale.jewel.beads.views.DateChooserView; DateChooserView;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as
index 940cdc8..fe363db 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Alert.as
@@ -46,6 +46,7 @@ package org.apache.royale.jewel
* To ensure support across all modern browsers, we use use dialogPolyfill extern or creating your own.
* The required Dialog Polyfill lines are injected in the constructor
*
+ * @viewbead
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TabBarView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TabBarView.as
new file mode 100644
index 0000000..1d9f1ba
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TabBarView.as
@@ -0,0 +1,85 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.views
+{
+ COMPILE::JS
+ {
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.itemRenderers.TabBarButtonItemRenderer;
+ }
+
+ /**
+ * The TabBarView class creates the visual elements of the org.apache.royale.jewel.TabBar
+ * component.
+ *
+ * @viewbead
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public class TabBarView extends ListView
+ {
+ /**
+ * constructor.
+ *
+ * <inject_html>
+ * <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script>
+ * </inject_html>
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.6
+ */
+ public function TabBarView()
+ {
+ super();
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.core.StyledMXMLItemRenderer
+ */
+ COMPILE::JS
+ override protected function selectionChangeHandler(event:Event):void
+ {
+ var prev_ir:TabBarButtonItemRenderer = dataGroup.getItemRendererAt(lastSelectedIndex) as TabBarButtonItemRenderer;
+ var ir:TabBarButtonItemRenderer = dataGroup.getItemRendererAt(listModel.selectedIndex) as TabBarButtonItemRenderer;
+
+ if(prev_ir) {
+ prev_ir.selected = false;
+ var lastRect:ClientRect = prev_ir.getBoundingBox;
+ var currentRect:ClientRect = ir.getBoundingBox;
+ var widthDiff:Number = lastRect.width / currentRect.width;
+ if(isNaN(widthDiff))
+ widthDiff = 1;
+ var positionDiff:Number = lastRect.left - currentRect.left;
+
+ ir.selected = true;
+ ir.animateIndicator(positionDiff, widthDiff, 300, 'ease-in-out');
+ } else
+ {
+ ir.selected = true;
+ }
+
+ lastSelectedIndex = listModel.selectedIndex;
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as
index cc778d9..0944b98 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TabBarButtonItemRenderer.as
@@ -26,7 +26,6 @@ package org.apache.royale.jewel.itemRenderers
import org.apache.royale.core.StyledMXMLItemRenderer;
import org.apache.royale.events.Event;
import org.apache.royale.jewel.supportClasses.INavigationRenderer;
- import org.apache.royale.jewel.beads.controls.TextAlign;
import org.apache.royale.jewel.supportClasses.util.getLabelFromData;
/**
@@ -138,6 +137,12 @@ package org.apache.royale.jewel.itemRenderers
// }
}
+ COMPILE::JS
+ private var indicator:HTMLSpanElement;
+
+ COMPILE::JS
+ private var indicator_content:HTMLSpanElement;
+
/**
* @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
* @royaleignorecoercion HTMLSpanElement
@@ -153,7 +158,7 @@ package org.apache.royale.jewel.itemRenderers
indicator.className = "indicator";
positioner.appendChild(indicator);
- var indicator_content:HTMLSpanElement = document.createElement('span') as HTMLSpanElement;
+ indicator_content = document.createElement('span') as HTMLSpanElement;
indicator_content.className = "indicatorContent";
indicator.appendChild(indicator_content);
@@ -169,9 +174,31 @@ package org.apache.royale.jewel.itemRenderers
}
COMPILE::JS
- private var indicator:HTMLSpanElement;
+ public function get getBoundingBox():ClientRect
+ {
+ return indicator.getBoundingClientRect();
+ }
COMPILE::JS
+ public function animateIndicator(positionDiff:Number, widthDiff:Number, duration:int, easingFunction:String):void
+ {
+ indicator_content["animate"]([
+ {
+ transform : "translateX(" + positionDiff + "px) scaleX(" + widthDiff + ")"
+ },
+ {
+ transform: "none"
+ }
+ ],
+ {
+ duration: duration,
+ easing: easingFunction,
+ fill: 'both'
+ }
+ );
+ }
+
+ COMPILE::JS
private var _positioner:WrappedHTMLElement;
COMPILE::JS
@@ -224,14 +251,7 @@ package org.apache.royale.jewel.itemRenderers
toggleClass("hovered", hovered);
if(selectable) {
toggleClass("selected", selected);
-
- // COMPILE::JS
- // {
- // indicator.classList.toggle("selected", selected);
- // }
}
-
-
}
}
}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
index c8fcb02..641c1fc 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
@@ -32,7 +32,7 @@ $tabbarbutton-margin-height: 48px
j|TabBar
- IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ListView")
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TabBarView")
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController")
IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
@@ -64,6 +64,7 @@ $tabbarbutton-padding: 0 24px !default
text-decoration: none
z-index: 1
+ overflow: initial
.content
display: flex
@@ -71,7 +72,6 @@ $tabbarbutton-padding: 0 24px !default
align-items: center
justify-content: center
- // width: 100%
height: inherit
.indicator
@@ -84,16 +84,16 @@ $tabbarbutton-padding: 0 24px !default
pointer-events: none
z-index: 1
- .indicatorContent
+ > .indicatorContent
align-self: flex-end
width: 100%
transform-origin: left
opacity: 0
- transition: transform .25s ease //cubic-bezier(.4,0,.2,1)
+ // transition: transform .25s ease //cubic-bezier(.4,0,.2,1)
&.selected
.indicator
- .indicatorContent
+ > .indicatorContent
opacity: 1
j|TabBarButtonItemRenderer