OLD | NEW |
| (Empty) |
1 // Copyright (c) 2012 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 * FileGrid constructor. | |
9 * | |
10 * Represents grid for the Grid Vew in the File Manager. | |
11 * @constructor | |
12 * @extends {cr.ui.Grid} | |
13 */ | |
14 | |
15 function FileGrid() { | |
16 throw new Error('Use FileGrid.decorate'); | |
17 } | |
18 | |
19 /** | |
20 * Thumbnail quality. | |
21 * @enum {number} | |
22 */ | |
23 FileGrid.ThumbnailQuality = { | |
24 LOW: 0, | |
25 HIGH: 1 | |
26 }; | |
27 | |
28 /** | |
29 * Inherits from cr.ui.Grid. | |
30 */ | |
31 FileGrid.prototype.__proto__ = cr.ui.Grid.prototype; | |
32 | |
33 /** | |
34 * Decorates an HTML element to be a FileGrid. | |
35 * @param {HTMLElement} self The grid to decorate. | |
36 * @param {MetadataCache} metadataCache Metadata cache to find entries | |
37 * metadata. | |
38 */ | |
39 FileGrid.decorate = function(self, metadataCache) { | |
40 cr.ui.Grid.decorate(self); | |
41 self.__proto__ = FileGrid.prototype; | |
42 self.metadataCache_ = metadataCache; | |
43 | |
44 self.scrollBar_ = new MainPanelScrollBar(); | |
45 self.scrollBar_.initialize(self.parentNode, self); | |
46 self.setBottomMarginForPanel(0); | |
47 | |
48 self.itemConstructor = function(entry) { | |
49 var item = self.ownerDocument.createElement('LI'); | |
50 FileGrid.Item.decorate(item, entry, self); | |
51 return item; | |
52 }; | |
53 | |
54 self.relayoutAggregation_ = | |
55 new AsyncUtil.Aggregation(self.relayoutImmediately_.bind(self)); | |
56 }; | |
57 | |
58 /** | |
59 * Updates items to reflect metadata changes. | |
60 * @param {string} type Type of metadata changed. | |
61 * @param {Object.<string, Object>} props Map from entry URLs to metadata props. | |
62 */ | |
63 FileGrid.prototype.updateListItemsMetadata = function(type, props) { | |
64 var boxes = this.querySelectorAll('.img-container'); | |
65 for (var i = 0; i < boxes.length; i++) { | |
66 var box = boxes[i]; | |
67 var entry = this.dataModel.item(this.getListItemAncestor(box)); | |
68 if (!entry || !(entry.toURL() in props)) | |
69 continue; | |
70 | |
71 FileGrid.decorateThumbnailBox(box, | |
72 entry, | |
73 this.metadataCache_, | |
74 ThumbnailLoader.FillMode.FIT, | |
75 FileGrid.ThumbnailQuality.HIGH); | |
76 } | |
77 }; | |
78 | |
79 /** | |
80 * Redraws the UI. Skips multiple consecutive calls. | |
81 */ | |
82 FileGrid.prototype.relayout = function() { | |
83 this.relayoutAggregation_.run(); | |
84 }; | |
85 | |
86 /** | |
87 * Redraws the UI immediately. | |
88 * @private | |
89 */ | |
90 FileGrid.prototype.relayoutImmediately_ = function() { | |
91 this.startBatchUpdates(); | |
92 this.columns = 0; | |
93 this.redraw(); | |
94 this.endBatchUpdates(); | |
95 cr.dispatchSimpleEvent(this, 'relayout'); | |
96 }; | |
97 | |
98 /** | |
99 * Decorates thumbnail. | |
100 * @param {HTMLElement} li List item. | |
101 * @param {Entry} entry Entry to render a thumbnail for. | |
102 * @param {MetadataCache} metadataCache To retrieve metadata. | |
103 */ | |
104 FileGrid.decorateThumbnail = function(li, entry, metadataCache) { | |
105 li.className = 'thumbnail-item'; | |
106 if (entry) | |
107 filelist.decorateListItem(li, entry, metadataCache); | |
108 | |
109 var frame = li.ownerDocument.createElement('div'); | |
110 frame.className = 'thumbnail-frame'; | |
111 li.appendChild(frame); | |
112 | |
113 var box = li.ownerDocument.createElement('div'); | |
114 if (entry) { | |
115 FileGrid.decorateThumbnailBox(box, | |
116 entry, | |
117 metadataCache, | |
118 ThumbnailLoader.FillMode.AUTO, | |
119 FileGrid.ThumbnailQuality.HIGH); | |
120 } | |
121 frame.appendChild(box); | |
122 | |
123 var bottom = li.ownerDocument.createElement('div'); | |
124 bottom.className = 'thumbnail-bottom'; | |
125 bottom.appendChild(filelist.renderFileNameLabel(li.ownerDocument, entry)); | |
126 frame.appendChild(bottom); | |
127 }; | |
128 | |
129 /** | |
130 * Decorates the box containing a centered thumbnail image. | |
131 * | |
132 * @param {HTMLDivElement} box Box to decorate. | |
133 * @param {Entry} entry Entry which thumbnail is generating for. | |
134 * @param {MetadataCache} metadataCache To retrieve metadata. | |
135 * @param {ThumbnailLoader.FillMode} fillMode Fill mode. | |
136 * @param {FileGrid.ThumbnailQuality} quality Thumbnail quality. | |
137 * @param {function(HTMLElement)=} opt_imageLoadCallback Callback called when | |
138 * the image has been loaded before inserting it into the DOM. | |
139 */ | |
140 FileGrid.decorateThumbnailBox = function( | |
141 box, entry, metadataCache, fillMode, quality, opt_imageLoadCallback) { | |
142 box.className = 'img-container'; | |
143 if (entry.isDirectory) { | |
144 box.setAttribute('generic-thumbnail', 'folder'); | |
145 if (opt_imageLoadCallback) | |
146 setTimeout(opt_imageLoadCallback, 0, null /* callback parameter */); | |
147 return; | |
148 } | |
149 | |
150 var imageUrl = entry.toURL(); | |
151 var metadataTypes = 'thumbnail|filesystem'; | |
152 | |
153 if (FileType.isOnDrive(imageUrl)) { | |
154 metadataTypes += '|drive'; | |
155 } else { | |
156 // TODO(dgozman): If we ask for 'media' for a Drive file we fall into an | |
157 // infinite loop. | |
158 metadataTypes += '|media'; | |
159 } | |
160 | |
161 // Drive provides high quality thumbnails via USE_EMBEDDED, however local | |
162 // images usually provide very tiny thumbnails, therefore USE_EMBEDDE can't | |
163 // be used to obtain high quality output. | |
164 var useEmbedded; | |
165 switch (quality) { | |
166 case FileGrid.ThumbnailQuality.LOW: | |
167 useEmbedded = ThumbnailLoader.UseEmbedded.USE_EMBEDDED; | |
168 break; | |
169 case FileGrid.ThumbnailQuality.HIGH: | |
170 useEmbedded = FileType.isOnDrive(imageUrl) ? | |
171 ThumbnailLoader.UseEmbedded.USE_EMBEDDED : | |
172 ThumbnailLoader.UseEmbedded.NO_EMBEDDED; | |
173 break; | |
174 } | |
175 | |
176 metadataCache.get(imageUrl, metadataTypes, | |
177 function(metadata) { | |
178 new ThumbnailLoader(imageUrl, | |
179 ThumbnailLoader.LoaderType.IMAGE, | |
180 metadata, | |
181 undefined, // opt_mediaType | |
182 useEmbedded). | |
183 load(box, | |
184 fillMode, | |
185 ThumbnailLoader.OptimizationMode.DISCARD_DETACHED, | |
186 opt_imageLoadCallback); | |
187 }); | |
188 }; | |
189 | |
190 /** | |
191 * Item for the Grid View. | |
192 * @constructor | |
193 */ | |
194 FileGrid.Item = function() { | |
195 throw new Error(); | |
196 }; | |
197 | |
198 /** | |
199 * Inherits from cr.ui.ListItem. | |
200 */ | |
201 FileGrid.Item.prototype.__proto__ = cr.ui.ListItem.prototype; | |
202 | |
203 Object.defineProperty(FileGrid.Item.prototype, 'label', { | |
204 /** | |
205 * @this {FileGrid.Item} | |
206 * @return {string} Label of the item. | |
207 */ | |
208 get: function() { | |
209 return this.querySelector('filename-label').textContent; | |
210 } | |
211 }); | |
212 | |
213 /** | |
214 * @param {Element} li List item element. | |
215 * @param {Entry} entry File entry. | |
216 * @param {FileGrid} grid Owner. | |
217 */ | |
218 FileGrid.Item.decorate = function(li, entry, grid) { | |
219 li.__proto__ = FileGrid.Item.prototype; | |
220 FileGrid.decorateThumbnail(li, entry, grid.metadataCache_, true); | |
221 | |
222 // Override the default role 'listitem' to 'option' to match the parent's | |
223 // role (listbox). | |
224 li.setAttribute('role', 'option'); | |
225 }; | |
226 | |
227 /** | |
228 * Sets the margin height for the transparent preview panel at the bottom. | |
229 * @param {number} margin Margin to be set in px. | |
230 */ | |
231 FileGrid.prototype.setBottomMarginForPanel = function(margin) { | |
232 // +20 bottom margin is needed to match the bottom margin size with the | |
233 // margin between its items. | |
234 this.style.paddingBottom = (margin + 20) + 'px'; | |
235 this.scrollBar_.setBottomMarginForPanel(margin); | |
236 }; | |
237 | |
238 /** | |
239 * Obtains if the drag selection should be start or not by referring the mouse | |
240 * event. | |
241 * @param {MouseEvent} event Drag start event. | |
242 * @return {boolean} True if the mouse is hit to the background of the list. | |
243 */ | |
244 FileGrid.prototype.shouldStartDragSelection = function(event) { | |
245 var pos = DragSelector.getScrolledPosition(this, event); | |
246 return this.getHitElements(pos.x, pos.y).length == 0; | |
247 }; | |
248 | |
249 /** | |
250 * Obtains the column/row index that the coordinate points. | |
251 * @param {number} coordinate Vertical/horizontal coodinate value that points | |
252 * column/row. | |
253 * @param {number} step Length from a column/row to the next one. | |
254 * @param {number} threshold Threshold that determinds whether 1 offset is added | |
255 * to the return value or not. This is used in order to handle the margin of | |
256 * column/row. | |
257 * @return {number} Index of hit column/row. | |
258 * @private | |
259 */ | |
260 FileGrid.prototype.getHitIndex_ = function(coordinate, step, threshold) { | |
261 var index = ~~(coordinate / step); | |
262 return (coordinate % step >= threshold) ? index + 1 : index; | |
263 }; | |
264 | |
265 /** | |
266 * Obtains the index list of elements that are hit by the point or the | |
267 * rectangle. | |
268 * | |
269 * We should match its argument interface with FileList.getHitElements. | |
270 * | |
271 * @param {number} x X coordinate value. | |
272 * @param {number} y Y coordinate value. | |
273 * @param {=number} opt_width Width of the coordinate. | |
274 * @param {=number} opt_height Height of the coordinate. | |
275 * @return {Array.<number>} Index list of hit elements. | |
276 */ | |
277 FileGrid.prototype.getHitElements = function(x, y, opt_width, opt_height) { | |
278 var currentSelection = []; | |
279 var right = x + (opt_width || 0); | |
280 var bottom = y + (opt_height || 0); | |
281 var itemMetrics = this.measureItem(); | |
282 var horizontalStartIndex = this.getHitIndex_( | |
283 x, itemMetrics.width, itemMetrics.width - itemMetrics.marginRight); | |
284 var horizontalEndIndex = Math.min(this.columns, this.getHitIndex_( | |
285 right, itemMetrics.width, itemMetrics.marginLeft)); | |
286 var verticalStartIndex = this.getHitIndex_( | |
287 y, itemMetrics.height, itemMetrics.height - itemMetrics.bottom); | |
288 var verticalEndIndex = this.getHitIndex_( | |
289 bottom, itemMetrics.height, itemMetrics.marginTop); | |
290 for (var verticalIndex = verticalStartIndex; | |
291 verticalIndex < verticalEndIndex; | |
292 verticalIndex++) { | |
293 var indexBase = this.getFirstItemInRow(verticalIndex); | |
294 for (var horizontalIndex = horizontalStartIndex; | |
295 horizontalIndex < horizontalEndIndex; | |
296 horizontalIndex++) { | |
297 var index = indexBase + horizontalIndex; | |
298 if (0 <= index && index < this.dataModel.length) | |
299 currentSelection.push(index); | |
300 } | |
301 } | |
302 return currentSelection; | |
303 }; | |
OLD | NEW |