feat(spinner) Added spinner on refresh and select2

CHANGELOG.md

@@ -108,8 +108,8 @@
 
 
 
-<a name="0.16.1"></a>
-## [0.16.1](https://github.com/angular-ui/ui-select/compare/v0.16.1...v0.17.0) (2016-05-11)
+<a name="0.17.0"></a>
+## [0.17.0](https://github.com/angular-ui/ui-select/compare/v0.16.1...v0.17.0) (2016-05-11)
 
 
 ### Bug Fixes

docs/examples/demo-selectize-with-bootstrap.html

@@ -16,8 +16,8 @@
     .input-group > .selectize-control > .selectize-input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-    }    
-  </style>  
+    }
+  </style>
   <p>Selected: {{ctrl.person.selected.name}}</p>
 
   <form class="form-horizontal">
@@ -77,6 +77,21 @@
         </div>
       </div>
 
+      <div class="form-group">
+        <label class="col-sm-3 control-label">Multiple</label>
+        <div class="col-sm-6">
+
+          <ui-select ng-model="ctrl.person.selected" multiple theme="selectize" title="Choose a person">
+            <ui-select-match placeholder="Select or search a person in the list...">{{$item.name}}</ui-select-match>
+            <ui-select-choices repeat="item in ctrl.people | filter: $select.search">
+              <div ng-bind-html="item.name | highlight: $select.search"></div>
+              <small ng-bind-html="item.email | highlight: $select.search"></small>
+            </ui-select-choices>
+          </ui-select>
+
+        </div>
+      </div>
+
       <div class="form-group">
         <label class="col-sm-3 control-label">Disabled</label>
         <div class="col-sm-6">

docs/index.html

@@ -135,7 +135,7 @@ <h3>Dependencies</h3>
                 <a href="http://angularjs.org" target="_blank">AngularJS</a> (requires AngularJS 1.2.x or higher, tested with 1.5.3).
               </li>
               <li>
-                <a href="http://angularjs.org" target="_blank">Angular-Sanitze</a> (the version should match your version of angular.js).
+                <a href="http://angularjs.org" target="_blank">Angular-Sanitize</a> (the version should match your version of angular.js).
               </li>
               <li>
                 The matching CSS for your the theme you wish to use:
@@ -188,4 +188,4 @@ <h1>Examples</h1>
     </div>
   </footer>
 </body>
-</html>
+</html>

src/bootstrap/choices.tpl.html

@@ -1,5 +1,4 @@
 <ul class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu"
-    role="listbox"
     ng-show="$select.open && $select.items.length > 0">
   <li class="ui-select-choices-group" id="ui-select-choices-{{ $select.generatedId }}" >
     <div class="divider" ng-show="$select.isGrouped && $index > 0"></div>

src/bootstrap/select-multiple.tpl.html

@@ -14,6 +14,7 @@
            role="combobox"
            aria-expanded="{{$select.open}}"
            aria-label="{{$select.baseTitle}}"
+           ng-class="{'spinner': $select.refreshing}"
            ondrop="return false;">
   </div>
   <div class="ui-select-choices"></div>

src/bootstrap/select.tpl.html

@@ -1,10 +1,10 @@
 <div class="ui-select-container ui-select-bootstrap dropdown" ng-class="{open: $select.open}">
   <div class="ui-select-match"></div>
+  <span ng-show="$select.open && $select.refreshing  && $select.spinnerEnabled" class="ui-select-refreshing {{$select.spinnerClass}}"></span>
   <input type="search" autocomplete="off" tabindex="-1"
          aria-expanded="true"
          aria-label="{{ $select.baseTitle }}"
          aria-owns="ui-select-choices-{{ $select.generatedId }}"
-         aria-activedescendant="ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}"
          class="form-control ui-select-search"
          ng-class="{ 'ui-select-search-hidden' : !$select.searchEnabled }"
          placeholder="{{$select.placeholder}}"

src/common.css

@@ -92,10 +92,15 @@ body > .select2-container.open {
 }
 
 /* Fix input width for Selectize theme */
