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 |