Best way to add picker to page body?

[YuriGor]

Hi, very cool picker, thank you!
Please help - I want to create the picker at the top level of DOM-tree and show/hide it dynamically when the user clicks one of the sub-elements on the page.
Can I do it?
I want picker to be passive, so it will not listen for clicks, and also I want to position it absolutely, depending on which element was clicked.

I tried to create picker instance on click, then use method 'show', and then destroy it onDone.

But currently, the picker tries to add itself as a child of a clickable element, but this absolutely doesn't work in my case, because the parent element is overflow: hidden and also heavy CSS applied in the area of this element, so picker gets very distorted. (I have an editable tree of properties, and some of these properties are colors)

So, if I will create picker instance with body parent - can I control somehow it's revealing position?

[Sphinxxxx]

Well, let's see..

One way to do that would be to set popup in the options (e.g. popup: 'my-placement'), which adds a popup_my-placement class to the picker to use for positioning. Then we can hijack the picker's openHandler() method, decide whether to display the picker, and update our custom .popup_my-placement CSS with the correct position.

JSFiddle example

[YuriGor]

Super cool, thank you, looks like exactly what I need, I am sad I can't put second star to the project.
Do you want such an option out of the box?
I think it's a much safer approach in order to not break complicated page layout..

• separate parent container for rendering from triggering element
• let specify triggering element(s) as a Node(s) or class name or function
• let specify position of popup (of it's callout corner) by parent's / trigger's center/side/corner
• optionally try to align callout automatically depemding on free space on the screen

[YuriGor]

Sorry, closed accidentally.
If interested - I can try do some PR for this.

[Sphinxxxx]

Thanks! Those are all good requirements for a "version 3", but I think I want to keep the project as-is for now.

(But if you end up making those changes anyway, please let me know :) )

[YuriGor]

Ok, let's see if I will have good generic solution based on your fiddle (and will have some free time)

[YuriGor]

I refactored your example a bit in a more reusable manner:
https://gist.github.com/YuriGor/c413b6d5b6e82554b8a37400a8f6580e
Maybe you will consider adding something like this function because it's self-sufficient and requires no changes in the existing code.
It's missing all those cool features I promoted above, but it's still useful.

[YuriGor]

Let me please settle here, in this closed issue, to not open multiple new issues for each question.

I updated gist - it now supports options, and also supports popup: top|right|bottom|left.
next will be an auto-positioning feature, also on wrapper function level.
I feel it will finally go to a fully-featured GitHub project and will live there until you decide to integrate it into picker)

But I've noticed some feature is broken a bit:
In normal use case if the picker is partially hidden by the bottom edge of the browser - the page is got scrolled to show it better. Could you please point me into this feature implementation in your code? I cannot find it.

In my case page is not scrollable - so only the picker jumps up, but everything remains on its positions, so I'd like to investigate it and maybe workaround.

[Sphinxxxx]

Strange.. There is no auto-scrolling feature in the code, but what you're seeing is probably when the picker DOM element is focus()-ed (happens in openHandler()). That will cause the browser to automatically scroll it into view.

[YuriGor]

Ok, thanks, so I need just implement auto-positioning, then such case will (should) not happen.

[YuriGor]

Look ma, auto-positioning!
Gist updated.
Now popup option, passed into this wrapper function, can be'auto' (by default) or an array of allowed positions ordered by desired priority.
'auto' will be replaced by ['right', 'left', 'bottom', 'top']

Note for @Sphinxxxx - picker doesn't update popup setting changed via setOptions method,
I had to call show method after each setOptions.
So you can check inside setOptions if popup was changed then do the same inside.

[YuriGor]

Updated gist to fix #26 until PR is not merged