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 cr.define('ntp', function() { | 5 cr.define('ntp', function() { |
6 'use strict'; | 6 'use strict'; |
7 | 7 |
8 //---------------------------------------------------------------------------- | 8 //---------------------------------------------------------------------------- |
| 9 // Constants |
| 10 //---------------------------------------------------------------------------- |
| 11 |
| 12 /** |
| 13 * The height required to show 2 rows of Tiles in the Bottom Panel. |
| 14 * @type {number} |
| 15 * @const |
| 16 */ |
| 17 var HEIGHT_FOR_TWO_ROWS = 275; |
| 18 |
| 19 /** |
| 20 * The height required to show the Bottom Panel. |
| 21 * @type {number} |
| 22 * @const |
| 23 */ |
| 24 var HEIGHT_FOR_BOTTOM_PANEL = 170; |
| 25 |
| 26 /** |
| 27 * The Bottom Panel width required to show 5 cols of Tiles, which is used |
| 28 * in the width computation. |
| 29 * @type {number} |
| 30 * @const |
| 31 */ |
| 32 var MAX_BOTTOM_PANEL_WIDTH = 948; |
| 33 |
| 34 /** |
| 35 * The normal Bottom Panel width. If the window width is greater than or |
| 36 * equal to this value, then the width of the Bottom Panel's content will be |
| 37 * the available width minus side margin. If the available width is smaller |
| 38 * than this value, then the width of the Bottom Panel's content will be an |
| 39 * interpolation between the normal width, and the minimum width defined by |
| 40 * the constant MIN_BOTTOM_PANEL_CONTENT_WIDTH. |
| 41 * @type {number} |
| 42 * @const |
| 43 */ |
| 44 var NORMAL_BOTTOM_PANEL_WIDTH = 500; |
| 45 |
| 46 /** |
| 47 * The minimum Bottom Panel width. If the available width is smaller than |
| 48 * this value, then the width of the Bottom Panel's content will be fixed to |
| 49 * MIN_BOTTOM_PANEL_CONTENT_WIDTH. |
| 50 * @type {number} |
| 51 * @const |
| 52 */ |
| 53 var MIN_BOTTOM_PANEL_WIDTH = 300; |
| 54 |
| 55 /** |
| 56 * The minimum width of the Bottom Panel's content. |
| 57 * @type {number} |
| 58 * @const |
| 59 */ |
| 60 var MIN_BOTTOM_PANEL_CONTENT_WIDTH = 200; |
| 61 |
| 62 //---------------------------------------------------------------------------- |
9 // Tile | 63 // Tile |
10 //---------------------------------------------------------------------------- | 64 //---------------------------------------------------------------------------- |
11 | 65 |
12 /** | 66 /** |
13 * A virtual Tile class. Each TilePage subclass should have its own Tile | 67 * A virtual Tile class. Each TilePage subclass should have its own Tile |
14 * subclass implemented too (e.g. MostVisitedPage contains MostVisited | 68 * subclass implemented too (e.g. MostVisitedPage contains MostVisited |
15 * tiles, and MostVisited is a Tile subclass). | 69 * tiles, and MostVisited is a Tile subclass). |
16 * @constructor | 70 * @constructor |
17 * @param {Object} config TilePage configuration object. | 71 * @param {Object} config TilePage configuration object. |
18 */ | 72 */ |
(...skipping 452 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
471 var width = colCount * requiredWidth - this.config_.cellMarginStart; | 525 var width = colCount * requiredWidth - this.config_.cellMarginStart; |
472 return width; | 526 return width; |
473 }, | 527 }, |
474 | 528 |
475 /** | 529 /** |
476 * Gets the bottom panel width. | 530 * Gets the bottom panel width. |
477 * @private | 531 * @private |
478 */ | 532 */ |
479 getBottomPanelWidth_: function() { | 533 getBottomPanelWidth_: function() { |
480 var windowWidth = cr.doc.documentElement.clientWidth; | 534 var windowWidth = cr.doc.documentElement.clientWidth; |
| 535 var margin = 2 * this.config_.bottomPanelHorizontalMargin; |
481 var width; | 536 var width; |
482 // TODO(pedrosimonetti): Add constants? | 537 if (windowWidth >= MAX_BOTTOM_PANEL_WIDTH) { |
483 if (windowWidth >= 948) | 538 width = MAX_BOTTOM_PANEL_WIDTH - margin; |
484 width = 748; | 539 } else if (windowWidth >= NORMAL_BOTTOM_PANEL_WIDTH) { |
485 else if (windowWidth >= 500) | 540 width = windowWidth - margin; |
486 width = windowWidth - 2 * this.config_.bottomPanelHorizontalMargin; | 541 } else if (windowWidth >= MIN_BOTTOM_PANEL_WIDTH) { |
487 else if (windowWidth >= 300) | 542 // Interpolation between the previous and next states. |
488 // TODO(pedrosimonetti): Check specification. | 543 var minMargin = MIN_BOTTOM_PANEL_WIDTH - MIN_BOTTOM_PANEL_CONTENT_WIDTH; |
489 width = Math.floor(((windowWidth - 300) / 200) * 100 + 200); | 544 var factor = (windowWidth - MIN_BOTTOM_PANEL_WIDTH) / |
490 else | 545 (NORMAL_BOTTOM_PANEL_WIDTH - MIN_BOTTOM_PANEL_WIDTH); |
491 width = 200; | 546 var interpolatedMargin = minMargin + factor * (margin - minMargin); |
| 547 width = windowWidth - interpolatedMargin; |
| 548 } else { |
| 549 width = MIN_BOTTOM_PANEL_CONTENT_WIDTH; |
| 550 } |
492 | 551 |
493 return width; | 552 return width; |
494 }, | 553 }, |
495 | 554 |
496 /** | 555 /** |
497 * Gets the number of available columns. | 556 * Gets the number of available columns. |
498 * @private | 557 * @private |
499 */ | 558 */ |
500 getAvailableColCount_: function() { | 559 getAvailableColCount_: function() { |
501 return this.getColCountForWidth_(this.getBottomPanelWidth_()); | 560 return this.getColCountForWidth_(this.getBottomPanelWidth_()); |
(...skipping 110 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
612 var colCount = this.getColCountForWidth_(bottomPanelWidth); | 671 var colCount = this.getColCountForWidth_(bottomPanelWidth); |
613 var lastColCount = this.colCount_; | 672 var lastColCount = this.colCount_; |
614 var animatingColCount = this.animatingColCount_; | 673 var animatingColCount = this.animatingColCount_; |
615 | 674 |
616 var windowHeight = cr.doc.documentElement.clientHeight; | 675 var windowHeight = cr.doc.documentElement.clientHeight; |
617 | 676 |
618 // We should not animate the very first layout, that is, when the page | 677 // We should not animate the very first layout, that is, when the page |
619 // has not been rendered. | 678 // has not been rendered. |
620 var shouldAnimate = this.hasBeenRendered(); | 679 var shouldAnimate = this.hasBeenRendered(); |
621 | 680 |
| 681 this.showBottomPanel_(windowHeight >= HEIGHT_FOR_BOTTOM_PANEL); |
| 682 |
622 // TODO(pedrosimonetti): Add constants? | 683 // TODO(pedrosimonetti): Add constants? |
623 // If the number of visible rows has changed, then we need to resize the | 684 // If the number of visible rows has changed, then we need to resize the |
624 // grid and animate the affected rows. We also need to keep track of | 685 // grid and animate the affected rows. We also need to keep track of |
625 // whether the number of visible rows has changed because we might have | 686 // whether the number of visible rows has changed because we might have |
626 // to render the grid when the number of columns hasn't changed. | 687 // to render the grid when the number of columns hasn't changed. |
627 var numberOfRowsHasChanged = false; | 688 var numberOfRowsHasChanged = false; |
628 var numOfVisibleRows = windowHeight > 500 ? 2 : 1; | 689 var numOfVisibleRows = windowHeight > HEIGHT_FOR_TWO_ROWS ? 2 : 1; |
629 if (numOfVisibleRows != this.numOfVisibleRows_) { | 690 if (numOfVisibleRows != this.numOfVisibleRows_) { |
630 this.numOfVisibleRows_ = numOfVisibleRows; | 691 this.numOfVisibleRows_ = numOfVisibleRows; |
631 numberOfRowsHasChanged = true; | 692 numberOfRowsHasChanged = true; |
632 | 693 |
633 var pageList = $('page-list'); | 694 var pageList = $('page-list'); |
634 if (shouldAnimate) | 695 if (shouldAnimate) |
635 pageList.classList.add('animate-page-height'); | 696 pageList.classList.add('animate-page-height'); |
636 | 697 |
637 // By forcing the pagination, all affected rows will be animated. | 698 // By forcing the pagination, all affected rows will be animated. |
638 this.paginate_(null, true); | 699 this.paginate_(null, true); |
(...skipping 66 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
705 | 766 |
706 this.content_.style.width = bottomPanelWidth + 'px'; | 767 this.content_.style.width = bottomPanelWidth + 'px'; |
707 | 768 |
708 this.animatingColCount_ = colCount; | 769 this.animatingColCount_ = colCount; |
709 }, | 770 }, |
710 | 771 |
711 // animation helpers | 772 // animation helpers |
712 // ------------------------------------------------------------------------- | 773 // ------------------------------------------------------------------------- |
713 | 774 |
714 /** | 775 /** |
| 776 * Animates the display the Bottom Panel. |
| 777 * @param {boolean} show Whether or not to show the Bottom Panel. |
| 778 */ |
| 779 showBottomPanel_: function(show) { |
| 780 $('card-slider-frame').classList[show ? 'remove' : 'add']( |
| 781 'hide-card-slider'); |
| 782 }, |
| 783 |
| 784 /** |
715 * Animates the display of a row. TODO(pedrosimonetti): Make it local? | 785 * Animates the display of a row. TODO(pedrosimonetti): Make it local? |
716 * @param {HTMLElement} row The row element. | 786 * @param {HTMLElement} row The row element. |
717 * @param {boolean} show Whether or not to show the row. | 787 * @param {boolean} show Whether or not to show the row. |
718 */ | 788 */ |
719 showTileRow_: function(row, show) { | 789 showTileRow_: function(row, show) { |
720 row.classList[show ? 'remove' : 'add']('hide-row'); | 790 row.classList[show ? 'remove' : 'add']('hide-row'); |
721 }, | 791 }, |
722 | 792 |
723 /** | 793 /** |
724 * Animates the display of columns. TODO(pedrosimonetti): Make it local? | 794 * Animates the display of columns. TODO(pedrosimonetti): Make it local? |
(...skipping 121 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
846 } | 916 } |
847 | 917 |
848 return { | 918 return { |
849 // TODO(pedrosimonetti): Drag. Delete after porting the rest of the code. | 919 // TODO(pedrosimonetti): Drag. Delete after porting the rest of the code. |
850 getCurrentlyDraggingTile2: deprecate, | 920 getCurrentlyDraggingTile2: deprecate, |
851 setCurrentDropEffect2: deprecate, | 921 setCurrentDropEffect2: deprecate, |
852 Tile2: Tile, | 922 Tile2: Tile, |
853 TilePage2: TilePage | 923 TilePage2: TilePage |
854 }; | 924 }; |
855 }); | 925 }); |
OLD | NEW |