Merge branch 'master' into 2.0.4-wip

docs/assets/js/bootstrap-modal.js

@@ -52,8 +52,9 @@
 
         this.isShown = true
 
-        escape.call(this)
+        this.escape()
-        backdrop.call(this, function () {
+
+        this.backdrop(function () {
           var transition = $.support.transition && that.$element.hasClass('fade')
 
           if (!that.$element.parent().length) {
@@ -69,6 +70,8 @@
 
           that.$element.addClass('in')
 
+          that.enforceFocus()
+
           transition ?
             that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
             that.$element.trigger('shown')
@@ -91,43 +94,70 @@
 
         $('body').removeClass('modal-open')
 
-        escape.call(this)
+        this.escape()
+        this.relaxFocus()
 
         this.$element.removeClass('in')
 
         $.support.transition && this.$element.hasClass('fade') ?
-          hideWithTransition.call(this) :
+          this.hideWithTransition() :
-          hideModal.call(this)
+          this.hideModal()
       }
 
+    , enforceFocus: function () {
+        var that = this
+        var console = window.console
+        console.log('attach');
+        $(document).on('focusin.modal', function (e) {
+          console.log('triggered');
+          if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
+            that.$element.focus()
+          }
+        })
       }
 
+    , relaxFocus: function () {
+        $(document).off('focus.modal')
+      }
 
- /* MODAL PRIVATE METHODS
+    , escape: function () {
-  * ===================== */
+        var that = this
+        if (this.isShown && this.options.keyboard) {
+          $(document).on('keyup.dismiss.modal', function ( e ) {
+            e.which == 27 && that.hide()
+          })
+        } else if (!this.isShown) {
+          $(document).off('keyup.dismiss.modal')
+        }
+      }
 
-  function hideWithTransition() {
+    , hideWithTransition: function () {
         var that = this
           , timeout = setTimeout(function () {
               that.$element.off($.support.transition.end)
-          hideModal.call(that)
+              that.hideModal()
             }, 500)
 
         this.$element.one($.support.transition.end, function () {
           clearTimeout(timeout)
-      hideModal.call(that)
+          that.hideModal()
         })
       }
 
-  function hideModal(that) {
+    , hideModal: function (that) {
         this.$element
           .hide()
           .trigger('hidden')
 
-    backdrop.call(this)
+        this.backdrop()
       }
 
-  function backdrop(callback) {
+    , removeBackdrop: function () {
+        this.$backdrop.remove()
+        this.$backdrop = null
+      }
+
+    , backdrop: function (callback) {
         var that = this
           , animate = this.$element.hasClass('fade') ? 'fade' : ''
 
@@ -153,28 +183,13 @@
           this.$backdrop.removeClass('in')
 
           $.support.transition && this.$element.hasClass('fade')?
-        this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) :
+            this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
-        removeBackdrop.call(this)
+            this.removeBackdrop()
 
         } else if (callback) {
           callback()
         }
       }
-
-  function removeBackdrop() {
-    this.$backdrop.remove()
-    this.$backdrop = null
-  }
-
-  function escape() {
-    var that = this
-    if (this.isShown && this.options.keyboard) {
-      $(document).on('keyup.dismiss.modal', function ( e ) {
-        e.which == 27 && that.hide()
-      })
-    } else if (!this.isShown) {
-      $(document).off('keyup.dismiss.modal')
-    }
   }
 
 

docs/assets/js/bootstrap.js

@@ -719,8 +719,9 @@
 
         this.isShown = true
 
-        escape.call(this)
+        this.escape()
-        backdrop.call(this, function () {
+
+        this.backdrop(function () {
           var transition = $.support.transition && that.$element.hasClass('fade')
 
           if (!that.$element.parent().length) {
@@ -736,6 +737,8 @@
 
           that.$element.addClass('in')
 
+          that.enforceFocus()
+
           transition ?
             that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
             that.$element.trigger('shown')
@@ -758,43 +761,70 @@
 
         $('body').removeClass('modal-open')
 
-        escape.call(this)
+        this.escape()
+        this.relaxFocus()
 
         this.$element.removeClass('in')
 
         $.support.transition && this.$element.hasClass('fade') ?
-          hideWithTransition.call(this) :
+          this.hideWithTransition() :
-          hideModal.call(this)
+          this.hideModal()
       }
 
+    , enforceFocus: function () {
+        var that = this
+        var console = window.console
+        console.log('attach');
+        $(document).on('focusin.modal', function (e) {
+          console.log('triggered');
+          if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
+            that.$element.focus()
+          }
+        })
       }
 
+    , relaxFocus: function () {
+        $(document).off('focus.modal')
+      }
 
- /* MODAL PRIVATE METHODS
+    , escape: function () {
-  * ===================== */
+        var that = this
+        if (this.isShown && this.options.keyboard) {
+          $(document).on('keyup.dismiss.modal', function ( e ) {
+            e.which == 27 && that.hide()
+          })
+        } else if (!this.isShown) {
+          $(document).off('keyup.dismiss.modal')
+        }
+      }
 
-  function hideWithTransition() {
+    , hideWithTransition: function () {
         var that = this
           , timeout = setTimeout(function () {
               that.$element.off($.support.transition.end)
-          hideModal.call(that)
+              that.hideModal()
             }, 500)
 
         this.$element.one($.support.transition.end, function () {
           clearTimeout(timeout)
-      hideModal.call(that)
+          that.hideModal()
         })
       }
 
-  function hideModal(that) {
+    , hideModal: function (that) {
         this.$element
           .hide()
           .trigger('hidden')
 
-    backdrop.call(this)
+        this.backdrop()
       }
 
-  function backdrop(callback) {
+    , removeBackdrop: function () {
+        this.$backdrop.remove()
+        this.$backdrop = null
+      }
+
+    , backdrop: function (callback) {
         var that = this
           , animate = this.$element.hasClass('fade') ? 'fade' : ''
 
@@ -820,28 +850,13 @@
           this.$backdrop.removeClass('in')
 
           $.support.transition && this.$element.hasClass('fade')?
-        this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) :
+            this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
-        removeBackdrop.call(this)
+            this.removeBackdrop()
 
         } else if (callback) {
           callback()
         }
       }
-
-  function removeBackdrop() {
-    this.$backdrop.remove()
-    this.$backdrop = null
-  }
-
-  function escape() {
-    var that = this
-    if (this.isShown && this.options.keyboard) {
-      $(document).on('keyup.dismiss.modal', function ( e ) {
-        e.which == 27 && that.hide()
-      })
-    } else if (!this.isShown) {
-      $(document).off('keyup.dismiss.modal')
-    }
   }
 
 

docs/javascript.html

@@ -199,8 +199,9 @@
 
           <h2>Live demo</h2>
           <p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p>
+
           <!-- sample modal content -->
-          <div id="myModal" class="modal hide fade">
+          <div id="myModal" class="modal hide fade" tabindex=0>
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <h3>Modal Heading</h3>
@@ -209,6 +210,11 @@
               <h4>Text in a modal</h4>
               <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
 
+              <form class="well">
+                <label>Label name</label>
+                <input type="text" class="span3" placeholder="Type something…">
+              </form>
+
               <h4>Popover in a modal</h4>
               <p>This <a href="#" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
 

docs/templates/pages/javascript.mustache

@@ -122,8 +122,9 @@
 
           <h2>{{_i}}Live demo{{/i}}</h2>
           <p>{{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}</p>
+
           <!-- sample modal content -->
-          <div id="myModal" class="modal hide fade">
+          <div id="myModal" class="modal hide fade" tabindex="0">
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <h3>{{_i}}Modal Heading{{/i}}</h3>
@@ -132,6 +133,11 @@
               <h4>{{_i}}Text in a modal{{/i}}</h4>
               <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
 
+              <form class="well">
+                <label>Label name</label>
+                <input type="text" class="span3" placeholder="Type something…">
+              </form>
+
               <h4>{{_i}}Popover in a modal{{/i}}</h4>
               <p>{{_i}}This <a href="#" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.{{/i}}</p>
 

js/bootstrap-modal.js

@@ -52,8 +52,9 @@
 
         this.isShown = true
 
-        escape.call(this)
+        this.escape()
-        backdrop.call(this, function () {
+
+        this.backdrop(function () {
           var transition = $.support.transition && that.$element.hasClass('fade')
 
           if (!that.$element.parent().length) {
@@ -69,6 +70,8 @@
 
           that.$element.addClass('in')
 
+          that.enforceFocus()
+
           transition ?
             that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
             that.$element.trigger('shown')
@@ -91,43 +94,70 @@
 
         $('body').removeClass('modal-open')
 
-        escape.call(this)
+        this.escape()
+        this.relaxFocus()
 
         this.$element.removeClass('in')
 
         $.support.transition && this.$element.hasClass('fade') ?
-          hideWithTransition.call(this) :
+          this.hideWithTransition() :
-          hideModal.call(this)
+          this.hideModal()
       }
 
+    , enforceFocus: function () {
+        var that = this
+        var console = window.console
+        console.log('attach');
+        $(document).on('focusin.modal', function (e) {
+          console.log('triggered');
+          if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
+            that.$element.focus()
+          }
+        })
       }
 
+    , relaxFocus: function () {
+        $(document).off('focus.modal')
+      }
 
- /* MODAL PRIVATE METHODS
+    , escape: function () {
-  * ===================== */
+        var that = this
+        if (this.isShown && this.options.keyboard) {
+          $(document).on('keyup.dismiss.modal', function ( e ) {
+            e.which == 27 && that.hide()
+          })
+        } else if (!this.isShown) {
+          $(document).off('keyup.dismiss.modal')
+        }
+      }
 
-  function hideWithTransition() {
+    , hideWithTransition: function () {
         var that = this
           , timeout = setTimeout(function () {
               that.$element.off($.support.transition.end)
-          hideModal.call(that)
+              that.hideModal()
             }, 500)
 
         this.$element.one($.support.transition.end, function () {
           clearTimeout(timeout)
-      hideModal.call(that)
+          that.hideModal()
         })
       }
 
-  function hideModal(that) {
+    , hideModal: function (that) {
         this.$element
           .hide()
           .trigger('hidden')
 
-    backdrop.call(this)
+        this.backdrop()
       }
 
-  function backdrop(callback) {
+    , removeBackdrop: function () {
+        this.$backdrop.remove()
+        this.$backdrop = null
+      }
+
+    , backdrop: function (callback) {
         var that = this
           , animate = this.$element.hasClass('fade') ? 'fade' : ''
 
@@ -153,28 +183,13 @@
           this.$backdrop.removeClass('in')
 
           $.support.transition && this.$element.hasClass('fade')?
-        this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) :
+            this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
-        removeBackdrop.call(this)
+            this.removeBackdrop()
 
         } else if (callback) {
           callback()
         }
       }
-
-  function removeBackdrop() {
-    this.$backdrop.remove()
-    this.$backdrop = null
-  }
-
-  function escape() {
-    var that = this
-    if (this.isShown && this.options.keyboard) {
-      $(document).on('keyup.dismiss.modal', function ( e ) {
-        e.which == 27 && that.hide()
-      })
-    } else if (!this.isShown) {
-      $(document).off('keyup.dismiss.modal')
-    }
   }