Merge branch 'f7-v8.3.2' of github.com:RinteRface/shinyMobile into f7…

…-v8.3.2

NEWS.md

@@ -64,6 +64,7 @@ Also, `f7Radio()` inherits from `f7List()` styling parameters such as `inset`, `
 - `hideF7Preloader()` has a new `id` parameter. This is to hide modals or progress from the server.
 - New `updateF7Preloader()` to be able to update a progress preloader from the server.
 - `f7PhotoBrowser()` fixed the `pageBackLinkText` to `back` when type was set to `page`, but this has been removed. The Framework7 default is now used, or the `pageBackLinkText` can be set manually (iOS only).
+- `f7ColorPicker` has new `...` parameter to pass custom options and now returns a list of values with hex, rgb, hsl, hsb, alpha, hue, rgba, and hsla values.
 - Fix various issues in documentation.
 
 # shinyMobile 1.0.1

R/f7-inputs.R

@@ -360,8 +360,7 @@ globalVariables(c("f7ColorPickerPalettes", "f7ColorPickerModules"))
 #'
 #' @param inputId Color picker input.
 #' @param label Color picker label.
-#' @param value Color picker value. hex, rgb, hsl, hsb, alpha, hue,
-#' rgba, hsla are supported.
+#' @param value Initial picker value in hex.
 #' @param placeholder Color picker placeholder.
 #' @param modules Picker color modules. Choose at least one.
 #' @param palettes Picker color predefined palettes. Must be a list
@@ -374,41 +373,36 @@ globalVariables(c("f7ColorPickerPalettes", "f7ColorPickerModules"))
 #' @param hexValueEditable When enabled, it will display HEX module value as <input> element to edit directly.
 #' @param groupedModules When enabled it will add more exposure
 #' to sliders modules to make them look more separated.
+#' @param ... Other options to pass to the picker. See
+#' \url{https://framework7.io/docs/color-picker#color-picker-parameters}.
 #'
-#' @export
+#' @return The return value is a list and includes hex, rgb, hsl, hsb, alpha, hue, rgba, and hsla values.
+#' See \url{https://framework7.io/docs/color-picker#color-picker-value}.
 #'
-#' @examples
-#' if (interactive()) {
-#'   library(shiny)
-#'   library(shinyMobile)
+#' @example inst/examples/colorpicker/app.R
 #'
-#'   shinyApp(
-#'     ui = f7Page(
-#'       title = "My app",
-#'       f7SingleLayout(
-#'         navbar = f7Navbar(title = "f7ColorPicker"),
-#'         f7ColorPicker(
-#'           inputId = "mycolorpicker",
-#'           placeholder = "Some text here!",
-#'           label = "Select a color"
-#'         ),
-#'         "The picker value is:",
-#'         textOutput("colorPickerVal")
-#'       )
-#'     ),
-#'     server = function(input, output) {
-#'       output$colorPickerVal <- renderText(input$mycolorpicker)
-#'     }
-#'   )
-#' }
+#' @export
 f7ColorPicker <- function(inputId, label, value = "#ff0000", placeholder = NULL,
                           modules = f7ColorPickerModules, palettes = f7ColorPickerPalettes,
                           sliderValue = TRUE, sliderValueEditable = TRUE,
                           sliderLabel = TRUE, hexLabel = TRUE,
-                          hexValueEditable = TRUE, groupedModules = TRUE) {
+                          hexValueEditable = TRUE, groupedModules = TRUE, ...) {
   # if the value is provided as a rgb, hsl, hsb, rgba or hsla
   if (is.numeric(value) & length(value) > 1) value <- jsonlite::toJSON(value)
 
+  config <- dropNulls(list(
+    value = list(hex = value),
+    modules = modules,
+    palettes = palettes,
+    sliderValue = sliderValue,
+    sliderValueEditable = sliderValueEditable,
+    sliderLabel = sliderLabel,
+    hexLabel = hexLabel,
+    hexValueEditable = hexValueEditable,
+    groupedModules = groupedModules,
+    ...
+  ))
+
   modules <- jsonlite::toJSON(modules)
   palettes <- jsonlite::toJSON(palettes)
   # We define a global variable that is
@@ -428,44 +422,12 @@ f7ColorPicker <- function(inputId, label, value = "#ff0000", placeholder = NULL,
     )
   )
 
-
-  inputTag <- shiny::tags$input(
-    type = "text",
-    placeholder = placeholder,
-    id = inputId,
-    class = "color-picker-input"
-  )
-
-  wrapperTag <- shiny::tags$div(
-    class = "list no-hairlines-md",
-    shiny::tags$ul(
-      shiny::tags$li(
-        shiny::tags$div(
-          class = "item-content item-input",
-          shiny::tags$div(
-            class = "item-media",
-            shiny::tags$i(
-              class = "icon demo-list-icon",
-              id = paste0(inputId, "-value")
-            )
-          ),
-          shiny::tags$div(
-            class = "item-inner",
-            shiny::tags$div(
-              class = "item-input-wrap",
-              inputTag
-            )
-          )
-        )
-      )
-    )
-  )
-
-  labelTag <- shiny::tags$div(class = "block-title", label)
-  shiny::tagList(
-    shiny::singleton(pickerProps),
-    labelTag,
-    wrapperTag
+  # TO DO: placeholder?
+  buildPickerInput(
+    inputId,
+    label,
+    config,
+    "color-picker-input"
   )
 }
 

inst/examples/colorpicker/app.R

@@ -0,0 +1,26 @@
+library(shiny)
+library(shinyMobile)
+
+app <- shinyApp(
+  ui = f7Page(
+    title = "My app",
+    f7SingleLayout(
+      navbar = f7Navbar(title = "f7ColorPicker"),
+      f7ColorPicker(
+        inputId = "mycolorpicker",
+        placeholder = "Some text here!",
+        label = "Select a color"
+      ),
+      "The picker hex value is:",
+      textOutput("colorPickerVal"),
+      "The picker rgb value is:",
+      textOutput("colorPickerValRgb")
+    )
+  ),
+  server = function(input, output) {
+    output$colorPickerVal <- renderText(input$mycolorpicker$hex)
+    output$colorPickerValRgb <- renderText(unlist(paste(input$mycolorpicker$rgb, collapse = ",")))
+  }
+)
+
+if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app

srcjs/bindings/colorPickerInputBinding.js

@@ -1,44 +1,33 @@
-// Input binding
+import { getAppInstance } from "../init.js";
+
 var f7ColorPickerBinding = new Shiny.InputBinding();
 
 $.extend(f7ColorPickerBinding, {
-
+  instances: [],
   initialize: function(el) {
-    app.colorPicker.create({
-      inputEl: el,
-      targetEl: $(el).attr("id") + '-value',
-      targetElSetBackgroundColor: true,
-      modules: colorPickerModules,
-      // I keep openIn default to auto since
-      // it is better to be automatically optimized
-      // based on the currently selected device.
-      openIn: 'auto',
-      sliderValue: colorPickerSliderValue,
-      sliderValueEditable: colorPickerSliderValueEditable,
-      sliderLabel: colorPickerSliderLabel,
-      hexLabel: colorPickerHexLabel,
-      hexValueEditable: colorPickerHexValueEditable,
-      groupedModules: colorPickerGroupedModules,
-      // Same thing here. For now, we use predefined
-      // palettes. latter, maybe add user defined palettes
-      palette: colorPickerPalettes,
-      //formatValue: function (value) {
-      //  return 'rgba(' + value.rgba.join(', ') + ')';
-      //},
-      value: {
-        hex: colorPickerValue,
-      },
-      on : {
-        open: function(target) {
-          if (target.app.params.dark) {
-            target
-              .$el
-              .closest(".modal-in")
-              .addClass("theme-dark");
-          }
+    this.app = getAppInstance();
+    var inputEl = $(el)[0];
+
+    var config = $(el).parent().find("script[data-for='" + el.id + "']");
+    config = JSON.parse(config.html());
+
+    config.inputEl = el;
+    config.targetEl = "#" + $(el).attr("id") + '-value';
+
+    config.on = {
+      open: function(target) {
+        if (target.app.params.dark) {
+          target
+            .$el
+            .closest(".modal-in")
+            .addClass("theme-dark");
         }
       }
-    });
+    }
+
+    // feed the create method
+    this.instances[el.id] = this.app.colorPicker.create(config);
+
   },
 
   find: function(scope) {
@@ -47,10 +36,7 @@ $.extend(f7ColorPickerBinding, {
 
   // Given the DOM element for the input, return the value
   getValue: function(el) {
-    var ID = $(el).attr("id");
-    // below we get the hidden value field using
-    // vanilla JS
-    return document.getElementById(ID).value;
+    return this.instances[el.id].getValue();
   },
 
   // see updateF7ColorPicker