| OLD | NEW |
| 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 /** | 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 210 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 221 */ | 221 */ |
| 222 updateCardWidths_: function() { | 222 updateCardWidths_: function() { |
| 223 for (var i = 0, card; card = this.cards_[i]; i++) | 223 for (var i = 0, card; card = this.cards_[i]; i++) |
| 224 card.style.width = this.cardWidth_ + 'px'; | 224 card.style.width = this.cardWidth_ + 'px'; |
| 225 }, | 225 }, |
| 226 | 226 |
| 227 /** | 227 /** |
| 228 * Returns the index of the current card. | 228 * Returns the index of the current card. |
| 229 * @return {number} index of the current card. | 229 * @return {number} index of the current card. |
| 230 */ | 230 */ |
| 231 get currentCard() { return this.currentCard_; }, | 231 get currentCard() { |
| 232 return this.currentCard_; |
| 233 }, |
| 232 | 234 |
| 233 /** | 235 /** |
| 234 * Allows setting the current card index. | 236 * Allows setting the current card index. |
| 235 * @param {number} index A new index to set the current index to. | 237 * @param {number} index A new index to set the current index to. |
| 236 * @return {number} The new index after having been set. | 238 * @return {number} The new index after having been set. |
| 237 */ | 239 */ |
| 238 set currentCard(index) { return (this.currentCard_ = index); }, | 240 set currentCard(index) { |
| 241 return (this.currentCard_ = index); |
| 242 }, |
| 239 | 243 |
| 240 /** | 244 /** |
| 241 * Returns the number of cards. | 245 * Returns the number of cards. |
| 242 * @return {number} number of cards. | 246 * @return {number} number of cards. |
| 243 */ | 247 */ |
| 244 get cardCount() { return this.cards_.length; }, | 248 get cardCount() { |
| 249 return this.cards_.length; |
| 250 }, |
| 245 | 251 |
| 246 /** | 252 /** |
| 247 * Returns the current card itself. | 253 * Returns the current card itself. |
| 248 * @return {!Element} the currently shown card. | 254 * @return {!Element} the currently shown card. |
| 249 */ | 255 */ |
| 250 get currentCardValue() { return this.cards_[this.currentCard_]; }, | 256 get currentCardValue() { |
| 257 return this.cards_[this.currentCard_]; |
| 258 }, |
| 251 | 259 |
| 252 /** | 260 /** |
| 253 * Returns the frame holding the cards. | 261 * Returns the frame holding the cards. |
| 254 * @return {Element} The frame used to position the cards. | 262 * @return {Element} The frame used to position the cards. |
| 255 */ | 263 */ |
| 256 get frame() { return this.frame_; }, | 264 get frame() { |
| 265 return this.frame_; |
| 266 }, |
| 257 | 267 |
| 258 /** | 268 /** |
| 259 * Handle horizontal scrolls to flip between pages. | 269 * Handle horizontal scrolls to flip between pages. |
| 260 * @private | 270 * @private |
| 261 */ | 271 */ |
| 262 onMouseWheel_: function(e) { | 272 onMouseWheel_: function(e) { |
| 263 if (e.wheelDeltaX == 0) | 273 if (e.wheelDeltaX == 0) |
| 264 return; | 274 return; |
| 265 | 275 |
| 266 // Continuous devices such as an Apple Touchpad or Apple MagicMouse will | 276 // Continuous devices such as an Apple Touchpad or Apple MagicMouse will |
| (...skipping 184 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 451 e.removedCard = card; | 461 e.removedCard = card; |
| 452 e.removedIndex = index; | 462 e.removedIndex = index; |
| 453 this.container_.dispatchEvent(e); | 463 this.container_.dispatchEvent(e); |
| 454 }, | 464 }, |
| 455 | 465 |
| 456 /** | 466 /** |
| 457 * This re-syncs the transform that's used to position the frame in | 467 * This re-syncs the transform that's used to position the frame in |
| 458 * the likely event it needs to be updated by a card being inserted or | 468 * the likely event it needs to be updated by a card being inserted or |
| 459 * removed in the flow. | 469 * removed in the flow. |
| 460 */ | 470 */ |
| 461 repositionFrame: function() { this.transformToCurrentCard_(); }, | 471 repositionFrame: function() { |
| 472 this.transformToCurrentCard_(); |
| 473 }, |
| 462 | 474 |
| 463 /** | 475 /** |
| 464 * Checks the the given |index| exists in this.cards_. | 476 * Checks the the given |index| exists in this.cards_. |
| 465 * @param {number} index An index to check. | 477 * @param {number} index An index to check. |
| 466 * @private | 478 * @private |
| 467 */ | 479 */ |
| 468 assertValidIndex_: function(index) { | 480 assertValidIndex_: function(index) { |
| 469 assert(index >= 0 && index < this.cards_.length); | 481 assert(index >= 0 && index < this.cards_.length); |
| 470 }, | 482 }, |
| 471 | 483 |
| (...skipping 188 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 660 // Stop listening to any current touch | 672 // Stop listening to any current touch |
| 661 this.touchHandler_.cancelTouch(); | 673 this.touchHandler_.cancelTouch(); |
| 662 | 674 |
| 663 // Ensure we're at a card bounary | 675 // Ensure we're at a card bounary |
| 664 this.transformToCurrentCard_(true); | 676 this.transformToCurrentCard_(true); |
| 665 }, | 677 }, |
| 666 }; | 678 }; |
| 667 | 679 |
| 668 return {CardSlider: CardSlider}; | 680 return {CardSlider: CardSlider}; |
| 669 }); | 681 }); |
| OLD | NEW |