Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Commit e7c5879

Browse files
wesleychowesleycho
committed
fix(dropdown): restore deprecated directives
- Adds uib- prefix to `dropdownConfig` - Restores functionality to deprecated directives Closes #4514
1 parent 8fa1587 commit e7c5879

File tree

3 files changed

+131
-42
lines changed

3 files changed

+131
-42
lines changed

‎src/dropdown/docs/readme.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11

22
Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.
3-
You can either use `is-open` to toggle or add inside a `<a dropdown-toggle>` element to toggle it when is clicked.
3+
You can either use `is-open` to toggle or add inside a `<a uib-dropdown-toggle>` element to toggle it when is clicked.
44
There is also the `on-toggle(open)` optional expression fired when dropdown changes state.
55

6-
Add `dropdown-append-to-body` to the `dropdown` element to append to the inner `dropdown-menu` to the body.
6+
Add `dropdown-append-to-body` to the `uib-dropdown` element to append to the inner `dropdown-menu` to the body.
77
This is useful when the dropdown button is inside a div with `overflow: hidden`, and the menu would otherwise be hidden.
88

9-
Add `keyboard-nav` to the `dropdown` element to enable navigation of dropdown list elements with the arrow keys.
9+
Add `uib-keyboard-nav` to the `uib-dropdown` element to enable navigation of dropdown list elements with the arrow keys.
1010

1111
By default the dropdown will automatically close if any of its elements is clicked, you can change this behavior by setting the `auto-close` option as follows:
1212

@@ -16,4 +16,4 @@ By default the dropdown will automatically close if any of its elements is click
1616

1717
Optionally, you may specify a template for the dropdown menu using the `template-url` attribute. This is especially useful when you have multiple similar dropdowns in a repeater and you want to keep your HTML output lean and your number of scopes to a minimum. The template has full access to the scope in which the dropdown lies.
1818

19-
Example: `<ul class="dropdown-menu" template-url="custom-dropdown.html"></ul>`.
19+
Example: `<ul class="uib-dropdown-menu" template-url="custom-dropdown.html"></ul>`.

‎src/dropdown/dropdown.js

+116-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
22

3-
.constant('dropdownConfig', {
3+
.constant('uibDropdownConfig', {
44
openClass: 'open'
55
})
66

@@ -65,7 +65,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
6565
};
6666
}])
6767

68-
.controller('UibDropdownController', ['$scope', '$attrs', '$parse', 'dropdownConfig', 'uibDropdownService', '$animate', '$position', '$document', '$compile', '$templateRequest', function($scope, $attrs, $parse, dropdownConfig, uibDropdownService, $animate, $position, $document, $compile, $templateRequest) {
68+
.controller('UibDropdownController', ['$scope', '$attrs', '$parse', 'uibDropdownConfig', 'uibDropdownService', '$animate', '$uibPosition', '$document', '$compile', '$templateRequest', function($scope, $attrs, $parse, dropdownConfig, uibDropdownService, $animate, $position, $document, $compile, $templateRequest) {
6969
var self = this,
7070
scope = $scope.$new(), // create a child scope so we are not polluting original one
7171
templateScope,
@@ -253,10 +253,12 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
253253
if (!dropdownCtrl) {
254254
return;
255255
}
256+
256257
var tplUrl = attrs.templateUrl;
257258
if (tplUrl) {
258259
dropdownCtrl.dropdownMenuTemplateUrl = tplUrl;
259260
}
261+
260262
if (!dropdownCtrl.dropdownMenu) {
261263
dropdownCtrl.dropdownMenu = element;
262264
}
@@ -340,17 +342,42 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
340342
};
341343
});
342344

343-
/* Depreciated dropdown below */
345+
/* Deprecated dropdown below */
344346

345347
angular.module('ui.bootstrap.dropdown')
348+
346349
.value('$dropdownSuppressWarning', false)
350+
351+
.service('dropdownService', ['$log', '$dropdownSuppressWarning', 'uibDropdownService', function($log, $dropdownSuppressWarning, uibDropdownService) {
352+
if (!$dropdownSuppressWarning) {
353+
$log.warn('dropdownService is now deprecated. Use uibDropdownService instead.');
354+
}
355+
356+
angular.extend(this, uibDropdownService);
357+
}])
358+
359+
.controller('DropdownController', ['$scope', '$attrs', '$log', '$dropdownSuppressWarning', '$controller', function($scope, $attrs, $log, $dropdownSuppressWarning, $controller) {
360+
if (!$dropdownSuppressWarning) {
361+
$log.warn('DropdownController is now deprecated. Use UibDropdownController instead.');
362+
}
363+
364+
angular.extend(this, $controller('UibDropdownController', {
365+
$scope: $scope,
366+
$attrs: $attrs
367+
}));
368+
}])
369+
347370
.directive('dropdown', ['$log', '$dropdownSuppressWarning', function($log, $dropdownSuppressWarning) {
348371
return {
372+
controller: 'DropdownController',
349373
link: function(scope, element, attrs, dropdownCtrl) {
350-
if (!$dropdownSuppressWarning) {
351-
$log.warn('dropdown is now deprecated. Use uib-dropdown instead.');
352-
}
374+
if (!$dropdownSuppressWarning) {
375+
$log.warn('dropdown is now deprecated. Use uib-dropdown instead.');
353376
}
377+
378+
dropdownCtrl.init(element);
379+
element.addClass('dropdown');
380+
}
354381
};
355382
}])
356383

@@ -359,10 +386,23 @@ angular.module('ui.bootstrap.dropdown')
359386
restrict: 'AC',
360387
require: '?^dropdown',
361388
link: function(scope, element, attrs, dropdownCtrl) {
362-
if (!$dropdownSuppressWarning) {
363-
$log.warn('dropdown-menu is now deprecated. Use uib-dropdown-menu instead.');
364-
}
389+
if (!$dropdownSuppressWarning) {
390+
$log.warn('dropdown-menu is now deprecated. Use uib-dropdown-menu instead.');
391+
}
392+
393+
if (!dropdownCtrl) {
394+
return;
365395
}
396+
397+
var tplUrl = attrs.templateUrl;
398+
if (tplUrl) {
399+
dropdownCtrl.dropdownMenuTemplateUrl = tplUrl;
400+
}
401+
402+
if (!dropdownCtrl.dropdownMenu) {
403+
dropdownCtrl.dropdownMenu = element;
404+
}
405+
}
366406
};
367407
}])
368408

