Multi-Seite intro.js mit Shiny

Question

Ich versuche, ino.js Multipage-Funktionalität auf einer Shiny-App zu implementieren.

Der folgende Code ist ein Versuch, der nicht funktioniert. Die erste Registerkarte funktioniert gut, das Popup für die zweite Seite wird angezeigt, aber ohne die Registerkarte zu wechseln.

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') 

     }) 

    }) 

Die js und CSS-Dateien von intro.js sind in der js und CSS-Ordnern im Ordner www. Die intro.js Dateien können gefunden werden here

Meine Vermutung ist, dass ich etwas falsch in der Funktion in der Javascript-Code am unteren Rand von ui.R. Ich habe versucht, das Beispiel von here anzupassen, indem ich die window.location.href durch window.location.hash ersetze und die Tab-ID referenziere, die "tt" ist.

Answer 1

Hier ist die Arbeitslösung. Beachten Sie, dass Sie müssen

• Bestimmen Sie den aktuellen Schritt, um Registerkarten zu wechseln. Das Mehrseiten-Beispiel trifft hier nicht zu, da sich alle Schritte auf einer Seite befinden (mehrere Registerkarten, aber eine Seite), so dass intro.js alle Schritte anzeigt, bevor next page angeklickt wird
• Verwenden Sie JavaScript/JQuery, um das Tab-Klickereignis zu simulieren.

ui.R (server.R unverändert)

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 gab eine ausgezeichnete Antwort. Hier ist eine Version der gleichen Antwort mit 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) 

Die Tabs nicht wechseln, wenn Sie allerdings auf den ersten Schritt der Tour zurück, so dass nur der Code funktioniert geht nach vorn durch die Tour.

HINWEIS: in rintrojs Version 0.1.2.900 und höher, roh Javascript in I()