src/chrome/browser/resources/file_manager/foreground/js/ui/file_manager_ui.js

   1 // Copyright 2013 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 'use strict';
   6
   7 /**
   8  * The root of the file manager's view managing the DOM of Files.app.
   9  *
  10  * @param {HTMLElement} element Top level element of Files.app.
  11  * @param {DialogType} dialogType Dialog type.
  12  * @constructor.
  13  */
  14 var FileManagerUI = function(element, dialogType) {
  15   /**
  16    * Top level element of Files.app.
  17    * @type {HTMLElement}
  18    * @private
  19    */
  20   this.element_ = element;
  21
  22   /**
  23    * Dialog type.
  24    * @type {DialogType}
  25    * @private
  26    */
  27   this.dialogType_ = dialogType;
  28
  29   /**
  30    * Error dialog.
  31    * @type {ErrorDialog}
  32    */
  33   this.errorDialog = null;
  34
  35   /**
  36    * Alert dialog.
  37    * @type {cr.ui.dialogs.AlertDialog}
  38    */
  39   this.alertDialog = null;
  40
  41   /**
  42    * Confirm dialog.
  43    * @type {cr.ui.dialogs.ConfirmDialog}
  44    */
  45   this.confirmDialog = null;
  46
  47   /**
  48    * Prompt dialog.
  49    * @type {cr.ui.dialogs.PromptDialog}
  50    */
  51   this.promptDialog = null;
  52
  53   /**
  54    * Share dialog.
  55    * @type {ShareDialog}
  56    */
  57   this.shareDialog = null;
  58
  59   /**
  60    * Default task picker.
  61    * @type {DefaultActionDialog}
  62    */
  63   this.defaultTaskPicker = null;
  64
  65   /**
  66    * Suggest apps dialog.
  67    * @type {SuggestAppsDialog}
  68    */
  69   this.suggestAppsDialog = null;
  70
  71   /**
  72    * Conflict dialog.
  73    * @type {ConflictDialog}
  74    */
  75   this.conflictDialog = null;
  76
  77   /**
  78    * Search box.
  79    * @type {SearchBox}
  80    */
  81   this.searchBox = null;
  82
  83   /**
  84    * File type selector in the footer.
  85    * @type {HTMLElement}
  86    */
  87   this.fileTypeSelector = null;
  88
  89   /**
  90    * OK button in the footer.
  91    * @type {HTMLElement}
  92    */
  93   this.okButton = null;
  94
  95   /**
  96    * Cancel button in the footer.
  97    * @type {HTMLElement}
  98    */
  99   this.cancelButton = null;
 100
 101   Object.seal(this);
 102
 103   // Initialize the header.
 104   this.element_.querySelector('#app-name').innerText =
 105       chrome.runtime.getManifest().name;
 106
 107   // Initialize dialog type.
 108   this.initDialogType_();
 109
 110   // Pre-populate the static localized strings.
 111   i18nTemplate.process(this.element_.ownerDocument, loadTimeData);
 112 };
 113
 114 /**
 115  * Tweak the UI to become a particular kind of dialog, as determined by the
 116  * dialog type parameter passed to the constructor.
 117  *
 118  * @private
 119  */
 120 FileManagerUI.prototype.initDialogType_ = function() {
 121   // Obtain elements.
 122   var hasFooterPanel =
 123       this.dialogType_ == DialogType.SELECT_SAVEAS_FILE ||
 124       this.dialogType_ == DialogType.SELECT_FOLDER;
 125
 126   // If the footer panel exists, the buttons are placed there. Otherwise,
 127   // the buttons are on the preview panel.
 128   var parentPanelOfButtons = this.element_.ownerDocument.querySelector(
 129       !hasFooterPanel ? '.preview-panel' : '.dialog-footer');
 130   parentPanelOfButtons.classList.add('button-panel');
 131   this.fileTypeSelector = parentPanelOfButtons.querySelector('.file-type');
 132   this.okButton = parentPanelOfButtons.querySelector('.ok');
 133   this.cancelButton = parentPanelOfButtons.querySelector('.cancel');
 134
 135   // Set attributes.
 136   var defaultTitle;
 137   var okLabel = str('OPEN_LABEL');
 138
 139   switch (this.dialogType_) {
 140     case DialogType.SELECT_FOLDER:
 141       defaultTitle = str('SELECT_FOLDER_TITLE');
 142       break;
 143
 144     case DialogType.SELECT_UPLOAD_FOLDER:
 145       defaultTitle = str('SELECT_UPLOAD_FOLDER_TITLE');
 146       okLabel = str('UPLOAD_LABEL');
 147       break;
 148
 149     case DialogType.SELECT_OPEN_FILE:
 150       defaultTitle = str('SELECT_OPEN_FILE_TITLE');
 151       break;
 152
 153     case DialogType.SELECT_OPEN_MULTI_FILE:
 154       defaultTitle = str('SELECT_OPEN_MULTI_FILE_TITLE');
 155       break;
 156
 157     case DialogType.SELECT_SAVEAS_FILE:
 158       defaultTitle = str('SELECT_SAVEAS_FILE_TITLE');
 159       okLabel = str('SAVE_LABEL');
 160       break;
 161
 162     case DialogType.FULL_PAGE:
 163       break;
 164
 165     default:
 166       throw new Error('Unknown dialog type: ' + this.dialogType);
 167   }
 168
 169   this.okButton.textContent = okLabel;
 170   this.element_.setAttribute('type', this.dialogType_);
 171 };
 172
 173 /**
 174  * Initialize the dialogs.
 175  */
 176 FileManagerUI.prototype.initDialogs = function() {
 177   // Initialize the dialog label.
 178   var dialogs = cr.ui.dialogs;
 179   dialogs.BaseDialog.OK_LABEL = str('OK_LABEL');
 180   dialogs.BaseDialog.CANCEL_LABEL = str('CANCEL_LABEL');
 181   var appState = window.appState || {};
 182
 183   // Create the dialog instances.
 184   this.errorDialog = new ErrorDialog(this.element_);
 185   this.alertDialog = new dialogs.AlertDialog(this.element_);
 186   this.confirmDialog = new dialogs.ConfirmDialog(this.element_);
 187   this.promptDialog = new dialogs.PromptDialog(this.element_);
 188   this.shareDialog = new ShareDialog(this.element_);
 189   this.defaultTaskPicker =
 190       new cr.filebrowser.DefaultActionDialog(this.element_);
 191   this.suggestAppsDialog = new SuggestAppsDialog(
 192       this.element_, appState.suggestAppsDialogState || {});
 193   this.conflictDialog = new ConflictDialog(this.element_);
 194 };
 195
 196 /**
 197  * Initialize here elements, which are expensive
 198  * or hidden in the beginning.
 199  */
 200 FileManagerUI.prototype.initAdditionalUI = function() {
 201   this.searchBox = new SearchBox(this.element_.querySelector('#search-box'));
 202 };