Просмотр файла KoolTube/js/bootstrap-hover-dropdown.js

Размер файла: 4.96Kb
  1. /**
  2. * @preserve
  3. * Project: Bootstrap Hover Dropdown
  4. * Author: Cameron Spear
  5. * Version: v2.1.3
  6. * Contributors: Mattia Larentis
  7. * Dependencies: Bootstrap's Dropdown plugin, jQuery
  8. * Description: A simple plugin to enable Bootstrap dropdowns to active on hover and provide a nice user experience.
  9. * License: MIT
  10. * Homepage: http://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/
  11. */
  12. ;(function ($, window, undefined) {
  13. // outside the scope of the jQuery plugin to
  14. // keep track of all dropdowns
  15. var $allDropdowns = $();
  16.  
  17. // if instantlyCloseOthers is true, then it will instantly
  18. // shut other nav items when a new one is hovered over
  19. $.fn.dropdownHover = function (options) {
  20. // don't do anything if touch is supported
  21. // (plugin causes some issues on mobile)
  22. if('ontouchstart' in document) return this; // don't want to affect chaining
  23.  
  24. // the element we really care about
  25. // is the dropdown-toggle's parent
  26. $allDropdowns = $allDropdowns.add(this.parent());
  27.  
  28. return this.each(function () {
  29. var $this = $(this),
  30. $parent = $this.parent(),
  31. defaults = {
  32. delay: 500,
  33. hoverDelay: 0,
  34. instantlyCloseOthers: true
  35. },
  36. data = {
  37. delay: $(this).data('delay'),
  38. hoverDelay: $(this).data('hover-delay'),
  39. instantlyCloseOthers: $(this).data('close-others')
  40. },
  41. showEvent = 'show.bs.dropdown',
  42. hideEvent = 'hide.bs.dropdown',
  43. // shownEvent = 'shown.bs.dropdown',
  44. // hiddenEvent = 'hidden.bs.dropdown',
  45. settings = $.extend(true, {}, defaults, options, data),
  46. timeout, timeoutHover;
  47.  
  48. $parent.hover(function (event) {
  49. // so a neighbor can't open the dropdown
  50. if(!$parent.hasClass('open') && !$this.is(event.target)) {
  51. // stop this event, stop executing any code
  52. // in this callback but continue to propagate
  53. return true;
  54. }
  55.  
  56. openDropdown(event);
  57. }, function () {
  58. // clear timer for hover event
  59. window.clearTimeout(timeoutHover)
  60. timeout = window.setTimeout(function () {
  61. $this.attr('aria-expanded', 'false');
  62. $parent.removeClass('open');
  63. $this.trigger(hideEvent);
  64. }, settings.delay);
  65. });
  66.  
  67. // this helps with button groups!
  68. $this.hover(function (event) {
  69. // this helps prevent a double event from firing.
  70. // see https://github.com/CWSpear/bootstrap-hover-dropdown/issues/55
  71. if(!$parent.hasClass('open') && !$parent.is(event.target)) {
  72. // stop this event, stop executing any code
  73. // in this callback but continue to propagate
  74. return true;
  75. }
  76.  
  77. openDropdown(event);
  78. });
  79.  
  80. // handle submenus
  81. $parent.find('.dropdown-submenu').each(function (){
  82. var $this = $(this);
  83. var subTimeout;
  84. $this.hover(function () {
  85. window.clearTimeout(subTimeout);
  86. $this.children('.dropdown-menu').show();
  87. // always close submenu siblings instantly
  88. $this.siblings().children('.dropdown-menu').hide();
  89. }, function () {
  90. var $submenu = $this.children('.dropdown-menu');
  91. subTimeout = window.setTimeout(function () {
  92. $submenu.hide();
  93. }, settings.delay);
  94. });
  95. });
  96.  
  97. function openDropdown(event) {
  98. // clear dropdown timeout here so it doesnt close before it should
  99. window.clearTimeout(timeout);
  100. // restart hover timer
  101. window.clearTimeout(timeoutHover);
  102. // delay for hover event.
  103. timeoutHover = window.setTimeout(function () {
  104. $allDropdowns.find(':focus').blur();
  105.  
  106. if(settings.instantlyCloseOthers === true)
  107. $allDropdowns.removeClass('open');
  108. // clear timer for hover event
  109. window.clearTimeout(timeoutHover);
  110. $this.attr('aria-expanded', 'true');
  111. $parent.addClass('open');
  112. $this.trigger(showEvent);
  113. }, settings.hoverDelay);
  114. }
  115. });
  116. };
  117.  
  118. $(document).ready(function () {
  119. // apply dropdownHover to all elements with the data-hover="dropdown" attribute
  120. $('[data-hover="dropdown"]').dropdownHover();
  121. });
  122. })(jQuery, window);