Added support for accordions

thecodeassassin · Jan 31, 2014 · fd34b28 · fd34b28
1 parent bbfa673
commit fd34b28
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-Bootstrap tabs remote data plugin
+Bootstrap remote data plugin
 =====================
 Author: Stephen Hoogendijk - TheCodeAssassin
 
@@ -8,9 +8,9 @@ This plugin uses the jQuery loadmask plugin by Sergiy Kovalchuk.
 
 ================================================
 
-Simple boostrap plugin to allow tabs to fetch their data from a remote source
+Simple boostrap plugin to allow tabs and accordions to fetch their data from a remote source
 
-*The script is only 1.7k compressed!*
+*The script is only 2.5k compressed!*
 
 Requirements
 ============
@@ -43,14 +43,20 @@ You can use the following properties to enable remote data tabs:
 
 Check the demo for details on how to use this plugin.
 
+*Note: The properties are still named data-tab due to backwards compatibility*
+
 Note
 ====
-This plugin hooks into the bootstrap tabs 'show' event. In order to use a custom event callback, you can provide data-tab-callback
+This plugin hooks into the bootstrap tab/accordion 'show' event. In order to use a custom event callback, you can provide data-tab-callback
 to let the plugin execute your custom callback. If you want a callback to be fired after the show event, use the native
 shown event.
 
 Changelog
 ===
+Version 1.1.1
+------
+Added support for accordions
+
 
 Version 1.1.0
 ------

diff --git a/demo/index.html b/demo/index.html
@@ -9,7 +9,7 @@
 
     <style type="text/css">
         div.tab-pane {
-            min-height: 300px;
+            min-height: 200px;
         }
     </style>
 
@@ -23,7 +23,9 @@
 </head>
 <body>
 <h1>Bootstrap tabs remote data plugin demo</h1>
+<hr>
 
+<h2>Tabs demo</h2>
 <!-- Nav tabs -->
 <ul class="nav nav-tabs">
     <li class="active"><a href="#home" data-toggle="tab">No remote data</a></li>
@@ -45,6 +47,49 @@ <h1>Bootstrap tabs remote data plugin demo</h1>
     <div class="tab-pane" id="jsondata"></div>
 </div>
 
+<h2>Accordion demo</h2>
+
+<div class="panel-group" id="accordion">
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h4 class="panel-title">
+        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" data-tab-url="remote/normal.html">Simple remote data</a>
+      </h4>
+    </div>
+    <div id="collapseOne" class="panel-collapse collapse in">
+      <div class="panel-body">&nbsp;</div>
+    </div>
+  </div>
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h4 class="panel-title">
+        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
+          Collapsible Group Item #2
+        </a>
+      </h4>
+    </div>
+    <div id="collapseTwo" class="panel-collapse collapse">
+      <div class="panel-body">
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+      </div>
+    </div>
+  </div>
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h4 class="panel-title">
+        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
+	  Collapsible Group Item #3
+        </a>
+      </h4>
+    </div>
+    <div id="collapseThree" class="panel-collapse collapse">
+      <div class="panel-body">
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+      </div>
+    </div>
+  </div>
+</div>
+
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->

diff --git a/js/bootstrap-remote-tabs.js b/js/bootstrap-remote-tabs.js
@@ -2,7 +2,7 @@ var $ = jQuery;
 /*!
  *
  * Bootstrap remote data tabs plugin
- * Version 1.0.1
+ * Version 1.1.1
  *
  * Author: Stephen Hoogendijk (TheCodeAssassin)
  *
@@ -15,12 +15,21 @@ var hasLoadingMask = (jQuery().mask ? true : false),
     bootstrapVersion2 = (jQuery().typeahead ? true : false);
 
 // hook the event based on the version of bootstrap
-var showEvent = (bootstrapVersion2 ? 'show' : 'show.bs.tab');
+var tabShowEvent = (bootstrapVersion2 ? 'show' : 'show.bs.tab');
+var accordionShowEvent = (bootstrapVersion2 ? 'show' : 'show.bs.collapse');
 
 $(function() {
     var hash = document.location.hash;
     if (hash) {
-       $('.nav-tabs a[href*='+hash+']').tab(showEvent);
+       var hasTab = $('.nav-tabs a[href*='+hash+']');	
+       if (hasTab) {
+            hasTab.tab(tabShowEvent);
+       }
+
+       var hasAccordion = $('.accordion-heading a[href*='+hash+']');
+       if (hasAccordion) {
+           hasAccordion.collapse(accordionShowEvent);
+       }
     } 
 });
 var RemoteTabs = function() {
@@ -33,21 +42,22 @@ var RemoteTabs = function() {
        * @param tabEvent
        * @param hasLoadingMask
        */
