OLD | NEW |
1 // Copyright (c) 2013 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2013 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 cr.define('wallpapers', function() { | 5 cr.define('wallpapers', function() { |
6 /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel; | 6 /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel; |
7 /** @const */ var Grid = cr.ui.Grid; | 7 /** @const */ var Grid = cr.ui.Grid; |
8 /** @const */ var GridItem = cr.ui.GridItem; | 8 /** @const */ var GridItem = cr.ui.GridItem; |
9 /** @const */ var GridSelectionController = cr.ui.GridSelectionController; | 9 /** @const */ var GridSelectionController = cr.ui.GridSelectionController; |
10 /** @const */ var ListSingleSelectionModel = cr.ui.ListSingleSelectionModel; | 10 /** @const */ var ListSingleSelectionModel = cr.ui.ListSingleSelectionModel; |
11 /** @const */ var ThumbnailSuffix = '_thumbnail.png'; | 11 /** @const */ var ThumbnailSuffix = '_thumbnail.png'; |
12 /** @const */ var ShowSpinnerDelayMs = 500; | 12 /** @const */ var ShowSpinnerDelayMs = 500; |
13 | 13 |
14 /** | 14 /** |
15 * Creates a new wallpaper thumbnails grid item. | 15 * Creates a new wallpaper thumbnails grid item. |
16 * @param {{wallpaperId: number, baseURL: string, layout: string, | 16 * @param {{wallpaperId: number, baseURL: string, layout: string, |
17 * source: string, availableOffline: boolean, | 17 * source: string, availableOffline: boolean, |
18 * opt_dynamicURL: string, opt_author: string, | 18 * opt_dynamicURL: string, opt_author: string, |
19 * opt_authorWebsite: string}} | 19 * opt_authorWebsite: string}} |
20 * wallpaperInfo Wallpaper data item in WallpaperThumbnailsGrid's data | 20 * wallpaperInfo Wallpaper data item in WallpaperThumbnailsGrid's data |
21 * model. | 21 * model. |
22 * @param {number} dataModelId A unique ID that this item associated to. | 22 * @param {number} dataModelId A unique ID that this item associated to. |
23 * @param {object} thumbnail The thumbnail image Object associated with this | 23 * @param {object} thumbnail The thumbnail image Object associated with this |
24 * grid item. | 24 * grid item. |
25 * @param {function} callback The callback function when decoration finished. | 25 * @param {function} callback The callback function when decoration finished. |
26 * @constructor | 26 * @constructor |
27 * @extends {cr.ui.GridItem} | 27 * @extends {cr.ui.GridItem} |
28 */ | 28 */ |
29 function WallpaperThumbnailsGridItem(wallpaperInfo, | 29 function WallpaperThumbnailsGridItem( |
30 dataModelId, | 30 wallpaperInfo, dataModelId, thumbnail, callback) { |
31 thumbnail, | |
32 callback) { | |
33 var el = new GridItem(wallpaperInfo); | 31 var el = new GridItem(wallpaperInfo); |
34 el.__proto__ = WallpaperThumbnailsGridItem.prototype; | 32 el.__proto__ = WallpaperThumbnailsGridItem.prototype; |
35 el.dataModelId_ = dataModelId; | 33 el.dataModelId_ = dataModelId; |
36 el.thumbnail_ = thumbnail; | 34 el.thumbnail_ = thumbnail; |
37 el.callback_ = callback; | 35 el.callback_ = callback; |
38 return el; | 36 return el; |
39 } | 37 } |
40 | 38 |
41 WallpaperThumbnailsGridItem.prototype = { | 39 WallpaperThumbnailsGridItem.prototype = { |
42 __proto__: GridItem.prototype, | 40 __proto__: GridItem.prototype, |
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
93 break; | 91 break; |
94 case Constants.WallpaperSourceEnum.Custom: | 92 case Constants.WallpaperSourceEnum.Custom: |
95 var errorHandler = function(e) { | 93 var errorHandler = function(e) { |
96 self.callback_(self.dataModelId_); | 94 self.callback_(self.dataModelId_); |
97 console.error('Can not access file system.'); | 95 console.error('Can not access file system.'); |
98 }; | 96 }; |
99 var wallpaperDirectories = WallpaperDirectories.getInstance(); | 97 var wallpaperDirectories = WallpaperDirectories.getInstance(); |
100 var getThumbnail = function(fileName) { | 98 var getThumbnail = function(fileName) { |
101 var setURL = function(fileEntry) { | 99 var setURL = function(fileEntry) { |
102 imageEl.src = fileEntry.toURL(); | 100 imageEl.src = fileEntry.toURL(); |
103 self.callback_(self.dataModelId_, | 101 self.callback_( |
104 self.dataItem.wallpaperId, | 102 self.dataModelId_, self.dataItem.wallpaperId, imageEl); |
105 imageEl); | |
106 }; | 103 }; |
107 var fallback = function() { | 104 var fallback = function() { |
108 wallpaperDirectories.getDirectory( | 105 wallpaperDirectories.getDirectory( |
109 Constants.WallpaperDirNameEnum.ORIGINAL, function(dirEntry) { | 106 Constants.WallpaperDirNameEnum.ORIGINAL, function(dirEntry) { |
110 dirEntry.getFile(fileName, {create: false}, setURL, | 107 dirEntry.getFile( |
111 errorHandler); | 108 fileName, {create: false}, setURL, errorHandler); |
112 }, errorHandler); | 109 }, errorHandler); |
113 }; | 110 }; |
114 var success = function(dirEntry) { | 111 var success = function(dirEntry) { |
115 dirEntry.getFile(fileName, {create: false}, setURL, fallback); | 112 dirEntry.getFile(fileName, {create: false}, setURL, fallback); |
116 }; | 113 }; |
117 wallpaperDirectories.getDirectory( | 114 wallpaperDirectories.getDirectory( |
118 Constants.WallpaperDirNameEnum.THUMBNAIL, success, errorHandler); | 115 Constants.WallpaperDirNameEnum.THUMBNAIL, success, |
| 116 errorHandler); |
119 }; | 117 }; |
120 getThumbnail(self.dataItem.baseURL); | 118 getThumbnail(self.dataItem.baseURL); |
121 break; | 119 break; |
122 case Constants.WallpaperSourceEnum.OEM: | 120 case Constants.WallpaperSourceEnum.OEM: |
123 case Constants.WallpaperSourceEnum.Online: | 121 case Constants.WallpaperSourceEnum.Online: |
124 chrome.wallpaperPrivate.getThumbnail(this.dataItem.baseURL, | 122 chrome.wallpaperPrivate.getThumbnail( |
125 this.dataItem.source, | 123 this.dataItem.baseURL, this.dataItem.source, function(data) { |
126 function(data) { | 124 if (data) { |
127 if (data) { | 125 var blob = |
128 var blob = new Blob([new Int8Array(data)], | 126 new Blob([new Int8Array(data)], {'type': 'image\/png'}); |
129 {'type': 'image\/png'}); | |
130 imageEl.src = window.URL.createObjectURL(blob); | |
131 imageEl.addEventListener('load', function(e) { | |
132 self.callback_(self.dataModelId_, | |
133 self.dataItem.wallpaperId, | |
134 imageEl); | |
135 window.URL.revokeObjectURL(this.src); | |
136 }); | |
137 } else if (self.dataItem.source == | |
138 Constants.WallpaperSourceEnum.Online) { | |
139 var xhr = new XMLHttpRequest(); | |
140 xhr.open('GET', self.dataItem.baseURL + ThumbnailSuffix, true); | |
141 xhr.responseType = 'arraybuffer'; | |
142 xhr.send(null); | |
143 xhr.addEventListener('load', function(e) { | |
144 if (xhr.status === 200) { | |
145 chrome.wallpaperPrivate.saveThumbnail(self.dataItem.baseURL, | |
146 xhr.response); | |
147 var blob = new Blob([new Int8Array(xhr.response)], | |
148 {'type' : 'image\/png'}); | |
149 imageEl.src = window.URL.createObjectURL(blob); | 127 imageEl.src = window.URL.createObjectURL(blob); |
150 // TODO(bshe): We currently use empty div to reserve space for | |
151 // thumbnail. Use a placeholder like "loading" image may | |
152 // better. | |
153 imageEl.addEventListener('load', function(e) { | 128 imageEl.addEventListener('load', function(e) { |
154 self.callback_(self.dataModelId_, | 129 self.callback_( |
155 self.dataItem.wallpaperId, | 130 self.dataModelId_, self.dataItem.wallpaperId, imageEl); |
156 this); | |
157 window.URL.revokeObjectURL(this.src); | 131 window.URL.revokeObjectURL(this.src); |
158 }); | 132 }); |
159 } else { | 133 } else if ( |
160 self.callback_(self.dataModelId_); | 134 self.dataItem.source == |
| 135 Constants.WallpaperSourceEnum.Online) { |
| 136 var xhr = new XMLHttpRequest(); |
| 137 xhr.open( |
| 138 'GET', self.dataItem.baseURL + ThumbnailSuffix, true); |
| 139 xhr.responseType = 'arraybuffer'; |
| 140 xhr.send(null); |
| 141 xhr.addEventListener('load', function(e) { |
| 142 if (xhr.status === 200) { |
| 143 chrome.wallpaperPrivate.saveThumbnail( |
| 144 self.dataItem.baseURL, xhr.response); |
| 145 var blob = new Blob( |
| 146 [new Int8Array(xhr.response)], |
| 147 {'type': 'image\/png'}); |
| 148 imageEl.src = window.URL.createObjectURL(blob); |
| 149 // TODO(bshe): We currently use empty div to reserve space |
| 150 // for thumbnail. Use a placeholder like "loading" image |
| 151 // may better. |
| 152 imageEl.addEventListener('load', function(e) { |
| 153 self.callback_( |
| 154 self.dataModelId_, self.dataItem.wallpaperId, this); |
| 155 window.URL.revokeObjectURL(this.src); |
| 156 }); |
| 157 } else { |
| 158 self.callback_(self.dataModelId_); |
| 159 } |
| 160 }); |
161 } | 161 } |
162 }); | 162 }); |
163 } | |
164 }); | |
165 break; | 163 break; |
166 case Constants.WallpaperSourceEnum.Daily: | 164 case Constants.WallpaperSourceEnum.Daily: |
167 case Constants.WallpaperSourceEnum.ThirdParty: | 165 case Constants.WallpaperSourceEnum.ThirdParty: |
168 default: | 166 default: |
169 // It's impossible to manually select a DAILY or THIRDPARTY type | 167 // It's impossible to manually select a DAILY or THIRDPARTY type |
170 // wallpaper. | 168 // wallpaper. |
171 console.error('Unsupported wallpaper source.'); | 169 console.error('Unsupported wallpaper source.'); |
172 // Delay dispatching the completion callback until all items have | 170 // Delay dispatching the completion callback until all items have |
173 // begun loading and are tracked. | 171 // begun loading and are tracked. |
174 window.setTimeout(this.callback_.bind(this, this.dataModelId_), 0); | 172 window.setTimeout(this.callback_.bind(this, this.dataModelId_), 0); |
(...skipping 140 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
315 * Check if new thumbnail grid finished loading. This reduces the count of | 313 * Check if new thumbnail grid finished loading. This reduces the count of |
316 * remaining items to be loaded and when 0, shows the thumbnail grid. Note | 314 * remaining items to be loaded and when 0, shows the thumbnail grid. Note |
317 * it does not reduce the count on a previous |dataModelId|. | 315 * it does not reduce the count on a previous |dataModelId|. |
318 * @param {number} dataModelId A unique ID that a thumbnail item is | 316 * @param {number} dataModelId A unique ID that a thumbnail item is |
319 * associated to. | 317 * associated to. |
320 * @param {number} opt_wallpaperId The unique wallpaper ID that associated | 318 * @param {number} opt_wallpaperId The unique wallpaper ID that associated |
321 * with this thumbnail gird item. | 319 * with this thumbnail gird item. |
322 * @param {object} opt_thumbnail The thumbnail image that associated with | 320 * @param {object} opt_thumbnail The thumbnail image that associated with |
323 * the opt_wallpaperId. | 321 * the opt_wallpaperId. |
324 */ | 322 */ |
325 pendingItemComplete: function(dataModelId, | 323 pendingItemComplete: function(dataModelId, opt_wallpaperId, opt_thumbnail) { |
326 opt_wallpaperId, | |
327 opt_thumbnail) { | |
328 if (dataModelId != this.dataModelId_) | 324 if (dataModelId != this.dataModelId_) |
329 return; | 325 return; |
330 this.pendingItems_--; | 326 this.pendingItems_--; |
331 if (opt_wallpaperId != null) | 327 if (opt_wallpaperId != null) |
332 this.thumbnailList_[opt_wallpaperId] = opt_thumbnail; | 328 this.thumbnailList_[opt_wallpaperId] = opt_thumbnail; |
333 if (this.pendingItems_ == 0) { | 329 if (this.pendingItems_ == 0) { |
334 this.style.visibility = 'visible'; | 330 this.style.visibility = 'visible'; |
335 window.clearTimeout(this.spinnerTimeout_); | 331 window.clearTimeout(this.spinnerTimeout_); |
336 this.spinnerTimeout_ = 0; | 332 this.spinnerTimeout_ = 0; |
337 $('spinner-container').hidden = true; | 333 $('spinner-container').hidden = true; |
338 } | 334 } |
339 }, | 335 }, |
340 | 336 |
341 /** @override */ | 337 /** @override */ |
342 decorate: function() { | 338 decorate: function() { |
343 Grid.prototype.decorate.call(this); | 339 Grid.prototype.decorate.call(this); |
344 // checkmark_ needs to be initialized before set data model. Otherwise, we | 340 // checkmark_ needs to be initialized before set data model. Otherwise, we |
345 // may try to access checkmark before initialization in | 341 // may try to access checkmark before initialization in |
346 // updateActiveThumb_(). | 342 // updateActiveThumb_(). |
347 this.checkmark_ = cr.doc.createElement('div'); | 343 this.checkmark_ = cr.doc.createElement('div'); |
348 this.checkmark_.classList.add('check'); | 344 this.checkmark_.classList.add('check'); |
349 this.dataModel = new ArrayDataModel([]); | 345 this.dataModel = new ArrayDataModel([]); |
350 this.thumbnailList_ = new ArrayDataModel([]); | 346 this.thumbnailList_ = new ArrayDataModel([]); |
351 var self = this; | 347 var self = this; |
352 this.itemConstructor = function(value) { | 348 this.itemConstructor = function(value) { |
353 var dataModelId = self.dataModelId_; | 349 var dataModelId = self.dataModelId_; |
354 self.pendingItems_++; | 350 self.pendingItems_++; |
355 return WallpaperThumbnailsGridItem(value, dataModelId, | 351 return WallpaperThumbnailsGridItem( |
| 352 value, dataModelId, |
356 (value.wallpaperId == null) ? | 353 (value.wallpaperId == null) ? |
357 null : self.thumbnailList_[value.wallpaperId], | 354 null : |
| 355 self.thumbnailList_[value.wallpaperId], |
358 self.pendingItemComplete.bind(self)); | 356 self.pendingItemComplete.bind(self)); |
359 }; | 357 }; |
360 this.selectionModel = new ListSingleSelectionModel(); | 358 this.selectionModel = new ListSingleSelectionModel(); |
361 this.inProgramSelection_ = false; | 359 this.inProgramSelection_ = false; |
362 }, | 360 }, |
363 | 361 |
364 /** | 362 /** |
365 * Should only be queried from the 'change' event listener, true if the | 363 * Should only be queried from the 'change' event listener, true if the |
366 * change event was triggered by a programmatical selection change. | 364 * change event was triggered by a programmatical selection change. |
367 * @type {boolean} | 365 * @type {boolean} |
(...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
432 * Redraws the viewport. | 430 * Redraws the viewport. |
433 */ | 431 */ |
434 redraw: function() { | 432 redraw: function() { |
435 Grid.prototype.redraw.call(this); | 433 Grid.prototype.redraw.call(this); |
436 // The active thumbnail maybe deleted in the above redraw(). Sets it again | 434 // The active thumbnail maybe deleted in the above redraw(). Sets it again |
437 // to make sure checkmark shows correctly. | 435 // to make sure checkmark shows correctly. |
438 this.updateActiveThumb_(); | 436 this.updateActiveThumb_(); |
439 } | 437 } |
440 }; | 438 }; |
441 | 439 |
442 return { | 440 return {WallpaperThumbnailsGrid: WallpaperThumbnailsGrid}; |
443 WallpaperThumbnailsGrid: WallpaperThumbnailsGrid | |
444 }; | |
445 }); | 441 }); |
OLD | NEW |