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 <[email protected]>
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;
                }
                
        }

Reply via email to