dropdown.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. /**
  2. * angular-strap
  3. * @version v2.3.5 - 2015-10-29
  4. * @link http://mgcrea.github.io/angular-strap
  5. * @author Olivier Louvignes <olivier@mg-crea.com> (https://github.com/mgcrea)
  6. * @license MIT License, http://www.opensource.org/licenses/MIT
  7. */
  8. 'use strict';
  9. angular.module('mgcrea.ngStrap.dropdown', [ 'mgcrea.ngStrap.tooltip' ]).provider('$dropdown', function() {
  10. var defaults = this.defaults = {
  11. animation: 'am-fade',
  12. prefixClass: 'dropdown',
  13. prefixEvent: 'dropdown',
  14. placement: 'bottom-left',
  15. templateUrl: 'dropdown/dropdown.tpl.html',
  16. trigger: 'click',
  17. container: false,
  18. keyboard: true,
  19. html: false,
  20. delay: 0
  21. };
  22. this.$get = [ '$window', '$rootScope', '$tooltip', '$timeout', function($window, $rootScope, $tooltip, $timeout) {
  23. var bodyEl = angular.element($window.document.body);
  24. var matchesSelector = Element.prototype.matchesSelector || Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector;
  25. function DropdownFactory(element, config) {
  26. var $dropdown = {};
  27. var options = angular.extend({}, defaults, config);
  28. var scope = $dropdown.$scope = options.scope && options.scope.$new() || $rootScope.$new();
  29. $dropdown = $tooltip(element, options);
  30. var parentEl = element.parent();
  31. $dropdown.$onKeyDown = function(evt) {
  32. if (!/(38|40)/.test(evt.keyCode)) return;
  33. evt.preventDefault();
  34. evt.stopPropagation();
  35. var items = angular.element($dropdown.$element[0].querySelectorAll('li:not(.divider) a'));
  36. if (!items.length) return;
  37. var index;
  38. angular.forEach(items, function(el, i) {
  39. if (matchesSelector && matchesSelector.call(el, ':focus')) index = i;
  40. });
  41. if (evt.keyCode === 38 && index > 0) index--; else if (evt.keyCode === 40 && index < items.length - 1) index++; else if (angular.isUndefined(index)) index = 0;
  42. items.eq(index)[0].focus();
  43. };
  44. var show = $dropdown.show;
  45. $dropdown.show = function() {
  46. show();
  47. $timeout(function() {
  48. options.keyboard && $dropdown.$element && $dropdown.$element.on('keydown', $dropdown.$onKeyDown);
  49. bodyEl.on('click', onBodyClick);
  50. }, 0, false);
  51. parentEl.hasClass('dropdown') && parentEl.addClass('open');
  52. };
  53. var hide = $dropdown.hide;
  54. $dropdown.hide = function() {
  55. if (!$dropdown.$isShown) return;
  56. options.keyboard && $dropdown.$element && $dropdown.$element.off('keydown', $dropdown.$onKeyDown);
  57. bodyEl.off('click', onBodyClick);
  58. parentEl.hasClass('dropdown') && parentEl.removeClass('open');
  59. hide();
  60. };
  61. var destroy = $dropdown.destroy;
  62. $dropdown.destroy = function() {
  63. bodyEl.off('click', onBodyClick);
  64. destroy();
  65. };
  66. function onBodyClick(evt) {
  67. if (evt.target === element[0]) return;
  68. return evt.target !== element[0] && $dropdown.hide();
  69. }
  70. return $dropdown;
  71. }
  72. return DropdownFactory;
  73. } ];
  74. }).directive('bsDropdown', [ '$window', '$sce', '$dropdown', function($window, $sce, $dropdown) {
  75. return {
  76. restrict: 'EAC',
  77. scope: true,
  78. compile: function(tElement, tAttrs) {
  79. var options = {};
  80. if (!tAttrs.bsDropdown) {
  81. var nextSibling = tElement[0].nextSibling;
  82. while (nextSibling && nextSibling.nodeType !== 1) {
  83. nextSibling = nextSibling.nextSibling;
  84. }
  85. if (nextSibling.classList.contains('dropdown-menu')) {
  86. options.template = nextSibling.outerHTML;
  87. options.templateUrl = undefined;
  88. nextSibling.parentNode.removeChild(nextSibling);
  89. }
  90. }
  91. return function postLink(scope, element, attr) {
  92. options.scope = scope;
  93. angular.forEach([ 'template', 'templateUrl', 'controller', 'controllerAs', 'placement', 'container', 'delay', 'trigger', 'keyboard', 'html', 'animation', 'id' ], function(key) {
  94. if (angular.isDefined(tAttrs[key])) options[key] = tAttrs[key];
  95. });
  96. var falseValueRegExp = /^(false|0|)$/i;
  97. angular.forEach([ 'html', 'container' ], function(key) {
  98. if (angular.isDefined(attr[key]) && falseValueRegExp.test(attr[key])) options[key] = false;
  99. });
  100. attr.bsDropdown && scope.$watch(attr.bsDropdown, function(newValue, oldValue) {
  101. scope.content = newValue;
  102. }, true);
  103. attr.bsShow && scope.$watch(attr.bsShow, function(newValue, oldValue) {
  104. if (!dropdown || !angular.isDefined(newValue)) return;
  105. if (angular.isString(newValue)) newValue = !!newValue.match(/true|,?(dropdown),?/i);
  106. newValue === true ? dropdown.show() : dropdown.hide();
  107. });
  108. var dropdown = $dropdown(element, options);
  109. scope.$on('$destroy', function() {
  110. if (dropdown) dropdown.destroy();
  111. options = null;
  112. dropdown = null;
  113. });
  114. };
  115. }
  116. };
  117. } ]);