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