| 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 |