| Index: chrome/browser/resources/file_manager/js/ui/search_box.js
|
| diff --git a/chrome/browser/resources/file_manager/js/ui/search_box.js b/chrome/browser/resources/file_manager/js/ui/search_box.js
|
| deleted file mode 100644
|
| index edc638a5a688368626f25f20deed435f4f6c92e1..0000000000000000000000000000000000000000
|
| --- a/chrome/browser/resources/file_manager/js/ui/search_box.js
|
| +++ /dev/null
|
| @@ -1,202 +0,0 @@
|
| -// Copyright 2013 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.
|
| -
|
| -'use strict';
|
| -
|
| -/**
|
| - * Search box.
|
| - *
|
| - * @param {element} element Root element of the search box.
|
| - * @constructor
|
| - */
|
| -function SearchBox(element) {
|
| - /**
|
| - * Autocomplete List.
|
| - * @type {AutocompleteList}
|
| - */
|
| - this.autocompleteList = new SearchBox.AutocompleteList(element.ownerDocument);
|
| -
|
| - /**
|
| - * Root element of the search box.
|
| - * @type {HTMLElement}
|
| - */
|
| - this.element = element;
|
| -
|
| - /**
|
| - * Text input of the search box.
|
| - * @type {HTMLElement}
|
| - */
|
| - this.inputElement = element.querySelector('input');
|
| -
|
| - /**
|
| - * Clear button of the search box.
|
| - * @type {HTMLElement}
|
| - */
|
| - this.clearButton = element.querySelector('.clear');
|
| -
|
| - /**
|
| - * Text measure.
|
| - * @type {TextMeasure}
|
| - * @private
|
| - */
|
| - this.textMeasure_ = new TextMeasure(this.inputElement);
|
| -
|
| - Object.freeze(this);
|
| -
|
| - // Register events.
|
| - this.inputElement.addEventListener('input', this.updateStyles_.bind(this));
|
| - this.inputElement.addEventListener('keydown', this.onKeyDown_.bind(this));
|
| - this.inputElement.addEventListener('focus', this.onFocus_.bind(this));
|
| - this.inputElement.addEventListener('blur', this.onBlur_.bind(this));
|
| - element.querySelector('.icon').addEventListener(
|
| - 'click', this.onIconClick_.bind(this));
|
| - element.parentNode.appendChild(this.autocompleteList);
|
| -}
|
| -
|
| -/**
|
| - * Autocomplete list for search box.
|
| - * @param {HTMLDocument} document Document.
|
| - * @constructor
|
| - */
|
| -SearchBox.AutocompleteList = function(document) {
|
| - var self = cr.ui.AutocompleteList.call(this);
|
| - self.__proto__ = SearchBox.AutocompleteList.prototype;
|
| - self.id = 'autocomplete-list';
|
| - self.autoExpands = true;
|
| - self.itemConstructor = SearchBox.AutocompleteListItem_.bind(null, document);
|
| - self.addEventListener('mouseover', self.onMouseOver_.bind(self));
|
| - return self;
|
| -};
|
| -
|
| -SearchBox.AutocompleteList.prototype = {
|
| - __proto__: cr.ui.AutocompleteList.prototype
|
| -};
|
| -
|
| -/**
|
| - * Do nothing when a suggestion is selected.
|
| - * @override
|
| - */
|
| -SearchBox.AutocompleteList.prototype.handleSelectedSuggestion = function() {};
|
| -
|
| -/**
|
| - * Change the selection by a mouse over instead of just changing the
|
| - * color of moused over element with :hover in CSS. Here's why:
|
| - *
|
| - * 1) The user selects an item A with up/down keys (item A is highlighted)
|
| - * 2) Then the user moves the cursor to another item B
|
| - *
|
| - * If we just change the color of moused over element (item B), both
|
| - * the item A and B are highlighted. This is bad. We should change the
|
| - * selection so only the item B is highlighted.
|
| - *
|
| - * @param {Event} event Event.
|
| - * @private
|
| - */
|
| -SearchBox.AutocompleteList.prototype.onMouseOver_ = function(event) {
|
| - if (event.target.itemInfo)
|
| - this.selectedItem = event.target.itemInfo;
|
| -};
|
| -
|
| -/**
|
| - * ListItem element for autocomple.
|
| - *
|
| - * @param {HTMLDocument} document Document.
|
| - * @param {Object} item An object representing a suggestion.
|
| - * @constructor
|
| - * @private
|
| - */
|
| -SearchBox.AutocompleteListItem_ = function(document, item) {
|
| - var li = new cr.ui.ListItem();
|
| - li.itemInfo = item;
|
| -
|
| - var icon = document.createElement('div');
|
| - icon.className = 'detail-icon';
|
| -
|
| - var text = document.createElement('div');
|
| - text.className = 'detail-text';
|
| -
|
| - if (item.isHeaderItem) {
|
| - icon.setAttribute('search-icon');
|
| - text.innerHTML =
|
| - strf('SEARCH_DRIVE_HTML', util.htmlEscape(item.searchQuery));
|
| - } else {
|
| - var iconType = FileType.getIcon(item.entry);
|
| - icon.setAttribute('file-type-icon', iconType);
|
| - // highlightedBaseName is a piece of HTML with meta characters properly
|
| - // escaped. See the comment at fileBrowserPrivate.searchDriveMetadata().
|
| - text.innerHTML = item.highlightedBaseName;
|
| - }
|
| - li.appendChild(icon);
|
| - li.appendChild(text);
|
| - return li;
|
| -};
|
| -
|
| -/**
|
| - * Updates the size related style.
|
| - */
|
| -SearchBox.prototype.updateSizeRelatedStyle = function() {
|
| - // Hide the search box if there is not enough space.
|
| - this.element.classList.toggle(
|
| - 'too-short',
|
| - this.element.clientWidth < 100);
|
| -};
|
| -
|
| -/**
|
| - * Clears the search query.
|
| - */
|
| -SearchBox.prototype.clear = function() {
|
| - this.inputElement.value = '';
|
| - this.updateStyles_();
|
| -};
|
| -
|
| -/**
|
| - * Handles a focus event of the search box.
|
| - * @private
|
| - */
|
| -SearchBox.prototype.onFocus_ = function() {
|
| - this.element.classList.toggle('has-cursor', true);
|
| - this.inputElement.tabIndex = '99'; // See: go/filesapp-tabindex.
|
| - this.autocompleteList.attachToInput(this.inputElement);
|
| -};
|
| -
|
| -/**
|
| - * Handles a blur event of the search box.
|
| - * @private
|
| - */
|
| -SearchBox.prototype.onBlur_ = function() {
|
| - this.element.classList.toggle('has-cursor', false);
|
| - this.inputElement.tabIndex = '-1';
|
| - this.autocompleteList.detach();
|
| -};
|
| -
|
| -/**
|
| - * Handles a keydown event of the search box.
|
| - * @private
|
| - */
|
| -SearchBox.prototype.onKeyDown_ = function() {
|
| - // Handle only Esc key now.
|
| - if (event.keyCode != 27 || this.inputElement.value)
|
| - return;
|
| - this.inputElement.blur();
|
| -};
|
| -
|
| -/**
|
| - * Handles a click event of the search icon.
|
| - * @private
|
| - */
|
| -SearchBox.prototype.onIconClick_ = function() {
|
| - this.inputElement.focus();
|
| -};
|
| -
|
| -/**
|
| - * Updates styles of the search box.
|
| - * @private
|
| - */
|
| -SearchBox.prototype.updateStyles_ = function() {
|
| - this.element.classList.toggle('has-text',
|
| - !!this.inputElement.value);
|
| - var width = this.textMeasure_.getWidth(this.inputElement.value) +
|
| - 16 /* Extra space to allow leeway. */;
|
| - this.inputElement.style.width = width + 'px';
|
| -};
|
|
|