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.updateProfileBadge();
 105   this.element_.querySelector('#app-name').innerText =
 106       chrome.runtime.getManifest().name;
 107
 108   // Initialize dialog type.
 109   this.initDialogType_();
 110
 111   // Pre-populate the static localized strings.
 112   i18nTemplate.process(this.element_.ownerDocument, loadTimeData);
 113 };
 114
 115 /**
 116  * Tweak the UI to become a particular kind of dialog, as determined by the
 117  * dialog type parameter passed to the constructor.
 118  *
 119  * @private
 120  */
 121 FileManagerUI.prototype.initDialogType_ = function() {
 122   // Obtain elements.
 123   var hasFooterPanel =
 124       this.dialogType_ == DialogType.SELECT_SAVEAS_FILE ||
 125       DialogType.isFolderDialog(this.dialogType_);
 126
 127   // If the footer panel exists, the buttons are placed there. Otherwise,
 128   // the buttons are on the preview panel.
 129   var parentPanelOfButtons = this.element_.ownerDocument.querySelector(
 130       !hasFooterPanel ? '.preview-panel' : '.dialog-footer');
 131   parentPanelOfButtons.classList.add('button-panel');
 132   this.fileTypeSelector = parentPanelOfButtons.querySelector('.file-type');
 133   this.okButton = parentPanelOfButtons.querySelector('.ok');
 134   this.cancelButton = parentPanelOfButtons.querySelector('.cancel');
 135
 136   // Set attributes.
 137   var okLabel = str('OPEN_LABEL');
 138
 139   switch (this.dialogType_) {
 140     case DialogType.SELECT_UPLOAD_FOLDER:
 141       okLabel = str('UPLOAD_LABEL');
 142       break;
 143
 144     case DialogType.SELECT_SAVEAS_FILE:
 145       okLabel = str('SAVE_LABEL');
 146       break;
 147
 148     case DialogType.SELECT_FOLDER:
 149     case DialogType.SELECT_OPEN_FILE:
 150     case DialogType.SELECT_OPEN_MULTI_FILE:
 151     case DialogType.FULL_PAGE:
 152       break;
 153
 154     default:
 155       throw new Error('Unknown dialog type: ' + this.dialogType);
 156   }
 157
 158   this.okButton.textContent = okLabel;
 159   this.element_.setAttribute('type', this.dialogType_);
 160 };
 161
 162 /**
 163  * Initialize the dialogs.
 164  */
 165 FileManagerUI.prototype.initDialogs = function() {
 166   // Initialize the dialog label.
 167   var dialogs = cr.ui.dialogs;
 168   dialogs.BaseDialog.OK_LABEL = str('OK_LABEL');
 169   dialogs.BaseDialog.CANCEL_LABEL = str('CANCEL_LABEL');
 170   var appState = window.appState || {};
 171
 172   // Create the dialog instances.
 173   this.errorDialog = new ErrorDialog(this.element_);
 174   this.alertDialog = new dialogs.AlertDialog(this.element_);
 175   this.confirmDialog = new dialogs.ConfirmDialog(this.element_);
 176   this.promptDialog = new dialogs.PromptDialog(this.element_);
 177   this.shareDialog = new ShareDialog(this.element_);
 178   this.defaultTaskPicker =
 179       new cr.filebrowser.DefaultActionDialog(this.element_);
 180   this.suggestAppsDialog = new SuggestAppsDialog(
 181       this.element_, appState.suggestAppsDialogState || {});
 182   this.conflictDialog = new ConflictDialog(this.element_);
 183 };
 184
 185 /**
 186  * Initialize here elements, which are expensive
 187  * or hidden in the beginning.
 188  */
 189 FileManagerUI.prototype.initAdditionalUI = function() {
 190   this.searchBox = new SearchBox(this.element_.querySelector('#search-box'));
 191 };
 192
 193 /**
 194  * Updates visibility and image of the profile badge.
 195  */
 196 FileManagerUI.prototype.updateProfileBadge = function() {
 197   if (this.dialogType_ !== DialogType.FULL_PAGE)
 198     return;
 199
 200   chrome.fileBrowserPrivate.getProfiles(function(profiles,
 201                                                  currentId,
 202                                                  displayedId) {
 203     var imageUri;
 204     if (currentId !== displayedId) {
 205       for (var i = 0; i < profiles.length; i++) {
 206         if (profiles[i].profileId === currentId) {
 207           imageUri = profiles[i].imageUri;
 208           break;
 209         }
 210       }
 211     }
 212     var profileBadge = this.element_.querySelector('#profile-badge');
 213     if (imageUri)
 214       profileBadge.setAttribute('src', imageUri);
 215     else
 216       profileBadge.removeAttribute('src');
 217   }.bind(this));
 218 };