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