| OLD | NEW |
| 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 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 | 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('ntp', function() { | 5 cr.define('ntp', function() { |
| 6 'use strict'; | 6 'use strict'; |
| 7 | 7 |
| 8 var Tile = ntp.Tile2; | 8 var Tile = ntp.Tile2; |
| 9 var TilePage = ntp.TilePage2; | 9 var TilePage = ntp.TilePage2; |
| 10 | 10 |
| (...skipping 92 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 103 var favicon = thumbnailImage.querySelector('.thumbnail-favicon'); | 103 var favicon = thumbnailImage.querySelector('.thumbnail-favicon'); |
| 104 if (favicon) | 104 if (favicon) |
| 105 thumbnailImage.removeChild(favicon); | 105 thumbnailImage.removeChild(favicon); |
| 106 | 106 |
| 107 var self = this; | 107 var self = this; |
| 108 var image = new Image(); | 108 var image = new Image(); |
| 109 | 109 |
| 110 // If the thumbnail image fails to load, show the favicon and URL instead. | 110 // If the thumbnail image fails to load, show the favicon and URL instead. |
| 111 // TODO(jeremycho): Move to a separate function? | 111 // TODO(jeremycho): Move to a separate function? |
| 112 image.onerror = function() { | 112 image.onerror = function() { |
| 113 banner = self.ownerDocument.createElement('div'); | 113 banner = thumbnailImage.querySelector('.thumbnail-banner') || |
| 114 self.ownerDocument.createElement('div'); |
| 114 banner.className = 'thumbnail-banner'; | 115 banner.className = 'thumbnail-banner'; |
| 115 | 116 |
| 116 // For now, just strip leading http://www and trailing backslash. | 117 // For now, just strip leading http://www and trailing backslash. |
| 117 // TODO(jeremycho): Consult with UX on URL truncation. | 118 // TODO(jeremycho): Consult with UX on URL truncation. |
| 118 banner.textContent = dataUrl.replace(/^(http:\/\/)?(www\.)?|\/$/gi, ''); | 119 banner.textContent = dataUrl.replace(/^(http:\/\/)?(www\.)?|\/$/gi, ''); |
| 119 thumbnailImage.appendChild(banner); | 120 thumbnailImage.appendChild(banner); |
| 120 | 121 |
| 121 favicon = self.ownerDocument.createElement('div'); | 122 favicon = thumbnailImage.querySelector('.thumbnail-favicon') || |
| 123 self.ownerDocument.createElement('div'); |
| 122 favicon.className = 'thumbnail-favicon'; | 124 favicon.className = 'thumbnail-favicon'; |
| 123 favicon.style.backgroundImage = | 125 favicon.style.backgroundImage = |
| 124 url('chrome://favicon/size/16/' + dataUrl); | 126 url('chrome://favicon/size/16/' + dataUrl); |
| 125 thumbnailImage.appendChild(favicon); | 127 thumbnailImage.appendChild(favicon); |
| 126 } | 128 } |
| 127 | 129 |
| 128 var thumbnailUrl = ntp.getThumbnailUrl(dataUrl); | 130 var thumbnailUrl = ntp.getThumbnailUrl(dataUrl); |
| 129 thumbnailImage.style.backgroundImage = url(thumbnailUrl); | 131 thumbnailImage.style.backgroundImage = url(thumbnailUrl); |
| 130 image.src = thumbnailUrl; | 132 image.src = thumbnailUrl; |
| 131 }, | 133 }, |
| (...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 185 }, | 187 }, |
| 186 | 188 |
| 187 /** | 189 /** |
| 188 * Update the tiles after a change to |data_|. | 190 * Update the tiles after a change to |data_|. |
| 189 */ | 191 */ |
| 190 updateTiles_: function() { | 192 updateTiles_: function() { |
| 191 if (!this.hasBeenRendered()) | 193 if (!this.hasBeenRendered()) |
| 192 this.layout_(); | 194 this.layout_(); |
| 193 | 195 |
| 194 var maxTileCount = this.config_.maxTileCount; | 196 var maxTileCount = this.config_.maxTileCount; |
| 195 var data = this.data_; | 197 var data = this.getValidData_(); |
| 196 var tiles = this.tiles; | 198 var tiles = this.tiles; |
| 197 for (var i = 0; i < maxTileCount; i++) { | 199 for (var i = 0; i < maxTileCount; i++) { |
| 198 var page = data[i]; | 200 var page = data[i]; |
| 199 var tile = tiles[i]; | 201 var tile = tiles[i]; |
| 200 | 202 |
| 201 // TODO(pedrosimonetti): What do we do when there's no tile here? | 203 // TODO(pedrosimonetti): What do we do when there's no tile here? |
| 202 if (!tile) | 204 if (!tile) |
| 203 return; | 205 return; |
| 204 | 206 |
| 205 if (i >= data.length) | 207 if (i >= data.length) |
| 206 tile.reset(); | 208 tile.reset(); |
| 207 else | 209 else |
| 208 tile.updateForData(page); | 210 tile.updateForData(page); |
| 209 } | 211 } |
| 210 }, | 212 }, |
| 211 | 213 |
| 212 /** | 214 /** |
| 213 * Array of thumbnail data objects. | 215 * Returns an array of thumbnail data objects. |
| 214 * @type {Array} | 216 * @return {Array} An array of thumbnail data objects. |
| 215 */ | 217 */ |
| 216 get data() { | 218 getData: function() { |
| 217 return this.data_; | 219 return this.data_; |
| 218 }, | 220 }, |
| 219 set data(data) { | 221 |
| 220 console.error('ThumbnailPage: data_ setter is not implemented.'); | 222 /** |
| 223 * Sets the data that will be used to create Thumbnails. |
| 224 * @param {Array} data The array of data. |
| 225 */ |
| 226 setData: function(data) { |
| 227 var maxTileCount = this.config_.maxTileCount; |
| 228 |
| 229 if (!this.data_) |
| 230 this.data_ = data.slice(0, maxTileCount); |
| 231 else |
| 232 this.data_ = this.refreshData_(this.data_, data, maxTileCount); |
| 233 |
| 234 var validDataLength = this.getValidData_().length; |
| 235 var tileCount = this.tileCount; |
| 236 // Create or remove tiles if necessary. |
| 237 if (tileCount < validDataLength) |
| 238 this.createTiles_(validDataLength - tileCount); |
| 239 else if (tileCount > validDataLength) { |
| 240 // TODO(jeremycho): Consider rewriting removeTile to be compatible with |
| 241 // pages other than Apps and calling it here. |
| 242 for (var i = 0; i < tileCount - validDataLength; i++) |
| 243 this.tiles_.pop(); |
| 244 } |
| 245 |
| 246 // TODO(pedrosimonetti): Fix this as part of a larger restructuring of |
| 247 // the layout/render logic. |
| 248 if (validDataLength != tileCount && tileCount > 0) |
| 249 this.renderGrid_(); |
| 250 this.updateTiles_(); |
| 251 }, |
| 252 |
| 253 /** |
| 254 * Given an array of new data, returns the data that should replace the |
| 255 * current array of data. Here we simply return the new data. |
| 256 * @param {Array} oldData The current page list. |
| 257 * @param {Array} newData The new page list. |
| 258 * @param {number} maxTileCount The maximum number of tiles to render. |
| 259 * @return {Array} The merged page list that should replace the current page |
| 260 * list. |
| 261 * @private |
| 262 */ |
| 263 refreshData_: function(oldData, newData, maxTileCount) { |
| 264 return newData.slice(0, maxTileCount); |
| 265 }, |
| 266 |
| 267 /** |
| 268 * Returns all data entries that should be used when updating the tiles. |
| 269 * @private |
| 270 * @return {Array} Data entries for updating tiles. |
| 271 */ |
| 272 getValidData_: function() { |
| 273 return this.data_; |
| 221 }, | 274 }, |
| 222 | 275 |
| 223 /** @inheritDoc */ | 276 /** @inheritDoc */ |
| 224 shouldAcceptDrag: function(e) { | 277 shouldAcceptDrag: function(e) { |
| 225 return false; | 278 return false; |
| 226 }, | 279 }, |
| 227 }; | 280 }; |
| 228 | 281 |
| 229 return { | 282 return { |
| 230 Thumbnail: Thumbnail, | 283 Thumbnail: Thumbnail, |
| 231 ThumbnailPage: ThumbnailPage | 284 ThumbnailPage: ThumbnailPage |
| 232 }; | 285 }; |
| 233 }); | 286 }); |
| OLD | NEW |