| OLD | NEW |
| 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 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 68 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 79 */ | 79 */ |
| 80 tilePages: undefined, | 80 tilePages: undefined, |
| 81 | 81 |
| 82 /** | 82 /** |
| 83 * A list of all 'apps-page' elements. | 83 * A list of all 'apps-page' elements. |
| 84 * @type {!NodeList|undefined} | 84 * @type {!NodeList|undefined} |
| 85 */ | 85 */ |
| 86 appsPages: undefined, | 86 appsPages: undefined, |
| 87 | 87 |
| 88 /** | 88 /** |
| 89 * The Most Visited page. | |
| 90 * @type {!Element|undefined} | |
| 91 */ | |
| 92 mostVisitedPage: undefined, | |
| 93 | |
| 94 /** | |
| 95 * The 'dots-list' element. | 89 * The 'dots-list' element. |
| 96 * @type {!Element|undefined} | 90 * @type {!Element|undefined} |
| 97 */ | 91 */ |
| 98 dotList: undefined, | 92 dotList: undefined, |
| 99 | 93 |
| 100 /** | 94 /** |
| 101 * The left and right paging buttons. | 95 * The left and right paging buttons. |
| 102 * @type {!ntp.PageSwitcher|undefined} | 96 * @type {!ntp.PageSwitcher|undefined} |
| 103 */ | 97 */ |
| 104 pageSwitcherStart: undefined, | 98 pageSwitcherStart: undefined, |
| (...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 167 if (this.pageSwitcherStart) | 161 if (this.pageSwitcherStart) |
| 168 ntp.initializePageSwitcher(this.pageSwitcherStart); | 162 ntp.initializePageSwitcher(this.pageSwitcherStart); |
| 169 | 163 |
| 170 this.pageSwitcherEnd = opt_pageSwitcherEnd; | 164 this.pageSwitcherEnd = opt_pageSwitcherEnd; |
| 171 if (this.pageSwitcherEnd) | 165 if (this.pageSwitcherEnd) |
| 172 ntp.initializePageSwitcher(this.pageSwitcherEnd); | 166 ntp.initializePageSwitcher(this.pageSwitcherEnd); |
| 173 | 167 |
| 174 this.shownPage = loadTimeData.getInteger('shown_page_type'); | 168 this.shownPage = loadTimeData.getInteger('shown_page_type'); |
| 175 this.shownPageIndex = loadTimeData.getInteger('shown_page_index'); | 169 this.shownPageIndex = loadTimeData.getInteger('shown_page_index'); |
| 176 | 170 |
| 177 if (loadTimeData.getBoolean('showApps')) { | 171 // TODO(dbeam): remove showApps and everything that says if (apps). |
| 178 // Request data on the apps so we can fill them in. | 172 assert(loadTimeData.getBoolean('showApps')); |
| 179 // Note that this is kicked off asynchronously. 'getAppsCallback' will | |
| 180 // be invoked at some point after this function returns. | |
| 181 chrome.send('getApps'); | |
| 182 } else { | |
| 183 // No apps page. | |
| 184 if (this.shownPage == loadTimeData.getInteger('apps_page_id')) { | |
| 185 this.setShownPage_( | |
| 186 loadTimeData.getInteger('most_visited_page_id'), 0); | |
| 187 } | |
| 188 | 173 |
| 189 document.body.classList.add('bare-minimum'); | 174 // Request data on the apps so we can fill them in. |
| 190 } | 175 // Note that this is kicked off asynchronously. 'getAppsCallback' will |
| 176 // be invoked at some point after this function returns. |
| 177 chrome.send('getApps'); |
| 191 | 178 |
| 192 document.addEventListener('keydown', this.onDocKeyDown_.bind(this)); | 179 document.addEventListener('keydown', this.onDocKeyDown_.bind(this)); |
| 193 | 180 |
| 194 this.tilePages = this.pageList.getElementsByClassName('tile-page'); | 181 this.tilePages = this.pageList.getElementsByClassName('tile-page'); |
| 195 this.appsPages = this.pageList.getElementsByClassName('apps-page'); | 182 this.appsPages = this.pageList.getElementsByClassName('apps-page'); |
| 196 | 183 |
| 197 // Initialize the cardSlider without any cards at the moment. | 184 // Initialize the cardSlider without any cards at the moment. |
| 198 this.sliderFrame = cardSliderFrame; | 185 this.sliderFrame = cardSliderFrame; |
| 199 this.cardSlider = new cr.ui.CardSlider(this.sliderFrame, this.pageList, | 186 this.cardSlider = new cr.ui.CardSlider(this.sliderFrame, this.pageList, |
| 200 this.sliderFrame.offsetWidth); | 187 this.sliderFrame.offsetWidth); |
| (...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 252 * the page list. | 239 * the page list. |
| 253 */ | 240 */ |
| 254 appendTilePage: function(page, title, titleIsEditable, opt_refNode) { | 241 appendTilePage: function(page, title, titleIsEditable, opt_refNode) { |
| 255 if (opt_refNode) { | 242 if (opt_refNode) { |
| 256 var refIndex = this.getTilePageIndex(opt_refNode); | 243 var refIndex = this.getTilePageIndex(opt_refNode); |
| 257 this.cardSlider.addCardAtIndex(page, refIndex); | 244 this.cardSlider.addCardAtIndex(page, refIndex); |
| 258 } else { | 245 } else { |
| 259 this.cardSlider.appendCard(page); | 246 this.cardSlider.appendCard(page); |
| 260 } | 247 } |
| 261 | 248 |
| 262 // Remember special MostVisitedPage. | |
| 263 if (typeof ntp.MostVisitedPage != 'undefined' && | |
| 264 page instanceof ntp.MostVisitedPage) { | |
| 265 assert(this.tilePages.length == 1, | |
| 266 'MostVisitedPage should be added as first tile page'); | |
| 267 this.mostVisitedPage = page; | |
| 268 } | |
| 269 | |
| 270 // If we're appending an AppsPage and it's a temporary page, animate it. | 249 // If we're appending an AppsPage and it's a temporary page, animate it. |
| 271 var animate = page instanceof ntp.AppsPage && | 250 var animate = page instanceof ntp.AppsPage && |
| 272 page.classList.contains('temporary'); | 251 page.classList.contains('temporary'); |
| 273 // Make a deep copy of the dot template to add a new one. | 252 // Make a deep copy of the dot template to add a new one. |
| 274 var newDot = new ntp.NavDot(page, title, titleIsEditable, animate); | 253 var newDot = new ntp.NavDot(page, title, titleIsEditable, animate); |
| 275 page.navigationDot = newDot; | 254 page.navigationDot = newDot; |
| 276 this.dotList.insertBefore(newDot, | 255 this.dotList.insertBefore(newDot, |
| 277 opt_refNode ? opt_refNode.navigationDot : null); | 256 opt_refNode ? opt_refNode.navigationDot : null); |
| 278 // Set a tab index on the first dot. | 257 // Set a tab index on the first dot. |
| 279 if (this.dotList.dots.length == 1) | 258 if (this.dotList.dots.length == 1) |
| (...skipping 202 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 482 * @param {Object} data An object with all the data on available | 461 * @param {Object} data An object with all the data on available |
| 483 * applications. | 462 * applications. |
| 484 */ | 463 */ |
| 485 appsPrefChangedCallback: function(data) { | 464 appsPrefChangedCallback: function(data) { |
| 486 assert(loadTimeData.getBoolean('showApps')); | 465 assert(loadTimeData.getBoolean('showApps')); |
| 487 | 466 |
| 488 for (var i = 0; i < data.apps.length; ++i) { | 467 for (var i = 0; i < data.apps.length; ++i) { |
| 489 $(data.apps[i].id).appData = data.apps[i]; | 468 $(data.apps[i].id).appData = data.apps[i]; |
| 490 } | 469 } |
| 491 | 470 |
| 492 // Set the App dot names. Skip the first dot (Most Visited). | 471 // Set the App dot names. |
| 493 var dots = this.dotList.getElementsByClassName('dot'); | 472 var dots = this.dotList.getElementsByClassName('dot'); |
| 494 var start = this.mostVisitedPage ? 1 : 0; | 473 for (var i = 0; i < dots.length; ++i) { |
| 495 for (var i = start; i < dots.length; ++i) { | |
| 496 dots[i].displayTitle = data.appPageNames[i - start] || ''; | 474 dots[i].displayTitle = data.appPageNames[i - start] || ''; |
| 497 } | 475 } |
| 498 }, | 476 }, |
| 499 | 477 |
| 500 /** | 478 /** |
| 501 * Callback invoked by chrome whenever the app launcher promo pref changes. | 479 * Callback invoked by chrome whenever the app launcher promo pref changes. |
| 502 * @param {boolean} show Identifies if we should show or hide the promo. | 480 * @param {boolean} show Identifies if we should show or hide the promo. |
| 503 */ | 481 */ |
| 504 appLauncherPromoPrefChangeCallback: function(show) { | 482 appLauncherPromoPrefChangeCallback: function(show) { |
| 505 loadTimeData.overrideValues({showAppLauncherPromo: show}); | 483 loadTimeData.overrideValues({showAppLauncherPromo: show}); |
| (...skipping 12 matching lines...) Expand all Loading... |
| 518 | 496 |
| 519 /** | 497 /** |
| 520 * Invoked whenever the pages in apps-page-list have changed so that | 498 * Invoked whenever the pages in apps-page-list have changed so that |
| 521 * the Slider knows about the new elements. | 499 * the Slider knows about the new elements. |
| 522 */ | 500 */ |
| 523 updateSliderCards: function() { | 501 updateSliderCards: function() { |
| 524 var pageNo = Math.max(0, Math.min(this.cardSlider.currentCard, | 502 var pageNo = Math.max(0, Math.min(this.cardSlider.currentCard, |
| 525 this.tilePages.length - 1)); | 503 this.tilePages.length - 1)); |
| 526 this.cardSlider.setCards(Array.prototype.slice.call(this.tilePages), | 504 this.cardSlider.setCards(Array.prototype.slice.call(this.tilePages), |
| 527 pageNo); | 505 pageNo); |
| 528 if (this.shownPage == loadTimeData.getInteger('most_visited_page_id')) { | |
| 529 if (this.mostVisitedPage) | |
| 530 this.cardSlider.selectCardByValue(this.mostVisitedPage); | |
| 531 else | |
| 532 this.shownPage = loadTimeData.getInteger('apps_page_id'); | |
| 533 } | |
| 534 if (this.shownPage == loadTimeData.getInteger('apps_page_id') && | 506 if (this.shownPage == loadTimeData.getInteger('apps_page_id') && |
| 535 loadTimeData.getBoolean('showApps')) { | 507 loadTimeData.getBoolean('showApps')) { |
| 536 this.cardSlider.selectCardByValue( | 508 this.cardSlider.selectCardByValue( |
| 537 this.appsPages[Math.min(this.shownPageIndex, | 509 this.appsPages[Math.min(this.shownPageIndex, |
| 538 this.appsPages.length - 1)]); | 510 this.appsPages.length - 1)]); |
| 539 } else if (this.mostVisitedPage) { | |
| 540 this.shownPage = loadTimeData.getInteger('most_visited_page_id'); | |
| 541 this.cardSlider.selectCardByValue(this.mostVisitedPage); | |
| 542 } | 511 } |
| 543 }, | 512 }, |
| 544 | 513 |
| 545 /** | 514 /** |
| 546 * Called whenever tiles should be re-arranging themselves out of the way | 515 * Called whenever tiles should be re-arranging themselves out of the way |
| 547 * of a moving or insert tile. | 516 * of a moving or insert tile. |
| 548 */ | 517 */ |
| 549 enterRearrangeMode: function() { | 518 enterRearrangeMode: function() { |
| 550 if (loadTimeData.getBoolean('showApps')) { | 519 if (loadTimeData.getBoolean('showApps')) { |
| 551 var tempPage = new ntp.AppsPage(); | 520 var tempPage = new ntp.AppsPage(); |
| (...skipping 106 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 658 */ | 627 */ |
| 659 onCardChanged_: function(e) { | 628 onCardChanged_: function(e) { |
| 660 var page = e.cardSlider.currentCardValue; | 629 var page = e.cardSlider.currentCardValue; |
| 661 | 630 |
| 662 // Don't change shownPage until startup is done (and page changes actually | 631 // Don't change shownPage until startup is done (and page changes actually |
| 663 // reflect user actions). | 632 // reflect user actions). |
| 664 if (!this.isStartingUp_()) { | 633 if (!this.isStartingUp_()) { |
| 665 if (page.classList.contains('apps-page')) { | 634 if (page.classList.contains('apps-page')) { |
| 666 this.setShownPage_(loadTimeData.getInteger('apps_page_id'), | 635 this.setShownPage_(loadTimeData.getInteger('apps_page_id'), |
| 667 this.getAppsPageIndex(page)); | 636 this.getAppsPageIndex(page)); |
| 668 } else if (page.classList.contains('most-visited-page')) { | |
| 669 this.setShownPage_( | |
| 670 loadTimeData.getInteger('most_visited_page_id'), 0); | |
| 671 } else { | 637 } else { |
| 672 console.error('unknown page selected'); | 638 console.error('unknown page selected'); |
| 673 } | 639 } |
| 674 } | 640 } |
| 675 | 641 |
| 676 // Update the active dot | 642 // Update the active dot |
| 677 var curDot = this.dotList.getElementsByClassName('selected')[0]; | 643 var curDot = this.dotList.getElementsByClassName('selected')[0]; |
| 678 if (curDot) | 644 if (curDot) |
| 679 curDot.classList.remove('selected'); | 645 curDot.classList.remove('selected'); |
| 680 page.navigationDot.classList.add('selected'); | 646 page.navigationDot.classList.add('selected'); |
| (...skipping 130 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 811 if (page.navigationDot) | 777 if (page.navigationDot) |
| 812 page.navigationDot.remove(opt_animate); | 778 page.navigationDot.remove(opt_animate); |
| 813 this.cardSlider.removeCard(page); | 779 this.cardSlider.removeCard(page); |
| 814 }, | 780 }, |
| 815 }; | 781 }; |
| 816 | 782 |
| 817 return { | 783 return { |
| 818 PageListView: PageListView | 784 PageListView: PageListView |
| 819 }; | 785 }; |
| 820 }); | 786 }); |
| OLD | NEW |