js/10-bootstrap-dropdown.js

   1 /* ========================================================================
   2  * Bootstrap: dropdown.js v3.1.0
   3  * http://getbootstrap.com/javascript/#dropdowns
   4  * ========================================================================
   5  * Copyright 2011-2014 Twitter, Inc.
   6  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
   7  * ======================================================================== */
   8
   9
  10 +function ($) {
  11   'use strict';
  12
  13   // DROPDOWN CLASS DEFINITION
  14   // =========================
  15
  16   var backdrop = '.dropdown-backdrop'
  17   var toggle   = '[data-toggle=dropdown]'
  18   var Dropdown = function (element) {
  19     $(element).on('click.bs.dropdown', this.toggle)
  20   }
  21
  22   Dropdown.prototype.toggle = function (e) {
  23     var $this = $(this)
  24
  25     if ($this.is('.disabled, :disabled')) return
  26
  27     var $parent  = getParent($this)
  28     var isActive = $parent.hasClass('open')
  29
  30     clearMenus()
  31
  32     if (!isActive) {
  33       if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
  34         // if mobile we use a backdrop because click events don't delegate
  35         $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
  36       }
  37
  38       var relatedTarget = { relatedTarget: this }
  39       $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
  40
  41       if (e.isDefaultPrevented()) return
  42
  43       $parent
  44         .toggleClass('open')
  45         .trigger('shown.bs.dropdown', relatedTarget)
  46
  47       $this.focus()
  48     }
  49
  50     return false
  51   }
  52
  53   Dropdown.prototype.keydown = function (e) {
  54     if (!/(38|40|27)/.test(e.keyCode)) return
  55
  56     var $this = $(this)
  57
  58     e.preventDefault()
  59     e.stopPropagation()
  60
  61     if ($this.is('.disabled, :disabled')) return
  62
  63     var $parent  = getParent($this)
  64     var isActive = $parent.hasClass('open')
  65
  66     if (!isActive || (isActive && e.keyCode == 27)) {
  67       if (e.which == 27) $parent.find(toggle).focus()
  68       return $this.click()
  69     }
  70
  71     var desc = ' li:not(.divider):visible a'
  72     var $items = $parent.find('[role=menu]' + desc + ', [role=listbox]' + desc)
  73
  74     if (!$items.length) return
  75
  76     var index = $items.index($items.filter(':focus'))
  77
  78     if (e.keyCode == 38 && index > 0)                 index--                        // up
  79     if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
  80     if (!~index)                                      index = 0
  81
  82     $items.eq(index).focus()
  83   }
  84
  85   function clearMenus(e) {
  86     $(backdrop).remove()
  87     $(toggle).each(function () {
  88       var $parent = getParent($(this))
  89       var relatedTarget = { relatedTarget: this }
  90       if (!$parent.hasClass('open')) return
  91       $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
  92       if (e.isDefaultPrevented()) return
  93       $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
  94     })
  95   }
  96
  97   function getParent($this) {
  98     var selector = $this.attr('data-target')
  99
 100     if (!selector) {
 101       selector = $this.attr('href')
 102       selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
 103     }
 104
 105     var $parent = selector && $(selector)
 106
 107     return $parent && $parent.length ? $parent : $this.parent()
 108   }
 109
 110
 111   // DROPDOWN PLUGIN DEFINITION
 112   // ==========================
 113
 114   var old = $.fn.dropdown
 115
 116   $.fn.dropdown = function (option) {
 117     return this.each(function () {
 118       var $this = $(this)
 119       var data  = $this.data('bs.dropdown')
 120
 121       if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
 122       if (typeof option == 'string') data[option].call($this)
 123     })
 124   }
 125
 126   $.fn.dropdown.Constructor = Dropdown
 127
 128
 129   // DROPDOWN NO CONFLICT
 130   // ====================
 131
 132   $.fn.dropdown.noConflict = function () {
 133     $.fn.dropdown = old
 134     return this
 135   }
 136
 137
 138   // APPLY TO STANDARD DROPDOWN ELEMENTS
 139   // ===================================
 140
 141   $(document)
 142     .on('click.bs.dropdown.data-api', clearMenus)
 143     .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
 144     .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
 145     .on('keydown.bs.dropdown.data-api', toggle + ', [role=menu], [role=listbox]', Dropdown.prototype.keydown)
 146
 147 }(Zepto);