| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <!-- | 2 <!-- |
| 3 Copyright 2016 The Chromium Authors. All rights reserved. | 3 Copyright 2016 The Chromium Authors. All rights reserved. |
| 4 Use of this source code is governed by a BSD-style license that can be | 4 Use of this source code is governed by a BSD-style license that can be |
| 5 found in the LICENSE file. | 5 found in the LICENSE file. |
| 6 --> | 6 --> |
| 7 <!-- | 7 <!-- |
| 8 The 'autocomplete-box' is a input box with autocomplete drop-down menu. | 8 The 'autocomplete-box' is a input box with autocomplete drop-down menu. |
| 9 The drop-down menu has support for grouping, and tag name. | 9 The drop-down menu has support for grouping, and tag name. |
| 10 | 10 |
| (...skipping 126 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 137 } | 137 } |
| 138 </style> | 138 </style> |
| 139 | 139 |
| 140 <div id="container"> | 140 <div id="container"> |
| 141 <div id="textbox-container" class="layout vertical"> | 141 <div id="textbox-container" class="layout vertical"> |
| 142 <paper-input label="{{placeholder}}" | 142 <paper-input label="{{placeholder}}" |
| 143 on-click="onClickInput" | 143 on-click="onClickInput" |
| 144 on-focus="onFocusInput" | 144 on-focus="onFocusInput" |
| 145 on-blur="onBlurInput" | 145 on-blur="onBlurInput" |
| 146 on-keydown="onInputKeydown" | 146 on-keydown="onInputKeydown" |
| 147 on-keyup="onInputKeyup" |
| 147 disabled$="{{disabled}}" | 148 disabled$="{{disabled}}" |
| 148 id="textbox" | 149 id="textbox" |
| 149 value="{{query::input}}"> | 150 value="{{query::input}}"> |
| 150 </paper-input> | 151 </paper-input> |
| 151 </div> | 152 </div> |
| 152 <paper-material | 153 <paper-material |
| 153 id="dropdown-container" | 154 id="dropdown-container" |
| 154 hidden$="[[!showDropdown]]"> | 155 hidden$="[[!showDropdown]]"> |
| 155 <div class="dropdown-scroller" layered> | 156 <div class="dropdown-scroller" layered> |
| 156 <paper-menu id="dropdown" | 157 <paper-menu id="dropdown" |
| (...skipping 194 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 351 'updateSelected(selectedItem)', | 352 'updateSelected(selectedItem)', |
| 352 'updateSelected(locusItem)', | 353 'updateSelected(locusItem)', |
| 353 ], | 354 ], |
| 354 | 355 |
| 355 shouldIgnoreSelectionEvents() { | 356 shouldIgnoreSelectionEvents() { |
| 356 if (this.muffleSelection === undefined) this.muffleSelection = false; | 357 if (this.muffleSelection === undefined) this.muffleSelection = false; |
| 357 return this.muffleSelection; | 358 return this.muffleSelection; |
| 358 }, | 359 }, |
| 359 | 360 |
| 360 focus() { | 361 focus() { |
| 361 this.querySelector('input').focus(); | 362 this.$.textbox.focus(); |
| 362 }, | 363 }, |
| 363 | 364 |
| 364 onClickInput() { | 365 onClickInput() { |
| 365 // Sometimes the dropbox is closed even when the input has focus | 366 // Sometimes the dropbox is closed even when the input has focus |
| 366 // tries to click on the input to re-open it so we support that: | 367 // tries to click on the input to re-open it so we support that: |
| 367 this.set('dropdownOpen', true); | 368 this.set('dropdownOpen', true); |
| 368 this.$.textbox.readonly = false; | 369 this.$.textbox.readonly = false; |
| 369 }, | 370 }, |
| 370 | 371 |
| 371 onFocusInput() { | 372 onFocusInput() { |
| (...skipping 15 matching lines...) Expand all Loading... |
| 387 this.moveLocus(true /* down */); | 388 this.moveLocus(true /* down */); |
| 388 this.scrollLocusIntoView(); | 389 this.scrollLocusIntoView(); |
| 389 } else if (key === 38) { | 390 } else if (key === 38) { |
| 390 this.moveLocus(false /* down */); | 391 this.moveLocus(false /* down */); |
| 391 this.scrollLocusIntoView(); | 392 this.scrollLocusIntoView(); |
| 392 } else if (key === 13) { // Enter. | 393 } else if (key === 13) { // Enter. |
| 393 this.maybeSelectLocus(); | 394 this.maybeSelectLocus(); |
| 394 } | 395 } |
| 395 }, | 396 }, |
| 396 | 397 |
| 398 onInputKeyup(event) { |
| 399 this.set('query', this.$.textbox.value); |
| 400 }, |
| 401 |
| 397 scrollLocusIntoView() { | 402 scrollLocusIntoView() { |
| 398 const elements = this.$.dropdown.items || []; | 403 const elements = this.$.dropdown.items || []; |
| 399 for (const element of elements) { | 404 for (const element of elements) { |
| 400 if (element.item === this.locusItem) { | 405 if (element.item === this.locusItem) { |
| 401 element.scrollIntoView(false); | 406 element.scrollIntoView(false); |
| 402 return; | 407 return; |
| 403 } | 408 } |
| 404 } | 409 } |
| 405 }, | 410 }, |
| 406 | 411 |
| (...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 440 onDropdownSelect(event, detail) { | 445 onDropdownSelect(event, detail) { |
| 441 if (this.shouldIgnoreSelectionEvents()) return; | 446 if (this.shouldIgnoreSelectionEvents()) return; |
| 442 this.$.textbox.focus(); | 447 this.$.textbox.focus(); |
| 443 const index = this.$.dropdown.indexOf(detail.item); | 448 const index = this.$.dropdown.indexOf(detail.item); |
| 444 const item = this.suggestedItems[index]; | 449 const item = this.suggestedItems[index]; |
| 445 this.selectItem(item); | 450 this.selectItem(item); |
| 446 }, | 451 }, |
| 447 }); | 452 }); |
| 448 </script> | 453 </script> |
| 449 </dom-module> | 454 </dom-module> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2959503002:
Enable Polymer.Settings.useNativeShadow on the dashboard. (Closed)
