| 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 |