initial commit for demonstration purposes

.Rbuildignore

@@ -0,0 +1,8 @@
+^node_modules$
+^srcjs$
+^app\.R$
+^package\.json$
+^webpack\.config\.js$
+^yarn\.lock$
+^flipcard\.Rproj$
+^\.Rproj\.user$

.gitignore

@@ -0,0 +1,4 @@
+.Rhistory
+.RData
+.Rproj.user
+node_modules

DESCRIPTION

@@ -0,0 +1,17 @@
+Package: flipcard
+Title: What the Package Does (One Line, Title Case)
+Version: 0.0.0.9000
+Authors@R: 
+    person(given = "First",
+           family = "Last",
+           role = c("aut", "cre"),
+           email = "[email protected]")
+Description: What the package does (one paragraph).
+License: What license it uses
+Encoding: UTF-8
+LazyData: true
+Imports: 
+    htmltools,
+    shiny,
+    reactR
+RoxygenNote: 6.1.1

NAMESPACE

@@ -0,0 +1,8 @@
+# Generated by roxygen2: do not edit by hand
+
+export(flipcardInput)
+export(updateFlipcardInput)
+importFrom(htmltools,htmlDependency)
+importFrom(htmltools,tags)
+importFrom(reactR,createReactShinyInput)
+importFrom(shiny,restoreInput)

R/flipcard.R

@@ -0,0 +1,43 @@
+#' <Add Title>
+#'
+#' <Add Description>
+#'
+#' @importFrom shiny restoreInput
+#' @importFrom reactR createReactShinyInput
+#' @importFrom htmltools htmlDependency tags
+#'
+#' @export
+flipcardInput <- function(
+  inputId,
+  default = "",
+  configuration = list()
+) {
+  reactR::createReactShinyInput(
+    inputId,
+    "flipcard",
+    list(
+      reactR::html_dependency_mobx(),
+      htmltools::htmlDependency(
+        name = "flipcard-input",
+        version = "1.0.0",
+        src = "www/flipcard/flipcard",
+        package = "flipcard",
+        script = "flipcard.js"
+      )
+    ),
+    default,
+    configuration,
+    htmltools::tags$div
+  )
+}
+
+#' <Add Title>
+#'
+#' <Add Description>
+#'
+#' @export
+updateFlipcardInput <- function(session, inputId, value, configuration = NULL) {
+  message <- list(value = value)
+  if (!is.null(configuration)) message$configuration <- configuration
+  session$sendInputMessage(inputId, message);
+}

app.R

@@ -0,0 +1,65 @@
+library(shiny)
+library(flipcard)
+
+ui <- fluidPage(
+  titlePanel("reactR Input Example"),
+  wellPanel(style = "width:400px;", "Quick Example demonstrating flipping in Shiny."),
+  flipcardInput(
+    "flipInput",
+    configuration = list(
+      containerStyle = list(width = "400px", height = "400px"),
+      front = list(
+        tag = "img",
+        props = list(
+          src = "//static.pexels.com/photos/59523/pexels-photo-59523.jpeg",
+          style = list(height = "100%", width = "100%")
+        ),
+        content = NULL
+      ),
+      back = list(
+        tag = "img",
+        props = list(
+          src = "//img.buzzfeed.com/buzzfeed-static/static/2014-04/enhanced/webdr06/4/16/enhanced-11136-1396643149-13.jpg?no-auto",
+          style = list(height = "100%", width = "100%")
+        ),
+        content = NULL
+      )
+    )
+  )
+)
+
+server <- function(input, output, session) {
+  isFlipped <- FALSE
+  observe({
+    invalidateLater(1000)
+    isFlipped <<- !isFlipped
+    flipcard::updateFlipcardInput(
+      session = session,
+      inputId = "flipInput",
+      value = NULL,
+      configuration = list(
+        containerStyle = list(width = "400px", height = "400px"),
+        isFlipped = isFlipped,
+        front = list(
+          tag = "img",
+          props = list(
+            src = "//static.pexels.com/photos/59523/pexels-photo-59523.jpeg",
+            style = list(height = "100%", width = "100%")
+          ),
+          content = NULL
+        ),
+        back = list(
+          tag = "img",
+          props = list(
+            src = "//img.buzzfeed.com/buzzfeed-static/static/2014-04/enhanced/webdr06/4/16/enhanced-11136-1396643149-13.jpg?no-auto",
+            style = list(height = "100%", width = "100%")
+          ),
+          content = NULL
+        )
+      )
+    )
+  })
+
+}
+
+shinyApp(ui, server)

