r - 转到下一个和上一个 tabItem Shiny 的通用按钮

Question

我知道这与之前提出的问题非常接近，但是在对这些示例进行彻底研究后，我还没有找到解决我的特定问题的方法。

我有一个 Shiny 的应用程序，使用具有这种结构的 Shiny 仪表板 (*1)。我可以通过这种方式制作下一页或上一页按钮:

next_btn        <-    actionButton(   inputId ="Next1", 
                                      label = icon("arrow-right"))

与观察员:

  observeEvent(input$Next1, {
    updateTabItems(session, "tabs", "NAME")
  })               

其中 NAME 是 tabItem ID。这个版本比我发现的使用 switch 和或只是 Navigate to particular sidebar menu item in ShinyDashboard? 的示例简单

但是，这只适用于使用特定按钮从 pagename1 切换到 pagename2。

但是，我的应用程序中有 10-20 个 tabItems:** <<- 我的问题的原因**

提到的方法需要我为每个页面编写一个 actionbutton(next1, ... ac but next 2 , next 3 etc. 1 ，并且每个页面都有一个单独的观察者。

我想要做的是:

1 个名为“NEXTPAGE”的通用操作按钮
与执行 updateTabItems(session, tabs, "current page +1"

到当前页面 +1 以任何方式我迷路了。我可以想象制作所有选项卡名称的列表参数，在该列表中找到当前选项卡名称，捕获它的位置，例如向上(上一个)或向下(下一个)移动一个位置。
但是，除了一些非常费力的手动输入字符串列表之外，我不知道如何获取我的应用程序中存在的所有 tabItems 的列表变量。

*1 应用程序结构:

library(shiny)
library(shinydashboard)

### create general button here like: 
### write a function that looks at what (nth) tabItem we are, and creates a ###  uiOutput for a next_n button (I can do this myself I think) 

dashboardHeader(title = "FLOW C.A.R.S."),
  dashboardSidebar(
    sidebarMenu(id = "tabs",
                menuItem("Home", tabName = "Home", icon = icon("home")),
                menuItem("My Page", tabName = "MyPage", icon =icon("download")),
                menuItem("Do math", tabName = "Math", icon=icon("folder-open")),
                menuItem("Results of something", tabName="Results", icon= 
 icon("file-text-o")),
              menuItem("Short Manual", tabName = "Manual", icon = icon("book"))
                )
    ),

  dashboardBody(
   tabItems(
    tabItem(tabName = "Home",  class = 'rightAlign',
    actionButton(   inputId ="Next1", label = icon("arrow-right"))),

    tabItem(tabName = "MyPage",  class = 'rightAlign',
    actionButton(   inputId ="Next2", label = icon("arrow-right")),
    actionButton(   inputId ="Previous2", label =  icon("arrow-left"))), 

    tabItem(tabName = "Math",  class = 'rightAlign',
    actionButton(   inputId ="Next3", label = icon("arrow-right")),
    actionButton(   inputId ="Previous3", label =  icon("arrow-left"))), 

    tabItem(tabName = "tabName",  class = 'rightAlign',
    actionButton(   inputId ="Next4", label = icon("arrow-right")),
    actionButton(   inputId ="Previous4", label =  icon("arrow-left"))), 

    tabItem(tabName = "Maual",  class = 'rightAlign',
    actionButton(   inputId ="Previous5", label =  icon("arrow-left")))
    ))


server: 

shinyServer = function(input, output, session) {


  observeEvent(input$Next1, {
    updateTabItems(session, "tabs", "MyPage)
  })

observeEvent(input$Previous2, {
    updateTabItems(session, "tabs", "Home")
  })

observeEvent(input$Next2, {
    updateTabItems(session, "tabs", "Math)
  })

 ### repeat for next2 and previous 2 , 3 etc 

}

总结，我正在寻找一个代码，它将为我们提供当前选项卡之前的选项卡名称，以便我们可以将该查询的结果填充到 updateTabItems(session, "tabs"...... .)

这样我们就可以做一个更一般的观察者，例如；

如果单击 Next[i] 按钮转到 tabItem[i+1]

但就像我说的，我可以想象自己编写这样的代码，前提是我知道如何使用函数访问 tabItems 列表(显然我在 ui 页面中有名称，因为我标记了所有名称，但我正在尝试通过为每个页面/按钮/观察者键入所有代码来避免所有冗余代码重复)

到目前为止我发现的唯一一件事是观察者内的 paste(input$tabs) 会给你当前的标签，但是然后......

感谢安妮的帮助!

如果不清楚，请随时与我联系

Answer 1

正如我在评论中所写:
最简单的方法是确保重写代码并拥有一个数组:tabItemNames = c("Home", "MyPage",....)，然后相应地将选项卡命名为 tabItem(tabName = tabItemNames[1],...) 、 tabItem(tabName = tabItemNames[2],... 等。我不会称其为代码的冗余重复，...(另请参阅本杰明的回答。

但是，我很欣赏 JS 挑战并尝试了一下:
您可以使用 JS 来读取 tabItemNames。这将满足不必在代码中对它们进行硬编码的额外要求。

  observe({
    runjs("
      function getAllElementsWithAttribute(attribute){
         var matchingElements = [];
         var allElements = document.getElementsByTagName('*');
         for (var i = 0, n = allElements.length; i < n; i++){
            if (allElements[i].getAttribute(attribute) !== null){
               matchingElements.push(allElements[i]);
            }
         }
         return matchingElements;
      };

      ahref = getAllElementsWithAttribute('data-toggle');
      var tabNames = [];
      var tabName = '';
      for (var nr = 0, n = ahref.length; nr < n; nr++){
         tabName = ahref[nr].hash.split('-')[2]
         if(tabName != 'Toggle navigation') tabNames.push(tabName)
      }
      Shiny.onInputChange('tabNames', tabNames);
      ")
  })

我假设您没有任何具有“数据切换”属性的其他元素。如果这不能满足，则必须在代码中集成更多条件。

在下面的运行示例中，通过上面的代码结合 Benjamin 提供的代码构建:

library(shiny)
library(shinydashboard)
library(shinyjs)

app <- shinyApp(
  ui = 
    dashboardPage(
      dashboardHeader(title = "FLOW C.A.R.S."),
      dashboardSidebar(
        useShinyjs(),
        sidebarMenu(id = "tabs",
                    menuItem("Home", tabName = "Home", icon = icon("home")),
                    menuItem("My Page", tabName = "MyPage", icon =icon("download")),
                    menuItem("Do math", tabName = "Math", icon=icon("folder-open")),
                    menuItem("Results of something", tabName="Results", icon= 
                               icon("file-text-o")),
                    menuItem("Short Manual", tabName = "Manual", icon = icon("book"))
        )
      ),

      dashboardBody(
        actionButton(inputId ="Previous", label = icon("arrow-left")),
        actionButton(inputId ="Next", label = icon("arrow-right"))
      )
    ),

  server = 
    shinyServer(function(input, output, session){
      global <- reactiveValues(tab_id = "")
      tab_id <- c("Home", "MyPage", "Math", "Results", "Manual")

      Current <- reactiveValues(
        Tab = "Home"
      )

      observeEvent(
        input[["tabs"]],
        {
          Current$Tab <- input[["tabs"]]
        }
      )

      observeEvent(
        input[["Previous"]],
        {
          tab_id_position <- match(Current$Tab, input$tabNames) - 1
          if (tab_id_position == 0) tab_id_position <- length(input$tabNames)
          Current$Tab <- input$tabNames[tab_id_position]
          updateTabItems(session, "tabs", input$tabNames[tab_id_position]) 
        }
      )

      observeEvent(
        input[["Next"]],
        {
          tab_id_position <- match(Current$Tab, input$tabNames) + 1
          if (tab_id_position > length(input$tabNames)) tab_id_position <- 1
          Current$Tab <- input$tabNames[tab_id_position]
          updateTabItems(session, "tabs", input$tabNames[tab_id_position]) 
        }
      )

      observe({
        runjs("
          function getAllElementsWithAttribute(attribute){
             var matchingElements = [];
             var allElements = document.getElementsByTagName('*');
             for (var i = 0, n = allElements.length; i < n; i++){
                if (allElements[i].getAttribute(attribute) !== null){
                   matchingElements.push(allElements[i]);
                }
             }
             return matchingElements;
          };

          ahref = getAllElementsWithAttribute('data-toggle');
          var tabNames = [];
          var tabName = '';
          for (var nr = 0, n = ahref.length; nr < n; nr++){
             tabName = ahref[nr].hash.split('-')[2]
             if(tabName != 'Toggle navigation') tabNames.push(tabName)
          }
          Shiny.onInputChange('tabNames', tabNames);
          ")
      })


    })
)

runApp(app, launch.browser = TRUE)

用于读取我从这里使用的元素的 javascript 函数: Get elements by attribute when querySelectorAll is not available without using libraries?