holoviz / panel

Panel: The powerful data exploration & web app framework for Python
https://panel.holoviz.org
BSD 3-Clause "New" or "Revised" License
4.79k stars 519 forks source link

Add index param to SlidesTemplate #4980

Open ahuang11 opened 1 year ago

ahuang11 commented 1 year ago

Sort of like pn.Tabs so users can click a button to go to a slide.

A workaround is shown here https://discourse.holoviz.org/t/how-to-programmatically-jump-to-next-slide-using-button/5424

        button = pn.widgets.Button(
            name="start",
            max_width=50,
            align="center",
        )
        button.js_on_click(
            code="""
            var currentDomain = window.location.href;
            var regex = /#\/slide-(\d+)/;
            var match = currentDomain.match(regex);
            if (match) {
                var slideNumber = parseInt(match[1]);
                var newSlideNumber = slideNumber + 1;
                var newPage = currentDomain.replace(regex, "#/slide-" + newSlideNumber);
                window.location.href = newPage;
            }
            """
        )
MarcSkovMadsen commented 1 year ago

Would love to be able to both get and set the index programmatically.

philippjfr commented 1 year ago

The pn.state.location component should already let you do this.

ahuang11 commented 1 year ago

Nice, it does return "#/slide-2" when calling pn.state.location.has, but I don't know if this is the proper way of updating the hash to go to the next page (the URL changes, but it doesn't go to the next slide):

import panel as pn

pn.extension()

def get_slide(event):
    # markdown.object = str({
    #     attr: str(getattr(pn.state.location, attr))
    #     for attr in dir(pn.state.location)
    # })
    markdown.object = str(pn.state.location.hash)
    pn.state.location.hash = "#/slide-2"

button = pn.widgets.Button(name="Get slide")
button.on_click(get_slide)
markdown = pn.pane.Markdown(sizing_mode="stretch_both")

template = pn.template.SlidesTemplate(
    title="Slide Template",
)
template.main.append("Hello")
template.main.append(pn.Column(button, markdown, scroll=True))
template.main.append("Next")
template.servable()