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

Commit

Permalink
fix(dropdown): restore deprecated directives
Browse files Browse the repository at this point in the history 
- Adds uib- prefix to `dropdownConfig`
- Restores functionality to deprecated directives

Closes #4514
  • Loading branch information
@wesleycho
wesleycho committed Oct 3, 2015
1 parent 8fa1587 commit e7c5879
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 42 deletions.
8 changes: 4 additions & 4 deletions src/dropdown/docs/readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@

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

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

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

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:

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

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.

Example: `<ul class="dropdown-menu" template-url="custom-dropdown.html"></ul>`.
Example: `<ul class="uib-dropdown-menu" template-url="custom-dropdown.html"></ul>`.
131 changes: 116 additions & 15 deletions src/dropdown/dropdown.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])

.constant('dropdownConfig', {
.constant('uibDropdownConfig', {
openClass: 'open'
})

Expand Down Expand Up @@ -65,7 +65,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
};
}])

.controller('UibDropdownController', ['$scope', '$attrs', '$parse', 'dropdownConfig', 'uibDropdownService', '$animate', '$position', '$document', '$compile', '$templateRequest', function($scope, $attrs, $parse, dropdownConfig, uibDropdownService, $animate, $position, $document, $compile, $templateRequest) {
.controller('UibDropdownController', ['$scope', '$attrs', '$parse', 'uibDropdownConfig', 'uibDropdownService', '$animate', '$uibPosition', '$document', '$compile', '$templateRequest', function($scope, $attrs, $parse, dropdownConfig, uibDropdownService, $animate, $position, $document, $compile, $templateRequest) {
var self = this,
scope = $scope.$new(), // create a child scope so we are not polluting original one
templateScope,
Expand Down Expand Up @@ -253,10 +253,12 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
if (!dropdownCtrl) {
return;
}

var tplUrl = attrs.templateUrl;
if (tplUrl) {
dropdownCtrl.dropdownMenuTemplateUrl = tplUrl;
}

if (!dropdownCtrl.dropdownMenu) {
dropdownCtrl.dropdownMenu = element;
}
Expand Down Expand Up @@ -340,17 +342,42 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
};
});

/* Depreciated dropdown below */
/* Deprecated dropdown below */

angular.module('ui.bootstrap.dropdown')

.value('$dropdownSuppressWarning', false)

.service('dropdownService', ['$log', '$dropdownSuppressWarning', 'uibDropdownService', function($log, $dropdownSuppressWarning, uibDropdownService) {
if (!$dropdownSuppressWarning) {
$log.warn('dropdownService is now deprecated. Use uibDropdownService instead.');
}

angular.extend(this, uibDropdownService);
}])

.controller('DropdownController', ['$scope', '$attrs', '$log', '$dropdownSuppressWarning', '$controller', function($scope, $attrs, $log, $dropdownSuppressWarning, $controller) {
if (!$dropdownSuppressWarning) {
$log.warn('DropdownController is now deprecated. Use UibDropdownController instead.');
}

angular.extend(this, $controller('UibDropdownController', {
$scope: $scope,
$attrs: $attrs
}));
}])

.directive('dropdown', ['$log', '$dropdownSuppressWarning', function($log, $dropdownSuppressWarning) {
return {
controller: 'DropdownController',
link: function(scope, element, attrs, dropdownCtrl) {
if (!$dropdownSuppressWarning) {
$log.warn('dropdown is now deprecated. Use uib-dropdown instead.');
}
if (!$dropdownSuppressWarning) {
$log.warn('dropdown is now deprecated. Use uib-dropdown instead.');
}

dropdownCtrl.init(element);
element.addClass('dropdown');
}
};
}])

Expand All @@ -359,10 +386,23 @@ angular.module('ui.bootstrap.dropdown')
restrict: 'AC',
require: '?^dropdown',
link: function(scope, element, attrs, dropdownCtrl) {
if (!$dropdownSuppressWarning) {
$log.warn('dropdown-menu is now deprecated. Use uib-dropdown-menu instead.');
}
if (!$dropdownSuppressWarning) {
$log.warn('dropdown-menu is now deprecated. Use uib-dropdown-menu instead.');
}

if (!dropdownCtrl) {
return;
}

var tplUrl = attrs.templateUrl;
if (tplUrl) {
dropdownCtrl.dropdownMenuTemplateUrl = tplUrl;
}

if (!dropdownCtrl.dropdownMenu) {
dropdownCtrl.dropdownMenu = element;
}
}
};
}])

Expand All @@ -371,21 +411,82 @@ angular.module('ui.bootstrap.dropdown')
restrict: 'A',
require: '?^dropdown',
link: function(scope, element, attrs, dropdownCtrl) {
if (!$dropdownSuppressWarning) {
$log.warn('keyboard-nav is now deprecated. Use uib-keyboard-nav instead.');
}
if (!$dropdownSuppressWarning) {
$log.warn('keyboard-nav is now deprecated. Use uib-keyboard-nav instead.');
}

element.bind('keydown', function(e) {
if ([38, 40].indexOf(e.which) !== -1) {
e.preventDefault();
e.stopPropagation();

var elems = dropdownCtrl.dropdownMenu.find('a');

switch (e.which) {
case (40): { // Down
if (!angular.isNumber(dropdownCtrl.selectedOption)) {
dropdownCtrl.selectedOption = 0;
} else {
dropdownCtrl.selectedOption = dropdownCtrl.selectedOption === elems.length -1 ?
dropdownCtrl.selectedOption : dropdownCtrl.selectedOption + 1;
}
break;
}
case (38): { // Up
if (!angular.isNumber(dropdownCtrl.selectedOption)) {
dropdownCtrl.selectedOption = elems.length - 1;
} else {
dropdownCtrl.selectedOption = dropdownCtrl.selectedOption === 0 ?
0 : dropdownCtrl.selectedOption - 1;
}
break;
}
}
elems[dropdownCtrl.selectedOption].focus();
}
});
}
};
}])

