OLD | NEW |
1 // Copyright (c) 2013 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2013 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 * Creates a new scroll bar element. | 6 * Creates a new scroll bar element. |
7 * @extends {HTMLDivElement} | 7 * @extends {HTMLDivElement} |
8 * @constructor | 8 * @constructor |
9 */ | 9 */ |
10 var ScrollBar = cr.ui.define('div'); | 10 var ScrollBar = cr.ui.define('div'); |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
44 * Initializes the DOM structure of the scrollbar. | 44 * Initializes the DOM structure of the scrollbar. |
45 */ | 45 */ |
46 ScrollBar.prototype.decorate = function() { | 46 ScrollBar.prototype.decorate = function() { |
47 this.classList.add('scrollbar'); | 47 this.classList.add('scrollbar'); |
48 this.button_ = util.createChild(this, 'scrollbar-button', 'div'); | 48 this.button_ = util.createChild(this, 'scrollbar-button', 'div'); |
49 this.mode = ScrollBar.Mode.VERTICAL; | 49 this.mode = ScrollBar.Mode.VERTICAL; |
50 this.idleTimerId_ = 0; | 50 this.idleTimerId_ = 0; |
51 | 51 |
52 this.button_.addEventListener('mousedown', | 52 this.button_.addEventListener('mousedown', |
53 this.onButtonPressed_.bind(this)); | 53 this.onButtonPressed_.bind(this)); |
| 54 this.button_.addEventListener('wheel', this.onWheel_.bind(this)); |
54 window.addEventListener('mouseup', this.onMouseUp_.bind(this)); | 55 window.addEventListener('mouseup', this.onMouseUp_.bind(this)); |
55 window.addEventListener('mousemove', this.onMouseMove_.bind(this)); | 56 window.addEventListener('mousemove', this.onMouseMove_.bind(this)); |
56 }; | 57 }; |
57 | 58 |
58 /** | 59 /** |
59 * Initialize a scrollbar. | 60 * Initialize a scrollbar. |
60 * | 61 * |
61 * @param {Element} parent Parent element, must have a relative or absolute | 62 * @param {Element} parent Parent element, must have a relative or absolute |
62 * positioning. | 63 * positioning. |
63 * @param {Element=} opt_scrollableArea Element with scrollable contents. | 64 * @param {Element=} opt_scrollableArea Element with scrollable contents. |
(...skipping 15 matching lines...) Expand all Loading... |
79 this.view_.addEventListener('scroll', this.onScroll_.bind(this)); | 80 this.view_.addEventListener('scroll', this.onScroll_.bind(this)); |
80 this.view_.addEventListener('relayout', this.onRelayout_.bind(this)); | 81 this.view_.addEventListener('relayout', this.onRelayout_.bind(this)); |
81 this.domObserver_ = new MutationObserver(this.onDomChanged_.bind(this)); | 82 this.domObserver_ = new MutationObserver(this.onDomChanged_.bind(this)); |
82 this.domObserver_.observe( | 83 this.domObserver_.observe( |
83 this.view_, | 84 this.view_, |
84 /** @type {MutationObserverInit} */ ({subtree: true, attributes: true})); | 85 /** @type {MutationObserverInit} */ ({subtree: true, attributes: true})); |
85 this.onRelayout_(); | 86 this.onRelayout_(); |
86 }; | 87 }; |
87 | 88 |
88 /** | 89 /** |
| 90 * Handles scroll by a mouse wheel. |
| 91 * |
| 92 * @param {Event} event Mouse event. |
| 93 * @private |
| 94 */ |
| 95 ScrollBar.prototype.onWheel_ = function(event) { |
| 96 var scrollPosition = this.view_.scrollTop + event.deltaY; |
| 97 // Ensure the scrollbar is in the view. |
| 98 var scrollBottom = |
| 99 Math.max(this.view_.scrollHeight - this.view_.clientHeight, 0); |
| 100 scrollPosition = Math.max(Math.min(scrollPosition, scrollBottom), 0); |
| 101 |
| 102 // TODO(yamaguchi): Invoke native scroll instead of setting scrollTop. |
| 103 // This implementation will bypass the smooth scroll animation seen with |
| 104 // native scroll. |
| 105 this.scrollTop_ = scrollPosition; |
| 106 this.view_.scrollTop = scrollPosition; |
| 107 this.redraw_(); |
| 108 } |
| 109 |
| 110 /** |
89 * Scroll handler. | 111 * Scroll handler. |
90 * @private | 112 * @private |
91 */ | 113 */ |
92 ScrollBar.prototype.onScroll_ = function() { | 114 ScrollBar.prototype.onScroll_ = function() { |
93 this.scrollTop_ = this.view_.scrollTop; | 115 this.scrollTop_ = this.view_.scrollTop; |
94 this.redraw_(); | 116 this.redraw_(); |
95 | 117 |
96 // Add class 'scrolling' to scrollbar to make it visible while scrolling. | 118 // Add class 'scrolling' to scrollbar to make it visible while scrolling. |
97 this.button_.classList.add('scrolling'); | 119 this.button_.classList.add('scrolling'); |
98 | 120 |
(...skipping 126 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
225 requestAnimationFrame(function() { | 247 requestAnimationFrame(function() { |
226 this.hidden = hidden; | 248 this.hidden = hidden; |
227 this.button_.style.top = buttonTop + 'px'; | 249 this.button_.style.top = buttonTop + 'px'; |
228 this.button_.style.height = buttonSize + 'px'; | 250 this.button_.style.height = buttonSize + 'px'; |
229 }.bind(this)); | 251 }.bind(this)); |
230 } | 252 } |
231 | 253 |
232 this.lastButtonTop_ = buttonTop; | 254 this.lastButtonTop_ = buttonTop; |
233 this.lastButtonSize_ = buttonSize; | 255 this.lastButtonSize_ = buttonSize; |
234 }; | 256 }; |
OLD | NEW |