royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] 14/24: UIBase typenames and classNames proposal - working, but I'm sure will be things to modify and/or enhance for performance
Date Sun, 18 Mar 2018 15:38:28 GMT
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 c2b91d9da42613b8a91820ebca3128368afed769
Author: Carlos Rovira <carlosrovira@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.

Mime
View raw message