royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From aha...@apache.org
Subject [royale-asjs] 02/02: another approach to handling className and classList
Date Fri, 13 Apr 2018 03:21:14 GMT
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 <aharui@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
aharui@apache.org.

Mime
View raw message