app_mobx.R

@@ -0,0 +1,50 @@
+library(shiny)
+library(flipcard)
+
+ui <- fluidPage(
+  tags$script(HTML(
+"
+// set up global state observable that we can reference with flipcardInput
+state = mobx.observable({isFlipped: true});
+
+// set up a Shiny message handler so we can change the state from R
+Shiny.addCustomMessageHandler('flip', function(message) {
+    state.isFlipped = !state.isFlipped;
+});
+"
+  )),
+  titlePanel(tags$span("reactR Input Example with ", tags$a(href = "https://mobx.js.org/intro/overview.html", "mobx"))),
+  wellPanel(style = "width:400px;", "In the latest version of reactR, I added mobx.  Here we leverage the value argument to reference a global observable state.  A user can now click the card to flip."),
+  flipcardInput(
+    "flipInput",
+    default = "state",
+    configuration = list(
+      containerStyle = list(width = "400px", height = "400px"),
+      front = list(
+        tag = "img",
+        props = list(
+          src = "//static.pexels.com/photos/59523/pexels-photo-59523.jpeg",
+          style = list(height = "100%", width = "100%")
+        ),
+        content = NULL
+      ),
+      back = list(
+        tag = "img",
+        props = list(
+          src = "//img.buzzfeed.com/buzzfeed-static/static/2014-04/enhanced/webdr06/4/16/enhanced-11136-1396643149-13.jpg?no-auto",
+          style = list(height = "100%", width = "100%")
+        ),
+        content = NULL
+      )
+    )
+  )
+)
+
+server <- function(input, output, session) {
+  # observe({
+  #   invalidateLater(2000, session)
+  #   session$sendCustomMessage("flip", list())
+  # })
+}
+
+shinyApp(ui, server)

app_mobx2.R

@@ -0,0 +1,54 @@
+library(shiny)
+library(flipcard)
+
+ui <- fluidPage(
+  tags$script(HTML(
+"
+// set up global state observable that we can reference with flipcardInput
+state = mobx.observable({isFlipped: true});
+
+// set up a Shiny message handler so we can change the state from R
+Shiny.addCustomMessageHandler('flip', function(message) {
+    state.isFlipped = !state.isFlipped;
+});
+
+// set up a click handler to flip in JavaScript
+function handleClick(){ state.isFlipped = !state.isFlipped }
+"
+  )),
+  titlePanel("reactR Input Example"),
+  wellPanel(style = "width: 400px;", "Now we have three mechanisms to flip.  We can click on the image or on any of the buttons."),
+  tags$button("JavaScript Flip Button", onclick="handleClick()"),
+  actionButton("btnflip", "Shiny Flip Button"),
+  flipcardInput(
+    "flipInput",
+    default = "state",
+    configuration = list(
+      containerStyle = list(width = "400px", height = "400px"),
+      front = list(
+        tag = "img",
+        props = list(
+          src = "//static.pexels.com/photos/59523/pexels-photo-59523.jpeg",
+          style = list(height = "100%", width = "100%")
+        ),
+        content = NULL
+      ),
+      back = list(
+        tag = "img",
+        props = list(
+          src = "//img.buzzfeed.com/buzzfeed-static/static/2014-04/enhanced/webdr06/4/16/enhanced-11136-1396643149-13.jpg?no-auto",
+          style = list(height = "100%", width = "100%")
+        ),
+        content = NULL
+      )
+    )
+  )
+)
+
+server <- function(input, output, session) {
+  observeEvent(input$btnflip, {
+    session$sendCustomMessage("flip", list())
+  })
+}
+
+shinyApp(ui, server)

flipcard.Rproj

@@ -0,0 +1,21 @@
+Version: 1.0
+
+RestoreWorkspace: No
+SaveWorkspace: No
+AlwaysSaveHistory: Default
+
+EnableCodeIndexing: Yes
+UseSpacesForTab: Yes
+NumSpacesForTab: 2
+Encoding: UTF-8
+
+RnwWeave: Sweave
+LaTeX: pdfLaTeX
+
+AutoAppendNewline: Yes
+StripTrailingWhitespace: Yes
+
+BuildType: Package
+PackageUseDevtools: Yes
+PackageInstallArgs: --no-multiarch --with-keep.source
+PackageRoxygenize: rd,collate,namespace