init

.Rbuildignore

@@ -0,0 +1,2 @@
+^LICENSE\.md$
+test.R

.gitignore

@@ -0,0 +1 @@
+test.R

DESCRIPTION

@@ -0,0 +1,15 @@
+Package: pushbar
+Title: 'pushbar.js' for 'Shiny'
+Version: 0.0.0.9000
+Authors@R: 
+    person(given = "John",
+           family = "Coene",
+           role = c("aut", "cre"),
+           email = "jcoenep@gmail.com")
+Description: Create push bars from left, right, top and bottom.
+License: MIT + file LICENSE
+Encoding: UTF-8
+LazyData: true
+Imports: 
+    shiny
+RoxygenNote: 6.1.1

LICENSE

@@ -0,0 +1,2 @@
+YEAR: 2019
+COPYRIGHT HOLDER: John Coene

LICENSE.md

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright (c) 2019 John Coene
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

NAMESPACE

@@ -0,0 +1,8 @@
+# Generated by roxygen2: do not edit by hand
+
+export(pushbar)
+export(pushbar_close)
+export(pushbar_deps)
+export(pushbar_open)
+export(setup_pushbar)
+importFrom(shiny,tags)

R/pushbar.R

@@ -0,0 +1,107 @@
+#' Setup Pushbar
+#'
+#' Set up pushbar.
+#'
+#' @param blur Whether to blur the background when pushbar is opened.
+#' @param overlay Whether to darken the background when pushbar is opened.
+#' @param session A valid Shiny session.
+#' 
+#' @examples
+#' library(shiny)
+#'
+#' ui <- fluidPage(
+#'   pushbar_deps(),
+#'   actionButton("open", "Open pushbar"),
+#'   pushbar(
+#'     h4("HELLO")
+#'   )
+#' )
+#' 
+#' server <- function(input, output, session){
+#'
+#'   setup_pushbar()
+#'  
+#'   observeEvent(input$open, {
+#'     pushbar_open()
+#'   })  
+#' }
+#' 
+#' if(interactive()) shinyApp(ui, server)
+#' 
+#' @importFrom shiny tags
+#' @name pushbar
+#' @export
+pushbar_deps <- function() {
+
+  shiny::singleton(
+    tags$head(
+      tags$link(
+        href = "pushbar-assets/pushbar.css",
+        rel="stylesheet",
+        type="text/css"
+      ),
+      tags$script(
+        src = "pushbar-assets/pushbar.js"
+      ),
+      tags$script(
+        src = "pushbar-assets/custom.js"
+      )
+    )
+  )
+}
+
+#' @rdname pushbar
+#' @export
+setup_pushbar <- function(session, blur = FALSE, overlay = TRUE){
+  opts <- list(
+    blur = blur,
+    overlay = overlay
+  )
+  session$sendCustomMessage("pushbar-setup", opts)
+}
+
+#' Pushbar
+#' 
+#' Creates element containing pushbar content.
+#' 
+#' @param from Wherefrom the pushbar should open.
+#' @param class Additional class to pass to \code{div}.
+#' @param ... Any other valid \link[shiny]{tags}.
+#' 
+#' @details Creates a \code{div} with id \code{pushbar} + \code{from}, i.e.: \code{pushbarLeft} (default).
+#' 
+#' @export
+pushbar <- function(..., from = c("left", "right", "top", "bottom"), class = NULL){
+
+  from <- match.arg(from)
+
+  cl <- paste0("pushbar from_", from, " ", class)
+  id <- .make_id(from)
+
+  shiny::div(
+    `data-pushbar-id` = id,
+    class = cl,
+    ...
+  )
+}
+
+#' Pushbar Buttons
+#' 
+#' Open and close pushbar programatically.
+#' 
+#' @param from The pushbar side to open.
+#' @param session A valid Shiny session.
+#' 
+#' @name pushbar-buttons
+#' @export
+pushbar_open <- function(session, from = c("left", "right", "top", "bottom")){
+  from <- match.arg(from)
+  id <- .make_id(from)
+  session$sendCustomMessage("pushbar-open", id)
+}
+
+#' @rdname pushbar-buttons
+#' @export
+pushbar_close <- function(session){
+  session$sendCustomMessage("pushbar-close", list())
+}

