[royale-asjs] branch develop updated: Start implementing text option in ColorPicker

[yi...@apache.org]

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

yishayw 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 63c61e0527 Start implementing text option in ColorPicker
63c61e0527 is described below

commit 63c61e0527c8524d9aa83dab531aff76ff331424
Author: Yishay Weiss <yi...@hotmail.com>
AuthorDate: Wed Nov 23 19:47:02 2022 +0200

    Start implementing text option in ColorPicker
---
 .../royale/mx/controls/beads/ColorPickerPopUp.as   | 60 +++++++++++++++++++++-
 1 file changed, 58 insertions(+), 2 deletions(-)

diff --git a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/beads/ColorPickerPopUp.as b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/beads/ColorPickerPopUp.as
index 23caf22676..3dbc08b0e6 100644
--- a/frameworks/projects/MXRoyale/src/main/royale/mx/controls/beads/ColorPickerPopUp.as
+++ b/frameworks/projects/MXRoyale/src/main/royale/mx/controls/beads/ColorPickerPopUp.as
@@ -27,6 +27,14 @@ package mx.controls.beads
 	import org.apache.royale.html.supportClasses.ColorPalette;
 	import org.apache.royale.html.beads.layouts.TileLayout;
 	import org.apache.royale.html.supportClasses.IColorPickerPopUp;
+	import org.apache.royale.html.TextInput;
+	import org.apache.royale.html.Group;
+	import org.apache.royale.core.IStyleableObject;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.utils.CSSUtils;
+	import org.apache.royale.html.beads.DispatchInputFinishedBead;
+	import org.apache.royale.html.accessories.RestrictTextInputBead;
+	import org.apache.royale.core.IStrandWithModel;
 
 	/**
 	 *  The ColorPickerPopUp class is used in ColorPicker. It contains a set of controls for picking a color.
@@ -41,6 +49,8 @@ package mx.controls.beads
 	public class ColorPickerPopUp extends UIBase implements IColorPickerPopUp, IBead
 	{
 		protected var colorPalette:ColorPalette;
+		protected var textInput:TextInput;
+		protected var selectedColorDisplay:Group;
 		protected var host:IStrand;
 		/**
 		 *  constructor.
@@ -55,14 +65,39 @@ package mx.controls.beads
 			super();
 			colorPalette = new ColorPalette();
 			var colorPaletteLayout:TileLayout = loadBeadFromValuesManager(TileLayout, "iBeadLayout", colorPalette) as TileLayout;
-			colorPaletteLayout.rowHeight = colorPaletteLayout.columnWidth = 12;
-			colorPalette.width =  240;
+			selectedColorDisplay = new Group();
+			(selectedColorDisplay as IStyleableObject).className = "ColorPickerDisplayedColor";			
+			var irDim:int = 11;
+			var margin:int = 2;
+			colorPaletteLayout.rowHeight = colorPaletteLayout.columnWidth = irDim;
+			colorPalette.width =  irDim * 20;
+			selectedColorDisplay.width = irDim * 4;
+			textInput = new TextInput();
+			textInput.width = 62;
+			textInput.x = selectedColorDisplay.width + margin * 2;
+			selectedColorDisplay.y = textInput.y = margin;
+			selectedColorDisplay.height = textInput.height = 24;
+			colorPalette.y = selectedColorDisplay.height + margin * 2;
+			COMPILE::JS
+			{
+				selectedColorDisplay.element.style.position = "absolute";
+				textInput.element.style.position = "absolute";
+				colorPalette.element.style.position = "absolute";
+			}
 		}
 		
 		override public function set model(value:Object):void
 		{
 			super.model = value;
 			colorPalette.model = value;
+			if (getElementIndex(selectedColorDisplay) < 0)
+			{
+				addElement(selectedColorDisplay);
+			}
+			if (getElementIndex(textInput) < 0)
+			{
+				addElement(textInput);
+			}
 			if (getElementIndex(colorPalette) < 0)
 			{
 				addElement(colorPalette);
@@ -72,6 +107,27 @@ package mx.controls.beads
 		public function set strand(value:IStrand):void
 		{
 			host = value;
+			textInput.addEventListener("change", changeHandler);
+			var restrictBead:RestrictTextInputBead = new RestrictTextInputBead();
+			restrictBead.restrict = "aAbBcCdDeEfF0123456789";
+			textInput.addBead(restrictBead);
+			textInput.addBead(new DispatchInputFinishedBead());
+			textInput.addEventListener(DispatchInputFinishedBead.INPUT_FINISHED, inputFinishedHandler)
+		}
+
+		protected function changeHandler(event:Event):void
+		{
+			var color:uint = CSSUtils.toColorWithAlpha("#" + textInput.text);
+			COMPILE::JS
+			{
+				selectedColorDisplay.element.style.backgroundColor = CSSUtils.attributeFromColor(color);
+			}
+		}
+
+		protected function inputFinishedHandler(event:Event):void
+		{
+			var color:uint = CSSUtils.toColorWithAlpha("#" + textInput.text);
+			((host as IStrandWithModel).model as IColorModel).color = color;
 		}
 		
 	}