From cab9d112c2755f95247304245e66dfd8c798aca4 Mon Sep 17 00:00:00 2001 From: Chenyu Zhang Date: Thu, 29 Oct 2015 12:07:37 -0400 Subject: [PATCH 1/2] feat(typeahead): add 'is-toggled' option --- src/typeahead/docs/readme.md | 4 ++ src/typeahead/test/typeahead.spec.js | 72 ++++++++++++++++++++++++++++ src/typeahead/typeahead.js | 19 ++++++-- 3 files changed, 91 insertions(+), 4 deletions(-) diff --git a/src/typeahead/docs/readme.md b/src/typeahead/docs/readme.md index a749fb92b8..55b3997d06 100644 --- a/src/typeahead/docs/readme.md +++ b/src/typeahead/docs/readme.md @@ -78,3 +78,7 @@ The typeahead directives provide several attributes: * `typeahead-focus-on-select` _(Defaults: true) : On selection, focus the input element the typeahead directive is associated with + +* `typeahead-is-toggled` + _(Defaults: angular.noop)_ : + Binding to a variable that indicates if dropdown is toggled diff --git a/src/typeahead/test/typeahead.spec.js b/src/typeahead/test/typeahead.spec.js index 0ccb243220..03ab36b9ce 100644 --- a/src/typeahead/test/typeahead.spec.js +++ b/src/typeahead/test/typeahead.spec.js @@ -588,6 +588,78 @@ describe('typeahead tests', function() { }); }); + describe('is-toggle indicator', function () { + var element; + + beforeEach(function () { + element = prepareInputEl('
'); + }); + + it('should bind is-toggled indicator as true when matches are returned', function () { + expect($scope.isToggled).toBeFalsy(); + changeInputValueTo(element, 'b'); + expect($scope.isToggled).toBeTruthy(); + }); + + it('should bind is-toggled indicator as false when no matches returned', function () { + expect($scope.isToggled).toBeFalsy(); + changeInputValueTo(element, 'b'); + expect($scope.isToggled).toBeTruthy(); + changeInputValueTo(element, 'not match'); + expect($scope.isToggled).toBeFalsy(); + }); + + it('should bind is-toggled indicator as false when a match is clicked', function () { + expect($scope.isToggled).toBeFalsy(); + changeInputValueTo(element, 'b'); + expect($scope.isToggled).toBeTruthy(); + var match = $(findMatches(element)[1]).find('a')[0]; + + $(match).click(); + $scope.$digest(); + expect($scope.isToggled).toBeFalsy(); + }); + it('should bind is-toggled indicator as false when click outside', function () { + expect($scope.isToggled).toBeFalsy(); + changeInputValueTo(element, 'b'); + expect($scope.isToggled).toBeTruthy(); + $document.find('body').click(); + $scope.$digest(); + expect($scope.isToggled).toBeFalsy(); + }); + + it('should bind is-toggled indicator as false on enter', function () { + expect($scope.isToggled).toBeFalsy(); + changeInputValueTo(element, 'b'); + expect($scope.isToggled).toBeTruthy(); + triggerKeyDown(element, 13); + expect($scope.isToggled).toBeFalsy(); + }); + + it('should bind is-toggled indicator as false on tab', function () { + expect($scope.isToggled).toBeFalsy(); + changeInputValueTo(element, 'b'); + expect($scope.isToggled).toBeTruthy(); + triggerKeyDown(element, 9); + expect($scope.isToggled).toBeFalsy(); + }); + + it('should bind is-toggled indicator as false on escape key', function () { + expect($scope.isToggled).toBeFalsy(); + changeInputValueTo(element, 'b'); + expect($scope.isToggled).toBeTruthy(); + triggerKeyDown(element, 27); + expect($scope.isToggled).toBeFalsy(); + }); + + it('should bind is-toggled indicator as false input value smaller than a defined threshold', function () { + var element = prepareInputEl('
'); + expect($scope.isToggled).toBeFalsy(); + changeInputValueTo(element, 'b'); + expect($scope.isToggled).toBeFalsy(); + }); + }); + describe('pop-up interaction', function() { var element; diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js index 37b041a81e..82c0579468 100644 --- a/src/typeahead/typeahead.js +++ b/src/typeahead/typeahead.js @@ -68,6 +68,9 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position']) //If input matches an item of the list exactly, select it automatically var selectOnExact = attrs.typeaheadSelectOnExact ? originalScope.$eval(attrs.typeaheadSelectOnExact) : false; + //binding to a variable that indicates if dropdown is toggled + var isToggledSetter = $parse(attrs.typeaheadIsToggled).assign || angular.noop; + //INTERNAL VARIABLES //model setter executed upon match selection @@ -117,7 +120,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position']) select: 'select(activeIdx)', 'move-in-progress': 'moveInProgress', query: 'query', - position: 'position' + position: 'position', + 'assign-toggled': 'assignToggled(toggled)' }); //custom item template if (angular.isDefined(attrs.typeaheadTemplateUrl)) { @@ -268,6 +272,10 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position']) resetMatches(); + scope.assignToggled = function (toggled) { + isToggledSetter(originalScope, toggled); + }; + scope.select = function(activeIdx) { //called from within the $digest() cycle var locals = {}; @@ -463,7 +471,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position']) active: '=', position: '&', moveInProgress: '=', - select: '&' + select: '&', + assignToggled: '&', }, replace: true, templateUrl: function(element, attrs) { @@ -472,8 +481,10 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position']) link: function(scope, element, attrs) { scope.templateUrl = attrs.templateUrl; - scope.isOpen = function() { - return scope.matches.length > 0; + scope.isOpen = function () { + var toggled = scope.matches.length > 0; + scope.assignToggled({ toggled: toggled }); + return toggled; }; scope.isActive = function(matchIdx) { From 0569e111481da33b3cfc7b56e31af8c911c6e168 Mon Sep 17 00:00:00 2001 From: Chenyu Zhang Date: Thu, 29 Oct 2015 18:01:42 -0400 Subject: [PATCH 2/2] feat(typeahead): change attribute name to 'is-open' --- src/typeahead/docs/readme.md | 4 +- src/typeahead/test/typeahead.spec.js | 66 ++++++++++++++-------------- src/typeahead/typeahead.js | 18 ++++---- 3 files changed, 44 insertions(+), 44 deletions(-) diff --git a/src/typeahead/docs/readme.md b/src/typeahead/docs/readme.md index 55b3997d06..6248af76a7 100644 --- a/src/typeahead/docs/readme.md +++ b/src/typeahead/docs/readme.md @@ -79,6 +79,6 @@ The typeahead directives provide several attributes: _(Defaults: true) : On selection, focus the input element the typeahead directive is associated with -* `typeahead-is-toggled` +* `typeahead-is-open` _(Defaults: angular.noop)_ : - Binding to a variable that indicates if dropdown is toggled + Binding to a variable that indicates if dropdown is open diff --git a/src/typeahead/test/typeahead.spec.js b/src/typeahead/test/typeahead.spec.js index 03ab36b9ce..b03b13f131 100644 --- a/src/typeahead/test/typeahead.spec.js +++ b/src/typeahead/test/typeahead.spec.js @@ -588,72 +588,72 @@ describe('typeahead tests', function() { }); }); - describe('is-toggle indicator', function () { + describe('is-open indicator', function () { var element; beforeEach(function () { - element = prepareInputEl('
'); + element = prepareInputEl('
'); }); - it('should bind is-toggled indicator as true when matches are returned', function () { - expect($scope.isToggled).toBeFalsy(); + it('should bind is-open indicator as true when matches are returned', function () { + expect($scope.isOpen).toBeFalsy(); changeInputValueTo(element, 'b'); - expect($scope.isToggled).toBeTruthy(); + expect($scope.isOpen).toBeTruthy(); }); - it('should bind is-toggled indicator as false when no matches returned', function () { - expect($scope.isToggled).toBeFalsy(); + it('should bind is-open indicator as false when no matches returned', function () { + expect($scope.isOpen).toBeFalsy(); changeInputValueTo(element, 'b'); - expect($scope.isToggled).toBeTruthy(); + expect($scope.isOpen).toBeTruthy(); changeInputValueTo(element, 'not match'); - expect($scope.isToggled).toBeFalsy(); + expect($scope.isOpen).toBeFalsy(); }); - it('should bind is-toggled indicator as false when a match is clicked', function () { - expect($scope.isToggled).toBeFalsy(); + it('should bind is-open indicator as false when a match is clicked', function () { + expect($scope.isOpen).toBeFalsy(); changeInputValueTo(element, 'b'); - expect($scope.isToggled).toBeTruthy(); - var match = $(findMatches(element)[1]).find('a')[0]; + expect($scope.isOpen).toBeTruthy(); + var match = findMatches(element).find('a').eq(0); - $(match).click(); + match.click(); $scope.$digest(); - expect($scope.isToggled).toBeFalsy(); + expect($scope.isOpen).toBeFalsy(); }); - it('should bind is-toggled indicator as false when click outside', function () { - expect($scope.isToggled).toBeFalsy(); + it('should bind is-open indicator as false when click outside', function () { + expect($scope.isOpen).toBeFalsy(); changeInputValueTo(element, 'b'); - expect($scope.isToggled).toBeTruthy(); + expect($scope.isOpen).toBeTruthy(); $document.find('body').click(); $scope.$digest(); - expect($scope.isToggled).toBeFalsy(); + expect($scope.isOpen).toBeFalsy(); }); - it('should bind is-toggled indicator as false on enter', function () { - expect($scope.isToggled).toBeFalsy(); + it('should bind is-open indicator as false on enter', function () { + expect($scope.isOpen).toBeFalsy(); changeInputValueTo(element, 'b'); - expect($scope.isToggled).toBeTruthy(); + expect($scope.isOpen).toBeTruthy(); triggerKeyDown(element, 13); - expect($scope.isToggled).toBeFalsy(); + expect($scope.isOpen).toBeFalsy(); }); - it('should bind is-toggled indicator as false on tab', function () { - expect($scope.isToggled).toBeFalsy(); + it('should bind is-open indicator as false on tab', function () { + expect($scope.isOpen).toBeFalsy(); changeInputValueTo(element, 'b'); - expect($scope.isToggled).toBeTruthy(); + expect($scope.isOpen).toBeTruthy(); triggerKeyDown(element, 9); - expect($scope.isToggled).toBeFalsy(); + expect($scope.isOpen).toBeFalsy(); }); - it('should bind is-toggled indicator as false on escape key', function () { - expect($scope.isToggled).toBeFalsy(); + it('should bind is-open indicator as false on escape key', function () { + expect($scope.isOpen).toBeFalsy(); changeInputValueTo(element, 'b'); - expect($scope.isToggled).toBeTruthy(); + expect($scope.isOpen).toBeTruthy(); triggerKeyDown(element, 27); - expect($scope.isToggled).toBeFalsy(); + expect($scope.isOpen).toBeFalsy(); }); - it('should bind is-toggled indicator as false input value smaller than a defined threshold', function () { - var element = prepareInputEl('
'); + it('should bind is-open indicator as false input value smaller than a defined threshold', function () { + var element = prepareInputEl('
'); expect($scope.isToggled).toBeFalsy(); changeInputValueTo(element, 'b'); expect($scope.isToggled).toBeFalsy(); diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js index 82c0579468..bacbe7217b 100644 --- a/src/typeahead/typeahead.js +++ b/src/typeahead/typeahead.js @@ -68,8 +68,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position']) //If input matches an item of the list exactly, select it automatically var selectOnExact = attrs.typeaheadSelectOnExact ? originalScope.$eval(attrs.typeaheadSelectOnExact) : false; - //binding to a variable that indicates if dropdown is toggled - var isToggledSetter = $parse(attrs.typeaheadIsToggled).assign || angular.noop; + //binding to a variable that indicates if dropdown is open + var isOpenSetter = $parse(attrs.typeaheadIsOpen).assign || angular.noop; //INTERNAL VARIABLES @@ -121,7 +121,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position']) 'move-in-progress': 'moveInProgress', query: 'query', position: 'position', - 'assign-toggled': 'assignToggled(toggled)' + 'assign-is-open': 'assignIsOpen(isOpen)' }); //custom item template if (angular.isDefined(attrs.typeaheadTemplateUrl)) { @@ -272,8 +272,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position']) resetMatches(); - scope.assignToggled = function (toggled) { - isToggledSetter(originalScope, toggled); + scope.assignIsOpen = function (isOpen) { + isOpenSetter(originalScope, isOpen); }; scope.select = function(activeIdx) { @@ -472,7 +472,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position']) position: '&', moveInProgress: '=', select: '&', - assignToggled: '&', + assignIsOpen: '&', }, replace: true, templateUrl: function(element, attrs) { @@ -482,9 +482,9 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position']) scope.templateUrl = attrs.templateUrl; scope.isOpen = function () { - var toggled = scope.matches.length > 0; - scope.assignToggled({ toggled: toggled }); - return toggled; + var isDropdownOpen = scope.matches.length > 0; + scope.assignIsOpen({ isOpen: isDropdownOpen }); + return isDropdownOpen; }; scope.isActive = function(matchIdx) {