Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(4)

Side by Side Diff: chrome/browser/resources/ntp4/tile_page.js

Issue 2617663002: WIP: run clang-format-js on lots of things (Closed)
Patch Set: merge Created 3 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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 });
OLDNEW
« no previous file with comments | « chrome/browser/resources/ntp4/page_switcher.js ('k') | chrome/browser/resources/offline_pages/offline_internals.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698