assets/js/romo/dropdown.js in romo-0.1.0 vs assets/js/romo/dropdown.js in romo-0.2.0

@@ -208,10 +208,15 @@
   $('body').off('click', $.proxy(this.onWindowBodyClick, this));
   $('body').off('modal:mousedown', $.proxy(this.onWindowBodyClick, this));
   $('body').off('keyup', $.proxy(this.onWindowBodyKeyUp, this));
   $(window).off('resize', $.proxy(this.onResizeWindow, this));
 
+  // clear the content elem markup if configured to
+  if (this.elem.data('romo-dropdown-clear-content') === true) {
+    this.contentElem.html('');
+  }
+
   this.elem.trigger('dropdown:popupClose', [this]);
 }
 
 RomoDropdown.prototype.onElemKeyUp = function(e) {
   if (this.elem.hasClass('disabled') === false) {
@@ -253,23 +258,51 @@
 }
 
 RomoDropdown.prototype.doPlacePopupElem = function() {
   if (this.elem.parents('.romo-modal-popup').size() !== 0) {
     this.popupElem.css({'position': 'fixed'});
+    this.popupElem.offset(this.elem.offset());
   }
 
   var pos = $.extend({}, this.elem[0].getBoundingClientRect(), this.elem.offset());
   var w = this.popupElem[0].offsetWidth;
   var h = this.popupElem[0].offsetHeight;
-  var pad = 2;
   var offset = {};
 
-  switch (this.popupPosition) {
+  var configHeight = this.elem.data('romo-dropdown-height') || this.elem.data('romo-dropdown-max-height');
+  var configPosition = this.popupPosition;
+
+  if (configHeight === 'detect') {
+    var popupHeight = this.popupElem.height();
+    var topAvailHeight = this._getPopupMaxAvailableHeight('top');
+    var bottomAvailHeight = this._getPopupMaxAvailableHeight('bottom');
+
+    if (popupHeight < topAvailHeight && popupHeight < bottomAvailHeight) {
+      // if it fits both ways, use the config position way
+      configHeight = this._getPopupMaxAvailableHeight(configPosition);
+    } else if (topAvailHeight > bottomAvailHeight) {
+      configPosition = 'top';
+      configHeight = topAvailHeight;
+    } else {
+      configPosition = 'bottom';
+      configHeight = bottomAvailHeight;
+    }
+
+    this.contentElem.css({'max-height': configHeight.toString() + 'px'});
+  }
+
+  if(h > configHeight) {
+    h = configHeight;
+  }
+
+  switch (configPosition) {
     case 'top':
+      var pad = 2;
       $.extend(offset, { top: pos.top - h - pad });
       break;
     case 'bottom':
+      var pad = 2;
       $.extend(offset, { top: pos.top + pos.height + pad });
       break;
   }
   switch (this.popupAlignment) {
     case 'left':
@@ -279,30 +312,40 @@
       $.extend(offset, { left: pos.right - w });
       break;
   }
 
   this.popupElem.offset(offset);
-
-  if (this.elem.data('romo-dropdown-max-height') === 'detect') {
-    var pad = this.elem.data('romo-dropdown-max-height-detect-pad') || 10;
-    var contentTop = this.contentElem[0].getBoundingClientRect().top;
-    var contentBottom = this.contentElem[0].getBoundingClientRect().bottom;
-    var bodyBottom = this.bodyElem[0].getBoundingClientRect().bottom;
-    var padBottom = bodyBottom - contentBottom;
-
-    var maxHeight = $(window).height() - contentTop - padBottom - pad;
-    this.contentElem.css({'max-height': maxHeight.toString() + 'px'});
-  }
 }
 
 RomoDropdown.prototype.doSetPopupZIndex = function(relativeElem) {
   var relativeZIndex = Romo.parseZIndex(relativeElem);
   this.popupElem.css({'z-index': relativeZIndex + 1200}); // see z-index.css
 }
 
 RomoDropdown.prototype._parsePositionData = function(posString) {
   var posData = (posString || '').split(',');
   return { position: posData[0], alignment: posData[1] };
+}
+
+RomoDropdown.prototype._getPopupMaxAvailableHeight = function(position) {
+  var maxHeight = undefined;
+
+  switch (position) {
+    case 'top':
+      var elemTop = this.elem[0].getBoundingClientRect().top;
+      maxHeight = elemTop - this._getPopupMaxHeightDetectPad(position);
+      break;
+    case 'bottom':
+      var elemBottom = this.elem[0].getBoundingClientRect().bottom;
+      maxHeight = $(window).height() - elemBottom - this._getPopupMaxHeightDetectPad(position);
+      break;
+  }
+
+  return maxHeight;
+}
+
+RomoDropdown.prototype._getPopupMaxHeightDetectPad = function(position) {
+  return this.elem.data('romo-dropdown-max-height-detect-pad-'+position) || this.elem.data('romo-dropdown-max-height-detect-pad') || 10;
 }
 
 Romo.onInitUI(function(e) {
   Romo.initUIElems(e, '[data-romo-dropdown-auto="true"]').romoDropdown();
 });