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 245 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
256 }, | 256 }, |
257 | 257 |
258 /** | 258 /** |
259 * Selects a new card, ensuring that it is a valid index, transforming the | 259 * Selects a new card, ensuring that it is a valid index, transforming the |
260 * view and possibly calling the change card callback. | 260 * view and possibly calling the change card callback. |
261 * @param {number} newCardIndex Index of card to show. | 261 * @param {number} newCardIndex Index of card to show. |
262 * @param {boolean=} opt_animate If true will animate transition from | 262 * @param {boolean=} opt_animate If true will animate transition from |
263 * current position to new position. | 263 * current position to new position. |
264 */ | 264 */ |
265 selectCard: function(newCardIndex, opt_animate) { | 265 selectCard: function(newCardIndex, opt_animate) { |
266 var isChangingCard = newCardIndex >= 0 && | 266 var isChangingCard = |
267 newCardIndex < this.cards_.length && | 267 !this.cards_[newCardIndex].classList.contains('selected-card'); |
268 newCardIndex != this.currentCard; | 268 |
269 if (isChangingCard) { | 269 if (isChangingCard) { |
| 270 this.currentCardValue.classList.remove('selected-card'); |
270 // If we have a new card index and it is valid then update the left | 271 // If we have a new card index and it is valid then update the left |
271 // position and current card index. | 272 // position and current card index. |
272 this.currentCard_ = newCardIndex; | 273 this.currentCard_ = newCardIndex; |
| 274 this.currentCardValue.classList.add('selected-card'); |
273 } | 275 } |
274 | 276 |
275 this.transformToCurrentCard_(opt_animate); | 277 this.transformToCurrentCard_(opt_animate); |
276 | 278 |
277 if (isChangingCard) { | 279 if (isChangingCard) { |
278 var event = document.createEvent('Event'); | 280 var event = document.createEvent('Event'); |
279 event.initEvent(CardSlider.EventType.CARD_CHANGED, true, true); | 281 event.initEvent(CardSlider.EventType.CARD_CHANGED, true, true); |
280 event.cardSlider = this; | 282 event.cardSlider = this; |
281 this.container_.dispatchEvent(event); | 283 this.container_.dispatchEvent(event); |
282 } | 284 } |
(...skipping 117 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
400 // Stop listening to any current touch | 402 // Stop listening to any current touch |
401 this.touchHandler_.cancelTouch(); | 403 this.touchHandler_.cancelTouch(); |
402 | 404 |
403 // Ensure we're at a card bounary | 405 // Ensure we're at a card bounary |
404 this.transformToCurrentCard_(true); | 406 this.transformToCurrentCard_(true); |
405 }, | 407 }, |
406 }; | 408 }; |
407 | 409 |
408 return CardSlider; | 410 return CardSlider; |
409 })(); | 411 })(); |
OLD | NEW |