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 2020/07/12 14:12:31 UTC

[royale-asjs] branch develop updated: basic-imagebutton: fix control nesting img inside a button when there is html input image

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

carlosrovira 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 4377b0b  basic-imagebutton: fix control nesting  img inside a button when there is html input image
4377b0b is described below

commit 4377b0b3c4e7521d132a3cb72a18bedcc5aacb6a
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sun Jul 12 16:12:20 2020 +0200

    basic-imagebutton: fix control nesting  img inside a button when there is html input image
---
 .../main/royale/org/apache/royale/html/ImageButton.as | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ImageButton.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ImageButton.as
index 5b3c2d3..407ceb3 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ImageButton.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ImageButton.as
@@ -60,8 +60,8 @@ package org.apache.royale.html
 		COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
-			addElementToWrapper(this,'button');
-            element.setAttribute('type', 'button');
+			addElementToWrapper(this,'input');
+            element.setAttribute('type', 'image');
             return element;
         }
 
@@ -94,16 +94,19 @@ package org.apache.royale.html
             {
                 if(!_imageElement)
                 {
-                    _imageElement = document.createElement("img") as HTMLImageElement;
-                    element.appendChild(_imageElement);
-                }                
-                (_imageElement as HTMLImageElement).src = url;
+                    (element as HTMLInputElement).src = url;
+                    _imageElement = (element as HTMLInputElement);
+                }
+                if (_imageElement && url)
+                {
+                    (_imageElement as HTMLInputElement).src = url;
+                }
             }
 
 			dispatchEvent(new Event("srcChanged"));
         }
 
-		COMPILE::JS{
+		COMPILE::JS
         private var _imageElement:Element;
 		/**
 		 *  Element image. HTMLImageElement.
@@ -115,10 +118,10 @@ package org.apache.royale.html
          *  @royaleignorecoercion org.apache.royale.core.IImageButton#imageElement
          *  @royaleignorecoercion Element
          */
+        COMPILE::JS
 		public function get imageElement():Element
 		{
 			return _imageElement;
 		}
-        }
 	}
 }


Re: [royale-asjs] branch develop updated: basic-imagebutton: fix control nesting img inside a button when there is html input image

Posted by Harbs <ha...@gmail.com>.
Specifically, <input type=“image”> will submit a form while <button> will not.

This is a breaking change to any ImageButton inside a Form.

> On Jul 12, 2020, at 5:28 PM, Harbs <ha...@gmail.com> wrote:
> 
> Why did you switch to input?
> 
> IIRC, there are behavioral differences between button and input.
> 
>> On Jul 12, 2020, at 5:12 PM, carlosrovira@apache.org wrote:
>> 
>> This is an automated email from the ASF dual-hosted git repository.
>> 
>> carlosrovira 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 4377b0b  basic-imagebutton: fix control nesting  img inside a button when there is html input image
>> 4377b0b is described below
>> 
>> commit 4377b0b3c4e7521d132a3cb72a18bedcc5aacb6a
>> Author: Carlos Rovira <ca...@apache.org>
>> AuthorDate: Sun Jul 12 16:12:20 2020 +0200
>> 
>>   basic-imagebutton: fix control nesting  img inside a button when there is html input image
>> ---
>> .../main/royale/org/apache/royale/html/ImageButton.as | 19 +++++++++++--------
>> 1 file changed, 11 insertions(+), 8 deletions(-)
>> 
>> diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ImageButton.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ImageButton.as
>> index 5b3c2d3..407ceb3 100644
>> --- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ImageButton.as
>> +++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ImageButton.as
>> @@ -60,8 +60,8 @@ package org.apache.royale.html
>> 		COMPILE::JS
>>        override protected function createElement():WrappedHTMLElement
>>        {
>> -			addElementToWrapper(this,'button');
>> -            element.setAttribute('type', 'button');
>> +			addElementToWrapper(this,'input');
>> +            element.setAttribute('type', 'image');
>>            return element;
>>        }
>> 
>> @@ -94,16 +94,19 @@ package org.apache.royale.html
>>            {
>>                if(!_imageElement)
>>                {
>> -                    _imageElement = document.createElement("img") as HTMLImageElement;
>> -                    element.appendChild(_imageElement);
>> -                }                
>> -                (_imageElement as HTMLImageElement).src = url;
>> +                    (element as HTMLInputElement).src = url;
>> +                    _imageElement = (element as HTMLInputElement);
>> +                }
>> +                if (_imageElement && url)
>> +                {
>> +                    (_imageElement as HTMLInputElement).src = url;
>> +                }
>>            }
>> 
>> 			dispatchEvent(new Event("srcChanged"));
>>        }
>> 
>> -		COMPILE::JS{
>> +		COMPILE::JS
>>        private var _imageElement:Element;
>> 		/**
>> 		 *  Element image. HTMLImageElement.
>> @@ -115,10 +118,10 @@ package org.apache.royale.html
>>         *  @royaleignorecoercion org.apache.royale.core.IImageButton#imageElement
>>         *  @royaleignorecoercion Element
>>         */
>> +        COMPILE::JS
>> 		public function get imageElement():Element
>> 		{
>> 			return _imageElement;
>> 		}
>> -        }
>> 	}
>> }
>> 
> 


