Merge branch '1.3-wip' of github.com:twitter/bootstrap into 1.3-wip

docs/assets/js/application.js

@@ -1,11 +1,5 @@
 $(document).ready(function(){
 
-  // Scrollspy
-  // =========
-
-  $('body > .topbar').scrollSpy()
-
-
   // table sort example
   // ==================
 

docs/index.html

@@ -37,7 +37,7 @@
 
     <!-- Topbar
     ================================================== -->
-    <div class="topbar">
+    <div class="topbar" data-scrollspy="x" >
       <div class="topbar-inner">
         <div class="container">
           <a class="brand" href="#">Bootstrap</a>
@@ -1262,7 +1262,7 @@
   </div>
   <h2>Fixed topbar</h2>
   <div class="topbar-wrapper" style="z-index: 5;">
-    <div class="topbar" data-dropdown>
+    <div class="topbar" data-dropdown="x" >
       <div class="topbar-inner">
         <div class="container">
           <h3><a href="#">Project Name</a></h3>
@@ -1331,7 +1331,7 @@
         <li><a href="#">Messages</a></li>
         <li><a href="#">Settings</a></li>
         <li><a href="#">Contact</a></li>
-        <li class="dropdown" data-dropdown>
+        <li class="dropdown" data-dropdown="x">
           <a href="#" class="dropdown-toggle">Dropdown</a>
           <ul class="dropdown-menu">
             <li><a href="#">Secondary link</a></li>

docs/javascript.html

@@ -39,7 +39,7 @@
 
     <!-- Topbar
     ================================================== -->
-    <div class="topbar" data-scrollspy>
+    <div class="topbar" data-scrollspy="x" >
       <div class="fill">
         <div class="container">
           <h3><a href="#">Bootstrap JS</a></h3>
@@ -120,7 +120,7 @@
             </tbody>
           </table>
           <h3>Markup</h3>
-          <p>You can activate modals on your page easily without having to write a single line of javascript. Just give an element a <code>data-controls-modal</code> which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as data attributes as well.</p>
+          <p>You can activate modals on your page easily without having to write a single line of javascript. Just give an element a <code>data-controls-modal</code> attribute which corresponds to a modal element id, and when clicked, it will launch your modal. To add modal options, just include them as data attributes as well.</p>
 <pre class="prettyprint linenums">
 &lt;a class="btn" data-controls-modal="my-modal" data-backdrop="true" &gt;Launch Modal&lt;/a&gt;
 </pre>
@@ -146,19 +146,11 @@ $('#my-modal').modal({
           <pre class="prettyprint linenums">$('#my-modal').modal(true)</pre>
           <p><span class="label notice">Notice</span> Alternatively, this can be retrieved with <code>$().data('modal')</code>.</p>
           <h3>Events</h3>
-          <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. The include:</p>
-
-          <!-- <ul>
-           <li><strong>show</strong> - This event fires immediately when the <code>show</code> instance method is called.</li>
-           <li><strong>shown</strong> - This event is fired when the modal has been made visible to the user (will wait for css transitions to complete).</li>
-           <li><strong>hide</strong> - This event is fired immediately when the <code>hide</code> instance method has been called.</li>
-           <li><strong>hidden</strong> - This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).</li>
-          </ul> -->
-
+          <p>Bootstrap's modal class exposes a few events for hooking into modal functionality. </p>
           <table class="zebra-striped">
             <thead>
              <tr>
-               <th style="width: 150px;">Name</th>
+               <th style="width: 150px;">Event</th>
                <th>Description</th>
              </tr>
             </thead>
@@ -229,7 +221,7 @@ $('#my-modal').bind('hidden', function () {
 <pre class="prettyprint linenums">
 &lt;ul class="tabs"&gt;
   &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
-  &lt;li class="dropdown" data-dropdown&gt;
+  &lt;li class="dropdown" data-dropdown="x" &gt;
     &lt;a href="#" class="dropdown-toggle"&gt;Dropdown&lt;/a&gt;
     &lt;ul class="dropdown-menu"&gt;
       &lt;li&gt;&lt;a href="#"&gt;Secondary link&lt;/a&gt;&lt;/li&gt;
@@ -247,7 +239,7 @@ $('#my-modal').bind('hidden', function () {
           </p>
           <h3>Demo</h3>
           <div class="topbar-wrapper">
-            <div id="topbar-example" class="topbar" data-dropdown>
+            <div id="topbar-example" class="topbar" data-dropdown="x">
               <div class="topbar-inner">
                 <div class="container">
                   <h3><a href="#">Project Name</a></h3>
@@ -303,20 +295,20 @@ $('#my-modal').bind('hidden', function () {
           <pre class="prettyprint linenums">$('#topbar').dropdown()</pre>
           <h3>Markup</h3>
           <p>To easily add scrollspy behavior to your nav, just add the <code>data-scrollspy</code> attribute to the <code>.topbar</code>.
-          <pre class="prettyprint linenums">&lt;div class="topbar" data-scrollspy &gt;...&lt;/div&gt;</pre>
+          <pre class="prettyprint linenums">&lt;div class="topbar" data-scrollspy="x" &gt;...&lt;/div&gt;</pre>
           <h3>Methods</h3>
           <h4>$().scrollspy()</h4>
           <p>
           Auto activates navigation buttons by users scroll position.
           </p>
           <pre class="prettyprint linenums">$('body > .topbar').scrollSpy()</pre>
-           <p><span class="label notice">Notice</span> Topbar anchor tags must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> might correspond to a <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.
+           <p><span class="label notice">Notice</span> Topbar anchor tags must have resolvable id targets. For example, a <code>&lt;a href="#home"&gt;home&lt;/a&gt;</code> must correspond to something in the dom like <code>&lt;div id="home"&gt;&lt;/div&gt;</code>.
           </p>
           <h4>.scrollspy('refresh')</h4>
-          <p>The scrollspy caches nav buttons and section coordinates for performance. If you need to update this cache (likely if you have dynamic content) just call this refresh method. If you used the data attribute to define your scrollspy, just call refresh on the body like below.</p>
+          <p>The scrollspy caches nav buttons and section coordinates for performance. If you need to update this cache (likely if you have dynamic content) just call this refresh method. If you used the data attribute to define your scrollspy, just call refresh on the body.</p>
           <pre class="prettyprint linenums">$('body').scrollspy('refresh')</pre>
           <h3>Demo</h3>
-          <p>Look at the topbar navigation on this page.</p>
+          <p>Checkout the the topbar navigation on this page.</p>
         </div>
       </div>
     </section>
@@ -338,7 +330,7 @@ $('#my-modal').bind('hidden', function () {
           <pre class="prettyprint linenums">$('.tabs').tabs()</pre>
           <h3>Markup</h3>
           <p>You can activate a tab or pill navigation without writing any javascript by simply giving them a <code>data-tabs</code> or <code>data-pills</code> attribute.</p>
-          <pre class="prettyprint linenums"> &lt;ul class="tabs" data-tabs &gt;...&lt;/ul&gt;</pre>
+          <pre class="prettyprint linenums"> &lt;ul class="tabs" data-tabs="x" &gt;...&lt;/ul&gt;</pre>
           <h3>Methods</h3>
           <h4>$().tabs or $().pills</h4>
           <p>
@@ -366,7 +358,7 @@ $('#my-modal').bind('hidden', function () {
 &lt;/script&gt;</pre>
           </p>
           <h3>Demo</h3>
-          <ul class="tabs" data-tabs >
+          <ul class="tabs" data-tabs="x" >
             <li class="active"><a href="#home">Home</a></li>
             <li><a href="#profile">Profile</a></li>
             <li><a href="#messages">Messages</a></li>
@@ -648,11 +640,11 @@ Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seita
           <p>Closes an alert.</p>
           <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
           <h3>Demo</h3>
-          <div class="alert-message warning fade in" data-alert >
+          <div class="alert-message warning fade in" data-alert="x" >
             <a class="close" href="#">&times;</a>
             <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
           </div>
-          <div class="alert-message block-message error fade in" data-alert >
+          <div class="alert-message block-message error fade in" data-alert="x" >
             <a class="close" href="#">&times;</a>
             <p><strong>Oh snap! You got an error!</strong> Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
             <div class="alert-actions">

js/tests/index.html

@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="vendor/qunit.css" type="text/css" media="screen" />
   <script src="vendor/qunit.js"></script>
 
-  <!-- plugin sources -->
+  <!--  plugin sources -->
   <script src="../../js/bootstrap-alerts.js"></script>
   <script src="../../js/bootstrap-dropdown.js"></script>
   <script src="../../js/bootstrap-modal.js"></script>

js/tests/unit/bootstrap-modal.js

@@ -16,36 +16,37 @@ $(function () {
         ok($.fn.modal.defaults, 'default object exposed')
       })
 
-      test("should insert into dom when modal:show event is called", function () {
+      test("should insert into dom when show method is called", function () {
         stop()
         $.support.transition = false
         var div = $("<div id='modal-test'></div>")
         div
           .modal()
-          .trigger("modal:show")
-          .bind("modal:shown", function () {
+          .modal("show")
+          .bind("shown", function () {
             ok($('#modal-test').length, 'modal insterted into dom')
             start()
             div.remove()
           })
       })
 
-      test("should remove from dom when modal:hide is called", function () {
+      test("should hide modal when hide is called", function () {
         stop()
         $.support.transition = false
         var div = $("<div id='modal-test'></div>")
         div
           .modal()
-          .trigger("modal:show")
-          .bind("modal:shown", function () {
+          .bind("shown", function () {
+            ok($('#modal-test').is(":visible"), 'modal visible')
             ok($('#modal-test').length, 'modal insterted into dom')
-            div.trigger("modal:hide")
+            div.modal("hide")
           })
-          .bind("modal:hidden", function() {
-            ok(!$('#modal-test').length, 'modal removed from dom')
+          .bind("hidden", function() {
+            ok(!$('#modal-test').is(":visible"), 'modal hidden')
             start()
             div.remove()
           })
+          .modal("show")
       })
 
       test("should toggle when toggle is called", function () {
@@ -54,16 +55,17 @@ $(function () {
         var div = $("<div id='modal-test'></div>")
         div
           .modal()
-          .trigger("modal:toggle")
-          .bind("modal:shown", function () {
+          .bind("shown", function () {
+            ok($('#modal-test').is(":visible"), 'modal visible')
             ok($('#modal-test').length, 'modal insterted into dom')
-            div.trigger("modal:toggle")
+            div.modal("toggle")
           })
-          .bind("modal:hidden", function() {
-            ok(!$('#modal-test').length, 'modal removed from dom')
+          .bind("hidden", function() {
+            ok(!$('#modal-test').is(":visible"), 'modal hidden')
             start()
             div.remove()
           })
+          .modal("toggle")
       })
 
       test("should remove from dom when click .close", function () {
@@ -72,15 +74,16 @@ $(function () {
         var div = $("<div id='modal-test'><span class='close'></span></div>")
         div
           .modal()
-          .trigger("modal:toggle")
-          .bind("modal:shown", function () {
+          .bind("shown", function () {
+            ok($('#modal-test').is(":visible"), 'modal visible')
             ok($('#modal-test').length, 'modal insterted into dom')
             div.find('.close').click()
           })
-          .bind("modal:hidden", function() {
-            ok(!$('#modal-test').length, 'modal removed from dom')
+          .bind("hidden", function() {
+            ok(!$('#modal-test').is(":visible"), 'modal hidden')
             start()
             div.remove()
           })
+          .modal("toggle")
       })
 })

js/tests/unit/bootstrap-popover.js

@@ -14,20 +14,20 @@ $(function () {
 
       test("should render popover element", function () {
         $.support.transition = false
-        var popover = $('<a href="#" data-title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
+        var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
           .appendTo('#qunit-runoff')
           .popover()
-          .trigger('popover:show')
+          .popover('show')
 
         ok($('.popover').length, 'popover was inserted')
-        popover.trigger('popover:hide')
+        popover.popover('hide')
         ok(!$(".popover").length, 'popover removed')
         $('#qunit-runoff').empty()
       })
 
       test("should store popover instance in popover data object", function () {
         $.support.transition = false
-        var popover = $('<a href="#" data-title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
+        var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
           .popover()
 
         ok(!!popover.data('popover'), 'popover instance exists')
@@ -38,32 +38,37 @@ $(function () {
         var popover = $('<a href="#">@fat</a>')
           .appendTo('#qunit-runoff')
           .popover({
-            title: '@fat'
-          , content: 'loves writing tests （╯°□°）╯︵ ┻━┻'
+            title: function () {
+              return '@fat'
+            }
+          , content: function () {
+              return 'loves writing tests （╯°□°）╯︵ ┻━┻'
+            }
           })
-          .trigger('popover:show')
+
+        popover.popover('show')
 
         ok($('.popover').length, 'popover was inserted')
         equals($('.popover .title').text(), '@fat', 'title correctly inserted')
         equals($('.popover .content').text(), 'loves writing tests （╯°□°）╯︵ ┻━┻', 'content correctly inserted')
 
-        popover.trigger('popover:hide')
+        popover.popover('hide')
         ok(!$('.popover').length, 'popover was removed')
         $('#qunit-runoff').empty()
       })
 
       test("should get title and content from attributes", function () {
         $.support.transition = false
-        var popover = $('<a href="#" data-title="@mdo" data-content="loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻" >@mdo</a>')
+        var popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻" >@mdo</a>')
           .appendTo('#qunit-runoff')
           .popover()
-          .trigger('popover:show')
+          .popover('show')
 
         ok($('.popover').length, 'popover was inserted')
         equals($('.popover .title').text(), '@mdo', 'title correctly inserted')
         equals($('.popover .content').text(), "loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻", 'content correctly inserted')
 
-        popover.trigger('popover:hide')
+        popover.popover('hide')
         ok(!$('.popover').length, 'popover was removed')
         $('#qunit-runoff').empty()
       })

js/tests/unit/bootstrap-twipsy.js

@@ -31,10 +31,10 @@ $(function () {
         var twipsy = $('<a href="#" rel="twipsy" title="Another twipsy"></a>')
           .appendTo('#qunit-runoff')
           .twipsy({placement: 'below'})
-          .trigger('twipsy:show')
+          .twipsy('show')
 
         ok($(".twipsy").hasClass('fade below in'), 'has correct classes applied')
-        twipsy.trigger('twipsy:hide')
+        twipsy.twipsy('hide')
         ok(!$(".twipsy").length, 'twipsy removed')
         $('#qunit-runoff').empty()
       })
@@ -44,10 +44,10 @@ $(function () {
         var twipsy = $('<a href="#" rel="twipsy"></a>')
           .appendTo('#qunit-runoff')
           .twipsy({fallback: '@fat'})
-          .trigger('twipsy:show')
+          .twipsy('show')
 
         equals($(".twipsy").text(), "@fat", 'has correct default text')
-        twipsy.trigger('twipsy:hide')
+        twipsy.twipsy('hide')
         ok(!$(".twipsy").length, 'twipsy removed')
         $('#qunit-runoff').empty()
       })
@@ -57,10 +57,10 @@ $(function () {
         var twipsy = $('<a href="#" rel="twipsy" title="<b>@fat</b>"></a>')
           .appendTo('#qunit-runoff')
           .twipsy()
-          .trigger('twipsy:show')
+          .twipsy('show')
 
         ok(!$('.twipsy b').length, 'b tag was not inserted')
-        twipsy.trigger('twipsy:hide')
+        twipsy.twipsy('hide')
         ok(!$(".twipsy").length, 'twipsy removed')
         $('#qunit-runoff').empty()
       })
@@ -70,10 +70,10 @@ $(function () {
         var twipsy = $('<a href="#" rel="twipsy" title="<b>@fat</b>"></a>')
           .appendTo('#qunit-runoff')
           .twipsy({html: true})
-          .trigger('twipsy:show')
+          .twipsy('show')
 
         ok($('.twipsy b').length, 'b tag was inserted')
-        twipsy.trigger('twipsy:hide')
+        twipsy.twipsy('hide')
         ok(!$(".twipsy").length, 'twipsy removed')
         $('#qunit-runoff').empty()
       })