Многостраничный сайт intro.js с Shiny

Question

Я пытаюсь реализовать многостраничную функциональность in.js в приложении Shiny.

Код ниже - попытка, которая не работает. Первая вкладка хорошо работает, отображается всплывающее окно для второй страницы, но без переключения вкладки.

ui.R

library(shiny) 


    shinyUI(tagList(
      tags$head(
        HTML("<link rel='stylesheet' type='text/css' href='css/introjs.min.css'>") 
      ), 
      navbarPage("Old Faithful Geyser Data", 




     tabPanel(id = "fTab", "First tab", 
      HTML("<h1 data-step='1' data-intro='This is a tooltip!'>Basic Usage</h1>"), 
      sliderInput("bins", 
         "Number of bins:", 
         min = 1, 
         max = 50, 
         value = 30), 

      plotOutput("distPlot"), 
      HTML("<a id='startButton' class='btn btn-large btn-success' href='javascript:void(0);'>Help</a>") 

    ), 
     tabPanel(tabName = "sTab", "Second tab", id = "tt", 
       HTML("<h1 data-step='2' data-intro='This is a second tooltip!'>Basic Usage</h1>"), 
        sliderInput("bins2", 
           "Number of bins:", 
           min = 1, 
           max = 50, 
           value = 30), 

        plotOutput("distPlot2") 
       ) 
    ), 
    HTML("<script type='text/javascript' src='js/intro.min.js'></script>"), 
    HTML("<script type='text/javascript'>document.getElementById('startButton').onclick = function() { 
     introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() { 
     window.location.hash = '#!tt?multipage=true'; 
     }); 
     };</script>") 
    )) 

server.R

library(shiny) 


    shinyServer(function(input, output) { 

     output$distPlot <- renderPlot({ 

     x <- faithful[, 2] 
     bins <- seq(min(x), max(x), length.out = input$bins + 1) 


     hist(x, breaks = bins, col = 'darkgray', border = 'white') 

     }) 
     output$distPlot2 <- renderPlot({ 


       x <- faithful[, 2] 
       bins <- seq(min(x), max(x), length.out = input$bins2 + 1) 


       hist(x, breaks = bins, col = 'darkgray', border = 'white') 

     }) 

    }) 

В JS и CSS файлы из intro.js находятся в JS и CSS папки внутри папки WWW. Файлы intro.js могут быть найдены here

Я предполагаю, что я делаю что-то неправильно в функции в коде javascript внизу ii.R. Я попытался адаптировать пример из here, заменив window.location.href на window.location.hash и ссылаясь на идентификатор вкладки, который является «tt».

Answer 1

Это рабочее решение. Обратите внимание, что вам необходимо

• Определите текущий шаг для переключения вкладок. Пример нескольких страниц здесь не применяется, так как все ваши шаги находятся на одной странице (несколько вкладок, но одна страница), таким образом, intro.js будет отображать все шаги до того, как будет нажата next page.
• Используйте JavaScript/JQuery для имитации события щелчка на вкладке.

ui.R (server.R неизменным)

library(shiny) 


shinyUI(tagList(
    tags$head(
    HTML("<link rel='stylesheet' type='text/css' href='css/introjs.min.css'>") 
), 
    navbarPage("Old Faithful Geyser Data", 
      tabPanel(id = "fTab", "First tab", 
         HTML("<h1 data-step='1' data-intro='This is a tooltip!'>Basic Usage</h1>"), 
         sliderInput("bins", 
            "Number of bins:", 
            min = 1, 
            max = 50, 
            value = 30), 

         plotOutput("distPlot"), 
         HTML("<a id='startButton' class='btn btn-large btn-success' href='javascript:void(0);'>Help</a>") 

      ), 
      tabPanel(tabName = "sTab", "Second tab", id = "tt", 
         HTML("<h1 data-step='2' data-intro='This is a second tooltip!'>Basic Usage</h1>"), 
         sliderInput("bins2", 
            "Number of bins:", 
            min = 1, 
            max = 50, 
            value = 30), 

         plotOutput("distPlot2") 
      ) 
), 
    HTML("<script type='text/javascript' src='js/intro.min.js'></script>"), 
    HTML("<script type='text/javascript'>document.getElementById('startButton').onclick = function() { 
     introJs().onchange(function(targetElement) { 
      if (this._currentStep==0) { 
      $('a[data-value=\"Second tab\"]').removeClass('active'); 
      $('a[data-value=\"First tab\"]').addClass('active'); 
      $('a[data-value=\"First tab\"]').trigger('click'); 
      } 
      if (this._currentStep==1) { 
      $('a[data-value=\"First tab\"]').removeClass('active'); 
      $('a[data-value=\"Second tab\"]').addClass('active'); 
      $('a[data-value=\"Second tab\"]').trigger('click'); 
      } 
     }).start(); 
     };</script>") 
    )) 

Answer 2

@warmoverflow дал отличный ответ. Вот вариант того же ответ, используя rintrojs:

library(shiny) 
library(rintrojs) 

ui = shinyUI(tagList(
    introjsUI(), 
    navbarPage(
    "Old Faithful Geyser Data", 

    tabPanel(
     id = "fTab", 
     "First tab", 
     introBox(
     h1("Basic Usage"), 
     data.step = 1, 
     data.intro = "This is a tooltip" 
    ), 
     sliderInput(
     "bins", 
     "Number of bins:", 
     min = 1, 
     max = 50, 
     value = 30 
    ), 

     plotOutput("distPlot"), 
     actionButton("startButton", "Help") 
    ), 
    tabPanel(
     tabName = "sTab", 
     "Second tab", 
     id = "tt", 
     introBox(
     h1("Basic Usage 2"), 
     data.step = 2, 
     data.intro = "This is a second tooltip" 
    ), 
     sliderInput(
     "bins2", 
     "Number of bins:", 
     min = 1, 
     max = 50, 
     value = 30 
    ), 

     plotOutput("distPlot2") 
    ) 
) 
)) 

server = shinyServer(function(input, output, session) { 
    output$distPlot <- renderPlot({ 
    x <- faithful[, 2] 
    bins <- seq(min(x), max(x), length.out = input$bins + 1) 


    hist(x, 
     breaks = bins, 
     col = 'darkgray', 
     border = 'white') 

    }) 
    output$distPlot2 <- renderPlot({ 
    x <- faithful[, 2] 
    bins <- seq(min(x), max(x), length.out = input$bins2 + 1) 


    hist(x, 
     breaks = bins, 
     col = 'darkgray', 
     border = 'white') 

    }) 

    observeEvent(input$startButton, { 
    introjs(
     session, 
     events = list(
     "onchange" = "if (this._currentStep==0) { 
     $('a[data-value=\"Second tab\"]').removeClass('active'); 
     $('a[data-value=\"First tab\"]').addClass('active'); 
     $('a[data-value=\"First tab\"]').trigger('click'); 
    } 
     if (this._currentStep==1) { 
     $('a[data-value=\"First tab\"]').removeClass('active'); 
     $('a[data-value=\"Second tab\"]').addClass('active'); 
     $('a[data-value=\"Second tab\"]').trigger('click'); 
     }" 
) 
    ) 

}) 

    }) 

shinyApp(ui = ui, server = server) 

Вкладка не переключается, если вернуться к первому шагу тура, хотя, так что код работает только собирается вперед через тур.

Примечание: в rintrojs версии 0.1.2.900 и выше, сырье Javascript должен быть обернут в I()