1// Copyright (c) 2012 The Chromium Authors. All rights reserved. 2// Use of this source code is governed by a BSD-style license that can be 3// found in the LICENSE file. 4 5cr.define('print_preview', function() { 6 'use strict'; 7 8 /** 9 * Component that renders a search box for searching through destinations. 10 * @constructor 11 * @extends {print_preview.Component} 12 */ 13 function SearchBox() { 14 print_preview.Component.call(this); 15 16 /** 17 * Timeout used to control incremental search. 18 * @type {?number} 19 * @private 20 */ 21 this.timeout_ = null; 22 23 /** 24 * Input box where the query is entered. 25 * @type {HTMLInputElement} 26 * @private 27 */ 28 this.input_ = null; 29 }; 30 31 /** 32 * Enumeration of event types dispatched from the search box. 33 * @enum {string} 34 */ 35 SearchBox.EventType = { 36 SEARCH: 'print_preview.SearchBox.SEARCH' 37 }; 38 39 /** 40 * CSS classes used by the search box. 41 * @enum {string} 42 * @private 43 */ 44 SearchBox.Classes_ = { 45 INPUT: 'search-box-input' 46 }; 47 48 /** 49 * Delay in milliseconds before dispatching a SEARCH event. 50 * @type {number} 51 * @const 52 * @private 53 */ 54 SearchBox.SEARCH_DELAY_ = 150; 55 56 SearchBox.prototype = { 57 __proto__: print_preview.Component.prototype, 58 59 /** @param {string} New query to set the search box's query to. */ 60 setQuery: function(query) { 61 query = query || ''; 62 this.input_.value = query.trim(); 63 }, 64 65 /** Sets the input element of the search box in focus. */ 66 focus: function() { 67 this.input_.focus(); 68 }, 69 70 /** @override */ 71 enterDocument: function() { 72 print_preview.Component.prototype.enterDocument.call(this); 73 this.tracker.add(this.input_, 'keydown', this.onInputKeyDown_.bind(this)); 74 }, 75 76 /** @override */ 77 exitDocument: function() { 78 print_preview.Component.prototype.exitDocument.call(this); 79 this.input_ = null; 80 }, 81 82 /** @override */ 83 decorateInternal: function() { 84 this.input_ = this.getElement().getElementsByClassName( 85 SearchBox.Classes_.INPUT)[0]; 86 }, 87 88 /** 89 * @return {string} The current query of the search box. 90 * @private 91 */ 92 getQuery_: function() { 93 return this.input_.value.trim(); 94 }, 95 96 /** 97 * Dispatches a SEARCH event. 98 * @private 99 */ 100 dispatchSearchEvent_: function() { 101 this.timeout_ = null; 102 var searchEvent = new cr.Event(SearchBox.EventType.SEARCH); 103 searchEvent.query = this.getQuery_(); 104 this.dispatchEvent(searchEvent); 105 }, 106 107 /** 108 * Called when the input element's value changes. Dispatches a search event. 109 * @private 110 */ 111 onInputKeyDown_: function() { 112 if (this.timeout_) { 113 clearTimeout(this.timeout_); 114 } 115 this.timeout_ = setTimeout( 116 this.dispatchSearchEvent_.bind(this), SearchBox.SEARCH_DELAY_); 117 } 118 }; 119 120 // Export 121 return { 122 SearchBox: SearchBox 123 }; 124}); 125