/
carouselPanel.R
136 lines (128 loc) · 5.41 KB
/
carouselPanel.R
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
#' Layout a Carousel Panel
#'
#' Adds a carousel panel to the current shiny app.
#'
#' @param ... Elements of the carousel. Can be multiple elements wrapped in a
#' div(), or single output elements.
#' @param auto.advance Wheather the carousel should automatically advance to the
#' next element, of it it should only advance when the user clicks the navigation
#' arrows.
#'
#' @examples
#' # Define UI
#' shinyUI(fluidPage(
#'
#' # Application title
#' titlePanel("Hello Shiny!"),
#'
#' sidebarLayout(
#'
#' # Sidebar with a slider input
#' sidebarPanel(
#' sliderInput("obs",
#' "Number of observations:",
#' min = 0,
#' max = 1000,
#' value = 500)
#' ),
#'
#' # Show a plot of the generated distribution
#' mainPanel(
#' carouselPanel(
#' plotOutput("distPlot"),
#' plotOutput("xyPlot"),
#' auto.advance=TRUE
#' )
#' )
#' )
#' ))
#'
#' @export
carouselPanel <- function(..., auto.advance=FALSE){
n = paste(strsplit(paste(strsplit(as.character(rnorm(1)), "[.]")[[1]], collapse=""), "-")[[1]], collapse="")
contents = list(...)
tagList(
# Import Font Awesome CSS
singleton(tags$head(tags$link(rel="stylesheet", type="text/css",
href = "shared/font-awesome/css/font-awesome.min.css"))),
# Overwrite the stock white indicators
singleton(tags$head(tags$style(".carousel-indicators li {
background-color: #DDD;
background-color: rgba(70,70,70,.25);
}
.carousel-indicators .active {
background-color: #999;
}
.carousel-indicators {
bottom: 15px !important;
top: auto;
list-style: none outside none;
margin: 0;
position: absolute;
right: 70px;
z-index: 5;
}
.carousel-control {
opacity: 0.2;
border: none;
top: auto;
}" ))),
# Set up Javascript to call carousel when document is ready
if( !auto.advance ){
singleton(tags$head(tags$script("$(document).ready(function(){
$('.carousel').carousel({
interval: false
}).on('slide', function(e){
console.log('Slide Event');
console.log(this);
});
});")))
}else{
singleton(tags$head(tags$script("$(document).ready(function(){
$('.carousel').carousel({
interval: 2000
}).on('slide', function(e){
console.log('Slide Event');
});
});")))
},
#Set up carousel
div(id=paste0("carousel-", n), class="carousel slide", `data-interval`=tolower(as.character(auto.advance)),
# Carousel Inner Div - contains the content to display
div(class="carousel-inner",
div(class="item active", contents[[1]], style="padding: 0px 70px;"),
mapply(function(elm){
list(div(class="item", elm, style="padding: 0px 70px;"))
}, contents[2:length(contents)], SIMPLIFY=F, USE.NAMES=F)),
# Carousel controls
a(class="left carousel-control",
`data-slide`="prev",
href=paste0("#carousel-", n),
style="background: transparent; color: #000",
HTML(paste0("<i class='fa fa-chevron-left'></i>")) ),
a(class="right carousel-control",
`data-slide`="next",
href=paste0("#carousel-", n),
style="background: transparent; color: #000",
HTML(paste0("<i class='fa fa-chevron-right'></i>")) ),
# Generate the carousel indicators
HTML("<ol class='carousel-indicators'>"),
tag('li', list(class='active', `data-slide-to`=paste(0),
`data-target`=paste0("#carousel-", n))),
mapply(function(i){
list(tag('li', list(class='', `data-slide-to`=paste(i),
`data-target`=paste0("#carousel-", n))) )
}, 1:(length(contents)-1), SIMPLIFY=F, USE.NAMES=F),
HTML("</ol>")
),
# source: https://gist.github.com/smbache/eeef4bf21b053da780eb
tags$script(sprintf("$('#carousel-%s').bind('slide.bs.carousel', function (e) {
$(e.target).find('.shiny-bound-output').each(function(i) {
$('#' + this.id).trigger('hidden')
});
$(e.relatedTarget).find('.shiny-bound-output').each(function(i) {
$('#' + this.id).trigger('shown')
});
}); ", n))
)
}