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 maximum window height required to show 2 rows of Tiles in the Bottom | |
jeremycho_google
2012/08/23 01:09:28
minimum
pedrosimonetti2
2012/08/24 00:22:15
Done.
| |
14 * Section. If the height is bigger than this value, 2 rows will be displayed. | |
15 * @type {Number} | |
16 * @const | |
17 */ | |
18 var MAX_WINDOW_HEIGHT = 275; | |
jeremycho_google
2012/08/23 01:09:28
To me, this sounds like the window can't be larger
pedrosimonetti2
2012/08/24 00:22:15
Done.
| |
19 | |
20 /** | |
21 * The minimum window height required to show the Bottom Section. If the | |
22 * height is smaller than this value, the Bottom Section will be hidden. | |
23 * @type {Number} | |
24 * @const | |
25 */ | |
26 var MIN_WINDOW_HEIGHT = 170; | |
jeremycho_google
2012/08/23 01:09:28
See above comment, maybe BOTTOM_SECTION_WINDOW_HEI
pedrosimonetti2
2012/08/24 00:22:15
Done.
| |
27 | |
28 /** | |
29 * The maximum window width required to show 5 cols of Tiles in the Bottom | |
jeremycho_google
2012/08/23 01:09:28
minimum
pedrosimonetti2
2012/08/24 00:22:15
Done.
| |
30 * Section. If the width is bigger than this value, 5 cols will be displayed. | |
jeremycho_google
2012/08/23 01:09:28
Shouldn't this be used in getColCountForWidth_ the
pedrosimonetti2
2012/08/24 00:22:15
I don't think so because getColCountForWidth_ will
| |
31 * @type {Number} | |
32 * @const | |
33 */ | |
34 var MAX_WINDOW_WIDTH = 948; | |
jeremycho_google
2012/08/23 01:09:28
Maybe LARGE_WINDOW_WIDTH?
jeremycho_google
2012/08/23 01:09:28
This value is also used in the bottom section widt
pedrosimonetti2
2012/08/24 00:22:15
Done.
pedrosimonetti2
2012/08/24 00:22:15
I'm not sure if I understand what you mean by "thi
jeremycho_google
2012/08/24 00:54:42
Not done?
On 2012/08/24 00:22:15, pedrosimonetti w
jeremycho_google
2012/08/24 00:54:42
Sorry, what I meant was - can you give a comment e
| |
35 | |
36 /** | |
37 * The medium window width. If the window width is greater than or equal to | |
38 * this value, then the Bottom Section width will be the window width minus | |
jeremycho_google
2012/08/23 01:09:28
Stick with either Bottom Section or Bottom Panel e
pedrosimonetti2
2012/08/24 00:22:15
Done.
| |
39 * the Bottom Panel's side margin, which we'll call the default width. If the | |
40 * window is smaller than this value, then the Bottom Section's width will | |
41 * be an interpolation between the default width, and the minimum width | |
42 * defined by the constant MIN_BOTTOM_SECTION_WIDTH. | |
43 * @type {Number} | |
44 * @const | |
45 */ | |
46 var MED_WINDOW_WIDTH = 500; | |
47 | |
48 /** | |
49 * The minimum window width. If the window is smaller than this value, then | |
50 * the Bottom Section width will be fixed to MIN_BOTTOM_SECTION_WIDTH. | |
51 * @type {Number} | |
52 * @const | |
53 */ | |
54 var MIN_WINDOW_WIDTH = 300; | |
jeremycho_google
2012/08/23 01:09:28
Maybe SMALL_WINDOW_WIDTH?
pedrosimonetti2
2012/08/24 00:22:15
Done.
jeremycho_google
2012/08/24 00:54:42
Not done?
On 2012/08/24 00:22:15, pedrosimonetti w
| |
55 | |
56 /** | |
57 * The minimum Bottom Section width, which will be used when the window width | |
58 * is smaller than MIN_WINDOW_WIDTH. | |
59 * @type {Number} | |
60 * @const | |
61 */ | |
62 var MIN_BOTTOM_SECTION_WIDTH = 200; | |
63 | |
64 //---------------------------------------------------------------------------- | |
9 // Tile | 65 // Tile |
10 //---------------------------------------------------------------------------- | 66 //---------------------------------------------------------------------------- |
11 | 67 |
12 /** | 68 /** |
13 * A virtual Tile class. Each TilePage subclass should have its own Tile | 69 * A virtual Tile class. Each TilePage subclass should have its own Tile |
14 * subclass implemented too (e.g. MostVisitedPage contains MostVisited | 70 * subclass implemented too (e.g. MostVisitedPage contains MostVisited |
15 * tiles, and MostVisited is a Tile subclass). | 71 * tiles, and MostVisited is a Tile subclass). |
16 * @constructor | 72 * @constructor |
17 * @param {Object} config TilePage configuration object. | 73 * @param {Object} config TilePage configuration object. |
18 */ | 74 */ |
(...skipping 486 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
505 var width = colCount * requiredWidth - this.config_.cellMarginStart; | 561 var width = colCount * requiredWidth - this.config_.cellMarginStart; |
506 return width; | 562 return width; |
507 }, | 563 }, |
508 | 564 |
509 /** | 565 /** |
510 * Gets the bottom panel width. | 566 * Gets the bottom panel width. |
511 * @private | 567 * @private |
512 */ | 568 */ |
513 getBottomPanelWidth_: function() { | 569 getBottomPanelWidth_: function() { |
514 var windowWidth = cr.doc.documentElement.clientWidth; | 570 var windowWidth = cr.doc.documentElement.clientWidth; |
571 var margin = this.config_.bottomPanelHorizontalMargin; | |
515 var width; | 572 var width; |
516 // TODO(pedrosimonetti): Add constants? | 573 if (windowWidth >= MAX_WINDOW_WIDTH) |
517 if (windowWidth >= 948) | 574 width = MAX_WINDOW_WIDTH - 2 * margin; |
518 width = 748; | 575 else if (windowWidth >= MED_WINDOW_WIDTH) |
519 else if (windowWidth >= 500) | 576 width = windowWidth - 2 * margin; |
520 width = windowWidth - 2 * this.config_.bottomPanelHorizontalMargin; | 577 else if (windowWidth >= MIN_WINDOW_WIDTH) |
jeremycho_google
2012/08/23 01:09:28
Add curlies, since this is multi-line?
pedrosimonetti2
2012/08/24 00:22:15
Done.
| |
521 else if (windowWidth >= 300) | 578 // Interpolation between the previous and next states. |
522 // TODO(pedrosimonetti): Check specification. | 579 width = Math.floor((windowWidth - MIN_WINDOW_WIDTH) / |
523 width = Math.floor(((windowWidth - 300) / 200) * 100 + 200); | 580 (MED_WINDOW_WIDTH - MIN_WINDOW_WIDTH) * |
581 (MED_WINDOW_WIDTH - 2 * margin - MIN_BOTTOM_SECTION_WIDTH) + | |
582 MIN_BOTTOM_SECTION_WIDTH); | |
524 else | 583 else |
525 width = 200; | 584 width = MIN_BOTTOM_SECTION_WIDTH; |
526 | 585 |
527 return width; | 586 return width; |
528 }, | 587 }, |
529 | 588 |
530 /** | 589 /** |
531 * Gets the number of available columns. | 590 * Gets the number of available columns. |
532 * @private | 591 * @private |
533 */ | 592 */ |
534 getAvailableColCount_: function() { | 593 getAvailableColCount_: function() { |
535 return this.getColCountForWidth_(this.getBottomPanelWidth_()); | 594 return this.getColCountForWidth_(this.getBottomPanelWidth_()); |
(...skipping 102 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
638 | 697 |
639 var bottomPanelWidth = this.getBottomPanelWidth_(); | 698 var bottomPanelWidth = this.getBottomPanelWidth_(); |
640 var colCount = this.getColCountForWidth_(bottomPanelWidth); | 699 var colCount = this.getColCountForWidth_(bottomPanelWidth); |
641 var lastColCount = this.colCount_; | 700 var lastColCount = this.colCount_; |
642 var animatingColCount = this.animatingColCount_; | 701 var animatingColCount = this.animatingColCount_; |
643 | 702 |
644 var windowHeight = cr.doc.documentElement.clientHeight; | 703 var windowHeight = cr.doc.documentElement.clientHeight; |
645 | 704 |
646 this.tileGridContent_.classList.add('animate-tile'); | 705 this.tileGridContent_.classList.add('animate-tile'); |
647 | 706 |
648 // TODO(pedrosimonetti): Better handling of height state. | 707 this.showBottomSection_(windowHeight < MIN_WINDOW_HEIGHT); |
649 // TODO(pedrosimonetti): Add constants? | 708 |
650 var numOfVisibleRows = windowHeight > 500 ? 2 : 1; | 709 var numOfVisibleRows = windowHeight > MAX_WINDOW_HEIGHT ? 2 : 1; |
jeremycho_google
2012/08/23 01:09:28
When windowHeight < MIN_WINDOW_HEIGHT, should numO
pedrosimonetti2
2012/08/24 00:22:15
I thought about this too. Even though zero rows ar
jeremycho_google
2012/08/24 00:54:42
Ok, makes sense.
On 2012/08/24 00:22:15, pedrosimo
| |
651 if (numOfVisibleRows != this.numOfVisibleRows_) { | 710 if (numOfVisibleRows != this.numOfVisibleRows_) { |
652 this.numOfVisibleRows_ = numOfVisibleRows; | 711 this.numOfVisibleRows_ = numOfVisibleRows; |
653 this.paginate_(null, true); | 712 this.paginate_(null, true); |
654 $('page-list').style.height = | 713 $('page-list').style.height = |
655 (this.config_.rowHeight * numOfVisibleRows) + 'px'; | 714 (this.config_.rowHeight * numOfVisibleRows) + 'px'; |
656 } | 715 } |
657 | 716 |
658 // changeVisibleCols | 717 // changeVisibleCols |
659 if (colCount != animatingColCount) { | 718 if (colCount != animatingColCount) { |
660 var newWidth = this.getWidthForColCount_(colCount); | 719 var newWidth = this.getWidthForColCount_(colCount); |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
699 | 758 |
700 this.content_.style.width = bottomPanelWidth + 'px'; | 759 this.content_.style.width = bottomPanelWidth + 'px'; |
701 | 760 |
702 this.animatingColCount_ = colCount; | 761 this.animatingColCount_ = colCount; |
703 }, | 762 }, |
704 | 763 |
705 // animation helpers | 764 // animation helpers |
706 // ------------------------------------------------------------------------- | 765 // ------------------------------------------------------------------------- |
707 | 766 |
708 /** | 767 /** |
768 * Animates the display the Bottom Section. | |
769 * @param {boolean} show Whether or not to show the Bottom Section. | |
770 */ | |
771 showBottomSection_: function(show) { | |
jeremycho_google
2012/08/23 01:09:28
Shouldn't the parameter be 'hide'? Maybe make thi
pedrosimonetti2
2012/08/24 00:22:15
I changed the implementation so it uses a show par
| |
772 $('card-slider-frame'). | |
jeremycho_google
2012/08/23 01:09:28
nit: I think it's more typical to line-break on a
pedrosimonetti2
2012/08/24 00:22:15
Done.
| |
773 classList[show ? 'add' : 'remove']('hide-card-slider'); | |
774 }, | |
775 | |
776 /** | |
709 * Animates the display of a row. TODO(pedrosimonetti): Make it local? | 777 * Animates the display of a row. TODO(pedrosimonetti): Make it local? |
710 * @param {HTMLElement} row The row element. | 778 * @param {HTMLElement} row The row element. |
711 * @param {boolean} show Whether or not to show the row. | 779 * @param {boolean} show Whether or not to show the row. |
712 */ | 780 */ |
713 showTileRow_: function(row, show) { | 781 showTileRow_: function(row, show) { |
714 row.classList[show ? 'remove' : 'add']('hide-row'); | 782 row.classList[show ? 'remove' : 'add']('hide-row'); |
715 }, | 783 }, |
716 | 784 |
717 /** | 785 /** |
718 * Animates the display of columns. TODO(pedrosimonetti): Make it local? | 786 * Animates the display of columns. TODO(pedrosimonetti): Make it local? |
(...skipping 90 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
809 } | 877 } |
810 | 878 |
811 return { | 879 return { |
812 // TODO(pedrosimonetti): Drag. Delete after porting the rest of the code. | 880 // TODO(pedrosimonetti): Drag. Delete after porting the rest of the code. |
813 getCurrentlyDraggingTile2: deprecate, | 881 getCurrentlyDraggingTile2: deprecate, |
814 setCurrentDropEffect2: deprecate, | 882 setCurrentDropEffect2: deprecate, |
815 Tile2: Tile, | 883 Tile2: Tile, |
816 TilePage2: TilePage | 884 TilePage2: TilePage |
817 }; | 885 }; |
818 }); | 886 }); |
OLD | NEW |