Load CSS/JS assests using htmlDependency (#280)

Closes #277 and improves how we load CSS/JS assets in our packages. Note that the CSS and JS files were just renamed and moved. The changes are only because of linting done on them.
insightsengineering · Jan 29, 2025 · f5cfddf · f5cfddf
1 parent 4d13a32
commit f5cfddf
Show file tree

Hide file tree

Showing 21 changed files with 148 additions and 110 deletions.
diff --git a/R/draggable_buckets.R b/R/draggable_buckets.R
@@ -1,3 +1,16 @@
+#' @keywords internal
+#' @noRd
+draggable_buckets_deps <- function() {
+  htmltools::htmlDependency(
+    name = "teal-widgets-draggable-buckets",
+    version = utils::packageVersion("teal.widgets"),
+    package = "teal.widgets",
+    src = "draggable-buckets",
+    script = "draggable-buckets.js",
+    stylesheet = "draggable-buckets.css"
+  )
+}
+
 #' @title Draggable Buckets
 #' @description  `r lifecycle::badge("experimental")`
 #' A custom widget with draggable elements that can be put into buckets.
@@ -67,10 +80,7 @@ draggable_buckets <- function(input_id, label, elements = character(), buckets)
   elements_iterator$it <- 0
 
   shiny::tagList(
-    shiny::singleton(tags$head(
-      shiny::includeScript(system.file("widgets/draggable_buckets.js", package = "teal.widgets"))
-    )),
-    include_css_files("draggable_buckets.css"),
+    draggable_buckets_deps(),
     shiny::div(
       tags$span(label),
       render_unbucketed_elements(elements = elements, elements_iterator = elements_iterator, widget_id = input_id),

diff --git a/R/include_css_js.R b/R/include_css_js.R
diff --git a/R/optionalInput.R b/R/optionalInput.R
@@ -1,3 +1,15 @@
+#' @keywords internal
+#' @noRd
+optional_select_input_deps <- function() {
+  htmltools::htmlDependency(
+    name = "teal-widgets-optional-select-input",
+    version = utils::packageVersion("teal.widgets"),
+    package = "teal.widgets",
+    src = "optional-select-input",
+    stylesheet = "optional-select-input.css"
+  )
+}
+
 #' Wrapper for `pickerInput`
 #'
 #' @description `r lifecycle::badge("stable")`
@@ -244,7 +256,7 @@ optionalSelectInput <- function(inputId, # nolint
   )
 
   tags$div(
-    include_css_files(pattern = "picker_input"),
+    optional_select_input_deps(),
 
     # when selected values in ui_picker change
     # then update ui_fixed - specifically, update '{id}_selected_text' element

diff --git a/R/panel_group.R b/R/panel_group.R
@@ -72,6 +72,19 @@ panel_group <- function(..., id = NULL) {
   )
 }
 
+#' @keywords internal
+#' @noRd
+panel_item_deps <- function() {
+  htmltools::htmlDependency(
+    name = "teal-widgets-panel-item",
+    version = utils::packageVersion("teal.widgets"),
+    package = "teal.widgets",
+    src = "panel-item",
+    script = "panel-item.js",
+    stylesheet = "panel-item.css"
+  )
+}
+
 #' Panel item widget
 #'
 #' @description `r lifecycle::badge("experimental")`\cr
@@ -183,8 +196,7 @@ panel_item <- function(title, ..., collapsed = TRUE, input_id = NULL) {
 
 
     tagList(
-      include_css_files(pattern = "panel.css"),
-      tags$head(shiny::includeScript(system.file("js/panel_group.js", package = "teal.widgets"))),
+      panel_item_deps(),
       res_tag
     )
   })

diff --git a/R/plot_with_settings.R b/R/plot_with_settings.R
@@ -1,3 +1,16 @@
+#' @keywords internal
+#' @noRd
+plot_with_settings_deps <- function() {
+  htmltools::htmlDependency(
+    name = "teal-widgets-plot-with-settings",
+    version = utils::packageVersion("teal.widgets"),
+    package = "teal.widgets",
+    src = "plot-with-settings",
+    script = "plot-with-settings.js",
+    stylesheet = "plot-with-settings.css"
+  )
+}
+
 #' @name plot_with_settings
 #' @rdname plot_with_settings
 #' @export
@@ -7,8 +20,8 @@ plot_with_settings_ui <- function(id) {
   ns <- NS(id)
 
   tagList(
+    plot_with_settings_deps(),
     shiny::singleton(tags$head(
-      shiny::includeScript(system.file("js", "resize_plot.js", package = "teal.widgets")),
       tags$script(
         sprintf(
           'establishPlotResizing("%s", "%s", "%s");',
@@ -18,7 +31,6 @@ plot_with_settings_ui <- function(id) {
         )
       )
     )),
-    include_css_files("plot_with_settings"),
     tags$div(
       id = ns("plot-with-settings"),
       tags$div(

diff --git a/R/table_with_settings.R b/R/table_with_settings.R
@@ -1,3 +1,15 @@
+#' @keywords internal
+#' @noRd
+table_with_settings_deps <- function() {
+  htmltools::htmlDependency(
+    name = "teal-widgets-table-with-settings",
+    version = utils::packageVersion("teal.widgets"),
+    package = "teal.widgets",
+    src = "table-with-settings",
+    stylesheet = "table-with-settings.css"
+  )
+}
+
 #' @name table_with_settings
 #'
 #' @title `table_with_settings` module
@@ -17,7 +29,7 @@ table_with_settings_ui <- function(id, ...) {
   ns <- NS(id)
 
   tagList(
-    include_css_files("table_with_settings"),
+    table_with_settings_deps(),
     tags$div(
       id = ns("table-with-settings"),
       tags$div(

diff --git a/R/verbatim_popup.R b/R/verbatim_popup.R
@@ -1,3 +1,15 @@
+#' @keywords internal
+#' @noRd
+verbatim_popup_deps <- function() {
+  htmltools::htmlDependency(
+    name = "teal-widgets-verbatim-popup",
+    version = utils::packageVersion("teal.widgets"),
+    package = "teal.widgets",
+    src = "verbatim-popup",
+    script = "verbatim-popup.js"
+  )
+}
+
 #' A `shiny` module that pops up verbatim text.
 #' @name verbatim_popup
 #' @description `r lifecycle::badge("experimental")`
@@ -42,9 +54,7 @@ verbatim_popup_ui <- function(id, button_label, type = c("button", "link"), ...)
   )
 
   shiny::tagList(
-    shiny::singleton(
-      tags$head(shiny::includeScript(system.file("js/verbatim_popup.js", package = "teal.widgets")))
-    ),
+    verbatim_popup_deps(),
     shinyjs::useShinyjs(),
     do.call(ui_function, c(ui_args, list(...)))
   )
@@ -118,9 +128,9 @@ button_click_observer <- function(click_event,
       shiny::showModal(
         shiny::modalDialog(
           shiny::tagList(
-            include_css_files(pattern = "verbatim_popup"),
             tags$div(
               class = "mb-4",
+              style = "margin-bottom: 1rem;",
               shiny::actionButton(
                 paste0(copy_button_id, 1),
                 "Copy to Clipboard",

diff --git a/R/white_small_well.R b/R/white_small_well.R
@@ -17,9 +17,9 @@
 #' white_small_well(shiny::htmlOutput("summary"))
 white_small_well <- function(...) {
   shiny::tagList(
-    include_css_files(pattern = "custom"),
     tags$div(
-      class = "well well-sm bg-white",
+      class = "well well-sm",
+      style = "background-color: white;",
       ...
     )
   )

diff --git a/inst/css/custom.css b/inst/css/custom.css
diff --git a/inst/css/verbatim_popup.css b/inst/css/verbatim_popup.css
diff --git a/inst/css/draggable_buckets.css → inst/draggable-buckets/draggable-buckets.css b/inst/css/draggable_buckets.css → inst/draggable-buckets/draggable-buckets.css
@@ -1,6 +1,5 @@
-/* teal.widgets draggable css */
-
 .draggableBuckets {
+  background: red !important;
   display: block;
   gap: 1rem;
   margin: 2px;
@@ -18,7 +17,7 @@
 }
 
 .element {
-  display:flex;
+  display: flex;
   justify-content: center;
   min-width: 1.5rem;
   background-color: hsl(0, 0%, 95%);
@@ -51,4 +50,3 @@
   position: absolute;
   margin-top: 8px;
 }
-
diff --git a/inst/widgets/draggable_buckets.js → inst/draggable-buckets/draggable-buckets.js b/inst/widgets/draggable_buckets.js → inst/draggable-buckets/draggable-buckets.js
@@ -78,11 +78,11 @@ $.extend(draggableBuckets, {
 
   // The following two methods, setInvalid and clearInvalid, will be called
   // whenever this input fails or passes (respectively) validation.
-  setInvalid: function(el, data) {
+  setInvalid: function (el, data) {
     el.setAttribute("data-error-message", data.message);
     el.classList.add("draggableBuckets-invalid");
   },
-  clearInvalid: function(el) {
+  clearInvalid: function (el) {
     el.removeAttribute("data-error-message");
     el.classList.remove("draggableBuckets-invalid");
   },

diff --git a/inst/js/panel_group.js b/inst/js/panel_group.js
diff --git a/inst/css/picker_input.css → ...al-select-input/optional-select-input.css b/inst/css/picker_input.css → ...al-select-input/optional-select-input.css
@@ -1,5 +1,3 @@
-/* teal.widgets picker_input css */
-
 /* to set the alignment of pickerInput dropdowns */
 /* boostrap 3 */
 .dropdown-menu.open {

diff --git a/inst/css/panel.css → inst/panel-item/panel-item.css b/inst/css/panel.css → inst/panel-item/panel-item.css
@@ -1,5 +1,3 @@
-/* teal.widgets panel css */
-
 .inline {
   display: inline;
 }

diff --git a/inst/panel-item/panel-item.js b/inst/panel-item/panel-item.js
@@ -0,0 +1,13 @@
+$(document).ready(function () {
+  $(document).on("click", ".panel-heading, .card-heading", function () {
+    var $icon = $(this).find(".dropdown-icon");
+
+    if ($(this).hasClass("collapsed")) {
+      $icon.removeClass("fa-angle-down").addClass("fa-angle-right");
+      $(this).attr("aria-expanded", "true");
+    } else {
+      $icon.removeClass("fa-angle-right").addClass("fa-angle-down");
+      $(this).attr("aria-expanded", "false");
+    }
+  });
+});
diff --git a/inst/css/plot_with_settings.css → ...plot-with-settings/plot-with-settings.css b/inst/css/plot_with_settings.css → ...plot-with-settings/plot-with-settings.css
@@ -1,5 +1,3 @@
-/* teal.widgets plot_with_settings css */
-
 .well .output {
   position: relative;
 }
@@ -36,16 +34,33 @@
   overflow-x: auto;
 }
 
-.plot-modal .modal .modal-dialog .modal-content .modal-body .plot-modal-sliders {
+.plot-modal
+  .modal
+  .modal-dialog
+  .modal-content
+  .modal-body
+  .plot-modal-sliders {
   overflow: hidden;
 }
 
-.plot-modal .modal .modal-dialog .modal-content .modal-body .plot-modal-sliders div:nth-child(1) {
+.plot-modal
+  .modal
+  .modal-dialog
+  .modal-content
+  .modal-body
+  .plot-modal-sliders
+  div:nth-child(1) {
   float: left;
   width: 40%;
 }
 
-.plot-modal .modal .modal-dialog .modal-content .modal-body .plot-modal-sliders div:nth-child(2) {
+.plot-modal
+  .modal
+  .modal-dialog
+  .modal-content
+  .modal-body
+  .plot-modal-sliders
+  div:nth-child(2) {
   float: right;
   width: 40%;
 }

diff --git a/inst/js/resize_plot.js → .../plot-with-settings/plot_with_settings.js b/inst/js/resize_plot.js → .../plot-with-settings/plot_with_settings.js
@@ -1,13 +1,12 @@
 // Function that registers resize observer for particular parent elements.
 // Arguments are namespaced ids of DOM elements.
-var establishPlotResizing = function (
-  plot_out,
-  flex_width,
-  plot_modal_width) {
-
+var establishPlotResizing = function (plot_out, flex_width, plot_modal_width) {
   // Create resize observer to trigger shiny actions when plot container is resized.
   var plotObserver = new ResizeObserver(function () {
-    Shiny.onInputChange(flex_width, document.getElementById(plot_out).clientWidth);
+    Shiny.onInputChange(
+      flex_width,
+      document.getElementById(plot_out).clientWidth
+    );
     Shiny.onInputChange(plot_modal_width, 0.87 * window.innerWidth);
     //based on modal CSS property, also accounting for margins
   });
@@ -17,7 +16,7 @@ var establishPlotResizing = function (
   var plotNoticer = new MutationObserver(function () {
     const plotContainer = document.getElementById(plot_out);
     if (plotContainer === null) return;
-    plotObserver.observe(plotContainer, { box: "border-box" } );
+    plotObserver.observe(plotContainer, { box: "border-box" });
   });
 
   plotNoticer.observe(document, { subtree: true, childList: true });