This is an automated email from the ASF dual-hosted git repository.
yishayw 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 7db4e84c5a Added Pagination
new ea85020c1f Merge branch 'develop' of
https://github.com/apache/royale-asjs into develop
7db4e84c5a is described below
commit 7db4e84c5a1eff13fc690258f0fbfbba739e0ac2
Author: Yishay Weiss <[email protected]>
AuthorDate: Wed Apr 15 16:40:47 2026 +0300
Added Pagination
---
.../projects/Style/src/main/resources/defaults.css | 8 +
.../Style/src/main/resources/style-manifest.xml | 4 +
.../royale/org/apache/royale/style/Pagination.as | 185 +++++++++++++++++++++
.../org/apache/royale/style/PaginationItem.as | 136 +++++++++++++++
.../royale/style/skins/PaginationItemSkin.as | 103 ++++++++++++
.../apache/royale/style/skins/PaginationSkin.as | 81 +++++++++
6 files changed, 517 insertions(+)
diff --git a/frameworks/projects/Style/src/main/resources/defaults.css
b/frameworks/projects/Style/src/main/resources/defaults.css
index 078abf583c..6a03fbfc85 100644
--- a/frameworks/projects/Style/src/main/resources/defaults.css
+++ b/frameworks/projects/Style/src/main/resources/defaults.css
@@ -99,6 +99,14 @@ ModalActions
{
IStyleSkin:
ClassReference("org.apache.royale.style.skins.ModalActionsSkin");
}
+Pagination
+{
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.PaginationSkin");
+}
+PaginationItem
+{
+ IStyleSkin:
ClassReference("org.apache.royale.style.skins.PaginationItemSkin");
+}
Toggle
{
IStyleSkin: ClassReference("org.apache.royale.style.skins.ToggleSkin");
diff --git a/frameworks/projects/Style/src/main/resources/style-manifest.xml
b/frameworks/projects/Style/src/main/resources/style-manifest.xml
index f7cc930c28..1f5a60a709 100644
--- a/frameworks/projects/Style/src/main/resources/style-manifest.xml
+++ b/frameworks/projects/Style/src/main/resources/style-manifest.xml
@@ -40,6 +40,8 @@
<component id="ModalBody" class="org.apache.royale.style.ModalBody"/>
<component id="ModalTitle" class="org.apache.royale.style.ModalTitle"/>
<component id="ModalActions" class="org.apache.royale.style.ModalActions"/>
+ <component id="Pagination" class="org.apache.royale.style.Pagination"/>
+ <component id="PaginationItem"
class="org.apache.royale.style.PaginationItem"/>
<component id="Toggle" class="org.apache.royale.style.Toggle"/>
<component id="FlexContainer" class="org.apache.royale.style.FlexContainer"/>
<component id="GridContainer" class="org.apache.royale.style.GridContainer"/>
@@ -291,5 +293,7 @@
<component id="CardTitleSkin"
class="org.apache.royale.style.skins.CardTitleSkin"/>
<component id="CardActionsSkin"
class="org.apache.royale.style.skins.CardActionsSkin"/>
<component id="ToggleSkin" class="org.apache.royale.style.skins.ToggleSkin"/>
+ <component id="PaginationSkin"
class="org.apache.royale.style.skins.PaginationSkin"/>
+ <component id="PaginationItemSkin"
class="org.apache.royale.style.skins.PaginationItemSkin"/>
</componentPackage>
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Pagination.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Pagination.as
new file mode 100644
index 0000000000..7a343bd006
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Pagination.as
@@ -0,0 +1,185 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.style
+{
+ COMPILE::JS{
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.ValueChangeEvent;
+
+ /**
+ * Dispatched when the selected page changes.
+ */
+ [Event(name="change", type="org.apache.royale.events.Event")]
+
+ [DefaultProperty("items")]
+
+ public class Pagination extends StyleUIBase
+ {
+
+ public function Pagination()
+ {
+ super();
+ }
+
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ var elem:WrappedHTMLElement = super.createElement();
+ elem.setAttribute("role", "navigation");
+ elem.setAttribute("aria-label", "Pagination");
+ return elem;
+ }
+
+ public function get items():Array
+ {
+ var result:Array = [];
+ for(var i:int = 0; i < numElements; i++)
+ result.push(getElementAt(i));
+ return result;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.PaginationItem
+ */
+ public function set items(value:Array):void
+ {
+ while(numElements > 0)
+ {
+ var oldItem:PaginationItem = getElementAt(0) as
PaginationItem;
+ oldItem.removeEventListener("itemClicked",
itemClickedHandler);
+ removeElement(oldItem);
+ }
+ if(value)
+ {
+ for each(var item:PaginationItem in value)
+ {
+ item.addEventListener("itemClicked",
itemClickedHandler);
+ addElement(item);
+ }
+ if(_selectedIndex >= 0 && _selectedIndex <
value.length)
+ {
+ (value[_selectedIndex] as
PaginationItem).selected = true;
+ }
+ else
+ {
+ for(var j:int = 0; j < value.length;
j++)
+ {
+ if((value[j] as
PaginationItem).selected)
+ {
+ _selectedIndex = j;
+ break;
+ }
+ }
+ }
+ }
+ }
+
+ private var _selectedIndex:int = -1;
+
+
[Bindable(event='valueChange',type='org.apache.royale.events.ValueChangeEvent')]
+ public function get selectedIndex():int
+ {
+ return _selectedIndex;
+ }
+
+ public function set selectedIndex(value:int):void
+ {
+ if(value != _selectedIndex)
+ {
+ var oldValue:int = _selectedIndex;
+ selectItem(value);
+
dispatchEvent(ValueChangeEvent.createUpdateEvent(this, 'selectedIndex',
oldValue, value));
+ dispatchEvent(new Event("change"));
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.PaginationItem
+ */
+ public function get selectedItem():PaginationItem
+ {
+ if(_selectedIndex >= 0 && _selectedIndex < numElements)
+ return getElementAt(_selectedIndex) as
PaginationItem;
+ return null;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.PaginationItem
+ */
+ private function itemClickedHandler(event:Event):void
+ {
+ var item:PaginationItem = event.target as
PaginationItem;
+ for(var i:int = 0; i < numElements; i++)
+ {
+ if(getElementAt(i) == item)
+ {
+ if(item.selectable)
+ {
+ selectedIndex = i;
+ }
+ else if(_selectedIndex >= 0)
+ {
+ if(i < _selectedIndex)
+ selectNeighbor(-1);
+ else
+ selectNeighbor(1);
+ }
+ return;
+ }
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.PaginationItem
+ */
+ private function selectNeighbor(direction:int):void
+ {
+ var i:int = _selectedIndex + direction;
+ while(i >= 0 && i < numElements)
+ {
+ var item:PaginationItem = getElementAt(i) as
PaginationItem;
+ if(item.selectable && !item.disabled)
+ {
+ selectedIndex = i;
+ return;
+ }
+ i += direction;
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.PaginationItem
+ */
+ private function selectItem(index:int):void
+ {
+ for(var i:int = 0; i < numElements; i++)
+ {
+ (getElementAt(i) as PaginationItem).selected =
(i == index);
+ }
+ _selectedIndex = index;
+ }
+
+ override public function getWrapperStyle():String
+ {
+ return 'pagination';
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/PaginationItem.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/PaginationItem.as
new file mode 100644
index 0000000000..38ee2318ab
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/PaginationItem.as
@@ -0,0 +1,136 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.style
+{
+ COMPILE::JS{
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+ import org.apache.royale.events.Event;
+
+ /**
+ * Dispatched when the user clicks on the item.
+ */
+ [Event(name="itemClicked", type="org.apache.royale.events.Event")]
+
+ public class PaginationItem extends StyleUIBase
+ {
+
+ public function PaginationItem()
+ {
+ super();
+ }
+
+ override protected function getTag():String
+ {
+ return "button";
+ }
+
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ var elem:WrappedHTMLElement = super.createElement();
+ elem.setAttribute("type", "button");
+ elem.onclick = elementClicked;
+ return elem;
+ }
+
+ COMPILE::JS
+ private function elementClicked():void
+ {
+ if(!_disabled)
+ dispatchEvent(new Event("itemClicked"));
+ }
+
+ private var _text:String = "";
+
+ public function get text():String
+ {
+ return _text;
+ }
+
+ public function set text(value:String):void
+ {
+ if(_text != value)
+ {
+ _text = value;
+ COMPILE::JS
+ {
+ element.textContent = value;
+ }
+ }
+ }
+
+ private var _selected:Boolean;
+
+ public function get selected():Boolean
+ {
+ return _selected;
+ }
+
+ public function set selected(value:Boolean):void
+ {
+ if(value != _selected)
+ {
+ _selected = value;
+ toggleAttribute("data-selected", value);
+ COMPILE::JS
+ {
+ element.setAttribute("aria-current",
value ? "page" : "false");
+ }
+ }
+ }
+
+ private var _selectable:Boolean = true;
+
+ public function get selectable():Boolean
+ {
+ return _selectable;
+ }
+
+ public function set selectable(value:Boolean):void
+ {
+ _selectable = value;
+ }
+
+ private var _disabled:Boolean;
+
+ public function get disabled():Boolean
+ {
+ return _disabled;
+ }
+
+ public function set disabled(value:Boolean):void
+ {
+ if(value != _disabled)
+ {
+ _disabled = value;
+ toggleAttribute("data-disabled", value);
+ COMPILE::JS
+ {
+ (element as HTMLButtonElement).disabled
= value;
+ }
+ }
+ }
+
+ override public function getWrapperStyle():String
+ {
+ return 'pagination-item';
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/PaginationItemSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/PaginationItemSkin.as
new file mode 100644
index 0000000000..e66ef3046e
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/PaginationItemSkin.as
@@ -0,0 +1,103 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.style.skins
+{
+ import org.apache.royale.style.StyleSkin;
+ import org.apache.royale.style.PaginationItem;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.style.colors.ColorSwatch;
+ import org.apache.royale.style.colors.ThemeColorSet;
+ import org.apache.royale.style.util.ThemeManager;
+ import org.apache.royale.style.stylebeads.background.BackgroundColor;
+ import org.apache.royale.style.stylebeads.border.Border;
+ import org.apache.royale.style.stylebeads.border.BorderWidth;
+ import org.apache.royale.style.stylebeads.spacing.Padding;
+ import org.apache.royale.style.stylebeads.interact.Cursor;
+ import org.apache.royale.style.stylebeads.typography.TextColor;
+ import org.apache.royale.style.stylebeads.effects.OpacityStyle;
+ import org.apache.royale.style.stylebeads.states.attribute.DataState;
+ import org.apache.royale.style.stylebeads.states.HoverState;
+
+ public class PaginationItemSkin extends StyleSkin
+ {
+ public function PaginationItemSkin()
+ {
+ super();
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.PaginationItem
+ */
+ private function get host():PaginationItem
+ {
+ return _strand as PaginationItem;
+ }
+
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ applyStyles();
+ }
+
+ private function applyStyles():void
+ {
+ if(!_styles)
+ {
+ var colorSet:ThemeColorSet =
ThemeManager.instance.activeTheme.themeColorSet;
+ var borderColor:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.BASE, 300);
+ var selectedBg:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.BASE, 900);
+ var selectedText:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.BASE, 0);
+ var hoverBg:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.BASE, 100);
+
+ var borderWidth:BorderWidth = new BorderWidth();
+ borderWidth.right = 1;
+
+ var border:Border = new Border();
+ border.rightColor = borderColor.colorSpecifier;
+ border.rightStyle = "solid";
+
+ var padding:Padding = new Padding();
+ padding.left = computeSize(12, host.unit);
+ padding.right = computeSize(12, host.unit);
+ padding.top = computeSize(8, host.unit);
+ padding.bottom = computeSize(8, host.unit);
+
+ _styles = [
+ new BackgroundColor("transparent"),
+ borderWidth,
+ border,
+ padding,
+ new Cursor("pointer"),
+ new HoverState([
+ new
BackgroundColor(hoverBg.colorSpecifier)
+ ]),
+ new DataState("selected", [
+ new
BackgroundColor(selectedBg.colorSpecifier),
+ new TextColor(selectedText)
+ ]),
+ new DataState("disabled", [
+ new OpacityStyle(40),
+ new Cursor("default")
+ ])
+ ];
+ host.setStyles(_styles);
+ }
+ }
+ }
+}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/PaginationSkin.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/PaginationSkin.as
new file mode 100644
index 0000000000..0fca71180e
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/skins/PaginationSkin.as
@@ -0,0 +1,81 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.style.skins
+{
+ import org.apache.royale.style.StyleSkin;
+ import org.apache.royale.style.Pagination;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.style.colors.ColorSwatch;
+ import org.apache.royale.style.colors.ThemeColorSet;
+ import org.apache.royale.style.util.ThemeManager;
+ import org.apache.royale.style.stylebeads.layout.Display;
+ import org.apache.royale.style.stylebeads.layout.Overflow;
+ import org.apache.royale.style.stylebeads.border.BorderRadius;
+ import org.apache.royale.style.stylebeads.border.Border;
+ import org.apache.royale.style.stylebeads.border.BorderWidth;
+ import org.apache.royale.style.stylebeads.typography.FontSize;
+
+ public class PaginationSkin extends StyleSkin
+ {
+ public function PaginationSkin()
+ {
+ super();
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.style.Pagination
+ */
+ private function get host():Pagination
+ {
+ return _strand as Pagination;
+ }
+
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ applyStyles();
+ }
+
+ private function applyStyles():void
+ {
+ if(!_styles)
+ {
+ var colorSet:ThemeColorSet =
ThemeManager.instance.activeTheme.themeColorSet;
+ var borderColor:ColorSwatch =
colorSet.getSwatch(ThemeColorSet.BASE, 300);
+
+ var border:Border = new Border();
+ border.color = borderColor.colorSpecifier;
+ border.style = "solid";
+
+ var borderWidth:BorderWidth = new BorderWidth();
+ borderWidth.width = 1;
+
+ _styles = [
+ new Display("inline-flex"),
+ new Overflow("hidden"),
+ new BorderRadius(computeSize(12,
host.unit)), // rounded-xl (0.75rem)
+ borderWidth,
+ border,
+ new FontSize(host.size || "base")
+ ];
+ host.setStyles(_styles);
+ }
+ }
+ }
+}
