You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by pi...@apache.org on 2019/11/06 15:48:59 UTC
[royale-asjs] branch feature/add_nav_tabbar_bead created (now
93e3fed)
This is an automated email from the ASF dual-hosted git repository.
piotrz pushed a change to branch feature/add_nav_tabbar_bead
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git.
at 93e3fed Jewel TabBar: Add TabBarWithNavigationView bead
This branch includes the following new commits:
new 93e3fed Jewel TabBar: Add TabBarWithNavigationView bead
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[royale-asjs] 01/01: Jewel TabBar: Add TabBarWithNavigationView bead
Posted by pi...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
piotrz pushed a commit to branch feature/add_nav_tabbar_bead
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 93e3fedc70d8d0e6b68de54376578aad6d770519
Author: Piotr Zarzycki <pi...@gmail.com>
AuthorDate: Wed Nov 6 16:46:55 2019 +0100
Jewel TabBar: Add TabBarWithNavigationView bead
- Bead is responsible for showing/hiding buttons on the edge of the TabBar existing buttons taking more spaces than it's available on the screen
- Add usage of view to TourDeJewel
---
.../src/main/resources/jewel-example-styles.css | 4 +
.../src/main/royale/TabBarPlayGround.mxml | 24 +++
.../projects/Jewel/src/main/resources/defaults.css | 12 ++
.../projects/Jewel/src/main/royale/JewelClasses.as | 1 +
.../jewel/beads/views/TabBarWithNavigationView.as | 164 +++++++++++++++++++++
.../Jewel/src/main/sass/components/_tabbar.sass | 14 ++
6 files changed, 219 insertions(+)
diff --git a/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css b/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
index 9471b35..5bcb26f 100644
--- a/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/TourDeJewel/src/main/resources/jewel-example-styles.css
@@ -121,3 +121,7 @@
margin-right: 24px;
}
+.tabBarWithNavigation {
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.TabBarWithNavigationView");
+}
+
diff --git a/examples/royale/TourDeJewel/src/main/royale/TabBarPlayGround.mxml b/examples/royale/TourDeJewel/src/main/royale/TabBarPlayGround.mxml
index bde8257..1a42816 100644
--- a/examples/royale/TourDeJewel/src/main/royale/TabBarPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/TabBarPlayGround.mxml
@@ -214,7 +214,31 @@ limitations under the License.
</j:TabBar>
</j:Card>
</j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="1" tabletNumerator="1" tabletDenominator="1" phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel TabBar with Navigation"/>
+ <j:TabBar width="100%" dataProvider="{scrolltabBarData}" className="tabBarWithNavigation">
+ <j:beads>
+ <j:AssignTabContent selectedContentProperty="href">
+ <j:content>
+ <j:TabBarContent>
+ <j:SectionContent name="films">
+ <j:Label text="Films Content Goes Here"/>
+ </j:SectionContent>
+ <j:SectionContent name="collection">
+ <j:Label text="Collection Content Goes Here"/>
+ </j:SectionContent>
+ <j:SectionContent name="favorites">
+ <j:Label text="Favorites Content Goes Here"/>
+ </j:SectionContent>
+ </j:TabBarContent>
+ </j:content>
+ </j:AssignTabContent>
+ </j:beads>
+ </j:TabBar>
+ </j:Card>
+ </j:GridCell>
</j:Grid>
</c:ExampleAndSourceCodeTabbedSectionContent>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index cf86acc..e483427 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3594,6 +3594,18 @@ j|TabBar {
opacity: 1;
}
+.jewel.button.tabbarnavleftbutton {
+ position: absolute;
+ left: 0;
+ z-index: 4;
+}
+
+.jewel.button.tabbarnavrighttbutton {
+ position: absolute;
+ right: 0;
+ z-index: 4;
+}
+
j|TabBarButtonItemRenderer {
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController");
}
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index f180b51..2d54001 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -67,6 +67,7 @@ package
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.TabBarWithNavigationView; TabBarWithNavigationView;
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/beads/views/TabBarWithNavigationView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TabBarWithNavigationView.as
new file mode 100644
index 0000000..0e0e9a0
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TabBarWithNavigationView.as
@@ -0,0 +1,164 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.jewel.Button;
+ import org.apache.royale.jewel.TabBar;
+ import org.apache.royale.core.IChild;
+ import org.apache.royale.jewel.supportClasses.Viewport;
+
+ COMPILE::JS
+ {
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.itemRenderers.TabBarButtonItemRenderer;
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The TabBarWithNavigationView class creates additional buttons to navigate trough
+ * tabs if they went outside available visible area.
+ *
+ * @viewbead
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public class TabBarWithNavigationView extends TabBarView
+ {
+ /**
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ public function TabBarWithNavigationView()
+ {
+ super();
+ }
+
+ private static const TAB_BAR_SCROLL:int = 200;
+
+ private var host:TabBar;
+
+ protected var arrowLeft:Button;
+ protected var arrowRight:Button;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.7
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ this.host = value as TabBar;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ */
+ override protected function handleInitComplete(event:Event):void
+ {
+ super.handleInitComplete(event);
+ COMPILE::JS
+ {
+ arrowLeft = new Button();
+ arrowLeft.text = "<";
+ arrowLeft.visible = false;
+ arrowLeft.height = 45;
+ arrowLeft.className = "tabbarnavleftbutton";
+ arrowLeft.addEventListener("click", arrowLeftClickHandler);
+
+ host.royale_wrapper.addElementAt(arrowLeft, 0);
+ var children:Object = host.positioner.children;
+
+ if (children && children.length > 0)
+ {
+ host.positioner.insertBefore(arrowLeft.element as WrappedHTMLElement, children[0]);
+ }
+ else
+ {
+ host.positioner.appendChild(arrowLeft.element as WrappedHTMLElement);
+ }
+
+ arrowRight = new Button();
+ arrowRight.text = ">";
+ arrowRight.visible = false;
+ arrowRight.height = 45;
+ arrowRight.className = "tabbarnavrighttbutton";
+ arrowRight.addEventListener("click", arrowRightClickHandler);
+
+ host.royale_wrapper.addElement(arrowRight);
+ host.positioner.appendChild(arrowRight.element as WrappedHTMLElement);
+
+ window.addEventListener('resize', this.windowResizeHandler, false);
+
+ var viewPort:Viewport = host.getBeadByType(Viewport) as Viewport;
+ viewPort.contentView.element.style.overflow = "hidden";
+
+ this.host.percentWidth = 100;
+
+ setTimeout(refreshNavigationButtonVisibility, 100);
+ }
+ }
+
+ protected function arrowLeftClickHandler(event:Event):void
+ {
+ this.host.positioner.scrollLeft -= TAB_BAR_SCROLL;
+ refreshNavigationButtonVisibility();
+ }
+
+ protected function arrowRightClickHandler(event:Event):void
+ {
+ this.host.positioner.scrollLeft += TAB_BAR_SCROLL;
+ refreshNavigationButtonVisibility();
+ }
+
+ private function windowResizeHandler(event:Event):void
+ {
+ refreshNavigationButtonVisibility();
+ }
+
+ private function refreshNavigationButtonVisibility():void
+ {
+ if (this.host.positioner.scrollLeft > 0)
+ {
+ arrowLeft.visible = true;
+ }
+ else
+ {
+ arrowLeft.visible = false;
+ }
+
+ if (this.host.positioner.scrollLeft < this.host.positioner.scrollWidth - this.host.positioner.offsetWidth)
+ {
+ arrowRight.visible = true;
+ }
+ else
+ {
+ arrowRight.visible = false;
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
index 9662613..00fb10f 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
@@ -107,6 +107,20 @@ $tabbarbutton-padding: 0 24px !default
> .indicatorContent
opacity: 1
+.jewel
+ &.button
+ &.tabbarnavleftbutton
+ position: absolute
+ left: 0
+ z-index: 4
+
+.jewel
+ &.button
+ &.tabbarnavrighttbutton
+ position: absolute
+ right: 0
+ z-index: 4
+
j|TabBarButtonItemRenderer
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ItemRendererMouseController")