.directive('dropdownToggle', ['$log', '$dropdownSuppressWarning', function($log, $dropdownSuppressWarning) {
return {
require: '?^dropdown',
link: function(scope, element, attrs, dropdownCtrl) {
if (!$dropdownSuppressWarning) {
$log.warn('dropdown-toggle is now deprecated. Use uib-dropdown-toggle instead.');
if (!$dropdownSuppressWarning) {
$log.warn('dropdown-toggle is now deprecated. Use uib-dropdown-toggle instead.');
}

if (!dropdownCtrl) {
return;
}

element.addClass('dropdown-toggle');

dropdownCtrl.toggleElement = element;

var toggleDropdown = function(event) {
event.preventDefault();

if (!element.hasClass('disabled') && !attrs.disabled) {
scope.$apply(function() {
dropdownCtrl.toggle();
});
}
}
};

element.bind('click', toggleDropdown);

// WAI-ARIA
element.attr({ 'aria-haspopup': true, 'aria-expanded': false });
scope.$watch(dropdownCtrl.isOpen, function(isOpen) {
element.attr('aria-expanded', !!isOpen);
});

scope.$on('$destroy', function() {
element.unbind('click', toggleDropdown);
});
}
};
}]);

34 changes: 11 additions & 23 deletions src/dropdown/test/dropdown.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ describe('dropdownToggle', function() {
beforeEach(module('ngAnimateMock'));
beforeEach(module('ui.bootstrap.dropdown'));

beforeEach(inject(function(_$animate_, _$compile_, _$rootScope_, _$document_, _$templateCache_, _dropdownConfig_, _$browser_, _$log_) {
beforeEach(inject(function(_$animate_, _$compile_, _$rootScope_, _$document_, _$templateCache_, uibDropdownConfig, _$browser_, _$log_) {
$animate = _$animate_;
$compile = _$compile_;
$rootScope = _$rootScope_;
$document = _$document_;
$templateCache = _$templateCache_;
dropdownConfig = _dropdownConfig_;
dropdownConfig = uibDropdownConfig;
$browser = _$browser_;
$log = _$log_;
}));
Expand Down Expand Up @@ -707,33 +707,21 @@ describe('dropdown deprecation', function() {

it('should give warning by default', inject(function($compile, $log, $rootScope) {
spyOn($log, 'warn');
var element = $compile('<li dropdown><a href></a><ul><li><a href>Hello</a></li></ul></li>')($rootScope);
var element = $compile('<li dropdown><a href></a><ul><li><a href dropdown-toggle>Hello</a></li></ul></li>')($rootScope);
$rootScope.$digest();
expect($log.warn.calls.count()).toBe(1);
expect($log.warn.calls.argsFor(0)).toEqual(['dropdown is now deprecated. Use uib-dropdown instead.']);
}));

it('should give warning by default for dropdownToggle', inject(function($compile, $log, $rootScope) {
spyOn($log, 'warn');
var element = $compile('<li dropdown><a href dropdown-toggle></a><ul><li><a href>Hello</a></li></ul></li>')($rootScope);
$rootScope.$digest();
expect($log.warn.calls.count()).toBe(2);
expect($log.warn.calls.argsFor(0)).toEqual(['dropdown-toggle is now deprecated. Use uib-dropdown-toggle instead.']);
expect($log.warn.calls.count()).toBe(3);
expect($log.warn.calls.argsFor(0)).toEqual(['DropdownController is now deprecated. Use UibDropdownController instead.']);
expect($log.warn.calls.argsFor(1)).toEqual(['dropdown-toggle is now deprecated. Use uib-dropdown-toggle instead.']);
expect($log.warn.calls.argsFor(2)).toEqual(['dropdown is now deprecated. Use uib-dropdown instead.']);
}));

it('should give warning by default for keyboardNav', inject(function($compile, $log, $rootScope) {
spyOn($log, 'warn');
var element = $compile('<li dropdown keyboard-nav><a href ></a><ul><li><a href>Hello</a></li></ul></li>')($rootScope);
$rootScope.$digest();
expect($log.warn.calls.count()).toBe(2);
expect($log.warn.calls.argsFor(0)).toEqual(['keyboard-nav is now deprecated. Use uib-keyboard-nav instead.']);
expect($log.warn.calls.count()).toBe(3);
expect($log.warn.calls.argsFor(0)).toEqual(['DropdownController is now deprecated. Use UibDropdownController instead.']);
expect($log.warn.calls.argsFor(1)).toEqual(['keyboard-nav is now deprecated. Use uib-keyboard-nav instead.']);
expect($log.warn.calls.argsFor(2)).toEqual(['dropdown is now deprecated. Use uib-dropdown instead.']);
}));

it('should give warning by default for dropdownMenu', inject(function($compile, $log, $rootScope) {
spyOn($log, 'warn');
var element = $compile('<li dropdown><a href ></a><ul dropdown-menu><li><a href>Hello</a></li></ul></li>')($rootScope);
$rootScope.$digest();
expect($log.warn.calls.count()).toBe(2);
expect($log.warn.calls.argsFor(0)).toEqual(['dropdown-menu is now deprecated. Use uib-dropdown-menu instead.']);
}));
});

0 comments on commit e7c5879

Please sign in to comment.