Collapse button triggers shown and hidden events. Closes #42

inst/AdminLTE/README-shiny-mods.md

@@ -1,4 +1,5 @@
 This branch of AdminLTE contains the following changes from the stock version, to make it work better with Shiny.
 
 * Attached collapse click event handler to document, instead of to each collapse button. This is the same fix as https://github.com/almasaeed2010/AdminLTE/pull/304; if that is merged, then it should be possible to go to the stock version. Also see https://github.com/rstudio/shinydashboard/issues/17 for a test app.
+* The box collapse function triggers 'shown' and 'hidden' events, so that Shiny knows when outputs are visible or not. See https://github.com/rstudio/shinydashboard/issues/42 for a test app.
 * In AdminLTE.css, the fonts are fetched from the local host, instead of from Google fonts.

inst/AdminLTE/app.js

@@ -564,12 +564,21 @@ function _init() {
         //Hide the content
         box_content.slideUp(_this.animationSpeed, function () {
           box.addClass("collapsed-box");
+          box.trigger("hidden.bs.collapse");
         });
       } else {
         //Convert plus into minus
         element.children(":first")
                 .removeClass(_this.icons.open)
                 .addClass(_this.icons.collapse);
+
+        // Techinically, it should be 'show' which is triggered here, and
+        // 'shown' which is triggered later. However, this works better because
+        // of the slow expansion transition -- the box would fully expand, and
+        // only then trigger 'shown', which then results in an update of the
+        // content. This would allow users to see the old content during the
+        // expansion.
+        box.trigger("shown.bs.collapse");
         //Show the content
         box_content.slideDown(_this.animationSpeed, function () {
           box.removeClass("collapsed-box");