draggable tool-box button using the directional pop-up button

As promised at the previous post, here is how i used the PopUpButton that can position its pop up.
I have a “tool box” button that can be dragged around, but it is restrained to stick to the borders of the container.
Depending on which side this tool-box-button is residing i determine its pop up opening direction.

Inside the tool-box itself the”full screen”, “legend” and slider works and manipulate the chart.

(i really liked this restrained dragging).

Demo is here (right click for source)
Source is here

popupbutton that opens in all directions

I find the PopUpButton to be a very useful component, and I think it is underrated. Thus it is rarely used by developers/designers.
A PopUpButton can open any UIComponent by a simple click of a button, it saves the developer the hassle of dealing with the PopUpManager and locating the pop-up at the exact point to match it opener.
Try it; it is really a great component.

What I lack in this PopUpButton is the ability to open the pop-up in all directions.
Actually it can open its pop-up only in one direction – downward.

Introducing my PopUpButtonPositioned!

I borrowed all the functionality, logic, events, styles, etc… from the original PopUpButton.
Deleted some stuff I didn’t need, added some new code to handle the positioning.
And most important – I have added a new property called popUpPosition.

Depending on the string given to popUpPosition (bottom,top,left,right) the pop-up will open at any direction!

It will also always stay in view, meaning that if in its opened position the pop-up could get out of view and be clipped it will open itself to the opposite side.

On the next post I will show what I used it for.

Demo is here (right click for source)
Source is here