@@ -371,21 +411,82 @@ angular.module('ui.bootstrap.dropdown')
371411
restrict: 'A',
372412
require: '?^dropdown',
373413
link: function(scope, element, attrs, dropdownCtrl) {
374-
if (!$dropdownSuppressWarning) {
375-
$log.warn('keyboard-nav is now deprecated. Use uib-keyboard-nav instead.');
376-
}
414+
if (!$dropdownSuppressWarning) {
415+
$log.warn('keyboard-nav is now deprecated. Use uib-keyboard-nav instead.');
377416
}
417+
418+
element.bind('keydown', function(e) {
419+
if ([38, 40].indexOf(e.which) !== -1) {
420+
e.preventDefault();
421+
e.stopPropagation();
422+
423+
var elems = dropdownCtrl.dropdownMenu.find('a');
424+
425+
switch (e.which) {
426+
case (40): { // Down
427+
if (!angular.isNumber(dropdownCtrl.selectedOption)) {
428+
dropdownCtrl.selectedOption = 0;
429+
} else {
430+
dropdownCtrl.selectedOption = dropdownCtrl.selectedOption === elems.length -1 ?
431+
dropdownCtrl.selectedOption : dropdownCtrl.selectedOption + 1;
432+
}
433+
break;
434+
}
435+
case (38): { // Up
436+
if (!angular.isNumber(dropdownCtrl.selectedOption)) {
437+
dropdownCtrl.selectedOption = elems.length - 1;
438+
} else {
439+
dropdownCtrl.selectedOption = dropdownCtrl.selectedOption === 0 ?
440+
0 : dropdownCtrl.selectedOption - 1;
441+
}
442+
break;
443+
}
444+
}
445+
elems[dropdownCtrl.selectedOption].focus();
446+
}
447+
});
448+
}
378449
};
379450
}])
380451

381452
.directive('dropdownToggle', ['$log', '$dropdownSuppressWarning', function($log, $dropdownSuppressWarning) {
382453
return {
383454
require: '?^dropdown',
384455
link: function(scope, element, attrs, dropdownCtrl) {
385-
if (!$dropdownSuppressWarning) {
386-
$log.warn('dropdown-toggle is now deprecated. Use uib-dropdown-toggle instead.');
456+
if (!$dropdownSuppressWarning) {
457+
$log.warn('dropdown-toggle is now deprecated. Use uib-dropdown-toggle instead.');
458+
}
459+
460+
if (!dropdownCtrl) {
461+
return;
462+
}
463+
464+
element.addClass('dropdown-toggle');
465+
466+
dropdownCtrl.toggleElement = element;
467+
468+
var toggleDropdown = function(event) {
469+
event.preventDefault();
470+
471+
if (!element.hasClass('disabled') && !attrs.disabled) {
472+
scope.$apply(function() {
473+
dropdownCtrl.toggle();
474+
});
387475
}
388-
}
476+
};
477+
478+
element.bind('click', toggleDropdown);
479+
480+
// WAI-ARIA
481+
element.attr({ 'aria-haspopup': true, 'aria-expanded': false });
482+
scope.$watch(dropdownCtrl.isOpen, function(isOpen) {
483+
element.attr('aria-expanded', !!isOpen);
484+
});
485+
486+
scope.$on('$destroy', function() {
487+
element.unbind('click', toggleDropdown);
488+
});
489+
}
389490
};
390491
}]);
391492

