src/ui/file_manager/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    * Multi-profile share dialog.
  61    * @type {MultiProfileShareDialog}
  62    */
  63   this.multiProfileShareDialog = null;
  64
  65   /**
  66    * Default task picker.
  67    * @type {DefaultActionDialog}
  68    */
  69   this.defaultTaskPicker = null;
  70
  71   /**
  72    * Suggest apps dialog.
  73    * @type {SuggestAppsDialog}
  74    */
  75   this.suggestAppsDialog = null;
  76
  77   /**
  78    * Conflict dialog.
  79    * @type {ConflictDialog}
  80    */
  81   this.conflictDialog = null;
  82
  83   /**
  84    * Search box.
  85    * @type {SearchBox}
  86    */
  87   this.searchBox = null;
  88
  89   /**
  90    * File type selector in the footer.
  91    * @type {HTMLElement}
  92    */
  93   this.fileTypeSelector = null;
  94
  95   /**
  96    * OK button in the footer.
  97    * @type {HTMLElement}
  98    */
  99   this.okButton = null;
 100
 101   /**
 102    * Cancel button in the footer.
 103    * @type {HTMLElement}
 104    */
 105   this.cancelButton = null;
 106
 107   Object.seal(this);
 108
 109   // Initialize the header.
 110   this.updateProfileBadge();
 111   this.element_.querySelector('#app-name').innerText =
 112       chrome.runtime.getManifest().name;
 113
 114   // Initialize dialog type.
 115   this.initDialogType_();
 116
 117   // Pre-populate the static localized strings.
 118   i18nTemplate.process(this.element_.ownerDocument, loadTimeData);
 119 };
 120
 121 /**
 122  * Tweak the UI to become a particular kind of dialog, as determined by the
 123  * dialog type parameter passed to the constructor.
 124  *
 125  * @private
 126  */
 127 FileManagerUI.prototype.initDialogType_ = function() {
 128   // Obtain elements.
 129   var hasFooterPanel =
 130       this.dialogType_ == DialogType.SELECT_SAVEAS_FILE;
 131
 132   // If the footer panel exists, the buttons are placed there. Otherwise,
 133   // the buttons are on the preview panel.
 134   var parentPanelOfButtons = this.element_.ownerDocument.querySelector(
 135       !hasFooterPanel ? '.preview-panel' : '.dialog-footer');
 136   parentPanelOfButtons.classList.add('button-panel');
 137   this.fileTypeSelector = parentPanelOfButtons.querySelector('.file-type');
 138   this.okButton = parentPanelOfButtons.querySelector('.ok');
 139   this.cancelButton = parentPanelOfButtons.querySelector('.cancel');
 140
 141   // Set attributes.
 142   var okLabel = str('OPEN_LABEL');
 143
 144   switch (this.dialogType_) {
 145     case DialogType.SELECT_UPLOAD_FOLDER:
 146       okLabel = str('UPLOAD_LABEL');
 147       break;
 148
 149     case DialogType.SELECT_SAVEAS_FILE:
 150       okLabel = str('SAVE_LABEL');
 151       break;
 152
 153     case DialogType.SELECT_FOLDER:
 154     case DialogType.SELECT_OPEN_FILE:
 155     case DialogType.SELECT_OPEN_MULTI_FILE:
 156     case DialogType.FULL_PAGE:
 157       break;
 158
 159     default:
 160       throw new Error('Unknown dialog type: ' + this.dialogType);
 161   }
 162
 163   this.okButton.textContent = okLabel;
 164   this.element_.setAttribute('type', this.dialogType_);
 165 };
 166
 167 /**
 168  * Initialize the dialogs.
 169  */
 170 FileManagerUI.prototype.initDialogs = function() {
 171   // Initialize the dialog label.
 172   var dialogs = cr.ui.dialogs;
 173   dialogs.BaseDialog.OK_LABEL = str('OK_LABEL');
 174   dialogs.BaseDialog.CANCEL_LABEL = str('CANCEL_LABEL');
 175   var appState = window.appState || {};
 176
 177   // Create the dialog instances.
 178   this.errorDialog = new ErrorDialog(this.element_);
 179   this.alertDialog = new dialogs.AlertDialog(this.element_);
 180   this.confirmDialog = new dialogs.ConfirmDialog(this.element_);
 181   this.promptDialog = new dialogs.PromptDialog(this.element_);
 182   this.shareDialog = new ShareDialog(this.element_);
 183   this.multiProfileShareDialog = new MultiProfileShareDialog(this.element_);
 184   this.defaultTaskPicker =
 185       new cr.filebrowser.DefaultActionDialog(this.element_);
 186   this.suggestAppsDialog = new SuggestAppsDialog(
 187       this.element_, appState.suggestAppsDialogState || {});
 188   this.conflictDialog = new ConflictDialog(this.element_);
 189 };
 190
 191 /**
 192  * Initialize here elements, which are expensive
 193  * or hidden in the beginning.
 194  */
 195 FileManagerUI.prototype.initAdditionalUI = function() {
 196   this.searchBox = new SearchBox(this.element_.querySelector('#search-box'));
 197 };
 198
 199 /**
 200  * Updates visibility and image of the profile badge.
 201  */
 202 FileManagerUI.prototype.updateProfileBadge = function() {
 203   if (this.dialogType_ !== DialogType.FULL_PAGE)
 204     return;
 205
 206   chrome.fileBrowserPrivate.getProfiles(function(profiles,
 207                                                  currentId,
 208                                                  displayedId) {
 209     var profileImage;
 210     if (currentId !== displayedId) {
 211       for (var i = 0; i < profiles.length; i++) {
 212         if (profiles[i].profileId === currentId) {
 213           profileImage = profiles[i].profileImage;
 214           break;
 215         }
 216       }
 217     }
 218     var profileBadge = this.element_.querySelector('#profile-badge');
 219     if (profileImage) {
 220       profileBadge.style.background =
 221           '-webkit-image-set(' +
 222           'url(' + profileImage.scale1xUrl + ') 1x,' +
 223           'url(' + profileImage.scale2xUrl + ') 2x) no-repeat center';
 224       profileBadge.hidden = false;
 225     } else {
 226       profileBadge.style.background = '';
 227       profileBadge.hidden = true;
 228     }
 229   }.bind(this));
 230 };