Auto-Placement 2

[eltoredo]

Hello,

I am allowing myself to open a new issue in case a message on a closed thread would not notify you.
I have the exact same issue as #8 and I would like to know if it is possible today to fix that problem?
In my case, I have different panels with the possibility to change elements' colors and those panels have a scroll bar because of their size. That's why the color picker is halfway in the panel and hidden.

Thanks for your answer!

[Sphinxxxx]

One way would be to hijack the picker's openHandler() method and adjust the settings.popup keyword (top/bottom/left/right) to what fits better before actually opening the popup. Here is an example that just picks a random position:

const picker = ...

picker.__originalOpenHandler = picker.openHandler;
picker.openHandler = function(e) {
    const randomPlacement = ['top', 'bottom', 'left', 'right'][Math.floor(Math.random() * 4)];
    this.settings.popup = randomPlacement;
    
    this.__originalOpenHandler();
};

For a more advanced example, please see #24 which deals with something similar.

[YuriGor]

oh noes, writing to the wrong chat. Comment moved to #24

[eltoredo]

This is what looked like my problem, with the default positiojn of the picker: https://imgur.com/NjzRDOm
And your answer helped me to find a really easy solution, which was to change the default position from right to top, which makes the picker to fit my panel: https://imgur.com/tid1KQJ
But I would have loved to have this exact behaviour in all of my panels, disregarding the scrolling bar: https://imgur.com/le11kRc

I have initialized a bunch of pickers and this is what one of them looks like, with your solution:

$('#blkbc').click(function() {
    let parent = document.querySelector('#attach-lcp2');
    let picker = new Picker(parent);

    // picker.openHandler();

    picker.__originalOpenHandler = picker.openHandler;
    picker.openHandler = function(e) {
        this.settings.popup = 'top';
        
        this.__originalOpenHandler();
    };

    picker.onClose = function(color) {
        picker.destroy();
    };

    picker.onDone = function(color) {
        for (let i = 0; i < templateJson.blocks[rowId].columns[colId].navitems.length; i++) {
            if (templateJson.blocks[rowId].columns[colId].navitems[i].id == lastElementIdClicked) {
                templateJson.blocks[rowId].columns[colId].navitems[i].css.backgroundcolor = color.rgbaString;
            }
        }

        $('#'+lastElementIdClicked).css('background-color', color.rgbaString);

        save();
    };
});

I create the picker when I click a special button and destroy it when it's closed, whether the button close was clicked or not, I change the UI and save it in a JSON.

Anyway, thanks a lot because it's fixed but if never a solution to have the same behaviour in screen 1 as in screen 3, hit me up :D

[Sphinxxxx]

A couple of tips:

1. If you simply want all your pickers in the top position, you don't need to mess with openHandler(). Just pass the position in the options when you create a picker:

      let picker = new Picker({
          parent: parent,
          popup: 'top',
      });

2. To get the behavior in screen 3, see the solution for #24. In short, you use the page body as parent and move the picker around using a custom CSS class.

[eltoredo]

Oh, I get it, thanks for your help!