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-search-field', | 6 is: 'cr-toolbar-search-field', |
7 | 7 |
8 behaviors: [CrSearchFieldBehavior], | 8 behaviors: [CrSearchFieldBehavior], |
9 | 9 |
10 properties: { | 10 properties: { |
(...skipping 11 matching lines...) Expand all Loading... |
22 }, | 22 }, |
23 | 23 |
24 // Prompt text to display in the search field. | 24 // Prompt text to display in the search field. |
25 label: String, | 25 label: String, |
26 | 26 |
27 // Tooltip to display on the clear search button. | 27 // Tooltip to display on the clear search button. |
28 clearLabel: String, | 28 clearLabel: String, |
29 | 29 |
30 // When true, show a loading spinner to indicate that the backend is | 30 // When true, show a loading spinner to indicate that the backend is |
31 // processing the search. Will only show if the search field is open. | 31 // processing the search. Will only show if the search field is open. |
32 spinnerActive: { | 32 spinnerActive: {type: Boolean, reflectToAttribute: true}, |
33 type: Boolean, | |
34 reflectToAttribute: true | |
35 }, | |
36 | 33 |
37 /** @private */ | 34 /** @private */ |
38 hasSearchText_: { | 35 hasSearchText_: {type: Boolean, reflectToAttribute: true}, |
39 type: Boolean, | |
40 reflectToAttribute: true | |
41 }, | |
42 | 36 |
43 /** @private */ | 37 /** @private */ |
44 isSpinnerShown_: { | 38 isSpinnerShown_: { |
45 type: Boolean, | 39 type: Boolean, |
46 computed: 'computeIsSpinnerShown_(spinnerActive, showingSearch)' | 40 computed: 'computeIsSpinnerShown_(spinnerActive, showingSearch)' |
47 }, | 41 }, |
48 | 42 |
49 /** @private */ | 43 /** @private */ |
50 searchFocused_: { | 44 searchFocused_: {type: Boolean, value: false}, |
51 type: Boolean, | |
52 value: false | |
53 }, | |
54 }, | 45 }, |
55 | 46 |
56 listeners: { | 47 listeners: { |
57 // Deliberately uses 'click' instead of 'tap' to fix crbug.com/624356. | 48 // Deliberately uses 'click' instead of 'tap' to fix crbug.com/624356. |
58 'click': 'showSearch_', | 49 'click': 'showSearch_', |
59 }, | 50 }, |
60 | 51 |
61 /** @return {!HTMLInputElement} */ | 52 /** @return {!HTMLInputElement} */ |
62 getSearchInput: function() { | 53 getSearchInput: function() { return this.$.searchInput; }, |
63 return this.$.searchInput; | |
64 }, | |
65 | 54 |
66 /** | 55 /** |
67 * Sets the value of the search field. Overridden from CrSearchFieldBehavior. | 56 * Sets the value of the search field. Overridden from CrSearchFieldBehavior. |
68 * @param {string} value | 57 * @param {string} value |
69 * @param {boolean=} opt_noEvent Whether to prevent a 'search-changed' event | 58 * @param {boolean=} opt_noEvent Whether to prevent a 'search-changed' event |
70 * firing for this change. | 59 * firing for this change. |
71 */ | 60 */ |
72 setValue: function(value, opt_noEvent) { | 61 setValue: function(value, opt_noEvent) { |
73 CrSearchFieldBehavior.setValue.call(this, value, opt_noEvent); | 62 CrSearchFieldBehavior.setValue.call(this, value, opt_noEvent); |
74 this.onSearchInput_(); | 63 this.onSearchInput_(); |
75 }, | 64 }, |
76 | 65 |
77 /** @return {boolean} */ | 66 /** @return {boolean} */ |
78 isSearchFocused: function() { | 67 isSearchFocused: function() { return this.searchFocused_; }, |
79 return this.searchFocused_; | |
80 }, | |
81 | 68 |
82 showAndFocus: function() { | 69 showAndFocus: function() { |
83 this.showingSearch = true; | 70 this.showingSearch = true; |
84 this.focus_(); | 71 this.focus_(); |
85 }, | 72 }, |
86 | 73 |
87 /** @private */ | 74 /** @private */ |
88 focus_: function() { | 75 focus_: function() { this.getSearchInput().focus(); }, |
89 this.getSearchInput().focus(); | |
90 }, | |
91 | 76 |
92 /** | 77 /** |
93 * @param {boolean} narrow | 78 * @param {boolean} narrow |
94 * @return {number} | 79 * @return {number} |
95 * @private | 80 * @private |
96 */ | 81 */ |
97 computeIconTabIndex_: function(narrow) { | 82 computeIconTabIndex_: function(narrow) { return narrow ? 0 : -1; }, |
98 return narrow ? 0 : -1; | |
99 }, | |
100 | 83 |
101 /** | 84 /** |
102 * @return {boolean} | 85 * @return {boolean} |
103 * @private | 86 * @private |
104 */ | 87 */ |
105 computeIsSpinnerShown_: function() { | 88 computeIsSpinnerShown_: function() { |
106 return this.spinnerActive && this.showingSearch; | 89 return this.spinnerActive && this.showingSearch; |
107 }, | 90 }, |
108 | 91 |
109 /** @private */ | 92 /** @private */ |
110 onInputFocus_: function() { | 93 onInputFocus_: function() { this.searchFocused_ = true; }, |
111 this.searchFocused_ = true; | |
112 }, | |
113 | 94 |
114 /** @private */ | 95 /** @private */ |
115 onInputBlur_: function() { | 96 onInputBlur_: function() { |
116 this.searchFocused_ = false; | 97 this.searchFocused_ = false; |
117 if (!this.hasSearchText_) | 98 if (!this.hasSearchText_) |
118 this.showingSearch = false; | 99 this.showingSearch = false; |
119 }, | 100 }, |
120 | 101 |
121 /** | 102 /** |
122 * Update the state of the search field whenever the underlying input value | 103 * Update the state of the search field whenever the underlying input value |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
167 | 148 |
168 if (this.showingSearch) { | 149 if (this.showingSearch) { |
169 this.focus_(); | 150 this.focus_(); |
170 return; | 151 return; |
171 } | 152 } |
172 | 153 |
173 this.setValue(''); | 154 this.setValue(''); |
174 this.getSearchInput().blur(); | 155 this.getSearchInput().blur(); |
175 }, | 156 }, |
176 }); | 157 }); |
OLD | NEW |