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