aon-overlay-behavior.html

<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">

<script>
  window.aon = window.aon || {};
  aon.elements = aon.elements || {};
  aon.elements.combobox = aon.elements.combobox || {};

  /** @polymerBehavior aon.elements.combobox.OverlayBehavior */
  aon.elements.combobox.OverlayBehaviorImpl = {
    properties: {
      /**
       * The element to position/align the dropdown by.
       */
      positionTarget: {
        type: Object
      },

      /**
       * Vertical offset for the overlay position.
       */
      verticalOffset: {
        type: Number,
        value: 0
      },

      /**
       * If `true`, overlay is aligned above the `positionTarget`
       */
      _alignedAbove: {
        type: Boolean,
        value: false
      }
    },

    listeners: {
      'iron-resize': '_setPosition'
    },

    created: function() {
      this._boundSetPosition = this._setPosition.bind(this);
    },

    _unwrapIfNeeded: function(element) {
      var isWrapped = Polymer.Settings.hasShadow && !Polymer.Settings.nativeShadow;
      return isWrapped ? window.unwrap(element) : element;
    },

    _processPendingMutationObserversFor: function(node) {
      if (!Polymer.Settings.useNativeCustomElements) {
        CustomElements.takeRecords(node);
      }
    },

    _moveTo: function(target) {
      // `attached` and `detached` callbacks are unreliable with Shadow DOM polyfill. They are asynchonous and sometimes
      // cancel each other. We need to process mutation observers synchonously after moving the overlay. :-(
      var oldParentNode = this.parentNode;
      Polymer.dom(target).appendChild(this);

      if (oldParentNode) {
        this._processPendingMutationObserversFor(oldParentNode);
        if (oldParentNode.host) {
          // When moving from local DOM, ensure to remove the old style scope
          Polymer.StyleTransformer.dom(this, oldParentNode.host.is, this._scopeCssViaAttr, true);
        }
      }

      this._processPendingMutationObserversFor(this);
      if (target.host) {
        // When moving to local DOM, ensure to add the new style scope
        Polymer.StyleTransformer.dom(this, target.host.is, this._scopeCssViaAttr);
      }

      if (target === document.body) {
        this.style.position = this._isPositionFixed(this.positionTarget) ? 'fixed' : 'absolute';
        window.addEventListener('scroll', this._boundSetPosition, true);
        this._setPosition();
      } else {
        window.removeEventListener('scroll', this._boundSetPosition, true);
      }
    },

    _verticalOffset: function(overlayRect, targetRect) {
      if (this._alignedAbove) {
        return -overlayRect.height;
      } else {
        return targetRect.height + this.verticalOffset;
      }
    },

    _isPositionFixed: function(element) {
      var offsetParent = element.offsetParent;

      return window.getComputedStyle(this._unwrapIfNeeded(element)).position === 'fixed' ||
        (offsetParent && this._isPositionFixed(offsetParent));
    },

    _maxHeight: function(targetRect) {
      var margin = 8;
      var minHeight = 116; // Height of two items in combo-box
      var bottom = Math.min(window.innerHeight, document.body.scrollHeight - document.body.scrollTop);

      if (this._alignedAbove) {
        return Math.max(targetRect.top - margin + Math.min(document.body.scrollTop, 0), minHeight) + 'px';
      } else {
        return Math.max(bottom - targetRect.bottom - margin, minHeight) + 'px';
      }
    },

    _setPosition: function(e) {
      if (e && e.target) {
        var target = e.target === document ? document.body : e.target;
        var parent = this._unwrapIfNeeded(this.parentElement);
        if (!(target.contains(this) || target.contains(this.positionTarget)) || parent !== document.body) {
          return;
        }
      }

      var targetRect = this.positionTarget.getBoundingClientRect();
      this._alignedAbove = this._shouldAlignAbove();

      // overlay max height is restrained by the #scroller max height which is set to 65vh in CSS.
      this.style.maxHeight = this._maxHeight(targetRect);

      // we need to set height for iron-list to make its `firstVisibleIndex` work correctly.
      this.$.selector.style.maxHeight = this._maxHeight(targetRect);

      var overlayRect = this.getBoundingClientRect();
      this._translateX = targetRect.left - overlayRect.left + (this._translateX || 0);
      this._translateY = targetRect.top - overlayRect.top + (this._translateY || 0) +
        this._verticalOffset(overlayRect, targetRect);

      var _devicePixelRatio = window.devicePixelRatio || 1;
      this._translateX = Math.round(this._translateX * _devicePixelRatio) / _devicePixelRatio;
      this._translateY = Math.round(this._translateY * _devicePixelRatio) / _devicePixelRatio;
      this.translate3d(this._translateX + 'px', this._translateY + 'px', '0');

      this.style.width = this.positionTarget.clientWidth + 'px';

      this.updateViewportBoundaries();
    },

    _shouldAlignAbove: function() {
      var spaceBelow = (
          window.innerHeight -
          this.positionTarget.getBoundingClientRect().bottom -
          Math.min(document.body.scrollTop, 0)
        ) / window.innerHeight;

      return spaceBelow < 0.30;
    }
  };

  /** @polymerBehavior */
  aon.elements.combobox.OverlayBehavior = [
    Polymer.IronResizableBehavior,
    aon.elements.combobox.OverlayBehaviorImpl
  ];
</script>