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 |