waypointer
Simple animated waypoints for shiny.
Installation
# install.packages("remotes")
remotes::install_github("RinteRface/waypointer")
Guide
- Place
use_waypointer()
anywhere in your ui. - Create a waypoint with
new
method, giving it at least the id of the element to watch. - Start the waypoint with the
start
method. - Watch the waypoint with the
get_direction
method.
Methods
Note that the get_*
family of methods return character vectors and not the waypoint, unlike others.
new
- create a waypoint.start
- start watching the waypoint.enable
- enable the waypoint (enabled by default)disable
- disable the waypoint.destroy
- destroy the waypoint.animate
- animate the waypoint, see?.init
for the full list.get_direction
- returns the direction in which the user scrolls passed the waypoint (up
ordown
)get_triggered
- returnsTRUE
if the waypoint has been triggered previously, andFALSE
otherwise.
Arguments
All the arguments are passed to the new
method, at the expection of animation
which can also be passed to the animate
method.
dom_id
- Id of element to watch.animate
- Set toTRUE
to automatically animate when the waypoint is triggered.animation
- Name of animation, defaults toshake
.offset
- By default, the handler is triggered when the top of an element hits the top of the viewport. The offset changes the location of that trigger point.horizontal
- When horizontal is set to true, all of this changes to the horizontal axis and theget_direction
method will returnleft
orright
.id
- Id of waypoint. When used you can replace theget_*
family of methods to traditional shiny inputs, e.g. if theid
of the waypoint is set tomyInput
then you can obtain thedirection
in your shiny server withinput$myInput_direction
.
Examples
Create a waypoint with waypoint$new()
passing at least the id of the element to observe as dom_id
(first argument). Note that technically the get_*
family of methods are input
s, you therefore may need to use shiny::req
where needed (see below).
library(shiny)
library(waypointer)
ui <- fluidPage(
use_waypointer(),
div(
h1("Scroll down"),
style = "min-height:90vh"
),
verbatimTextOutput("result"),
plotOutput("plot"),
div(style = "min-height:90vh")
)
server <- function(input, output, session) {
w <- Waypoint$
new("plot", offset = "20%")$
start()
output$result <- renderPrint({
w$get_direction()
})
output$plot <- renderPlot({
req(w$going_down())
# show if scrolling down
if(w$going_down())
hist(runif(100))
})
}
shinyApp(ui, server)
Note that in the above we use the get_direction
method to get the direction in which the user is scrolling, relative to the given dom_id
. However if you provide an id
when initialising the waypoint then you can use the traditional way of accessing callbacks: input$id_direction
. The example below would then look like:
library(shiny)
library(waypointer)
ui <- fluidPage(
use_waypointer(),
div(
h1("Scroll down"),
style = "min-height:90vh"
),
verbatimTextOutput("result"),
plotOutput("plot"),
div(style = "min-height:90vh")
)
server <- function(input, output, session) {
w <- Waypoint$
new("plot", offset = "20%", id = "myWaypoint")$
start()
output$result <- renderPrint({
w$get_direction()
})
output$plot <- renderPlot({
req(input$myWaypoint_direction)
# show if scrolling down
if(input$myWaypoint_direction == "down")
hist(runif(100))
})
}
shinyApp(ui, server)
You can also animate the waypoint, setting animate
to TRUE
will automatically animate the waypoint when is triggered.
library(shiny)
library(waypointer)
ui <- fluidPage(
use_waypointer(),
div(
"Scroll!",
style = "min-height:90vh"
),
verbatimTextOutput("result"),
plotOutput("plot"),
div(style = "min-height:90vh")
)
server <- function(input, output, session) {
w <- Waypoint$
new(
"plot",
offset = "20%",
animate = TRUE,
id = "waypoint"
)$
start()
output$result <- renderPrint({
input$waypoint_direction
})
output$plot <- renderPlot({
req(input$waypoint_direction)
if(input$waypoint_direction == "down")
hist(runif(100))
})
}
shinyApp(ui, server)
Otherwise you may use the animate
method to manually trigger the animation.
library(shiny)
library(waypointer)
ui <- fluidPage(
use_waypointer(),
div(
"Scroll!",
style = "min-height:90vh"
),
verbatimTextOutput("result"),
plotOutput("plot"),
div(style = "min-height:90vh")
)
server <- function(input, output, session) {
w <- Waypoint$
new("plot", offset = "20%")$
start()
output$result <- renderPrint({
w$get_direction()
})
output$plot <- renderPlot({
req(w$get_direction())
hist(runif(100))
w$animate()
})
}
shinyApp(ui, server)