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

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

Issue 2535573002: Reduce usage of webkit CSS prefixes in chrome/browser/resources (Closed)
Patch Set: rebase Created 3 years, 10 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 42 matching lines...) Expand 10 before | Expand all | Expand 10 after
53 // 'real' as opposed to doppleganger. 53 // 'real' as opposed to doppleganger.
54 this.className = 'tile real'; 54 this.className = 'tile real';
55 this.appendChild(contents); 55 this.appendChild(contents);
56 contents.tile = this; 56 contents.tile = this;
57 57
58 this.addEventListener('dragstart', this.onDragStart_); 58 this.addEventListener('dragstart', this.onDragStart_);
59 this.addEventListener('drag', this.onDragMove_); 59 this.addEventListener('drag', this.onDragMove_);
60 this.addEventListener('dragend', this.onDragEnd_); 60 this.addEventListener('dragend', this.onDragEnd_);
61 61
62 this.firstChild.addEventListener( 62 this.firstChild.addEventListener(
63 'webkitAnimationEnd', this.onContentsAnimationEnd_.bind(this)); 63 'animationend', this.onContentsAnimationEnd_.bind(this));
64 64
65 this.eventTracker = new EventTracker(); 65 this.eventTracker = new EventTracker();
66 }, 66 },
67 67
68 get index() { 68 get index() {
69 return Array.prototype.indexOf.call(this.tilePage.tileElements_, this); 69 return Array.prototype.indexOf.call(this.tilePage.tileElements_, this);
70 }, 70 },
71 71
72 get tilePage() { 72 get tilePage() {
73 return findAncestorByClass(this, 'tile-page'); 73 return findAncestorByClass(this, 'tile-page');
(...skipping 39 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(this.dragClone, 'transitionend',
124 this.onDragCloneTransitionEnd_.bind(this)); 124 this.onDragCloneTransitionEnd_.bind(this));
125 125
126 this.classList.add('dragging'); 126 this.classList.add('dragging');
127 // offsetLeft is mirrored in RTL. Un-mirror it. 127 // offsetLeft is mirrored in RTL. Un-mirror it.
128 var offsetLeft = isRTL() ? 128 var offsetLeft = isRTL() ?
129 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.
(...skipping 97 matching lines...) Expand 10 before | Expand all | Expand 10 after
231 for (var i = 0; i < clonelets.length; i++) { 231 for (var i = 0; i < clonelets.length; i++) {
232 clonelets[i].classList.remove('real'); 232 clonelets[i].classList.remove('real');
233 } 233 }
234 234
235 this.appendChild(clone); 235 this.appendChild(clone);
236 this.doppleganger_ = clone; 236 this.doppleganger_ = clone;
237 237
238 if (isRTL()) 238 if (isRTL())
239 x *= -1; 239 x *= -1;
240 240
241 this.doppleganger_.style.WebkitTransform = 'translate(' + x + 'px, ' + 241 this.doppleganger_.style.transform = 'translate(' + x + 'px, ' +
242 y + 'px)'; 242 y + 'px)';
243 }, 243 },
244 244
245 /** 245 /**
246 * Destroys the current doppleganger. 246 * Destroys the current doppleganger.
247 */ 247 */
248 clearDoppleganger: function() { 248 clearDoppleganger: function() {
249 if (this.doppleganger_) { 249 if (this.doppleganger_) {
250 this.removeChild(this.doppleganger_); 250 this.removeChild(this.doppleganger_);
251 this.doppleganger_ = null; 251 this.doppleganger_ = null;
252 } 252 }
(...skipping 13 matching lines...) Expand all
266 * the next drag starts (if the user starts a 2nd drag very quickly). 266 * the next drag starts (if the user starts a 2nd drag very quickly).
267 * @private 267 * @private
268 */ 268 */
269 finalizeDrag_: function() { 269 finalizeDrag_: function() {
270 assert(this.classList.contains('dragging')); 270 assert(this.classList.contains('dragging'));
271 271
272 var clone = this.dragClone; 272 var clone = this.dragClone;
273 this.dragClone = null; 273 this.dragClone = null;
274 274
275 clone.parentNode.removeChild(clone); 275 clone.parentNode.removeChild(clone);
276 this.eventTracker.remove(clone, 'webkitTransitionEnd'); 276 this.eventTracker.remove(clone, 'transitionend');
277 this.classList.remove('dragging'); 277 this.classList.remove('dragging');
278 if (this.firstChild.finalizeDrag) 278 if (this.firstChild.finalizeDrag)
279 this.firstChild.finalizeDrag(); 279 this.firstChild.finalizeDrag();
280 }, 280 },
281 281
282 /** 282 /**
283 * Called when the drag representation node is done migrating to its final 283 * Called when the drag representation node is done migrating to its final
284 * resting spot. 284 * resting spot.
285 * @param {Event} e The transition end event. 285 * @param {Event} e The transition end event.
286 */ 286 */
(...skipping 10 matching lines...) Expand all
297 * @param {boolean=} opt_animate Whether the animation should be animated. 297 * @param {boolean=} opt_animate Whether the animation should be animated.
298 */ 298 */
299 doRemove: function(opt_animate) { 299 doRemove: function(opt_animate) {
300 if (opt_animate) 300 if (opt_animate)
301 this.firstChild.classList.add('removing-tile-contents'); 301 this.firstChild.classList.add('removing-tile-contents');
302 else 302 else
303 this.tilePage.removeTile(this, false); 303 this.tilePage.removeTile(this, false);
304 }, 304 },
305 305
306 /** 306 /**
307 * Callback for the webkitAnimationEnd event on the tile's contents. 307 * Callback for the animationend event on the tile's contents.
308 * @param {Event} e The event object. 308 * @param {Event} e The event object.
309 */ 309 */
310 onContentsAnimationEnd_: function(e) { 310 onContentsAnimationEnd_: function(e) {
311 if (this.firstChild.classList.contains('new-tile-contents')) 311 if (this.firstChild.classList.contains('new-tile-contents'))
312 this.firstChild.classList.remove('new-tile-contents'); 312 this.firstChild.classList.remove('new-tile-contents');
313 if (this.firstChild.classList.contains('removing-tile-contents')) 313 if (this.firstChild.classList.contains('removing-tile-contents'))
314 this.tilePage.removeTile(this, true); 314 this.tilePage.removeTile(this, true);
315 }, 315 },
316 }; 316 };
317 317
(...skipping 997 matching lines...) Expand 10 before | Expand all | Expand 10 after
1315 }; 1315 };
1316 1316
1317 return { 1317 return {
1318 getCurrentlyDraggingTile: getCurrentlyDraggingTile, 1318 getCurrentlyDraggingTile: getCurrentlyDraggingTile,
1319 setCurrentDropEffect: setCurrentDropEffect, 1319 setCurrentDropEffect: setCurrentDropEffect,
1320 // Not used outside, just for usage in JSDoc inside this file. 1320 // Not used outside, just for usage in JSDoc inside this file.
1321 Tile: Tile, 1321 Tile: Tile,
1322 TilePage: TilePage, 1322 TilePage: TilePage,
1323 }; 1323 };
1324 }); 1324 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698