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_ = assertInstanceof(this.getChildElement('.search-box-input'),
  70           HTMLInputElement);
  71       this.input_.setAttribute('placeholder', this.searchBoxPlaceholderText_);
  72     },
  73
  74     /** @override */
  75     enterDocument: function() {
  76       print_preview.Component.prototype.enterDocument.call(this);
  77       this.tracker.add(assert(this.input_), 'input',
  78                        this.onInputInput_.bind(this));
  79     },
  80
  81     /** @override */
  82     exitDocument: function() {
  83       print_preview.Component.prototype.exitDocument.call(this);
  84       this.input_ = null;
  85     },
  86
  87     /**
  88      * @return {string} The current query of the search box.
  89      * @private
  90      */
  91     getQuery_: function() {
  92       return this.input_.value.trim();
  93     },
  94
  95     /**
  96      * Dispatches a SEARCH event.
  97      * @private
  98      */
  99     dispatchSearchEvent_: function() {
 100       this.timeout_ = null;
 101       var searchEvent = new Event(SearchBox.EventType.SEARCH);
 102       var query = this.getQuery_();
 103       searchEvent.query = query;
 104       if (query) {
 105         // Generate regexp-safe query by escaping metacharacters.
 106         var safeQuery = query.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 107         searchEvent.queryRegExp = new RegExp('(' + safeQuery + ')', 'ig');
 108       } else {
 109         searchEvent.queryRegExp = null;
 110       }
 111       this.dispatchEvent(searchEvent);
 112     },
 113
 114     /**
 115      * Called when the input element's value changes. Dispatches a search event.
 116      * @private
 117      */
 118     onInputInput_: function() {
 119       if (this.timeout_)
 120         clearTimeout(this.timeout_);
 121       this.timeout_ = setTimeout(
 122           this.dispatchSearchEvent_.bind(this), SearchBox.SEARCH_DELAY_);
 123     }
 124   };
 125
 126   // Export
 127   return {
 128     SearchBox: SearchBox
 129   };
 130 });