Merge branch 'master' into header-footer-2

Author: Jefiozie

.travis.yml

@@ -7,14 +7,16 @@ env:
     - GH_REF: github.com/angular-ui/ui-select.git
     - GH_PAGES_BRANCH: gh-pages
     - secure: "PkIhXXwrR5fHh7fH+2WizaY0MmK1l1Dr7PCqs112PkEimVPcntRJeA5pjTwGRwHm+RSkFVtfo38EY/GUwzhLSRTO7WZ+id+vIMGQLgiofqrOwi0nq93esG6qI8Jg5K0GUt8mzg5m9B2tgm2I91RAojEhIukKcbsDsq3hNAUy71Y="
-
 addons:
+  firefox: "31.0"
+
   apt:
     sources:
       - ubuntu-toolchain-r-test
     packages:
       - g++-4.8
 
+
 before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start

package.json

@@ -41,7 +41,7 @@
     "karma": "^0.12.16",
     "karma-chrome-launcher": "^0.1.3",
     "karma-coverage": "~0.2",
-    "karma-firefox-launcher": "~0.1",
+    "karma-firefox-launcher": "~1.0",
     "karma-jasmine": "~0.2",
     "karma-ng-html2js-preprocessor": "^0.1.0",
     "karma-phantomjs-launcher": "~0.1.4",

src/bootstrap/select-multiple.tpl.html

@@ -1,21 +1,22 @@
 <div class="ui-select-container ui-select-multiple ui-select-bootstrap dropdown form-control" ng-class="{open: $select.open}">
   <div>
     <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"
            autocorrect="off"
            autocapitalize="off"
            spellcheck="false"
            class="ui-select-search input-xs"
-           placeholder="{{$selectMultiple.getPlaceholder()}}"
+           placeholder="{{$select.getPlaceholder()}}"
            ng-disabled="$select.disabled"
            ng-click="$select.activate()"
            ng-model="$select.search"
            role="combobox"
            aria-expanded="{{$select.open}}"
            aria-label="{{$select.baseTitle}}"
            ng-class="{'spinner': $select.refreshing}"
-           ondrop="return false;">
+           data-disallow-drop=data-disallow-drop>
   </div>
   <div ng-show="$select.open && $select.items.length > 0" class="ui-select-dropdown dropdown-menu">
     <div class="ui-select-header"></div>

src/common.css

@@ -155,6 +155,15 @@ body > .select2-container.open {
   width: 0;
 }
 
+.ui-select-container[theme="selectize"] .ui-select-header-group-selectable:hover {
+    background-color: #f5f5f5;
+}
+
+.ui-select-container[theme="selectize"] .ui-select-header-group-selectable {
+    cursor: pointer;
+    padding-left: 15px;
+}
+
 /* Bootstrap theme */
 
 /* Helper class to show styles when focus */
@@ -283,10 +292,31 @@ body > .ui-select-bootstrap.open {
   border-right: 1px solid #428bca;
 }
 
