Skip to content
This repository has been archived by the owner. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
orNumeric: moved css to styles.css; use javascript to add/remove css … 
…class
  • Loading branch information
@HendrikSchultheis
HendrikSchultheis committed Dec 22, 2017
1 parent 26c04f5 commit a95c0cc
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 137 deletions.
182 changes: 46 additions & 136 deletions R/orNumeric.R
View file
Expand Up @@ -12,7 +12,10 @@ orNumericUI <- function(id){
ns <- shiny::NS(id)

shiny::tagList(
shiny::tagList(shinyjs::useShinyjs(), shiny::uiOutput(ns("label"))),
shiny::tagList(shinyjs::useShinyjs(),
shiny::singleton(shiny::tags$head(shiny::tags$link(rel = "stylesheet", type = "text/css", href = "wilson_www/styles.css"))),
shiny::uiOutput(ns("label"))
),
shiny::uiOutput(ns("options")),
shiny::uiOutput(ns("slider")),
shiny::uiOutput(ns("info"))
Expand Down Expand Up @@ -89,142 +92,49 @@ orNumeric <- function(input, output, session, choices, value, label = "Column",
}
})

css <- shiny::reactive({
# range slider?
if(length(value.r()) > 1) {
shiny::req(input$options)
# span.irs-bar = range between points (inner)
# span.irs-line = range outside of points (outer)
# span.irs-slider.from = left point
# span.irs-slider.to = right point
# span.irs-from = text above left point
# span.irs-to = text above right point
# span.irs-min = left text above slider
# span.irs-max = right text above slider
# span.irs-single = joined texts above points

# inner css
if(input$options == "inner") {
css <- shiny::HTML(paste0("<style ", paste0("id=\"", session$ns("slider-style")) ,"\" scoped>"),
"span.irs-bar {
background: #428bca;
border-top: 1px solid #428bca;
border-bottom: 1px solid #428bca;
}
span.irs-from, span.irs-to, span.irs-single {
background: #428bca;
color: #FFF;
}
span.irs-line {
border: 1px solid #CCC;
background: linear-gradient(to bottom, #DDD -50%, #FFF 150%);
}
</style>")
# outer css
}else if(input$options == "outer") {
css <- shiny::HTML(paste0("<style ", paste0("id=\"", session$ns("slider-style")) ,"\" scoped>"),
"span.irs-bar {
border: 1px solid #CCC;
background: linear-gradient(to bottom, #DDD -50%, #FFF 150%);
}
span.irs-from, span.irs-to, span.irs-single {
background: rgba(0,0,0,0.1);
color: #333;
}
span.irs-line {
background: #428bca;
border-top: 1px solid #428bca;
border-bottom: 1px solid #428bca;
}
span.irs-min, span.irs-max {
background: #428bca;
color: #FFF;
}
</style>")
}
#single slider
}else {
# span.irs-min = left text above slider
# span.irs-max = right text above slider
# span.irs-single = text above point
# span.irs-slider.single = point
# span.irs-bar = bar left side of point
# span.irs-bar-edge = left edge of bar
# span.irs-line = bar right side of point

# default for <
less <- shiny::HTML(paste0("<style ", paste0("id=\"", session$ns("slider-style")) ,"\" scoped>"),
"span.irs-bar, span.irs-bar-edge {
background: linear-gradient(to bottom, #DDD -50%, #FFF 150%);
border: 1px solid #CCC;
border-right: 0;
}
")
# default for =
equal <- "span.irs-single {
background: rgba(0,0,0,0.1);
color: #333;
}"
# default for >
greater <- "</style>"

if(any("<" == input$options)) {
less <- shiny::HTML(paste0("<style ", paste0("id=\"", session$ns("slider-style")) ,"\" scoped>"),
"span.irs-bar, span.irs-bar-edge {
background: #428bca;
border-top: 1px solid #428bca;
border-bottom: 1px solid #428bca;
}
span.irs-min {
background: #428bca;
color: #FFF;
}")
}
if(any("=" == input$options)) {
equal <- "span.irs-single {
background: #428bca;
color: #FFF;
}"
}

if(any(">" == input$options)) {
greater <- "span.irs-line {
background: #428bca;
border-top: 1px solid #428bca;
border-bottom: 1px solid #428bca;
}
span.irs-max {
background: #428bca;
color: #FFF;
}
</style>"
}
shiny::HTML(less, equal, greater)
}
})

