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

   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
   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    * @param {string} searchBoxPlaceholderText Search box placeholder text.
  11    * @constructor
  12    * @extends {print_preview.Component}
  13    */
  14   function SearchBox(searchBoxPlaceholderText) {
  15     print_preview.Component.call(this);
  16
  17     /**
  18      * Search box placeholder text.
  19      * @private {string}
  20      */
  21     this.searchBoxPlaceholderText_ = searchBoxPlaceholderText;
  22
  23     /**
  24      * Timeout used to control incremental search.
  25      * @private {?number}
  26      */
  27      this.timeout_ = null;
  28
  29     /**
  30      * Input box where the query is entered.
  31      * @private {HTMLInputElement}
  32      */
  33     this.input_ = null;
  34   };
  35
  36   /**
  37    * Enumeration of event types dispatched from the search box.
  38    * @enum {string}
  39    */
  40   SearchBox.EventType = {
  41     SEARCH: 'print_preview.SearchBox.SEARCH'
  42   };
  43
  44   /**
  45    * Delay in milliseconds before dispatching a SEARCH event.
  46    * @private {number}
  47    * @const
  48    */
  49   SearchBox.SEARCH_DELAY_ = 150;
  50
  51   SearchBox.prototype = {
  52     __proto__: print_preview.Component.prototype,
  53
  54     /** @param {string} query New query to set the search box's query to. */
  55     setQuery: function(query) {
  56       query = query || '';
  57       this.input_.value = query.trim();
  58     },
  59
  60     /** Sets the input element of the search box in focus. */
  61     focus: function() {
  62       this.input_.focus();
  63     },
  64
  65     /** @override */
  66     createDom: function() {
  67       this.setElementInternal(this.cloneTemplateInternal(
  68           'search-box-template'));
  69       this.input_ = this.getChildElement('.search-box-input');
  70       this.input_.setAttribute('placeholder', this.searchBoxPlaceholderText_);
  71     },
  72
  73     /** @override */
  74     enterDocument: function() {
  75       print_preview.Component.prototype.enterDocument.call(this);
  76       this.tracker.add(this.input_, 'input', this.onInputInput_.bind(this));
  77     },
  78
  79     /** @override */
  80     exitDocument: function() {
  81       print_preview.Component.prototype.exitDocument.call(this);
  82       this.input_ = null;
  83     },
  84
  85     /**
  86      * @return {string} The current query of the search box.
  87      * @private
  88      */
  89     getQuery_: function() {
  90       return this.input_.value.trim();
  91     },
  92
  93     /**
  94      * Dispatches a SEARCH event.
  95      * @private
  96      */
  97     dispatchSearchEvent_: function() {
  98       this.timeout_ = null;
  99       var searchEvent = new Event(SearchBox.EventType.SEARCH);
 100       var query = this.getQuery_();
 101       searchEvent.query = query;
 102       if (query) {
 103         // Generate regexp-safe query by escaping metacharacters.
 104         var safeQuery = query.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 105         searchEvent.queryRegExp = new RegExp('(' + safeQuery + ')', 'ig');
 106       } else {
 107         searchEvent.queryRegExp = null;
 108       }
 109       this.dispatchEvent(searchEvent);
 110     },
 111
 112     /**
 113      * Called when the input element's value changes. Dispatches a search event.
 114      * @private
 115      */
 116     onInputInput_: function() {
 117       if (this.timeout_)
 118         clearTimeout(this.timeout_);
 119       this.timeout_ = setTimeout(
 120           this.dispatchSearchEvent_.bind(this), SearchBox.SEARCH_DELAY_);
 121     }
 122   };
 123
 124   // Export
 125   return {
 126     SearchBox: SearchBox
 127   };
 128 });