improve argonCarousel, argonCarouselItem

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
+      )
+    )
   )
 }

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")
 ```
 

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)