R Shiny авторазмера wellPanel с использованием JavaScript - PullRequest
0 голосов
/ 10 мая 2018

Я хочу добавить в мое приложение Shiny значение float wellPanel, которое изменяется при свертывании боковой панели shinydashboard. Я подготовил MWE:

app.R:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    sidebarMenu(
    # Setting id makes input$tabs give the tabName of currently-selected tab
    id = "tabs",
    menuItem(
      "Dashboard",
      tabName = "dashboard",
      icon = icon("dashboard")
    )
  )),
  dashboardBody(
    tags$head(tags$script(src = "resize.js")),
    div(
      id = "myPanel",
      style = "left:0px; right:0px; bottom:0px; position:fixed; cursor:inherit; z-index: 10000;",
      wellPanel(id = "myWellPanel",
        style = "padding: 8px; border-bottom: 1px solid #CCC; background: #FFFFEE;",
        HTML("Save changes?"),
        actionButton("save", "Save"),
        actionButton("cancel", "Cancel")
      )
    )
    )
  )

server <- function(input, output) {

}

shinyApp(ui, server)

www/resize.js:

function resizeWellPanel(collapsed) {
    console.log('Resizing wellPanel');
    var itemWidth = $('#tabs').width();
    var availWidth = $(window).innerWidth();
    var difference = availWidth - itemWidth;
    console.log('itemWidth: ' + itemWidth + '; availWidth: ' + availWidth + '; difference: ' + difference);
    el=$('#myWellPanel');
    if (collapsed == "true") {
      console.log("is collapsed: " + collapsed);
      $('#myWellPanel').css('margin-left', 2 + 'px');
      el.innerWidth(availWidth - 2); // set width depending on sidebar
    } else if (collapsed === false) {
      console.log("is collapsed: " + collapsed);
      el.innerWidth(difference); // set width depending on sidebar
      $('#myWellPanel').css('margin-left', 2 + itemWidth + 'px');
    } else {
        throw new Error('Did nothing');
   }
}

$(document).ready(function() {
  collapseStatus = $('.main-sidebar.shiny-bound-input').attr("data-collapsed");
  console.log("collapseStatus: ", + collapseStatus);
  resizeWellPanel(collapseStatus);

  $('.main-sidebar.shiny-bound-input').change(function() {
    collapseStatus = $(this).attr("data-collapsed");
    setTimeout(function(collapseStatus) {
      resizeWellPanel(collapseStatus);
    }, 500);
  });
});

Но я столкнулся с двумя проблемами:

  1. collapseStatus переменная NaN - почему? Команда $('.main-sidebar.shiny-bound-input').attr("data-collapsed") возвращает значение true/false.

  2. Функция $('.main-sidebar.shiny-bound-input').change(function() { ... не срабатывает при сворачивании боковой панели. Это странно, потому что когда вы копируете и вставляете код JS в консоль веб-браузера, он срабатывает.

enter image description here

...