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
commit 941f791430f58c755d2ec8b5ed2df3aea9341f97
Author: Alex Harui <aha...@apache.org>
AuthorDate: Thu Apr 12 20:05:51 2018 -0700
another approach to handling className and classList
---
.../main/royale/org/apache/royale/core/UIBase.as | 23 ++++++++++++---
.../apache/royale/utils/cssclasslist/addStyles.as | 14 +++++----
.../royale/utils/cssclasslist/removeAllStyles.as | 7 ++++-
.../royale/utils/cssclasslist/removeStyles.as | 12 ++++++--
.../royale/utils/cssclasslist/toggleStyle.as | 12 ++++++--
.../main/royale/org/apache/royale/jewel/Button.as | 34 ++++++++++++++++++++--
6 files changed, 83 insertions(+), 19 deletions(-)
diff --git
a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as
b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as
index f59d7f0..a4131fe 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as
@@ -1061,13 +1061,25 @@ package org.apache.royale.core
*
* @royalesuppresspublicvarwarning
*/
- public var typeNames:String;
+ public var typeNames:String = "";
private var _className:String;
/**
* The classname. Often used for CSS
* class selector lookups.
+ *
+ * In Royale the list of class selectors actually applied to
+ * the component can be more than what is specified in this
+ * className property. This property is primarily provided
+ * to make it easy to specify class selectors in MXML. If
+ * you want to change the set of class selectors at runtime
+ * it is more efficient to use the ClassList utility functions in
+ * org.apache.royale.utils.classList.
+ *
+ * Do not mix usage of the ClassList utility functions and modifying
+ * the className property at runtime. It is best to think of this
+ * className property as a write-once property.
*
* @langversion 3.0
* @playerversion Flash 10.2
@@ -1090,7 +1102,10 @@ package org.apache.royale.core
COMPILE::JS
{
- setClassName(computeFinalClassNames());
+ // set it now if it was set once in addedToParent
+ // otherwise just wait for addedToParent
+ if (parent)
+ setClassName(computeFinalClassNames());
}
dispatchEvent(new Event("classNameChanged"));
@@ -1100,13 +1115,13 @@ package org.apache.royale.core
COMPILE::JS
protected function computeFinalClassNames():String
{
- return StringUtil.trim((_className ? _className : "") + " " +
(typeNames ? typeNames : ""));
+ return _className ? _className + " " + typeNames : typeNames;
}
COMPILE::JS
protected function setClassName(value:String):void
{
- addStyles(element, value);
+ element.className = value;
}
/**
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 aa07062..fc100ae 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
@@ -24,11 +24,17 @@ package org.apache.royale.utils.cssclasslist
}
/**
- * Add one or more styles to the component. If the specified class
already
+ * Add one or more class selectors to the component. If the specified
class already
* exist, the class will not be added.
+ *
+ * Use of these utility functions should not be mixed with modifying the
component's
+ * className property at runtime. Also the component's className
property will not
+ * reflect modifications made with this API.
*
- * @param value, a String with the style (or styles separated by an
space) to
- * add from the component. If the string is empty doesn't perform any
action
+ * @param element The HTMLElement 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
@@ -36,8 +42,6 @@ package org.apache.royale.utils.cssclasslist
COMPILE::JS
public function addStyles(element:WrappedHTMLElement, value:String):void
{
- if (value == "") return;
-
if (value.indexOf(" ") >= 0)
{
var classes:Array = value.split(" ");
diff --git
a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeAllStyles.as
b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeAllStyles.as
index fc34fde..2d56551 100644
---
a/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeAllStyles.as
+++
b/frameworks/projects/Core/src/main/royale/org/apache/royale/utils/cssclasslist/removeAllStyles.as
@@ -24,8 +24,13 @@ package org.apache.royale.utils.cssclasslist
}
/**
- * Removes all styles
+ * Removes all styles (class selector names) from the component.
+ *
+ * This is a low-level operation and may interfere with proper
+ * operation of the component.
*
+ * @param element The HTMLElement that will have selectors added or
removed.
+ *
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
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 badf5dd..be9638c 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
@@ -25,10 +25,16 @@ package org.apache.royale.utils.cssclasslist
/**
* Removes one or more styles from the component. Removing a class that
does not
- * exist, does not throw any error
+ * exist, does not throw any error.
*
- * @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
+ * Use of these utility functions should not be mixed with modifying the
component's
+ * 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 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
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 85d7331..da6e188 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
@@ -24,12 +24,18 @@ package org.apache.royale.utils.cssclasslist
}
/**
- * Adds or removes a single style.
+ * Adds or removes a single style (class selector name).
*
- * The first parameter removes the style from an element, and returns
false.
+ * Use of these utility functions should not be mixed with modifying the
component's
+ * 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 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.
*
- * The optional second parameter is a Boolean value that forces the class
to be added
+ * @param force A Boolean value that forces the class to be added
* or removed, regardless of whether or not it already existed.
*
* @langversion 3.0
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 2d5c831..e0d5348 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
@@ -88,7 +88,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- toggleStyle(element, "primary", value);
+ togglePropertyStyle("primary", value);
}
}
}
@@ -118,7 +118,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- toggleStyle(element, "secondary", value);
+ togglePropertyStyle("secondary", value);
}
}
}
@@ -148,9 +148,37 @@ package org.apache.royale.jewel
COMPILE::JS
{
- toggleStyle(element, "emphasized", value);
+ togglePropertyStyle("emphasized", value);
}
}
}
+
+ COMPILE::JS
+ override protected function computeFinalClassNames():String
+ {
+ var s:String = super.computeFinalClassNames();
+ if (propertyStyles.length)
+ s += " " + propertyStyles.join(" ");
+ return s;
+ }
+
+ 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
--
To stop receiving notification emails like this one, please contact
aha...@apache.org.
