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 114 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
125 | 125 |
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 if (document.documentElement.getAttribute('touchui')) { | 135 // Also support touch events in case a touch screen happens to be |
136 var TouchHandler = cr.ui.TouchHandler; | 136 // available. Note that we could check cr.isTouchOptimized here, but |
137 this.container_.addEventListener(TouchHandler.EventType.TOUCH_START, | 137 // in general sites should just be listening for touch events without |
138 this.onTouchStart_.bind(this)); | 138 // trying to determine in advance if they may be supported (eg. a touch |
139 this.container_.addEventListener(TouchHandler.EventType.DRAG_START, | 139 // screen can always be plugged in after a page has loaded). |
140 this.onDragStart_.bind(this)); | 140 var TouchHandler = cr.ui.TouchHandler; |
141 this.container_.addEventListener(TouchHandler.EventType.DRAG_MOVE, | 141 this.container_.addEventListener(TouchHandler.EventType.TOUCH_START, |
142 this.onDragMove_.bind(this)); | 142 this.onTouchStart_.bind(this)); |
143 this.container_.addEventListener(TouchHandler.EventType.DRAG_END, | 143 this.container_.addEventListener(TouchHandler.EventType.DRAG_START, |
144 this.onDragEnd_.bind(this)); | 144 this.onDragStart_.bind(this)); |
| 145 this.container_.addEventListener(TouchHandler.EventType.DRAG_MOVE, |
| 146 this.onDragMove_.bind(this)); |
| 147 this.container_.addEventListener(TouchHandler.EventType.DRAG_END, |
| 148 this.onDragEnd_.bind(this)); |
145 | 149 |
146 this.touchHandler_.enable(/* opt_capture */ false); | 150 this.touchHandler_.enable(/* opt_capture */ false); |
147 } | |
148 }, | 151 }, |
149 | 152 |
150 /** | 153 /** |
151 * Use in cases where the width of the frame has changed in order to update | 154 * Use in cases where the width of the frame has changed in order to update |
152 * the width of cards. For example should be used when orientation changes | 155 * the width of cards. For example should be used when orientation changes |
153 * in full width sliders. | 156 * in full width sliders. |
154 * @param {number} newCardWidth Width all cards should have, in pixels. | 157 * @param {number} newCardWidth Width all cards should have, in pixels. |
155 */ | 158 */ |
156 resize: function(newCardWidth) { | 159 resize: function(newCardWidth) { |
157 if (newCardWidth != this.cardWidth_) { | 160 if (newCardWidth != this.cardWidth_) { |
(...skipping 293 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
451 | 454 |
452 // Ensure we're at a card bounary | 455 // Ensure we're at a card bounary |
453 this.transformToCurrentCard_(true); | 456 this.transformToCurrentCard_(true); |
454 }, | 457 }, |
455 }; | 458 }; |
456 | 459 |
457 return { | 460 return { |
458 CardSlider: CardSlider | 461 CardSlider: CardSlider |
459 }; | 462 }; |
460 }); | 463 }); |
OLD | NEW |