Built files from Bizgaze WebServer
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

dropdown-bootstrap-extended.js 3.0KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /* ========================================================================
  2. * Tutorial specific Javascript
  3. *
  4. * ========================================================================
  5. * Copyright 2015 Bootbites.com (unless otherwise stated)
  6. * For license information see: http://bootbites.com/license
  7. * ======================================================================== */
  8. 'use strict';
  9. var dropdownSelectors = $('.dropdown, .dropup');
  10. // Custom function to read dropdown data
  11. // =========================
  12. function dropdownEffectData(target) {
  13. // @todo - page level global?
  14. var effectInDefault = null,
  15. effectOutDefault = null;
  16. var dropdown = $(target),
  17. dropdownMenu = $('.dropdown-menu', target);
  18. var parentUl = dropdown.parents('ul.nav');
  19. // If parent is ul.nav allow global effect settings
  20. if (parentUl.length > 0) {
  21. effectInDefault = parentUl.data('dropdown-in') || null;
  22. effectOutDefault = parentUl.data('dropdown-out') || null;
  23. }
  24. return {
  25. target: target,
  26. dropdown: dropdown,
  27. dropdownMenu: dropdownMenu,
  28. effectIn: dropdownMenu.data('dropdown-in') || effectInDefault,
  29. effectOut: dropdownMenu.data('dropdown-out') || effectOutDefault,
  30. };
  31. }
  32. // Custom function to start effect (in or out)
  33. // =========================
  34. function dropdownEffectStart(data, effectToStart) {
  35. if (effectToStart) {
  36. data.dropdown.addClass('dropdown-animating');
  37. data.dropdownMenu.addClass('animated');
  38. data.dropdownMenu.addClass(effectToStart);
  39. }
  40. }
  41. // Custom function to read when animation is over
  42. // =========================
  43. function dropdownEffectEnd(data, callbackFunc) {
  44. var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  45. data.dropdown.one(animationEnd, function() {
  46. data.dropdown.removeClass('dropdown-animating');
  47. data.dropdownMenu.removeClass('animated');
  48. data.dropdownMenu.removeClass(data.effectIn);
  49. data.dropdownMenu.removeClass(data.effectOut);
  50. // Custom callback option, used to remove open class in out effect
  51. if(typeof callbackFunc == 'function'){
  52. callbackFunc();
  53. }
  54. });
  55. }
  56. // Bootstrap API hooks
  57. // =========================
  58. dropdownSelectors.on({
  59. "show.bs.dropdown": function () {
  60. // On show, start in effect
  61. var dropdown = dropdownEffectData(this);
  62. dropdownEffectStart(dropdown, dropdown.effectIn);
  63. },
  64. "shown.bs.dropdown": function () {
  65. // On shown, remove in effect once complete
  66. var dropdown = dropdownEffectData(this);
  67. if (dropdown.effectIn && dropdown.effectOut) {
  68. dropdownEffectEnd(dropdown, function() {});
  69. }
  70. },
  71. "hide.bs.dropdown": function(e) {
  72. // On hide, start out effect
  73. var dropdown = dropdownEffectData(this);
  74. if (dropdown.effectOut) {
  75. e.preventDefault();
  76. dropdownEffectStart(dropdown, dropdown.effectOut);
  77. dropdownEffectEnd(dropdown, function() {
  78. dropdown.dropdown.removeClass('show');
  79. dropdown.dropdownMenu.removeClass('show');
  80. });
  81. }
  82. },
  83. });