feat(adjust-height): improve adjust-height to support custom margin b…

…ottom and specifying container

* Use 'w11k-select-adjust-height-to' as class on an element to specify a container element the auto-adjust-height feature will use.
* Use 'w11k-select-style' as attribute to pass an object with styling information to the directive. You can reference an object in scope or use literal notation (like ng-style)
  Supported properties: maxHeight (all units) and marginBottom ('px' only)

src/w11k-select.js

@@ -6,7 +6,10 @@ angular.module('w11k.select', [
 ]);
 
 angular.module('w11k.select').constant('w11kSelectConfig', {
-  templateUrl: 'w11k-select.tpl.html'
+  templateUrl: 'w11k-select.tpl.html',
+  style: {
+    marginBottom: 10 // px
+  }
 });
 
 angular.module('w11k.select').factory('optionParser', ['$parse', function ($parse) {
@@ -48,7 +51,8 @@ angular.module('w11k.select').directive('w11kSelect', [
       scope: {
         isMultiple: '=?w11kSelectMultiple',
         isRequired: '=?w11kSelectRequired',
-        isDisabled: '=?w11kSelectDisabled'
+        isDisabled: '=?w11kSelectDisabled',
+        style: '=?w11kSelectStyle'
       },
       require: 'ngModel',
       link: function (scope, element, attrs, controller) {
@@ -133,20 +137,105 @@ angular.module('w11k.select').directive('w11kSelect', [
           jqWindow.off('resize', adjustHeight);
         });
 
-        function adjustHeight() {
-          var content = element[0].querySelector('.dropdown-menu .content');
+        function getParent(element, selector) {
+          // with jQuery
+          if (angular.isFunction(element.parents)) {
+            var container = element.parents(selector);
+            if (container.length > 0) {
+              return container[0];
+            }
 
-          var offset = content.getBoundingClientRect();
+            return undefined;
+          }
 
-          var windowHeight = $window.innerHeight || $window.document.documentElement.clientHeight;
-          var maxHeight = (windowHeight - offset.top) - 60;
+          // without jQuery
+          var matchFunctions = [
+            'matches',
+            'matchesSelector',
+            'mozMatchesSelector',
+            'webkitMatchesSelector',
+            'msMatchesSelector',
+            'oMatchesSelector'
+          ];
+
+          for (var index in matchFunctions) {
+            var matchFunction = matchFunctions[index];
+            if (angular.isFunction(element[0][matchFunction])) {
+              var parent1 = element[0].parentNode;
+              while (parent1 !== $document) {
+                if (parent1[matchFunction](selector)) {
+                  return parent1;
+                }
+                parent1 = parent1.parentNode;
+              }
 
-          var minHeightFor3Elements = 93;
-          if (maxHeight < minHeightFor3Elements) {
-            maxHeight = minHeightFor3Elements;
+              return undefined;
+            }
           }
 
-          content.style.maxHeight = maxHeight + 'px';
+          return undefined;
+        }
+
+        var dropDownContent = element[0].querySelector('.dropdown-menu .content');
+        var heightAdjustContainer = getParent(element, '.w11k-select-adjust-height-to');
+
+        function adjustHeight() {
+
+          var maxHeight;
+
+          if (angular.isObject(scope.style) && scope.style.hasOwnProperty('maxHeight')) {
+            dropDownContent.style.maxHeight = scope.style.maxHeight;
+          }
+          else {
+            var contentOffset = dropDownContent.getBoundingClientRect().top;
+
+            var windowHeight = $window.innerHeight || $window.document.documentElement.clientHeight;
+
+            var containerHeight;
+            var containerOffset;
+
+            if (angular.isDefined(heightAdjustContainer)) {
+              containerHeight = heightAdjustContainer.innerHeight || heightAdjustContainer.clientHeight;
+              containerOffset = heightAdjustContainer.getBoundingClientRect().top;
+            }
+            else {
+              containerHeight = $window.innerHeight || $window.document.documentElement.clientHeight;
+              containerOffset = 0;
+            }
+
+            var marginBottom;
+            if (angular.isObject(scope.style) && scope.style.hasOwnProperty('marginBottom')) {
+              if (scope.style.marginBottom.indexOf('px') < 0) {
+                throw new Error('Illegal Unit for w11kSelectStyle.marginBottom! Allowed Units: px');
+              }
+              marginBottom = parseFloat(scope.style.marginBottom.slice(0, -2));
+            }
+            else {
+              marginBottom = w11kSelectConfig.style.marginBottom;
+            }
+
+            var referenceHeight;
+            var referenceOffset;
+
+            if (containerHeight > windowHeight) {
+              referenceHeight = windowHeight;
+              referenceOffset = 0;
+            }
+            else {
+              referenceHeight = containerHeight;
+              referenceOffset = containerOffset;
+            }
+
+            maxHeight = referenceHeight - (contentOffset - referenceOffset) - marginBottom;
+
+            var minHeightFor3Elements = 93;
+            if (maxHeight < minHeightFor3Elements) {
+              maxHeight = minHeightFor3Elements;
+            }
+
+            dropDownContent.style.maxHeight = maxHeight + 'px';
+
+          }
         }
 
         function resetHeight() {