-.selectize-control > .selectize-input > input {
+.selectize-control.single > .selectize-input > input {
   width: 100%;
 }
 
+/* Fix line break when there's at least one item selected with the Selectize theme */
+.selectize-control.multi > .selectize-input > input {
+  margin: 0 !important;
+}
+
 /* Fix dropdown width for Selectize theme */
 .selectize-control > .selectize-dropdown {
   width: 100%;
@@ -309,4 +314,48 @@ body > .ui-select-bootstrap.open {
   height: 10px;
   right: 10px;
   margin-top: -2px;
-}
+}
+
+/* Spinner */
+.ui-select-refreshing {
+    position: absolute;
+    right: 0;
+    padding: 8px 27px;
+    top: 1px;
+    display: inline-block;
+    font-family: 'Glyphicons Halflings';
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    -webkit-font-smoothing:antialiased;
+ }
+
+@-webkit-keyframes ui-select-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes ui-select-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+.ui-select-spin {
+  -webkit-animation: ui-select-spin 2s infinite linear;
+  animation: ui-select-spin 2s infinite linear;
+}
+
+.ui-select-refreshing.ng-animate {
+  -webkit-animation: none 0s;
+} 

src/common.js

@@ -106,7 +106,9 @@ var uis = angular.module('ui.select', [])
   generateId: function() {
     return latestId++;
   },
-  appendToBody: false
+  appendToBody: false,
+  spinnerEnabled: false,
+  spinnerClass: 'glyphicon-refresh ui-select-spin'
 })
 
 // See Rename minErr and make it accessible from outside https://github.com/angular/angular.js/issues/6913

src/select2/choices.tpl.html

@@ -1,7 +1,7 @@
 <ul tabindex="-1" 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"
+    <ul
       id="ui-select-choices-{{ $select.generatedId }}" ng-class="{'select2-result-sub': $select.choiceGrouped($group), 'select2-result-single': !$select.choiceGrouped($group) }">
       <li role="option" ng-attr-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>

src/select2/select.tpl.html

@@ -8,11 +8,11 @@
        ng-class="{'select2-display-none': !$select.open}">
     <div class="search-container" ng-class="{'ui-select-search-hidden':!$select.searchEnabled, 'select2-search':$select.searchEnabled}">
       <input type="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
+       ng-class="{'select2-active': $select.refreshing}"
        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>

src/selectize/choices.tpl.html

@@ -1,6 +1,7 @@
-<div ng-show="$select.open" class="ui-select-choices ui-select-dropdown selectize-dropdown single">
+<div ng-show="$select.open" class="ui-select-choices ui-select-dropdown selectize-dropdown"
+     ng-class="{'single': !$select.multiple, 'multi': $select.multiple}">
   <div class="ui-select-choices-content selectize-dropdown-content">
-    <div class="ui-select-choices-group optgroup" role="listbox">
+    <div class="ui-select-choices-group optgroup">
       <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>

src/selectize/match-multiple.tpl.html

@@ -0,0 +1,11 @@
+<div class="ui-select-match" data-value
+     ng-repeat="$item in $select.selected track by $index"
+     ng-click="$selectMultiple.activeMatchIndex = $index;"
+     ng-class="{'active':$selectMultiple.activeMatchIndex === $index}"
+     ui-select-sort="$select.selected">
+  <span class="ui-select-match-item"
+        ng-class="{'select-locked':$select.isLocked(this, $index)}">
+    <span uis-transclude-append></span>
+    <span class="remove ui-select-match-close" ng-hide="$select.disabled" ng-click="$selectMultiple.removeChoice($index)">&times;</span>
+  </span>
+</div>

src/selectize/select-multiple.tpl.html

@@ -0,0 +1,18 @@
+<div class="ui-select-container selectize-control multi plugin-remove_button" ng-class="{'open': $select.open}">
+  <div class="selectize-input"
+       ng-class="{'focus': $select.open, 'disabled': $select.disabled, 'selectize-focus' : $select.focus}"
+       ng-click="$select.open && !$select.searchEnabled ? $select.toggle($event) : $select.activate()">
+    <div class="ui-select-match"></div>
+    <input type="search" autocomplete="off" tabindex="-1"
+           class="ui-select-search"
+           ng-class="{'ui-select-search-hidden':!$select.searchEnabled}"
+           placeholder="{{$selectMultiple.getPlaceholder()}}"
+           ng-model="$select.search"
+           ng-disabled="$select.disabled"
+           aria-expanded="{{$select.open}}"
+           aria-label="{{ $select.baseTitle }}"
+           ondrop="return false;">
+  </div>
+  <div class="ui-select-choices"></div>
+  <div class="ui-select-no-choice"></div>
+</div>

src/uiSelectChoicesDirective.js

