multiple panel sliding in V4 like in v3.

[4goodapp]

In jsPanel v3 home page, can V4 do those slidingbetween multiple panel?

[Flyer53]

Sure, it's just a matter of combining options animateIn, animateOut and onclosed as in the following simple example where I use the close control to slide in the next panel (animations come from animate.css):

jsPanel.create({
  theme: 'success',
  animateIn: 'animate__animated animate__bounceInLeft',
  animateOut: 'animate__animated animate__bounceOutRight',
  onclosed: () => {
    jsPanel.create({
      theme: 'primary',
      animateIn: 'animate__animated animate__bounceInLeft',
      animateOut: 'animate__animated animate__bounceOutRight',
      onclosed: () => {
        jsPanel.create({
          theme: 'warning',
          animateIn: 'animate__animated animate__bounceInLeft',
          animateOut: 'animate__animated animate__bounceOutRight'
        });
      }
    });
  }
});

Of course you can create more sophisticated behaviour with some more code depending on your intentions. Extra buttons for example to move forward and/or backward.

[4goodapp]

Hello,
sorry for the delay, It did work perfectly.
Thanks.

[Flyer53]

No problem ... in case you have more questions don't hesitate to ask ...

[4goodapp]

Thanks,
I have a few (not major) issues.
Will add more details soon.

[4goodapp]

Hello,
So here is issues I have been facing:
Sometimes I need to show multiple popups but dynamically. And based on you solution above, it will be hard to implement specially on multiple languages site.

I want integrate it on a multi language Drupal site dynamically, it’s working fine so far but based on the implementation above, I can only display one single popup/panel.

Let me know if you need more information to fix this issue

[Flyer53]

@4goodapp
Hi there ... I'm currently not at home and won't be back until the end of the month. So her'e only a short answer:
I guess you'll have to find a solution where you handle each panel individually. Meaning you have to use the various jsPanel callbacks (or actions coming from within the panel) to decide which panel/s is/are to show next based on the current state of your page.
Sorry tht I can't help more at the moment ...
Regards,
Stefan

[4goodapp]

Thanks for the response, 🙂
I think I’ll wait till you get back home,
Sounds kinda advanced 😬.

[Flyer53]

I created a simple demo with a panel slider working similar to the example on the jsPanel v3.x.x homepage. It uses only a single function to create the panels based on their ID. Based on this demo it should be possible to create multiple panel sliders. Just take a look and let me know whether it helps ...

https://alpha.jspanel.de/docs/demos/test-panelslide.html

The code I used for this:

    // all possible themes in this demo
    let panelThemes = ['default', 'primary', 'secondary', 'info', 'success', 'warning', 'danger', 'light', 'dark'];
    // will get the theme to use for a specific panel based on panel ID
    let themeToUse;
    let createNextPanel = function(panelNr){
        jsPanel.create({
            id: `panel-${panelNr}`,
            headerTitle: `Panel ${panelNr}`,
            content: '<button class="prevBtn">Previous Panel ...</button><button class="nextBtn">Next Panel ...</button>',
            animateIn: 'animate__animated animate__backInLeft',
            animateOut: 'animate__animated animate__backOutRight',
            callback: function(panel) {
                // get panel theme based on panel number
                themeToUse = panelThemes[panelNr];
                // set theme
                panel.setTheme(themeToUse);

                panel.content.getElementsByClassName('nextBtn')[0].addEventListener('click', function(){
                    panel.close();
                    // create next panel by calling createNextPanel with arg increased by 1
                    createNextPanel(++panelNr);
                });
                panel.content.getElementsByClassName('prevBtn')[0].addEventListener('click', function(){
                    panel.close();
                    // create previous panel by calling createNextPanel with arg decreased by 1
                    createNextPanel(--panelNr);
                });
            }
        });
    }

    createNextPanel('1');

Since option.content can be a function as well you can also add the content based on panel ID.

[4goodapp]

Thanks, I'll test this and let you know.