diff --git a/DESCRIPTION b/DESCRIPTION index 216e061..a2813e5 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -1,6 +1,6 @@ Package: shiny.emptystate Title: Empty State Components for 'Shiny' -Version: 0.1.0 +Version: 0.1.0.9000 Authors@R: c( person("Ryszard", "SzymaĆski", role = c("aut", "cre"), email = "opensource+ryszard@appsilon.com"), diff --git a/NEWS.md b/NEWS.md index c3c93d9..3c59d5d 100644 --- a/NEWS.md +++ b/NEWS.md @@ -1,3 +1,8 @@ +# shiny.emptystate (development version) + +- `EmptyStateManager` has now an additional `z_index` argument, to set +[the stack level](https://drafts.csswg.org/css2/#z-index) for the empty state container. #52 + # [shiny.emptystate 0.1.0](https://github.com/Appsilon/shiny.emptystate/releases/tag/v0.1.0) First release. diff --git a/R/empty_state.R b/R/empty_state.R index 898959d..afe1725 100644 --- a/R/empty_state.R +++ b/R/empty_state.R @@ -98,11 +98,18 @@ EmptyStateManager <- R6Class( # nolint: object_name_linter #' Defaults to `default_empty_state_component()` #' @param color Background color of empty state content. #' Defaults to `NULL` + #' @param z_index The stack level for the empty state container. + #' Defaults to `9999` #' @return A new `EmptyStateManager` R6 class object. - initialize = function(id, html_content = default_empty_state_component(), color = NULL) { + initialize = function( + id, + html_content = default_empty_state_component(), + color = NULL, + z_index = 9999) { private$.id <- id private$.html_content <- private$process_html(html_content) private$.color <- color + private$.z_index <- z_index }, #' @description @@ -152,6 +159,7 @@ EmptyStateManager <- R6Class( # nolint: object_name_linter .id = NA, .html_content = NA, .color = NA, + .z_index = NA, empty_state_shown = FALSE, get_session = function() { getDefaultReactiveDomain() @@ -160,7 +168,8 @@ EmptyStateManager <- R6Class( # nolint: object_name_linter list( id = private$.id, html_content = private$.html_content, - color = private$.color + color = private$.color, + z_index = private$.z_index ) }, create_hide_message = function() { diff --git a/inst/emptystate.css b/inst/emptystate.css index 7482a54..7512af4 100644 --- a/inst/emptystate.css +++ b/inst/emptystate.css @@ -5,10 +5,6 @@ height: 100%; } -.empty-state-container { - z-index: 9999; -} - .empty-state-content .empty-state-component { display: flex; flex-direction: column; diff --git a/inst/emptystate.js b/inst/emptystate.js index 92a36d6..ac19717 100644 --- a/inst/emptystate.js +++ b/inst/emptystate.js @@ -20,7 +20,7 @@ function createEmptyStateContentElement(htmlContent) { return emptyStateContentElement; } -function createEmptyStateContainer(elementToReplace) { +function createEmptyStateContainer(elementToReplace, zIndex) { const emptyStateContainer = document.createElement("div"); emptyStateContainer.style.position = "absolute"; @@ -29,6 +29,7 @@ function createEmptyStateContainer(elementToReplace) { emptyStateContainer.style.width = elementToReplace.offsetWidth + "px"; emptyStateContainer.style.left = elementToReplace.offsetLeft + "px"; emptyStateContainer.style.top = elementToReplace.offsetTop + "px"; + emptyStateContainer.style.zIndex = zIndex; emptyStateContainer.classList.add("empty-state-container"); @@ -48,13 +49,14 @@ function findElementById(elementId) { function showEmptyState(message) { const elementId = message.id; const emptyStateContent = message.html_content; + const zIndex = message.z_index const white = "#FFFFFF" const backgroundColor = (message.color === null) ? white : message.color; elementToReplace = findElementById(elementId); - const emptyStateContainer = createEmptyStateContainer(elementToReplace); + const emptyStateContainer = createEmptyStateContainer(elementToReplace, zIndex); const emptyStateContentElement = createEmptyStateContentElement(emptyStateContent); emptyStateContainer.appendChild(emptyStateContentElement); diff --git a/man/EmptyStateManager.Rd b/man/EmptyStateManager.Rd index c205efd..4983c6b 100644 --- a/man/EmptyStateManager.Rd +++ b/man/EmptyStateManager.Rd @@ -76,7 +76,8 @@ Creates a new empty state manager object. \if{html}{\out{