I am building an intro for a shiny app using {rintrojs}, but on the final step which involves moving from a tabPanel in one conditionalPanel into another tabPanel in a different conditionalPanel, the intro box ends up in the top left rather than on the tab, seemingly because it is not yet rendered, despite moving between the panels using onbeforechange as advised in Multi page intro.js with Shiny .
library(shiny)
library(rintrojs)
ui <- tagList(
tags$head(tags$style(HTML("h1 {font-size: 72px;} hr {height: 300px}"))),
introjsUI(),
navbarPage("Demo", id = 'tabs', windowTitle = "demo",
tabPanel(value = "fTab", "First tab"),
tabPanel(value = "sTab", "Second tab")
),
tags$div(
class = "container-fluid",
fluidRow(
wellPanel(
conditionalPanel(
"input.tabs == 'fTab'",
tabsetPanel(
tabPanel(id = "fChild1", "First child1", hr(), h1("Tab1, Child1"),
actionButton("startButton", "Help"),
),
tabPanel(id = "fChild2", "First child2", hr(), h1("Tab1, Child2")),
),
),
conditionalPanel(
"input.tabs == 'sTab'",
tabsetPanel(
tabPanel(id = "sChild1", "Second child1", hr(), h1("Tab2, Child1")),
tabPanel(id = "sChild2", "Second child2", hr(), h1("Tab2, Child2"))
)
)
)
))
)
server <- function(input, output, session) {
intro_steps <- data.frame(
element=c("a[data-value=\"sTab\"]",
"a[data-value=\"fTab\"]",
"a[data-value=\"First child2\"]",
"a[data-value=\"Second child2\"]"
),
intro=c("first thing",
"then this",
"more stuff",
"and finally")
)
observeEvent(input$startButton, {
introjs(
session,
options = list(steps=intro_steps),
events = list(onbeforechange = I("
if (this._currentStep == 0) {
$('a[data-value=\"fTab\"]').removeClass('active');
$('a[data-value=\"sTab\"]').addClass('active');
$('a[data-value=\"sTab\"]').trigger('click');
}
if (this._currentStep == 1) {
$('a[data-value=\"sTab\"]').removeClass('active');
$('a[data-value=\"fTab\"]').addClass('active');
$('a[data-value=\"fTab\"]').trigger('click');
}
if (this._currentStep == 2) {
$('a[data-value=\"First child2\"]').addClass('active');
$('a[data-value=\"First child2\"]').trigger('click');
}
if (this._currentStep == 3) {
$('a[data-value=\"fTab\"]').removeClass('active');
$('a[data-value=\"sTab\"]').addClass('active');
$('a[data-value=\"sTab\"]').trigger('click');
$('a[data-value=\"Second child2\"]').addClass('active');
$('a[data-value=\"Second child2\"]').trigger('click');
}
"))
)
})
}
shinyApp(ui = ui, server = server)