src/chrome/browser/resources/print_preview/search/search_box.js

   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
   5 cr.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_, 'input', this.onInputInput_.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 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     onInputInput_: 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 });