Home | History | Annotate | Download | only in paper-menu-button 
      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>
     88