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 f8ef930c6ee4..2495e491dba1 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -357,6 +357,26 @@ <h4>$().tabs or $().pills</h4>
   })
 &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 807b366a354d..380ded17c849 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 2ee6761edae0..0b92b94db07b 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 b1816229e743..1f5ad1a38fe3 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -367,8 +367,8 @@ <h3>Events</h3>
 					  </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 563d88f0130c..938a54cc04b3 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 0b92b94db07b..3c2610c514ae 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 | 36 +++++++++++++++++++--------------
 3 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/docs/javascript.html b/docs/javascript.html
index 1f5ad1a38fe3..956dfd0a8305 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -368,14 +368,15 @@ <h3>Events</h3>
 					  <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 938a54cc04b3..e0286a364abf 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 3c2610c514ae..1d024ecbb084 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;
-
-        $tabsHTML.tabs().bind( "change", 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)
+          , $target
+          , count = 0
+          , relatedTarget
+          , target
+
+        $tabsHTML
+          .tabs()
+          .bind( "change", function (e) {
+            target = e.target
+            relatedTarget = e.relatedTarget
+            count++
+          })
+
+        $target = $tabsHTML
+          .find('a')
+          .last()
+          .click()
+
+        equals(relatedTarget, $tabsHTML.find('a').first()[0])
+        equals(target, $target[0])
+        equals(count, 1)
       })
 
 })
\ No newline at end of file