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 |