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 // We can't pass the currently dragging tile via dataTransfer because of | 8 // We can't pass the currently dragging tile via dataTransfer because of |
9 // http://crbug.com/31037 | 9 // http://crbug.com/31037 |
10 var currentlyDraggingTile = null; | 10 var currentlyDraggingTile = null; |
(...skipping 482 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
493 /** | 493 /** |
494 * Returns the width of the scrollbar, in pixels, if it is active, or 0 | 494 * Returns the width of the scrollbar, in pixels, if it is active, or 0 |
495 * otherwise. | 495 * otherwise. |
496 * @type {number} | 496 * @type {number} |
497 */ | 497 */ |
498 get scrollbarWidth() { | 498 get scrollbarWidth() { |
499 return this.scrollbar_.hidden ? 0 : 13; | 499 return this.scrollbar_.hidden ? 0 : 13; |
500 }, | 500 }, |
501 | 501 |
502 /** | 502 /** |
503 * The notification content of this tile (if any, otherwise null). | |
504 * @type {!HTMLElement} | |
505 */ | |
506 get notification() { | |
507 return this.topMargin_.nextElementSibling.id == 'notification-container' ? | |
508 this.topMargin_.nextElementSibling : null; | |
509 }, | |
510 /** | |
511 * The notification content of this tile (if any, otherwise null). | |
512 * @type {!HTMLElement} | |
513 */ | |
514 set notification(node) { | |
515 assert(node instanceof HTMLElement, '|node| isn\'t an HTMLElement!'); | |
516 // NOTE: Implicitly removes from DOM if |node| is inside it. | |
517 this.content_.insertBefore(node, this.topMargin_.nextElementSibling); | |
518 this.positionNotification_(); | |
519 }, | |
520 | |
521 /** | |
522 * Fetches the size, in pixels, of the padding-top of the tile contents. | 503 * Fetches the size, in pixels, of the padding-top of the tile contents. |
523 * @type {number} | 504 * @type {number} |
524 */ | 505 */ |
525 get contentPadding() { | 506 get contentPadding() { |
526 if (typeof this.contentPadding_ == 'undefined') { | 507 if (typeof this.contentPadding_ == 'undefined') { |
527 this.contentPadding_ = | 508 this.contentPadding_ = |
528 parseInt(window.getComputedStyle(this.content_).paddingTop, 10); | 509 parseInt(window.getComputedStyle(this.content_).paddingTop, 10); |
529 } | 510 } |
530 return this.contentPadding_; | 511 return this.contentPadding_; |
531 }, | 512 }, |
(...skipping 429 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
961 return; | 942 return; |
962 } | 943 } |
963 | 944 |
964 this.calculateLayoutValues_(); | 945 this.calculateLayoutValues_(); |
965 | 946 |
966 this.lastWidth_ = this.clientWidth; | 947 this.lastWidth_ = this.clientWidth; |
967 this.lastHeight_ = this.clientHeight; | 948 this.lastHeight_ = this.clientHeight; |
968 this.classList.add('animating-tile-page'); | 949 this.classList.add('animating-tile-page'); |
969 this.heightChanged_(); | 950 this.heightChanged_(); |
970 | 951 |
971 this.positionNotification_(); | |
972 this.repositionTiles_(); | 952 this.repositionTiles_(); |
973 }, | 953 }, |
974 | 954 |
975 /** | 955 /** |
976 * The tile grid has an image mask which fades at the edges. We only show | 956 * The tile grid has an image mask which fades at the edges. We only show |
977 * the mask when there is an active drag; it obscures doppleganger tiles | 957 * the mask when there is an active drag; it obscures doppleganger tiles |
978 * as they enter or exit the grid. | 958 * as they enter or exit the grid. |
979 * @private | 959 * @private |
980 */ | 960 */ |
981 updateMask_: function() { | 961 updateMask_: function() { |
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1037 this.topMargin_.style.marginBottom = toCssPx(this.animatedTopMarginPx_); | 1017 this.topMargin_.style.marginBottom = toCssPx(this.animatedTopMarginPx_); |
1038 } | 1018 } |
1039 | 1019 |
1040 this.topMarginIsForWide_ = layout.wide; | 1020 this.topMarginIsForWide_ = layout.wide; |
1041 this.topMarginPx_ = newMargin; | 1021 this.topMarginPx_ = newMargin; |
1042 this.topMargin_.style.marginTop = | 1022 this.topMargin_.style.marginTop = |
1043 toCssPx(this.topMarginPx_ - this.animatedTopMarginPx_); | 1023 toCssPx(this.topMarginPx_ - this.animatedTopMarginPx_); |
1044 }, | 1024 }, |
1045 | 1025 |
1046 /** | 1026 /** |
1047 * Position the notification if there's one showing. | |
1048 */ | |
1049 positionNotification_: function() { | |
1050 var notification = this.notification; | |
1051 if (!notification || notification.hidden) | |
1052 return; | |
1053 | |
1054 // Update the horizontal position. | |
1055 var animatedLeftMargin = this.getAnimatedLeftMargin_(); | |
1056 notification.style.WebkitMarginStart = animatedLeftMargin + 'px'; | |
1057 var leftOffset = (this.layoutValues_.leftMargin - animatedLeftMargin) * | |
1058 (isRTL() ? -1 : 1); | |
1059 notification.style.WebkitTransform = 'translateX(' + leftOffset + 'px)'; | |
1060 | |
1061 // Update the allowable widths of the text. | |
1062 var buttonWidth = notification.querySelector('button').offsetWidth + 8; | |
1063 notification.querySelector('span').style.maxWidth = | |
1064 this.layoutValues_.gridWidth - buttonWidth + 'px'; | |
1065 | |
1066 // This makes sure the text doesn't condense smaller than the narrow size | |
1067 // of the grid (e.g. when a user makes the window really small). | |
1068 notification.style.minWidth = | |
1069 this.gridValues_.narrowWidth - buttonWidth + 'px'; | |
1070 | |
1071 // Update the top position. | |
1072 notification.style.marginTop = -notification.offsetHeight + 'px'; | |
1073 }, | |
1074 | |
1075 /** | |
1076 * Handles final setup that can only happen after |this| is inserted into | 1027 * Handles final setup that can only happen after |this| is inserted into |
1077 * the page. | 1028 * the page. |
1078 * @private | 1029 * @private |
1079 */ | 1030 */ |
1080 onNodeInsertedIntoDocument_: function(e) { | 1031 onNodeInsertedIntoDocument_: function(e) { |
1081 this.calculateLayoutValues_(); | 1032 this.calculateLayoutValues_(); |
1082 this.heightChanged_(); | 1033 this.heightChanged_(); |
1083 }, | 1034 }, |
1084 | 1035 |
1085 /** | 1036 /** |
(...skipping 288 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1374 }; | 1325 }; |
1375 | 1326 |
1376 return { | 1327 return { |
1377 getCurrentlyDraggingTile: getCurrentlyDraggingTile, | 1328 getCurrentlyDraggingTile: getCurrentlyDraggingTile, |
1378 setCurrentDropEffect: setCurrentDropEffect, | 1329 setCurrentDropEffect: setCurrentDropEffect, |
1379 // Not used outside, just for usage in JSDoc inside this file. | 1330 // Not used outside, just for usage in JSDoc inside this file. |
1380 Tile: Tile, | 1331 Tile: Tile, |
1381 TilePage: TilePage, | 1332 TilePage: TilePage, |
1382 }; | 1333 }; |
1383 }); | 1334 }); |
OLD | NEW |