1 <!-- 2 Copyright 2014 The Chromium Authors. All rights reserved. 3 Use of this source code is governed by a BSD-style license that can be 4 found in the LICENSE file. 5 --> 6 <link href="../bower_components/polymer/polymer.html" rel="import"> 7 <link href="../bower_components/core-icon/core-icon.html" rel="import"> 8 9 <polymer-element name="ct-popup-menu" attributes="{{ icon }}"> 10 <template> 11 <style> 12 :host { 13 display: inline-block; 14 } 15 #menu { 16 background-color: white; 17 border: 1px solid grey; 18 max-height: 300px; 19 overflow-y: scroll; /* FIXME: should be auto, but that triggers premature line wrapping */ 20 padding: 1em; 21 position: absolute; 22 transition: transform 0.2s ease-in-out, opacity 0.2s ease-in; 23 z-index: 50; 24 -webkit-box-shadow: 3px 4px 20px 0px rgba(0,0,0,0.75); 25 } 26 .hidden { 27 opacity: 0; 28 visibility: hidden; /* Necessary to avoid eating clicks. */ 29 } 30 </style> 31 <core-icon id="icon" src="{{ src }}" icon="{{ icon }}" on-click="{{ _toggleAction }}"></core-icon> 32 <div id="menu" class="hidden"> 33 <content></content> 34 </div> 35 </template> 36 <script> 37 (function() { 38 Polymer({ 39 attached: function() { 40 // FIXME: hitting escape should also hide the menu. 41 document.body.addEventListener('click', this._handleClick.bind(this), true) 42 }, 43 44 detached: function() { 45 document.body.removeEventListener('click', this._handleClick.bind(this), true) 46 }, 47 48 _toggleAction: function() { 49 this.$.menu.classList.toggle('hidden'); 50 }, 51 52 _handleClick: function(event) { 53 if (this.$.menu.classList.contains('hidden')) 54 return; 55 for (var i = event.path.length - 1; i >= 0; i--) { 56 if (event.path[i] === this) 57 return; 58 } 59 event.preventDefault(); 60 this.$.menu.classList.add('hidden'); 61 }, 62 }); 63 })(); 64 </script> 65 </polymer-element> 66
