Avg. Rating 5.0

Problem

The default Hallo skin doesn't allow background-position-ing

Solution

Subclass the HaloBorder to add desired functionality

Detailed explanation

the CSS:

Box{

    border-skin:ClassReference('ro.huddle.skins.hallo.HalloBorderWithImagePositioning');
    background-image:Embed('/assets/browser_footer.jpg');
    background-position:left,bottom;
}

the HalloBorderWithImagePositioning class:

package ro.huddle.skins.hallo
{
    import flash.display.DisplayObject;
    import flash.display.Shape;
   
    import mx.core.EdgeMetrics;
    import mx.core.IChildList;
    import mx.core.IContainer;
    import mx.core.IRawChildrenContainer;
    import mx.skins.halo.HaloBorder;

    public class HalloBorderWithImagePositioning extends HaloBorder
    {
       
         override public function layoutBackgroundImage():void{
             super.layoutBackgroundImage();
             if(!hasBackgroundImage) return;
            
             var style:Object = getStyle("backgroundPosition");
             // the default alignment is center center
             if(!(style is Array) || (style[0]=='center' && style[1]=='center')) return;
             var posHorizontal:String = style[0];
             var posVertical:String = style[1];
            
             var p:DisplayObject = parent;
             var bm:EdgeMetrics = p is IContainer ?
                             IContainer(p).viewMetrics :
                             borderMetrics;
            var childrenList:IChildList = parent is IRawChildrenContainer ?
                                         IRawChildrenContainer(parent).rawChildren :
                                         IChildList(parent);            
            
             var backgroundImage:DisplayObject = childrenList.getChildAt(1);

            // default position is center center, or middle,middle
            var bgX:int = backgroundImage.x;
            var bgY:int = backgroundImage.y;
           
            if(posHorizontal == 'left') bgX = bm.left;
            if(posHorizontal == 'right') bgX = p.width-bm.right-backgroundImage.width;
           
            if(posVertical == 'top') bgY = bm.top;
            if(posVertical == 'bottom') bgY = p.height-bm.bottom-backgroundImage.height;
            
             backgroundImage.x = bgX;
            backgroundImage.y = bgY;

            const backgroundMask:Shape = Shape(backgroundImage.mask);
            backgroundMask.x = bgX;
            backgroundMask.y = bgY;
         } 
       
    }
}

 

Report abuse

Related recipes