update fabs + fix few issues

RinteRface · Mar 16, 2024 · 4a80a7a · 4a80a7a
1 parent 1bdfc03
commit 4a80a7a
Show file tree

Hide file tree

Showing 34 changed files with 308 additions and 333 deletions.
diff --git a/NEWS.md b/NEWS.md
@@ -21,6 +21,7 @@
 - `f7SocialCard()` is deprecated as the same result can be achieved with `f7Card()`.
 - `f7AutoComplete()`: `expandInput` is deprecated, removed from Framework7.
 - `f7Row()`, `f7Col()` and `f7Flex()` are deprecated in favor of `f7Grid()`, as specified by Framework7.
+- `f7Fabs()`: `morph` is deprecated. Only `morphTarget` is used.
 
 ## Minor change
 - `f7Messages()`: the corresponding input is now a list of lists, each item

diff --git a/R/f7Fab.R b/R/f7Fab.R
@@ -9,7 +9,8 @@
 #' @param extended If TRUE, the FAB will be wider. This allows to use a label (see below).
 #' @param label Container label. Only if extended is TRUE.
 #' @param sideOpen When the container is pressed, indicate where buttons are displayed.
-#' @param morph Whether to allow the FAB to transofrm into another UI element.
+#' @param morph `r lifecycle::badge("deprecated")`:
+#' removed from Framework7.
 #' @param morphTarget CSS selector of the morph target: \code{".toolbar"} for instance.
 #'
 #' @note The background color might be an issue depending on the parent container. Consider
@@ -19,68 +20,36 @@
 #'
 #' @author David Granjon, \email{dgranjon@@ymail.com}
 #'
-#' @examples
-#' if(interactive()){
-#'  library(shiny)
-#'  library(shinyMobile)
-#'
-#'  shinyApp(
-#'   ui = f7Page(
-#'     title = "Floating action buttons",
-#'     f7SingleLayout(
-#'      navbar = f7Navbar(title = "f7Fabs"),
-#'      f7Fabs(
-#'       extended = TRUE,
-#'       label = "Menu",
-#'       position = "center-top",
-#'       color = "yellow",
-#'       sideOpen = "right",
-#'       lapply(1:4, function(i) f7Fab(paste0("btn", i), i))
-#'     ),
-#'     lapply(1:4, function(i) verbatimTextOutput(paste0("res", i))),
-#'
-#'     f7Fabs(
-#'       position = "center-center",
-#'       color = "purple",
-#'       sideOpen = "center",
-#'       lapply(5:8, function(i) f7Fab(paste0("btn", i), i))
-#'     ),
-#'     lapply(5:8, function(i) verbatimTextOutput(paste0("res", i))),
-#'
-#'     f7Fabs(
-#'       position = "left-bottom",
-#'       color = "pink",
-#'       sideOpen = "top",
-#'       lapply(9:12, function(i) f7Fab(paste0("btn", i), i))
-#'     )
-#'     )
-#'
-#'   ),
-#'   server = function(input, output) {
-#'     lapply(1:12, function(i) {
-#'       output[[paste0("res", i)]] <- renderPrint(input[[paste0("btn", i)]])
-#'     })
-#'   }
-#'  )
-#' }
-#'
+#' @example inst/examples/fabs/app.R
 #' @export
