Merge pull request #52 from jpmckearin/master

feat: add actions-box functionality
lordfriend · Apr 16, 2015 · 2bd8a38 · 2bd8a38
2 parents 0febf1b + 2798614
commit 2bd8a38
Show file tree

Hide file tree

Showing 7 changed files with 227 additions and 10 deletions.
diff --git a/dist/css/nya-bs-select.css b/dist/css/nya-bs-select.css
@@ -173,9 +173,21 @@
 .nya-bs-select.show-menu-arrow.open > .dropdown-toggle:after {
   display: block;
 }
-.nya-bs-select .bs-searchbox {
+.nya-bs-select .bs-searchbox,
+.nya-bs-select .bs-actionsbox {
   padding: 4px 8px;
 }
+.nya-bs-select .bs-actionsbox {
+  float: left;
+  width: 100%;
+  box-sizing: border-box;
+}
+.nya-bs-select .bs-actionsbox .btn-group button {
+  width: 50%;
+}
+.nya-bs-select .bs-searchbox + .bs-actionsbox {
+  padding: 0 8px 4px;
+}
 .nya-bs-select .bs-searchbox input.form-control {
   margin-bottom: 0;
   width: 100%;

diff --git a/dist/css/nya-bs-select.min.css b/dist/css/nya-bs-select.min.css
diff --git a/dist/js/nya-bs-select.js b/dist/js/nya-bs-select.js
@@ -331,7 +331,9 @@ nyaBsSelect.provider('nyaBsConfig', function() {
     'en-us': {
       defaultNoneSelection: 'Nothing selected',
       noSearchResult: 'NO SEARCH RESULT',
-      numberItemSelected: '%d item selected'
+      numberItemSelected: '%d item selected',
+      selectAll: 'Select All',
+      deselectAll: 'Deselect All'
     }
   };
 
@@ -421,6 +423,13 @@ nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', 'nyaBsC
 
   var NO_SEARCH_RESULT = '<li class="no-search-result"><span>NO SEARCH RESULT</span></li>';
 
+  var ACTIONS_BOX = '<div class="bs-actionsbox">' +
+    '<div class="btn-group btn-group-sm btn-block">' +
+    '<button class="actions-btn bs-select-all btn btn-default">SELECT ALL</button>' +
+    '<button class="actions-btn bs-deselect-all btn btn-default">DESELECT ALL</button>' +
+    '</div>' +
+    '</div>';
+
   return {
     restrict: 'ECA',
     require: ['ngModel', 'nyaBsSelect'],
@@ -459,11 +468,13 @@ nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', 'nyaBsC
         dropdownMenu = jqLite(DROPDOWN_MENU),
         searchBox,
         noSearchResult,
+        actionsBox,
         classList,
         length,
         index,
         liElement,
-        localizedText = nyaBsConfig;
+        localizedText = nyaBsConfig,
+        isMultiple = typeof tAttrs.multiple !== 'undefined';
 
       classList = getClassList(tElement[0]);
       classList.forEach(function(className) {
@@ -510,6 +521,24 @@ nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', 'nyaBsC
         dropdownMenu.append(noSearchResult);
       }
 
+      if (tAttrs.actionsBox === 'true' && isMultiple) {
+        // set localizedText
+        if (localizedText.selectAllTpl) {
+          ACTIONS_BOX = ACTIONS_BOX.replace('SELECT ALL', localizedText.selectAllTpl);
+        } else if (localizedText.selectAll) {
+          ACTIONS_BOX = ACTIONS_BOX.replace('SELECT ALL', localizedText.selectAll);
+        }
+
+        if (localizedText.deselectAllTpl) {
+          ACTIONS_BOX = ACTIONS_BOX.replace('DESELECT ALL', localizedText.deselectAllTpl);
+        } else if (localizedText.selectAll) {
+          ACTIONS_BOX = ACTIONS_BOX.replace('DESELECT ALL', localizedText.deselectAll);
+        }
+
+        actionsBox = jqLite(ACTIONS_BOX);
+        dropdownContainer.append(actionsBox);
+      }
+
       // set default none selection text
       dropdownToggle.children().eq(0).append(getDefaultNoneSelectionContent());
 
@@ -534,7 +563,8 @@ nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', 'nyaBsC
           dropdownContainer = dropdownToggle.next(),
           dropdownMenu = queryChildren(dropdownContainer, ['dropdown-menu', 'inner']),
           searchBox = queryChildren(dropdownContainer, ['bs-searchbox']),
-          noSearchResult = queryChildren(dropdownMenu, ['no-search-result']);
+          noSearchResult = queryChildren(dropdownMenu, ['no-search-result']),
+          actionsBox = queryChildren(dropdownContainer, ['bs-actionsbox']);
 
         if(nyaBsSelectCtrl.valueExp) {
           valueExpFn = function(scope, locals) {
@@ -698,6 +728,18 @@ nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', 'nyaBsC
           }
         });
 
+        // actions box
+        if ($attrs.actionsBox === 'true' && isMultiple) {
+          actionsBox.find('.bs-select-all').on('click', function () {
+            setAllOptions(true);
+          });
+
+          actionsBox.find('.bs-deselect-all').on('click', function () {
+            setAllOptions(false);
+          });
+        }
+
+
         // live search
         if($attrs.liveSearch === 'true') {
           searchBox.children().on('input', function(){
@@ -1033,6 +1075,58 @@ nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', 'nyaBsC
           return null;
         }
 
+        /**
+         *
+         */
+        function setAllOptions(selectAll) {
+          if (!isMultiple || isDisabled)
+            return;
+
+          var liElements,
+            modelValue,
+            viewValue;
+
+          liElements = dropdownMenu.find('li');
+          if (liElements.length > 0) {
+            modelValue = ngCtrl.$modelValue;
+
+            // make a deep copy enforce ngModelController to call its $render method.
+            // See: https://github.com/angular/angular.js/issues/1751
+            viewValue = Array.isArray(modelValue) ? deepCopy(modelValue) : [];
+
+            for (var i = 0; i < liElements.length; i++) {
+              var nyaBsOption = jqLite(liElements[i]);
+              if (nyaBsOption.hasClass('disabled'))
+                continue;
+
+              var value, index;
+
+              // if user specify the value attribute. we should use the value attribute
+              // otherwise, use the valueIdentifier specified field in target scope
+              value = getOptionValue(nyaBsOption);
+
+              if (typeof value !== 'undefined') {
+                index = indexOf(viewValue, value);
+                if (selectAll && index == -1) {
+                  // check element
+                  viewValue.push(value);
+                  nyaBsOption.addClass('selected');
+                } else if (!selectAll && index != -1) {
+                  // uncheck element
+                  viewValue.splice(index, 1);
+                  nyaBsOption.removeClass('selected');
+                }
+              }
+            }
+
+            // update view value regardless
+            ngCtrl.$setViewValue(viewValue);
+            $scope.$digest();
+
+            updateButtonContent();
+          }
+        }
+
         /**
          * select an option represented by nyaBsOption argument. Get the option's value and update model.
          * if isMultiple = true, doesn't close dropdown menu. otherwise close the menu.