diff --git a/R/PrettyShinyDisconnectHandler.R b/R/PrettyShinyDisconnectHandler.R new file mode 100644 index 0000000..dca0a78 --- /dev/null +++ b/R/PrettyShinyDisconnectHandler.R @@ -0,0 +1,46 @@ + +#' Replaces the standard shiny disconnect handler with a banner +#' +#' @return The disconnect handler +#' @export +#' +#' @examples +#' x <- shiny::fluidPage(useBannerDisconnectHandler()) +#' shiny::shinyApp(x, function(...) { stop("Server stop") }) +useBannerDisconnectHandler <- function() { + if (getOption("shiny.minified", TRUE)) { + js <- "bannerDisconnectHandler.min.js" + css <- "bannerDisconnectHandler.min.css" + } else { + js <- "bannerDisconnectHandler.js" + css <- "bannerDisconnectHandler.css" + } + + sdoTags <- htmltools::tagList( + htmltools::tags$div( + id = "sdo-disconnected-dialog", + style = "display: none;", + "Your session has timed out.", + htmltools::tags$br(), + "Please refresh the page to continue.", + htmltools::tags$br(), + htmltools::tags$a( + id = "sdo-reload-link", + href = "#", + onclick = "window.location.reload(true);", + "Refresh now" + ) + ), + htmltools::tags$div(id = "sdo-overlay", style = "display: none;") + ) + sdoDeps <- list( + htmltools::htmlDependency( + "AVSDevR.ShinyDisconnectHandler", + as.character(utils::packageVersion("AVSDevR.ShinyDisconnectHandler")), + c(file = system.file(package = "AVSDevR.ShinyDisconnectHandler")), + script = js, + stylesheet = css + ) + ) + htmltools::attachDependencies(sdoTags, sdoDeps) +} diff --git a/inst/bannerDisconnectHandler.css b/inst/bannerDisconnectHandler.css new file mode 100644 index 0000000..78486dc --- /dev/null +++ b/inst/bannerDisconnectHandler.css @@ -0,0 +1,62 @@ +#shiny-disdisconnecteded-overlay { + display: none !important; +} + +#sdo-overlay { + overflow: hidden !important; + cursor: not-allowed !important; + + background-color: #999999 !important; + opacity: 0.7 !important; + + position: fixed !important; + top: 0 !important; + left: 0 !important; + bottom: 0 !important; + right: 0 !important; + + z-index: 99998 !important; +} + +#sdo-disconnected-dialog { + border-radius: 3px !important; + box-shadow: rgba(0, 0, 0, 0.3) 3px 3px 10px !important; + + background: rgba(64, 64, 64, 0.9) !important; + color: #FFFFFF !important; + opacity: 1 !important; + + text-align: center !important; + font-size: 50px !important; + + position: fixed !important; + top: 50% !important; + left: 50% !important; + bottom: auto !important; + + height: auto !important; + width: 100% !important; + + padding: 0.8em 1.5em !important; + + transform: translateX(-50%) translateY(-50%) !important; + + z-index: 99999 !important; +} + +#sdo-disconnected-dialog label { + display: none !important; +} + +#sdo-disconnected-dialog a { + display: 'block' !important; + color: #337ab7 !important; + font-size: 50 !important; + font-weight: normal !important; + margin-top: 70px !important; +} + +#sdo-disconnected-dialog { + padding: 15px !important; + box-shadow: none !important; +} \ No newline at end of file diff --git a/inst/bannerDisconnectHandler.js b/inst/bannerDisconnectHandler.js new file mode 100644 index 0000000..ce8c396 --- /dev/null +++ b/inst/bannerDisconnectHandler.js @@ -0,0 +1,9 @@ +$(function() { + $(document).on('shiny:disconnected', function(event) { + $('#sdo-disconnected-dialog').show(); + $('#sdo-overlay').show(); + if (window.modifiedHandler) { + modifiedHandler(false); + } + }); +}); diff --git a/inst/bannerDisconnectHandler.min.css b/inst/bannerDisconnectHandler.min.css new file mode 100644 index 0000000..6ed6cb3 --- /dev/null +++ b/inst/bannerDisconnectHandler.min.css @@ -0,0 +1 @@ +#shiny-disdisconnecteded-overlay{display:none !important}#sdo-overlay{overflow:hidden !important;cursor:not-allowed !important;background-color:#999 !important;opacity:.7 !important;position:fixed !important;top:0 !important;left:0 !important;bottom:0 !important;right:0 !important;z-index:99998 !important}#sdo-disconnected-dialog{border-radius:3px !important;box-shadow:rgba(0,0,0,0.3) 3px 3px 10px !important;background:rgba(64,64,64,0.9) !important;color:#fff !important;opacity:1 !important;text-align:center !important;font-size:50px !important;position:fixed !important;top:50% !important;left:50% !important;bottom:auto !important;height:auto !important;width:100% !important;padding:.8em 1.5em !important;transform:translateX(-50%) translateY(-50%) !important;z-index:99999 !important}#sdo-disconnected-dialog label{display:none !important}#sdo-disconnected-dialog a{display:'block' !important;color:#337ab7 !important;font-size:50 !important;font-weight:normal !important;margin-top:70px !important}#sdo-disconnected-dialog{padding:15px !important;box-shadow:none !important} \ No newline at end of file diff --git a/inst/bannerDisconnectHandler.min.js b/inst/bannerDisconnectHandler.min.js new file mode 100644 index 0000000..d675e2b --- /dev/null +++ b/inst/bannerDisconnectHandler.min.js @@ -0,0 +1 @@ +$(function(){$(document).on("shiny:disconnected",function(event){$("#sdo-disconnected-dialog").show();$("#sdo-overlay").show();if(window.modifiedHandler){modifiedHandler(false)}})}); \ No newline at end of file diff --git a/inst/bannerDisconnectHandler.min.js.map b/inst/bannerDisconnectHandler.min.js.map new file mode 100644 index 0000000..2629895 --- /dev/null +++ b/inst/bannerDisconnectHandler.min.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["bannerDisconnectHandler.js"],"names":["$","document","on","event","show","window","modifiedHandler"],"mappings":"AAAAA,EAAE,WACAA,EAAEC,QAAQ,EAAEC,GAAG,qBAAsB,SAASC,OAC5CH,EAAE,0BAA0B,EAAEI,KAAK,EACnCJ,EAAE,cAAc,EAAEI,KAAK,EACvB,GAAIC,OAAOC,gBAAiB,CAC1BA,gBAAgB,KAAK,CACvB,CACF,CAAC,CACH,CAAC"} \ No newline at end of file