Estou tentando criar uma introdução no meu aplicativo shiny usando o rintrojs
pacote com a introjs
função. Meu objetivo é criar uma introdução onde o primeiro botão próximo seja desabilitado por 5 segundos e tenha um rótulo diferente como 'Aguarde 5 segundos...'. Atualmente, ele espera 5 segundos e muda de rótulo, mas não é desabilitado durante os 5 segundos. Então você ainda pode clicar nele. Aqui está um exemplo reproduzível:
library(shiny)
library(rintrojs)
ui <- fluidPage(
introjsUI(),
actionButton("start_intro", "Start Intro"),
h1("Welcome to the Shiny App"),
p("This is some description of the app.")
)
server <- function(input, output, session) {
steps <- reactive({
data.frame(
element = c(NA, "#start_intro"),
intro = c("Welcome to the app! This first step has a custom button.",
"This is the start button for the intro tour."),
position = c("bottom", "bottom")
)
})
observeEvent(input$start_intro, {
introjs(session,
options = list(
steps = steps(),
nextLabel = "Wait 5 seconds..."
),
events = list(
"onbeforechange" = I("
if (this._currentStep === 0) {
var that = this;
var nextButton = document.querySelector('.introjs-nextbutton');
if (nextButton) {
nextButton.innerHTML = 'Wait 5 seconds...'; // Initial label
nextButton.disabled = true; // Disable the button
}
setTimeout(function() {
that._options.nextLabel = 'next'; // Change label after 5 seconds
that._introItems[0].nextLabel = 'next';
var nextButton = document.querySelector('.introjs-nextbutton');
if (nextButton) {
nextButton.innerHTML = 'next'; // Update the label to 'next'
nextButton.disabled = false; // Enable the button after 5 seconds
}
}, 5000); // 5 seconds delay
}
")
)
)
})
}
shinyApp(ui = ui, server = server)
Saída:
Como você pode ver, ele cria o botão 'Aguarde 5 segundos...' que também é exibido por 5 segundos, mas não é desabilitado durante os 5 segundos. Então, eu estava pensando como podemos criar um botão que muda de rótulo após 5 segundos e é desabilitado durante os 5 segundos?
O primeiro problema é que
<a>
os elementos não têm umadisabled
propriedade. Segundo,nextButton
é sempreNULL
porque o html não é renderizado inicialmente - coloque umconsole.log('boop')
para ver o que quero dizer. Consequentemente, você precisa procurá-lo depois que a renderização estiver completa.Substitua isso em depois
var that = this;
: