src/third_party/polymer/components/paper-menu-button/paper-menu-button-overlay.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <link rel="import" href="../polymer/polymer.html">
  11 <link rel="import" href="../core-overlay/core-overlay.html">
  12
  13 <!--
  14
  15 `paper-menu-button-overlay` is a helper class to position an overlay relative to another
  16 element, e.g. the button with a pulldown menu.
  17
  18 @group Paper Elements
  19 @element paper-menu-button-overlay
  20 @extends core-overlay
  21 @homepage github.io
  22 -->
  23
  24 <polymer-element name="paper-menu-button-overlay" extends="core-overlay" attributes="relatedTarget halign valign">
  25   <script>
  26     Polymer('paper-menu-button-overlay', {
  27
  28       publish: {
  29
  30         /**
  31          * The `relatedTarget` is an element used to position the overlay, for example a
  32          * button the user taps to show a menu.
  33          *
  34          * @attribute relatedTarget
  35          * @type Element
  36          */
  37         relatedTarget: null,
  38
  39         /**
  40          * The horizontal alignment of the overlay relative to the `relatedTarget`.
  41          *
  42          * @attribute halign
  43          * @type 'left'|'right'|'center'
  44          * @default 'left'
  45          */
  46         halign: 'left'
  47
  48       },
  49
  50       updateTargetDimensions: function() {
  51         this.super();
  52
  53         var t = this.target;
  54         this.target.cachedSize = t.getBoundingClientRect();
  55       },
  56
  57       positionTarget: function() {
  58         if (this.relatedTarget) {
  59
  60           var rect = this.relatedTarget.getBoundingClientRect();
  61
  62           if (this.halign === 'left') {
  63             this.target.style.left = rect.left + 'px';
  64           } else if (this.halign === 'right') {
  65             this.target.style.right = (window.innerWidth - rect.right) + 'px';
  66           } else {
  67             this.target.style.left = (rect.left - (rect.width - this.target.cachedSize.width) / 2) + 'px';
  68           }
  69
  70           if (this.valign === 'top') {
  71             this.target.style.top = rect.top + 'px';
  72           } else if (this.valign === 'bottom') {
  73             this.target.style.top = rect.bottom + 'px';
  74           } else {
  75             this.target.style.top = rect.top + 'px';
  76           }
  77
  78           // this.target.style.top = rect.top + 'px';
  79
  80         } else {
  81           this.super();
  82         }
  83       }
  84
  85     });
  86   </script>
  87 </polymer-element>