-      load: function(tabEvent, hasLoadingMask) {
+      load: function(hasLoadingMask) {
 
           var me = this;
 
           me.hasLoadingMask = !!hasLoadingMask;
 
           // enable all remote data tabs
-          $('[data-toggle=tab]').each(function(k, tab) {
+          $('[data-toggle=tab], [data-toggle=collapse]').each(function(k, tab) {
               var tabObj = $(tab),
                   tabDiv,
                   tabData,
                   tabCallback,
                   url,
                   simulateDelay,
-                  alwaysRefresh;
+                  alwaysRefresh,
+		  hasOpenPanel = false;
 
               // check if the tab has a data-url property
               if(tabObj.is('[data-tab-url]')) {
@@ -57,7 +67,8 @@ var RemoteTabs = function() {
                   tabCallback = tabObj.attr('data-tab-callback') || null;
                   simulateDelay = tabObj.attr('data-tab-delay') || null;
                   alwaysRefresh = (tabObj.is('[data-tab-always-refresh]')
-                      && tabObj.attr('data-tab-always-refresh') == 'true') || null;
+                      && tabObj.attr('data-tab-always-refresh') == 'true') || null,
+		  showEvent = (tabObj.attr('data-toggle') == 'tab' ? tabShowEvent : accordionShowEvent);
 
                   if(tabData.length > 0) {
                       try
@@ -69,39 +80,67 @@ var RemoteTabs = function() {
                       }
 
                   }
-
-                  tabObj.on(tabEvent, function(e) {
-
-                      // change the hash of the location
-                      window.location.hash = e.target.hash;
-
-                      if ((!tabObj.hasClass("loaded") || alwaysRefresh) &&
-                          !tabObj.hasClass('loading')) {
-
-                          if(me.hasLoadingMask) {
-                              tabDiv.mask('Loading...');
-                          }
-                          tabObj.addClass('loading');
-
-                          // delay the json call if it has been given a value
-                          if(simulateDelay) {
-                              clearTimeout(window.timer);
-                              window.timer=setTimeout(function(){
-                                me._executeRemoteCall(url, tabData, tabCallback, tabObj, tabDiv);
-                              }, simulateDelay);
-                          } else {
-                              me._executeRemoteCall(url, tabData, tabCallback, tabObj, tabDiv);
-                          }
-
-
+
+		  if (showEvent == accordionShowEvent) {
+		      hasOpenPanel = tabDiv.hasClass('in');	
+	              // when an accordion is triggered, make the div the triggered object instead of the link
+		      if (bootstrapVersion2) {
+  		          tabObj = tabObj.parent();
+                      } else {
+  		          tabObj = tabObj.parents('.panel');
                       }
-
+
+                      // If there is a panel already opened, make sure the data url is fetched
+                      if (hasOpenPanel) {
+		          me._triggerChange(null, url, tabData, tabCallback, tabObj, tabDiv, simulateDelay, alwaysRefresh);
+	              }
+		  }
+
+                  tabObj.on(showEvent, function(e) {
+                      me._triggerChange(e, url, tabData, tabCallback, tabObj, tabDiv, simulateDelay, alwaysRefresh);
                   });
 
               }
           });
     },
 
+    /**
+    * Trigger the change
+    * 
+    * @param e
+    * @param objDetails
+    */
+    _triggerChange: function(e, url, tabData, tabCallback, tabObj, tabDiv, simulateDelay, alwaysRefresh) {
+        var me = this;
+
+        // change the hash of the location
+	if (e && e.target.hash != 'undefined') {
+             window.location.hash = e.target.hash;
+        }
+
+        if ((!tabObj.hasClass("loaded") || alwaysRefresh) &&
+              !tabObj.hasClass('loading')) {
+
+	  if(me.hasLoadingMask) {
+	      tabDiv.mask('Loading...');
+	  }
+	  tabObj.addClass('loading');
+
+	  // delay the json call if it has been given a value
+	  if(simulateDelay) {
+	      clearTimeout(window.timer);
+	      window.timer=setTimeout(function(){
+		me._executeRemoteCall(url, tabData, tabCallback, tabObj, tabDiv);
+	      }, simulateDelay);
+	  } else {
+	      me._executeRemoteCall(url, tabData, tabCallback, tabObj, tabDiv);
+	  }
+
+
+        }
+    },
+
+
       /**
        * Execute the remote call
        * @param url
@@ -133,7 +172,8 @@ var RemoteTabs = function() {
                     tabContainer.html(data);
                 }
             },
-            fail: function(data) {
+            error: function(data, status, error) {
+		tabContainer.html("An error occured while loading the data: " + error);
                 trigger.removeClass('loading');
                 if(me.hasLoadingMask) {
                     tabContainer.unmask();
@@ -143,7 +183,7 @@ var RemoteTabs = function() {
     }
   };
 
-    obj.load(showEvent, hasLoadingMask);
+    obj.load( hasLoadingMask);
 
     return obj;
 };

diff --git a/js/bootstrap-remote-tabs.min.js b/js/bootstrap-remote-tabs.min.js