This is an automated email from the ASF dual-hosted git repository.
aharui pushed a commit to branch feature/uibase-classname
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/feature/uibase-classname by
this push:
new aa4a0e3 integrate ClassSelectorList
aa4a0e3 is described below
commit aa4a0e3026ad11c28a3bfc7c1073c1efbf4c987f
Author: Alex Harui <[email protected]>
AuthorDate: Tue Apr 17 00:52:42 2018 -0700
integrate ClassSelectorList
---
.../projects/Core/src/main/royale/CoreClasses.as | 1 +
.../org/apache/royale/utils/ClassSelectorList.as | 25 ++++++++----
.../apache/royale/utils/cssclasslist/addStyles.as | 28 +++++++------
.../royale/utils/cssclasslist/removeStyles.as | 27 +++++++------
.../royale/utils/cssclasslist/toggleStyle.as | 20 ++++++----
.../main/royale/org/apache/royale/jewel/Button.as | 46 +++++-----------------
.../royale/org/apache/royale/jewel/CheckBox.as | 24 +++++------
.../royale/org/apache/royale/jewel/RadioButton.as | 24 +++++------
.../main/royale/org/apache/royale/jewel/Slider.as | 10 ++---
.../royale/jewel/beads/layouts/HorizontalLayout.as | 2 +-
.../beads/layouts/HorizontalLayoutSpaceBetween.as | 2 +-
.../layouts/HorizontalLayoutWithPaddingAndGap.as | 2 +-
.../royale/jewel/beads/layouts/VerticalLayout.as | 2 +-
.../layouts/VerticalLayoutWithPaddingAndGap.as | 2 +-
.../royale/jewel/supportClasses/TextFieldBase.as | 4 +-
15 files changed, 101 insertions(+), 118 deletions(-)
diff --git a/frameworks/projects/Core/src/main/royale/CoreClasses.as
b/frameworks/projects/Core/src/main/royale/CoreClasses.as
index 93f7861..ae6fdca 100644
--- a/frameworks/projects/Core/src/main/royale/CoreClasses.as
+++ b/frameworks/projects/Core/src/main/royale/CoreClasses.as
@@ -258,6 +258,7 @@ internal class CoreClasses
import org.apache.royale.utils.date.addSeconds; addSeconds;
import org.apache.royale.utils.date.addYears; addYears;
+ import org.apache.royale.utils.ClassSelectorList; ClassSelectorList;
}
}
diff --git
a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/ClassSelectorList.as
b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/ClassSelectorList.as
index 941d183..6c35dc3 100644
---
a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/ClassSelectorList.as
+++
b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/ClassSelectorList.as
@@ -19,7 +19,6 @@
package org.apache.royale.utils
{
import org.apache.royale.core.IUIBase;
- import org.osmf.elements.HTMLElement;
/**
* The ClassSelectorList class is used to manage the list of class
selectors
@@ -41,27 +40,31 @@ package org.apache.royale.utils
private var component:IUIBase;
private var startIndex:int = 0;
- private var count:int;
+ private var count:int = 0;
/**
* Add a class selector to the list.
* @param name Name of selector to add.
*/
- COMPILE::JS
public function add(name:String):void
{
+ COMPILE::JS
+ {
component.positioner.classList.add(name);
if (!component.parent)
startIndex++;
+ }
}
/**
* Add a class selector to the list.
* @param name Name of selector to remove.
*/
- COMPILE::JS
public function remove(name:String):void
{
+ COMPILE::JS
+ {
+ var positioner:HTMLElement = component.positioner as HTMLElement;
var classList:DOMTokenList = positioner.classList;
for (var i:int = 0; i < startIndex; i++)
{
@@ -69,6 +72,7 @@ package org.apache.royale.utils
startIndex--;
}
positioner.classList.remove(name);
+ }
}
/**
@@ -76,12 +80,14 @@ package org.apache.royale.utils
* @param name Name of selector to add or remove.
* @param value True to add, False to remove.
*/
- COMPILE::JS
public function toggle(name:String, value:Boolean):void
{
+ COMPILE::JS
+ {
component.positioner.classList.toggle(name, value);
if (!component.parent && value)
startIndex++;
+ }
}
@@ -90,9 +96,10 @@ package org.apache.royale.utils
* @param names Space-separated list of names to add.
* @royaleignorecoercion HTMLElement
*/
- COMPILE::JS
public function addNames(names:String):void
{
+ COMPILE::JS
+ {
var positioner:HTMLElement = component.positioner as HTMLElement;
var classList:DOMTokenList = positioner.classList;
if (component.parent)
@@ -104,8 +111,12 @@ package org.apache.royale.utils
classList.remove(name);
}
}
- positioner.className += names;
+ if (startIndex > 0)
+ positioner.className += " " + names;
+ else
+ positioner.className = names;
count = classList.length - startIndex;
+ }
}
}
}
diff --git
a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/addStyles.as
b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/addStyles.as
index fc100ae..c04a8fe 100644
---
a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/addStyles.as
+++
b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/addStyles.as
@@ -18,10 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.utils.cssclasslist
{
- COMPILE::JS
- {
- import org.apache.royale.core.WrappedHTMLElement;
- }
+ import org.apache.royale.core.IUIBase;
/**
* Add one or more class selectors to the component. If the specified
class already
@@ -31,24 +28,29 @@ package org.apache.royale.utils.cssclasslist
* className property at runtime. Also the component's className
property will not
* reflect modifications made with this API.
*
- * @param element The HTMLElement that will have selectors added or
removed.
+ * @param component The component that will have selectors added or
removed.
*
* @param value A String with the style (or list of styles separated by
an space) to
* add to the component.
*
* @langversion 3.0
* @productversion Royale 0.9.3
+ * @royaleignorecoercion HTMLElement
*/
- COMPILE::JS
- public function addStyles(element:WrappedHTMLElement, value:String):void
+ public function addStyles(component:IUIBase, value:String):void
{
- if (value.indexOf(" ") >= 0)
- {
- var classes:Array = value.split(" ");
- element.classList.add.apply(element.classList, classes);
- } else
+ COMPILE::JS
{
- element.classList.add(value);
+ if (value.indexOf(" ") >= 0)
+ {
+ var classes:Array = value.split(" ");
+ var element:HTMLElement = component.element as HTMLElement
+ element.classList.add.apply(element.classList, classes);
+ }
+ else
+ {
+ component.element.classList.add(value);
+ }
}
}
diff --git
a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeStyles.as
b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeStyles.as
index be9638c..e313747 100644
---
a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeStyles.as
+++
b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeStyles.as
@@ -18,10 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.utils.cssclasslist
{
- COMPILE::JS
- {
- import org.apache.royale.core.WrappedHTMLElement;
- }
+ import org.apache.royale.core.IUIBase;
/**
* Removes one or more styles from the component. Removing a class that
does not
@@ -31,26 +28,30 @@ package org.apache.royale.utils.cssclasslist
* className property at runtime. Also the component's className
property will not
* reflect modifications made with this API.
*
- * @param element The HTMLElement that will have selectors added or
removed.
+ * @param component The component that will have selectors added or
removed.
*
* @param value A String with the style (or styles separated by an space)
to
* remove from the component. If the string is empty doesn't perform any
action.
*
* @langversion 3.0
* @productversion Royale 0.9.3
+ * @royaleignorecoercion HTMLElement
*/
- COMPILE::JS
- public function removeStyles(element:WrappedHTMLElement, value:String):void
+ public function removeStyles(component:IUIBase, value:String):void
{
if (value == "") return;
- if (value.indexOf(" ") >= 0)
- {
- var classes:Array = value.split(" ");
- element.classList.remove.apply(element.classList, classes);
- } else
+ COMPILE::JS
{
- element.classList.remove(value);
+ if (value.indexOf(" ") >= 0)
+ {
+ var classes:Array = value.split(" ");
+ var element:HTMLElement = component.element as HTMLElement
+ element.classList.remove.apply(element.classList, classes);
+ } else
+ {
+ component.element.classList.remove(value);
+ }
}
}
}
diff --git
a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/toggleStyle.as
b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/toggleStyle.as
index da6e188..6685576 100644
---
a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/toggleStyle.as
+++
b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/toggleStyle.as
@@ -18,10 +18,7 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.utils.cssclasslist
{
- COMPILE::JS
- {
- import org.apache.royale.core.WrappedHTMLElement;
- }
+ import org.apache.royale.core.IUIBase;
/**
* Adds or removes a single style (class selector name).
@@ -30,7 +27,7 @@ package org.apache.royale.utils.cssclasslist
* className property at runtime. Also the component's className
property will not
* reflect modifications made with this API.
*
- * @param element The HTMLElement that will have selectors added or
removed.
+ * @param component The component that will have selectors added or
removed.
*
* @param value If the selector name exists it is removed and the return
value is false.
* If the style does not exist, it is added to the element, and the
return value is true.
@@ -41,9 +38,16 @@ package org.apache.royale.utils.cssclasslist
* @langversion 3.0
* @productversion Royale 0.9.3
*/
- COMPILE::JS
- public function toggleStyle(element:WrappedHTMLElement, value:String,
force:Boolean = false):Boolean
+ public function toggleStyle(component:IUIBase, value:String, force:Boolean
= false):Boolean
{
- return element.classList.toggle(value, force);
+ COMPILE::JS
+ {
+ return component.element.classList.toggle(value, force);
+ }
+ COMPILE::SWF
+ {
+ // TODO (aharui) SWF Implementation
+ return true;
+ }
}
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
index e0d5348..ba25d87 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
@@ -19,11 +19,11 @@
package org.apache.royale.jewel
{
import org.apache.royale.html.Button;
+ import org.apache.royale.utils.ClassSelectorList;
COMPILE::JS
{
import org.apache.royale.core.WrappedHTMLElement;
- import org.apache.royale.utils.cssclasslist.toggleStyle;
}
/**
@@ -59,9 +59,11 @@ package org.apache.royale.jewel
{
super();
-
+ classSelectorList = new ClassSelectorList(this);
typeNames = "jewel button";
}
+
+ protected var classSelectorList:ClassSelectorList;
private var _primary:Boolean = false;
@@ -86,10 +88,7 @@ package org.apache.royale.jewel
{
_primary = value;
- COMPILE::JS
- {
- togglePropertyStyle("primary", value);
- }
+ classSelectorList.toggle("primary", value);
}
}
@@ -116,10 +115,7 @@ package org.apache.royale.jewel
{
_secondary = value;
- COMPILE::JS
- {
- togglePropertyStyle("secondary", value);
- }
+ classSelectorList.toggle("secondary", value);
}
}
@@ -146,39 +142,15 @@ package org.apache.royale.jewel
{
_emphasized = value;
- COMPILE::JS
- {
- togglePropertyStyle("emphasized", value);
- }
+ classSelectorList.toggle("emphasized", value);
}
}
COMPILE::JS
- override protected function computeFinalClassNames():String
+ override protected function setClassName(value:String):void
{
- var s:String = super.computeFinalClassNames();
- if (propertyStyles.length)
- s += " " + propertyStyles.join(" ");
- return s;
+ classSelectorList.addNames(value);
}
- COMPILE::JS
- private var propertyStyles:Array = [];
-
- COMPILE::JS
- protected function togglePropertyStyle(styleName:String,
value:Boolean):void
- {
- if (value)
- {
- if (propertyStyles.indexOf(styleName) == -1)
- propertyStyles.push(styleName);
- }
- else
- {
- var c:int = propertyStyles.indexOf(styleName);
- if (c != -1) propertyStyles.splice(c, 1);
- }
- toggleStyle(element, styleName, value);
- }
}
}
\ No newline at end of file
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as
index 87d1ae4..b52861f 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as
@@ -20,6 +20,7 @@ package org.apache.royale.jewel
{
import org.apache.royale.html.CheckBox;
import org.apache.royale.core.IToggleButtonModel;
+ import org.apache.royale.utils.ClassSelectorList;
COMPILE::JS
{
@@ -58,9 +59,18 @@ package org.apache.royale.jewel
{
super();
+ classSelectorList = new ClassSelectorList(this);
typeNames = "jewel checkbox";
}
+ protected var classSelectorList:ClassSelectorList;
+
+ COMPILE::JS
+ override protected function setClassName(value:String):void
+ {
+ classSelectorList.addNames(value);
+ }
+
COMPILE::JS
protected var input:HTMLInputElement;
@@ -112,20 +122,6 @@ package org.apache.royale.jewel
}
/**
- * override UIBase to affect positioner instead of element
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.2
- */
- COMPILE::JS
- override protected function setClassName(value:String):void
- {
- addStyles(positioner, value);
- }
-
- /**
* The text label for the CheckBox.
*
* @royaleignorecoercion Text
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
index b0ce441..e043f6c 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
@@ -20,6 +20,7 @@ package org.apache.royale.jewel
{
import org.apache.royale.events.Event;
import org.apache.royale.events.MouseEvent;
+ import org.apache.royale.utils.ClassSelectorList;
COMPILE::SWF
{
@@ -275,9 +276,18 @@ package org.apache.royale.jewel
{
super();
+ classSelectorList = new ClassSelectorList(this);
typeNames = "jewel radiobutton";
}
+ protected var classSelectorList:ClassSelectorList;
+
+ COMPILE::JS
+ override protected function setClassName(value:String):void
+ {
+ classSelectorList.addNames(value);
+ }
+
/**
* Provides unique name
*/
@@ -337,20 +347,6 @@ package org.apache.royale.jewel
return element;
}
- /**
- * override UIBase to affect positioner instead of element
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.2
- */
- COMPILE::JS
- override protected function setClassName(value:String):void
- {
- addStyles(positioner, value);
- }
-
override public function addEventListener(type:String,
handler:Function, opt_capture:Boolean = false, opt_handlerScope:Object =
null):void
{
if (type == MouseEvent.CLICK)
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as
index 8b45a79..048cb92 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as
@@ -21,6 +21,7 @@ package org.apache.royale.jewel
import org.apache.royale.core.IRangeModel;
import org.apache.royale.core.UIBase;
import org.apache.royale.events.Event;
+ import org.apache.royale.utils.ClassSelectorList;
COMPILE::JS
{
@@ -85,6 +86,7 @@ package org.apache.royale.jewel
{
super();
+ classSelectorList = new ClassSelectorList(this);
typeNames = "jewel slider";
IRangeModel(model).value = 0;
@@ -94,6 +96,8 @@ package org.apache.royale.jewel
IRangeModel(model).snapInterval = 1;
}
+ protected var classSelectorList:ClassSelectorList;
+
/**
* The current value of the Slider.
*
@@ -222,14 +226,10 @@ package org.apache.royale.jewel
return element;
}
- /**
- * since we have a div surronding the main input, we need to
- * route the class assignaments to div
- */
COMPILE::JS
override protected function setClassName(value:String):void
{
- addStyles(positioner, value);
+ classSelectorList.addNames(value);
}
}
}
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
index c9673c8..f93bf6a 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
@@ -141,7 +141,7 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
var contentView:IParentIUIBase = layoutView as
IParentIUIBase;
- addStyles(contentView.element, "layout
horizontal");
+ addStyles(contentView, "layout horizontal");
/**
* This Layout uses the following CSS rules
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutSpaceBetween.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutSpaceBetween.as
index 9db09c6..d6632f4 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutSpaceBetween.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutSpaceBetween.as
@@ -141,7 +141,7 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
var contentView:IParentIUIBase = layoutView as
IParentIUIBase;
- addStyles (contentView.element, "layout
horizontal space");
+ addStyles (contentView, "layout horizontal
space");
/**
* This Layout uses the following CSS rules
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
index 6224f4b..8dfdf7a 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
@@ -275,7 +275,7 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
var contentView:IParentIUIBase = layoutView as IParentIUIBase;
- addStyles (contentView.element, "layout
horizontal");
+ addStyles (contentView, "layout horizontal");
var children:Array =
contentView.internalChildren();
var i:int;
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
index a6f0486..4b058d6 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
@@ -150,7 +150,7 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
var contentView:IParentIUIBase = layoutView as
IParentIUIBase;
- addStyles (contentView.element, "layout
vertical");
+ addStyles (contentView, "layout vertical");
var children:Array =
contentView.internalChildren();
var i:int;
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
index 745a2ff..6054163 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
@@ -279,7 +279,7 @@ package org.apache.royale.jewel.beads.layouts
COMPILE::JS
{
var contentView:IParentIUIBase = layoutView as
IParentIUIBase;
- addStyles (contentView.element, "layout
vertical");
+ addStyles (contentView, "layout vertical");
var children:Array =
contentView.internalChildren();
var i:int;
diff --git
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
index d478400..454cec2 100644
---
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
+++
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
@@ -134,7 +134,7 @@ package org.apache.royale.jewel.supportClasses
override protected function setClassName(value:String):void
{
//positioner.className = value;
- addStyles(positioner, value);
+ addStyles(this, value);
}
private var _isInvalid:Boolean = false;
@@ -158,7 +158,7 @@ package org.apache.royale.jewel.supportClasses
COMPILE::JS
{
- toggleStyle(positioner, "is-invalid", _isInvalid);
+ toggleStyle(this, "is-invalid", _isInvalid);
//positioner.classList.toggle("is-invalid", _isInvalid);
//typeNames = positioner.className;
}
--
To stop receiving notification emails like this one, please contact
[email protected].
