Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix #217: correct input$sidebarCollapsed value for edge cases #222

Merged
merged 4 commits into from
Jun 14, 2017

Conversation

bborgesr
Copy link
Contributor

@bborgesr bborgesr commented Jun 6, 2017

Attach input$sidebarCollapsed value to the end of the sidebar transitions (instead of when the toggle button is clicked).

Repro:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(), 
  dashboardSidebar(),
  dashboardBody(
    textOutput("res")
  )
)

server <- function(input, output, session) {
  output$res <- renderText({
    if (input$sidebarCollapsed) {
      "Sidebar is collapsed"
    } else {
      "Sidebar is expanded"
    }
  })
}

shinyApp(ui, server)

@bborgesr
Copy link
Contributor Author

bborgesr commented Jun 9, 2017

@wch This is rebased, updated and tested as much as I could think of... I think we're good to merge.

srcjs/sidebar.js Outdated
// is negative. That we know of, `$(".main-sidebar").is(":visible")` is always
// true, so there is no need to check for that.
if ($(".main-sidebar").offset().left < 0) {
$(".main-sidebar").attr("data-collapsed", "true");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a little hard to follow since it sets the data-collapsed attribute directly, whereas in the sidebarChange function, it uses inputBinding.setValue(). Looking at the code, it's not obvious that they are both controlling the same thing.

Would it be possible to use the input binding here, or is this code executed too early for that to work?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's right. I tried the first approach (inputBinding.setValue()), but it's too early to call here. I managed to get it working by listening on the first shiny idle event (or something along those lines), but not only is that adding extra complexity unnecessarily, but also, and worse, the visual effect is weird if you're actually accessing that value. For example, in this app:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(), 
  dashboardSidebar(),
  dashboardBody(
    textOutput("res")
  )
)

server <- function(input, output, session) {
  output$res <- renderText({
    if (input$sidebarCollapsed) {
      "Sidebar is collapsed"
    } else {
      "Sidebar is expanded"
    }
  })
}

shinyApp(ui, server)

, you'd see the string starting off as "Sidebar is expanded" and then immediately changing to "Sidebar is collapsed."

I felt like this was okay, because (aside from the fact that shinydashboard is already full of hacks for the input bindings), we also do the exact same thing here for the selected tab item... What do you think? I could add another comment in both sections about why we have to go about this in this way.

@bborgesr bborgesr merged commit 1c5a312 into master Jun 14, 2017
@bborgesr bborgesr deleted the barbara/media branch June 14, 2017 17:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants