Skip to content

Commit

Permalink
Move UI methods of FileManager to FileManagerUI.
Browse files Browse the repository at this point in the history 
The following method handles the beahvior of UI, and can be done FileManagerUI.

 * refocus()
 * onExternalLinkClick_()
 * taskMenuButton.showMenu() (inline function)

Also the CL removes the function no longer needed.

 * ensureDirectoryTreeItemNotBehindPreviewPanel_()

BUG=267281
TEST=None

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

Cr-Commit-Position: refs/heads/master@{#304180}
  • Loading branch information
@hirono-chromium
hirono-chromium authored and Commit bot committed Nov 14, 2014
1 parent 8a5e7e3 commit 7641316
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 95 deletions.
92 changes: 0 additions & 92 deletions ui/file_manager/file_manager/foreground/js/file_manager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -582,10 +582,6 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
this.commandHandler,
this.selectionHandler_);

this.ui_.directoryTree.addEventListener('change', function() {
this.ensureDirectoryTreeItemNotBehindPreviewPanel_();
}.bind(this));

var stateChangeHandler =
this.onPreferencesChanged_.bind(this);
chrome.fileManagerPrivate.onPreferencesChanged.addListener(
Expand All @@ -598,17 +594,6 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
driveConnectionChangedHandler);
driveConnectionChangedHandler();

// Set the initial focus.
this.refocus();
// Set it as a fallback when there is no focus.
this.document_.addEventListener('focusout', function(e) {
setTimeout(function() {
// When there is no focus, the active element is the <body>.
if (this.document_.activeElement == this.document_.body)
this.refocus();
}.bind(this), 0);
}.bind(this));

this.initDataTransferOperations_();

this.selectionHandler_.onFileSelectionChanged();
Expand All @@ -617,43 +602,6 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
callback();
};

/**
* If |item| in the directory tree is behind the preview panel, scrolls up the
* parent view and make the item visible. This should be called when:
* - the selected item is changed in the directory tree.
* - the visibility of the the preview panel is changed.
*
* @private
*/
FileManager.prototype.ensureDirectoryTreeItemNotBehindPreviewPanel_ =
function() {
var selectedSubTree = this.ui_.directoryTree.selectedItem;
if (!selectedSubTree)
return;
var item = selectedSubTree.rowElement;
var parentView = this.ui_.directoryTree;

var itemRect = item.getBoundingClientRect();
if (!itemRect)
return;

var listRect = parentView.getBoundingClientRect();
if (!listRect)
return;

var previewPanel = this.dialogDom_.querySelector('.preview-panel');
var previewPanelRect = previewPanel.getBoundingClientRect();
var panelHeight = previewPanelRect ? previewPanelRect.height : 0;

var itemBottom = itemRect.bottom;
var listBottom = listRect.bottom - panelHeight;

if (itemBottom > listBottom) {
var scrollOffset = itemBottom - listBottom;
parentView.scrollTop += scrollOffset;
}
};

/**
* @private
*/
Expand Down Expand Up @@ -1002,8 +950,6 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
this.volumeManager_));

// Handle document event.
this.dialogDom_.addEventListener('click',
this.onExternalLinkClick_.bind(this));
this.document_.addEventListener('keydown', this.onKeyDown_.bind(this));
this.document_.addEventListener('keyup', this.onKeyUp_.bind(this));

Expand All @@ -1029,12 +975,6 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
(queryRequiredElement(this.dialogDom_,
'#gear-menu-drive-hosted-settings'));

this.ui_.taskMenuButton.showMenu = function(shouldSetFocus) {
// Prevent the empty menu from opening.
if (!this.menu.length)
return;
cr.ui.ComboButton.prototype.showMenu.call(this, shouldSetFocus);
};
this.ui_.taskMenuButton.addEventListener('select',
this.onTaskItemClicked_.bind(this));

Expand Down Expand Up @@ -1247,22 +1187,6 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
}
};

FileManager.prototype.refocus = function() {
var targetElement;
if (this.dialogType == DialogType.SELECT_SAVEAS_FILE)
targetElement = this.ui_.dialogFooter.filenameInput;
else
targetElement = this.ui.listContainer.currentList;

// Hack: if the tabIndex is disabled, we can assume a modal dialog is
// shown. Focus to a button on the dialog instead.
if (!targetElement.hasAttribute('tabIndex') || targetElement.tabIndex == -1)
targetElement = document.querySelector('button:not([tabIndex="-1"])');

if (targetElement)
targetElement.focus();
};

