| OLD | NEW |
| 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2011 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('ntp4', function() { | 5 cr.define('ntp4', function() { |
| 6 'use strict'; | 6 'use strict'; |
| 7 | 7 |
| 8 var localStrings = new LocalStrings; | 8 var localStrings = new LocalStrings; |
| 9 | 9 |
| 10 /** | 10 /** |
| (...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 52 title.textContent = this.data.title; | 52 title.textContent = this.data.title; |
| 53 | 53 |
| 54 if (this.data.url) { | 54 if (this.data.url) { |
| 55 var button = this.querySelector('.button'); | 55 var button = this.querySelector('.button'); |
| 56 button.href = title.href = this.data.url; | 56 button.href = title.href = this.data.url; |
| 57 } | 57 } |
| 58 | 58 |
| 59 var faviconDiv = this.querySelector('.favicon'); | 59 var faviconDiv = this.querySelector('.favicon'); |
| 60 var faviconUrl; | 60 var faviconUrl; |
| 61 if (this.data.url) { | 61 if (this.data.url) { |
| 62 faviconUrl = 'chrome://favicon/size/16/' + this.data.url; | 62 faviconUrl = 'chrome://favicon/size/32/' + this.data.url; |
| 63 chrome.send('getFaviconDominantColor', | 63 chrome.send('getFaviconDominantColor', |
| 64 [faviconUrl, id, 'ntp4.setBookmarksFaviconDominantColor']); | 64 [faviconUrl, id, 'ntp4.setBookmarksFaviconDominantColor']); |
| 65 } else { | 65 } else { |
| 66 // TODO(csilv): We need a large (32px) icon for this URL. |
| 66 faviconUrl = 'chrome://theme/IDR_BOOKMARK_BAR_FOLDER'; | 67 faviconUrl = 'chrome://theme/IDR_BOOKMARK_BAR_FOLDER'; |
| 67 // TODO(csilv): Should we vary this color by platform? | 68 // TODO(csilv): Should we vary this color by platform? |
| 68 this.stripeColor = '#919191'; | 69 this.stripeColor = '#919191'; |
| 69 } | 70 } |
| 70 faviconDiv.style.backgroundImage = url(faviconUrl); | 71 faviconDiv.style.backgroundImage = url(faviconUrl); |
| 71 | 72 |
| 72 this.addEventListener('click', this.handleClick_.bind(this)); | 73 this.addEventListener('click', this.handleClick_.bind(this)); |
| 73 }, | 74 }, |
| 74 | 75 |
| 75 /** | 76 /** |
| 76 * Sets the color of the favicon dominant color bar. | 77 * Sets the color of the favicon dominant color bar. |
| 77 * @param {string} color The css-parsable value for the color. | 78 * @param {string} color The css-parsable value for the color. |
| 78 */ | 79 */ |
| 79 set stripeColor(color) { | 80 set stripeColor(color) { |
| 80 this.querySelector('.color-stripe').style.backgroundColor = color; | 81 this.querySelector('.color-stripe').style.backgroundColor = color; |
| 81 }, | 82 }, |
| 82 | 83 |
| 83 /** | 84 /** |
| 84 * Set the size and position of the bookmark tile. | 85 * Set the size and position of the bookmark tile. |
| 85 * @param {number} size The total size of |this|. | 86 * @param {number} size The total size of |this|. |
| 86 * @param {number} x The x-position. | 87 * @param {number} x The x-position. |
| 87 * @param {number} y The y-position. | 88 * @param {number} y The y-position. |
| 88 * animate. | 89 * animate. |
| 89 */ | 90 */ |
| 90 setBounds: function(size, x, y) { | 91 setBounds: function(size, x, y) { |
| 91 this.style.width = size + 'px'; | 92 this.style.width = this.style.height = size + 'px'; |
| 92 this.style.height = heightForWidth(size) + 'px'; | |
| 93 | |
| 94 this.style.left = x + 'px'; | 93 this.style.left = x + 'px'; |
| 95 this.style.right = x + 'px'; | |
| 96 this.style.top = y + 'px'; | 94 this.style.top = y + 'px'; |
| 97 }, | 95 }, |
| 98 | 96 |
| 99 /** | 97 /** |
| 100 * Invoked when a bookmark is clicked | 98 * Invoked when a bookmark is clicked |
| 101 * @param {Event} e The click event. | 99 * @param {Event} e The click event. |
| 102 * @private | 100 * @private |
| 103 */ | 101 */ |
| 104 handleClick_: function(e) { | 102 handleClick_: function(e) { |
| 105 if (e.target.classList.contains('close-button')) { | 103 if (e.target.classList.contains('close-button')) { |
| (...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 168 maxColCount: 6, | 166 maxColCount: 6, |
| 169 | 167 |
| 170 // The smallest a tile can be. | 168 // The smallest a tile can be. |
| 171 minTileWidth: 150, | 169 minTileWidth: 150, |
| 172 // The biggest a tile can be. | 170 // The biggest a tile can be. |
| 173 maxTileWidth: 150, | 171 maxTileWidth: 150, |
| 174 }; | 172 }; |
| 175 TilePage.initGridValues(bookmarksPageGridValues); | 173 TilePage.initGridValues(bookmarksPageGridValues); |
| 176 | 174 |
| 177 /** | 175 /** |
| 178 * Calculates the height for a bookmarks tile for a given width. The size | |
| 179 * is based on a desired size of 96x72 ratio. | |
| 180 * @return {number} The height. | |
| 181 */ | |
| 182 function heightForWidth(width) { | |
| 183 // The 2s are for borders, the 31 is for the title. | |
| 184 return (width - 2) * 72 / 96 + 2 + 31; | |
| 185 } | |
| 186 | |
| 187 /** | |
| 188 * Creates a new BookmarksPage object. | 176 * Creates a new BookmarksPage object. |
| 189 * @constructor | 177 * @constructor |
| 190 * @extends {TilePage} | 178 * @extends {TilePage} |
| 191 */ | 179 */ |
| 192 function BookmarksPage() { | 180 function BookmarksPage() { |
| 193 var el = new TilePage(bookmarksPageGridValues); | 181 var el = new TilePage(bookmarksPageGridValues); |
| 194 el.__proto__ = BookmarksPage.prototype; | 182 el.__proto__ = BookmarksPage.prototype; |
| 195 el.initialize(); | 183 el.initialize(); |
| 196 | 184 |
| 197 return el; | 185 return el; |
| (...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 280 } | 268 } |
| 281 } | 269 } |
| 282 return false; | 270 return false; |
| 283 }, | 271 }, |
| 284 | 272 |
| 285 /** @inheritDoc */ | 273 /** @inheritDoc */ |
| 286 shouldAcceptDrag: function(dataTransfer) { | 274 shouldAcceptDrag: function(dataTransfer) { |
| 287 return false; | 275 return false; |
| 288 }, | 276 }, |
| 289 | 277 |
| 290 /** @inheritDoc */ | |
| 291 heightForWidth: heightForWidth, | |
| 292 | |
| 293 /** | 278 /** |
| 294 * Invoked before a batch import begins. We will ignore added/changed | 279 * Invoked before a batch import begins. We will ignore added/changed |
| 295 * notifications while the operation is in progress. | 280 * notifications while the operation is in progress. |
| 296 */ | 281 */ |
| 297 bookmarkImportBegan: function() { | 282 bookmarkImportBegan: function() { |
| 298 this.importing = true; | 283 this.importing = true; |
| 299 }, | 284 }, |
| 300 | 285 |
| 301 /** | 286 /** |
| 302 * Invoked after a batch import finishes. We will reload the bookmarks | 287 * Invoked after a batch import finishes. We will reload the bookmarks |
| (...skipping 154 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 457 }; | 442 }; |
| 458 | 443 |
| 459 return { | 444 return { |
| 460 BookmarksPage: BookmarksPage, | 445 BookmarksPage: BookmarksPage, |
| 461 initBookmarkChevron: initBookmarkChevron, | 446 initBookmarkChevron: initBookmarkChevron, |
| 462 setBookmarksFaviconDominantColor: setBookmarksFaviconDominantColor | 447 setBookmarksFaviconDominantColor: setBookmarksFaviconDominantColor |
| 463 }; | 448 }; |
| 464 }); | 449 }); |
| 465 | 450 |
| 466 window.addEventListener('load', ntp4.initBookmarkChevron); | 451 window.addEventListener('load', ntp4.initBookmarkChevron); |
| OLD | NEW |