testing message bar, refactore input bindings + doc tweaks

R/f7Messages.R

@@ -45,9 +45,6 @@ f7Messages <- function(id, title = NULL, autoLayout = TRUE, newMessagesFirst = F
   )
 }
 
-
-
-
 #' Framework7 message bar.
 #'
 #' \code{f7MessageBar} creates a message text container to type new messages.
@@ -84,9 +81,6 @@ f7MessageBar <- function(inputId, placeholder = "Message") {
   )
 }
 
-
-
-
 #' Update Framework7 message bar
 #'
 #' \code{updateF7MessageBar} updates message bar content on the server side.
@@ -98,59 +92,7 @@ f7MessageBar <- function(inputId, placeholder = "Message") {
 #'
 #' @rdname messagebar
 #' @export
-#' @examples
-#' if (interactive()) {
-#'   library(shiny)
-#'   library(shinyMobile)
-#'   shinyApp(
-#'     ui = f7Page(
-#'       title = "Update message bar",
-#'       f7SingleLayout(
-#'         navbar = f7Navbar(
-#'           title = "Message bar",
-#'           hairline = FALSE,
-#'           shadow = TRUE
-#'         ),
-#'         toolbar = f7Toolbar(
-#'           position = "bottom",
-#'           f7Link(label = "Link 1", href = "https://www.google.com"),
-#'           f7Link(label = "Link 2", href = "https://www.google.com")
-#'         ),
-#'         # main content
-#'         f7Segment(
-#'           container = "segment",
-#'           f7Button("updateMessageBar", "Update value"),
-#'           f7Button("updateMessageBarPlaceholder", "Update placeholder")
-#'         ),
-#'         f7MessageBar(inputId = "mymessagebar", placeholder = "Message"),
-#'         uiOutput("messageContent")
-#'       )
-#'     ),
-#'     server = function(input, output, session) {
-#'       output$messageContent <- renderUI({
-#'         req(input$mymessagebar)
-#'         tagList(
-#'           f7BlockTitle("Message Content", size = "large"),
-#'           f7Block(strong = TRUE, inset = TRUE, input$mymessagebar)
-#'         )
-#'       })
-#'
-#'       observeEvent(input$updateMessageBar, {
-#'         updateF7MessageBar(
-#'           inputId = "mymessagebar",
-#'           value = "sjsjsj"
-#'         )
-#'       })
-#'
-#'       observeEvent(input$updateMessageBarPlaceholder, {
-#'         updateF7MessageBar(
-#'           inputId = "mymessagebar",
-#'           placeholder = "Enter your message"
-#'         )
-#'       })
-#'     }
-#'   )
-#' }
+#' @example inst/examples/messagebar/app.R
 updateF7MessageBar <- function(inputId, value = NULL, placeholder = NULL,
                                session = shiny::getDefaultReactiveDomain()) {
   message <- dropNulls(
@@ -163,10 +105,6 @@ updateF7MessageBar <- function(inputId, value = NULL, placeholder = NULL,
   session$sendInputMessage(inputId, message)
 }
 
-
-
-
-
 #' Framework7 message element
 #'
 #' \code{f7Message} creates a message item to be inserted in
@@ -206,16 +144,14 @@ f7Message <- function(text, name, type = c("sent", "received"),
   )
 }
 
-
-
 #' Update Framework7 message container
 #'
-#' \code{updateF7Messages} add messages to an \link{f7Messages} container.
+#' \code{updateF7Messages} add messages to a \link{f7Messages} container.
 #'
 #' @param id Reference to \link{f7Messages} container.
 #' @param showTyping Show typing when a new message comes. Default to FALSE.
 #' Does not work yet...
-#' @param messages List of \link{f7Messages}.
+#' @param messages List of \link{f7Message}.
 #' @param session Shiny session object
 #'
 #'

inst/examples/messagebar/app.R

@@ -0,0 +1,51 @@
+library(shiny)
+library(shinyMobile)
+
+app <- shinyApp(
+  ui = f7Page(
+    title = "Update message bar",
+    f7SingleLayout(
+      navbar = f7Navbar(
+        title = "Message bar",
+        hairline = FALSE,
+        shadow = TRUE
+      ),
+      toolbar = f7Toolbar(
+        position = "bottom",
+        f7Link(label = "Link 1", href = "https://www.google.com"),
+        f7Link(label = "Link 2", href = "https://www.google.com")
+      ),
+      # main content
+      f7Segment(
+        container = "segment",
+        f7Button("updateMessageBar", "Update value"),
+        f7Button("updateMessageBarPlaceholder", "Update placeholder")
+      ),
+      f7MessageBar(inputId = "mymessagebar", placeholder = "Message"),
+      uiOutput("messageContent")
+    )
+  ),
+  server = function(input, output, session) {
+    output$messageContent <- renderUI({
+      req(input$mymessagebar)
+      tagList(
+        f7BlockTitle("Message Content", size = "large"),
+        f7Block(strong = TRUE, inset = TRUE, input$mymessagebar)
+      )
+    })
+    observeEvent(input$updateMessageBar, {
+      updateF7MessageBar(
+        inputId = "mymessagebar",
+        value = "sjsjsj"
+      )
+    })
+    observeEvent(input$updateMessageBarPlaceholder, {
+      updateF7MessageBar(
+        inputId = "mymessagebar",
+        placeholder = "Enter your message"
+      )
+    })
+  }
+)
+
+if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app

inst/examples/messages/app.R

@@ -16,9 +16,6 @@ app <- shinyApp(
     )
   ),
   server = function(input, output, session) {
-    observe({
-      print(input$mymessages)
-    })
     # Send a message
     observeEvent(input[["mymessagebar-send"]], {
       updateF7Messages(

srcjs/bindings/messageBarInputBinding.js

@@ -7,7 +7,7 @@ $.extend(f7MessageBarBinding, {
 
   initialize: function(el) {
     this.app = getAppInstance();
-    this.app.messagebar.create({
+    this.instance = this.app.messagebar.create({
       el: '#' + $(el).attr('id')
     });
   },
@@ -17,7 +17,7 @@ $.extend(f7MessageBarBinding, {
   // send button based on the current value.
   // It also returns the text area value
   setState: function(el) {
-    var val = this.app.messagebar.get(el).getValue();
+    var val = this.instance.getValue();
     var sendLink = $(el).find('#' + el.id + '-send');
     if (!val.length) {
       $(sendLink).addClass('disabled');
@@ -38,11 +38,11 @@ $.extend(f7MessageBarBinding, {
 
   // see updatef7MessageBar
   setValue: function(el, value) {
-    this.app.messagebar.get(el).setValue(value);
+    this.instance.setValue(value);
   },
 
   setPlaceholder: function(el, value) {
-    this.app.messagebar.get(el).setPlaceholder(value);
+    this.instance.setPlaceholder(value);
   },
 
   // see updatef7MessageBar
@@ -57,14 +57,15 @@ $.extend(f7MessageBarBinding, {
   },
 
   subscribe: function(el, callback) {
+    var self = this;
     $(el).on("input.f7MessageBarBinding change.f7MessageBarBinding focus.f7MessageBarBinding blur.f7MessageBarBinding", function(e) {
       // reset message bar textarea content when click on it
       $(el).find('#' + el.id + '-send').on('click', function() {
         // add delay between link click and textarea reset in f7MessageBar.
         // Needed to give time so that f7Messages receives
         // the textarea input value before it is cleared.
         setTimeout(function() {
-          this.app.messagebar.get(el).clear().focus();
+          self.instance.clear().focus();
         }, 1000);
       });
       callback(true);