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 c276872215826cd9032c8125ce8f3662e156a530 Author: Carlos Rovira <carlosrov...@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 carlosrov...@apache.org.