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 1/3] 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

From b827303511d68fdb3f913aef63f97b5f77725d68 Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Thu, 29 Sep 2011 22:21:55 -0700
Subject: [PATCH 2/3] changed event should be change event

---
 docs/javascript.html            |  4 ++--
 js/bootstrap-tabs.js            |  2 +-
 js/tests/unit/bootstrap-tabs.js | 10 +++++-----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/javascript.html b/docs/javascript.html
index b1816229e7..1f5ad1a38f 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -367,8 +367,8 @@ $('#my-modal').bind('hidden', function () {
 					  </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>
+					     <td>change</td>
+					     <td>This event fires on tab change. The event provides an additional parameter which holds the 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>.</td>
 					   </tr>
 					  </tbody>
 					</table>
diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js
index 563d88f013..938a54cc04 100644
--- a/js/bootstrap-tabs.js
+++ b/js/bootstrap-tabs.js
@@ -43,7 +43,7 @@
 
       activate($this.parent('li'), $ul)
       activate($href, $href.parent())
-      $this.trigger("changed", {from:current, to:href})
+      $this.trigger("change", { from: current, to: href })
     }
   }
 
diff --git a/js/tests/unit/bootstrap-tabs.js b/js/tests/unit/bootstrap-tabs.js
index 0b92b94db0..3c2610c514 100644
--- a/js/tests/unit/bootstrap-tabs.js
+++ b/js/tests/unit/bootstrap-tabs.js
@@ -45,8 +45,8 @@ $(function () {
 
         $("#qunit-runoff").empty()
       })
-      
-      test( "should trigger changed event on activate", function () {
+
+      test( "should trigger change 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>'
@@ -54,13 +54,13 @@ $(function () {
           , changeCount = 0
           , from
           , to;
-          
-        $tabsHTML.tabs().bind( "changed", function (e, c){
+
+        $tabsHTML.tabs().bind( "change", function (e, c){
           from = c.from;
           to = c.to;
           changeCount++
         })
-        
+
         $tabsHTML.tabs().find('a').last().click()
 
         equals(from, "#home")

From a0bf8b67ff4dd827f9298563616ecc519e7924c8 Mon Sep 17 00:00:00 2001
From: Jacob Thornton <jacobthornton@gmail.com>
Date: Thu, 29 Sep 2011 23:00:10 -0700
Subject: [PATCH 3/3] change event to use target and relatedTarget (which more
 closely resembles actual event api)

---
 docs/javascript.html            |  7 ++++---
 js/bootstrap-tabs.js            | 12 ++++++++----
 js/tests/unit/bootstrap-tabs.js | 30 ++++++++++++++++++------------
 3 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/docs/javascript.html b/docs/javascript.html
index 1f5ad1a38f..956dfd0a83 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -368,14 +368,15 @@ $('#my-modal').bind('hidden', function () {
 					  <tbody>
 					   <tr>
 					     <td>change</td>
-					     <td>This event fires on tab change. The event provides an additional parameter which holds the 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>.</td>
+					     <td>This event fires on tab change. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab respectively.</td>
 					   </tr>
 					  </tbody>
 					</table>
 
 					<pre class="prettyprint linenums">
-$('#.tabs').bind('changed', function (e, c) {
-  // do something with c.from and c.to ...
+$('#.tabs').bind('change', function (e) {
+  e.target // activated tab
+  e.relatedTarget // previous tab
 })</pre>
           <h3>Demo</h3>
           <ul class="tabs" data-tabs="tabs" >
diff --git a/js/bootstrap-tabs.js b/js/bootstrap-tabs.js
index 938a54cc04..e0286a364a 100644
--- a/js/bootstrap-tabs.js
+++ b/js/bootstrap-tabs.js
@@ -27,10 +27,9 @@
 
   function tab( e ) {
     var $this = $(this)
-      , href = $this.attr('href')
       , $ul = $this.closest('ul')
-      , $controlled
-      , current = $ul.find('.active a').attr('href')
+      , href = $this.attr('href')
+      , previous
 
     if (/^#\w+/.test(href)) {
       e.preventDefault()
@@ -39,11 +38,16 @@
         return
       }
 
+      previous = $ul.find('.active a')[0]
       $href = $(href)
 
       activate($this.parent('li'), $ul)
       activate($href, $href.parent())
-      $this.trigger("change", { from: current, to: href })
+
+      $this.trigger({
+        type: 'change'
+      , relatedTarget: previous
+      })
     }
   }
 
diff --git a/js/tests/unit/bootstrap-tabs.js b/js/tests/unit/bootstrap-tabs.js
index 3c2610c514..1d024ecbb0 100644
--- a/js/tests/unit/bootstrap-tabs.js
+++ b/js/tests/unit/bootstrap-tabs.js
@@ -51,21 +51,27 @@ $(function () {
           + '<li class="active"><a href="#home">Home</a></li>'
           + '<li><a href="#profile">Profile</a></li>'
           + '</ul>')
-          , changeCount = 0
-          , from
-          , to;
+          , $target
+          , count = 0
+          , relatedTarget
+          , target
 
-        $tabsHTML.tabs().bind( "change", function (e, c){
-          from = c.from;
-          to = c.to;
-          changeCount++
-        })
+        $tabsHTML
+          .tabs()
+          .bind( "change", function (e) {
+            target = e.target
+            relatedTarget = e.relatedTarget
+            count++
+          })
 
-        $tabsHTML.tabs().find('a').last().click()
+        $target = $tabsHTML
+          .find('a')
+          .last()
+          .click()
 
-        equals(from, "#home")
-        equals(to, "#profile")
-        equals(changeCount, 1)
+        equals(relatedTarget, $tabsHTML.find('a').first()[0])
+        equals(target, $target[0])
+        equals(count, 1)
       })
 
 })
\ No newline at end of file