How to check if mouse click was inside an element - actionscript-3

What is the code to check if mouse is clicked inside a child element when the click event is for parent element. I need to differentiate to perform certain tasks only if the click is inside the child element. What kind of propagation happens in flex? I am bit new to this.
I have a video player with video display and video controls bar. I register click event for video player which occupies the full screen. On click the controls bar should toggle (as programmed) which it does, but on clicking any element in the control bar the entire bar dissapears.
<!-- Player Container -->
<s:BorderContainer width="100%" height="100%"
backgroundAlpha="0"
borderVisible="false">
<s:VideoPlayer id="vid_player"
width="100%" height="100%"
verticalCenter="0"
horizontalCenter="0"
skinClass="Skins.VideoPlayerSkin"
maintainProjectionCenter="true"
mouseDown="hideControls(event)"
autoPlay="true" source="{current_video.getSource()}"/>
</s:BorderContainer><!-- Player Container -->
public function hideControls(event:Event):void {
hidePlaylist();
toggleElem(header);
toggleElem(sec_drop_container);
toggleVideoPlayer();
}
public function toggleVideoPlayer() {
var controls:Object = vid_player.videoDisplay.parent.getChildAt(1);
if(controls.visible)
controls.visible=false;
else
controls.visible = true;
}

Probably the simplest way is:
private function mouseHandler(event:MouseEvent/*was e:MouseEvent*/):void {
whateverObject.hitTestPoint(event.stageX, event.stageY, false); // use shape flag is 3rd argument
}

Related

Making Materialize CSS Tooltips stay when hovering over them

