[BUG] Few panes in single page - pane styles bug

[spb-web]

We can try using inline styles. Then, when initializing a new pane, new "style" tags will not be created. And to apply the theme, we can use css variables. I would do it if it fits into the development plans.

[roman-rr]

@spb-web I think we can just apply additional classes for configurations.

E.g.

.cupertino-pane-wrapper .inversed .darkmode {

}

And create styles at beginning.

Feel free to create pull, i will review and adjust if needs.
And please write here or create pull with some css variables you are think good to use.

[spb-web]

@roman-rr If we use classes and “style” tags for styling, then we will have to add the removal of unused “style” tags when the panel is destroyed. It's easier for me to use inline styles. See an example of this. This is not complete code yet, but it is sufficient.

[Vishal-Isharani]

@roman-rr @spb-web I'm also facing a wired style issue, where panes styles working weirdly ( no animation or wrong opening positions ).
I have three panes on a single page, two opens from the bottom and one opens from the top ( using inverse mode ).
Ex:-
Pane a: - Open from top
Pane b: Open from bottom
Pane c: Open from bottom.

Now when you open Pane a first and then go for pane b, pane b will work weirdly, and same if you do reverse. But when you open Pane b and pane c in sequence all works fine.

After hours of debugging I found that, Cupertino creates style tags for panes and add them to the head section (which is causing issues here), and when you destroy a pane styles stays there it doesn't get removed.
So for fixing the issues I need to remove them manually. I achieved that by doing the following.

/**
     * close a pane
     * close a pane and removes it from paneMapper holder
     * @param {string} el
     */
    public close(el: string): Promise<string> {
        return new Promise((resolve, reject): void => {
            // get pane
            const pane = this.getInstance(el);
            if (pane) {
                // delete from pane mapper
                this.paneMapper.delete(el);
                // destroy pane
                pane.destroy({ animate: true });

                // let animation complete, than remove the styles
                setTimeout(() => {
                    this.removeStyles();
                    resolve('Pane removed');
                }, this._defaultSettings.animationDuration);
            } else {
                reject('Pane not found');
            }
        });
    }
    
private removeStyles(): void {
        const styles = document.getElementsByTagName('style');
        for (let i = 0; i < styles.length; i++) {
            const style = styles.item(i);
            const isCupertinoPaneStyle = style.innerHTML.trim().startsWith('.cupertino-pane-wrapper');
            if (isCupertinoPaneStyle) {
                style.parentNode.removeChild(style);
            }
        }
    }

I think @spb-web is right we can use inline-styles, which will eliminate above mentioned issue.
Thanks

[roman-rr]

@Vishal-Isharani @spb-web i will personally work on it on the next 24 hrs.

[spb-web]

@roman-rr , #134

[roman-rr]

@Vishal-Isharani Should be fixed in master branch. But in next few days will be released as 1.2.5 with variables also.

[Vishal-Isharani]

@Vishal-Isharani Should be fixed in master branch. But in next few days will be released as 1.2.5 with variables also.

That's is some quick @roman-rr,
Thanks.