@@ -80,6 +80,14 @@ uis.directive('uiSelectChoices',
           var refreshDelay = scope.$eval(attrs.refreshDelay);
           $select.refreshDelay = refreshDelay !== undefined ? refreshDelay : uiSelectConfig.refreshDelay;
         });
+
+        scope.$watch('$select.open', function(open) {
+          if (open) {
+            tElement.attr('role', 'listbox');
+          } else {
+            tElement.removeAttr('role');
+          }
+        });
       };
     }
   };

src/uiSelectController.js

@@ -18,6 +18,9 @@ uis.controller('uiSelectCtrl',
   ctrl.refreshDelay = uiSelectConfig.refreshDelay;
   ctrl.paste = uiSelectConfig.paste;
   ctrl.resetSearchInput = uiSelectConfig.resetSearchInput;
+  ctrl.refreshing = false;
+  ctrl.spinnerEnabled = uiSelectConfig.spinnerEnabled;
+  ctrl.spinnerClass = uiSelectConfig.spinnerClass;
 
   ctrl.removeSelected = uiSelectConfig.removeSelected; //If selected item(s) should be removed from dropdown list
   ctrl.closeOnSelect = true; //Initialized inside uiSelect directive link function
@@ -292,16 +295,20 @@ uis.controller('uiSelectCtrl',
    */
   ctrl.refresh = function(refreshAttr) {
     if (refreshAttr !== undefined) {
-
       // Debounce
       // See https://github.com/angular-ui/bootstrap/blob/0.10.0/src/typeahead/typeahead.js#L155
       // FYI AngularStrap typeahead does not have debouncing: https://github.com/mgcrea/angular-strap/blob/v2.0.0-rc.4/src/typeahead/typeahead.js#L177
       if (_refreshDelayPromise) {
         $timeout.cancel(_refreshDelayPromise);
       }
       _refreshDelayPromise = $timeout(function() {
-        $scope.$eval(refreshAttr);
-      }, ctrl.refreshDelay);
+        var refreshPromise =  $scope.$eval(refreshAttr);
+        if (refreshPromise && angular.isFunction(refreshPromise.then) && !ctrl.refreshing) {
+          ctrl.refreshing = true;
+          refreshPromise.then(function() {
+            ctrl.refreshing = false;
+          });
+      }}, ctrl.refreshDelay);
     }
   };
 
@@ -381,7 +388,7 @@ uis.controller('uiSelectCtrl',
       if (!item || !_isItemDisabled(item)) {
         // if click is made on existing item, prevent from tagging, ctrl.search does not matter
         ctrl.clickTriggeredSelect = false;
-        if($event && $event.type === 'click' && item)
+        if($event && ($event.type === 'click' || $event.type === 'touchend') && item)
           ctrl.clickTriggeredSelect = true;
 
         if(ctrl.tagging.isActivated && ctrl.clickTriggeredSelect === false) {
@@ -740,4 +747,16 @@ uis.controller('uiSelectCtrl',
     ctrl.searchInput.off('keyup keydown tagged blur paste');
     angular.element($window).off('resize', onResize);
   });
+
+  $scope.$watch('$select.activeIndex', function(activeIndex) {
+    if (activeIndex)
+      $element.find('input').attr(
+        'aria-activedescendant',
+        'ui-select-choices-row-' + ctrl.generatedId + '-' + activeIndex);
+  });
+
+  $scope.$watch('$select.open', function(open) {
+    if (!open)
+      $element.find('input').removeAttr('aria-activedescendant');
+  });
 }]);

src/uiSelectDirective.js

@@ -143,6 +143,17 @@ uis.directive('uiSelect',
           }
         });
 
+        attrs.$observe('spinnerEnabled', function() {
+          // $eval() is needed otherwise we get a string instead of a boolean
+          var spinnerEnabled = scope.$eval(attrs.spinnerEnabled);
+          $select.spinnerEnabled = spinnerEnabled !== undefined ? spinnerEnabled : uiSelectConfig.spinnerEnabled;
+        });
+
+        attrs.$observe('spinnerClass', function() {
+          var spinnerClass = attrs.spinnerClass;
+          $select.spinnerClass = spinnerClass !== undefined ? attrs.spinnerClass : uiSelectConfig.spinnerClass;
+        });
+
         //Automatically gets focus when loaded
         if (angular.isDefined(attrs.autofocus)){
           $timeout(function(){