| 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 |