From cc35e3b2aae6393a6aba083cbfd27603cac6f322 Mon Sep 17 00:00:00 2001 From: Divad0175 Date: Thu, 1 Nov 2018 16:05:32 +0100 Subject: [PATCH] improve argonCarousel, argonCarouselItem --- R/argonCarousel.R | 47 ++++++-- README.md | 4 + docs/index.html | 5 +- docs/reference/argonCarousel.html | 12 +- docs/reference/argonCarouselItem.html | 6 +- inst/examples/embedded_apps.R | 152 ++++++++++++++++++++++++++ man/argonCarousel.Rd | 8 +- man/argonCarouselItem.Rd | 4 +- 8 files changed, 225 insertions(+), 13 deletions(-) create mode 100644 inst/examples/embedded_apps.R diff --git a/R/argonCarousel.R b/R/argonCarousel.R index ff10412..8260290 100644 --- a/R/argonCarousel.R +++ b/R/argonCarousel.R @@ -4,6 +4,9 @@ #' #' @param ... Slot for \link{argonCarouselItem}. #' @param id Carousel unique id. +#' @param floating Whether to apply a floating effect. FALSE by default. +#' @param hover_lift Whether to apply a lift effect on hover. FALSE by default. +#' Not compatible with floating. Only if card_mode is TRUE. #' @param width Carousel width. #' #' @examples @@ -26,7 +29,19 @@ #' @author David Granjon, \email{dgranjon@@ymail.com} #' #' @export -argonCarousel <- function(..., id, width = 6) { +argonCarousel <- function(..., id, floating = FALSE, hover_lift = FALSE, width = 6) { + + if (hover_lift) floating <- FALSE + + carouselCl <- if (hover_lift) { + "rounded card-lift--hover shadow-lg overflow-hidden" + } else { + if (floating) { + "rounded floating shadow-lg overflow-hidden" + } else { + "rounded shadow-lg overflow-hidden" + } + } carouselItems <- list(...) len <- length(carouselItems) @@ -56,7 +71,7 @@ argonCarousel <- function(..., id, width = 6) { carouselNav <- htmltools::tags$ol(class = "carousel-indicators", carouselNavItems) # main content - carouselContent <- htmltools::tags$div(class = "carousel-inner", ...) + carouselContent <- htmltools::tags$div(class = "carousel-inner embed-responsive embed-responsive-4by3", ...) # controls carouselControls <- htmltools::tagList( @@ -80,14 +95,14 @@ argonCarousel <- function(..., id, width = 6) { # main tag carouselTag <- htmltools::tags$div( - class = "rounded shadow-lg overflow-hidden", + class = carouselCl, htmltools::tags$div( class = "carousel slide", id = id, `data-ride` = "carousel", carouselNav, - carouselContent, - carouselControls + carouselContent#, + #carouselControls ) ) @@ -104,13 +119,29 @@ argonCarousel <- function(..., id, width = 6) { #' #' @param src Image url or path. #' @param active Whether the item is active or not. +#' @param mode Item mode: "img" by default but also "iframe" or "video". #' #' @author David Granjon, \email{dgranjon@@ymail.com} #' #' @export -argonCarouselItem <- function(src = NULL, active = FALSE) { +argonCarouselItem <- function(src = NULL, active = FALSE, mode = "img") { htmltools::tags$div( - class = if (active) "carousel-item active" else "carousel-item", - htmltools::img(src = src, class = "img-fluid") + class = if (active) { + "carousel-item active embed-responsive-item" + } else { + "carousel-item embed-responsive-item" + }, + switch (mode, + "img" = htmltools::img(src = src, class = "img-fluid"), + "iframe" = htmltools::tags$iframe(src = src), + "video" = htmltools::tags$iframe( + src = src, + frameborder="0", + allow = "accelerometer; + autoplay; encrypted-media; + gyroscope; picture-in-picture", + allowfullscreen = NA + ) + ) ) } \ No newline at end of file diff --git a/README.md b/README.md index d8fc309..54aa567 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,11 @@ See [here](https://github.com/RinteRface/argonDash) for more details. ## Installation +Requires the dev version of htmltools + ```r +# install the dev version of htmltools +devtools::install_github("rstudio/htmltools") devtools::install_github("RinteRface/argonR") ``` diff --git a/docs/index.html b/docs/index.html index d322c40..dd246dc 100644 --- a/docs/index.html +++ b/docs/index.html @@ -94,7 +94,10 @@

Installation

-
devtools::install_github("RinteRface/argonR")
+

Requires the dev version of htmltools

+
# install the dev version of htmltools
+devtools::install_github("rstudio/htmltools")
+devtools::install_github("RinteRface/argonR")

diff --git a/docs/reference/argonCarousel.html b/docs/reference/argonCarousel.html index fe95aa9..f0c8bbc 100644 --- a/docs/reference/argonCarousel.html +++ b/docs/reference/argonCarousel.html @@ -123,7 +123,8 @@

Create a carousel

- 
argonCarousel(..., id, width = 6)
+ 
argonCarousel(..., id, floating = FALSE, hover_lift = FALSE,
+  width = 6)

Arguments

@@ -136,6 +137,15 @@

Arg

+ + + + + + + + diff --git a/docs/reference/argonCarouselItem.html b/docs/reference/argonCarouselItem.html index 44cd6dd..44eeb00 100644 --- a/docs/reference/argonCarouselItem.html +++ b/docs/reference/argonCarouselItem.html @@ -123,7 +123,7 @@

Create a carousel item

- 
argonCarouselItem(src = NULL, active = FALSE)
+ 
argonCarouselItem(src = NULL, active = FALSE, mode = "img")

Arguments

id

Carousel unique id.
floating

Whether to apply a floating effect. FALSE by default.

