OLD | NEW |
---|---|
1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * This class controls wires toolbar UI and selection model. When selection | 6 * This class controls wires toolbar UI and selection model. When selection |
7 * status is changed, this class changes the view of toolbar. If cancel | 7 * status is changed, this class changes the view of toolbar. If cancel |
8 * selection button is pressed, this class clears the selection. | 8 * selection button is pressed, this class clears the selection. |
9 * @param {!HTMLElement} cancelSelectionButton Button to cancel selection. | 9 * @param {!HTMLElement} toolbar Toolbar element which contains controls. |
10 * @param {!HTMLElement} cancelSelectionButtonWrapper Wapper for the button, | |
11 * which works as a spacer for the filesSelectionLabel. | |
12 * @param {!HTMLElement} filesSelectedLabel Label to show how many files are | |
13 * selected. | |
14 * @param {!HTMLElement} navigationList Navigation list on the left pane. The | 10 * @param {!HTMLElement} navigationList Navigation list on the left pane. The |
15 * position of silesSelectedLabel depends on the navitaion list's width. | 11 * position of silesSelectedLabel depends on the navitaion list's width. |
16 * @param {!FileSelectionHandler} selectionHandler | 12 * @param {!FileSelectionHandler} selectionHandler |
17 * @param {!cr.ui.ListSelectionModel|!cr.ui.ListSingleSelectionModel} | 13 * @param {!DirectoryModel} directoryModel |
18 * selectionModel | |
19 * @constructor | 14 * @constructor |
20 * @struct | 15 * @struct |
21 */ | 16 */ |
22 function ToolbarController(cancelSelectionButton, | 17 function ToolbarController(toolbar, |
23 cancelSelectionButtonWrapper, | |
24 filesSelectedLabel, | |
25 navigationList, | 18 navigationList, |
26 selectionHandler, | 19 selectionHandler, |
27 selectionModel) { | 20 directoryModel) { |
28 /** @private {!HTMLElement} */ | 21 /** @private {!HTMLElement} */ |
hirono
2015/02/23 09:48:37
nit: We would like to add @const for member variab
fukino
2015/02/23 11:18:50
Done.
| |
29 this.cancelSelectionButtonWrapper_ = cancelSelectionButtonWrapper; | 22 this.toolbar_ = toolbar; |
30 | 23 |
31 /** @private {!HTMLElement} */ | 24 /** @private {!HTMLElement} */ |
32 this.filesSelectedLabel_ = filesSelectedLabel; | 25 this.cancelSelectionButton_ = |
26 queryRequiredElement(this.toolbar_, '#cancel-selection-button'); | |
27 | |
28 /** @private {!HTMLElement} */ | |
29 this.cancelSelectionButtonWrapper_ = | |
30 queryRequiredElement(this.toolbar_, '#cancel-selection-button-wrapper'); | |
31 | |
32 /** @private {!HTMLElement} */ | |
33 this.filesSelectedLabel_ = | |
34 queryRequiredElement(this.toolbar_, '#files-selected-label'); | |
35 | |
36 /** @private {!HTMLElement} */ | |
37 this.deleteButton_ = queryRequiredElement(this.toolbar_, '#delete-button'); | |
38 | |
39 /** @private {!cr.ui.Command} */ | |
40 this.deleteCommand_ = assertInstanceof( | |
41 queryRequiredElement(assert(this.toolbar_.ownerDocument), '#delete'), | |
42 cr.ui.Command); | |
33 | 43 |
34 /** @private {!HTMLElement} */ | 44 /** @private {!HTMLElement} */ |
35 this.navigationList_ = navigationList; | 45 this.navigationList_ = navigationList; |
36 | 46 |
37 /** @private {!FileSelectionHandler} */ | 47 /** @private {!FileSelectionHandler} */ |
38 this.selectionHandler_ = selectionHandler; | 48 this.selectionHandler_ = selectionHandler; |
39 | 49 |
40 /** @private {!cr.ui.ListSelectionModel|!cr.ui.ListSingleSelectionModel} */ | 50 /** @private {!DirectoryModel} */ |
41 this.selectionModel_ = selectionModel; | 51 this.directoryModel_ = directoryModel; |
42 | 52 |
43 this.selectionHandler_.addEventListener( | 53 this.selectionHandler_.addEventListener( |
44 FileSelectionHandler.EventType.CHANGE, | 54 FileSelectionHandler.EventType.CHANGE, |
45 this.onSelectionChanged_.bind(this)); | 55 this.onSelectionChanged_.bind(this)); |
46 | 56 |
47 cancelSelectionButton.addEventListener( | 57 this.cancelSelectionButton_.addEventListener( |
48 'click', this.onCancelSelectionButtonClicked_.bind(this)); | 58 'click', this.onCancelSelectionButtonClicked_.bind(this)); |
49 | 59 |
60 this.deleteButton_.addEventListener( | |
61 'click', this.onDeleteButtonClicked_.bind(this)); | |
62 | |
50 this.navigationList_.addEventListener( | 63 this.navigationList_.addEventListener( |
51 'relayout', this.onNavigationListRelayout_.bind(this)); | 64 'relayout', this.onNavigationListRelayout_.bind(this)); |
52 } | 65 } |
53 | 66 |
54 /** | 67 /** |
55 * Handles selection's change event to update the UI. | 68 * Handles selection's change event to update the UI. |
56 * @private | 69 * @private |
57 */ | 70 */ |
58 ToolbarController.prototype.onSelectionChanged_ = function() { | 71 ToolbarController.prototype.onSelectionChanged_ = function() { |
59 var selection = this.selectionHandler_.selection; | 72 var selection = this.selectionHandler_.selection; |
60 | 73 |
61 // Update the label "x files selected." on the header. | 74 // Update the label "x files selected." on the header. |
62 if (selection.totalCount === 0) { | 75 if (selection.totalCount === 0) { |
63 this.filesSelectedLabel_.textContent = ''; | 76 this.filesSelectedLabel_.textContent = ''; |
64 } else { | 77 } else { |
65 var text; | 78 var text; |
66 if (selection.directoryCount == 0) | 79 if (selection.directoryCount == 0) |
67 text = strf('MANY_FILES_SELECTED', selection.fileCount); | 80 text = strf('MANY_FILES_SELECTED', selection.fileCount); |
68 else if (selection.fileCount == 0) | 81 else if (selection.fileCount == 0) |
69 text = strf('MANY_DIRECTORIES_SELECTED', selection.directoryCount); | 82 text = strf('MANY_DIRECTORIES_SELECTED', selection.directoryCount); |
70 else | 83 else |
71 text = strf('MANY_ENTRIES_SELECTED', selection.totalCount); | 84 text = strf('MANY_ENTRIES_SELECTED', selection.totalCount); |
72 this.filesSelectedLabel_.textContent = text; | 85 this.filesSelectedLabel_.textContent = text; |
73 } | 86 } |
74 | 87 |
88 // Update visibility of the delete button. | |
89 this.deleteButton_.hidden = | |
90 selection.totalCount === 0 || this.directoryModel_.isReadOnly(); | |
91 | |
75 // Set .selecting class to containing element to change the view accordingly. | 92 // Set .selecting class to containing element to change the view accordingly. |
76 // TODO(fukino): This code changes the state of body, not the toolbar, to | 93 // TODO(fukino): This code changes the state of body, not the toolbar, to |
77 // update the checkmark visibility on grid view. This should be moved to a | 94 // update the checkmark visibility on grid view. This should be moved to a |
78 // controller which controls whole app window. Or, both toolbar and FileGrid | 95 // controller which controls whole app window. Or, both toolbar and FileGrid |
79 // should listen to the FileSelectionHandler. | 96 // should listen to the FileSelectionHandler. |
80 this.filesSelectedLabel_.ownerDocument.body.classList.toggle( | 97 this.filesSelectedLabel_.ownerDocument.body.classList.toggle( |
81 'selecting', selection.totalCount > 0); | 98 'selecting', selection.totalCount > 0); |
82 } | 99 } |
83 | 100 |
84 /** | 101 /** |
85 * Handles click event for cancel button to change the selection state. | 102 * Handles click event for cancel button to change the selection state. |
86 * @private | 103 * @private |
87 */ | 104 */ |
88 ToolbarController.prototype.onCancelSelectionButtonClicked_ = function() { | 105 ToolbarController.prototype.onCancelSelectionButtonClicked_ = function() { |
89 this.selectionModel_.unselectAll(); | 106 this.directoryModel_.selectEntries([]); |
90 } | 107 } |
91 | 108 |
92 /** | 109 /** |
110 * Handles click event for delete button to execute the delete command. | |
111 * @private | |
112 */ | |
113 ToolbarController.prototype.onDeleteButtonClicked_ = function() { | |
114 this.deleteCommand_.execute(); | |
115 } | |
116 | |
117 /** | |
93 * Handles the relayout event occured on the navigation list. | 118 * Handles the relayout event occured on the navigation list. |
94 * @private | 119 * @private |
95 */ | 120 */ |
96 ToolbarController.prototype.onNavigationListRelayout_ = function() { | 121 ToolbarController.prototype.onNavigationListRelayout_ = function() { |
97 // Make the width of spacer same as the width of navigation list. | 122 // Make the width of spacer same as the width of navigation list. |
98 var navWidth = parseFloat( | 123 var navWidth = parseFloat( |
99 window.getComputedStyle(this.navigationList_).width); | 124 window.getComputedStyle(this.navigationList_).width); |
100 this.cancelSelectionButtonWrapper_.style.width = navWidth + 'px'; | 125 this.cancelSelectionButtonWrapper_.style.width = navWidth + 'px'; |
101 } | 126 } |
OLD | NEW |