add data-size support

lordfriend · Nov 8, 2014 · a1e5fa8 · a1e5fa8
1 parent 1914c7d
commit a1e5fa8
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -90,7 +90,6 @@ Like vanilla `<select>` we can also generate option group with any property in a
 
 ##TODO##
 
-- data-size support
 - data-header support
 - data-container support
 - data-max-options support

diff --git a/examples/app.js b/examples/app.js
@@ -4,7 +4,7 @@ angular.module('demoApp',['nya.bootstrap.select'])
   .controller('MainCtrl', function($scope){
 
     var options = ['Alpha', 'Bravo', 'Charlie', 'Delta',
-      'Echo', 'Foxtrot', 'Golf', 'Hotel', 'Juliet', 'Kilo', 'Lima',
+      'Echo', 'Foxtrot', 'Golf', 'Hotel', 'India', 'Juliet', 'Kilo', 'Lima',
       'Mike', 'November', 'Oscar', 'Papa', 'Quebec', 'Romeo', 'Sierra',
       'Tango', 'Uniform', 'Victor', 'Whiskey', 'X-ray', 'Yankee', 'Zulu'
     ];
@@ -117,4 +117,4 @@ angular.module('demoApp',['nya.bootstrap.select'])
     $scope.addElement = function(options) {
       $scope[options].unshift(JSON.parse($scope.element));
     };
-  });
+  });
diff --git a/examples/index.html b/examples/index.html
@@ -441,6 +441,23 @@ <h3>Custom option content</h3>
       </ol>
     </form>
 
+    <h3>Dropdown Size</h3>
+    <p>set <code>size</code> to an number, which will limit the dropdown menu size to limit number of element. the default value is <code>'auto'</code></p>
+
+    <form class="form-inline">
+      <ol class="nya-bs-select" ng-model="model7" data-size="3">
+        <li class="nya-bs-option" value="a"><a>Alpha<span class="glyphicon glyphicon-ok check-mark"></span></a></li>
+        <li class="nya-bs-option" value="b"><a>Bravo<span class="glyphicon glyphicon-ok check-mark"></span></a></li>
+        <li class="nya-bs-option" value="c"><a>Charlie<span class="glyphicon glyphicon-ok check-mark"></span></a></li>
+        <li class="nya-bs-option" value="d"><a>Delta<span class="glyphicon glyphicon-ok check-mark"></span></a></li>
+        <li class="nya-bs-option" value="d"><a>Echo<span class="glyphicon glyphicon-ok check-mark"></span></a></li>
+        <li class="nya-bs-option" value="d"><a>Fox<span class="glyphicon glyphicon-ok check-mark"></span></a></li>
+        <li class="nya-bs-option" value="d"><a>Golf<span class="glyphicon glyphicon-ok check-mark"></span></a></li>
+        <li class="nya-bs-option" value="d"><a>Hotel<span class="glyphicon glyphicon-ok check-mark"></span></a></li>
+        <li class="nya-bs-option" value="d"><a>India<span class="glyphicon glyphicon-ok check-mark"></span></a></li>
+        <li class="nya-bs-option" value="d"><a>Juliet<span class="glyphicon glyphicon-ok check-mark"></span></a></li>
+      </ol>
+    </form>
   </section>
 </div>
 <footer class="footer">
@@ -459,4 +476,4 @@ <h3>Custom option content</h3>
 <script src="../src/nya-bs-option.js"></script>
 <script src="app.js"></script>
 </body>
-</html>
+</html>
diff --git a/src/nya-bs-select.js b/src/nya-bs-select.js
@@ -80,6 +80,8 @@ nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', functio
         var ngCtrl = ctrls[0];
         var nyaBsSelectCtrl = ctrls[1];
 
+        var liHeight;
+
         // for debug
         nyaBsSelectCtrl.setId($element.attr('id'));
 
@@ -237,6 +239,9 @@ nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', functio
 
         dropdownToggle.on('click', function() {
           $element.toggleClass('open');
+          if($element.hasClass('open') && typeof liHeight === 'undefined') {
+            calcMenuSize();
+          }
           if($attrs.liveSearch === 'true' && $element.hasClass('open')) {
             searchBox.children().eq(0)[0].focus();
           }
@@ -458,6 +463,30 @@ nyaBsSelect.directive('nyaBsSelect', ['$parse', '$document', '$timeout', functio
 
         }
 
+        // will called only once.
+        function calcMenuSize(){
+
+          var liElements = dropdownMenu.find('li'),
+            length = liElements.length,
+            liElement,
+            i;
+          for(i = 0; i < length; i++) {
+            liElement = liElements.eq(i);
+            if(liElement.hasClass('nya-bs-option') || liElement.attr('nya-bs-option')) {
+              liHeight = liElement[0].clientHeight;
+              console.log('liHeight', liHeight);
+              break;
+            }
+          }
+
+          if(/\d+/.test($attrs.size)) {
+            var dropdownSize = parseInt($attrs.size, 10);
+            dropdownMenu.css('max-height', (dropdownSize * liHeight) + 'px');
+            dropdownMenu.css('overflow-y', 'auto');
+          }
+
+        }
+
       };
     }
   };

diff --git a/test/spec/dynamic-feature.js b/test/spec/dynamic-feature.js
@@ -9,7 +9,7 @@ describe('Features contains ngModel, option auto generate, etc;', function() {
 
 
   var options = ['Alpha', 'Bravo', 'Charlie', 'Delta',
-    'Echo', 'Foxtrot', 'Golf', 'Hotel', 'Juliet', 'Kilo', 'Lima',
+    'Echo', 'Foxtrot', 'Golf', 'Hotel', 'India', 'Juliet', 'Kilo', 'Lima',
     'Mike', 'November', 'Oscar', 'Papa', 'Quebec', 'Romeo', 'Sierra',
     'Tango', 'Uniform', 'Victor', 'Whiskey', 'X-ray', 'Yankee', 'Zulu'
   ];