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 | 21 // Promotional toolstip string, shown in narrow mode if showMenuPromo is |
22 // true. | 22 // true. |
23 menuPromo: String, | 23 menuPromo: String, |
24 | 24 |
25 // Value is proxied through to cr-toolbar-search-field. When true, | 25 // Value is proxied through to cr-toolbar-search-field. When true, |
26 // the search field will show a processing spinner. | 26 // the search field will show a processing spinner. |
27 spinnerActive: Boolean, | 27 spinnerActive: Boolean, |
28 | 28 |
29 // Controls whether the menu button is shown at the start of the menu. | 29 // Controls whether the menu button is shown at the start of the menu. |
30 showMenu: { | 30 showMenu: {type: Boolean, value: false}, |
31 type: Boolean, | |
32 value: false | |
33 }, | |
34 | 31 |
35 // Whether to show menu promo tooltip. | 32 // Whether to show menu promo tooltip. |
36 showMenuPromo: { | 33 showMenuPromo: { |
37 type: Boolean, | 34 type: Boolean, |
38 value: false, | 35 value: false, |
39 }, | 36 }, |
40 | 37 |
41 closeMenuPromo: String, | 38 closeMenuPromo: String, |
42 | 39 |
43 /** @private */ | 40 /** @private */ |
44 narrow_: { | 41 narrow_: {type: Boolean, reflectToAttribute: true}, |
45 type: Boolean, | |
46 reflectToAttribute: true | |
47 }, | |
48 | 42 |
49 /** @private */ | 43 /** @private */ |
50 showingSearch_: { | 44 showingSearch_: { |
51 type: Boolean, | 45 type: Boolean, |
52 reflectToAttribute: true, | 46 reflectToAttribute: true, |
53 }, | 47 }, |
54 }, | 48 }, |
55 | 49 |
56 observers: [ | 50 observers: [ |
57 'possiblyShowMenuPromo_(showMenu, showMenuPromo, showingSearch_)', | 51 'possiblyShowMenuPromo_(showMenu, showMenuPromo, showingSearch_)', |
58 ], | 52 ], |
59 | 53 |
60 /** @return {!CrToolbarSearchFieldElement} */ | 54 /** @return {!CrToolbarSearchFieldElement} */ |
61 getSearchField: function() { | 55 getSearchField: function() { return this.$.search; }, |
62 return this.$.search; | |
63 }, | |
64 | 56 |
65 /** @private */ | 57 /** @private */ |
66 onClosePromoTap_: function() { | 58 onClosePromoTap_: function() { this.fire('cr-toolbar-menu-promo-close'); }, |
67 this.fire('cr-toolbar-menu-promo-close'); | |
68 }, | |
69 | 59 |
70 /** @private */ | 60 /** @private */ |
71 onMenuTap_: function() { | 61 onMenuTap_: function() { this.fire('cr-toolbar-menu-tap'); }, |
72 this.fire('cr-toolbar-menu-tap'); | |
73 }, | |
74 | 62 |
75 /** @private */ | 63 /** @private */ |
76 possiblyShowMenuPromo_: function() { | 64 possiblyShowMenuPromo_: function() { |
77 Polymer.RenderStatus.afterNextRender(this, function() { | 65 Polymer.RenderStatus.afterNextRender(this, function() { |
78 if (this.showMenu && this.showMenuPromo && !this.showingSearch_) { | 66 if (this.showMenu && this.showMenuPromo && !this.showingSearch_) { |
79 this.$$('#menuPromo').animate({ | 67 this.$$('#menuPromo') |
80 opacity: [0, .9], | 68 .animate( |
81 }, /** @type {!KeyframeEffectOptions} */({ | 69 { |
82 duration: 500, | 70 opacity: [0, .9], |
83 fill: 'forwards' | 71 }, |
84 })); | 72 /** @type {!KeyframeEffectOptions} */ ( |
| 73 {duration: 500, fill: 'forwards'})); |
85 this.fire('cr-toolbar-menu-promo-shown'); | 74 this.fire('cr-toolbar-menu-promo-shown'); |
86 } | 75 } |
87 }.bind(this)); | 76 }.bind(this)); |
88 }, | 77 }, |
89 | 78 |
90 /** | 79 /** |
91 * @param {string} title | 80 * @param {string} title |
92 * @param {boolean} showMenuPromo | 81 * @param {boolean} showMenuPromo |
93 * @return {string} The title if the menu promo isn't showing, else "". | 82 * @return {string} The title if the menu promo isn't showing, else "". |
94 */ | 83 */ |
95 titleIfNotShowMenuPromo_: function(title, showMenuPromo) { | 84 titleIfNotShowMenuPromo_: function(title, showMenuPromo) { |
96 return showMenuPromo ? '' : title; | 85 return showMenuPromo ? '' : title; |
97 }, | 86 }, |
98 }); | 87 }); |
OLD | NEW |