Skip to content

GitLab

T
tangled
Commit 1d36c98a authored by hirono's avatar hirono Committed by Commit bot
Browse files
Options

Files.app: Move fileNameInput element under the dialogFooter class. 

BUG=267281
TEST=None

Review URL: https://codereview.chromium.org/673573002

Cr-Commit-Position: refs/heads/master@{#300665}
parent 4159b371
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 85 deletions
ui/file_manager/file_manager/foreground/js/file_manager.js
View file @ 1d36c98a
......@@ -111,14 +111,14 @@ function FileManager() {
/**
* List of acceptable file types for open dialog.
* @type {Array.<Object>}
* @type {!Array.<Object>}
* @private
*/
this.fileTypes_ = [];
/**
* Startup parameters for this application.
* @type {Object}
* @type {?{includeAllFiles:boolean, action:string}}
* @private
*/
this.params_ = null;
......@@ -302,13 +302,6 @@ function FileManager() {
*/
this.renameInput_ = null;
/**
* The input element to specify file name.
* @type {HTMLInputElement}
* @private
*/
this.filenameInput_ = null;
/**
* The file table.
* @type {FileTable}
......@@ -562,27 +555,51 @@ function FileManager() {
FileManager.prototype = {
__proto__: cr.EventTarget.prototype,
/**
* @return {DirectoryModel}
*/
get directoryModel() {
return this.directoryModel_;
},
/**
* @return {DirectoryTree}
*/
get directoryTree() {
return this.directoryTree_;
},
/**
* @return {HTMLDocument}
*/
get document() {
return this.document_;
},
/**
* @return {FileTransferController}
*/
get fileTransferController() {
return this.fileTransferController_;
},
/**
* @return {FileOperationManager}
*/
get fileOperationManager() {
return this.fileOperationManager_;
},
/**
* @return {BackgroundWindow}
*/
get backgroundPage() {
return this.backgroundPage_;
},
/**
* @return {VolumeManagerWrapper}
*/
get volumeManager() {
return this.volumeManager_;
},
/**
* @return {FileManagerUI}
*/
get ui() {
return this.ui_;
}
......@@ -1277,9 +1294,6 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
// Cache nodes we'll be manipulating.
var dom = this.dialogDom_;
var filenameInput = queryRequiredElement(dom, '#filename-input-box input');
this.filenameInput_ = /** @type {HTMLInputElement} */ (filenameInput);
var taskItems = queryRequiredElement(dom, '#tasks');
this.taskItems_ = /** @type {HTMLButtonElement} */ (taskItems);
......@@ -1335,11 +1349,11 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
'blur', this.onRenameInputBlur_.bind(this));
// TODO(hirono): Rename the handler after creating the DialogFooter class.
this.filenameInput_.addEventListener(
this.ui_.dialogFooter.filenameInput.addEventListener(
'input', this.onFilenameInputInput_.bind(this));
this.filenameInput_.addEventListener(
this.ui_.dialogFooter.filenameInput.addEventListener(
'keydown', this.onFilenameInputKeyDown_.bind(this));
this.filenameInput_.addEventListener(
this.ui_.dialogFooter.filenameInput.addEventListener(
'focus', this.onFilenameInputFocus_.bind(this));
this.listContainer_ = /** @type {!HTMLDivElement} */
......@@ -1393,7 +1407,10 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
this.defaultActionMenuItem_.addEventListener('activate',
this.dispatchSelectionAction_.bind(this));
this.initFileTypeFilter_();
this.ui_.dialogFooter.initFileTypeFilter(
this.fileTypes_, this.params_.includeAllFiles);
this.ui_.dialogFooter.fileTypeSelector.addEventListener(
'change', this.updateFileTypeFilter_.bind(this));
util.addIsFocusedMethod();
......@@ -1604,7 +1621,7 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
FileManager.prototype.refocus = function() {
var targetElement;
if (this.dialogType == DialogType.SELECT_SAVEAS_FILE)
targetElement = this.filenameInput_;
targetElement = this.ui_.dialogFooter.filenameInput;
else
targetElement = this.currentList_;
......@@ -1756,63 +1773,6 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
}
};
/**
* Fills the file type list or hides it.
* @private
*/
FileManager.prototype.initFileTypeFilter_ = function() {
if (this.params_.includeAllFiles) {
var option = this.document_.createElement('option');
option.innerText = str('ALL_FILES_FILTER');
this.ui_.dialogFooter.fileTypeSelector.appendChild(option);
option.value = 0;
}
for (var i = 0; i !== this.fileTypes_.length; i++) {
var fileType = this.fileTypes_[i];
var option = this.document_.createElement('option');
var description = fileType.description;
if (!description) {
// See if all the extensions in the group have the same description.
for (var j = 0; j !== fileType.extensions.length; j++) {
var currentDescription = FileType.typeToString(
FileType.getTypeForName('.' + fileType.extensions[j]));
if (!description) // Set the first time.
description = currentDescription;
else if (description != currentDescription) {
// No single description, fall through to the extension list.
description = null;
break;
}
}
if (!description)
// Convert ['jpg', 'png'] to '*.jpg, *.png'.
description = fileType.extensions.map(function(s) {
return '*.' + s;
}).join(', ');
}
option.innerText = description;
option.value = i + 1;
if (fileType.selected)
option.selected = true;
this.ui_.dialogFooter.fileTypeSelector.appendChild(option);
}
var options = this.ui_.dialogFooter.fileTypeSelector.querySelectorAll(
'option');
if (options.length >= 2) {
// There is in fact no choice, show the selector.
this.ui_.dialogFooter.fileTypeSelector.hidden = false;
this.ui_.dialogFooter.fileTypeSelector.addEventListener('change',
this.updateFileTypeFilter_.bind(this));
}
};
/**
* Filters file according to the selected file type.
* @private
......@@ -1830,12 +1790,13 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
// In save dialog, update the destination name extension.
if (this.dialogType === DialogType.SELECT_SAVEAS_FILE) {
var current = this.filenameInput_.value;
var current = this.ui_.dialogFooter.filenameInput.value;
var newExt = this.fileTypes_[selectedIndex - 1].extensions[0];
if (newExt && !regexp.test(current)) {
var i = current.lastIndexOf('.');
if (i >= 0) {
this.filenameInput_.value = current.substr(0, i) + '.' + newExt;
this.ui_.dialogFooter.filenameInput.value =
current.substr(0, i) + '.' + newExt;
this.selectTargetNameInFilenameInput_();
}
}
......@@ -2145,7 +2106,7 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
this.directoryModel_.addEventListener('scan-completed', listener);
}
} else if (this.dialogType === DialogType.SELECT_SAVEAS_FILE) {
this.filenameInput_.value = opt_suggestedName || '';
this.ui_.dialogFooter.filenameInput.value = opt_suggestedName || '';
this.selectTargetNameInFilenameInput_();
}
};
......@@ -2510,7 +2471,7 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
* @private
*/
FileManager.prototype.selectTargetNameInFilenameInput_ = function() {
var input = this.filenameInput_;
var input = this.ui_.dialogFooter.filenameInput;
input.focus();
var selectionEnd = input.value.lastIndexOf('.');
if (selectionEnd == -1) {
......@@ -3044,7 +3005,7 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
* @private
*/
FileManager.prototype.onFilenameInputFocus_ = function(event) {
var input = this.filenameInput_;
var input = this.ui_.dialogFooter.filenameInput;
// On focus we want to select everything but the extension, but
// Chrome will select-all after the focus event completes. We
......@@ -3629,7 +3590,7 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
if (this.dialogType == DialogType.SELECT_SAVEAS_FILE) {
// Save-as doesn't require a valid selection from the list, since
// we're going to take the filename from the text input.
var filename = this.filenameInput_.value;
var filename = this.ui_.dialogFooter.filenameInput.value;
if (!filename)
throw new Error('Missing filename!');
......
ui/file_manager/file_manager/foreground/js/file_selection.js
View file @ 1d36c98a
......@@ -160,7 +160,7 @@ function FileSelectionHandler(fileManager) {
this.fileManager_ = fileManager;
// TODO(dgozman): create a shared object with most of UI elements.
this.okButton_ = fileManager.ui.dialogFooter.okButton;
this.filenameInput_ = fileManager.filenameInput_;
this.filenameInput_ = fileManager.ui.dialogFooter.filenameInput;
this.previewPanel_ = fileManager.previewPanel_;
this.taskItems_ = fileManager.taskItems_;
}
......
ui/file_manager/file_manager/foreground/js/ui/dialog_footer.js
View file @ 1d36c98a
......@@ -8,9 +8,10 @@
* Footer shown when the Files.app is opened as a file/folder selecting dialog.
* @param {DialogType} dialogType Dialog type.
* @param {!Element} container Container of the dialog footer.
* @param {!Element} filenameInput Filename input element.
* @constructor
*/
function DialogFooter(dialogType, container) {
function DialogFooter(dialogType, container, filenameInput) {
/**
* Dialog type.
* @type {DialogType}
......@@ -43,6 +44,12 @@ function DialogFooter(dialogType, container) {
this.fileTypeSelector = /** @type {!HTMLSelectElement} */
(container.querySelector('.file-type'));
/**
* @const
* @type {!Element}
*/
this.filenameInput = filenameInput;
// Initialize the element styles.
container.classList.add('button-panel');
this.okButton.textContent = DialogFooter.getOKButtonLabel_(dialogType);
......@@ -69,9 +76,9 @@ DialogFooter.findDialogFooter = function(dialogType, document) {
var hasFooterPanel = dialogType == DialogType.SELECT_SAVEAS_FILE;
return new DialogFooter(
dialogType,
/** @type {!Element} */
(document.querySelector(
hasFooterPanel ? '.dialog-footer' : '.preview-panel')));
queryRequiredElement(
document, hasFooterPanel ? '.dialog-footer' : '.preview-panel'),
queryRequiredElement(document, '#filename-input-box input'));
};
/**
......@@ -98,3 +105,61 @@ DialogFooter.getOKButtonLabel_ = function(dialogType) {
throw new Error('Unknown dialog type: ' + dialogType);
}
};
/**
* Fills the file type list or hides it.
* @param {!Array.<{extensions: Array.<string>, description: string}>} fileTypes
* List of file type.
* @param {boolean} includeAllFiles Whether the filter includes the 'all files'
* item or not.
*/
DialogFooter.prototype.initFileTypeFilter = function(
fileTypes, includeAllFiles) {
if (includeAllFiles) {
var option = document.createElement('option');
option.innerText = str('ALL_FILES_FILTER');
option.value = 0;
this.fileTypeSelector.appendChild(option);
}
for (var i = 0; i < fileTypes.length; i++) {
var fileType = fileTypes[i];
var option = document.createElement('option');
var description = fileType.description;
if (!description) {
// See if all the extensions in the group have the same description.
for (var j = 0; j !== fileType.extensions.length; j++) {
var currentDescription = FileType.typeToString(
FileType.getTypeForName('.' + fileType.extensions[j]));
if (!description) {
// Set the first time.
description = currentDescription;
} else if (description != currentDescription) {
// No single description, fall through to the extension list.
description = null;
break;
}
}
if (!description) {
// Convert ['jpg', 'png'] to '*.jpg, *.png'.
description = fileType.extensions.map(function(s) {
return '*.' + s;
}).join(', ');
}
}
option.innerText = description;
option.value = i + 1;
if (fileType.selected)
option.selected = true;
this.fileTypeSelector.appendChild(option);
}
var options = this.fileTypeSelector.querySelectorAll('option');
if (options.length >= 2) {
// There is in fact no choice, show the selector.
this.fileTypeSelector.hidden = false;
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment