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 /** | 5 /** |
6 * @fileoverview PageListView implementation. | 6 * @fileoverview PageListView implementation. |
7 * PageListView manages page list, dot list, switcher buttons and handles apps | 7 * PageListView manages page list, dot list, switcher buttons and handles apps |
8 * pages callbacks from backend. | 8 * pages callbacks from backend. |
9 * | 9 * |
10 * Note that you need to have AppLauncherHandler in your WebUI to use this code. | 10 * Note that you need to have AppLauncherHandler in your WebUI to use this code. |
(...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
58 */ | 58 */ |
59 appsPages: undefined, | 59 appsPages: undefined, |
60 | 60 |
61 /** | 61 /** |
62 * The Most Visited page. | 62 * The Most Visited page. |
63 * @type {!Element|undefined} | 63 * @type {!Element|undefined} |
64 */ | 64 */ |
65 mostVisitedPage: undefined, | 65 mostVisitedPage: undefined, |
66 | 66 |
67 /** | 67 /** |
68 * The Bookmarks page. | |
69 * @type {!Element|undefined} | |
70 */ | |
71 bookmarksPage: undefined, | |
72 | |
73 /** | |
74 * The 'dots-list' element. | 68 * The 'dots-list' element. |
75 * @type {!Element|undefined} | 69 * @type {!Element|undefined} |
76 */ | 70 */ |
77 dotList: undefined, | 71 dotList: undefined, |
78 | 72 |
79 /** | 73 /** |
80 * The left and right paging buttons. | 74 * The left and right paging buttons. |
81 * @type {!Element|undefined} | 75 * @type {!Element|undefined} |
82 */ | 76 */ |
83 pageSwitcherStart: undefined, | 77 pageSwitcherStart: undefined, |
(...skipping 98 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
182 window.addEventListener('resize', this.onWindowResize_.bind(this)); | 176 window.addEventListener('resize', this.onWindowResize_.bind(this)); |
183 | 177 |
184 // Update apps when online state changes. | 178 // Update apps when online state changes. |
185 window.addEventListener('online', | 179 window.addEventListener('online', |
186 this.updateOfflineEnabledApps_.bind(this)); | 180 this.updateOfflineEnabledApps_.bind(this)); |
187 window.addEventListener('offline', | 181 window.addEventListener('offline', |
188 this.updateOfflineEnabledApps_.bind(this)); | 182 this.updateOfflineEnabledApps_.bind(this)); |
189 }, | 183 }, |
190 | 184 |
191 /** | 185 /** |
192 * Appends a tile page (for bookmarks or most visited). | 186 * Appends a tile page. |
193 * | 187 * |
194 * @param {TilePage} page The page element. | 188 * @param {TilePage} page The page element. |
195 * @param {string} title The title of the tile page. | 189 * @param {string} title The title of the tile page. |
196 * @param {bool} titleIsEditable If true, the title can be changed. | 190 * @param {bool} titleIsEditable If true, the title can be changed. |
197 * @param {TilePage} opt_refNode Optional reference node to insert in front | 191 * @param {TilePage} opt_refNode Optional reference node to insert in front |
198 * of. | 192 * of. |
199 * When opt_refNode is falsey, |page| will just be appended to the end of | 193 * When opt_refNode is falsey, |page| will just be appended to the end of |
200 * the page list. | 194 * the page list. |
201 */ | 195 */ |
202 appendTilePage: function(page, title, titleIsEditable, opt_refNode) { | 196 appendTilePage: function(page, title, titleIsEditable, opt_refNode) { |
203 // If no opt_refNode given, use bookmarksPage (if any). | |
204 if (!opt_refNode) | |
205 opt_refNode = this.bookmarksPage; | |
206 | |
207 // When opt_refNode is falsey, insertBefore acts just like appendChild. | 197 // When opt_refNode is falsey, insertBefore acts just like appendChild. |
208 this.pageList.insertBefore(page, opt_refNode); | 198 this.pageList.insertBefore(page, opt_refNode); |
209 | 199 |
210 // Remember special MostVisitedPage and BookmarksPage. | 200 // Remember special MostVisitedPage. |
211 if (typeof ntp4.MostVisitedPage != 'undefined' && | 201 if (typeof ntp4.MostVisitedPage != 'undefined' && |
212 page instanceof ntp4.MostVisitedPage) { | 202 page instanceof ntp4.MostVisitedPage) { |
213 assert(this.tilePages.length == 1, | 203 assert(this.tilePages.length == 1, |
214 'MostVisitedPage should be added as first tile page'); | 204 'MostVisitedPage should be added as first tile page'); |
215 this.mostVisitedPage = page; | 205 this.mostVisitedPage = page; |
216 } | 206 } |
217 if (typeof ntp4.BookmarksPage != 'undefined' && | |
218 page instanceof ntp4.BookmarksPage) { | |
219 this.bookmarksPage = page; | |
220 } | |
221 | 207 |
222 // If we're appending an AppsPage and it's a temporary page, animate it. | 208 // If we're appending an AppsPage and it's a temporary page, animate it. |
223 var animate = page instanceof ntp4.AppsPage && | 209 var animate = page instanceof ntp4.AppsPage && |
224 page.classList.contains('temporary'); | 210 page.classList.contains('temporary'); |
225 // Make a deep copy of the dot template to add a new one. | 211 // Make a deep copy of the dot template to add a new one. |
226 var newDot = new ntp4.NavDot(page, title, titleIsEditable, animate); | 212 var newDot = new ntp4.NavDot(page, title, titleIsEditable, animate); |
227 page.navigationDot = newDot; | 213 page.navigationDot = newDot; |
228 this.dotList.insertBefore(newDot, opt_refNode ? opt_refNode.navigationDot | 214 this.dotList.insertBefore(newDot, opt_refNode ? opt_refNode.navigationDot |
229 : null); | 215 : null); |
230 // Set a tab index on the first dot. | 216 // Set a tab index on the first dot. |
(...skipping 142 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
373 /** | 359 /** |
374 * Callback invoked by chrome whenever an app preference changes. | 360 * Callback invoked by chrome whenever an app preference changes. |
375 * @param {Object} data An object with all the data on available | 361 * @param {Object} data An object with all the data on available |
376 * applications. | 362 * applications. |
377 */ | 363 */ |
378 appsPrefChangedCallback: function(data) { | 364 appsPrefChangedCallback: function(data) { |
379 for (var i = 0; i < data.apps.length; ++i) { | 365 for (var i = 0; i < data.apps.length; ++i) { |
380 $(data.apps[i].id).appData = data.apps[i]; | 366 $(data.apps[i].id).appData = data.apps[i]; |
381 } | 367 } |
382 | 368 |
383 // Set the App dot names. Skip the first and last dots (Most Visited and | 369 // Set the App dot names. Skip the first dot (Most Visited). |
384 // Bookmarks). | |
385 var dots = this.dotList.getElementsByClassName('dot'); | 370 var dots = this.dotList.getElementsByClassName('dot'); |
386 // TODO(csilv): Remove this calcluation if/when we remove the flag for | |
387 // for the bookmarks page. | |
388 var start = this.mostVisitedPage ? 1 : 0; | 371 var start = this.mostVisitedPage ? 1 : 0; |
389 var length = this.bookmarksPage ? dots.length - 1 : dots.length; | 372 for (var i = start; i < dots.length; ++i) { |
390 for (var i = start; i < length; ++i) { | |
391 dots[i].displayTitle = data.appPageNames[i - start] || ''; | 373 dots[i].displayTitle = data.appPageNames[i - start] || ''; |
392 } | 374 } |
393 }, | 375 }, |
394 | 376 |
395 /** | 377 /** |
396 * Invoked whenever the pages in apps-page-list have changed so that | 378 * Invoked whenever the pages in apps-page-list have changed so that |
397 * the Slider knows about the new elements. | 379 * the Slider knows about the new elements. |
398 */ | 380 */ |
399 updateSliderCards: function() { | 381 updateSliderCards: function() { |
400 var pageNo = Math.min(this.cardSlider.currentCard, | 382 var pageNo = Math.min(this.cardSlider.currentCard, |
401 this.tilePages.length - 1); | 383 this.tilePages.length - 1); |
402 this.cardSlider.setCards(Array.prototype.slice.call(this.tilePages), | 384 this.cardSlider.setCards(Array.prototype.slice.call(this.tilePages), |
403 pageNo); | 385 pageNo); |
404 switch (this.shownPage) { | 386 switch (this.shownPage) { |
405 case templateData['apps_page_id']: | 387 case templateData['apps_page_id']: |
406 this.cardSlider.selectCardByValue( | 388 this.cardSlider.selectCardByValue( |
407 this.appsPages[Math.min(this.shownPageIndex, | 389 this.appsPages[Math.min(this.shownPageIndex, |
408 this.appsPages.length - 1)]); | 390 this.appsPages.length - 1)]); |
409 break; | 391 break; |
410 case templateData['bookmarks_page_id']: | |
411 if (this.bookmarksPage) | |
412 this.cardSlider.selectCardByValue(this.bookmarksPage); | |
413 break; | |
414 case templateData['most_visited_page_id']: | 392 case templateData['most_visited_page_id']: |
415 if (this.mostVisitedPage) | 393 if (this.mostVisitedPage) |
416 this.cardSlider.selectCardByValue(this.mostVisitedPage); | 394 this.cardSlider.selectCardByValue(this.mostVisitedPage); |
417 break; | 395 break; |
418 } | 396 } |
419 }, | 397 }, |
420 | 398 |
421 /** | 399 /** |
422 * Called whenever tiles should be re-arranging themselves out of the way | 400 * Called whenever tiles should be re-arranging themselves out of the way |
423 * of a moving or insert tile. | 401 * of a moving or insert tile. |
(...skipping 105 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
529 | 507 |
530 // Don't change shownPage until startup is done (and page changes actually | 508 // Don't change shownPage until startup is done (and page changes actually |
531 // reflect user actions). | 509 // reflect user actions). |
532 if (!document.documentElement.classList.contains('starting-up')) { | 510 if (!document.documentElement.classList.contains('starting-up')) { |
533 if (page.classList.contains('apps-page')) { | 511 if (page.classList.contains('apps-page')) { |
534 this.shownPage = templateData['apps_page_id']; | 512 this.shownPage = templateData['apps_page_id']; |
535 this.shownPageIndex = this.getAppsPageIndex(page); | 513 this.shownPageIndex = this.getAppsPageIndex(page); |
536 } else if (page.classList.contains('most-visited-page')) { | 514 } else if (page.classList.contains('most-visited-page')) { |
537 this.shownPage = templateData['most_visited_page_id']; | 515 this.shownPage = templateData['most_visited_page_id']; |
538 this.shownPageIndex = 0; | 516 this.shownPageIndex = 0; |
539 } else if (page.classList.contains('bookmarks-page')) { | |
540 this.shownPage = templateData['bookmarks_page_id']; | |
541 this.shownPageIndex = 0; | |
542 } else { | 517 } else { |
543 console.error('unknown page selected'); | 518 console.error('unknown page selected'); |
544 } | 519 } |
545 chrome.send('pageSelected', [this.shownPage, this.shownPageIndex]); | 520 chrome.send('pageSelected', [this.shownPage, this.shownPageIndex]); |
546 } | 521 } |
547 | 522 |
548 // Update the active dot | 523 // Update the active dot |
549 var curDot = this.dotList.getElementsByClassName('selected')[0]; | 524 var curDot = this.dotList.getElementsByClassName('selected')[0]; |
550 if (curDot) | 525 if (curDot) |
551 curDot.classList.remove('selected'); | 526 curDot.classList.remove('selected'); |
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
613 this.cardSlider.selectCard(cardIndex, true); | 588 this.cardSlider.selectCard(cardIndex, true); |
614 | 589 |
615 e.stopPropagation(); | 590 e.stopPropagation(); |
616 } | 591 } |
617 }; | 592 }; |
618 | 593 |
619 return { | 594 return { |
620 PageListView: PageListView | 595 PageListView: PageListView |
621 }; | 596 }; |
622 }); | 597 }); |
OLD | NEW |