[royale-asjs] branch develop updated: Don't use innerHTML

[ha...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

harbs pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new 667cda1  Don't use innerHTML
667cda1 is described below

commit 667cda16885699889461cee0210114471887dcfb
Author: Harbs <ha...@in-tools.com>
AuthorDate: Sun Dec 12 11:49:09 2021 +0200

    Don't use innerHTML
---
 .../org/apache/royale/html/ImageAndTextButton.as   | 28 +++++++++++-----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ImageAndTextButton.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ImageAndTextButton.as
index a1f24a8..86b32e4 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ImageAndTextButton.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ImageAndTextButton.as
@@ -71,7 +71,11 @@ package org.apache.royale.html
             ImageAndTextModel(model).text = value;
             COMPILE::JS
             {
-                setInnerHTML();
+                if(!textNode){
+                    textNode = document.createTextNode(value) as Text;
+                    element.appendChild(textNode);
+                }
+                textNode.nodeValue = "\xa0" + value;
             }
         }
 
@@ -98,10 +102,16 @@ package org.apache.royale.html
             ImageAndTextModel(model).image = value;
             COMPILE::JS
             {
-                setInnerHTML();
+                imgElement.src = value;
             }
         }
 
+        COMPILE::JS
+        protected var imgElement:HTMLImageElement;
+        
+        COMPILE::JS
+        protected var textNode:Text;
+
         /**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
          */
@@ -110,20 +120,10 @@ package org.apache.royale.html
         {
 			addElementToWrapper(this,'button');
             element.setAttribute('type', 'button');
+            imgElement = document.createElement("img") as HTMLImageElement;
+            element.appendChild(imgElement);
             return element;
         }
 
-        /**
-         */
-        COMPILE::JS
-        protected function setInnerHTML():void
-        {
-            var inner:String = '';
-            if (image != null)
-                inner += "<img src='" + image + "'/>";
-            inner += '&nbsp;';
-            inner += text;
-            element.innerHTML = inner;
-        };
 	}
 }