11/*!
22 * ui-select
33 * http://github.com/angular-ui/ui-select
4- * Version: 0.10 .0 - 2015-02-26T06:35:06.239Z
4+ * Version: 0.11 .0 - 2015-03-09T00:55:08.441Z
55 * License: MIT
66 */
77
@@ -575,6 +575,11 @@ uis.controller('uiSelectCtrl',
575575 }
576576 } ;
577577
578+ ctrl . setFocus = function ( ) {
579+ if ( ! ctrl . focus && ! ctrl . multiple ) ctrl . focusser [ 0 ] . focus ( ) ;
580+ if ( ! ctrl . focus && ctrl . multiple ) _searchInput [ 0 ] . focus ( ) ;
581+ } ;
582+
578583 ctrl . clear = function ( $event ) {
579584 ctrl . select ( undefined ) ;
580585 $event . stopPropagation ( ) ;
@@ -632,29 +637,35 @@ uis.controller('uiSelectCtrl',
632637 return ctrl . placeholder ;
633638 } ;
634639
635- var containerSizeWatch ;
636- ctrl . sizeSearchInput = function ( ) {
640+ var sizeWatch = null ;
641+ ctrl . sizeSearchInput = function ( ) {
637642 var input = _searchInput [ 0 ] ,
638- container = _searchInput . parent ( ) . parent ( ) [ 0 ] ;
639- _searchInput . css ( 'width' , '10px' ) ;
640- var calculate = function ( ) {
641- var newWidth = container . clientWidth - input . offsetLeft - 10 ;
642- if ( newWidth < 50 ) newWidth = container . clientWidth ;
643- _searchInput . css ( 'width' , newWidth + 'px' ) ;
644- } ;
645- $timeout ( function ( ) { //Give tags time to render correctly
646- if ( container . clientWidth === 0 && ! containerSizeWatch ) {
647- containerSizeWatch = $scope . $watch ( function ( ) { return container . clientWidth ; } , function ( newValue ) {
648- if ( newValue !== 0 ) {
649- calculate ( ) ;
650- containerSizeWatch ( ) ;
651- containerSizeWatch = null ;
643+ container = _searchInput . parent ( ) . parent ( ) [ 0 ] ,
644+ calculateContainerWidth = function ( ) {
645+ // Return the container width only if the search input is visible
646+ return container . clientWidth * ! ! input . offsetParent ;
647+ } ,
648+ updateIfVisible = function ( containerWidth ) {
649+ if ( containerWidth === 0 ) {
650+ return false ;
651+ }
652+ var inputWidth = containerWidth - input . offsetLeft - 10 ;
653+ if ( inputWidth < 50 ) inputWidth = containerWidth ;
654+ _searchInput . css ( 'width' , inputWidth + 'px' ) ;
655+ return true ;
656+ } ;
657+
658+ _searchInput . css ( 'width' , '10px' ) ;
659+ $timeout ( function ( ) { //Give tags time to render correctly
660+ if ( sizeWatch === null && ! updateIfVisible ( calculateContainerWidth ( ) ) ) {
661+ sizeWatch = $scope . $watch ( calculateContainerWidth , function ( containerWidth ) {
662+ if ( updateIfVisible ( containerWidth ) ) {
663+ sizeWatch ( ) ;
664+ sizeWatch = null ;
652665 }
653666 } ) ;
654- } else if ( ! containerSizeWatch ) {
655- calculate ( ) ;
656667 }
657- } , 0 , false ) ;
668+ } ) ;
658669 } ;
659670
660671 function _handleDropDownSelection ( key ) {
@@ -1013,8 +1024,8 @@ uis.controller('uiSelectCtrl',
10131024} ] ) ;
10141025
10151026uis . directive ( 'uiSelect' ,
1016- [ '$document' , 'uiSelectConfig' , 'uiSelectMinErr' , '$compile' , '$parse' ,
1017- function ( $document , uiSelectConfig , uiSelectMinErr , $compile , $parse ) {
1027+ [ '$document' , 'uiSelectConfig' , 'uiSelectMinErr' , '$compile' , '$parse' , '$timeout' ,
1028+ function ( $document , uiSelectConfig , uiSelectMinErr , $compile , $parse , $timeout ) {
10181029
10191030 return {
10201031 restrict : 'EA' ,
@@ -1029,7 +1040,6 @@ uis.directive('uiSelect',
10291040
10301041 controller : 'uiSelectCtrl' ,
10311042 controllerAs : '$select' ,
1032-
10331043 link : function ( scope , element , attrs , ctrls , transcludeFn ) {
10341044 var $select = ctrls [ 0 ] ;
10351045 var ngModel = ctrls [ 1 ] ;
@@ -1226,6 +1236,8 @@ uis.directive('uiSelect',
12261236 attrs . $observe ( 'disabled' , function ( ) {
12271237 // No need to use $eval() (thanks to ng-disabled) since we already get a boolean instead of a string
12281238 $select . disabled = attrs . disabled !== undefined ? attrs . disabled : false ;
1239+ // As the search input field may now become visible, it may be necessary to recompute its size
1240+ $select . sizeSearchInput ( ) ;
12291241 } ) ;
12301242
12311243 attrs . $observe ( 'resetSearchInput' , function ( ) {
@@ -1269,6 +1281,22 @@ uis.directive('uiSelect',
12691281 }
12701282 } ) ;
12711283
1284+ //Automatically gets focus when loaded
1285+ if ( angular . isDefined ( attrs . autofocus ) ) {
1286+ $timeout ( function ( ) {
1287+ $select . setFocus ( ) ;
1288+ } ) ;
1289+ }
1290+
1291+ //Gets focus based on scope event name (e.g. focus-on='SomeEventName')
1292+ if ( angular . isDefined ( attrs . focusOn ) ) {
1293+ scope . $on ( attrs . focusOn , function ( ) {
1294+ $timeout ( function ( ) {
1295+ $select . setFocus ( ) ;
1296+ } ) ;
1297+ } ) ;
1298+ }
1299+
12721300 if ( $select . multiple ) {
12731301 scope . $watchCollection ( function ( ) { return ngModel . $modelValue ; } , function ( newValue , oldValue ) {
12741302 if ( oldValue != newValue )
@@ -1538,8 +1566,8 @@ $templateCache.put("bootstrap/select.tpl.html","<div class=\"ui-select-container
15381566$templateCache . put ( "select2/choices.tpl.html" , "<ul class=\"ui-select-choices ui-select-choices-content select2-results\"><li class=\"ui-select-choices-group\" ng-class=\"{\'select2-result-with-children\': $select.choiceGrouped($group) }\"><div ng-show=\"$select.choiceGrouped($group)\" class=\"ui-select-choices-group-label select2-result-label\" ng-bind=\"$group.name\"></div><ul role=\"listbox\" id=\"ui-select-choices-{{ $select.generatedId }}\" ng-class=\"{\'select2-result-sub\': $select.choiceGrouped($group), \'select2-result-single\': !$select.choiceGrouped($group) }\"><li role=\"option\" id=\"ui-select-choices-row-{{ $select.generatedId }}-{{$index}}\" class=\"ui-select-choices-row\" ng-class=\"{\'select2-highlighted\': $select.isActive(this), \'select2-disabled\': $select.isDisabled(this)}\"><div class=\"select2-result-label ui-select-choices-row-inner\"></div></li></ul></li></ul>" ) ;
15391567$templateCache . put ( "select2/match-multiple.tpl.html" , "<span class=\"ui-select-match\"><li class=\"ui-select-match-item select2-search-choice\" ng-repeat=\"$item in $select.selected\" ng-class=\"{\'select2-search-choice-focus\':$select.activeMatchIndex === $index, \'select2-locked\':$select.isLocked(this, $index)}\" ui-select-sort=\"$select.selected\"><span uis-transclude-append=\"\"></span> <a href=\"javascript:;\" class=\"ui-select-match-close select2-search-choice-close\" ng-click=\"$select.removeChoice($index)\" tabindex=\"-1\"></a></li></span>" ) ;
15401568$templateCache . put ( "select2/match.tpl.html" , "<a class=\"select2-choice ui-select-match\" ng-class=\"{\'select2-default\': $select.isEmpty()}\" ng-click=\"$select.activate()\" aria-label=\"{{ $select.baseTitle }} select\"><span ng-show=\"$select.isEmpty()\" class=\"select2-chosen\">{{$select.placeholder}}</span> <span ng-hide=\"$select.isEmpty()\" class=\"select2-chosen\" ng-transclude=\"\"></span> <abbr ng-if=\"$select.allowClear && !$select.isEmpty()\" class=\"select2-search-choice-close\" ng-click=\"$select.clear($event)\"></abbr> <span class=\"select2-arrow ui-select-toggle\" ng-click=\"$select.toggle($event)\"><b></b></span></a>" ) ;
1541- $templateCache . put ( "select2/select-multiple.tpl.html" , "<div class=\"ui-select-container ui-select-multiple select2 select2-container select2-container-multi\" ng-class=\"{\'select2-container-active select2-dropdown-open open\': $select.open,\n \'select2-container-disabled\': $select.disabled}\"><ul class=\"select2-choices\"><span class=\"ui-select-match\"></span><li class=\"select2-search-field\"><input type=\"text\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" role=\"combobox\" aria-expanded=\"true\" aria-owns=\"ui-select-choices-{{ $select.generatedId }}\" aria-label=\"{{ $select.baseTitle }}\" aria-activedescendant=\"ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}\" class=\"select2-input ui-select-search\" placeholder=\"{{$select.getPlaceholder()}}\" ng-disabled=\"$select.disabled\" ng-hide=\"$select.disabled\" ng-model=\"$select.search\" ng-click=\"$select.activate()\" style=\"width: 34px;\" ondrop=\"return false;\"></li></ul><div class=\"select2-drop select2-with-searchbox select2-drop-active\" ng-class=\"{\'select2-display-none\': !$select.open}\"><div class=\"ui-select-choices\"></div></div></div>" ) ;
1542- $templateCache . put ( "select2/select.tpl.html" , "<div class=\"ui-select-container select2 select2-container\" ng-class=\"{\'select2-container-active select2-dropdown-open open\': $select.open,\n \'select2-container-disabled\': $select.disabled,\n \'select2-container-active\': $select.focus,\n \'select2-allowclear\': $select.allowClear && !$select.isEmpty()}\"><div class=\"ui-select-match\"></div><div class=\"select2-drop select2-with-searchbox select2-drop-active\" ng-class=\"{\'select2-display-none\': !$select.open}\"><div class=\"select2-search\" ng-show=\"$select.searchEnabled\"><input type=\"text\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" role=\"combobox\" aria-expanded=\"true\" aria-owns=\"ui-select-choices-{{ $select.generatedId }}\" aria-label=\"{{ $select.baseTitle }}\" aria-activedescendant=\"ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}\" class=\"ui-select-search select2-input\" ng-model=\"$select.search\"></div><div class=\"ui-select-choices\"></div></div></div>" ) ;
1569+ $templateCache . put ( "select2/select-multiple.tpl.html" , "<div class=\"ui-select-container ui-select-multiple select2 select2-container select2-container-multi\" ng-class=\"{\'select2-container-active select2-dropdown-open open\': $select.open, \'select2-container-disabled\': $select.disabled}\"><ul class=\"select2-choices\"><span class=\"ui-select-match\"></span><li class=\"select2-search-field\"><input type=\"text\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" role=\"combobox\" aria-expanded=\"true\" aria-owns=\"ui-select-choices-{{ $select.generatedId }}\" aria-label=\"{{ $select.baseTitle }}\" aria-activedescendant=\"ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}\" class=\"select2-input ui-select-search\" placeholder=\"{{$select.getPlaceholder()}}\" ng-disabled=\"$select.disabled\" ng-hide=\"$select.disabled\" ng-model=\"$select.search\" ng-click=\"$select.activate()\" style=\"width: 34px;\" ondrop=\"return false;\"></li></ul><div class=\"select2-drop select2-with-searchbox select2-drop-active\" ng-class=\"{\'select2-display-none\': !$select.open}\"><div class=\"ui-select-choices\"></div></div></div>" ) ;
1570+ $templateCache . put ( "select2/select.tpl.html" , "<div class=\"ui-select-container select2 select2-container\" ng-class=\"{\'select2-container-active select2-dropdown-open open\': $select.open, \'select2-container-disabled\': $select.disabled, \'select2-container-active\': $select.focus, \'select2-allowclear\': $select.allowClear && !$select.isEmpty()}\"><div class=\"ui-select-match\"></div><div class=\"select2-drop select2-with-searchbox select2-drop-active\" ng-class=\"{\'select2-display-none\': !$select.open}\"><div class=\"select2-search\" ng-show=\"$select.searchEnabled\"><input type=\"text\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" role=\"combobox\" aria-expanded=\"true\" aria-owns=\"ui-select-choices-{{ $select.generatedId }}\" aria-label=\"{{ $select.baseTitle }}\" aria-activedescendant=\"ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}\" class=\"ui-select-search select2-input\" ng-model=\"$select.search\"></div><div class=\"ui-select-choices\"></div></div></div>" ) ;
15431571$templateCache . put ( "selectize/choices.tpl.html" , "<div ng-show=\"$select.open\" class=\"ui-select-choices selectize-dropdown single\"><div class=\"ui-select-choices-content selectize-dropdown-content\"><div class=\"ui-select-choices-group optgroup\" role=\"listbox\"><div ng-show=\"$select.isGrouped\" class=\"ui-select-choices-group-label optgroup-header\" ng-bind=\"$group.name\"></div><div role=\"option\" class=\"ui-select-choices-row\" ng-class=\"{active: $select.isActive(this), disabled: $select.isDisabled(this)}\"><div class=\"option ui-select-choices-row-inner\" data-selectable=\"\"></div></div></div></div></div>" ) ;
15441572$templateCache . put ( "selectize/match.tpl.html" , "<div ng-hide=\"($select.open || $select.isEmpty())\" class=\"ui-select-match\" ng-transclude=\"\"></div>" ) ;
15451573$templateCache . put ( "selectize/select.tpl.html" , "<div class=\"ui-select-container selectize-control single\" ng-class=\"{\'open\': $select.open}\"><div class=\"selectize-input\" ng-class=\"{\'focus\': $select.open, \'disabled\': $select.disabled, \'selectize-focus\' : $select.focus}\" ng-click=\"$select.activate()\"><div class=\"ui-select-match\"></div><input type=\"text\" autocomplete=\"off\" tabindex=\"-1\" class=\"ui-select-search ui-select-toggle\" ng-click=\"$select.toggle($event)\" placeholder=\"{{$select.placeholder}}\" ng-model=\"$select.search\" ng-hide=\"!$select.searchEnabled || ($select.selected && !$select.open)\" ng-disabled=\"$select.disabled\" aria-label=\"{{ $select.baseTitle }}\"></div><div class=\"ui-select-choices\"></div></div>" ) ; } ] ) ;
0 commit comments