| 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 |