polymer-date-picker-positioning.html

<polymer-element name="polymer-date-picker-positioning" attributes="relatedTarget opened halign">
  <script>
    Polymer("polymer-date-picker-positioning", {
      ready: function() {
        var self = this;
        window.addEventListener('scroll', function() {
          self.reposition();
        });
        window.addEventListener('resize', function() {
          self.reposition();
        });
        this.async(self.reposition);
      },
      closeCanceled: false,
      openedChanged: function(oldVal, newVal) {
        var picker = this;
        if (!this.clickListener) {
          this.clickListener = function(e) {
            var bound = picker.target.getBoundingClientRect();
            picker.async(function() {if (!picker.closeCanceled) picker.close(); else picker.closeCanceled = false});
          };
          this.targetClickListener = function(e) {
            picker.closeCanceled = true;
          }
        }
        
        if (newVal == "true") {
          this.reposition();
          this.style.display = "";
          this.async(function() {
            window.addEventListener('click', picker.clickListener, false);
            picker.target.addEventListener('click', picker.targetClickListener, false);
          }, 100);
        } else {
          window.removeEventListener('click', picker.clickListener, false);
          window.removeEventListener('click', picker.targetClickListener, false);
          picker.style.display = "none";
        }
      },
      reposition: function() {
        if (this.opened == "true") {
          var picker = this;
          var bound = this.relatedTarget.getBoundingClientRect();
          picker.style.position = "fixed";
          picker.style.top = (bound.bottom) + "px";
          if (this.halign == "right") picker.style.left = (bound.right) + "px";
          else if (this.halign == "left") picker.style.left = (bound.left) + "px";
          else picker.style.left = ((bound.left + bound.right) / 2) + "px";
        }
      },
      toggle: function() {
        if (this.opened == "true") this.opened = "false";
        else this.opened = "true";
      },
      open: function() {
          this.opened = "true";
      },
      close: function() {
          this.opened = "false";
      }
    });
  </script>
</polymer-element>