Я хочу добавить в мое приложение 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);
});
});
Но я столкнулся с двумя проблемами:
collapseStatus
переменная NaN
- почему? Команда $('.main-sidebar.shiny-bound-input').attr("data-collapsed")
возвращает значение true/false
.
Функция $('.main-sidebar.shiny-bound-input').change(function() { ...
не срабатывает при сворачивании боковой панели. Это странно, потому что когда вы копируете и вставляете код JS в консоль веб-браузера, он срабатывает.