add f7MultiLayout, change toolbar position default

NAMESPACE

@@ -25,6 +25,7 @@ export(f7Chip)
 export(f7Col)
 export(f7ColorPicker)
 export(f7DatePicker)
+export(f7DefaultOptions)
 export(f7Dialog)
 export(f7DownloadButton)
 export(f7ExpandableCard)
@@ -60,6 +61,7 @@ export(f7MenuItem)
 export(f7Message)
 export(f7MessageBar)
 export(f7Messages)
+export(f7MultiLayout)
 export(f7Navbar)
 export(f7Next)
 export(f7NotFound)

NEWS.md

@@ -1,7 +1,7 @@
 # shinyMobile 2.0.0
 ## Major change
 - Update Framework7 from 5.7.14 to 8.3.2
-- New experimental router layout: supported by {brochure}, this allows to have beautiful transitions between pages as more native like experience.
+- New experimental router layout `f7MultiLayout()`: supported by `{brochure}`, this allows to have beautiful transitions between pages to provide a more native like experience.
 - New `f7Form()`: gather inputs in the same form to get a nested list containing all input values. This allows to reduce the number of inputs on the server side.
 `updateF7Form()` makes it possible to update input in batch or only selected ones.
 - Whenever you have multiple inputs, we now recommend to wrap all of them within `f7List()` which allows you to benefit from new styling options such as outline, inset, strong, ... Internally, we use a function able to detect whether the input is inside a `f7List()`: if yes, you can style this list by passing parameters like `f7List(outline = TRUE, inset = TRUE, ...)`; if not, the input is internally wrapped in a list to have correct rendering (but no styling is possible). Besides, some input like `f7Text()` can have custom styling (add an icon, clear button, outline style), which is independent from the external list wrapper style. Hence, we don't recommend doing `f7List(outline = TRUE, f7Text(outline = TRUE))` since it won't render very well (only use `f7List(outline = TRUE, f7Text())`). Please have a look at the corresponding examples in the documentation.
@@ -21,6 +21,7 @@
 - `f7Icon()`: remove deprecated parameter `old`.
 - `f7SmartSelect()`: `maxlength` becomes `maxLength`. Typo from Framework7.
 - Remove `value` from `f7Password()` (accidental copy and paste from `f7Text()`).
+- Possible breaking change: `f7Toolbar()` default position is now `bottom`.
 
 ## Soft deprecation
 - `f7Accordion()`:
@@ -78,10 +79,10 @@ Also, `f7Radio()` inherits from `f7List()` styling parameters such as `inset`, `
 - `f7SplitLayout()` has a new look and at a minimal app width (1024 px) the sidebar becomes always visible. The sidebar will be collapsed on smaller screens. 
 - `f7Text()`, `f7TextArea()` and `f7Password()` have new parameters: `description`, `media`, `floating`, `outline` and `cleareable` for more styling options. `label` can also be NULL.
 - `f7Select()` has new `description`, `media` and `outline` parameters.
-- `f7Link()` has new `routable` parameter which allows to use the new experimental router layout.
+- `f7Link()` has new `routable` parameter which allows to use the new experimental router layout in `f7MultiLayout()`.
 - `f7Navbar()`: both `leftPanel` and `rightPanel` now accept shiny tag such as an icon or link. This is useful to support
 the new router layout.
-- `f7Page()`: new `allowRouter` parameter which allows to use the new experimental router layout.
+- New `f7DefaultOptions()`: can be used in `f7Page()` to pass app options.
 - Fix various issues in documentation.
 
 # shinyMobile 1.0.1

R/f7Navbar.R

@@ -18,10 +18,10 @@
 #' Only works if bigger is TRUE.
 #' @param leftPanel Whether to enable the left panel. FALSE by default.
 #' You can also pass a shiny tag such as an icon or text. This is useful
-#' when using the yet experimental routable API.
+#' when using the yet experimental routable API with \link{f7MultiLayout}.
 #' @param rightPanel Whether to enable the right panel. FALSE by default.
 #' You can also pass a shiny tag such as an icon or text. This is useful
-#' when using the yet experimental routable API.
+#' when using the yet experimental routable API with \link{f7MultiLayout}.
 #'
 #' @note Currently, bigger parameters does mess with the CSS.
 #'

R/f7Page.R

@@ -5,7 +5,8 @@
 #' @param ... Slot for shinyMobile skeleton elements: \link{f7SingleLayout},
 #' \link{f7TabLayout}, \link{f7SplitLayout}.
 #' @param title Page title.
-#' @param options shinyMobile configuration. See \url{https://framework7.io/docs/app.html}. Below are the most
+#' @param options shinyMobile configuration. See \link{f7DefaultOptions} and
+#' \url{https://framework7.io/docs/app.html}. Below are the most
 #' notable options. General options:
 #' \itemize{
 #'  \item \code{theme}: App skin: "ios", "md", or "auto".
@@ -51,7 +52,6 @@
 #' In any case, you must follow the same structure as provided in the function arguments.
 #'
 #' @param allowPWA Whether to include PWA dependencies. Default to FALSE.
-#' @param allowRouter Experimental router support. See vignette.
 #'
 #' @author David Granjon, \email{dgranjon@@ymail.com}
 #'
@@ -60,33 +60,8 @@ f7Page <- function(
     ...,
     title = NULL,
     # default options
-    options = list(
-      theme = c("auto", "ios", "md"),
-      dark = "auto",
-      skeletonsOnLoad = FALSE,
-      preloader = FALSE,
-      filled = FALSE,
-      color = "#007aff",
-      touch = list(
-        touchClicksDistanceThreshold = 5,
-        tapHold = TRUE,
-        tapHoldDelay = 750,
-        tapHoldPreventClicks = TRUE,
-        iosTouchRipple = FALSE,
-        mdTouchRipple = TRUE
-      ),
-      iosTranslucentBars = FALSE,
-      navbar = list(
-        iosCenterTitle = TRUE,
-        hideOnPageScroll = TRUE
-      ),
-      toolbar = list(
-        hideOnPageScroll = FALSE
-      ),
-      pullToRefresh = FALSE
-    ),
-    allowPWA = FALSE,
-    allowRouter = FALSE) {
+    options = f7DefaultOptions(),
+    allowPWA = FALSE) {
   # Color must be converted to HEX before going to JavaScript
   if (!is.null(options$color)) {
     # If color is a name
@@ -145,16 +120,6 @@ f7Page <- function(
     }
   }))
 
-  if (allowRouter) {
-    items <- tags$div(
-      class = "view view-main view-init",
-      `data-url` = "/",
-      # Important: to be able to have updated url
-      `data-browser-history` = "true",
-      items
-    )
-  }
-
   bodyTag <- shiny::tags$body(
     `data-pwa` = tolower(allowPWA),
     `data-ptr` = dataPTR,
@@ -200,6 +165,77 @@ f7Page <- function(
   )
 }
 
+#' shinyMobile app default options
+#'
+#' List of default custom options.
+#'
+#' @export
+#' @return A list of options to pass in
+#' \link{f7Page}.
+f7DefaultOptions <- function() {
+  list(
+    theme = c("auto", "ios", "md"),
+    dark = "auto",
+    skeletonsOnLoad = FALSE,
+    preloader = FALSE,
+    filled = FALSE,
+    color = "#007aff",
+    touch = list(
+      touchClicksDistanceThreshold = 5,
+      tapHold = TRUE,
+      tapHoldDelay = 750,
+      tapHoldPreventClicks = TRUE,
+      iosTouchRipple = FALSE,
+      mdTouchRipple = TRUE
+    ),
+    iosTranslucentBars = FALSE,
+    navbar = list(
+      iosCenterTitle = TRUE,
+      hideOnPageScroll = TRUE
+    ),
+    toolbar = list(
+      hideOnPageScroll = FALSE
+    ),
+    pullToRefresh = FALSE
+  )
+}
+
+#' Framework7 multi pages layout
+#'
+#' r lifecycle::badge("experimental")`
+#' Experimental multi pages layout. This has to be used
+#' with the brochure R package. See the corresponding vignette at
+#' \code{vignette("multipages", package = "shinyMobile")}.
+#'
+#' @param ... Pages. Must be an element like
+#' \code{shiny::tags$div(class = "page", ...)}
+#' @param toolbar Contrary to \link{f7SingleLayout} or any other layout,
+#' the multi page layout can have a common toolbar for all pages.
+#' See more at \url{https://framework7.io/docs/toolbar-tabbar#common-toolbar}.
+#' You can pass \link{f7Toolbar} in this slot or \link{f7Tabs} but if you
+#' do so, don't pass any toolbar in the different pages elements.
+#' @inheritParams f7Page
+#'
+#' @export
+f7MultiLayout <- function(
+    ...,
+    toolbar = NULL,
+    title = NULL,
+    options = f7DefaultOptions(),
+    allowPWA = FALSE) {
+  items <- shiny::tags$div(
+    class = "view view-main view-init",
+    `data-url` = "/",
+    # Important: to be able to have updated url
+    `data-browser-history` = "true",
+    # Optional common toolbar
+    toolbar,
+    ...
+  )
+
+  f7Page(items, title = title, options = options, allowPWA = allowPWA)
+}
+
 #' Framework7 single layout
 #'
 #' \code{f7SingleLayout} provides a simple page layout.