# insert style for slider
# change css classes so slider visually matches options
shiny::observe({
# re-insert css if slider is re-rendered
min.r()
max.r()

# escape . to get valid css selector
# TODO better validation
selector <- gsub(pattern = ".", replacement = "\\.", x = session$ns("slider-style"), fixed = TRUE)
selector2 <- gsub(pattern = ".", replacement = "\\.", x = session$ns("slider"), fixed = TRUE)

if(length(value.r()) > 1) shiny::req(input$options)
shiny::removeUI(
selector = paste0("#", selector)
)

shiny::insertUI(
selector = paste0("#", selector2),
where = "afterBegin",
ui = css()
)
# change css classes if slider is re-rendered
min.r()
max.r()

if(length(value.r()) > 1){
shiny::req(input$options)

if(input$options == "inner") {
shinyjs::runjs(paste0("$(document.getElementById('", session$ns("slider"),"')).find('span').removeClass('outer')"))
shinyjs::runjs(paste0("$(document.getElementById('", session$ns("slider"),"')).find('span').addClass('inner')"))
} else if(input$options == "outer") {
shinyjs::runjs(paste0("$(document.getElementById('", session$ns("slider"),"')).find('span').removeClass('inner')"))
shinyjs::runjs(paste0("$(document.getElementById('", session$ns("slider"),"')).find('span').addClass('outer')"))
}
} else {
shinyjs::runjs(paste0("$(document.getElementById('", session$ns("slider"),"')).find('span').addClass('empty')"))

if(shiny::isTruthy(input$options)) {
if(any(input$options == ">")) {
shinyjs::runjs(paste0("$(document.getElementById('", session$ns("slider"),"')).find('span').addClass('greater')"))
} else {
shinyjs::runjs(paste0("$(document.getElementById('", session$ns("slider"),"')).find('span').removeClass('greater')"))
}

if(any(input$options == "=")) {
shinyjs::runjs(paste0("$(document.getElementById('", session$ns("slider"),"')).find('span').addClass('equal')"))
} else {
shinyjs::runjs(paste0("$(document.getElementById('", session$ns("slider"),"')).find('span').removeClass('equal')"))
}

if(any(input$options == "<")) {
shinyjs::runjs(paste0("$(document.getElementById('", session$ns("slider"),"')).find('span').addClass('less')"))
} else {
shinyjs::runjs(paste0("$(document.getElementById('", session$ns("slider"),"')).find('span').removeClass('less')"))
}
} else {
shinyjs::runjs(paste0("$(document.getElementById('", session$ns("slider"),"')).find('span').removeClass('greater')"))
shinyjs::runjs(paste0("$(document.getElementById('", session$ns("slider"),"')).find('span').removeClass('equal')"))
shinyjs::runjs(paste0("$(document.getElementById('", session$ns("slider"),"')).find('span').removeClass('less')"))
}
}
})

output$slider <- shiny::renderUI({
Expand Down
91 changes: 90 additions & 1 deletion inst/www/styles.css
View file
Expand Up @@ -8,6 +8,95 @@
opacity: 1;
}

/* slider */
/* slider
.irs-bar = range between points (inner)/ bar left side of point
.irs-bar-edge = left edge of bar
.irs-line = range outside of points (outer)/ bar right side of point
.irs-slider.single = single point
.irs-slider.from = left point
.irs-slider.to = right point
.irs-from = text above left point
.irs-to = text above right point
.irs-min = left text above slider
.irs-max = right text above slider
.irs-single = joined texts above points/ text above single point
*/
/* ranged slider */
.inner.irs-bar {
background: #428bca;
border-top: 1px solid #428bca;
border-bottom: 1px solid #428bca;
}

.inner.irs-from, .inner.irs-to, .inner.irs-single {
background: #428bca;
color: #FFF;
}

.inner.irs-line {
border: 1px solid #CCC;
background: linear-gradient(to bottom, #DDD -50%, #FFF 150%);
}

.outer.irs-bar {
border: 1px solid #CCC;
background: linear-gradient(to bottom, #DDD -50%, #FFF 150%);
}

.outer.irs-from, .outer.irs-to, .outer.irs-single {
background: rgba(0,0,0,0.1);
color: #333;
}

.outer.irs-line {
background: #428bca;
border-top: 1px solid #428bca;
border-bottom: 1px solid #428bca;
}

.outer.irs-min, .outer.irs-max {
background: #428bca;
color: #FFF;
}

/* single slider */
.less.irs-bar, .less.irs-bar-edge {
background: #428bca;
border-top: 1px solid #428bca;
border-bottom: 1px solid #428bca;
}

.less.irs-min {
background: #428bca;
color: #FFF;
}

.equal.irs-single {
background: #428bca;
color: #FFF;
}

.greater.irs-line {
background: #428bca;
border-top: 1px solid #428bca;
border-bottom: 1px solid #428bca;
}

.greater.irs-max {
background: #428bca;
color: #FFF;
}

/* empty */
.empty.irs-bar:not(.less), .empty.irs-bar-edge:not(.less) {
background: linear-gradient(to bottom, #DDD -50%, #FFF 150%);
border: 1px solid #CCC;
border-right: 0;
}

.empty.irs-single:not(.equal) {
background: rgba(0,0,0,0.1);
color: #333;
}

/* text input */

0 comments on commit a95c0cc

Please sign in to comment.