R/utils.R

@@ -0,0 +1,3 @@
+.make_id <- function(x){
+  paste0("pushbar", tools::toTitleCase(x))
+}

R/zzz.R

@@ -0,0 +1,6 @@
+.onLoad <- function(libname, pkgname) {
+  shiny::addResourcePath(
+    "pushbar-assets",
+    system.file("assets", package = "pushbar")
+  )
+}

README.md

@@ -0,0 +1,38 @@
+# pushbar
+
+Brings [pushbar.js](https://oncebot.github.io/pushbar.js/) to Shiny.
+
+## Installation
+
+``` r
+# install.packages("remotes")
+remotes::install_github("JohnCoene/pushbar")
+```
+
+## Example
+
+``` r
+library(shiny)
+
+ui <- fluidPage(
+   pushbar_deps(),
+   actionButton("open", "Open pushbar"),
+   pushbar(
+     h4("HELLO"),
+     actionButton("close", "Close pushbar")
+   )
+ )
+
+ server <- function(input, output, session){
+   setup_pushbar(session)
+   observeEvent(input$open, {
+     pushbar_open(session)
+   })  
+   observeEvent(input$close, {
+     pushbar_close(session)
+   })  
+ }
+
+ if(interactive()) shinyApp(ui, server)
+```
+

inst/assets/custom.js

@@ -0,0 +1,12 @@
+var pushbar; 
+
+Shiny.addCustomMessageHandler('pushbar-setup', function(opts) {
+  pushbar = new Pushbar(opts);
+});
+Shiny.addCustomMessageHandler('pushbar-open', function(id) {
+  pushbar.open(id);
+});
+
+Shiny.addCustomMessageHandler('pushbar-close', function(msg) {
+  pushbar.close();
+});

inst/assets/pushbar.css

@@ -0,0 +1,85 @@
+.pushbar.opened{
+display: block;
+}
+
+html.pushbar_locked{
+    overflow: hidden;
+    -ms-touch-action: none;
+    touch-action: none;
+}
+
+
+.pushbar_locked .pushbar_main_content.pushbar_blur{
+	filter:blur(15px);
+}
+.pushbar{
+	z-index: 1000;
+	position: fixed;
+	will-change: transform;
+	overflow-y: auto;
+	transition:transform 0.5s ease;
+	will-change: transform;
+	background:#fff;
+}
+.pushbar_overlay{
+	z-index: -999;
+	position: fixed;
+	width: 100%;
+	max-width: 100%;
+	height: 100%;
+	min-height: 100vh;
+	top: 0;
+	left: 0;
+    will-change: opacity;
+    transition:opacity 0.5s ease;
+    opacity:0;
+    will-change: opacity;
+	background: #3c3442;
+}
+html.pushbar_locked .pushbar_overlay{
+	opacity:0.8;
+	z-index: 999;
+    transition:opacity 0.5s ease;
+}
+
+
+.pushbar.from_left{
+	top: 0;
+	left: 0;
+	width: 256px;
+	max-width: 100%;
+	height: 100%;
+	min-height: 100vh;
+	transform: translateZ(0) translateX(-100%);
+}
+
+.pushbar.from_right{
+	top: 0;
+	right: 0;
+	width: 256px;
+	max-width: 100%;
+	height: 100%;
+	min-height: 100vh;
+	transform: translateZ(0) translateX(100%);
+}
+
+.pushbar.from_top{
+	top: 0;
+	left: 0;
+	width: 100%;
+	max-width: 100%;
+	min-height: 150px;
+	transform: translateZ(0) translateY(-100%);
+}
+.pushbar.from_bottom{
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	max-width: 100%;
+	min-height: 150px;
+	transform: translateZ(0) translateY(100%);
+}
+
+.pushbar.opened{
+   transform: translateX(0px) translateY(0px);
+}