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 115 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
126 this.updateCardWidths_(); | 126 this.updateCardWidths_(); |
127 | 127 |
128 this.mouseWheelScrollAmount_ = 0; | 128 this.mouseWheelScrollAmount_ = 0; |
129 this.mouseWheelCardSelected_ = false; | 129 this.mouseWheelCardSelected_ = false; |
130 this.mouseWheelIsContinuous_ = false; | 130 this.mouseWheelIsContinuous_ = false; |
131 this.scrollClearTimeout_ = null; | 131 this.scrollClearTimeout_ = null; |
132 this.frame_.addEventListener('mousewheel', | 132 this.frame_.addEventListener('mousewheel', |
133 this.onMouseWheel_.bind(this)); | 133 this.onMouseWheel_.bind(this)); |
134 | 134 |
135 // Also support touch events in case a touch screen happens to be | 135 // Also support touch events in case a touch screen happens to be |
136 // available. Note that we could check cr.isTouchOptimized here, but | 136 // available. Ideally we would support touch events whenever they |
137 // in general sites should just be listening for touch events without | 137 // are fired, but for now restrict this extra code to when we know |
138 // trying to determine in advance if they may be supported (eg. a touch | 138 // we want to support touch input. |
139 // screen can always be plugged in after a page has loaded). | 139 if (cr.isTouchOptimized) { |
140 var TouchHandler = cr.ui.TouchHandler; | 140 var TouchHandler = cr.ui.TouchHandler; |
141 this.container_.addEventListener(TouchHandler.EventType.TOUCH_START, | 141 this.container_.addEventListener(TouchHandler.EventType.TOUCH_START, |
142 this.onTouchStart_.bind(this)); | 142 this.onTouchStart_.bind(this)); |
143 this.container_.addEventListener(TouchHandler.EventType.DRAG_START, | 143 this.container_.addEventListener(TouchHandler.EventType.DRAG_START, |
144 this.onDragStart_.bind(this)); | 144 this.onDragStart_.bind(this)); |
145 this.container_.addEventListener(TouchHandler.EventType.DRAG_MOVE, | 145 this.container_.addEventListener(TouchHandler.EventType.DRAG_MOVE, |
146 this.onDragMove_.bind(this)); | 146 this.onDragMove_.bind(this)); |
147 this.container_.addEventListener(TouchHandler.EventType.DRAG_END, | 147 this.container_.addEventListener(TouchHandler.EventType.DRAG_END, |
148 this.onDragEnd_.bind(this)); | 148 this.onDragEnd_.bind(this)); |
149 | 149 |
150 this.touchHandler_.enable(/* opt_capture */ false); | 150 this.touchHandler_.enable(/* opt_capture */ false); |
| 151 } |
151 }, | 152 }, |
152 | 153 |
153 /** | 154 /** |
154 * Use in cases where the width of the frame has changed in order to update | 155 * Use in cases where the width of the frame has changed in order to update |
155 * the width of cards. For example should be used when orientation changes | 156 * the width of cards. For example should be used when orientation changes |
156 * in full width sliders. | 157 * in full width sliders. |
157 * @param {number} newCardWidth Width all cards should have, in pixels. | 158 * @param {number} newCardWidth Width all cards should have, in pixels. |
158 */ | 159 */ |
159 resize: function(newCardWidth) { | 160 resize: function(newCardWidth) { |
160 if (newCardWidth != this.cardWidth_) { | 161 if (newCardWidth != this.cardWidth_) { |
(...skipping 293 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
454 | 455 |
455 // Ensure we're at a card bounary | 456 // Ensure we're at a card bounary |
456 this.transformToCurrentCard_(true); | 457 this.transformToCurrentCard_(true); |
457 }, | 458 }, |
458 }; | 459 }; |
459 | 460 |
460 return { | 461 return { |
461 CardSlider: CardSlider | 462 CardSlider: CardSlider |
462 }; | 463 }; |
463 }); | 464 }); |
OLD | NEW |