| 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 /** |
| 11 * A running count of bookmark tiles that we create so that each will have | 11 * A running count of bookmark tiles that we create so that each will have |
| 12 * a unique ID. | 12 * a unique ID. |
| 13 */ | 13 */ |
| 14 var tileId = 0; | 14 var tileId = 0; |
| 15 | 15 |
| 16 /** | 16 /** |
| 17 * The maximum number of tiles that we will display on this page. If there |
| 18 * are not enough spaces to show all bookmarks, we'll include a link to the |
| 19 * Bookmarks manager. |
| 20 * TODO(csilv): Eliminate the need for this restraint. |
| 21 * @type {number} |
| 22 * @const |
| 23 */ |
| 24 var MAX_BOOKMARK_TILES = 18; |
| 25 |
| 26 /** |
| 17 * Creates a new bookmark object. | 27 * Creates a new bookmark object. |
| 18 * @param {Object} data The url and title. | 28 * @param {Object} data The url and title. |
| 19 * @constructor | 29 * @constructor |
| 20 * @extends {HTMLDivElement} | 30 * @extends {HTMLDivElement} |
| 21 */ | 31 */ |
| 22 function Bookmark(data) { | 32 function Bookmark(data) { |
| 23 var el = $('bookmark-template').cloneNode(true); | 33 var el = $('bookmark-template').cloneNode(true); |
| 24 el.__proto__ = Bookmark.prototype; | 34 el.__proto__ = Bookmark.prototype; |
| 25 el.data = data; | 35 el.data = data; |
| 26 el.initialize(); | 36 el.initialize(); |
| (...skipping 140 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 167 el.initialize(); | 177 el.initialize(); |
| 168 | 178 |
| 169 return el; | 179 return el; |
| 170 } | 180 } |
| 171 | 181 |
| 172 BookmarksPage.prototype = { | 182 BookmarksPage.prototype = { |
| 173 __proto__: TilePage.prototype, | 183 __proto__: TilePage.prototype, |
| 174 | 184 |
| 175 initialize: function() { | 185 initialize: function() { |
| 176 this.classList.add('bookmarks-page'); | 186 this.classList.add('bookmarks-page'); |
| 187 |
| 188 // insert the bookmark titles header which is unique to bookmark pages. |
| 177 this.insertBefore($('bookmarks-title-wrapper'), this.firstChild); | 189 this.insertBefore($('bookmarks-title-wrapper'), this.firstChild); |
| 190 |
| 191 // insert a container for a link to a Bookmarks Manager page. |
| 192 var link = document.createElement('a'); |
| 193 link.className = 'bookmarks-manager-link'; |
| 194 link.textContent = localStrings.getString('bookmarksManagerLinkTitle'); |
| 195 var container = document.createElement('div'); |
| 196 container.className = 'bookmarks-manager-link-container'; |
| 197 container.hidden = true; |
| 198 container.appendChild(link); |
| 199 this.querySelector('.tile-page-content').appendChild(container); |
| 178 }, | 200 }, |
| 179 | 201 |
| 180 /** | 202 /** |
| 181 * Build the bookmark titles bar (ie, navigation hiearchy). | 203 * Build the bookmark titles bar (ie, navigation hiearchy). |
| 182 * @param {Array} items The parent hiearchy of the current folder. | 204 * @param {Array} items The parent hiearchy of the current folder. |
| 183 * @private | 205 * @private |
| 184 */ | 206 */ |
| 185 updateBookmarkTitles_: function(items) { | 207 updateBookmarkTitles_: function(items) { |
| 186 var wrapper = $('bookmarks-title-wrapper'); | 208 var wrapper = $('bookmarks-title-wrapper'); |
| 187 var title = wrapper.querySelector('.section-title'); | 209 var title = wrapper.querySelector('.section-title'); |
| (...skipping 12 matching lines...) Expand all Loading... |
| 200 title.appendChild(titleCrumb); | 222 title.appendChild(titleCrumb); |
| 201 }, | 223 }, |
| 202 | 224 |
| 203 /** | 225 /** |
| 204 * Build the bookmark tiles. | 226 * Build the bookmark tiles. |
| 205 * @param {Array} items The contents of the current folder. | 227 * @param {Array} items The contents of the current folder. |
| 206 * @private | 228 * @private |
| 207 */ | 229 */ |
| 208 updateBookmarkTiles_: function(items) { | 230 updateBookmarkTiles_: function(items) { |
| 209 this.removeAllTiles(); | 231 this.removeAllTiles(); |
| 210 for (var i = 0; i < items.length; i++) | 232 var tile_count = Math.min(items.length, MAX_BOOKMARK_TILES); |
| 233 for (var i = 0; i < tile_count; i++) |
| 211 this.appendTile(new Bookmark(items[i]), false); | 234 this.appendTile(new Bookmark(items[i]), false); |
| 235 |
| 236 var container = this.querySelector('.bookmarks-manager-link-container'); |
| 237 if (items.length > MAX_BOOKMARK_TILES) { |
| 238 var link = container.querySelector('.bookmarks-manager-link'); |
| 239 link.href = 'chrome://bookmarks/#' + this.id; |
| 240 container.hidden = false; |
| 241 } else { |
| 242 container.hidden = true; |
| 243 } |
| 212 }, | 244 }, |
| 213 | 245 |
| 214 /** @inheritDoc */ | 246 /** @inheritDoc */ |
| 215 shouldAcceptDrag: function(dataTransfer) { | 247 shouldAcceptDrag: function(dataTransfer) { |
| 216 return false; | 248 return false; |
| 217 }, | 249 }, |
| 218 | 250 |
| 219 /** | 251 /** |
| 220 * Set the bookmark data that should be displayed, replacing any existing | 252 * Set the bookmark data that should be displayed, replacing any existing |
| 221 * data. | 253 * data. |
| 222 */ | 254 */ |
| 223 set data(data) { | 255 set data(data) { |
| 256 this.id = data.navigationItems[0].id; |
| 224 this.updateBookmarkTiles_(data.items); | 257 this.updateBookmarkTiles_(data.items); |
| 225 this.updateBookmarkTitles_(data.navigationItems); | 258 this.updateBookmarkTitles_(data.navigationItems); |
| 226 }, | 259 }, |
| 227 }; | 260 }; |
| 228 | 261 |
| 229 /** | 262 /** |
| 230 * Initializes and renders the bookmark chevron canvas. This needs to be | 263 * Initializes and renders the bookmark chevron canvas. This needs to be |
| 231 * performed after the page has been loaded so that we have access to the | 264 * performed after the page has been loaded so that we have access to the |
| 232 * style sheet values. | 265 * style sheet values. |
| 233 */ | 266 */ |
| (...skipping 24 matching lines...) Expand all Loading... |
| 258 }; | 291 }; |
| 259 | 292 |
| 260 return { | 293 return { |
| 261 BookmarksPage: BookmarksPage, | 294 BookmarksPage: BookmarksPage, |
| 262 initBookmarkChevron: initBookmarkChevron, | 295 initBookmarkChevron: initBookmarkChevron, |
| 263 setBookmarksFaviconDominantColor: setBookmarksFaviconDominantColor | 296 setBookmarksFaviconDominantColor: setBookmarksFaviconDominantColor |
| 264 }; | 297 }; |
| 265 }); | 298 }); |
| 266 | 299 |
| 267 window.addEventListener('load', ntp4.initBookmarkChevron); | 300 window.addEventListener('load', ntp4.initBookmarkChevron); |
| OLD | NEW |