src/bootstrap/js/bootstrap-dropdown.js

   1 /* ============================================================
   2  * bootstrap-dropdown.js v2.2.2
   3  * http://twitter.github.com/bootstrap/javascript.html#dropdowns
   4  * ============================================================
   5  * Copyright 2012 Twitter, Inc.
   6  *
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  * http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============================================================ */
  19
  20
  21 !function ($) {
  22
  23   "use strict"; // jshint ;_;
  24
  25
  26  /* DROPDOWN CLASS DEFINITION
  27   * ========================= */
  28
  29   var toggle = '[data-toggle=dropdown]'
  30     , Dropdown = function (element) {
  31         var $el = $(element).on('click.dropdown.data-api', this.toggle)
  32         $('html').on('click.dropdown.data-api', function () {
  33           $el.parent().removeClass('open')
  34         })
  35       }
  36
  37   Dropdown.prototype = {
  38
  39     constructor: Dropdown
  40
  41   , toggle: function (e) {
  42       var $this = $(this)
  43         , $parent
  44         , isActive
  45
  46       if ($this.is('.disabled, :disabled')) return
  47
  48       $parent = getParent($this)
  49
  50       isActive = $parent.hasClass('open')
  51
  52       clearMenus()
  53
  54       if (!isActive) {
  55         $parent.toggleClass('open')
  56       }
  57
  58       $this.focus()
  59
  60       return false
  61     }
  62
  63   , keydown: function (e) {
  64       var $this
  65         , $items
  66         , $active
  67         , $parent
  68         , isActive
  69         , index
  70
  71       if (!/(38|40|27)/.test(e.keyCode)) return
  72
  73       $this = $(this)
  74
  75       e.preventDefault()
  76       e.stopPropagation()
  77
  78       if ($this.is('.disabled, :disabled')) return
  79
  80       $parent = getParent($this)
  81
  82       isActive = $parent.hasClass('open')
  83
  84       if (!isActive || (isActive && e.keyCode == 27)) return $this.click()
  85
  86       $items = $('[role=menu] li:not(.divider):visible a', $parent)
  87
  88       if (!$items.length) return
  89
  90       index = $items.index($items.filter(':focus'))
  91
  92       if (e.keyCode == 38 && index > 0) index--                                        // up
  93       if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
  94       if (!~index) index = 0
  95
  96       $items
  97         .eq(index)
  98         .focus()
  99     }
 100
 101   }
 102
 103   function clearMenus() {
 104     $(toggle).each(function () {
 105       getParent($(this)).removeClass('open')
 106     })
 107   }
 108
 109   function getParent($this) {
 110     var selector = $this.attr('data-target')
 111       , $parent
 112
 113     if (!selector) {
 114       selector = $this.attr('href')
 115       selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
 116     }
 117
 118     $parent = $(selector)
 119     $parent.length || ($parent = $this.parent())
 120
 121     return $parent
 122   }
 123
 124
 125   /* DROPDOWN PLUGIN DEFINITION
 126    * ========================== */
 127
 128   var old = $.fn.dropdown
 129
 130   $.fn.dropdown = function (option) {
 131     return this.each(function () {
 132       var $this = $(this)
 133         , data = $this.data('dropdown')
 134       if (!data) $this.data('dropdown', (data = new Dropdown(this)))
 135       if (typeof option == 'string') data[option].call($this)
 136     })
 137   }
 138
 139   $.fn.dropdown.Constructor = Dropdown
 140
 141
 142  /* DROPDOWN NO CONFLICT
 143   * ==================== */
 144
 145   $.fn.dropdown.noConflict = function () {
 146     $.fn.dropdown = old
 147     return this
 148   }
 149
 150
 151   /* APPLY TO STANDARD DROPDOWN ELEMENTS
 152    * =================================== */
 153
 154   $(document)
 155     .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
 156     .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
 157     .on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
 158     .on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
 159     .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
 160
 161 }(window.jQuery);