more examples/support for updateF7Entity

NEWS.md

@@ -23,6 +23,7 @@
 - Remove `value` from `f7Password()` (accidental copy and paste from `f7Text()`).
 - Possible breaking change: `f7Toolbar()` default position is now `bottom`.
 - Possible breaking change: remove `httr` dependency from `app_container()`.
+- Possible breaking change in `f7PhotoBrowser()`: `id` param reintroduce (but not mandatory, default `NULL`) as needed by `updateF7Entity()` to update the widget on the server side.
 
 ## Soft deprecation
 - `f7Accordion()`:

R/f7PhotoBrowser.R

@@ -7,19 +7,22 @@
 #' @param type Browser type: choose among \code{c("popup", "standalone", "page")}.
 #' @param ... Other options to pass to the photo browser. See
 #' \url{https://framework7.io/docs/photo-browser#photo-browser-parameters} for more details.
+#' @param id Unique id. Useful to
+#' leverage \link{updateF7Entity} on the server.
 #' @param session Shiny session object.
 #'
 #' @example inst/examples/photobrowser/app.R
 #'
 #' @export
 f7PhotoBrowser <- function(photos, theme = c("light", "dark"),
-                           type = c("popup", "standalone", "page"), ..., session = shiny::getDefaultReactiveDomain()) {
-
+                           type = c("popup", "standalone", "page"), ...,
+                           id = NULL, session = shiny::getDefaultReactiveDomain()) {
   theme <- match.arg(theme)
   type <- match.arg(type)
 
   options <- dropNulls(
     list(
+      id = id,
       theme = theme,
       photos = I(photos),
       type = type,

R/update-app.R

@@ -23,6 +23,10 @@ updateF7App <- function(options, session = shiny::getDefaultReactiveDomain()) {
 #' \code{updateF7Entity} allows to update any Framework7 instance from the server.
 #' For each entity, the list of updatable properties may significantly vary. Please
 #' refer to the Framework7 documentation at \url{https://framework7.io/docs/}.
+#' Currently, \code{updateF7Entity} supports \link{f7Gauge},
+#' \link{f7Swiper}, \link{f7Searchbar},
+#' \link{f7PhotoBrowser}, \link{f7Popup} and
+#' \link{f7ListView}.
 #'
 #' @param id Element id.
 #' @param options Configuration list. Tightly depends on the entity.

inst/examples/update_entity/app.R

@@ -6,25 +6,82 @@ app <- shinyApp(
     title = "Update Entity",
     f7SingleLayout(
       navbar = f7Navbar(title = "Update action sheet instance"),
+      f7BlockTitle("Action sheet", size = "large"),
       f7Segment(
         f7Button(
           inputId = "goButton",
-          "Go!",
+          "Show action sheet",
           fill = FALSE,
           outline = TRUE
         ),
         f7Button(
-          inputId = "update",
+          inputId = "update_action_sheet",
           "Update config",
           fill = FALSE,
           outline = TRUE
         ),
         f7Button(
-          inputId = "reset",
+          inputId = "reset_action_sheet",
           "Reset",
           fill = FALSE,
           outline = TRUE
         )
+      ),
+      f7BlockTitle("Gauges", size = "large"),
+      f7Block(
+        f7Gauge(
+          id = "mygauge",
+          type = "semicircle",
+          value = 50,
+          borderColor = "#2196f3",
+          borderWidth = 10,
+          valueFontSize = 41,
+          valueTextColor = "#2196f3",
+          labelText = "amount of something"
+        )
+      ),
+      f7Block(f7Button("update_gauge", "Update Gauge")),
+      f7BlockTitle("Swiper", size = "large"),
+      f7Swiper(
+        id = "swiper",
+        lapply(1:20, \(c) {
+          f7Slide(
+            f7Card(
+              title = sprintf("Slide %s", c)
+            )
+          )
+        })
+      ),
+      f7Block(f7Button("update_swiper", "Update Swiper")),
+      f7BlockTitle("Photo Browser", size = "large"),
+      f7Segment(
+        f7Button(
+          "show_photobrowser",
+          "Open photo browser",
+          fill = FALSE,
+          outline = TRUE
+        ),
+        f7Button(
+          "update_photobrowser",
+          "Update photo browser",
+          fill = FALSE,
+          outline = TRUE
+        )
+      ),
+      f7BlockTitle("Popup", size = "large"),
+      f7Segment(
+        f7Button(
+          "toggle",
+          "Toggle Popup",
+          fill = FALSE,
+          outline = TRUE
+        ),
+        f7Button(
+          "update",
+          "Update Popup",
+          fill = FALSE,
+          outline = TRUE
+        )
       )
     )
   ),
@@ -48,7 +105,7 @@ app <- shinyApp(
       )
     })
 
-    observeEvent(input$update, {
+    observeEvent(input$update_action_sheet, {
       updateF7Entity(
         id = "action1",
         options = list(
@@ -63,7 +120,7 @@ app <- shinyApp(
       )
     })
 
-    observeEvent(input$reset, {
+    observeEvent(input$reset_action_sheet, {
       updateF7Entity(
         id = "action1",
         options = list(
@@ -82,6 +139,125 @@ app <- shinyApp(
         )
       )
     })
+
+    observeEvent(input$update_gauge, {
+      new_val <- 75
+      updateF7Entity(
+        id = "mygauge",
+        options = list(
+          # Must be between 0 and 1
+          value = new_val / 100,
+          valueText = paste0(new_val, "%"),
+          labelText = "New label!"
+        )
+      )
+    })
+
+    observeEvent(input$update_swiper, {
+      updateF7Entity(
+        "swiper",
+        options = list(
+          speed = 100,
+          slidesPerView = 2,
+          spaceBetween = 10,
+          autoplay = TRUE,
+          scrollbar = list(
+            enabled = FALSE
+          ),
+          navigation = list(
+            enabled = FALSE
+          ),
+          pagination = list(
+            type = "progressbar"
+          ),
+          grid = list(
+            fill = "columns",
+            rows = 4
+          ),
+          thumbs = TRUE
+        )
+      )
+    })
+
+    observeEvent(input$show_photobrowser, {
+      f7PhotoBrowser(
+        id = "photobrowser1",
+        theme = "dark",
+        type = "page",
+        photos = list(
+          list(url = "https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg"),
+          list(url = "https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg"),
+          list(
+            url = "https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg",
+            caption = "Me cycling"
+          )
+        ),
+        thumbs = c(
+          "https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg",
+          "https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg",
+          "https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg"
+        )
+      )
+    })
+
+    observeEvent(input$update_photobrowser, {
+      updateF7Entity(
+        "photobrowser1",
+        options = list(
+          type = "popup",
+          popupPush = TRUE,
+          toolbar = FALSE,
+          photos = list(
+            list(url = "https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg")
+          ),
+          thumbs = list("https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg")
+        )
+      )
+    })
+
+    observeEvent(input$toggle, {
+      f7Popup(
+        id = "popup",
+        title = "My first popup",
+        f7Text(
+          "text", "Popup content",
+          "This is my first popup ever, I swear!"
+        ),
+        verbatimTextOutput("res")
+      )
+    })
+
+    observeEvent(input$update, {
+      updateF7Entity(
+        id = "popup",
+        options = list(
+          swipeToClose = TRUE,
+          animate = FALSE,
+          closeOnEscape = TRUE,
+          # Content must contain the popup
+          # layout!!!
+          content = '<div class="popup">
+            <div class="view">
+              <div class="page">
+                <div class="navbar">
+                  <div class="navbar-bg"></div>
+                  <div class="navbar-inner">
+                    <div class="title">Popup</div>
+                    <div class="right">
+                      <!-- Link to close popup -->
+                      <a class="link popup-close">Close</a>
+                    </div>
+                  </div>
+                </div>
+                <div class="page-content">
+                  <div class="block">New content ...</div>
+                </div>
+              </div>
+            </div>
+          </div>'
+        )
+      )
+    })
   }
 )