+
 .ui-select-bootstrap .ui-select-choices {
   padding: 5px 0;
   margin: 0;
   list-style: none;
+
+.ui-select-bootstrap .ui-select-header-group-selectable:hover {
+    background-color: #f5f5f5;
+}
+
+.ui-select-bootstrap .ui-select-header-group-selectable {
+    color: black;
+    cursor: pointer;
+    padding: 3px 10px;
+}
+
+.ui-select-bootstrap .ui-select-choices-row>span {
+    cursor: pointer;
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.42857143;
+    color: #333;
+    white-space: nowrap;
 }
 
 .ui-select-bootstrap .ui-select-choices-row > span {

src/select2/select-multiple.tpl.html

@@ -16,13 +16,13 @@
         aria-label="{{ $select.baseTitle }}"
         aria-activedescendant="ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}"
         class="select2-input ui-select-search"
-        placeholder="{{$selectMultiple.getPlaceholder()}}"
+        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;">
+        data-disallow-drop=data-disallow-drop>
     </li>
   </ul>
   <div class="ui-select-dropdown select2-drop select2-with-searchbox select2-drop-active"

src/selectize/select-multiple.tpl.html

@@ -6,12 +6,12 @@
     <input type="search" autocomplete="off" tabindex="-1"
            class="ui-select-search"
            ng-class="{'ui-select-search-hidden':!$select.searchEnabled}"
-           placeholder="{{$selectMultiple.getPlaceholder()}}"
+           placeholder="{{$select.getPlaceholder()}}"
            ng-model="$select.search"
            ng-disabled="$select.disabled"
            aria-expanded="{{$select.open}}"
            aria-label="{{ $select.baseTitle }}"
-           ondrop="return false;">
+           data-disallow-drop=data-disallow-drop>
   </div>
   <div ng-show="$select.open" class="ui-select-dropdown selectize-dropdown"
        ng-class="{'single': !$select.multiple, 'multi': $select.multiple}">

src/uiSelectController.js

@@ -65,6 +65,11 @@ uis.controller('uiSelectCtrl',
     return isNil(ctrl.selected) || ctrl.selected === '' || (ctrl.multiple && ctrl.selected.length === 0);
   };
 
+  ctrl.getPlaceholder = function(){
+    if(ctrl.selected && ctrl.selected.length) return;
+    return ctrl.placeholder;
+  };
+
   function _findIndex(collection, predicate, thisArg){
     if (collection.findIndex){
       return collection.findIndex(predicate, thisArg);
@@ -88,10 +93,14 @@ uis.controller('uiSelectCtrl',
     if (ctrl.resetSearchInput) {
       ctrl.search = EMPTY_SEARCH;
       //reset activeIndex
-      if (ctrl.selected && ctrl.items.length && !ctrl.multiple) {
-        ctrl.activeIndex = _findIndex(ctrl.items, function(item){
-          return angular.equals(this, item);
-        }, ctrl.selected);
+      if (!ctrl.multiple) {
+        if (ctrl.selected && ctrl.items.length) {
+          ctrl.activeIndex = _findIndex(ctrl.items, function(item){
+            return angular.equals(this, item);
+          }, ctrl.selected);
+        } else {
+          ctrl.activeIndex = 0;
+        }
       }
     }
   }
@@ -149,7 +158,7 @@ uis.controller('uiSelectCtrl',
       } else {
         $timeout(function () {
           ctrl.focusSearchInput(initSearchValue);
-          if(!ctrl.tagging.isActivated && ctrl.items.length > 1) {
+          if(!ctrl.tagging.isActivated && ctrl.items.length > 1 && ctrl.open) {
             _ensureHighlightVisible();
           }
         });
@@ -166,9 +175,12 @@ uis.controller('uiSelectCtrl',
     ctrl.searchInput[0].focus();
   };
 
-  ctrl.findGroupByName = function(name) {
+  ctrl.findGroupByName = function(name, noStrict) {
     return ctrl.groups && ctrl.groups.filter(function(group) {
-      return group.name === name;
+      if (noStrict)
+        return group.name == name;
+      else
+        return group.name === name;
     })[0];
   };
 
@@ -465,11 +477,11 @@ uis.controller('uiSelectCtrl',
   ctrl.toggle = function(e) {
     if (ctrl.open) {
       ctrl.close();
-      e.preventDefault();
-      e.stopPropagation();
     } else {
       ctrl.activate();
     }
+    e.preventDefault();
+    e.stopPropagation();
   };
 
   // Set default function for locked choices - avoids unnecessary

src/uiSelectDirective.js

@@ -1,6 +1,6 @@
 uis.directive('uiSelect',
-  ['$document', 'uiSelectConfig', 'uiSelectMinErr', 'uisOffset', '$compile', '$parse', '$timeout',
-  function($document, uiSelectConfig, uiSelectMinErr, uisOffset, $compile, $parse, $timeout) {
+  ['$document', 'uiSelectConfig', 'uiSelectMinErr', 'uisOffset', '$compile', '$parse', '$timeout', '$window',
+  function($document, uiSelectConfig, uiSelectMinErr, uisOffset, $compile, $parse, $timeout, $window) {
 
   return {
     restrict: 'EA',
@@ -206,11 +206,15 @@ uis.directive('uiSelect',
           $select.clickTriggeredSelect = false;
         }
 
-        // See Click everywhere but here event http://stackoverflow.com/questions/12931369
-        $document.on('click', onDocumentClick);
+        // See Click everywhere but here. Similar approach to http://stackoverflow.com/questions/12931369
+        // but using the capture phase instead of bubble phase of the event propagation.
+        //
+        // Using the capture phase avoids problems that araise when event.stopPropatagion()
+        // is called before the event reaches the `document`.
+        $window.document.addEventListener('click', onDocumentClick, true);
 
         scope.$on('$destroy', function() {
-          $document.off('click', onDocumentClick);
+          $window.document.removeEventListener('click', onDocumentClick, true);
         });
 
         // Move transcluded elements to their correct position in main template

src/uiSelectHeaderGroupSelectableDirective.js

@@ -0,0 +1,78 @@
+uis.directive('uiSelectHeaderGroupSelectable', ['$timeout', function($timeout) {
+  return {
+    restrict: 'EA',
+    require: ['^uiSelect'],
+    scope: {
+      isEnabled: "<?uiSelectHeaderGroupSelectable"
+    },
+    link: function ($scope, $element, attrs, select) {
+      // TODO Why that???
+      var $select = select[0];
+      if (angular.isUndefined($scope.isEnabled)) {
+        $scope.isEnabled = true;
+      }
+
+      function isEnabled() {
+        return angular.isUndefined($scope.isEnabled) || $scope.isEnabled;
+      }
+
+      function getElements() {
+        if ($select.multiple && $select.groups) {
+          return $element.querySelectorAll('.ui-select-choices-group-label');
+        } else {
+          console.error('Use uiSelectHeaderGroupSelectable with no multiple uiSelect or without groupBy');
+          return [];
+        }
+      }
+
+      function enableClick() {
+        if (isEnabled()) {
+          angular.forEach(getElements(), function(e) {
+            var element = angular.element(e);
+
+            // Check the onClick event is not already listen
+            if (!element.hasClass('ui-select-header-group-selectable')) {
+              element.addClass('ui-select-header-group-selectable');
+
+              element.on('click', function () {
+                if (isEnabled()) {
+                  var group = $select.findGroupByName(element.text(), true);
+
+                  angular.forEach(group.items, function(item) {
+                    $timeout(function() {
+                      $select.select(item, false, ' ');
+                    });
+                  });
+                }
+              });
+            }
+          });
+        }
+      }
+
+      function disableClick() {
+        if (!isEnabled()) {
+          angular.forEach(getElements(), function(e) {
+            var element = angular.element(e);
+            element.removeClass('ui-select-header-group-selectable');
+            element.off('click');
+          });
+        }
+      }
+
+      // Watch element to trigger select event
+      $scope.$watch('isEnabled', function() {
+        if (!isEnabled()) {
+          disableClick();
+        } else {
+          enableClick();
+        }
+      });
+
+      $scope.$watch('$select.groups', enableClick);
+      $scope.$watch(function() {
+        return $select.selected && $select.selected.length ? $select.selected.length : -1;
+      }, enableClick);
+    }
+  };
+}]);

src/uiSelectMultipleDirective.js

@@ -62,12 +62,6 @@ uis.directive('uiSelectMultiple', ['uiSelectMinErr','$timeout', function(uiSelec
         return true;
       };
 
-      ctrl.getPlaceholder = function(){
-        //Refactor single?
-        if($select.selected && $select.selected.length) return;
-        return $select.placeholder;
-      };
-
 
     }],
     controllerAs: '$selectMultiple',