/**
* File list focus handler. Used to select the top most element on the list
* if nothing was selected.
Expand Down Expand Up @@ -1661,22 +1585,6 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
return this.isOnDrive() && this.isSecretGearMenuShown_;
};

/**
* Overrides default handling for clicks on hyperlinks.
* In a packaged apps links with targer='_blank' open in a new tab by
* default, other links do not open at all.
*
* @param {Event} event Click event.
* @private
*/
FileManager.prototype.onExternalLinkClick_ = function(event) {
if (event.target.tagName != 'A' || !event.target.href)
return;

if (this.dialogType != DialogType.FULL_PAGE)
this.ui_.dialogFooter.cancelButton.click();
};

/**
* Task combobox handler.
*
Expand Down
61 changes: 58 additions & 3 deletions ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,12 @@ function FileManagerUI(element, launchParam) {
*/
this.taskMenuButton = FileManagerUI.queryDecoratedElement_(
'#tasks', cr.ui.ComboButton);
this.taskMenuButton.showMenu = function(shouldSetFocus) {
// Prevent the empty menu from opening.
if (!this.menu.length)
return;
cr.ui.ComboButton.prototype.showMenu.call(this, shouldSetFocus);
};

/**
* Dialog footer.
Expand All @@ -189,12 +195,11 @@ function FileManagerUI(element, launchParam) {
chrome.runtime.getManifest().name;
this.element_.setAttribute('type', this.dialogType_);

// Prevent opening an URL by dropping it onto the page.
// Modify UI default behavior.
this.element_.addEventListener('click', this.onExternalLinkClick_.bind(this));
this.element_.addEventListener('drop', function(e) {
e.preventDefault();
});

// Suppresses the default context menu.
if (util.runningInBrowser()) {
this.element_.addEventListener('contextmenu', function(e) {
e.preventDefault();
Expand Down Expand Up @@ -274,6 +279,10 @@ FileManagerUI.prototype.initAdditionalUI = function(

// Add handlers.
document.defaultView.addEventListener('resize', this.relayout.bind(this));
document.addEventListener('focusout', this.onFocusOut_.bind(this));

// Set the initial focus.
this.onFocusOut_();
};

/**
Expand Down Expand Up @@ -340,6 +349,22 @@ FileManagerUI.prototype.setCurrentListType = function(listType) {
this.relayout();
};

/**
* Overrides default handling for clicks on hyperlinks.
* In a packaged apps links with targer='_blank' open in a new tab by
* default, other links do not open at all.
*
* @param {!Event} event Click event.
* @private
*/
FileManagerUI.prototype.onExternalLinkClick_ = function(event) {
if (event.target.tagName != 'A' || !event.target.href)
return;

if (this.dialogType_ != DialogType.FULL_PAGE)
this.dialogFooter.cancelButton.click();
};

/**
* Invoked while the drag is being performed on the list or the grid.
* Note: this method may be called multiple times before onDragEnd_().
Expand Down Expand Up @@ -376,6 +401,36 @@ FileManagerUI.prototype.onPreviewPanelVisibilityChange_ = function() {
this.listContainer.grid.setBottomMarginForPanel(panelHeight);
};

/**
* Re-focuses an element.
* @private
*/
FileManagerUI.prototype.onFocusOut_ = function() {
setTimeout(function() {
// When there is no focus, the active element is the <body>
if (document.activeElement !== document.body)
return;

var targetElement;
if (this.dialogType_ == DialogType.SELECT_SAVEAS_FILE) {
targetElement = this.dialogFooter.filenameInput;
} else if (this.listContainer.currentListType !=
ListContainer.ListType.UNINITIALIZED) {
targetElement = this.listContainer.currentList;
} else {
return;
}

// Hack: if the tabIndex is disabled, we can assume a modal dialog is
// shown. Focus to a button on the dialog instead.
if (!targetElement.hasAttribute('tabIndex') || targetElement.tabIndex == -1)
targetElement = document.querySelector('button:not([tabIndex="-1"])');

if (targetElement)
targetElement.focus();
}.bind(this), 0);
};

/**
* Decorates the given splitter element.
* @param {!HTMLElement} splitterElement
Expand Down

0 comments on commit 7641316

Please sign in to comment.