| 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 102 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 113 e.dataTransfer.effectAllowed = 'copyMove'; | 113 e.dataTransfer.effectAllowed = 'copyMove'; |
| 114 this.firstChild.setDragData(e.dataTransfer); | 114 this.firstChild.setDragData(e.dataTransfer); |
| 115 | 115 |
| 116 // The drag clone is the node we use as a representation during the drag. | 116 // The drag clone is the node we use as a representation during the drag. |
| 117 // It's attached to the top level document element so that it floats above | 117 // It's attached to the top level document element so that it floats above |
| 118 // image masks. | 118 // image masks. |
| 119 this.dragClone = this.cloneNode(true); | 119 this.dragClone = this.cloneNode(true); |
| 120 this.dragClone.style.right = ''; | 120 this.dragClone.style.right = ''; |
| 121 this.dragClone.classList.add('drag-representation'); | 121 this.dragClone.classList.add('drag-representation'); |
| 122 $('card-slider-frame').appendChild(this.dragClone); | 122 $('card-slider-frame').appendChild(this.dragClone); |
| 123 this.eventTracker.add(this.dragClone, 'webkitTransitionEnd', | 123 this.eventTracker.add( |
| 124 this.onDragCloneTransitionEnd_.bind(this)); | 124 this.dragClone, 'webkitTransitionEnd', |
| 125 this.onDragCloneTransitionEnd_.bind(this)); |
| 125 | 126 |
| 126 this.classList.add('dragging'); | 127 this.classList.add('dragging'); |
| 127 // offsetLeft is mirrored in RTL. Un-mirror it. | 128 // offsetLeft is mirrored in RTL. Un-mirror it. |
| 128 var offsetLeft = isRTL() ? | 129 var offsetLeft = isRTL() ? this.parentNode.clientWidth - this.offsetLeft : |
| 129 this.parentNode.clientWidth - this.offsetLeft : | 130 this.offsetLeft; |
| 130 this.offsetLeft; | |
| 131 this.dragOffsetX = e.x - offsetLeft - this.parentNode.offsetLeft; | 131 this.dragOffsetX = e.x - offsetLeft - this.parentNode.offsetLeft; |
| 132 this.dragOffsetY = e.y - this.offsetTop - | 132 this.dragOffsetY = e.y - this.offsetTop - |
| 133 // Unlike offsetTop, this value takes scroll position into account. | 133 // Unlike offsetTop, this value takes scroll position into account. |
| 134 this.parentNode.getBoundingClientRect().top; | 134 this.parentNode.getBoundingClientRect().top; |
| 135 | 135 |
| 136 this.onDragMove_(e); | 136 this.onDragMove_(e); |
| 137 }, | 137 }, |
| 138 | 138 |
| 139 /** | 139 /** |
| 140 * The handler for drag events fired on |this|. | 140 * The handler for drag events fired on |this|. |
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 173 this.dragClone.classList.add('deleting'); | 173 this.dragClone.classList.add('deleting'); |
| 174 } else if (tilePage) { | 174 } else if (tilePage) { |
| 175 // TODO(dbeam): Until we fix dropEffect to the correct behavior it will | 175 // TODO(dbeam): Until we fix dropEffect to the correct behavior it will |
| 176 // differ on windows - crbug.com/39399. That's why we use the custom | 176 // differ on windows - crbug.com/39399. That's why we use the custom |
| 177 // this.lastDropEffect instead of e.dataTransfer.dropEffect. | 177 // this.lastDropEffect instead of e.dataTransfer.dropEffect. |
| 178 if (tilePage.selected && this.lastDropEffect != 'copy') { | 178 if (tilePage.selected && this.lastDropEffect != 'copy') { |
| 179 // The drag clone can still be hidden from the last drag move event. | 179 // The drag clone can still be hidden from the last drag move event. |
| 180 this.dragClone.hidden = false; | 180 this.dragClone.hidden = false; |
| 181 // The tile's contents may have moved following the respositioning; | 181 // The tile's contents may have moved following the respositioning; |
| 182 // adjust for that. | 182 // adjust for that. |
| 183 var contentDiffX = this.dragClone.firstChild.offsetLeft - | 183 var contentDiffX = |
| 184 this.firstChild.offsetLeft; | 184 this.dragClone.firstChild.offsetLeft - this.firstChild.offsetLeft; |
| 185 var contentDiffY = this.dragClone.firstChild.offsetTop - | 185 var contentDiffY = |
| 186 this.firstChild.offsetTop; | 186 this.dragClone.firstChild.offsetTop - this.firstChild.offsetTop; |
| 187 this.dragClone.style.left = | 187 this.dragClone.style.left = |
| 188 toCssPx(this.gridX + this.parentNode.offsetLeft - | 188 toCssPx(this.gridX + this.parentNode.offsetLeft - contentDiffX); |
| 189 contentDiffX); | 189 this.dragClone.style.top = toCssPx( |
| 190 this.dragClone.style.top = | 190 this.gridY + this.parentNode.getBoundingClientRect().top - |
| 191 toCssPx(this.gridY + | 191 contentDiffY); |
| 192 this.parentNode.getBoundingClientRect().top - | |
| 193 contentDiffY); | |
| 194 } else if (this.dragClone.hidden) { | 192 } else if (this.dragClone.hidden) { |
| 195 this.finalizeDrag_(); | 193 this.finalizeDrag_(); |
| 196 } else { | 194 } else { |
| 197 // The CSS3 transitions spec intentionally leaves it up to individual | 195 // The CSS3 transitions spec intentionally leaves it up to individual |
| 198 // user agents to determine when styles should be applied. On some | 196 // user agents to determine when styles should be applied. On some |
| 199 // platforms (at the moment, Windows), when you apply both classes | 197 // platforms (at the moment, Windows), when you apply both classes |
| 200 // immediately a transition may not occur correctly. That's why we're | 198 // immediately a transition may not occur correctly. That's why we're |
| 201 // using a setTimeout here to queue adding the class until the | 199 // using a setTimeout here to queue adding the class until the |
| 202 // previous class (currently: .placing) sets up a transition. | 200 // previous class (currently: .placing) sets up a transition. |
| 203 // http://dev.w3.org/csswg/css3-transitions/#starting | 201 // http://dev.w3.org/csswg/css3-transitions/#starting |
| (...skipping 27 matching lines...) Expand all Loading... |
| 231 for (var i = 0; i < clonelets.length; i++) { | 229 for (var i = 0; i < clonelets.length; i++) { |
| 232 clonelets[i].classList.remove('real'); | 230 clonelets[i].classList.remove('real'); |
| 233 } | 231 } |
| 234 | 232 |
| 235 this.appendChild(clone); | 233 this.appendChild(clone); |
| 236 this.doppleganger_ = clone; | 234 this.doppleganger_ = clone; |
| 237 | 235 |
| 238 if (isRTL()) | 236 if (isRTL()) |
| 239 x *= -1; | 237 x *= -1; |
| 240 | 238 |
| 241 this.doppleganger_.style.WebkitTransform = 'translate(' + x + 'px, ' + | 239 this.doppleganger_.style.WebkitTransform = |
| 242 y + 'px)'; | 240 'translate(' + x + 'px, ' + y + 'px)'; |
| 243 }, | 241 }, |
| 244 | 242 |
| 245 /** | 243 /** |
| 246 * Destroys the current doppleganger. | 244 * Destroys the current doppleganger. |
| 247 */ | 245 */ |
| 248 clearDoppleganger: function() { | 246 clearDoppleganger: function() { |
| 249 if (this.doppleganger_) { | 247 if (this.doppleganger_) { |
| 250 this.removeChild(this.doppleganger_); | 248 this.removeChild(this.doppleganger_); |
| 251 this.doppleganger_ = null; | 249 this.doppleganger_ = null; |
| 252 } | 250 } |
| (...skipping 118 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 371 } | 369 } |
| 372 | 370 |
| 373 /** | 371 /** |
| 374 * Takes a collection of grid layout pixel values and updates them with | 372 * Takes a collection of grid layout pixel values and updates them with |
| 375 * additional tiling values that are calculated from TilePage constants. | 373 * additional tiling values that are calculated from TilePage constants. |
| 376 * @param {Object} grid The grid layout pixel values to update. | 374 * @param {Object} grid The grid layout pixel values to update. |
| 377 */ | 375 */ |
| 378 TilePage.initGridValues = function(grid) { | 376 TilePage.initGridValues = function(grid) { |
| 379 // The amount of space we need to display a narrow grid (all narrow grids | 377 // The amount of space we need to display a narrow grid (all narrow grids |
| 380 // are this size). | 378 // are this size). |
| 381 grid.narrowWidth = | 379 grid.narrowWidth = grid.minTileWidth * |
| 382 grid.minTileWidth * tileWidthFraction(grid.minColCount, | 380 tileWidthFraction(grid.minColCount, grid.tileSpacingFraction); |
| 383 grid.tileSpacingFraction); | |
| 384 // The minimum amount of space we need to display a wide grid. | 381 // The minimum amount of space we need to display a wide grid. |
| 385 grid.minWideWidth = | 382 grid.minWideWidth = grid.minTileWidth * |
| 386 grid.minTileWidth * tileWidthFraction(grid.maxColCount, | 383 tileWidthFraction(grid.maxColCount, grid.tileSpacingFraction); |
| 387 grid.tileSpacingFraction); | |
| 388 // The largest we will ever display a wide grid. | 384 // The largest we will ever display a wide grid. |
| 389 grid.maxWideWidth = | 385 grid.maxWideWidth = grid.maxTileWidth * |
| 390 grid.maxTileWidth * tileWidthFraction(grid.maxColCount, | 386 tileWidthFraction(grid.maxColCount, grid.tileSpacingFraction); |
| 391 grid.tileSpacingFraction); | |
| 392 // Tile-related pixel values for the narrow display. | 387 // Tile-related pixel values for the narrow display. |
| 393 grid.narrowTileValues = tileValuesForGrid(grid.narrowWidth, | 388 grid.narrowTileValues = tileValuesForGrid( |
| 394 grid.minColCount, | 389 grid.narrowWidth, grid.minColCount, grid.tileSpacingFraction); |
| 395 grid.tileSpacingFraction); | |
| 396 // Tile-related pixel values for the minimum narrow display. | 390 // Tile-related pixel values for the minimum narrow display. |
| 397 grid.wideTileValues = tileValuesForGrid(grid.minWideWidth, | 391 grid.wideTileValues = tileValuesForGrid( |
| 398 grid.maxColCount, | 392 grid.minWideWidth, grid.maxColCount, grid.tileSpacingFraction); |
| 399 grid.tileSpacingFraction); | |
| 400 }; | 393 }; |
| 401 | 394 |
| 402 TilePage.prototype = { | 395 TilePage.prototype = { |
| 403 __proto__: HTMLDivElement.prototype, | 396 __proto__: HTMLDivElement.prototype, |
| 404 | 397 |
| 405 initialize: function() { | 398 initialize: function() { |
| 406 this.className = 'tile-page'; | 399 this.className = 'tile-page'; |
| 407 | 400 |
| 408 // Div that acts as a custom scrollbar. The scrollbar has to live | 401 // Div that acts as a custom scrollbar. The scrollbar has to live |
| 409 // outside the content div so it doesn't flicker when scrolling (due to | 402 // outside the content div so it doesn't flicker when scrolling (due to |
| (...skipping 14 matching lines...) Expand all Loading... |
| 424 // Div that sets the vertical position of the tile grid. | 417 // Div that sets the vertical position of the tile grid. |
| 425 this.topMargin_ = this.ownerDocument.createElement('div'); | 418 this.topMargin_ = this.ownerDocument.createElement('div'); |
| 426 this.topMargin_.className = 'top-margin'; | 419 this.topMargin_.className = 'top-margin'; |
| 427 this.content_.appendChild(this.topMargin_); | 420 this.content_.appendChild(this.topMargin_); |
| 428 | 421 |
| 429 // Div that holds the tiles. | 422 // Div that holds the tiles. |
| 430 this.tileGrid_ = this.ownerDocument.createElement('div'); | 423 this.tileGrid_ = this.ownerDocument.createElement('div'); |
| 431 this.tileGrid_.className = 'tile-grid'; | 424 this.tileGrid_.className = 'tile-grid'; |
| 432 this.tileGrid_.style.minWidth = this.gridValues_.narrowWidth + 'px'; | 425 this.tileGrid_.style.minWidth = this.gridValues_.narrowWidth + 'px'; |
| 433 this.tileGrid_.setAttribute('role', 'menu'); | 426 this.tileGrid_.setAttribute('role', 'menu'); |
| 434 this.tileGrid_.setAttribute('aria-label', | 427 this.tileGrid_.setAttribute( |
| 435 loadTimeData.getString( | 428 'aria-label', loadTimeData.getString( |
| 436 'tile_grid_screenreader_accessible_description')); | 429 'tile_grid_screenreader_accessible_description')); |
| 437 | 430 |
| 438 this.content_.appendChild(this.tileGrid_); | 431 this.content_.appendChild(this.tileGrid_); |
| 439 | 432 |
| 440 // Ordered list of our tiles. | 433 // Ordered list of our tiles. |
| 441 this.tileElements_ = this.tileGrid_.getElementsByClassName('tile real'); | 434 this.tileElements_ = this.tileGrid_.getElementsByClassName('tile real'); |
| 442 // Ordered list of the elements which want to accept keyboard focus. These | 435 // Ordered list of the elements which want to accept keyboard focus. These |
| 443 // elements will not be a part of the normal tab order; the tile grid | 436 // elements will not be a part of the normal tab order; the tile grid |
| 444 // initially gets focused and then these elements can be focused via the | 437 // initially gets focused and then these elements can be focused via the |
| 445 // arrow keys. | 438 // arrow keys. |
| 446 this.focusableElements_ = | 439 this.focusableElements_ = |
| 447 this.tileGrid_.getElementsByClassName('focusable'); | 440 this.tileGrid_.getElementsByClassName('focusable'); |
| 448 | 441 |
| 449 // These are properties used in updateTopMargin. | 442 // These are properties used in updateTopMargin. |
| 450 this.animatedTopMarginPx_ = 0; | 443 this.animatedTopMarginPx_ = 0; |
| 451 this.topMarginPx_ = 0; | 444 this.topMarginPx_ = 0; |
| 452 | 445 |
| 453 this.eventTracker = new EventTracker(); | 446 this.eventTracker = new EventTracker(); |
| 454 this.eventTracker.add(window, 'resize', this.onResize_.bind(this)); | 447 this.eventTracker.add(window, 'resize', this.onResize_.bind(this)); |
| 455 | 448 |
| 456 this.addEventListener('DOMNodeInsertedIntoDocument', | 449 this.addEventListener( |
| 457 this.onNodeInsertedIntoDocument_); | 450 'DOMNodeInsertedIntoDocument', this.onNodeInsertedIntoDocument_); |
| 458 | 451 |
| 459 this.content_.addEventListener('scroll', this.onScroll_.bind(this)); | 452 this.content_.addEventListener('scroll', this.onScroll_.bind(this)); |
| 460 | 453 |
| 461 this.dragWrapper_ = new cr.ui.DragWrapper(this.tileGrid_, this); | 454 this.dragWrapper_ = new cr.ui.DragWrapper(this.tileGrid_, this); |
| 462 | 455 |
| 463 this.addEventListener('cardselected', this.handleCardSelection_); | 456 this.addEventListener('cardselected', this.handleCardSelection_); |
| 464 this.addEventListener('carddeselected', this.handleCardDeselection_); | 457 this.addEventListener('carddeselected', this.handleCardDeselection_); |
| 465 this.addEventListener('focus', this.handleFocus_); | 458 this.addEventListener('focus', this.handleFocus_); |
| 466 this.addEventListener('keydown', this.handleKeyDown_); | 459 this.addEventListener('keydown', this.handleKeyDown_); |
| 467 this.addEventListener('mousedown', this.handleMouseDown_); | 460 this.addEventListener('mousedown', this.handleMouseDown_); |
| (...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 515 /** | 508 /** |
| 516 * Removes the tilePage from the DOM and cleans up event handlers. | 509 * Removes the tilePage from the DOM and cleans up event handlers. |
| 517 * | 510 * |
| 518 * TODO(dbeam): this method now conflicts with HTMLElement#remove(). Rename. | 511 * TODO(dbeam): this method now conflicts with HTMLElement#remove(). Rename. |
| 519 */ | 512 */ |
| 520 remove: function() { | 513 remove: function() { |
| 521 // This checks arguments.length as most remove functions have a boolean | 514 // This checks arguments.length as most remove functions have a boolean |
| 522 // |opt_animate| argument, but that's not necesarilly applicable to | 515 // |opt_animate| argument, but that's not necesarilly applicable to |
| 523 // removing a tilePage. Selecting a different card in an animated way and | 516 // removing a tilePage. Selecting a different card in an animated way and |
| 524 // deleting the card afterward is probably a better choice. | 517 // deleting the card afterward is probably a better choice. |
| 525 assert(typeof arguments[0] != 'boolean', | 518 assert( |
| 526 'This function takes no |opt_animate| argument.'); | 519 typeof arguments[0] != 'boolean', |
| 520 'This function takes no |opt_animate| argument.'); |
| 527 this.tearDown_(); | 521 this.tearDown_(); |
| 528 this.parentNode.removeChild(this); | 522 this.parentNode.removeChild(this); |
| 529 }, | 523 }, |
| 530 | 524 |
| 531 /** | 525 /** |
| 532 * Cleans up resources that are no longer needed after this TilePage | 526 * Cleans up resources that are no longer needed after this TilePage |
| 533 * instance is removed from the DOM. | 527 * instance is removed from the DOM. |
| 534 * @private | 528 * @private |
| 535 */ | 529 */ |
| 536 tearDown_: function() { | 530 tearDown_: function() { |
| (...skipping 136 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 673 this.updateFocusElement_(); | 667 this.updateFocusElement_(); |
| 674 }, | 668 }, |
| 675 | 669 |
| 676 /** | 670 /** |
| 677 * Since we are doing custom focus handling, we have to manually | 671 * Since we are doing custom focus handling, we have to manually |
| 678 * set focusability on click (as well as keyboard nav above). | 672 * set focusability on click (as well as keyboard nav above). |
| 679 * @param {Event} e The focus event. | 673 * @param {Event} e The focus event. |
| 680 * @private | 674 * @private |
| 681 */ | 675 */ |
| 682 handleMouseDown_: function(e) { | 676 handleMouseDown_: function(e) { |
| 683 var focusable = findAncestorByClass(/** @type {Element} */(e.target), | 677 var focusable = |
| 684 'focusable'); | 678 findAncestorByClass(/** @type {Element} */ (e.target), 'focusable'); |
| 685 if (focusable) { | 679 if (focusable) { |
| 686 this.focusElementIndex_ = | 680 this.focusElementIndex_ = |
| 687 Array.prototype.indexOf.call(this.focusableElements_, | 681 Array.prototype.indexOf.call(this.focusableElements_, focusable); |
| 688 focusable); | |
| 689 this.updateFocusElement_(); | 682 this.updateFocusElement_(); |
| 690 } | 683 } |
| 691 }, | 684 }, |
| 692 | 685 |
| 693 /** | 686 /** |
| 694 * Handle arrow key focus nav. | 687 * Handle arrow key focus nav. |
| 695 * @param {Event} e The focus event. | 688 * @param {Event} e The focus event. |
| 696 * @private | 689 * @private |
| 697 */ | 690 */ |
| 698 handleKeyDown_: function(e) { | 691 handleKeyDown_: function(e) { |
| 699 // We only handle up, down, left, right without control keys. | 692 // We only handle up, down, left, right without control keys. |
| 700 if (e.metaKey || e.shiftKey || e.altKey || e.ctrlKey) | 693 if (e.metaKey || e.shiftKey || e.altKey || e.ctrlKey) |
| 701 return; | 694 return; |
| 702 | 695 |
| 703 // Wrap the given index to |this.focusableElements_|. | 696 // Wrap the given index to |this.focusableElements_|. |
| 704 var wrap = function(idx) { | 697 var wrap = function(idx) { |
| 705 return (idx + this.focusableElements_.length) % | 698 return (idx + this.focusableElements_.length) % |
| 706 this.focusableElements_.length; | 699 this.focusableElements_.length; |
| 707 }.bind(this); | 700 }.bind(this); |
| 708 | 701 |
| 709 switch (e.key) { | 702 switch (e.key) { |
| 710 case 'ArrowRight': | 703 case 'ArrowRight': |
| 711 case 'ArrowLeft': | 704 case 'ArrowLeft': |
| 712 var direction = e.key == 'ArrowRight' ? 1 : -1; | 705 var direction = e.key == 'ArrowRight' ? 1 : -1; |
| 713 this.focusElementIndex_ = wrap(this.focusElementIndex_ + direction); | 706 this.focusElementIndex_ = wrap(this.focusElementIndex_ + direction); |
| 714 break; | 707 break; |
| 715 case 'ArrowUp': | 708 case 'ArrowUp': |
| 716 case 'ArrowDown': | 709 case 'ArrowDown': |
| 717 // Look through all focusable elements. Find the first one that is | 710 // Look through all focusable elements. Find the first one that is |
| 718 // in the same column. | 711 // in the same column. |
| 719 var direction = e.key == 'ArrowUp' ? -1 : 1; | 712 var direction = e.key == 'ArrowUp' ? -1 : 1; |
| 720 var currentIndex = | 713 var currentIndex = Array.prototype.indexOf.call( |
| 721 Array.prototype.indexOf.call(this.focusableElements_, | 714 this.focusableElements_, this.currentFocusElement_); |
| 722 this.currentFocusElement_); | |
| 723 var newFocusIdx = wrap(currentIndex + direction); | 715 var newFocusIdx = wrap(currentIndex + direction); |
| 724 var tile = this.currentFocusElement_.parentNode; | 716 var tile = this.currentFocusElement_.parentNode; |
| 725 for (;; newFocusIdx = wrap(newFocusIdx + direction)) { | 717 for (;; newFocusIdx = wrap(newFocusIdx + direction)) { |
| 726 var newTile = this.focusableElements_[newFocusIdx].parentNode; | 718 var newTile = this.focusableElements_[newFocusIdx].parentNode; |
| 727 var rowTiles = this.layoutValues_.numRowTiles; | 719 var rowTiles = this.layoutValues_.numRowTiles; |
| 728 if ((newTile.index - tile.index) % rowTiles == 0) | 720 if ((newTile.index - tile.index) % rowTiles == 0) |
| 729 break; | 721 break; |
| 730 } | 722 } |
| 731 | 723 |
| 732 this.focusElementIndex_ = newFocusIdx; | 724 this.focusElementIndex_ = newFocusIdx; |
| (...skipping 14 matching lines...) Expand all Loading... |
| 747 * make the focusable element at this.focusElementIndex_ (if any) eligible | 739 * make the focusable element at this.focusElementIndex_ (if any) eligible |
| 748 * for tab focus, and the previously-focused element not eligible. | 740 * for tab focus, and the previously-focused element not eligible. |
| 749 * @protected | 741 * @protected |
| 750 */ | 742 */ |
| 751 updateFocusableElement: function() { | 743 updateFocusableElement: function() { |
| 752 if (this.focusableElements_.length == 0 || !this.selected) { | 744 if (this.focusableElements_.length == 0 || !this.selected) { |
| 753 this.focusElementIndex_ = -1; | 745 this.focusElementIndex_ = -1; |
| 754 return; | 746 return; |
| 755 } | 747 } |
| 756 | 748 |
| 757 this.focusElementIndex_ = Math.min(this.focusableElements_.length - 1, | 749 this.focusElementIndex_ = |
| 758 this.focusElementIndex_); | 750 Math.min(this.focusableElements_.length - 1, this.focusElementIndex_); |
| 759 this.focusElementIndex_ = Math.max(0, this.focusElementIndex_); | 751 this.focusElementIndex_ = Math.max(0, this.focusElementIndex_); |
| 760 | 752 |
| 761 var newFocusElement = this.focusableElements_[this.focusElementIndex_]; | 753 var newFocusElement = this.focusableElements_[this.focusElementIndex_]; |
| 762 var lastFocusElement = this.currentFocusElement_; | 754 var lastFocusElement = this.currentFocusElement_; |
| 763 if (lastFocusElement && lastFocusElement != newFocusElement) | 755 if (lastFocusElement && lastFocusElement != newFocusElement) |
| 764 lastFocusElement.tabIndex = -1; | 756 lastFocusElement.tabIndex = -1; |
| 765 | 757 |
| 766 newFocusElement.tabIndex = 1; | 758 newFocusElement.tabIndex = 1; |
| 767 }, | 759 }, |
| 768 | 760 |
| (...skipping 24 matching lines...) Expand all Loading... |
| 793 * hidden, but call before being shown. | 785 * hidden, but call before being shown. |
| 794 * @private | 786 * @private |
| 795 */ | 787 */ |
| 796 calculateLayoutValues_: function() { | 788 calculateLayoutValues_: function() { |
| 797 var grid = this.gridValues_; | 789 var grid = this.gridValues_; |
| 798 var availableSpace = this.tileGrid_.clientWidth - 2 * MIN_WIDE_MARGIN; | 790 var availableSpace = this.tileGrid_.clientWidth - 2 * MIN_WIDE_MARGIN; |
| 799 var wide = availableSpace >= grid.minWideWidth; | 791 var wide = availableSpace >= grid.minWideWidth; |
| 800 var numRowTiles = wide ? grid.maxColCount : grid.minColCount; | 792 var numRowTiles = wide ? grid.maxColCount : grid.minColCount; |
| 801 | 793 |
| 802 var effectiveGridWidth = wide ? | 794 var effectiveGridWidth = wide ? |
| 803 Math.min(Math.max(availableSpace, grid.minWideWidth), | 795 Math.min( |
| 804 grid.maxWideWidth) : | 796 Math.max(availableSpace, grid.minWideWidth), grid.maxWideWidth) : |
| 805 grid.narrowWidth; | 797 grid.narrowWidth; |
| 806 var realTileValues = tileValuesForGrid(effectiveGridWidth, numRowTiles, | 798 var realTileValues = tileValuesForGrid( |
| 807 grid.tileSpacingFraction); | 799 effectiveGridWidth, numRowTiles, grid.tileSpacingFraction); |
| 808 | 800 |
| 809 // leftMargin centers the grid within the avaiable space. | 801 // leftMargin centers the grid within the avaiable space. |
| 810 var minMargin = wide ? MIN_WIDE_MARGIN : 0; | 802 var minMargin = wide ? MIN_WIDE_MARGIN : 0; |
| 811 var leftMargin = | 803 var leftMargin = Math.max( |
| 812 Math.max(minMargin, | 804 minMargin, (this.tileGrid_.clientWidth - effectiveGridWidth) / 2); |
| 813 (this.tileGrid_.clientWidth - effectiveGridWidth) / 2); | |
| 814 | 805 |
| 815 var rowHeight = this.heightForWidth(realTileValues.tileWidth) + | 806 var rowHeight = this.heightForWidth(realTileValues.tileWidth) + |
| 816 realTileValues.interTileSpacing; | 807 realTileValues.interTileSpacing; |
| 817 | 808 |
| 818 this.layoutValues_ = { | 809 this.layoutValues_ = { |
| 819 colWidth: realTileValues.offsetX, | 810 colWidth: realTileValues.offsetX, |
| 820 gridWidth: effectiveGridWidth, | 811 gridWidth: effectiveGridWidth, |
| 821 leftMargin: leftMargin, | 812 leftMargin: leftMargin, |
| 822 numRowTiles: numRowTiles, | 813 numRowTiles: numRowTiles, |
| 823 rowHeight: rowHeight, | 814 rowHeight: rowHeight, |
| (...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 866 var indexOffset = opt_indexOffset || 0; | 857 var indexOffset = opt_indexOffset || 0; |
| 867 // Add the offset _after_ the modulus division. We might want to show the | 858 // Add the offset _after_ the modulus division. We might want to show the |
| 868 // tile off the side of the grid. | 859 // tile off the side of the grid. |
| 869 var col = index % layout.numRowTiles + indexOffset; | 860 var col = index % layout.numRowTiles + indexOffset; |
| 870 var row = Math.floor(index / layout.numRowTiles); | 861 var row = Math.floor(index / layout.numRowTiles); |
| 871 // Calculate the final on-screen position for the tile. | 862 // Calculate the final on-screen position for the tile. |
| 872 var realX = col * layout.colWidth + layout.leftMargin; | 863 var realX = col * layout.colWidth + layout.leftMargin; |
| 873 var realY = row * layout.rowHeight; | 864 var realY = row * layout.rowHeight; |
| 874 | 865 |
| 875 // Calculate the portion of the tile's position that should be animated. | 866 // Calculate the portion of the tile's position that should be animated. |
| 876 var animatedTileValues = layout.wide ? | 867 var animatedTileValues = |
| 877 grid.wideTileValues : grid.narrowTileValues; | 868 layout.wide ? grid.wideTileValues : grid.narrowTileValues; |
| 878 // Animate the difference between three-wide and six-wide. | 869 // Animate the difference between three-wide and six-wide. |
| 879 var animatedLeftMargin = this.getAnimatedLeftMargin_(); | 870 var animatedLeftMargin = this.getAnimatedLeftMargin_(); |
| 880 var animatedX = col * animatedTileValues.offsetX + animatedLeftMargin; | 871 var animatedX = col * animatedTileValues.offsetX + animatedLeftMargin; |
| 881 var animatedY = row * (this.heightForWidth(animatedTileValues.tileWidth) + | 872 var animatedY = row * (this.heightForWidth(animatedTileValues.tileWidth) + |
| 882 animatedTileValues.interTileSpacing); | 873 animatedTileValues.interTileSpacing); |
| 883 | 874 |
| 884 var tile = this.tileElements_[index]; | 875 var tile = this.tileElements_[index]; |
| 885 tile.setGridPosition(animatedX, animatedY); | 876 tile.setGridPosition(animatedX, animatedY); |
| 886 tile.firstChild.setBounds(layout.tileWidth, | 877 tile.firstChild.setBounds( |
| 887 realX - animatedX, | 878 layout.tileWidth, realX - animatedX, realY - animatedY); |
| 888 realY - animatedY); | |
| 889 | 879 |
| 890 // This code calculates whether the tile needs to show a clone of itself | 880 // This code calculates whether the tile needs to show a clone of itself |
| 891 // wrapped around the other side of the tile grid. | 881 // wrapped around the other side of the tile grid. |
| 892 var offTheRight = col == layout.numRowTiles || | 882 var offTheRight = col == layout.numRowTiles || |
| 893 (col == layout.numRowTiles - 1 && tile.hasDoppleganger()); | 883 (col == layout.numRowTiles - 1 && tile.hasDoppleganger()); |
| 894 var offTheLeft = col == -1 || (col == 0 && tile.hasDoppleganger()); | 884 var offTheLeft = col == -1 || (col == 0 && tile.hasDoppleganger()); |
| 895 if (this.isCurrentDragTarget && (offTheRight || offTheLeft)) { | 885 if (this.isCurrentDragTarget && (offTheRight || offTheLeft)) { |
| 896 var sign = offTheRight ? 1 : -1; | 886 var sign = offTheRight ? 1 : -1; |
| 897 tile.showDoppleganger(-layout.numRowTiles * layout.colWidth * sign, | 887 tile.showDoppleganger( |
| 898 layout.rowHeight * sign); | 888 -layout.numRowTiles * layout.colWidth * sign, |
| 889 layout.rowHeight * sign); |
| 899 } else { | 890 } else { |
| 900 tile.clearDoppleganger(); | 891 tile.clearDoppleganger(); |
| 901 } | 892 } |
| 902 | 893 |
| 903 if (index == this.tileElements_.length - 1) { | 894 if (index == this.tileElements_.length - 1) { |
| 904 this.tileGrid_.style.height = (realY + layout.rowHeight) + 'px'; | 895 this.tileGrid_.style.height = (realY + layout.rowHeight) + 'px'; |
| 905 this.queueUpdateScrollbars_(); | 896 this.queueUpdateScrollbars_(); |
| 906 } | 897 } |
| 907 }, | 898 }, |
| 908 | 899 |
| 909 /** | 900 /** |
| 910 * Gets the index of the tile that should occupy coordinate (x, y). Note | 901 * Gets the index of the tile that should occupy coordinate (x, y). Note |
| 911 * that this function doesn't care where the tiles actually are, and will | 902 * that this function doesn't care where the tiles actually are, and will |
| 912 * return an index even for the space between two tiles. This function is | 903 * return an index even for the space between two tiles. This function is |
| 913 * effectively the inverse of |positionTile_|. | 904 * effectively the inverse of |positionTile_|. |
| 914 * @param {number} x The x coordinate, in pixels, relative to the left of | 905 * @param {number} x The x coordinate, in pixels, relative to the left of |
| 915 * |this|. | 906 * |this|. |
| 916 * @param {number} y The y coordinate, in pixels, relative to the top of | 907 * @param {number} y The y coordinate, in pixels, relative to the top of |
| 917 * |this|. | 908 * |this|. |
| 918 * @return {number} | 909 * @return {number} |
| 919 * @private | 910 * @private |
| 920 */ | 911 */ |
| 921 getWouldBeIndexForPoint_: function(x, y) { | 912 getWouldBeIndexForPoint_: function(x, y) { |
| 922 var grid = this.gridValues_; | 913 var grid = this.gridValues_; |
| 923 var layout = this.layoutValues_; | 914 var layout = this.layoutValues_; |
| 924 | 915 |
| 925 var gridClientRect = this.tileGrid_.getBoundingClientRect(); | 916 var gridClientRect = this.tileGrid_.getBoundingClientRect(); |
| 926 var col = Math.floor((x - gridClientRect.left - layout.leftMargin) / | 917 var col = Math.floor( |
| 927 layout.colWidth); | 918 (x - gridClientRect.left - layout.leftMargin) / layout.colWidth); |
| 928 if (col < 0 || col >= layout.numRowTiles) | 919 if (col < 0 || col >= layout.numRowTiles) |
| 929 return -1; | 920 return -1; |
| 930 | 921 |
| 931 if (isRTL()) | 922 if (isRTL()) |
| 932 col = layout.numRowTiles - 1 - col; | 923 col = layout.numRowTiles - 1 - col; |
| 933 | 924 |
| 934 var row = Math.floor((y - gridClientRect.top) / layout.rowHeight); | 925 var row = Math.floor((y - gridClientRect.top) / layout.rowHeight); |
| 935 return row * layout.numRowTiles + col; | 926 return row * layout.numRowTiles + col; |
| 936 }, | 927 }, |
| 937 | 928 |
| (...skipping 24 matching lines...) Expand all Loading... |
| 962 * @private | 953 * @private |
| 963 */ | 954 */ |
| 964 updateMask_: function() { | 955 updateMask_: function() { |
| 965 if (!this.isCurrentDragTarget) { | 956 if (!this.isCurrentDragTarget) { |
| 966 this.tileGrid_.style.WebkitMaskBoxImage = ''; | 957 this.tileGrid_.style.WebkitMaskBoxImage = ''; |
| 967 return; | 958 return; |
| 968 } | 959 } |
| 969 | 960 |
| 970 var leftMargin = this.layoutValues_.leftMargin; | 961 var leftMargin = this.layoutValues_.leftMargin; |
| 971 // The fade distance is the space between tiles. | 962 // The fade distance is the space between tiles. |
| 972 var fadeDistance = (this.gridValues_.tileSpacingFraction * | 963 var fadeDistance = |
| 973 this.layoutValues_.tileWidth); | 964 (this.gridValues_.tileSpacingFraction * this.layoutValues_.tileWidth); |
| 974 fadeDistance = Math.min(leftMargin, fadeDistance); | 965 fadeDistance = Math.min(leftMargin, fadeDistance); |
| 975 // On Skia we don't use any fade because it works very poorly. See | 966 // On Skia we don't use any fade because it works very poorly. See |
| 976 // http://crbug.com/99373 | 967 // http://crbug.com/99373 |
| 977 if (!cr.isMac) | 968 if (!cr.isMac) |
| 978 fadeDistance = 1; | 969 fadeDistance = 1; |
| 979 var gradient = | 970 var gradient = '-webkit-linear-gradient(left,' + |
| 980 '-webkit-linear-gradient(left,' + | 971 'transparent, ' + |
| 981 'transparent, ' + | 972 'transparent ' + (leftMargin - fadeDistance) + 'px, ' + |
| 982 'transparent ' + (leftMargin - fadeDistance) + 'px, ' + | 973 'black ' + leftMargin + 'px, ' + |
| 983 'black ' + leftMargin + 'px, ' + | 974 'black ' + (this.tileGrid_.clientWidth - leftMargin) + 'px, ' + |
| 984 'black ' + (this.tileGrid_.clientWidth - leftMargin) + 'px, ' + | 975 'transparent ' + |
| 985 'transparent ' + (this.tileGrid_.clientWidth - leftMargin + | 976 (this.tileGrid_.clientWidth - leftMargin + fadeDistance) + 'px, ' + |
| 986 fadeDistance) + 'px, ' + | 977 'transparent)'; |
| 987 'transparent)'; | |
| 988 this.tileGrid_.style.WebkitMaskBoxImage = gradient; | 978 this.tileGrid_.style.WebkitMaskBoxImage = gradient; |
| 989 }, | 979 }, |
| 990 | 980 |
| 991 updateTopMargin_: function() { | 981 updateTopMargin_: function() { |
| 992 var layout = this.layoutValues_; | 982 var layout = this.layoutValues_; |
| 993 | 983 |
| 994 // The top margin is set so that the vertical midpoint of the grid will | 984 // The top margin is set so that the vertical midpoint of the grid will |
| 995 // be 1/3 down the page. | 985 // be 1/3 down the page. |
| 996 var numTiles = this.tileCount + | 986 var numTiles = this.tileCount + |
| 997 (this.isCurrentDragTarget && !this.withinPageDrag_ ? 1 : 0); | 987 (this.isCurrentDragTarget && !this.withinPageDrag_ ? 1 : 0); |
| (...skipping 91 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1089 * Queues an update on the custom scrollbar. Used for two reasons: first, | 1079 * Queues an update on the custom scrollbar. Used for two reasons: first, |
| 1090 * coalescing of multiple updates, and second, because action like | 1080 * coalescing of multiple updates, and second, because action like |
| 1091 * repositioning a tile can require a delay before they affect values | 1081 * repositioning a tile can require a delay before they affect values |
| 1092 * like clientHeight. | 1082 * like clientHeight. |
| 1093 * @private | 1083 * @private |
| 1094 */ | 1084 */ |
| 1095 queueUpdateScrollbars_: function() { | 1085 queueUpdateScrollbars_: function() { |
| 1096 if (this.scrollbarUpdate_) | 1086 if (this.scrollbarUpdate_) |
| 1097 return; | 1087 return; |
| 1098 | 1088 |
| 1099 this.scrollbarUpdate_ = window.setTimeout( | 1089 this.scrollbarUpdate_ = |
| 1100 this.doUpdateScrollbars_.bind(this), 0); | 1090 window.setTimeout(this.doUpdateScrollbars_.bind(this), 0); |
| 1101 }, | 1091 }, |
| 1102 | 1092 |
| 1103 /** | 1093 /** |
| 1104 * Does the work of calculating the visibility, height and position of the | 1094 * Does the work of calculating the visibility, height and position of the |
| 1105 * scrollbar thumb (there is no track or buttons). | 1095 * scrollbar thumb (there is no track or buttons). |
| 1106 * @private | 1096 * @private |
| 1107 */ | 1097 */ |
| 1108 doUpdateScrollbars_: function() { | 1098 doUpdateScrollbars_: function() { |
| 1109 this.scrollbarUpdate_ = 0; | 1099 this.scrollbarUpdate_ = 0; |
| 1110 | 1100 |
| 1111 var content = this.content_; | 1101 var content = this.content_; |
| 1112 | 1102 |
| 1113 // Adjust scroll-height to account for possible header-bar. | 1103 // Adjust scroll-height to account for possible header-bar. |
| 1114 var adjustedScrollHeight = content.scrollHeight - content.offsetTop; | 1104 var adjustedScrollHeight = content.scrollHeight - content.offsetTop; |
| 1115 | 1105 |
| 1116 if (adjustedScrollHeight <= content.clientHeight) { | 1106 if (adjustedScrollHeight <= content.clientHeight) { |
| 1117 this.scrollbar_.hidden = true; | 1107 this.scrollbar_.hidden = true; |
| 1118 return; | 1108 return; |
| 1119 } else { | 1109 } else { |
| 1120 this.scrollbar_.hidden = false; | 1110 this.scrollbar_.hidden = false; |
| 1121 } | 1111 } |
| 1122 | 1112 |
| 1123 var thumbTop = content.offsetTop + | 1113 var thumbTop = content.offsetTop + |
| 1124 content.scrollTop / adjustedScrollHeight * content.clientHeight; | 1114 content.scrollTop / adjustedScrollHeight * content.clientHeight; |
| 1125 var thumbHeight = content.clientHeight / adjustedScrollHeight * | 1115 var thumbHeight = |
| 1126 this.clientHeight; | 1116 content.clientHeight / adjustedScrollHeight * this.clientHeight; |
| 1127 | 1117 |
| 1128 this.scrollbar_.style.top = thumbTop + 'px'; | 1118 this.scrollbar_.style.top = thumbTop + 'px'; |
| 1129 this.scrollbar_.style.height = thumbHeight + 'px'; | 1119 this.scrollbar_.style.height = thumbHeight + 'px'; |
| 1130 this.firePageLayoutEvent_(); | 1120 this.firePageLayoutEvent_(); |
| 1131 }, | 1121 }, |
| 1132 | 1122 |
| 1133 /** | 1123 /** |
| 1134 * Get the height for a tile of a certain width. Override this function to | 1124 * Get the height for a tile of a certain width. Override this function to |
| 1135 * get non-square tiles. | 1125 * get non-square tiles. |
| 1136 * @param {number} width The pixel width of a tile. | 1126 * @param {number} width The pixel width of a tile. |
| (...skipping 14 matching lines...) Expand all Loading... |
| 1151 this.cleanupDrag(); | 1141 this.cleanupDrag(); |
| 1152 }, | 1142 }, |
| 1153 | 1143 |
| 1154 /** @override */ | 1144 /** @override */ |
| 1155 doDragEnter: function(e) { | 1145 doDragEnter: function(e) { |
| 1156 // Applies the mask so doppleganger tiles disappear into the fog. | 1146 // Applies the mask so doppleganger tiles disappear into the fog. |
| 1157 this.updateMask_(); | 1147 this.updateMask_(); |
| 1158 | 1148 |
| 1159 this.classList.add('animating-tile-page'); | 1149 this.classList.add('animating-tile-page'); |
| 1160 this.withinPageDrag_ = this.contains(currentlyDraggingTile); | 1150 this.withinPageDrag_ = this.contains(currentlyDraggingTile); |
| 1161 this.dragItemIndex_ = this.withinPageDrag_ ? | 1151 this.dragItemIndex_ = this.withinPageDrag_ ? currentlyDraggingTile.index : |
| 1162 currentlyDraggingTile.index : this.tileElements_.length; | 1152 this.tileElements_.length; |
| 1163 this.currentDropIndex_ = this.dragItemIndex_; | 1153 this.currentDropIndex_ = this.dragItemIndex_; |
| 1164 | 1154 |
| 1165 // The new tile may change the number of rows, hence the top margin | 1155 // The new tile may change the number of rows, hence the top margin |
| 1166 // will change. | 1156 // will change. |
| 1167 if (!this.withinPageDrag_) | 1157 if (!this.withinPageDrag_) |
| 1168 this.updateTopMargin_(); | 1158 this.updateTopMargin_(); |
| 1169 | 1159 |
| 1170 this.doDragOver(e); | 1160 this.doDragOver(e); |
| 1171 }, | 1161 }, |
| 1172 | 1162 |
| 1173 /** @override */ | 1163 /** @override */ |
| 1174 doDragOver: function(e) { | 1164 doDragOver: function(e) { |
| 1175 e.preventDefault(); | 1165 e.preventDefault(); |
| 1176 | 1166 |
| 1177 this.setDropEffect(e.dataTransfer); | 1167 this.setDropEffect(e.dataTransfer); |
| 1178 var newDragIndex = this.getWouldBeIndexForPoint_(e.pageX, e.pageY); | 1168 var newDragIndex = this.getWouldBeIndexForPoint_(e.pageX, e.pageY); |
| 1179 if (newDragIndex < 0 || newDragIndex >= this.tileElements_.length) | 1169 if (newDragIndex < 0 || newDragIndex >= this.tileElements_.length) |
| 1180 newDragIndex = this.dragItemIndex_; | 1170 newDragIndex = this.dragItemIndex_; |
| 1181 this.updateDropIndicator_(newDragIndex); | 1171 this.updateDropIndicator_(newDragIndex); |
| 1182 }, | 1172 }, |
| 1183 | 1173 |
| 1184 /** @override */ | 1174 /** @override */ |
| 1185 doDrop: function(e) { | 1175 doDrop: function(e) { |
| 1186 e.stopPropagation(); | 1176 e.stopPropagation(); |
| 1187 e.preventDefault(); | 1177 e.preventDefault(); |
| 1188 | 1178 |
| 1189 var index = this.currentDropIndex_; | 1179 var index = this.currentDropIndex_; |
| 1190 // Only change data if this was not a 'null drag'. | 1180 // Only change data if this was not a 'null drag'. |
| 1191 if (!((index == this.dragItemIndex_) && this.withinPageDrag_)) { | 1181 if (!((index == this.dragItemIndex_) && this.withinPageDrag_)) { |
| 1192 var adjustedIndex = this.currentDropIndex_ + | 1182 var adjustedIndex = |
| 1193 (index > this.dragItemIndex_ ? 1 : 0); | 1183 this.currentDropIndex_ + (index > this.dragItemIndex_ ? 1 : 0); |
| 1194 if (this.withinPageDrag_) { | 1184 if (this.withinPageDrag_) { |
| 1195 this.tileGrid_.insertBefore( | 1185 this.tileGrid_.insertBefore( |
| 1196 currentlyDraggingTile, | 1186 currentlyDraggingTile, this.tileElements_[adjustedIndex]); |
| 1197 this.tileElements_[adjustedIndex]); | |
| 1198 this.tileMoved(currentlyDraggingTile, this.dragItemIndex_); | 1187 this.tileMoved(currentlyDraggingTile, this.dragItemIndex_); |
| 1199 } else { | 1188 } else { |
| 1200 var originalPage = currentlyDraggingTile ? | 1189 var originalPage = |
| 1201 currentlyDraggingTile.tilePage : null; | 1190 currentlyDraggingTile ? currentlyDraggingTile.tilePage : null; |
| 1202 this.addDragData(e.dataTransfer, adjustedIndex); | 1191 this.addDragData(e.dataTransfer, adjustedIndex); |
| 1203 if (originalPage) | 1192 if (originalPage) |
| 1204 originalPage.cleanupDrag(); | 1193 originalPage.cleanupDrag(); |
| 1205 } | 1194 } |
| 1206 | 1195 |
| 1207 // Dropping the icon may cause topMargin to change, but changing it | 1196 // Dropping the icon may cause topMargin to change, but changing it |
| 1208 // now would cause everything to move (annoying), so we leave it | 1197 // now would cause everything to move (annoying), so we leave it |
| 1209 // alone. The top margin will be re-calculated next time the window is | 1198 // alone. The top margin will be re-calculated next time the window is |
| 1210 // resized or the page is selected. | 1199 // resized or the page is selected. |
| 1211 } | 1200 } |
| (...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1294 addDragData: function(dataTransfer, index) { | 1283 addDragData: function(dataTransfer, index) { |
| 1295 assertNotReached(); | 1284 assertNotReached(); |
| 1296 }, | 1285 }, |
| 1297 | 1286 |
| 1298 /** | 1287 /** |
| 1299 * Called when a tile has been moved (via dragging). Override this to make | 1288 * Called when a tile has been moved (via dragging). Override this to make |
| 1300 * backend updates. | 1289 * backend updates. |
| 1301 * @param {Node} draggedTile The tile that was dropped. | 1290 * @param {Node} draggedTile The tile that was dropped. |
| 1302 * @param {number} prevIndex The previous index of the tile. | 1291 * @param {number} prevIndex The previous index of the tile. |
| 1303 */ | 1292 */ |
| 1304 tileMoved: function(draggedTile, prevIndex) { | 1293 tileMoved: function(draggedTile, prevIndex) {}, |
| 1305 }, | |
| 1306 | 1294 |
| 1307 /** | 1295 /** |
| 1308 * Sets the drop effect on |dataTransfer| to the desired value (e.g. | 1296 * Sets the drop effect on |dataTransfer| to the desired value (e.g. |
| 1309 * 'copy'). | 1297 * 'copy'). |
| 1310 * @param {Object} dataTransfer The drag event dataTransfer object. | 1298 * @param {Object} dataTransfer The drag event dataTransfer object. |
| 1311 */ | 1299 */ |
| 1312 setDropEffect: function(dataTransfer) { | 1300 setDropEffect: function(dataTransfer) { |
| 1313 assertNotReached(); | 1301 assertNotReached(); |
| 1314 }, | 1302 }, |
| 1315 }; | 1303 }; |
| 1316 | 1304 |
| 1317 return { | 1305 return { |
| 1318 getCurrentlyDraggingTile: getCurrentlyDraggingTile, | 1306 getCurrentlyDraggingTile: getCurrentlyDraggingTile, |
| 1319 setCurrentDropEffect: setCurrentDropEffect, | 1307 setCurrentDropEffect: setCurrentDropEffect, |
| 1320 // Not used outside, just for usage in JSDoc inside this file. | 1308 // Not used outside, just for usage in JSDoc inside this file. |
| 1321 Tile: Tile, | 1309 Tile: Tile, |
| 1322 TilePage: TilePage, | 1310 TilePage: TilePage, |
| 1323 }; | 1311 }; |
| 1324 }); | 1312 }); |
| OLD | NEW |