| OLD | NEW |
| 1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 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 cr.define('print_preview', function() { | 5 cr.define('print_preview', function() { |
| 6 'use strict'; | 6 'use strict'; |
| 7 | 7 |
| 8 /** | 8 /** |
| 9 * Component that renders a search box for searching through destinations. | 9 * Component that renders a search box for searching through destinations. |
| 10 * @param {string} searchBoxPlaceholderText Search box placeholder text. | 10 * @param {string} searchBoxPlaceholderText Search box placeholder text. |
| 11 * @constructor | 11 * @constructor |
| 12 * @extends {print_preview.Component} | 12 * @extends {print_preview.Component} |
| 13 */ | 13 */ |
| 14 function SearchBox(searchBoxPlaceholderText) { | 14 function SearchBox(searchBoxPlaceholderText) { |
| 15 print_preview.Component.call(this); | 15 print_preview.Component.call(this); |
| 16 | 16 |
| 17 /** | 17 /** |
| 18 * Search box placeholder text. | 18 * Search box placeholder text. |
| 19 * @private {string} | 19 * @private {string} |
| 20 */ | 20 */ |
| 21 this.searchBoxPlaceholderText_ = searchBoxPlaceholderText; | 21 this.searchBoxPlaceholderText_ = searchBoxPlaceholderText; |
| 22 | 22 |
| 23 /** | 23 /** |
| 24 * Timeout used to control incremental search. | 24 * Timeout used to control incremental search. |
| 25 * @private {?number} | 25 * @private {?number} |
| 26 */ | 26 */ |
| 27 this.timeout_ = null; | 27 this.timeout_ = null; |
| 28 | 28 |
| 29 /** | 29 /** |
| 30 * Input box where the query is entered. | 30 * Input box where the query is entered. |
| 31 * @private {HTMLInputElement} | 31 * @private {HTMLInputElement} |
| 32 */ | 32 */ |
| 33 this.input_ = null; | 33 this.input_ = null; |
| 34 }; | 34 }; |
| 35 | 35 |
| 36 /** | 36 /** |
| 37 * Enumeration of event types dispatched from the search box. | 37 * Enumeration of event types dispatched from the search box. |
| 38 * @enum {string} | 38 * @enum {string} |
| 39 */ | 39 */ |
| 40 SearchBox.EventType = { | 40 SearchBox.EventType = {SEARCH: 'print_preview.SearchBox.SEARCH'}; |
| 41 SEARCH: 'print_preview.SearchBox.SEARCH' | |
| 42 }; | |
| 43 | 41 |
| 44 /** | 42 /** |
| 45 * Delay in milliseconds before dispatching a SEARCH event. | 43 * Delay in milliseconds before dispatching a SEARCH event. |
| 46 * @private {number} | 44 * @private {number} |
| 47 * @const | 45 * @const |
| 48 */ | 46 */ |
| 49 SearchBox.SEARCH_DELAY_ = 150; | 47 SearchBox.SEARCH_DELAY_ = 150; |
| 50 | 48 |
| 51 SearchBox.prototype = { | 49 SearchBox.prototype = { |
| 52 __proto__: print_preview.Component.prototype, | 50 __proto__: print_preview.Component.prototype, |
| 53 | 51 |
| 54 /** @param {?string} query New query to set the search box's query to. */ | 52 /** @param {?string} query New query to set the search box's query to. */ |
| 55 setQuery: function(query) { | 53 setQuery: function(query) { |
| 56 query = query || ''; | 54 query = query || ''; |
| 57 this.input_.value = query.trim(); | 55 this.input_.value = query.trim(); |
| 58 }, | 56 }, |
| 59 | 57 |
| 60 /** Sets the input element of the search box in focus. */ | 58 /** Sets the input element of the search box in focus. */ |
| 61 focus: function() { | 59 focus: function() { |
| 62 this.input_.focus(); | 60 this.input_.focus(); |
| 63 }, | 61 }, |
| 64 | 62 |
| 65 /** @override */ | 63 /** @override */ |
| 66 createDom: function() { | 64 createDom: function() { |
| 67 this.setElementInternal(this.cloneTemplateInternal( | 65 this.setElementInternal( |
| 68 'search-box-template')); | 66 this.cloneTemplateInternal('search-box-template')); |
| 69 this.input_ = assertInstanceof(this.getChildElement('.search-box-input'), | 67 this.input_ = assertInstanceof( |
| 70 HTMLInputElement); | 68 this.getChildElement('.search-box-input'), HTMLInputElement); |
| 71 this.input_.setAttribute('placeholder', this.searchBoxPlaceholderText_); | 69 this.input_.setAttribute('placeholder', this.searchBoxPlaceholderText_); |
| 72 }, | 70 }, |
| 73 | 71 |
| 74 /** @override */ | 72 /** @override */ |
| 75 enterDocument: function() { | 73 enterDocument: function() { |
| 76 print_preview.Component.prototype.enterDocument.call(this); | 74 print_preview.Component.prototype.enterDocument.call(this); |
| 77 this.tracker.add(assert(this.input_), 'input', | 75 this.tracker.add( |
| 78 this.onInputInput_.bind(this)); | 76 assert(this.input_), 'input', this.onInputInput_.bind(this)); |
| 79 }, | 77 }, |
| 80 | 78 |
| 81 /** @override */ | 79 /** @override */ |
| 82 exitDocument: function() { | 80 exitDocument: function() { |
| 83 print_preview.Component.prototype.exitDocument.call(this); | 81 print_preview.Component.prototype.exitDocument.call(this); |
| 84 this.input_ = null; | 82 this.input_ = null; |
| 85 }, | 83 }, |
| 86 | 84 |
| 87 /** | 85 /** |
| 88 * @return {string} The current query of the search box. | 86 * @return {string} The current query of the search box. |
| (...skipping 28 matching lines...) Expand all Loading... |
| 117 */ | 115 */ |
| 118 onInputInput_: function() { | 116 onInputInput_: function() { |
| 119 if (this.timeout_) | 117 if (this.timeout_) |
| 120 clearTimeout(this.timeout_); | 118 clearTimeout(this.timeout_); |
| 121 this.timeout_ = setTimeout( | 119 this.timeout_ = setTimeout( |
| 122 this.dispatchSearchEvent_.bind(this), SearchBox.SEARCH_DELAY_); | 120 this.dispatchSearchEvent_.bind(this), SearchBox.SEARCH_DELAY_); |
| 123 } | 121 } |
| 124 }; | 122 }; |
| 125 | 123 |
| 126 // Export | 124 // Export |
| 127 return { | 125 return {SearchBox: SearchBox}; |
| 128 SearchBox: SearchBox | |
| 129 }; | |
| 130 }); | 126 }); |
| OLD | NEW |