diff options
Diffstat (limited to 'chromium/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js')
| -rw-r--r-- | chromium/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js | 114 |
1 files changed, 111 insertions, 3 deletions
diff --git a/chromium/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js b/chromium/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js index b2b2a9c37c8..e58a0bfb0e0 100644 --- a/chromium/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js +++ b/chromium/chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js @@ -9,6 +9,7 @@ cr.define('wallpapers', function() { /** @const */ var GridSelectionController = cr.ui.GridSelectionController; /** @const */ var ListSingleSelectionModel = cr.ui.ListSingleSelectionModel; /** @const */ var ThumbnailSuffix = '_thumbnail.png'; + /** @const */ var ShowSpinnerDelayMs = 500; /** * Creates a new wallpaper thumbnails grid item. @@ -17,18 +18,36 @@ cr.define('wallpapers', function() { * opt_author: string, opt_authorWebsite: string}} * wallpaperInfo Wallpaper data item in WallpaperThumbnailsGrid's data * model. + * @param {number} dataModelId A unique ID that this item associated to. + * @param {function} callback The callback function when decoration finished. * @constructor * @extends {cr.ui.GridItem} */ - function WallpaperThumbnailsGridItem(wallpaperInfo) { + function WallpaperThumbnailsGridItem(wallpaperInfo, dataModelId, callback) { var el = new GridItem(wallpaperInfo); el.__proto__ = WallpaperThumbnailsGridItem.prototype; + el.dataModelId = dataModelId; + el.callback = callback; return el; } WallpaperThumbnailsGridItem.prototype = { __proto__: GridItem.prototype, + /** + * The unique ID this thumbnail grid associated to. + * @type {number} + */ + dataModelId: null, + + /** + * Called when the WallpaperThumbnailsGridItem is decorated or failed to + * decorate. If the decoration contains image, the callback function should + * be called after image loaded. + * @type {function} + */ + callback: null, + /** @override */ decorate: function() { GridItem.prototype.decorate.call(this); @@ -45,17 +64,24 @@ cr.define('wallpapers', function() { case Constants.WallpaperSourceEnum.AddNew: this.id = 'add-new'; this.addEventListener('click', function(e) { - $('wallpaper-selection-container').hidden = false; + var checkbox = $('surprise-me').querySelector('#checkbox'); + if (!checkbox.classList.contains('checked')) + $('wallpaper-selection-container').hidden = false; }); + // Delay dispatching the completion callback until all items have + // begun loading and are tracked. + window.setTimeout(this.callback.bind(this, this.dataModelId), 0); break; case Constants.WallpaperSourceEnum.Custom: var errorHandler = function(e) { + self.callback(self.dataModelId); console.error('Can not access file system.'); }; var wallpaperDirectories = WallpaperDirectories.getInstance(); var getThumbnail = function(fileName) { var setURL = function(fileEntry) { imageEl.src = fileEntry.toURL(); + self.callback(self.dataModelId); }; var fallback = function() { wallpaperDirectories.getDirectory(WallpaperDirNameEnum.ORIGINAL, @@ -83,6 +109,7 @@ cr.define('wallpapers', function() { {'type': 'image\/png'}); imageEl.src = window.URL.createObjectURL(blob); imageEl.addEventListener('load', function(e) { + self.callback(self.dataModelId); window.URL.revokeObjectURL(this.src); }); } else if (self.dataItem.source == @@ -102,8 +129,11 @@ cr.define('wallpapers', function() { // thumbnail. Use a placeholder like "loading" image may // better. imageEl.addEventListener('load', function(e) { + self.callback(self.dataModelId); window.URL.revokeObjectURL(this.src); }); + } else { + self.callback(self.dataModelId); } }); } @@ -111,6 +141,9 @@ cr.define('wallpapers', function() { break; default: console.error('Unsupported image source.'); + // Delay dispatching the completion callback until all items have + // begun loading and are tracked. + window.setTimeout(this.callback.bind(this, this.dataModelId), 0); } }, }; @@ -171,6 +204,12 @@ cr.define('wallpapers', function() { checkmark_: undefined, /** + * ID of spinner delay timer. + * @private + */ + spinnerTimeout_: 0, + + /** * The item in data model which should have a checkmark. * @type {{baseURL: string, dynamicURL: string, layout: string, * author: string, authorWebsite: string, @@ -185,11 +224,74 @@ cr.define('wallpapers', function() { } }, + /** + * A unique ID that assigned to each set dataModel operation. Note that this + * id wont increase if the new dataModel is null or empty. + */ + dataModelId_: 0, + + /** + * The number of items that need to be generated after a new dataModel is + * set. + */ + pendingItems_: 0, + + /** @override */ + set dataModel(dataModel) { + if (this.dataModel_ == dataModel) + return; + + if (dataModel && dataModel.length != 0) { + this.dataModelId_++; + // Clears old pending items. The new pending items will be counted when + // item is constructed in function itemConstructor below. + this.pendingItems_ = 0; + + this.style.visibility = 'hidden'; + // If spinner is hidden, schedule to show the spinner after + // ShowSpinnerDelayMs delay. Otherwise, keep it spinning. + if ($('spinner-container').hidden) { + this.spinnerTimeout_ = window.setTimeout(function() { + $('spinner-container').hidden = false; + }, ShowSpinnerDelayMs); + } + } else { + // Sets dataModel to null should hide spinner immedidately. + $('spinner-container').hidden = true; + } + + var parentSetter = cr.ui.Grid.prototype.__lookupSetter__('dataModel'); + parentSetter.call(this, dataModel); + }, + + get dataModel() { + return this.dataModel_; + }, + /** @override */ createSelectionController: function(sm) { return new WallpaperThumbnailsGridSelectionController(sm, this); }, + /** + * Check if new thumbnail grid finished loading. This reduces the count of + * remaining items to be loaded and when 0, shows the thumbnail grid. Note + * it does not reduce the count on a previous |dataModelId|. + * @param {number} dataModelId A unique ID that a thumbnail item is + * associated to. + */ + pendingItemComplete: function(dataModelId) { + if (dataModelId != this.dataModelId_) + return; + this.pendingItems_--; + if (this.pendingItems_ == 0) { + this.style.visibility = 'visible'; + window.clearTimeout(this.spinnerTimeout_); + this.spinnerTimeout_ = 0; + $('spinner-container').hidden = true; + } + }, + /** @override */ decorate: function() { Grid.prototype.decorate.call(this); @@ -199,7 +301,13 @@ cr.define('wallpapers', function() { this.checkmark_ = cr.doc.createElement('div'); this.checkmark_.classList.add('check'); this.dataModel = new ArrayDataModel([]); - this.itemConstructor = WallpaperThumbnailsGridItem; + var self = this; + this.itemConstructor = function(value) { + var dataModelId = self.dataModelId_; + self.pendingItems_++; + return WallpaperThumbnailsGridItem(value, dataModelId, + self.pendingItemComplete.bind(self)); + }; this.selectionModel = new ListSingleSelectionModel(); this.inProgramSelection_ = false; }, |