| 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 |