From e16de59260c860af67748a484631ae3de56fc244 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20B=C3=B8gebjerg=20Pedersen?= <kasperbp@gmail.com>
Date: Sun, 18 Sep 2011 10:15:24 +0200
Subject: [PATCH] Added changed event to bootstrap-tabs.js

---
 docs/javascript.html            | 20 +++++++++++++++++
 js/bootstrap-tabs.js            |  4 +++-
 js/tests/unit/bootstrap-tabs.js | 38 ++++++++++++++++++++++++++-------
 3 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/docs/javascript.html b/docs/javascript.html
index f8ef930c6e..2495e491db 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -357,6 +357,26 @@ $('#my-modal').bind('hidden', function () {
   })
 &lt;/script&gt;</pre>
           </p>
+					<h3>Events</h3>
+					<table class="zebra-striped">
+					  <thead>
+					   <tr>
+					     <th style="width: 150px;">Event</th>
+					     <th>Description</th>
+					   </tr>
+					  </thead>
+					  <tbody>
+					   <tr>
+					     <td>changed</td>
+					     <td>This event fires when the tabs are changed. The event provides an additional parameter which holds id of the previous tab and the id of the new current tab. This information is stored in an object with two properties called from and to, e.g. <code>{to: '#home', from: '#profile'}</code>. This event allows you load and change content of the tabs on request.</td>
+					   </tr>
+					  </tbody>
+					</table>
+
+					<pre class="prettyprint linenums">
+$('#.tabs').bind('changed', function (e, c) {
+  // do something with c.from and c.to ...
+})</pre>
           <h3>Demo</h3>
           <ul class="tabs" data-tabs="tabs" >
             <li class="active"><a href="#home">Home</a></li>
diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js
index 807b366a35..380ded17c8 100644
--- a/js/bootstrap-tabs.js
+++ b/js/bootstrap-tabs.js
@@ -30,11 +30,12 @@
       , href = $this.attr('href')
       , $ul = $(e.liveFired)
       , $controlled
+      , current = $ul.find('.active a').attr('href')
 
     if (/^#\w+/.test(href)) {
       e.preventDefault()
 
-      if ($this.hasClass('active')) {
+      if ($this.parent('li').hasClass('active')) {
         return
       }
 
@@ -42,6 +43,7 @@
 
       activate($this.parent('li'), $ul)
       activate($href, $href.parent())
+      $this.trigger("changed", {from:current, to:href})
     }
   }
 
diff --git a/js/tests/unit/bootstrap-tabs.js b/js/tests/unit/bootstrap-tabs.js
index 2ee6761eda..0b92b94db0 100644
--- a/js/tests/unit/bootstrap-tabs.js
+++ b/js/tests/unit/bootstrap-tabs.js
@@ -11,39 +11,61 @@ $(function () {
       })
 
       test("should activate element by tab id", function () {
-        var tabsHTML = '<ul class="tabs">'
+        var $tabsHTML = $('<ul class="tabs">'
           + '<li class="active"><a href="#home">Home</a></li>'
           + '<li><a href="#profile">Profile</a></li>'
-          + '</ul>'
+          + '</ul>')
 
 
         $('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo("#qunit-runoff")
 
-        $(tabsHTML).tabs().find('a').last().click()
+        $tabsHTML.tabs().find('a').last().click()
         equals($("#qunit-runoff").find('.active').attr('id'), "profile")
 
-        $(tabsHTML).tabs().find('a').first().click()
+        $tabsHTML.tabs().find('a').first().click()
         equals($("#qunit-runoff").find('.active').attr('id'), "home")
 
         $("#qunit-runoff").empty()
       })
 
       test("should activate element by pill id", function () {
-        var pillsHTML = '<ul class="pills">'
+        var $pillsHTML = $('<ul class="pills">'
           + '<li class="active"><a href="#home">Home</a></li>'
           + '<li><a href="#profile">Profile</a></li>'
-          + '</ul>'
+          + '</ul>')
 
 
         $('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo("#qunit-runoff")
 
-        $(pillsHTML).pills().find('a').last().click()
+        $pillsHTML.pills().find('a').last().click()
         equals($("#qunit-runoff").find('.active').attr('id'), "profile")
 
-        $(pillsHTML).pills().find('a').first().click()
+        $pillsHTML.pills().find('a').first().click()
         equals($("#qunit-runoff").find('.active').attr('id'), "home")
 
         $("#qunit-runoff").empty()
       })
+      
+      test( "should trigger changed event on activate", function () {
+        var $tabsHTML = $('<ul class="tabs">'
+          + '<li class="active"><a href="#home">Home</a></li>'
+          + '<li><a href="#profile">Profile</a></li>'
+          + '</ul>')
+          , changeCount = 0
+          , from
+          , to;
+          
+        $tabsHTML.tabs().bind( "changed", function (e, c){
+          from = c.from;
+          to = c.to;
+          changeCount++
+        })
+        
+        $tabsHTML.tabs().find('a').last().click()
+
+        equals(from, "#home")
+        equals(to, "#profile")
+        equals(changeCount, 1)
+      })
 
 })
\ No newline at end of file