OLD | NEW |
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 Polymer({ | 5 Polymer({ |
6 is: 'cr-toolbar', | 6 is: 'cr-toolbar', |
7 | 7 |
8 properties: { | 8 properties: { |
9 // Name to display in the toolbar, in titlecase. | 9 // Name to display in the toolbar, in titlecase. |
10 pageName: String, | 10 pageName: String, |
11 | 11 |
12 // Prompt text to display in the search field. | 12 // Prompt text to display in the search field. |
13 searchPrompt: String, | 13 searchPrompt: String, |
14 | 14 |
15 // Tooltip to display on the clear search button. | 15 // Tooltip to display on the clear search button. |
16 clearLabel: String, | 16 clearLabel: String, |
17 | 17 |
18 // Tooltip to display on the menu button. | 18 // Tooltip to display on the menu button. |
19 menuLabel: String, | 19 menuLabel: String, |
20 | 20 |
21 // Promotional toolstip string, shown in narrow mode if showMenuPromo is | |
22 // true. | |
23 menuPromo: String, | |
24 | |
25 // Value is proxied through to cr-toolbar-search-field. When true, | 21 // Value is proxied through to cr-toolbar-search-field. When true, |
26 // the search field will show a processing spinner. | 22 // the search field will show a processing spinner. |
27 spinnerActive: Boolean, | 23 spinnerActive: Boolean, |
28 | 24 |
29 // Controls whether the menu button is shown at the start of the menu. | 25 // Controls whether the menu button is shown at the start of the menu. |
30 showMenu: { | 26 showMenu: { |
31 type: Boolean, | 27 type: Boolean, |
32 value: false | 28 value: false |
33 }, | 29 }, |
34 | 30 |
35 // Whether to show menu promo tooltip. | |
36 showMenuPromo: { | |
37 type: Boolean, | |
38 value: false, | |
39 }, | |
40 | |
41 closeMenuPromo: String, | |
42 | |
43 /** @private */ | 31 /** @private */ |
44 narrow_: { | 32 narrow_: { |
45 type: Boolean, | 33 type: Boolean, |
46 reflectToAttribute: true | 34 reflectToAttribute: true |
47 }, | 35 }, |
48 | 36 |
49 /** @private */ | 37 /** @private */ |
50 showingSearch_: { | 38 showingSearch_: { |
51 type: Boolean, | 39 type: Boolean, |
52 reflectToAttribute: true, | 40 reflectToAttribute: true, |
53 }, | 41 }, |
54 }, | 42 }, |
55 | 43 |
56 observers: [ | |
57 'possiblyShowMenuPromo_(showMenu, showMenuPromo, showingSearch_)', | |
58 ], | |
59 | |
60 /** @return {!CrToolbarSearchFieldElement} */ | 44 /** @return {!CrToolbarSearchFieldElement} */ |
61 getSearchField: function() { | 45 getSearchField: function() { |
62 return this.$.search; | 46 return this.$.search; |
63 }, | 47 }, |
64 | 48 |
65 /** @private */ | 49 /** @private */ |
66 onClosePromoTap_: function() { | 50 onMenuTap_: function(e) { |
67 this.showMenuPromo = false; | |
68 }, | |
69 | |
70 /** @private */ | |
71 onMenuTap_: function() { | |
72 this.fire('cr-menu-tap'); | 51 this.fire('cr-menu-tap'); |
73 this.onClosePromoTap_(); | 52 } |
74 }, | |
75 | |
76 /** @private */ | |
77 possiblyShowMenuPromo_: function() { | |
78 Polymer.RenderStatus.afterNextRender(this, function() { | |
79 if (this.showMenu && this.showMenuPromo && !this.showingSearch_) { | |
80 this.$$('#menuPromo').animate({ | |
81 opacity: [0, .9], | |
82 }, /** @type {!KeyframeEffectOptions} */({ | |
83 duration: 500, | |
84 fill: 'forwards' | |
85 })); | |
86 this.fire('cr-menu-promo-shown'); | |
87 } | |
88 }.bind(this)); | |
89 }, | |
90 | |
91 /** | |
92 * @param {string} title | |
93 * @param {boolean} showMenuPromo | |
94 * @return {string} The title if the menu promo isn't showing, else "". | |
95 */ | |
96 titleIfNotShowMenuPromo_: function(title, showMenuPromo) { | |
97 return showMenuPromo ? '' : title; | |
98 }, | |
99 }); | 53 }); |
OLD | NEW |