| 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 86 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 97 /** | 97 /** |
| 98 * The current left offset of the container relative to the frame. | 98 * The current left offset of the container relative to the frame. |
| 99 * @type {number} | 99 * @type {number} |
| 100 * @private | 100 * @private |
| 101 */ | 101 */ |
| 102 currentLeft_: 0, | 102 currentLeft_: 0, |
| 103 | 103 |
| 104 /** | 104 /** |
| 105 * Initialize all elements and event handlers. Must call after construction | 105 * Initialize all elements and event handlers. Must call after construction |
| 106 * and before usage. | 106 * and before usage. |
| 107 * @param {boolean} ignoreMouseWheelEvents If true, horizontal mouse wheel |
| 108 * events will be ignored, rather than flipping between pages. |
| 107 */ | 109 */ |
| 108 initialize: function() { | 110 initialize: function(ignoreMouseWheelEvents) { |
| 109 var view = this.container_.ownerDocument.defaultView; | 111 var view = this.container_.ownerDocument.defaultView; |
| 110 assert(view.getComputedStyle(this.container_).display == '-webkit-box', | 112 assert(view.getComputedStyle(this.container_).display == '-webkit-box', |
| 111 'Container should be display -webkit-box.'); | 113 'Container should be display -webkit-box.'); |
| 112 assert(view.getComputedStyle(this.frame_).overflow == 'hidden', | 114 assert(view.getComputedStyle(this.frame_).overflow == 'hidden', |
| 113 'Frame should be overflow hidden.'); | 115 'Frame should be overflow hidden.'); |
| 114 assert(view.getComputedStyle(this.container_).position == 'static', | 116 assert(view.getComputedStyle(this.container_).position == 'static', |
| 115 'Container should be position static.'); | 117 'Container should be position static.'); |
| 116 | 118 |
| 117 this.updateCardWidths_(); | 119 this.updateCardWidths_(); |
| 118 | 120 |
| 119 this.mouseWheelScrollAmount_ = 0; | 121 this.mouseWheelScrollAmount_ = 0; |
| 120 this.mouseWheelCardSelected_ = false; | 122 this.mouseWheelCardSelected_ = false; |
| 121 this.mouseWheelIsContinuous_ = false; | 123 this.mouseWheelIsContinuous_ = false; |
| 122 this.scrollClearTimeout_ = null; | 124 this.scrollClearTimeout_ = null; |
| 123 this.frame_.addEventListener('mousewheel', | 125 if (!ignoreMouseWheelEvents) { |
| 124 this.onMouseWheel_.bind(this)); | 126 this.frame_.addEventListener('mousewheel', |
| 127 this.onMouseWheel_.bind(this)); |
| 128 } |
| 125 this.container_.addEventListener( | 129 this.container_.addEventListener( |
| 126 'webkitTransitionEnd', this.onWebkitTransitionEnd_.bind(this)); | 130 'webkitTransitionEnd', this.onWebkitTransitionEnd_.bind(this)); |
| 127 | 131 |
| 128 // Also support touch events in case a touch screen happens to be | 132 // Also support touch events in case a touch screen happens to be |
| 129 // available. Ideally we would support touch events whenever they | 133 // available. Ideally we would support touch events whenever they |
| 130 // are fired, but for now restrict this extra code to when we know | 134 // are fired, but for now restrict this extra code to when we know |
| 131 // we want to support touch input. | 135 // we want to support touch input. |
| 132 if (cr.isTouchOptimized) { | 136 if (cr.isTouchOptimized) { |
| 133 var TouchHandler = cr.ui.TouchHandler; | 137 var TouchHandler = cr.ui.TouchHandler; |
| 134 this.container_.addEventListener(TouchHandler.EventType.TOUCH_START, | 138 this.container_.addEventListener(TouchHandler.EventType.TOUCH_START, |
| (...skipping 94 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 229 }, | 233 }, |
| 230 | 234 |
| 231 /** | 235 /** |
| 232 * Handle horizontal scrolls to flip between pages. | 236 * Handle horizontal scrolls to flip between pages. |
| 233 * @private | 237 * @private |
| 234 */ | 238 */ |
| 235 onMouseWheel_: function(e) { | 239 onMouseWheel_: function(e) { |
| 236 if (e.wheelDeltaX == 0) | 240 if (e.wheelDeltaX == 0) |
| 237 return; | 241 return; |
| 238 | 242 |
| 239 // Prevent OS X 10.7+ history swiping on the NTP. | |
| 240 e.preventDefault(); | |
| 241 | |
| 242 // Continuous devices such as an Apple Touchpad or Apple MagicMouse will | 243 // Continuous devices such as an Apple Touchpad or Apple MagicMouse will |
| 243 // send arbitrary delta values. Conversly, standard mousewheels will | 244 // send arbitrary delta values. Conversly, standard mousewheels will |
| 244 // send delta values in increments of 120. (There is of course a small | 245 // send delta values in increments of 120. (There is of course a small |
| 245 // chance we mistake a continuous device for a non-continuous device. | 246 // chance we mistake a continuous device for a non-continuous device. |
| 246 // Unfortunately there isn't a better way to do this until real touch | 247 // Unfortunately there isn't a better way to do this until real touch |
| 247 // events are available to desktop clients.) | 248 // events are available to desktop clients.) |
| 248 var DISCRETE_DELTA = 120; | 249 var DISCRETE_DELTA = 120; |
| 249 if (e.wheelDeltaX % DISCRETE_DELTA) | 250 if (e.wheelDeltaX % DISCRETE_DELTA) |
| 250 this.mouseWheelIsContinuous_ = true; | 251 this.mouseWheelIsContinuous_ = true; |
| 251 | 252 |
| (...skipping 362 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 614 | 615 |
| 615 // Ensure we're at a card bounary | 616 // Ensure we're at a card bounary |
| 616 this.transformToCurrentCard_(true); | 617 this.transformToCurrentCard_(true); |
| 617 }, | 618 }, |
| 618 }; | 619 }; |
| 619 | 620 |
| 620 return { | 621 return { |
| 621 CardSlider: CardSlider | 622 CardSlider: CardSlider |
| 622 }; | 623 }; |
| 623 }); | 624 }); |
| OLD | NEW |