Index: chrome/browser/resources/shared/js/cr/ui/autocomplete_list.js |
=================================================================== |
--- chrome/browser/resources/shared/js/cr/ui/autocomplete_list.js (revision 177292) |
+++ chrome/browser/resources/shared/js/cr/ui/autocomplete_list.js (working copy) |
@@ -1,241 +0,0 @@ |
-// Copyright (c) 2012 The Chromium Authors. All rights reserved. |
-// Use of this source code is governed by a BSD-style license that can be |
-// found in the LICENSE file. |
- |
-cr.define('cr.ui', function() { |
- /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel; |
- /** @const */ var List = cr.ui.List; |
- /** @const */ var ListItem = cr.ui.ListItem; |
- |
- /** |
- * Creates a new autocomplete list item. |
- * @param {Object} pageInfo The page this item represents. |
- * @constructor |
- * @extends {cr.ui.ListItem} |
- */ |
- function AutocompleteListItem(pageInfo) { |
- var el = cr.doc.createElement('div'); |
- el.pageInfo_ = pageInfo; |
- AutocompleteListItem.decorate(el); |
- return el; |
- } |
- |
- /** |
- * Decorates an element as an autocomplete list item. |
- * @param {!HTMLElement} el The element to decorate. |
- */ |
- AutocompleteListItem.decorate = function(el) { |
- el.__proto__ = AutocompleteListItem.prototype; |
- el.decorate(); |
- }; |
- |
- AutocompleteListItem.prototype = { |
- __proto__: ListItem.prototype, |
- |
- /** @override */ |
- decorate: function() { |
- ListItem.prototype.decorate.call(this); |
- |
- var title = this.pageInfo_['title']; |
- var url = this.pageInfo_['displayURL']; |
- var titleEl = this.ownerDocument.createElement('span'); |
- titleEl.className = 'title'; |
- titleEl.textContent = title || url; |
- this.appendChild(titleEl); |
- |
- if (title && title.length > 0 && url != title) { |
- var separatorEl = this.ownerDocument.createTextNode(' - '); |
- this.appendChild(separatorEl); |
- |
- var urlEl = this.ownerDocument.createElement('span'); |
- urlEl.className = 'url'; |
- urlEl.textContent = url; |
- this.appendChild(urlEl); |
- } |
- }, |
- }; |
- |
- /** |
- * Creates a new autocomplete list popup. |
- * @constructor |
- * @extends {cr.ui.List} |
- */ |
- var AutocompleteList = cr.ui.define('list'); |
- |
- AutocompleteList.prototype = { |
- __proto__: List.prototype, |
- |
- /** |
- * The text field the autocomplete popup is currently attached to, if any. |
- * @type {HTMLElement} |
- * @private |
- */ |
- targetInput_: null, |
- |
- /** |
- * Keydown event listener to attach to a text field. |
- * @type {Function} |
- * @private |
- */ |
- textFieldKeyHandler_: null, |
- |
- /** |
- * Input event listener to attach to a text field. |
- * @type {Function} |
- * @private |
- */ |
- textFieldInputHandler_: null, |
- |
- /** |
- * A function to call when new suggestions are needed. |
- * @type {Function} |
- * @private |
- */ |
- suggestionUpdateRequestCallback_: null, |
- |
- /** @override */ |
- decorate: function() { |
- List.prototype.decorate.call(this); |
- this.classList.add('autocomplete-suggestions'); |
- this.selectionModel = new cr.ui.ListSingleSelectionModel; |
- |
- this.textFieldKeyHandler_ = this.handleAutocompleteKeydown_.bind(this); |
- var self = this; |
- this.textFieldInputHandler_ = function(e) { |
- if (self.suggestionUpdateRequestCallback_) |
- self.suggestionUpdateRequestCallback_(self.targetInput_.value); |
- }; |
- this.addEventListener('change', function(e) { |
- var input = self.targetInput; |
- if (!input || !self.selectedItem) |
- return; |
- input.value = self.selectedItem['url']; |
- // Programatically change the value won't trigger a change event, but |
- // clients are likely to want to know when changes happen, so fire one. |
- var changeEvent = document.createEvent('Event'); |
- changeEvent.initEvent('change', true, true); |
- input.dispatchEvent(changeEvent); |
- }); |
- // Start hidden; adding suggestions will unhide. |
- this.hidden = true; |
- }, |
- |
- /** @override */ |
- createItem: function(pageInfo) { |
- return new AutocompleteListItem(pageInfo); |
- }, |
- |
- /** |
- * The suggestions to show. |
- * @type {Array} |
- */ |
- set suggestions(suggestions) { |
- this.dataModel = new ArrayDataModel(suggestions); |
- this.hidden = !this.targetInput_ || suggestions.length == 0; |
- }, |
- |
- /** |
- * A function to call when the attached input field's contents change. |
- * The function should take one string argument, which will be the text |
- * to autocomplete from. |
- * @type {Function} |
- */ |
- set suggestionUpdateRequestCallback(callback) { |
- this.suggestionUpdateRequestCallback_ = callback; |
- }, |
- |
- /** |
- * Attaches the popup to the given input element. Requires |
- * that the input be wrapped in a block-level container of the same width. |
- * @param {HTMLElement} input The input element to attach to. |
- */ |
- attachToInput: function(input) { |
- if (this.targetInput_ == input) |
- return; |
- |
- this.detach(); |
- this.targetInput_ = input; |
- this.style.width = input.getBoundingClientRect().width + 'px'; |
- this.hidden = false; // Necessary for positionPopupAroundElement to work. |
- cr.ui.positionPopupAroundElement(input, this, cr.ui.AnchorType.BELOW); |
- // Start hidden; when the data model gets results the list will show. |
- this.hidden = true; |
- |
- input.addEventListener('keydown', this.textFieldKeyHandler_, true); |
- input.addEventListener('input', this.textFieldInputHandler_); |
- }, |
- |
- /** |
- * Detaches the autocomplete popup from its current input element, if any. |
- */ |
- detach: function() { |
- var input = this.targetInput_; |
- if (!input) |
- return; |
- |
- input.removeEventListener('keydown', this.textFieldKeyHandler_, true); |
- input.removeEventListener('input', this.textFieldInputHandler_); |
- this.targetInput_ = null; |
- this.suggestions = []; |
- }, |
- |
- /** |
- * Makes sure that the suggestion list matches the width of the input it is. |
- * attached to. Should be called any time the input is resized. |
- */ |
- syncWidthToInput: function() { |
- var input = this.targetInput_; |
- if (input) |
- this.style.width = input.getBoundingClientRect().width + 'px'; |
- }, |
- |
- /** |
- * @return {HTMLElement} The text field the autocomplete popup is currently |
- * attached to, if any. |
- */ |
- get targetInput() { |
- return this.targetInput_; |
- }, |
- |
- /** |
- * Handles input field key events that should be interpreted as autocomplete |
- * commands. |
- * @param {Event} event The keydown event. |
- * @private |
- */ |
- handleAutocompleteKeydown_: function(event) { |
- if (this.hidden) |
- return; |
- var handled = false; |
- switch (event.keyIdentifier) { |
- case 'U+001B': // Esc |
- this.suggestions = []; |
- handled = true; |
- break; |
- case 'Enter': |
- // If the user has already selected an item using the arrow keys then |
- // presses Enter, clear the suggestions but also keep |
- // |handled| = false, so the input field can handle the event as well. |
- this.suggestions = []; |
- break; |
- case 'Up': |
- case 'Down': |
- var newEvent = new cr.Event(event.type); |
- newEvent.keyIdentifier = event.keyIdentifier; |
- this.dispatchEvent(newEvent); |
- handled = true; |
- break; |
- } |
- // Don't let arrow keys affect the text field, or bubble up to, e.g., |
- // an enclosing list item. |
- if (handled) { |
- event.preventDefault(); |
- event.stopPropagation(); |
- } |
- }, |
- }; |
- |
- return { |
- AutocompleteList: AutocompleteList |
- }; |
-}); |