src/third_party/polymer/components-chromium/paper-menu-button/paper-menu-button-overlay-extracted.js

   1
   2     Polymer('paper-menu-button-overlay', {
   3
   4       publish: {
   5
   6         /**
   7          * The `relatedTarget` is an element used to position the overlay, for example a
   8          * button the user taps to show a menu.
   9          *
  10          * @attribute relatedTarget
  11          * @type Element
  12          */
  13         relatedTarget: null,
  14
  15         /**
  16          * The horizontal alignment of the overlay relative to the `relatedTarget`.
  17          *
  18          * @attribute halign
  19          * @type 'left'|'right'|'center'
  20          * @default 'left'
  21          */
  22         halign: 'left'
  23
  24       },
  25
  26       updateTargetDimensions: function() {
  27         this.super();
  28
  29         var t = this.target;
  30         this.target.cachedSize = t.getBoundingClientRect();
  31       },
  32
  33       positionTarget: function() {
  34         if (this.relatedTarget) {
  35
  36           var rect = this.relatedTarget.getBoundingClientRect();
  37
  38           if (this.halign === 'left') {
  39             this.target.style.left = rect.left + 'px';
  40           } else if (this.halign === 'right') {
  41             this.target.style.right = (window.innerWidth - rect.right) + 'px';
  42           } else {
  43             this.target.style.left = (rect.left - (rect.width - this.target.cachedSize.width) / 2) + 'px';
  44           }
  45
  46           if (this.valign === 'top') {
  47             this.target.style.top = rect.top + 'px';
  48           } else if (this.valign === 'bottom') {
  49             this.target.style.top = rect.bottom + 'px';
  50           } else {
  51             this.target.style.top = rect.top + 'px';
  52           }
  53
  54           // this.target.style.top = rect.top + 'px';
  55
  56         } else {
  57           this.super();
  58         }
  59       }
  60
  61     });
  62