hover_lift

Whether to apply a lift effect on hover. FALSE by default. +Not compatible with floating. Only if card_mode is TRUE.

width

Carousel width.
@@ -136,6 +136,10 @@

Arg

+ + + +
active

Whether the item is active or not.
mode

Item mode: "img" by default but also "iframe" or "video".

diff --git a/inst/examples/embedded_apps.R b/inst/examples/embedded_apps.R new file mode 100644 index 0000000..93c9e00 --- /dev/null +++ b/inst/examples/embedded_apps.R @@ -0,0 +1,152 @@ +library(argonR) +library(htmltools) +library(magrittr) +app_test <- argonPage( + title = "ArgonR Static Template", + author = "Divad Nojnarg", + description = "HTML Static Template", + navbar = argonNavbar( + id = "main-navbar", + src = "https://demos.creative-tim.com/argon-design-system/assets/img/brand/white.png", + # left menu + argonNavMenu( + argonDropdown( + name = "Components", + size = "lg", + argonDropdownItem( + name = "Getting Started", + description = "BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla", + src = "test.html", + icon = "spaceship", + status = "primary" + ), + argonDropdownItem( + name = "Foundation", + description = "BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla", + src = "", + icon = "palette", + status = "warning" + ), + argonDropdownItem( + name = "Components", + description = "BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla", + src = "", + icon = "ui-04", + status = "success" + ) + ) + ), + # right menu + argonNavMenu( + side = "right", + argonNavItem( + name = "facebook", + src = "https://www.facebook.com", + icon = "facebook-square", + tooltip = "Like us on Facebook" + ), + argonNavItem( + name = "instagram", + src = "https://www.instagram.com", + icon = "instagram", + tooltip = "Follow us on Instagram" + ), + argonNavItem( + name = "twitter", + src = "https://www.twitter.com", + icon = "twitter-square", + tooltip = "Follow us on Twitter" + ), + argonNavItem( + name = "github", + src = "https://www.github.com", + icon = "github", + tooltip = "Star us on Github" + ) + ) + ), + footer = argonFooter( + has_card = FALSE, + #status = "info", + #gradient = TRUE, + argonContainer( + size = "lg", + argonRow( + argonColumn( + width = 6, + argonIconWrapper( + iconTag = argonIcon("atom"), + size = "lg", + status = "success", + shadow = TRUE, + hover_shadow = TRUE + ), + argonH1( + display = 3, + "Insert anything in the footer" + ), + argonLead( + "The Arctic Ocean freezes every winter and much of + the sea-ice then thaws every summer, and that process + will continue whatever" + ) + ), + argonColumn( + width = 6, + argonCarousel( + width = 12, + id = "carousel1", + argonCarouselItem( + src = "https://demos.creative-tim.com/argon-design-system/assets/img/theme/img-1-1200x1000.jpg", + active = TRUE + ), + argonCarouselItem( + src = "https://demos.creative-tim.com/argon-design-system/assets/img/theme/img-2-1200x1000.jpg", + active = FALSE + ) + ) %>% argonPersp(side = "right") + ) + ) + ) + ) %>% argonMargin(orientation = "t", value = 20), + # main content + argonSection( + size = "lg", + status = "default", + gradient = TRUE, + separator = TRUE, + separator_color = "white", + shape = TRUE, + argonColumn( + width = 12, + argonCarousel( + width = 12, + floating = TRUE, + hover_lift = FALSE, + id = "carousel2", + argonCarouselItem( + src = "http://130.60.24.205/dreamRs_ratp/", + active = TRUE, + mode = "iframe" + ), + argonCarouselItem( + src = "http://130.60.24.205/Lorenz_parameters/", + active = FALSE, + mode = "iframe" + ), + argonCarouselItem( + src = "http://130.60.24.205/argonDash/", + active = FALSE, + mode = "iframe" + ), + argonCarouselItem( + src = "https://www.youtube.com/embed/0wQflJ7bFNg", + active = FALSE, + mode = "video" + ) + ) %>% argonPersp(side = "right") + ) + ) %>% argonMargin(orientation = "y", value = 300) +) + +argonPageTemplate(filename = "app_test", path = "/Users/macdavidgranjon/Desktop/", app_test) \ No newline at end of file diff --git a/man/argonCarousel.Rd b/man/argonCarousel.Rd index 68b8d52..29a43a8 100644 --- a/man/argonCarousel.Rd +++ b/man/argonCarousel.Rd @@ -4,13 +4,19 @@ \alias{argonCarousel} \title{Create a carousel} \usage{ -argonCarousel(..., id, width = 6) +argonCarousel(..., id, floating = FALSE, hover_lift = FALSE, + width = 6) } \arguments{ \item{...}{Slot for \link{argonCarouselItem}.} \item{id}{Carousel unique id.} +\item{floating}{Whether to apply a floating effect. FALSE by default.} + +\item{hover_lift}{Whether to apply a lift effect on hover. FALSE by default. +Not compatible with floating. Only if card_mode is TRUE.} + \item{width}{Carousel width.} } \description{ diff --git a/man/argonCarouselItem.Rd b/man/argonCarouselItem.Rd index a540873..745f32d 100644 --- a/man/argonCarouselItem.Rd +++ b/man/argonCarouselItem.Rd @@ -4,12 +4,14 @@ \alias{argonCarouselItem} \title{Create a carousel item} \usage{ -argonCarouselItem(src = NULL, active = FALSE) +argonCarouselItem(src = NULL, active = FALSE, mode = "img") } \arguments{ \item{src}{Image url or path.} \item{active}{Whether the item is active or not.} + +\item{mode}{Item mode: "img" by default but also "iframe" or "video".} } \description{ Build an argon carousel item