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

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

Issue 8423055: [Aura] Initial app list webui. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: publish callbacks in ntp4 namespace Created 9 years, 1 month 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 | Annotate | Revision Log
OLDNEW
1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 /** 5 /**
6 * @fileoverview Card slider implementation. Allows you to create interactions 6 * @fileoverview Card slider implementation. Allows you to create interactions
7 * that have items that can slide left to right to reveal additional items. 7 * that have items that can slide left to right to reveal additional items.
8 * Works by adding the necessary event handlers to a specific DOM structure 8 * Works by adding the necessary event handlers to a specific DOM structure
9 * including a frame, container and cards. 9 * including a frame, container and cards.
10 * - The frame defines the boundary of one item. Each card will be expanded to 10 * - The frame defines the boundary of one item. Each card will be expanded to
(...skipping 235 matching lines...) Expand 10 before | Expand all | Expand 10 after
246 this.mouseWheelIsContinuous_ = true; 246 this.mouseWheelIsContinuous_ = true;
247 247
248 if (this.mouseWheelIsContinuous_) { 248 if (this.mouseWheelIsContinuous_) {
249 // For continuous devices, detect a page swipe when the accumulated 249 // For continuous devices, detect a page swipe when the accumulated
250 // delta matches a pre-defined threshhold. After changing the page, 250 // delta matches a pre-defined threshhold. After changing the page,
251 // ignore wheel events for a short time before repeating this process. 251 // ignore wheel events for a short time before repeating this process.
252 if (this.mouseWheelCardSelected_) return; 252 if (this.mouseWheelCardSelected_) return;
253 this.mouseWheelScrollAmount_ += e.wheelDeltaX; 253 this.mouseWheelScrollAmount_ += e.wheelDeltaX;
254 if (Math.abs(this.mouseWheelScrollAmount_) >= 600) { 254 if (Math.abs(this.mouseWheelScrollAmount_) >= 600) {
255 var pagesToScroll = this.mouseWheelScrollAmount_ > 0 ? 1 : -1; 255 var pagesToScroll = this.mouseWheelScrollAmount_ > 0 ? 1 : -1;
256 if (!ntp4.isRTL()) 256 if (!isRTL())
257 pagesToScroll *= -1; 257 pagesToScroll *= -1;
258 var newCardIndex = this.currentCard + pagesToScroll; 258 var newCardIndex = this.currentCard + pagesToScroll;
259 newCardIndex = Math.min(this.cards_.length - 1, 259 newCardIndex = Math.min(this.cards_.length - 1,
260 Math.max(0, newCardIndex)); 260 Math.max(0, newCardIndex));
261 this.selectCard(newCardIndex, true); 261 this.selectCard(newCardIndex, true);
262 this.mouseWheelCardSelected_ = true; 262 this.mouseWheelCardSelected_ = true;
263 } 263 }
264 } else { 264 } else {
265 // For discrete devices, consider each wheel tick a page change. 265 // For discrete devices, consider each wheel tick a page change.
266 var pagesToScroll = e.wheelDeltaX / DISCRETE_DELTA; 266 var pagesToScroll = e.wheelDeltaX / DISCRETE_DELTA;
267 if (!ntp4.isRTL()) 267 if (!isRTL())
268 pagesToScroll *= -1; 268 pagesToScroll *= -1;
269 var newCardIndex = this.currentCard + pagesToScroll; 269 var newCardIndex = this.currentCard + pagesToScroll;
270 newCardIndex = Math.min(this.cards_.length - 1, 270 newCardIndex = Math.min(this.cards_.length - 1,
271 Math.max(0, newCardIndex)); 271 Math.max(0, newCardIndex));
272 this.selectCard(newCardIndex, true); 272 this.selectCard(newCardIndex, true);
273 } 273 }
274 274
275 // We got a mouse wheel event, so cancel any pending scroll wheel timeout. 275 // We got a mouse wheel event, so cancel any pending scroll wheel timeout.
276 if (this.scrollClearTimeout_ != null) 276 if (this.scrollClearTimeout_ != null)
277 clearTimeout(this.scrollClearTimeout_); 277 clearTimeout(this.scrollClearTimeout_);
(...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after
345 345
346 /** 346 /**
347 * Centers the view on the card denoted by this.currentCard. Can either 347 * Centers the view on the card denoted by this.currentCard. Can either
348 * animate to that card or snap to it. 348 * animate to that card or snap to it.
349 * @param {boolean=} opt_animate If true will animate transition from 349 * @param {boolean=} opt_animate If true will animate transition from
350 * current position to new position. 350 * current position to new position.
351 * @private 351 * @private
352 */ 352 */
353 transformToCurrentCard_: function(opt_animate) { 353 transformToCurrentCard_: function(opt_animate) {
354 this.currentLeft_ = -this.cardWidth_ * 354 this.currentLeft_ = -this.cardWidth_ *
355 (ntp4.isRTL() ? this.cards_.length - this.currentCard - 1 : 355 (isRTL() ? this.cards_.length - this.currentCard - 1 :
356 this.currentCard); 356 this.currentCard);
357 357
358 // Animate to the current card, which will either transition if the 358 // Animate to the current card, which will either transition if the
359 // current card is new, or reset the existing card if we didn't drag 359 // current card is new, or reset the existing card if we didn't drag
360 // enough to change cards. 360 // enough to change cards.
361 var transition = ''; 361 var transition = '';
362 if (opt_animate) { 362 if (opt_animate) {
363 transition = '-webkit-transform ' + CardSlider.TRANSITION_TIME_ + 363 transition = '-webkit-transform ' + CardSlider.TRANSITION_TIME_ +
364 'ms ease-in-out'; 364 'ms ease-in-out';
365 } 365 }
366 this.container_.style.WebkitTransition = transition; 366 this.container_.style.WebkitTransition = transition;
(...skipping 83 matching lines...) Expand 10 before | Expand all | Expand 10 after
450 // Stop listening to any current touch 450 // Stop listening to any current touch
451 this.touchHandler_.cancelTouch(); 451 this.touchHandler_.cancelTouch();
452 452
453 // Ensure we're at a card bounary 453 // Ensure we're at a card bounary
454 this.transformToCurrentCard_(true); 454 this.transformToCurrentCard_(true);
455 }, 455 },
456 }; 456 };
457 457
458 return CardSlider; 458 return CardSlider;
459 })(); 459 })();
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698