My Files: Directory Navigation

tmp7
Dec 8

You can navigate into a directory by double-clicking the folder or pressing the Enter key on the selected file.

In the main.js of My Files, you can look for these parts depending on the action:

Double-Click

This function fires when you double-click a folder.

handleOpenDefault_(event) {
    if (this.namingController_.isRenamingInProgress()) {
        return false
    }
    const node = "touchedElement"in event ? event.touchedElement : event.srcElement;
    const listItem = this.ui_.listContainer.findListItemForNode(node);
    const selection = this.selectionHandler_.selection;
    if (!listItem || !listItem.selected || selection.totalCount !== 1) {
        return false
    }
    const trashEntries = selection.entries.filter(isTrashEntry$1);
    if (trashEntries.length > 0) {
        this.showFailedToOpenTrashItemDialog_(trashEntries);
        return false
    }
    if (this.selectionHandler_.isDlpBlocked()) {
        return false
    }
    const entry = selection.entries[0];
    if (entry && isDirectoryEntry(entry)) {
        this.directoryModel_.changeDirectoryEntry(entry);
        return false
    }
    return this.acceptSelection_()
}

You may be tempted to dispatch a dblclick event on the selected <li> element. But the element will not be available when it is out of the visible viewport.

Keyboard Navigation

This case handles opening a file and directory. There's also a Backspace case for navigating up the directory tree.

case "Enter":
  if (this.selectionHandler_.isDlpBlocked()) {
      break
  }
  const selection = this.selectionHandler_.selection;
  if (selection.totalCount === 1 && isDirectoryEntry(selection.entries[0]) && !isFolderDialogType(this.dialogType_) && !selection.entries.some(isTrashEntry$1)) {
      const item = this.ui_.listContainer.currentList.getListItemByIndex(selection.indexes[0]);
      if (item && !item.hasAttribute("renaming")) {
          event.preventDefault();
          this.directoryModel_.changeDirectoryEntry(selection.entries[0])
      }
      break
  }
  if (this.acceptSelection_()) {
      event.preventDefault()
  }
  break;

I use this part as a reference to customize directory navigation in the Open file dialog for the ChromeOS File Manager+ extension. Check out the blog post.

series_chromeos_js_files
Posted in:

Comments