add "closeOnClik" parameter; fixes #34

daattali · Apr 3, 2019 · 89e0ca4 · 89e0ca4
1 parent 38ffaab
commit 89e0ca4
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 141 deletions.
diff --git a/DESCRIPTION b/DESCRIPTION
@@ -1,7 +1,7 @@
 Package: colourpicker
 Type: Package
 Title: A Colour Picker Tool for Shiny and for Selecting Colours in Plots
-Version: 1.0.2
+Version: 1.0.3
 Authors@R: c(
     person("Dean", "Attali", email = "daattali@gmail.com",
     role = c("aut", "cre")),
@@ -35,4 +35,4 @@ License: MIT + file LICENSE
 Encoding: UTF-8
 LazyData: true
 VignetteBuilder: knitr
-RoxygenNote: 6.0.1
+RoxygenNote: 6.1.1
diff --git a/NEWS.md b/NEWS.md
@@ -2,6 +2,7 @@
 
 - colour input now works with all R colour names, including names that have aliases such as "gray" vs "grey" (#25)
 - add support for bookmarking (restoring state) (#33)
+- added "closeOnClick" parameter that, when `TRUE`, will cause the colour selection panel to close immediately after choosing a colour (#34)
 
 # colourpicker 1.0
 

diff --git a/R/colourInput.R b/R/colourInput.R
@@ -35,6 +35,8 @@
 #' chosen, the return value is an 8-digit HEX code.
 #' @param returnName If \code{TRUE}, then return the name of an R colour instead
 #' of a HEX value when possible.
+#' @param closeOnClick If \code{TRUE}, then the colour selection panel will close
+#' immediately after selecting a colour.
 #' @seealso \code{\link[colourpicker]{updateColourInput}}
 #' \code{\link[colourpicker]{colourPicker}}
 #' @examples
@@ -88,7 +90,7 @@ colourInput <- function(inputId, label, value = "white",
                         showColour = c("both", "text", "background"),
                         palette = c("square", "limited"),
                         allowedCols = NULL, allowTransparent = FALSE,
-                        returnName = FALSE) {
+                        returnName = FALSE, closeOnClick = FALSE) {
   # sanitize the arguments
   showColour <- match.arg(showColour)
   palette <- match.arg(palette)
@@ -136,6 +138,11 @@ colourInput <- function(inputId, label, value = "white",
       inputTag,
       `data-allow-alpha` = "true")
   }
+  if (closeOnClick) {
+    inputTag <- shiny::tagAppendAttributes(
+      inputTag,
+      `data-close-on-click` = "true")
+  }
 
   inputTag <-
     shiny::div(
@@ -195,14 +202,15 @@ colourInput <- function(inputId, label, value = "white",
 updateColourInput <- function(session, inputId, label = NULL, value = NULL,
                               showColour = NULL, palette = NULL, allowedCols = NULL,
                               allowTransparent = NULL,
-                              returnName = NULL) {
+                              returnName = NULL, closeOnClick = NULL) {
   message <- dropNulls(list(
     label = label, value = value,
     showColour = showColour,
     palette = palette,
     allowedCols = allowedCols,
     allowAlpha = allowTransparent,
-    returnName = returnName
+    returnName = returnName,
+    closeOnClick = closeOnClick
   ))
   session$sendInputMessage(inputId, message)
 }

diff --git a/R/colourWidget.R b/R/colourWidget.R
@@ -20,6 +20,7 @@ colourWidget <- function(value = "white",
                          showColour = c("both", "text", "background"),
                          palette = c("square", "limited"), allowedCols = NULL,
                          allowTransparent = FALSE, returnName = FALSE,
+                         closeOnClick = FALSE,
                          width = "300px", height = "35px", elementId = NULL) {
   # sanitize the arguments
   showColour <- match.arg(showColour)
@@ -31,7 +32,8 @@ colourWidget <- function(value = "white",
     showColour = showColour,
     palette = palette,
     returnName = returnName,
-    allowAlpha = allowTransparent
+    allowAlpha = allowTransparent,
+    closeOnClick = closeOnClick
   )
 
   if (!is.null(allowedCols)) {

diff --git a/inst/examples/colourInput/app.R b/inst/examples/colourInput/app.R
@@ -82,11 +82,13 @@ shinyApp(
         div(class = "title", "Allow Transparent"),
         div(class = "output", "Selected colour:",
             textOutput("valueTransparent", inline = TRUE)),
-        colourInput("colTransparent", NULL, "#00FF0080", allowTransparent = TRUE),
+        colourInput("colTransparent", NULL, "#00FF0080", allowTransparent = TRUE,
+                    closeOnClick = TRUE),
         tags$pre(HTML(paste0(
           'colourInput(<br>',
           '  "col", NULL, "#00FF0080",<br>',
-          '  allowTransparent = TRUE)'
+          '  allowTransparent = TRUE,<br>',
+          '  closeOnClick = TRUE)'
         )))
       ),
 
@@ -95,12 +97,14 @@ shinyApp(
         div(class = "title", "Return colour name"),
         div(class = "output", "Selected colour:",
             textOutput("valueName", inline = TRUE)),
-        colourInput("colName", NULL, "green", returnName = TRUE, palette = "limited"),
+        colourInput("colName", NULL, "green", returnName = TRUE,
+                    palette = "limited", closeOnClick = TRUE),
         tags$pre(HTML(paste0(
           'colourInput(<br>',
           '  "col", NULL, "green",<br>',
           '  returnName = TRUE, <br>',
-          '  palette = "limited")'
+          '  palette = "limited",<br>',
+          '  closeOnClick = TRUE)'
         )))
       ),
 
@@ -133,7 +137,7 @@ shinyApp(
           '    "white", "black", "red",<br>',
           '    "#DDD", "blue",<br>',
           '    "#0000FFA0", "#0000FF30",<br>',
-          '    "rgb(255, 255, 0)"'
+          '    "rgb(255, 255, 0)"))'
         )))
       ),
 
@@ -151,6 +155,7 @@ shinyApp(
                            c("square", "limited")),
         checkboxInput("allowTransparent", "Allow transparent", FALSE),
         checkboxInput("returnName", "Return R colour name", FALSE),
+        checkboxInput("closeOnClick", "Close on click", FALSE),
         actionButton("update", "Update")
       ),
 
@@ -181,7 +186,8 @@ shinyApp(
                         value = input$text, showColour = input$showColour,
                         palette = input$palette,
                         allowTransparent = input$allowTransparent,
-                        returnName = input$returnName)
+                        returnName = input$returnName,
+                        closeOnClick = input$closeOnClick)
     })
 
     # show plot based on colours selected

diff --git a/inst/srcjs/input_binding_colour.js b/inst/srcjs/input_binding_colour.js
@@ -29,7 +29,8 @@ $.extend(colourBinding, {
       palette          : $el.attr('data-palette'),
       allowedCols      : $el.attr('data-allowed-cols'),
       allowAlpha       : $el.attr('data-allow-alpha'),
-      returnName       : $el.attr('data-return-name')
+      returnName       : $el.attr('data-return-name'),
+      closeOnClick     : $el.attr('data-close-on-click')
     };
 
     if (typeof opts.allowedCols !== 'undefined') {
@@ -60,6 +61,9 @@ $.extend(colourBinding, {
     if (data.hasOwnProperty('returnName')) {
       $el.colourpicker('settings', { 'returnName' : data.returnName });
     }
+    if (data.hasOwnProperty('closeOnClick')) {
+      $el.colourpicker('settings', { 'closeOnClick' : data.closeOnClick });
+    }
     if (data.hasOwnProperty('value')) {
       this.setValue(el, data.value);
     }