dropdown.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. /**
  2. * angular-strap
  3. * @version v2.3.9 - 2016-06-10
  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. $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. if (options.keyboard && $dropdown.$element) $dropdown.$element.on('keydown', $dropdown.$onKeyDown);
  49. bodyEl.on('click', onBodyClick);
  50. }, 0, false);
  51. if (parentEl.hasClass('dropdown')) parentEl.addClass('open');
  52. };
  53. var hide = $dropdown.hide;
  54. $dropdown.hide = function() {
  55. if (!$dropdown.$isShown) return;
  56. if (options.keyboard && $dropdown.$element) $dropdown.$element.off('keydown', $dropdown.$onKeyDown);
  57. bodyEl.off('click', onBodyClick);
  58. if (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. if (!tAttrs.bsDropdown) {
  80. var nextSibling = tElement[0].nextSibling;
  81. while (nextSibling && nextSibling.nodeType !== 1) {
  82. nextSibling = nextSibling.nextSibling;
  83. }
  84. if (nextSibling && nextSibling.className.split(' ').indexOf('dropdown-menu') >= 0) {
  85. tAttrs.template = nextSibling.outerHTML;
  86. tAttrs.templateUrl = undefined;
  87. nextSibling.parentNode.removeChild(nextSibling);
  88. }
  89. }
  90. return function postLink(scope, element, attr) {
  91. var options = {
  92. scope: scope
  93. };
  94. angular.forEach([ 'template', 'templateUrl', 'controller', 'controllerAs', 'placement', 'container', 'delay', 'trigger', 'keyboard', 'html', 'animation', 'id', 'autoClose' ], function(key) {
  95. if (angular.isDefined(tAttrs[key])) options[key] = tAttrs[key];
  96. });
  97. var falseValueRegExp = /^(false|0|)$/i;
  98. angular.forEach([ 'html', 'container' ], function(key) {
  99. if (angular.isDefined(attr[key]) && falseValueRegExp.test(attr[key])) options[key] = false;
  100. });
  101. angular.forEach([ 'onBeforeShow', 'onShow', 'onBeforeHide', 'onHide' ], function(key) {
  102. var bsKey = 'bs' + key.charAt(0).toUpperCase() + key.slice(1);
  103. if (angular.isDefined(attr[bsKey])) {
  104. options[key] = scope.$eval(attr[bsKey]);
  105. }
  106. });
  107. if (attr.bsDropdown) {
  108. scope.$watch(attr.bsDropdown, function(newValue, oldValue) {
  109. scope.content = newValue;
  110. }, true);
  111. }
  112. var dropdown = $dropdown(element, options);
  113. if (attr.bsShow) {
  114. scope.$watch(attr.bsShow, function(newValue, oldValue) {
  115. if (!dropdown || !angular.isDefined(newValue)) return;
  116. if (angular.isString(newValue)) newValue = !!newValue.match(/true|,?(dropdown),?/i);
  117. if (newValue === true) {
  118. dropdown.show();
  119. } else {
  120. dropdown.hide();
  121. }
  122. });
  123. }
  124. scope.$on('$destroy', function() {
  125. if (dropdown) dropdown.destroy();
  126. options = null;
  127. dropdown = null;
  128. });
  129. };
  130. }
  131. };
  132. } ]);