Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(63)

Side by Side Diff: chrome/browser/resources/ntp4/bookmarks_page.js

Issue 7701013: [ntp4] Limit the maximum bookmark tiles that will display at once, for now. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src/
Patch Set: code review changes; rebase Created 9 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
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
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
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
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);
OLDNEW
« no previous file with comments | « chrome/browser/resources/ntp4/bookmarks_page.css ('k') | chrome/browser/ui/webui/ntp/ntp_resource_cache.cc » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698