R/f7Toolbar.R

@@ -19,7 +19,7 @@
 #' @author David Granjon, \email{dgranjon@@ymail.com}
 #'
 #' @export
-f7Toolbar <- function(..., position = c("top", "bottom"), hairline = deprecated(), shadow = deprecated(),
+f7Toolbar <- function(..., position = c("bottom", "top"), hairline = deprecated(), shadow = deprecated(),
                       icons = FALSE, scrollable = FALSE) {
   if (lifecycle::is_present(hairline)) {
     lifecycle::deprecate_warn(

inst/examples/router/app.r

@@ -89,14 +89,16 @@ page_2 <- function() {
             )
           )
         ),
-        f7Toolbar(
-          position = "bottom",
-          tags$a(
-            href = "/",
-            "Main page",
-            class = "link"
-          )
-        ),
+        # NOTE: when the main toolbar is enabled in
+        # f7MultiLayout, we can't use individual page toolbars.
+        # f7Toolbar(
+        #  position = "bottom",
+        #  tags$a(
+        #    href = "/",
+        #    "Main page",
+        #    class = "link"
+        #  )
+        # ),
         shiny::tags$div(
           class = "page-content", f7Block(
             strong = TRUE,
@@ -150,14 +152,16 @@ page_3 <- function() {
             )
           )
         ),
-        f7Toolbar(
-          position = "bottom",
-          tags$a(
-            href = "/2",
-            "Second page",
-            class = "link"
-          )
-        ),
+        # NOTE: when the main toolbar is enabled in
+        # f7MultiLayout, we can't use individual page toolbars.
+        # f7Toolbar(
+        #  position = "bottom",
+        #  tags$a(
+        #    href = "/2",
+        #    "Second page",
+        #    class = "link"
+        #  )
+        # ),
         shiny::tags$div(
           class = "page-content",
           f7Block("Nothing to show yet ...")
@@ -172,9 +176,12 @@ brochureApp(
   page_1(),
   page_2(),
   page_3(),
-  wrapped = f7Page,
+  wrapped = f7MultiLayout,
   wrapped_options = list(
-    allowRouter = TRUE,
+    # Common toolbar
+    toolbar = f7Toolbar(
+      f7Link(icon = f7Icon("house"), href = "/", routable = TRUE)
+    ),
     options = list(
       dark = TRUE,
       # Note: ios seems to have issue