-f7Fabs <- function(..., id = NULL, position = c("right-top", "right-center", "right-bottom", "left-top",
-  "left-center", "left-bottom", "center-center", "center-top", "center-bottom"),
-  color = NULL, extended = FALSE, label = NULL,
-  sideOpen = c("left", "right", "top", "bottom", "center"), morph = FALSE, morphTarget = NULL) {
+f7Fabs <- function(
+    ..., id = NULL, position = c(
+      "right-top", "right-center", "right-bottom", "left-top",
+      "left-center", "left-bottom", "center-center", "center-top", "center-bottom"
+    ),
+    color = NULL, extended = FALSE, label = NULL,
+    sideOpen = c("left", "right", "top", "bottom", "center"), morph = deprecated(), morphTarget = NULL) {
+  if (lifecycle::is_present(morph)) {
+    lifecycle::deprecate_warn(
+      when = "1.1.0",
+      what = "f7Fabs(morph)",
+      details = "morph has been
+      removed from Framework7 and will be removed from shinyMobile
+      in the next release. Only morphTarget is necessary."
+    )
+  }
 
   position <- match.arg(position)
-  fabCl <- paste0("fab fab-", position, if(!is.null(color)) " color-", color)
+  fabCl <- paste0("fab fab-", position, if (!is.null(color)) " color-", color)
   if (extended) fabCl <- paste0(fabCl, " fab-extended")
-  if (morph) fabCl <- paste0(fabCl, " fab-morph")
+  if (!is.null(morphTarget)) fabCl <- paste0(fabCl, " fab-morph")
 
   sideOpen <- match.arg(sideOpen)
 
   shiny::tags$div(
     class = fabCl,
     id = id,
-    `data-morph-to` = if (morph) morphTarget else NULL,
+    `data-morph-to` = morphTarget,
     shiny::a(
       href = "#",
       f7Icon("plus"),
@@ -96,54 +65,18 @@ f7Fabs <- function(..., id = NULL, position = c("right-top", "right-center", "ri
   )
 }
 
-
-
-
-
 #' Update Framework 7 FAB container
 #'
 #' \code{updateF7Fabs} toggles \link{f7Fabs} on the server side.
 #'
-#' @param id The id of the input object.
 #' @param session The Shiny session object, usually the default value will suffice.
 #'
 #' @rdname fabs
 #' @export
-#'
-#' @examples
-#' if (interactive()) {
-#'  library(shiny)
-#'  library(shinyMobile)
-#'
-#'  shinyApp(
-#'   ui = f7Page(
-#'     title = "Update f7Fabs",
-#'     f7SingleLayout(
-#'       navbar = f7Navbar(title = "Update f7Fabs"),
-#'       f7Button(inputId = "toggleFabs", label = "Toggle Fabs"),
-#'       f7Fabs(
-#'         position = "center-center",
-#'         id = "fabs",
-#'         lapply(1:3, function(i) f7Fab(inputId = i, label = i))
-#'       )
-#'     )
-#'   ),
-#'   server = function(input, output, session) {
-#'     observe(print(input$fabs))
-#'     observeEvent(input$toggleFabs, {
-#'       updateF7Fabs(id = "fabs")
-#'     })
-#'   }
-#'  )
-#' }
 updateF7Fabs <- function(id, session = shiny::getDefaultReactiveDomain()) {
   session$sendInputMessage(inputId = id, NULL)
 }
 
-
-
-
-
 #' Framework7 floating action button (FAB)
 #'
 #' \code{f7Fab} generates a nice button to be put in \link{f7Fabs}.
@@ -160,9 +93,15 @@ f7Fab <- function(inputId, label, width = NULL, ..., flag = NULL) {
   value <- shiny::restoreInput(id = inputId, default = NULL)
   shiny::tags$a(
     id = inputId,
-    style = if (!is.null(width)) paste0("width: ", shiny::validateCssUnit(width), ";"),
+    style = if (!is.null(width)) {
+      paste0("width: ", shiny::validateCssUnit(width), ";")
+    },
     type = "button",
-    class = if (!is.null(flag)) "fab-label-button f7-action-button" else "f7-action-button",
+    class = if (!is.null(flag)) {
+      "fab-label-button f7-action-button"
+    } else {
+      "f7-action-button"
+    },
     `data-val` = value,
     list(...),
     shiny::span(label),
@@ -172,51 +111,21 @@ f7Fab <- function(inputId, label, width = NULL, ..., flag = NULL) {
   )
 }
 
-
-
-
-
 #' Update FAB
 #'
 #' \code{updateF7Fab} changes the label of an \link{f7Fab} input on the client.
 #'
-#' @param inputId The id of the input object.
-#' @param label The label to set for the input object.
 #' @param session The Shiny session object, usually the default value will suffice.
 #'
 #' @export
 #'
 #' @rdname fab
-#'
-#' @examples
-#' if (interactive()) {
-#'  library(shiny)
-#'  library(shinyMobile)
-#'
-#'  ui <- f7Page(
-#'    f7SingleLayout(
-#'     navbar = f7Navbar(title = "updateF7Fab"),
-#'     f7Fab("trigger", "Click me")
-#'    )
-#'  )
-#'
-#'  server <- function(input, output, session) {
-#'    observeEvent(input$trigger, {
-#'      updateF7Fab("trigger", label = "Don't click me")
-#'    })
-#'  }
-#' shinyApp(ui, server)
-#' }
 updateF7Fab <- function(inputId, label = NULL,
                         session = shiny::getDefaultReactiveDomain()) {
-  message <- dropNulls(list(label=label))
+  message <- dropNulls(list(label = label))
   session$sendInputMessage(inputId, message)
 }
 
-
-
-
-
 #' Framework7 FAB morphing
 #'
 #' \code{f7FabMorphTarget} convert a tag into a target morphing.
@@ -228,39 +137,35 @@ updateF7Fab <- function(inputId, label = NULL,
 #' @export
 #' @examples
 #' if (interactive()) {
-#'  library(shiny)
-#'  library(shinyMobile)
-#'
-#'  shinyApp(
-#'    ui = f7Page(
-#'      f7SingleLayout(
-#'        navbar = f7Navbar(title = "f7Fabs Morph"),
-#'        toolbar = f7Toolbar(
-#'          position = "bottom",
-#'          lapply(1:3, function(i) f7Link(label = i, href = "#") %>% f7FabClose())
-#'        ) %>% f7FabMorphTarget(),
-#'        # put an empty f7Fabs container
-#'        f7Fabs(
-#'          extended = TRUE,
-#'          label = "Open",
-#'          position = "center-top",
-#'          color = "yellow",
-#'          sideOpen = "right",
-#'          morph = TRUE,
-#'          morphTarget = ".toolbar"
-#'        )
-#'      )
-#'
-#'    ),
-#'    server = function(input, output) {}
-#'  )
+#'   library(shiny)
+#'   library(shinyMobile)
+#'
+#'   shinyApp(
+#'     ui = f7Page(
+#'       f7SingleLayout(
+#'         navbar = f7Navbar(title = "f7Fabs Morph"),
+#'         toolbar = f7Toolbar(
+#'           position = "bottom",
+#'           lapply(1:3, function(i) f7Link(label = i, href = "#") %>% f7FabClose())
+#'         ) %>% f7FabMorphTarget(),
+#'         # put an empty f7Fabs container
+#'         f7Fabs(
+#'           extended = TRUE,
+#'           label = "Open",
+#'           position = "center-top",
+#'           color = "yellow",
+#'           sideOpen = "right",
+#'           morphTarget = ".toolbar"
+#'         )
+#'       )
+#'     ),
+#'     server = function(input, output) {}
+#'   )
 #' }
 f7FabMorphTarget <- function(tag) {
-  tag$attribs$class <- paste(tag$attribs$class, "fab-morph-target")
-  return(tag)
+  shiny::tagAppendAttributes(tag, class = "fab-morph-target")
 }
 
-
 #' Framework7 FAB close
 #'
 #' \code{f7FabClose} indicates that the current tag should close the \link{f7Fabs}.

diff --git a/R/f7Page.R b/R/f7Page.R
@@ -247,7 +247,7 @@ f7SingleLayout <- function(..., navbar, toolbar = NULL,
     shiny::tags$div(
       class = "view view-main",
       shiny::tags$div(
-        class = setPageCl(navbar),
+        class = "page",
         # top navbar goes here
         navbar,
         # toolbar goes here
@@ -265,23 +265,6 @@ f7SingleLayout <- function(..., navbar, toolbar = NULL,
   single_layout_tag
 }
 
-#' @keywords internal
-setPageCl <- function(navbar) {
-  page_cl <- "page"
-
-  if (!is.null(navbar)) {
-    has_subnavbar <- length(
-      htmltools::tagQuery(navbar)$
-        find(".subnavbar")$
-        selectedTags()
-    ) > 0
-    if (has_subnavbar) page_cl <- sprintf("%s page-with-subnavbar", page_cl)
-  }
-
-  page_cl
-}
-
-
 #' Framework7 tab layout
 #'
 #' \code{f7TabLayout} create a single page app with multiple tabs,
@@ -453,7 +436,7 @@ f7TabLayout <- function(..., navbar, messagebar = NULL, panels = NULL) {
       # apply the dark mode
       messagebar,
       shiny::tags$div(
-        class = setPageCl(navbar),
+        class = "page",
         # top navbar goes here
         navbar,
         # f7Tabs go here. The toolbar is

diff --git a/inst/examples/fabs/app.R b/inst/examples/fabs/app.R
@@ -0,0 +1,41 @@
+library(shiny)
+library(shinyMobile)
+
+app <- shinyApp(
+  ui = f7Page(
+    title = "Update f7Fabs",
+    f7SingleLayout(
+      navbar = f7Navbar(title = "Update f7Fabs"),
+      toolbar = f7Toolbar(
+        position = "bottom",
+        lapply(1:3, function(i) f7Link(label = i, href = "#") |> f7FabClose())
+      ) |> f7FabMorphTarget(),
+      # put an empty f7Fabs container
+      f7Fabs(
+        id = "fabsMorph",
+        extended = TRUE,
+        label = "Open",
+        position = "center-bottom",
+        color = "yellow",
+        sideOpen = "right",
+        morphTarget = ".toolbar"
+      ),
+      f7Block(f7Button(inputId = "toggle", label = "Toggle Fabs")),
+      f7Fabs(
+        position = "center-center",
+        id = "fabs",
+        lapply(1:3, function(i) f7Fab(inputId = i, label = i))
+      ),
+      textOutput("res")
+    )
+  ),
+  server = function(input, output, session) {
+    output$res <- renderText(input[["1"]])
+
+    observeEvent(input$toggle, {
+      updateF7Fabs(id = "fabs")
+    })
+  }
+)
+
+if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app
diff --git a/inst/shinyMobile-1.0.1/dist/shinyMobile.min.css.map b/inst/shinyMobile-1.0.1/dist/shinyMobile.min.css.map
diff --git a/inst/shinyMobile-1.0.1/dist/shinyMobile.min.js b/inst/shinyMobile-1.0.1/dist/shinyMobile.min.js
diff --git a/inst/shinyMobile-1.0.1/dist/shinyMobile.min.js.map b/inst/shinyMobile-1.0.1/dist/shinyMobile.min.js.map