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