OLD | NEW |
1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 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 Loading... |
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 Loading... |
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 Loading... |
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 })(); |
OLD | NEW |