| 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 |