ui/file_manager/file_manager/foreground/js/ui/dialog_footer.js

// Copyright 2014 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.

/**
 * 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, filenameInput) {
  /**
   * Dialog type.
   * @type {DialogType}
   * @const
   * @private
   */
  this.dialogType_ = dialogType;

  /**
   * OK button in the footer.
   * @const
   * @type {!HTMLButtonElement}
   */
  this.okButton = /** @type {!HTMLButtonElement} */
      (container.querySelector('.ok'));

  /**
   * Cancel button in the footer.
   * @const
   * @type {!HTMLButtonElement}
   */
  this.cancelButton = /** @type {!HTMLButtonElement} */
      (container.querySelector('.cancel'));

  /**
   * File type selector in the footer.
   * @const
   * @type {!HTMLSelectElement}
   */
  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);
}

DialogFooter.prototype = {
  /**
   * @return {number} Selected filter index.
   */
  get selectedFilterIndex() {
    return ~~this.fileTypeSelector.value;
  }
};

/**
 * Finds the dialog footer element for the dialog type.
 * @param {DialogType} dialogType Dialog type.
 * @param {!Document} document Document.
 * @return {!DialogFooter} Dialog footer created with the found element.
 */
DialogFooter.findDialogFooter = function(dialogType, document) {
  // If the footer panel exists, the buttons are placed there. Otherwise,
  // the buttons are on the preview panel.
  var hasFooterPanel = dialogType == DialogType.SELECT_SAVEAS_FILE;
  return new DialogFooter(
      dialogType,
      queryRequiredElement(
          document, hasFooterPanel ? '.dialog-footer' : '.preview-panel'),
      queryRequiredElement(document, '#filename-input-box input'));
};

/**
 * Obtains the label of OK button for the dialog type.
 * @param {DialogType} dialogType Dialog type.
 * @return {string} OK button label.
 * @private
 */
DialogFooter.getOKButtonLabel_ = function(dialogType) {
  switch (dialogType) {
    case DialogType.SELECT_UPLOAD_FOLDER:
      return str('UPLOAD_LABEL');

    case DialogType.SELECT_SAVEAS_FILE:
      return str('SAVE_LABEL');

    case DialogType.SELECT_FOLDER:
    case DialogType.SELECT_OPEN_FILE:
    case DialogType.SELECT_OPEN_MULTI_FILE:
    case DialogType.FULL_PAGE:
      return str('OPEN_LABEL');

    default:
      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;
  }
};