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} | |
Dan Beam
2012/08/25 00:13:29
@type {number} (number is when you say 5, Number i
pedrosimonetti2
2012/08/27 18:52:52
Done.
| |
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; | |
Dan Beam
2012/08/25 00:13:29
why can't these be in CSS as max-width, min-width?
pedrosimonetti2
2012/08/27 18:52:52
Even though I could implement this particularly wi
| |
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 = this.config_.bottomPanelHorizontalMargin; | |
481 var width; | 536 var width; |
482 // TODO(pedrosimonetti): Add constants? | 537 if (windowWidth >= MAX_BOTTOM_PANEL_WIDTH) |
Dan Beam
2012/08/25 00:13:29
nit: curlies when any part of the if/else/else if
pedrosimonetti2
2012/08/27 18:52:52
Done.
| |
483 if (windowWidth >= 948) | 538 width = MAX_BOTTOM_PANEL_WIDTH - 2 * margin; |
484 width = 748; | 539 else if (windowWidth >= NORMAL_BOTTOM_PANEL_WIDTH) |
485 else if (windowWidth >= 500) | 540 width = windowWidth - 2 * 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 width = Math.floor((windowWidth - MIN_BOTTOM_PANEL_WIDTH) / |
Dan Beam
2012/08/25 00:13:29
can you use some temporary variables to help docum
pedrosimonetti2
2012/08/27 18:52:52
Done. I reviewed the entire expression again, and
| |
489 width = Math.floor(((windowWidth - 300) / 200) * 100 + 200); | 544 (NORMAL_BOTTOM_PANEL_WIDTH - MIN_BOTTOM_PANEL_WIDTH) * |
490 else | 545 (NORMAL_BOTTOM_PANEL_WIDTH - |
491 width = 200; | 546 2 * margin - MIN_BOTTOM_PANEL_CONTENT_WIDTH) + |
547 MIN_BOTTOM_PANEL_CONTENT_WIDTH); | |
548 } else | |
549 width = MIN_BOTTOM_PANEL_CONTENT_WIDTH; | |
492 | 550 |
493 return width; | 551 return width; |
494 }, | 552 }, |
495 | 553 |
496 /** | 554 /** |
497 * Gets the number of available columns. | 555 * Gets the number of available columns. |
498 * @private | 556 * @private |
499 */ | 557 */ |
500 getAvailableColCount_: function() { | 558 getAvailableColCount_: function() { |
501 return this.getColCountForWidth_(this.getBottomPanelWidth_()); | 559 return this.getColCountForWidth_(this.getBottomPanelWidth_()); |
(...skipping 103 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
605 var lastColCount = this.colCount_; | 663 var lastColCount = this.colCount_; |
606 var animatingColCount = this.animatingColCount_; | 664 var animatingColCount = this.animatingColCount_; |
607 | 665 |
608 var windowHeight = cr.doc.documentElement.clientHeight; | 666 var windowHeight = cr.doc.documentElement.clientHeight; |
609 | 667 |
610 // We should not animate the very first layout, that is, when both | 668 // We should not animate the very first layout, that is, when both |
611 // numOfVisibleRows_ and animatingColCount_ are undefined. | 669 // numOfVisibleRows_ and animatingColCount_ are undefined. |
612 var shouldAnimate = this.numOfVisibleRows_ !== undefined || | 670 var shouldAnimate = this.numOfVisibleRows_ !== undefined || |
613 this.animatingColCount_ !== undefined; | 671 this.animatingColCount_ !== undefined; |
614 | 672 |
673 this.showBottomPanel_(windowHeight >= HEIGHT_FOR_BOTTOM_PANEL); | |
674 | |
615 // TODO(pedrosimonetti): Add constants? | 675 // TODO(pedrosimonetti): Add constants? |
616 // If the number of visible rows has changed, then we need to resize the | 676 // If the number of visible rows has changed, then we need to resize the |
617 // grid and animate the affected rows. We also need to keep track of | 677 // grid and animate the affected rows. We also need to keep track of |
618 // whether the number of visible rows has changed because we might have | 678 // whether the number of visible rows has changed because we might have |
619 // to render the grid when the number of columns hasn't changed. | 679 // to render the grid when the number of columns hasn't changed. |
620 var numberOfRowsHasChanged = false; | 680 var numberOfRowsHasChanged = false; |
621 var numOfVisibleRows = windowHeight > 500 ? 2 : 1; | 681 var numOfVisibleRows = windowHeight > HEIGHT_FOR_TWO_ROWS ? 2 : 1; |
622 if (numOfVisibleRows != this.numOfVisibleRows_) { | 682 if (numOfVisibleRows != this.numOfVisibleRows_) { |
623 this.numOfVisibleRows_ = numOfVisibleRows; | 683 this.numOfVisibleRows_ = numOfVisibleRows; |
624 numberOfRowsHasChanged = true; | 684 numberOfRowsHasChanged = true; |
625 | 685 |
626 var pageList = $('page-list'); | 686 var pageList = $('page-list'); |
627 if (shouldAnimate) | 687 if (shouldAnimate) |
628 pageList.classList.add('animate-page-height'); | 688 pageList.classList.add('animate-page-height'); |
629 | 689 |
630 // By forcing the pagination, all affected rows will be animated. | 690 // By forcing the pagination, all affected rows will be animated. |
631 this.paginate_(null, true); | 691 this.paginate_(null, true); |
(...skipping 66 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
698 | 758 |
699 this.content_.style.width = bottomPanelWidth + 'px'; | 759 this.content_.style.width = bottomPanelWidth + 'px'; |
700 | 760 |
701 this.animatingColCount_ = colCount; | 761 this.animatingColCount_ = colCount; |
702 }, | 762 }, |
703 | 763 |
704 // animation helpers | 764 // animation helpers |
705 // ------------------------------------------------------------------------- | 765 // ------------------------------------------------------------------------- |
706 | 766 |
707 /** | 767 /** |
768 * Animates the display the Bottom Panel. | |
769 * @param {boolean} show Whether or not to show the Bottom Panel. | |
770 */ | |
771 showBottomPanel_: function(show) { | |
772 $('card-slider-frame').classList[show ? 'remove' : 'add']( | |
773 'hide-card-slider'); | |
774 }, | |
775 | |
776 /** | |
708 * Animates the display of a row. TODO(pedrosimonetti): Make it local? | 777 * Animates the display of a row. TODO(pedrosimonetti): Make it local? |
709 * @param {HTMLElement} row The row element. | 778 * @param {HTMLElement} row The row element. |
710 * @param {boolean} show Whether or not to show the row. | 779 * @param {boolean} show Whether or not to show the row. |
711 */ | 780 */ |
712 showTileRow_: function(row, show) { | 781 showTileRow_: function(row, show) { |
713 row.classList[show ? 'remove' : 'add']('hide-row'); | 782 row.classList[show ? 'remove' : 'add']('hide-row'); |
714 }, | 783 }, |
715 | 784 |
716 /** | 785 /** |
717 * Animates the display of columns. TODO(pedrosimonetti): Make it local? | 786 * Animates the display of columns. TODO(pedrosimonetti): Make it local? |
(...skipping 114 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
832 } | 901 } |
833 | 902 |
834 return { | 903 return { |
835 // TODO(pedrosimonetti): Drag. Delete after porting the rest of the code. | 904 // TODO(pedrosimonetti): Drag. Delete after porting the rest of the code. |
836 getCurrentlyDraggingTile2: deprecate, | 905 getCurrentlyDraggingTile2: deprecate, |
837 setCurrentDropEffect2: deprecate, | 906 setCurrentDropEffect2: deprecate, |
838 Tile2: Tile, | 907 Tile2: Tile, |
839 TilePage2: TilePage | 908 TilePage2: TilePage |
840 }; | 909 }; |
841 }); | 910 }); |
OLD | NEW |