Re: [royale-asjs] branch develop updated: basic-imagebutton: fix control nesting img inside a button when there is html input image

Posted by Harbs <ha...@gmail.com>.
Why did you switch to input?

IIRC, there are behavioral differences between button and input.

> On Jul 12, 2020, at 5:12 PM, carlosrovira@apache.org wrote:
> 
> This is an automated email from the ASF dual-hosted git repository.
> 
> carlosrovira 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 4377b0b  basic-imagebutton: fix control nesting  img inside a button when there is html input image
> 4377b0b is described below
> 
> commit 4377b0b3c4e7521d132a3cb72a18bedcc5aacb6a
> Author: Carlos Rovira <ca...@apache.org>
> AuthorDate: Sun Jul 12 16:12:20 2020 +0200
> 
>    basic-imagebutton: fix control nesting  img inside a button when there is html input image
> ---
> .../main/royale/org/apache/royale/html/ImageButton.as | 19 +++++++++++--------
> 1 file changed, 11 insertions(+), 8 deletions(-)
> 
> diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ImageButton.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ImageButton.as
> index 5b3c2d3..407ceb3 100644
> --- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ImageButton.as
> +++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/ImageButton.as
> @@ -60,8 +60,8 @@ package org.apache.royale.html
> 		COMPILE::JS
>         override protected function createElement():WrappedHTMLElement
>         {
> -			addElementToWrapper(this,'button');
> -            element.setAttribute('type', 'button');
> +			addElementToWrapper(this,'input');
> +            element.setAttribute('type', 'image');
>             return element;
>         }
> 
> @@ -94,16 +94,19 @@ package org.apache.royale.html
>             {
>                 if(!_imageElement)
>                 {
> -                    _imageElement = document.createElement("img") as HTMLImageElement;
> -                    element.appendChild(_imageElement);
> -                }                
> -                (_imageElement as HTMLImageElement).src = url;
> +                    (element as HTMLInputElement).src = url;
> +                    _imageElement = (element as HTMLInputElement);
> +                }
> +                if (_imageElement && url)
> +                {
> +                    (_imageElement as HTMLInputElement).src = url;
> +                }
>             }
> 
> 			dispatchEvent(new Event("srcChanged"));
>         }
> 
> -		COMPILE::JS{
> +		COMPILE::JS
>         private var _imageElement:Element;
> 		/**
> 		 *  Element image. HTMLImageElement.
> @@ -115,10 +118,10 @@ package org.apache.royale.html
>          *  @royaleignorecoercion org.apache.royale.core.IImageButton#imageElement
>          *  @royaleignorecoercion Element
>          */
> +        COMPILE::JS
> 		public function get imageElement():Element
> 		{
> 			return _imageElement;
> 		}
> -        }
> 	}
> }
>