| OLD | NEW |
| 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2011 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('ntp4', function() { | 5 cr.define('ntp4', 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 272 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 283 */ | 283 */ |
| 284 onDragCloneTransitionEnd_: function(e) { | 284 onDragCloneTransitionEnd_: function(e) { |
| 285 if (this.classList.contains('dragging') && | 285 if (this.classList.contains('dragging') && |
| 286 (e.propertyName == 'left' || e.propertyName == 'top' || | 286 (e.propertyName == 'left' || e.propertyName == 'top' || |
| 287 e.propertyName == '-webkit-transform')) { | 287 e.propertyName == '-webkit-transform')) { |
| 288 this.finalizeDrag_(); | 288 this.finalizeDrag_(); |
| 289 } | 289 } |
| 290 }, | 290 }, |
| 291 | 291 |
| 292 /** | 292 /** |
| 293 * Called when an app is removed from Chrome. Animates its disappearance. | 293 * Called when a tile is removed from a tilePage. Animates its disappearance |
| 294 * if |opt_animate| is truthy. |
| 295 * @param {=boolean} opt_animate Whether the removal should be animated. |
| 296 * @param {=boolean} opt_dontDelete Whether we should auto-delete an empty |
| 297 * apps page if the last tile is removed. |
| 298 * @return {Element} The tile being removed. |
| 294 */ | 299 */ |
| 295 doRemove: function() { | 300 remove: function(opt_animate, opt_dontDelete) { |
| 296 this.firstChild.classList.add('removing-tile-contents'); | 301 var owningPage = this.tilePage; |
| 302 if (opt_animate) |
| 303 owningPage.classList.add('animating-tile-page'); |
| 304 this.parentNode.removeChild(this); |
| 305 owningPage.calculateLayoutValues_(); |
| 306 owningPage.cleanupDrag(); |
| 307 if (owningPage instanceof ntp4.AppsPage && !opt_dontDelete) |
| 308 ntp4.removeAppsPageIfEmpty(owningPage, opt_animate); |
| 309 return this; |
| 297 }, | 310 }, |
| 298 | 311 |
| 299 /** | 312 /** |
| 300 * Callback for the webkitAnimationEnd event on the tile's contents. | 313 * Callback for the webkitAnimationEnd event on the tile's contents. |
| 301 * @param {Event} e The event object. | 314 * @param {Event} e The event object. |
| 302 */ | 315 */ |
| 303 onContentsAnimationEnd_: function(e) { | 316 onContentsAnimationEnd_: function(e) { |
| 304 if (this.firstChild.classList.contains('new-tile-contents')) | 317 if (this.firstChild.classList.contains('new-tile-contents')) |
| 305 this.firstChild.classList.remove('new-tile-contents'); | 318 this.firstChild.classList.remove('new-tile-contents'); |
| 306 if (this.firstChild.classList.contains('removing-tile-contents')) | 319 if (this.firstChild.classList.contains('removing-tile-contents')) |
| 307 this.tilePage.removeTile(this, true); | 320 this.remove(true); |
| 308 }, | 321 }, |
| 309 }; | 322 }; |
| 310 | 323 |
| 311 /** | 324 /** |
| 312 * Gives the proportion of the row width that is devoted to a single icon. | 325 * Gives the proportion of the row width that is devoted to a single icon. |
| 313 * @param {number} rowTileCount The number of tiles in a row. | 326 * @param {number} rowTileCount The number of tiles in a row. |
| 314 * @param {number} tileSpacingFraction The proportion of the tile width which | 327 * @param {number} tileSpacingFraction The proportion of the tile width which |
| 315 * will be used as spacing between tiles. | 328 * will be used as spacing between tiles. |
| 316 * @return {number} The ratio between icon width and row width. | 329 * @return {number} The ratio between icon width and row width. |
| 317 */ | 330 */ |
| (...skipping 173 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 491 /** | 504 /** |
| 492 * Returns any extra padding to insert to the bottom of a tile page. By | 505 * Returns any extra padding to insert to the bottom of a tile page. By |
| 493 * default there is none, but subclasses can override. | 506 * default there is none, but subclasses can override. |
| 494 * @type {number} | 507 * @type {number} |
| 495 */ | 508 */ |
| 496 get extraBottomPadding() { | 509 get extraBottomPadding() { |
| 497 return 0; | 510 return 0; |
| 498 }, | 511 }, |
| 499 | 512 |
| 500 /** | 513 /** |
| 514 * Removes the tilePage from the DOM and cleans up event handlers. |
| 515 */ |
| 516 remove: function() { |
| 517 // This checks arguments.length as most remove functions have a boolean |
| 518 // |opt_animate| argument, but that's not necesarilly applicable to |
| 519 // removing a tilePage. Selecting a different card in an animated way and |
| 520 // deleting the card afterward is probably a better choice. |
| 521 assert(typeof arguments[0] != 'boolean', |
| 522 'This function takes no |opt_animate| argument.'); |
| 523 assert(this.tileCount == 0, 'Only removal of an empty page is allowed.'); |
| 524 this.tearDown_(); |
| 525 this.parentNode.removeChild(this); |
| 526 }, |
| 527 |
| 528 /** |
| 501 * Cleans up resources that are no longer needed after this TilePage | 529 * Cleans up resources that are no longer needed after this TilePage |
| 502 * instance is removed from the DOM. | 530 * instance is removed from the DOM. |
| 531 * @private |
| 503 */ | 532 */ |
| 504 tearDown: function() { | 533 tearDown_: function() { |
| 505 this.eventTracker.removeAll(); | 534 this.eventTracker.removeAll(); |
| 506 }, | 535 }, |
| 507 | 536 |
| 508 /** | 537 /** |
| 509 * Appends a tile to the end of the tile grid. | 538 * Appends a tile to the end of the tile grid. |
| 510 * @param {HTMLElement} tileElement The contents of the tile. | 539 * @param {HTMLElement} tileElement The contents of the tile. |
| 511 * @param {?boolean} animate If true, the append will be animated. | 540 * @param {?boolean} animate If true, the append will be animated. |
| 512 * @protected | 541 * @protected |
| 513 */ | 542 */ |
| 514 appendTile: function(tileElement, animate) { | 543 appendTile: function(tileElement, animate) { |
| (...skipping 19 matching lines...) Expand all Loading... |
| 534 this.tileGrid_.insertBefore(wrapperDiv, | 563 this.tileGrid_.insertBefore(wrapperDiv, |
| 535 this.tileElements_[index]); | 564 this.tileElements_[index]); |
| 536 } | 565 } |
| 537 this.calculateLayoutValues_(); | 566 this.calculateLayoutValues_(); |
| 538 this.heightChanged_(); | 567 this.heightChanged_(); |
| 539 | 568 |
| 540 this.positionTile_(index); | 569 this.positionTile_(index); |
| 541 }, | 570 }, |
| 542 | 571 |
| 543 /** | 572 /** |
| 544 * Removes the given tile and animates the respositioning of the other | |
| 545 * tiles. | |
| 546 * @param {HTMLElement} tile The tile to remove from |tileGrid_|. | |
| 547 * @param {?boolean} animate If true, remaining tiles will animate. | |
| 548 */ | |
| 549 removeTile: function(tile, animate) { | |
| 550 if (animate) | |
| 551 this.classList.add('animating-tile-page'); | |
| 552 var index = tile.index; | |
| 553 tile.parentNode.removeChild(tile); | |
| 554 this.calculateLayoutValues_(); | |
| 555 this.cleanupDrag(); | |
| 556 }, | |
| 557 | |
| 558 /** | |
| 559 * Removes all tiles from the page. | 573 * Removes all tiles from the page. |
| 560 */ | 574 */ |
| 561 removeAllTiles: function() { | 575 removeAllTiles: function() { |
| 562 this.tileGrid_.innerHTML = ''; | 576 this.tileGrid_.innerHTML = ''; |
| 563 }, | 577 }, |
| 564 | 578 |
| 565 /** | 579 /** |
| 566 * Called when the page is selected (in the card selector). | 580 * Called when the page is selected (in the card selector). |
| 567 * @param {Event} e A custom cardselected event. | 581 * @param {Event} e A custom cardselected event. |
| 568 * @private | 582 * @private |
| (...skipping 542 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1111 (index > this.dragItemIndex_ ? 1 : 0); | 1125 (index > this.dragItemIndex_ ? 1 : 0); |
| 1112 if (this.withinPageDrag_) { | 1126 if (this.withinPageDrag_) { |
| 1113 this.tileGrid_.insertBefore( | 1127 this.tileGrid_.insertBefore( |
| 1114 currentlyDraggingTile, | 1128 currentlyDraggingTile, |
| 1115 this.tileElements_[adjustedIndex]); | 1129 this.tileElements_[adjustedIndex]); |
| 1116 this.tileMoved(currentlyDraggingTile, this.dragItemIndex_); | 1130 this.tileMoved(currentlyDraggingTile, this.dragItemIndex_); |
| 1117 } else { | 1131 } else { |
| 1118 var originalPage = currentlyDraggingTile ? | 1132 var originalPage = currentlyDraggingTile ? |
| 1119 currentlyDraggingTile.tilePage : null; | 1133 currentlyDraggingTile.tilePage : null; |
| 1120 this.addDragData(e.dataTransfer, adjustedIndex); | 1134 this.addDragData(e.dataTransfer, adjustedIndex); |
| 1121 if (originalPage) | 1135 if (originalPage) { |
| 1122 originalPage.cleanupDrag(); | 1136 originalPage.cleanupDrag(); |
| 1137 if (originalPage instanceof ntp4.AppsPage) |
| 1138 ntp4.removeAppsPageIfEmpty(originalPage, true); |
| 1139 } |
| 1123 } | 1140 } |
| 1124 | 1141 |
| 1125 // Dropping the icon may cause topMargin to change, but changing it | 1142 // Dropping the icon may cause topMargin to change, but changing it |
| 1126 // now would cause everything to move (annoying), so we leave it | 1143 // now would cause everything to move (annoying), so we leave it |
| 1127 // alone. The top margin will be re-calculated next time the window is | 1144 // alone. The top margin will be re-calculated next time the window is |
| 1128 // resized or the page is selected. | 1145 // resized or the page is selected. |
| 1129 } | 1146 } |
| 1130 | 1147 |
| 1131 this.classList.remove('animating-tile-page'); | 1148 this.classList.remove('animating-tile-page'); |
| 1132 this.cleanupDrag(); | 1149 this.cleanupDrag(); |
| 1133 }, | 1150 }, |
| 1134 | 1151 |
| 1135 /** | 1152 /** |
| 1136 * Appends the currently dragged tile to the end of the page. Called | 1153 * Appends the currently dragged tile to the end of the page. Called |
| 1137 * from outside the page, e.g. when dropping on a nav dot. | 1154 * from outside the page, e.g. when dropping on a nav dot. |
| 1138 */ | 1155 */ |
| 1139 appendDraggingTile: function() { | 1156 appendDraggingTile: function() { |
| 1140 var originalPage = currentlyDraggingTile.tilePage; | 1157 var originalPage = currentlyDraggingTile.tilePage; |
| 1141 if (originalPage == this) | 1158 if (originalPage == this) |
| 1142 return; | 1159 return; |
| 1143 | 1160 |
| 1144 this.addDragData(null, this.tileElements_.length); | 1161 this.addDragData(null, this.tileElements_.length); |
| 1145 originalPage.cleanupDrag(); | 1162 if (originalPage instanceof ntp4.AppsPage) |
| 1163 ntp4.removeAppsPageIfEmpty(originalPage, true); |
| 1164 if (originalPage) |
| 1165 originalPage.cleanupDrag(); |
| 1146 }, | 1166 }, |
| 1147 | 1167 |
| 1148 /** | 1168 /** |
| 1149 * Makes sure all the tiles are in the right place after a drag is over. | 1169 * Makes sure all the tiles are in the right place after a drag is over. |
| 1150 */ | 1170 */ |
| 1151 cleanupDrag: function() { | 1171 cleanupDrag: function() { |
| 1152 this.repositionTiles_(currentlyDraggingTile); | 1172 this.repositionTiles_(currentlyDraggingTile); |
| 1153 // Remove the drag mask. | 1173 // Remove the drag mask. |
| 1154 this.updateMask_(); | 1174 this.updateMask_(); |
| 1155 }, | 1175 }, |
| (...skipping 74 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1230 assert(false); | 1250 assert(false); |
| 1231 }, | 1251 }, |
| 1232 }; | 1252 }; |
| 1233 | 1253 |
| 1234 return { | 1254 return { |
| 1235 getCurrentlyDraggingTile: getCurrentlyDraggingTile, | 1255 getCurrentlyDraggingTile: getCurrentlyDraggingTile, |
| 1236 setCurrentDropEffect: setCurrentDropEffect, | 1256 setCurrentDropEffect: setCurrentDropEffect, |
| 1237 TilePage: TilePage, | 1257 TilePage: TilePage, |
| 1238 }; | 1258 }; |
| 1239 }); | 1259 }); |
| OLD | NEW |