Enable explicit box activation

ColorlibHQ · May 21, 2015 · 3eb31be · 3eb31be
1 parent d08e0e0
commit 3eb31be
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 4 deletions.
diff --git a/dist/js/app.js b/dist/js/app.js
@@ -528,16 +528,19 @@ function _init() {
   $.AdminLTE.boxWidget = {
     selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
     icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
-    activate: function () {
+    activate: function (_box) {
       var _this = this;
+      if (! _box) {
+        _box = document; // activate all boxes per default
+      }
       //Listen for collapse event triggers
-      $(_this.selectors.collapse).on('click', function (e) {
+      $(_box).find(_this.selectors.collapse).on('click', function (e) {
         e.preventDefault();
         _this.collapse($(this));
       });
 
       //Listen for remove event triggers
-      $(_this.selectors.remove).on('click', function (e) {
+      $(_box).find(_this.selectors.remove).on('click', function (e) {
         e.preventDefault();
         _this.remove($(this));
       });
@@ -656,6 +659,23 @@ function _init() {
 
 })(jQuery);
 
+/*
+ * EXPLICIT BOX ACTIVATION
+ * -----------------------
+ * This is a custom plugin to use with the component BOX. It allows you to activate
+ * a box inserted in the DOM after the app.js was loaded.
+ *
+ * @type plugin
+ * @usage $("#box-widget").activateBox();
+ */
+(function ($) {
+
+  $.fn.activateBox = function () {
+    $.AdminLTE.boxWidget.activate(this);
+  };
+
+})(jQuery);
+
 /*
  * TODO LIST CUSTOM PLUGIN
  * -----------------------

diff --git a/dist/js/app.min.js b/dist/js/app.min.js
diff --git a/documentation/build/include/components.html b/documentation/build/include/components.html
@@ -985,6 +985,13 @@ <h3 class="box-title">Tootips on buttons</h3>
 &LT;/div>&LT;!-- /.box --></pre>
     </div><!-- /.col -->
   </div><!-- /.row -->
+  <p>
+    If you inserted a box into the document after <code>app.js</code> was loaded, you have to activate
+    the collapse/remove buttons explicitly by calling <code>.activateBox()</code>:
+  </p>
+  <pre class='prettyprint'><code class='html'>&LT;script>
+    $("#box-widget").activateBox();
+&LT;/script></code></pre>
 
   <h4>Loading States</h4>
   <div class="row">

diff --git a/documentation/index.html b/documentation/index.html
@@ -1355,6 +1355,13 @@ <h3 class="box-title">Tootips on buttons</h3>
 &LT;/div>&LT;!-- /.box --></pre>
     </div><!-- /.col -->
   </div><!-- /.row -->
+  <p>
+    If you inserted a box into the document after <code>app.js</code> was loaded, you have to activate
+    the collapse/remove buttons explicitly by calling <code>.activateBox()</code>:
+  </p>
+  <pre class='prettyprint'><code class='html'>&LT;script>
+    $("#box-widget").activateBox();
+&LT;/script></code></pre>
 
   <h4>Loading States</h4>
   <div class="row">