change dropdown strategy to use an overlay - fixes mobile click anywhere + allows for firefox middle click

1 files changed, 132 insertions, 169 deletions

diff --git a/docs/assets/js/bootstrap.js b/docs/assets/js/bootstrap.js
index 62607d588..77ed438b8 100644
--- a/docs/assets/js/bootstrap.js
+++ b/docs/assets/js/bootstrap.js
@@ -471,132 +471,117 @@
  * ============================================================ */
 
 
-!function ($) {
-
-  "use strict"; // jshint ;_;
-
+!function ($) { "use strict";
 
- /* COLLAPSE PUBLIC CLASS DEFINITION
-  * ================================ */
+  // COLLAPSE PUBLIC CLASS DEFINITION
+  // ================================
 
   var Collapse = function (element, options) {
-    this.$element = $(element)
-    this.options = $.extend({}, $.fn.collapse.defaults, options)
-
-    if (this.options.parent) {
-      this.$parent = $(this.options.parent)
-    }
+    this.$element      = $(element)
+    this.options       = $.extend({}, Collapse.DEFAULTS, options)
+    this.transitioning = null
 
-    this.options.toggle && this.toggle()
+    if (this.options.parent) this.$parent = $(this.options.parent)
+    if (this.options.toggle) this.toggle()
   }
 
-  Collapse.prototype = {
+  Collapse.DEFAULTS = {
+    toggle: true
+  }
 
-    constructor: Collapse
+  Collapse.prototype.dimension = function () {
+    var hasWidth = this.$element.hasClass('width')
+    return hasWidth ? 'width' : 'height'
+  }
 
-  , dimension: function () {
-      var hasWidth = this.$element.hasClass('width')
-      return hasWidth ? 'width' : 'height'
-    }
+  Collapse.prototype.show = function () {
+    if (this.transitioning || this.$element.hasClass('in')) return
 
-  , show: function () {
-      var dimension
-        , scroll
-        , actives
-        , hasData
-
-      if (this.transitioning || this.$element.hasClass('in')) return
-
-      dimension = this.dimension()
-      scroll = $.camelCase(['scroll', dimension].join('-'))
-      actives = this.$parent && this.$parent.find('> .accordion-group > .in')
-
-      if (actives && actives.length) {
-        hasData = actives.data('collapse')
-        if (hasData && hasData.transitioning) return
-        actives.collapse('hide')
-        hasData || actives.data('collapse', null)
-      }
+    var dimension = this.dimension()
+    var scroll    = $.camelCase(['scroll', dimension].join('-'))
+    var actives   = this.$parent && this.$parent.find('> .accordion-group > .in')
 
-      this.$element[dimension](0)
-      this.transition('addClass', $.Event('show'), 'shown')
-      $.support.transition && this.$element[dimension](this.$element[0][scroll])
+    if (actives && actives.length) {
+      var hasData = actives.data('collapse')
+      if (hasData && hasData.transitioning) return
+      actives.collapse('hide')
+      hasData || actives.data('collapse', null)
     }
 
-  , hide: function () {
-      var dimension
-      if (this.transitioning || !this.$element.hasClass('in')) return
-      dimension = this.dimension()
-      this.reset(this.$element[dimension]())
-      this.transition('removeClass', $.Event('hide'), 'hidden')
-      this.$element[dimension](0)
-    }
+    this.$element[dimension](0)
+    this.transition('addClass', $.Event('show'), 'shown')
 
-  , reset: function (size) {
-      var dimension = this.dimension()
+    if ($.support.transition) this.$element[dimension](this.$element[0][scroll])
+  }
 
-      this.$element
-        .removeClass('collapse')
-        [dimension](size || 'auto')
-        [0].offsetWidth
+  Collapse.prototype.hide = function () {
+    if (this.transitioning || !this.$element.hasClass('in')) return
+    var dimension = this.dimension()
+    this.reset(this.$element[dimension]())
+    this.transition('removeClass', $.Event('hide'), 'hidden')
+    this.$element[dimension](0)
+  }
 
-      this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')
+  Collapse.prototype.reset = function (size) {
+    var dimension = this.dimension()
 
-      return this
-    }
+    this.$element
+      .removeClass('collapse')
+      [dimension](size || 'auto')
+      [0].offsetWidth
 
-  , transition: function (method, startEvent, completeEvent) {
-      var that = this
-        , complete = function () {
-            if (startEvent.type == 'show') that.reset()
-            that.transitioning = 0
-            that.$element.trigger(completeEvent)
-          }
+    this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')
 
-      this.$element.trigger(startEvent)
+    return this
+  }
 
-      if (startEvent.isDefaultPrevented()) return
+  Collapse.prototype.transition = function (method, startEvent, completeEvent) {
+    var that     = this
+    var complete = function () {
+      if (startEvent.type == 'show') that.reset()
+      that.transitioning = 0
+      that.$element.trigger(completeEvent)
+    }
 
-      this.transitioning = 1
+    this.$element.trigger(startEvent)
 
-      this.$element[method]('in')
+    if (startEvent.isDefaultPrevented()) return
 
-      $.support.transition && this.$element.hasClass('collapse') ?
-        this.$element.one($.support.transition.end, complete) :
-        complete()
-    }
+    this.transitioning = 1
 
-  , toggle: function () {
-      this[this.$element.hasClass('in') ? 'hide' : 'show']()
-    }
+    this.$element[method]('in')
 
+    $.support.transition && this.$element.hasClass('collapse') ?
+      this.$element.one($.support.transition.end, complete) :
+      complete()
   }
 
+  Collapse.prototype.toggle = function () {
+    this[this.$element.hasClass('in') ? 'hide' : 'show']()
+  }
 
- /* COLLAPSE PLUGIN DEFINITION
-  * ========================== */
+
+  // COLLAPSE PLUGIN DEFINITION
+  // ==========================
 
   var old = $.fn.collapse
 
   $.fn.collapse = function (option) {
     return this.each(function () {
-      var $this = $(this)
-        , data = $this.data('collapse')
-        , options = $.extend({}, $.fn.collapse.defaults, $this.data(), typeof option == 'object' && option)
+      var $this   = $(this)
+      var data    = $this.data('collapse')
+      var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
+
       if (!data) $this.data('collapse', (data = new Collapse(this, options)))
       if (typeof option == 'string') data[option]()
     })
   }
 
-  $.fn.collapse.defaults = {
-    toggle: true
-  }
-
   $.fn.collapse.Constructor = Collapse
 
 
- /* COLLAPSE NO CONFLICT
-  * ==================== */
+  // COLLAPSE NO CONFLICT
+  // ====================
 
   $.fn.collapse.noConflict = function () {
     $.fn.collapse = old
@@ -604,15 +589,16 @@
   }
 
 
- /* COLLAPSE DATA-API
-  * ================= */
+  // COLLAPSE DATA-API
+  // =================
 
   $(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
-    var $this = $(this), href
-      , target = $this.attr('data-target')
+    var $this  = $(this), href
+    var target = $this.attr('data-target')
         || e.preventDefault()
         || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
-      , option = $(target).data('collapse') ? 'toggle' : $this.data()
+    var option = $(target).data('collapse') ? 'toggle' : $this.data()
+
     $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
     $(target).collapse(option)
   })
@@ -638,123 +624,101 @@
  * ============================================================ */
 
 
-!function ($) {
-
-  "use strict"; // jshint ;_;
-
-
- /* DROPDOWN CLASS DEFINITION
-  * ========================= */
-
-  var toggle = '[data-toggle=dropdown]'
-    , Dropdown = function (element) {
-        var $el = $(element).on('click.dropdown.data-api', this.toggle)
-        $('html').on('click.dropdown.data-api', function () {
-          $el.parent().removeClass('open')
-        })
-      }
-
-  Dropdown.prototype = {
-
-    constructor: Dropdown
+!function ($) { "use strict";
 
-  , toggle: function (e) {
-      var $this = $(this)
-        , $parent
-        , isActive
 
-      if ($this.is('.disabled, :disabled')) return
+  // DROPDOWN CLASS DEFINITION
+  // =========================
 
-      $parent = getParent($this)
+  var backdrop = '.dropdown-backdrop'
+  var toggle   = '[data-toggle=dropdown]'
+  var Dropdown = function (element) {
+    var $el = $(element).on('click.dropdown.data-api', this.toggle)
+    $('html').on('click.dropdown.data-api', function () {
+      $el.parent().removeClass('open')
+    })
+  }
 
-      isActive = $parent.hasClass('open')
+  Dropdown.prototype.toggle = function (e) {
+    var $this = $(this)
 
-      clearMenus()
+    if ($this.is('.disabled, :disabled')) return
 
-      if (!isActive) {
-        $parent.toggleClass('open')
-      }
+    var $parent  = getParent($this)
+    var isActive = $parent.hasClass('open')
 
-      $this.focus()
+    clearMenus()
 
-      return false
+    if (!isActive) {
+      $('<div class="dropdown-backdrop"/>').insertBefore($(this)).on('click', clearMenus)
+      $parent.toggleClass('open')
     }
 
-  , keydown: function (e) {
-      var $this
-        , $items
-        , $active
-        , $parent
-        , isActive
-        , index
+    $this.focus()
 
-      if (!/(38|40|27)/.test(e.keyCode)) return
-
-      $this = $(this)
+    return false
+  }
 
-      e.preventDefault()
-      e.stopPropagation()
+  Dropdown.prototype.keydown = function (e) {
+    if (!/(38|40|27)/.test(e.keyCode)) return
 
-      if ($this.is('.disabled, :disabled')) return
+    var $this = $(this)
 
-      $parent = getParent($this)
+    e.preventDefault()
+    e.stopPropagation()
 
-      isActive = $parent.hasClass('open')
+    if ($this.is('.disabled, :disabled')) return
 
-      if (!isActive || (isActive && e.keyCode == 27)) {
-        if (e.which == 27) $parent.find(toggle).focus()
-        return $this.click()
-      }
+    var $parent  = getParent($this)
+    var isActive = $parent.hasClass('open')
 
-      $items = $('[role=menu] li:not(.divider):visible a', $parent)
+    if (!isActive || (isActive && e.keyCode == 27)) {
+      if (e.which == 27) $parent.find(toggle).focus()
+      return $this.click()
+    }
 
-      if (!$items.length) return
+    var $items = $('[role=menu] li:not(.divider):visible a', $parent)
 
-      index = $items.index($items.filter(':focus'))
+    if (!$items.length) return
 
-      if (e.keyCode == 38 && index > 0) index--                                        // up
-      if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
-      if (!~index) index = 0
+    var index = $items.index($items.filter(':focus'))
 
-      $items
-        .eq(index)
-        .focus()
-    }
+    if (e.keyCode == 38 && index > 0)                 index--                        // up
+    if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
+    if (!~index)                                      index=0
 
+    $items.eq(index).focus()
   }
 
   function clearMenus() {
-    $(toggle).each(function () {
-      getParent($(this)).removeClass('open')
-    })
+    $(backdrop).remove()
+    $(toggle).each(function () { getParent($(this)).removeClass('open') })
   }
 
   function getParent($this) {
     var selector = $this.attr('data-target')
-      , $parent
 
     if (!selector) {
       selector = $this.attr('href')
       selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
     }
 
-    $parent = selector && $(selector)
+    var $parent = selector && $(selector)
 
-    if (!$parent || !$parent.length) $parent = $this.parent()
-
-    return $parent
+    return $parent && $parent.length ? $parent : $this.parent()
   }
 
 
-  /* DROPDOWN PLUGIN DEFINITION
-   * ========================== */
+  // DROPDOWN PLUGIN DEFINITION
+  // ==========================
 
   var old = $.fn.dropdown
 
   $.fn.dropdown = function (option) {
     return this.each(function () {
       var $this = $(this)
-        , data = $this.data('dropdown')
+      var data  = $this.data('dropdown')
+
       if (!data) $this.data('dropdown', (data = new Dropdown(this)))
       if (typeof option == 'string') data[option].call($this)
     })
@@ -763,8 +727,8 @@
   $.fn.dropdown.Constructor = Dropdown
 
 
- /* DROPDOWN NO CONFLICT
-  * ==================== */
+  // DROPDOWN NO CONFLICT
+  // ====================
 
   $.fn.dropdown.noConflict = function () {
     $.fn.dropdown = old
@@ -772,13 +736,12 @@
   }
 
 
-  /* APPLY TO STANDARD DROPDOWN ELEMENTS
-   * =================================== */
+  // APPLY TO STANDARD DROPDOWN ELEMENTS
+  // ===================================
+
 
   $(document)
-    .on('click.dropdown.data-api', clearMenus)
     .on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
-    .on('click.dropdown-menu', function (e) { e.stopPropagation() })
     .on('click.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
     .on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)