src/chrome/browser/resources/options/language_dictionary_overlay.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('options', function() {
   6   /** @const */ var DictionaryWordsList =
   7       options.dictionary_words.DictionaryWordsList;
   8   /** @const */ var Page = cr.ui.pageManager.Page;
   9   /** @const */ var PageManager = cr.ui.pageManager.PageManager;
  10
  11   /**
  12    * Adding and removing words in custom spelling dictionary.
  13    * @constructor
  14    * @extends {cr.ui.pageManager.Page}
  15    */
  16   function EditDictionaryOverlay() {
  17     Page.call(this, 'editDictionary',
  18               loadTimeData.getString('languageDictionaryOverlayPage'),
  19               'language-dictionary-overlay-page');
  20   }
  21
  22   cr.addSingletonGetter(EditDictionaryOverlay);
  23
  24   EditDictionaryOverlay.prototype = {
  25     __proto__: Page.prototype,
  26
  27     /**
  28      * A list of words in the dictionary.
  29      * @type {DictionaryWordsList}
  30      * @private
  31      */
  32     wordList_: null,
  33
  34     /**
  35      * The input field for searching for words in the dictionary.
  36      * @type {HTMLElement}
  37      * @private
  38      */
  39     searchField_: null,
  40
  41     /**
  42      * The paragraph of text that indicates that search returned no results.
  43      * @type {HTMLElement}
  44      * @private
  45      */
  46     noMatchesLabel_: null,
  47
  48     /** @override */
  49     initializePage: function() {
  50       Page.prototype.initializePage.call(this);
  51
  52       this.wordList_ = $('language-dictionary-overlay-word-list');
  53       DictionaryWordsList.decorate(this.wordList_);
  54       this.wordList_.onWordListChanged = function() {
  55         this.onWordListChanged_();
  56       }.bind(this);
  57
  58       this.searchField_ = $('language-dictionary-overlay-search-field');
  59       this.searchField_.onsearch = function(e) {
  60         this.wordList_.search(e.currentTarget.value);
  61       }.bind(this);
  62       this.searchField_.onkeydown = function(e) {
  63         // Don't propagate enter key events. Otherwise the default button will
  64         // activate.
  65         if (e.keyIdentifier == 'Enter')
  66           e.stopPropagation();
  67       };
  68
  69       this.noMatchesLabel_ = getRequiredElement(
  70           'language-dictionary-overlay-no-matches');
  71
  72       $('language-dictionary-overlay-done-button').onclick = function(e) {
  73         PageManager.closeOverlay();
  74       };
  75     },
  76
  77     /**
  78      * Refresh the dictionary words when the page is displayed.
  79      * @override
  80      */
  81     didShowPage: function() {
  82       chrome.send('refreshDictionaryWords');
  83     },
  84
  85     /**
  86      * Update the view based on the changes in the word list.
  87      * @private
  88      */
  89     onWordListChanged_: function() {
  90       if (this.searchField_.value.length > 0 && this.wordList_.empty) {
  91         this.noMatchesLabel_.hidden = false;
  92         this.wordList_.classList.add('no-search-matches');
  93       } else {
  94         this.noMatchesLabel_.hidden = true;
  95         this.wordList_.classList.remove('no-search-matches');
  96       }
  97     },
  98   };
  99
 100   EditDictionaryOverlay.setWordList = function(entries) {
 101     EditDictionaryOverlay.getInstance().wordList_.setWordList(entries);
 102   };
 103
 104   EditDictionaryOverlay.updateWords = function(add_words, remove_words) {
 105     EditDictionaryOverlay.getInstance().wordList_.addWords(add_words);
 106     EditDictionaryOverlay.getInstance().wordList_.removeWords(remove_words);
 107   };
 108
 109   EditDictionaryOverlay.getWordListForTesting = function() {
 110     return EditDictionaryOverlay.getInstance().wordList_;
 111   };
 112
 113   return {
 114     EditDictionaryOverlay: EditDictionaryOverlay
 115   };
 116 });