You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/03/20 23:33:21 UTC
[royale-asjs] 14/28: UIBase typenames and classNames proposal -
working,
but I'm sure will be things to modify and/or enhance for performance
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit 89a7884aa66e8814b1e51e9ef2b94cc31c7cb1f5
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Mar 15 14:16:50 2018 +0100
UIBase typenames and classNames proposal - working, but I'm sure will be things to modify and/or enhance for performance
---
.../main/royale/org/apache/royale/core/UIBase.as | 139 ++++++++++++++++-----
.../main/royale/org/apache/royale/jewel/Button.as | 6 +-
2 files changed, 112 insertions(+), 33 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
index 2d279c0..1a04fcf 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/core/UIBase.as
@@ -1025,8 +1025,10 @@ package org.apache.royale.core
*
* @royalesuppresspublicvarwarning
*/
- private var _typeNames:String;
+ public var typeNames:String;
+ private var _className:String;
+
/**
* The classname. Often used for CSS
* class selector lookups.
@@ -1036,67 +1038,142 @@ package org.apache.royale.core
* @playerversion AIR 2.6
* @productversion Royale 0.0
*/
- public function get typeNames():String
+ public function get className():String
{
- return _typeNames;
+ return _className;
}
/**
* @private
*/
- public function set typeNames(value:String):void
+ public function set className(value:String):void
{
- if (_typeNames !== value)
+ if (_className !== value)
{
- _typeNames = value;
+ _className = value;
COMPILE::JS
{
- element.className = "";
- setClassName(_typeNames);
+ setClassName(computeFinalClassNames());
}
+
+ dispatchEvent(new Event("classNameChanged"));
}
}
- private var _className:String;
-
/**
- * The classname. Often used for CSS
- * class selector lookups.
+ * Computes the final syles for this component joining typeNames and classNames
+ * styles
*
* @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.0
+ * @productversion Royale 0.9.3
*/
- public function get className():String
+ COMPILE::JS
+ protected function computeFinalClassNames():String
{
- return _className;
+ return StringUtil.trim((_className ? _className : "") + " " + (typeNames ? typeNames : ""));
}
/**
- * @private
+ * Sets the component styles in JS
+ *
+ * @langversion 3.0
+ * @productversion Royale 0.0
*/
- public function set className(value:String):void
+ COMPILE::JS
+ protected function setClassName(value:String):void
{
- if (_className !== value)
+ addStyles(value);
+ }
+
+ /**
+ * Add one or more styles to the component. If the specified class already
+ * exist, the class will not be added.
+ *
+ * @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
+ *
+ * @langversion 3.0
+ * @productversion Royale 0.9.3
+ */
+ COMPILE::JS
+ protected function addStyles(value:String):void
+ {
+ if (value == "") return;
+
+ if (value.indexOf(" ") >= 0)
{
- _className = value;
+ var classes:Array = value.split(" ");
+ element.classList.add.apply(element.classList, classes);
+ } else
+ {
+ element.classList.add(value);
+ }
+ }
- COMPILE::JS
- {
- setClassName(typeNames ? typeNames + " " + _className : _className);
- }
-
- dispatchEvent(new Event("classNameChanged"));
+ /**
+ * Removes one or more styles from the component. Removing a class that does not
+ * 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
+ *
+ * @langversion 3.0
+ * @productversion Royale 0.9.3
+ */
+ COMPILE::JS
+ protected function removeStyles(value:String):void
+ {
+ if (value == "") return;
+
+ if (value.indexOf(" ") >= 0)
+ {
+ var classes:Array = value.split(" ");
+ element.classList.remove.apply(element.classList, classes);
+ } else
+ {
+ element.classList.remove(value);
}
}
+ /**
+ * Adds or removes a single style.
+ *
+ * The first parameter removes the style from an element, and returns 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
+ * or removed, regardless of whether or not it already existed.
+ *
+ * @langversion 3.0
+ * @productversion Royale 0.9.3
+ */
COMPILE::JS
- protected function setClassName(value:String):void
+ protected function toggleStyle(value:String, force:Boolean = false):Boolean
{
- var classes:Array = value.split(" ");
- element.classList.add.apply(element.classList, classes);
+ return element.classList.toggle(value, force);
+ }
+
+ /**
+ * Removes all styles that are not in typeNames
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ COMPILE::JS
+ protected function removeAllStyles():void
+ {
+ var classList:DOMTokenList = element.classList;
+ var i:int;
+ for( i = classList.length; i > 0; i-- )
+ {
+ if(typeNames.indexOf(classList[i]) != 0)
+ {
+ classList.remove(classList[i]);
+ }
+ }
}
/**
@@ -1385,6 +1462,8 @@ package org.apache.royale.core
COMPILE::JS
{
+ setClassName(computeFinalClassNames());
+
if (style)
ValuesManager.valuesImpl.applyStyles(this, style);
}
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 53f58e4..1fea4bc 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
{
- element.classList.toggle("primary", value);
+ toggleStyle("primary", value);
}
}
}
@@ -118,7 +118,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- element.classList.toggle("secondary", value);
+ toggleStyle("secondary", value);
}
}
}
@@ -148,7 +148,7 @@ package org.apache.royale.jewel
COMPILE::JS
{
- element.classList.toggle("emphasized", value);
+ toggleStyle("emphasized", value);
}
}
}
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.