A piece I'm currently working on is calling for tooltips that display when you hover over part of an SVG element, disappear as normal on mouse-out but providing the mouse does not go over the tooltip itself. We are using Materialize CSS which does come with a tooltip component.
A segment of my code is below.
<svg width="400" height="400">
<rect x="190" y="255" width="70" height="25" class="fixture good tooltipped" id="ines" data-position="top" data-delay="50" data-tooltip="Carbonated Drinks<br><a href='#'>View More</a>"" data-html="true"/>
</svg>
As you can see, the reason I want this is so that the user can click the 'View more' link if they mouse onto the actual tooltip. Currently, however, the tooltips disappear even if you mouse onto them.
I know this can be done with other frameworks/libararies, but I have been unable to do this in Materialize CSS so far.
Does anyone know if this is possible as an extensive internet search has turned up nothing.
Materialize tooltip assign a "mouseleave.tooltip" event handler for each involved dom node.
This event is triggered as soon as you will leave the dom element, and after 225 milliseconds (for details refer to source code) the tootip will be hidden.
Moreover, the tooltip has the style pointer-events equal to none: no mouse event can be triggered, so your anchor will be never clickable.
In order to overcome all these steps a possibility is:
save the jQuery mouseout event object
remove the previous object from the jQuery handlers so no mouseleave.tooltip can be triggered.
handle the jQuery hover event for each tooltip (having class: material-tooltip): this to save a property in order to test against the mouse position in or out the tooltip
on mouseenter for your element set the pointer-events to default auto
in the same way on mouseleave set a timeout less than 225 milliseconds in order to test if the mouse is over the tooltip: if not execute the standard jQuery materialize mouseleave.tooltip event
on mouseleave the tooltip do the same step in the previous point.
The snippet (jsfiddle):
$(function () {
var x = jQuery._data( document.getElementById('ines'), "events" )['mouseout'][0];
delete jQuery._data( document.getElementById('ines'), "events" )['mouseout'];
$('.material-tooltip').hover(function(e) {
$(this).attr('hover', 1);
}, function(e) {
$(this).attr('hover', 0);
x.handler.apply( document.getElementById('ines'), x);
});
$('#ines').on('mouseenter', function(e) {
$('.material-tooltip:visible').css('pointer-events', 'auto');
}).on('mouseleave', function(e) {
setTimeout(function() {
var val = $('.material-tooltip:visible').attr('hover');
if (val == undefined || val == 0) {
x.handler.apply( document.getElementById('ines'), x);
}
}, 150);
})
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<svg width="400" height="400">
<rect x="190" y="155" width="70" height="25" class="fixture good tooltipped" id="ines" data-position="top"
data-delay="50" data-tooltip="Carbonated Drinks<br><a href='#'>View More</a>"
data-html="true"/>
</svg>

AS3 TextArea click handling

I am having trouble with handling a click event on a TextArea. I'm developing a mobile app using Flash Mobile. I would like to display a default text in the area and make it disappear when the user selects the field.
The issue is, that the event is thrown only when I click on the border of the TextArea. It never happens when a selection cursor is active. I also tried to add a false editable property to notesInput and set it to true in the handler and it didn't help.
private function notesClickHandler(event:Event):void{
notesInput.text = "";
notesInput.removeEventListener(MouseEvent.CLICK, notesClickHandler);
form.invalidElements;
}
<TextArea id="notesInput" text="Poznámky.."
height="150" width="100%"
verticalScrollPolicy="auto"/>
Thank you guys for your time and your help.
You can use prompt text which will fulfill your requirement:
<s:TextArea id="notesInput"
prompt="Default Text"
height="150" width="100%"
verticalScrollPolicy="auto"/>
It will not clear the default text when you focus in. But you can make that happen by clearing prompt text when you focus in the TextArea.
<fx:Script><![CDATA[
private function onFocusIn():void
{
notesInput.prompt = "";
}
private function onFocusOut():void
{
notesInput.prompt = "Default Text";
}
]]></fx:Script>
<s:TextArea id="notesInput"
prompt="Default Text"
height="150" width="100%"
verticalScrollPolicy="auto"
focusIn="onFocusIn()"
focusOut="onFocusOut()"/>
For that you can use an focusIn event like this :
private function text_area_focusInHandler(event:FocusEvent):void
{
text_area.text = ''
}
<s:TextArea id="text_area" x="10" y="10" focusIn="text_area_focusInHandler(event)" text="default text"/>

Flex ItemRenderer: rendering the source item of a drag

When an item is being dragged from/within a list in the default implementation, it is shown as selected during the drag (and a separate item renderer, in dragging state, is shown as the drag image), so:
<s:ItemRenderer>
<s:Label text="{data}" color.selected="0xFF0000" color.dragging="0x00FF00" />
</s:ItemRenderer>
renders as:
Is there a straightforward way to change the state of the source of the drag (the red, selected, "Bar") to something other than "selected" for the duration of the drag?
In the ideal, I would add color.dragSource="0x0000FF" to the item renderer code above, and "Bar" would be red while selected, but blue once the dragging had begun. When the drag was complete, it would revert to red (or, if no longer selected, black).
What if you did an eventListener on drag start that set the selected item in the list to -1? -1 says that nothing should be selected.
Edit: added below code to support:
<s:List id="myList" dragStart="startDrag(event)"/>
private var dragIndex:int;
private function startDrag(e:Event):void
{
dragIndex = myList.selectedIndex;
myList.selectedIndex = -1;
}
private function stopDrag(e:Event):void
{
myList.selectedIndex = dragIndex;
}

Scroller not shown Flex 4 with VGroup

I am creating one application. In that There is one popup, in that I had used one VGroup in one Scroller.
I am dynamically adding my custom components in VGroup and removing all components at the closing of the popup and saves those components in Memory Pool.
In First step, I open a popup with numbers of components by that scroll bar appears.
Then I close the popup.
In second step, I opens a same popup instance with some less components so scroll bar does not appears and close the popup.
And now when I open popup with more components again scrollbar not appears.
So whenever popup is once opend with less components, scrollbar disappears.
Pls help me...
Here is the full code :
<s:Scroller id="myScroller"
width="100%"
height="210"
horizontalScrollPolicy="off">
<s:VGroup id="myContainer"
width="100%"
height="210" />
</s:Scroller>
Code for Adding Components :
for each(var object:MyObject in _arr)
{
var newView:MyCustomView = MyCustomViewPool.acquire();
myContainer.addElementAt(newView, 0);
newView.myData = object;
}
Here is the code for removing components :
for(var i:int = 0; i < myContainer.numElements; i++)
{
var newViewElement:IVisualElement = myContainer.getElementAt(i);
var myViewComponent:MyCustomView = newViewElement as MyCustomView;
MyCustomViewPool.release(myViewComponent);
}
myContainer.removeAllElements();
I think you don't have to set the hight on the VGroup. Just remove the assignment.

Flex 4 spark Panel has an ugly gray top part

I have a Flex 4 spark Panel I'm popping up through the PopUpManager, but it has a gray portion at the top I can't get rid of. What is that and how can I remove it?
UPDATE: An example Panel is below. I simply call PopUpManager.addPopUp(new TestPanel(), background, true); on it and receive that solid gray bar above the button.
<s:Panel xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009"
dropShadowVisible="false"
backgroundAlpha="0"
controlBarVisible="false"
borderVisible="false">
<s:VGroup>
<s:Button label="A button" width="150" height="55"/>
</s:VGroup>
</s:Panel>
So, this is how I did it. I made a custom skin: HeaderlessPanelSkin.as
public class HeaderlessPanelSkin extends PanelSkin {
public function HeaderlessPanelSkin() {
super();
topGroup.includeInLayout = false;
}
}
Then, in the panel, I just reference the new skin: skinClass="HeaderlessPanelSkin"
That should do it :)
Create new skin, and in the panel declaration use it... like so
File->New MXML Skin, Host Component is panel.
Edit the Skin properties to change it how you like, in this case the gradient colors on the header.
Sounds like the Panel TitleBar
Create a custom skin and style the title bar how you want it to appear.