Merge branch 'develop' into feature/add_nav_tabbar_bead
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 @@
</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 597a581..f4b112f 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3594,6 +3594,18 @@
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 @@
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 @@
> .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")
