OLD | NEW |
---|---|
(Empty) | |
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 position: absolute; | |
ojan
2014/08/06 22:58:46
We don't have an official style on this, but I've
leviw_travelin_and_unemployed
2014/08/06 23:37:11
Done.
| |
17 overflow-y: scroll; | |
18 transition: transform 0.2s ease-in-out, opacity 0.2s ease-in; | |
19 border: 1px solid grey; | |
20 -webkit-box-shadow: 3px 4px 20px 0px rgba(0,0,0,0.75); | |
21 max-height: 300px; | |
22 padding: 1em; | |
23 z-index: 50; | |
24 background-color: white; | |
25 } | |
26 .hidden { | |
27 visibility: hidden; | |
28 opacity: 0; | |
29 } | |
30 </style> | |
31 <core-icon id="icon" src="{{src}}" icon="{{icon}}" on-click="{{ _toggleActio n }}"></core-icon> | |
ojan
2014/08/06 23:38:39
Spaces in the curlies!
| |
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), tr ue) | |
42 }, | |
43 detached: function() { | |
ojan
2014/08/06 22:58:46
Nit: inconsistent newlining. all your other functi
leviw_travelin_and_unemployed
2014/08/06 23:37:11
Done.
| |
44 document.body.removeEventListener('click', this._handleClick.bind(this), true) | |
45 }, | |
46 | |
47 _toggleAction: function() { | |
48 this.$.menu.classList.toggle('hidden'); | |
49 }, | |
50 | |
51 _handleClick: function(event) { | |
52 if (this.$.menu.classList.contains('hidden')) | |
53 return; | |
54 var preventDefault = true; | |
55 for (var i = event.path.length - 1; i >= 0; i--) { | |
56 if (event.path[i] === this.$.icon || event.path[i] === this.$.menu) { | |
ojan
2014/08/06 22:58:46
Can this just be:
if (event.path[i] === this)
?
leviw_travelin_and_unemployed
2014/08/06 23:37:11
It can be the former. NodeLists confusingly don't
| |
57 preventDefault = false; | |
58 break; | |
59 } | |
60 }; | |
61 if (preventDefault) { | |
62 event.preventDefault(); | |
63 this.$.menu.classList.add('hidden'); | |
64 } | |
65 }, | |
66 }); | |
67 })(); | |
68 </script> | |
69 </polymer-element> | |
OLD | NEW |