‎src/dropdown/test/dropdown.spec.js

+11-23
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ describe('dropdownToggle', function() {
44
beforeEach(module('ngAnimateMock'));
55
beforeEach(module('ui.bootstrap.dropdown'));
66

7-
beforeEach(inject(function(_$animate_, _$compile_, _$rootScope_, _$document_, _$templateCache_, _dropdownConfig_, _$browser_, _$log_) {
7+
beforeEach(inject(function(_$animate_, _$compile_, _$rootScope_, _$document_, _$templateCache_, uibDropdownConfig, _$browser_, _$log_) {
88
$animate = _$animate_;
99
$compile = _$compile_;
1010
$rootScope = _$rootScope_;
1111
$document = _$document_;
1212
$templateCache = _$templateCache_;
13-
dropdownConfig = _dropdownConfig_;
13+
dropdownConfig = uibDropdownConfig;
1414
$browser = _$browser_;
1515
$log = _$log_;
1616
}));
@@ -707,33 +707,21 @@ describe('dropdown deprecation', function() {
707707

708708
it('should give warning by default', inject(function($compile, $log, $rootScope) {
709709
spyOn($log, 'warn');
710-
var element = $compile('<li dropdown><a href></a><ul><li><a href>Hello</a></li></ul></li>')($rootScope);
710+
var element = $compile('<li dropdown><a href></a><ul><li><a href dropdown-toggle>Hello</a></li></ul></li>')($rootScope);
711711
$rootScope.$digest();
712-
expect($log.warn.calls.count()).toBe(1);
713-
expect($log.warn.calls.argsFor(0)).toEqual(['dropdown is now deprecated. Use uib-dropdown instead.']);
714-
}));
715-
716-
it('should give warning by default for dropdownToggle', inject(function($compile, $log, $rootScope) {
717-
spyOn($log, 'warn');
718-
var element = $compile('<li dropdown><a href dropdown-toggle></a><ul><li><a href>Hello</a></li></ul></li>')($rootScope);
719-
$rootScope.$digest();
720-
expect($log.warn.calls.count()).toBe(2);
721-
expect($log.warn.calls.argsFor(0)).toEqual(['dropdown-toggle is now deprecated. Use uib-dropdown-toggle instead.']);
712+
expect($log.warn.calls.count()).toBe(3);
713+
expect($log.warn.calls.argsFor(0)).toEqual(['DropdownController is now deprecated. Use UibDropdownController instead.']);
714+
expect($log.warn.calls.argsFor(1)).toEqual(['dropdown-toggle is now deprecated. Use uib-dropdown-toggle instead.']);
715+
expect($log.warn.calls.argsFor(2)).toEqual(['dropdown is now deprecated. Use uib-dropdown instead.']);
722716
}));
723717

724718
it('should give warning by default for keyboardNav', inject(function($compile, $log, $rootScope) {
725719
spyOn($log, 'warn');
726720
var element = $compile('<li dropdown keyboard-nav><a href ></a><ul><li><a href>Hello</a></li></ul></li>')($rootScope);
727721
$rootScope.$digest();
728-
expect($log.warn.calls.count()).toBe(2);
729-
expect($log.warn.calls.argsFor(0)).toEqual(['keyboard-nav is now deprecated. Use uib-keyboard-nav instead.']);
722+
expect($log.warn.calls.count()).toBe(3);
723+
expect($log.warn.calls.argsFor(0)).toEqual(['DropdownController is now deprecated. Use UibDropdownController instead.']);
724+
expect($log.warn.calls.argsFor(1)).toEqual(['keyboard-nav is now deprecated. Use uib-keyboard-nav instead.']);
725+
expect($log.warn.calls.argsFor(2)).toEqual(['dropdown is now deprecated. Use uib-dropdown instead.']);
730726
}));
731-
732-
it('should give warning by default for dropdownMenu', inject(function($compile, $log, $rootScope) {
733-
spyOn($log, 'warn');
734-
var element = $compile('<li dropdown><a href ></a><ul dropdown-menu><li><a href>Hello</a></li></ul></li>')($rootScope);
735-
$rootScope.$digest();
736-
expect($log.warn.calls.count()).toBe(2);
737-
expect($log.warn.calls.argsFor(0)).toEqual(['dropdown-menu is now deprecated. Use uib-dropdown-menu instead.']);
738-
}));
739727
});

0 commit comments

Comments
 (0)