Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(7334)

Unified Diff: chrome/browser/resources/shared/js/cr/ui/autocomplete_list.js

Issue 11962043: Move webui resources from chrome\browser\resources\shared to ui\webui\resources. (Closed) Base URL: svn://chrome-svn/chrome/trunk/src/
Patch Set: Created 7 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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
- };
-});

Powered by Google App Engine
This is Rietveld 408576698