paper-datatable-edit-dialog.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../iron-form/iron-form.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<dom-module id="paper-datatable-edit-dialog">
	<template>
		<style type="text/css">:host {
  position: absolute;
  z-index: 10;
  display: none; }

:host([visible]) {
  display: block; }

paper-material {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  min-width: 100px;
  display: inline-block;
  padding: 4px 24px;
  background: var(--paper-datatable-edit-dialog-color, --paper-grey-50);
  border-radius: 2px;
  box-sizing: border-box;
  @apply (--paper-datatable-edit-dialog); }
</style>
		<paper-material id="material" elevation="1">
			<form is="iron-form" id="form" on-iron-form-presubmit="dismiss">
				<content select="*"></content>
			</form>
		</paper-material>
	</template>
	<script>'use strict';

/**
 * This shouldn't be showing up here, but I can't see to get this documentation system to ignore this file,
 * so just ignore it.
 *
 * This element is used internally to render the dialog boxes when `<paper-datatable-column>` is used with the
 * `[dialog]` attribute.
 */

Polymer({

  is: 'paper-datatable-edit-dialog',

  properties: {
    positionedRelativeTo: {
      type: Element,
      observer: 'setLocationRelativeTo'
    },
    visible: {
      type: Boolean,
      reflectToAttribute: true
    }
  },

  behaviors: [Polymer.IronResizableBehavior],

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

  ready: function ready() {
    this.addEventListener('keyup', function (ev) {
      var genericEvent = Polymer.dom(ev);
      if (ev.keyCode == 13 && genericEvent.path[0].nodeName.toLowerCase() !== 'textarea') {
        this.dismiss();
      }
    }.bind(this));
    document.body.addEventListener('click', function (ev) {
      var path = Polymer.dom(ev).path;
      if (this.positionedRelativeTo && path.indexOf(this) == -1 && path.indexOf(this.positionedRelativeTo) == -1) {
        this.dismiss(ev);
      }
    }.bind(this));
  },

  dismiss: function dismiss(ev) {
    this.set('visible', undefined);
    this.positionedRelativeTo = undefined;
    if (ev) ev.preventDefault();
  },

  findFocus: function findFocus() {
    var paperInput = Polymer.dom(this).querySelector('paper-input');
    if (paperInput) {
      paperInput.$.input.focus();
    }
    var paperInput = Polymer.dom(this).querySelector('paper-textarea');
    if (paperInput) {
      var position = paperInput.$.input.$.textarea.value.length;
      paperInput.$.input.$.textarea.focus();
      paperInput.$.input.$.textarea.setSelectionRange(position, position);
    }
    var input = Polymer.dom(this).querySelector('input');
    if (input) {
      input.focus();
    }
  },

  setLocationRelativeTo: function setLocationRelativeTo() {
    if (this.positionedRelativeTo) {
      this.set('visible', true);
      this.revealTime = Date.now();
      var relativeToParent = this.parentNode;
      while (relativeToParent !== window) {
        if (relativeToParent.nodeName == '#document-fragment') {
          relativeToParent = relativeToParent.host;
        } else {
          if (getComputedStyle(relativeToParent).position == 'relative' || getComputedStyle(relativeToParent).position == 'absolute') {
            break;
          }
          relativeToParent = Polymer.dom(relativeToParent).parentNode;
        }
      }
      var parent = relativeToParent.getBoundingClientRect();
      var child = this.positionedRelativeTo.getBoundingClientRect();
      this.style.top = child.top - 2 - parent.top + "px";
      this.style.left = child.left - parent.left + "px";
      this.style.right = Math.max(parent.right - child.right, 0) + "px";
      this.$.material.style.minHeight = child.height + 2 + "px";
    }
  }

});</script>
</dom-module>