Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(7)

Side by Side Diff: chrome/browser/resources/file_manager/js/scrollbar.js

Issue 39123003: [Files.app] Split the JavaScript files into subdirectories: common, background, and foreground (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: fixed test failure. Created 7 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
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
3 // found in the LICENSE file.
4
5 'use strict';
6
7 /**
8 * Creates a new scroll bar element.
9 * @extends {HTMLDivElement}
10 * @constructor
11 */
12 var ScrollBar = cr.ui.define('div');
13
14 /**
15 * Mode of the scrollbar. As for now, only vertical scrollbars are supported.
16 * @type {number}
17 */
18 ScrollBar.Mode = {
19 VERTICAL: 0,
20 HORIZONTAL: 1
21 };
22
23 ScrollBar.prototype = {
24 set mode(value) {
25 this.mode_ = value;
26 if (this.mode_ == ScrollBar.Mode.VERTICAL) {
27 this.classList.remove('scrollbar-horizontal');
28 this.classList.add('scrollbar-vertical');
29 } else {
30 this.classList.remove('scrollbar-vertical');
31 this.classList.add('scrollbar-horizontal');
32 }
33 this.redraw_();
34 },
35 get mode() {
36 return this.mode_;
37 }
38 };
39
40 /**
41 * Inherits after HTMLDivElement.
42 */
43 ScrollBar.prototype.__proto__ = HTMLDivElement.prototype;
44
45 /**
46 * Initializes the DOM structure of the scrollbar.
47 */
48 ScrollBar.prototype.decorate = function() {
49 this.classList.add('scrollbar');
50 this.button_ = util.createChild(this, 'scrollbar-button', 'div');
51 this.mode = ScrollBar.Mode.VERTICAL;
52
53 this.button_.addEventListener('mousedown',
54 this.onButtonPressed_.bind(this));
55 window.addEventListener('mouseup', this.onMouseUp_.bind(this));
56 window.addEventListener('mousemove', this.onMouseMove_.bind(this));
57 };
58
59 /**
60 * Initialize a scrollbar.
61 *
62 * @param {Element} parent Parent element, must have a relative or absolute
63 * positioning.
64 * @param {Element=} opt_scrollableArea Element with scrollable contents.
65 * If not passed, then call attachToView manually when the scrollable
66 * element becomes available.
67 */
68 ScrollBar.prototype.initialize = function(parent, opt_scrollableArea) {
69 parent.appendChild(this);
70 if (opt_scrollableArea)
71 this.attachToView(opt_scrollableArea);
72 };
73
74 /**
75 * Attaches the scrollbar to a scrollable element and attaches handlers.
76 * @param {Element} view Scrollable element.
77 */
78 ScrollBar.prototype.attachToView = function(view) {
79 this.view_ = view;
80 this.view_.addEventListener('scroll', this.onScroll_.bind(this));
81 this.view_.addEventListener('relayout', this.onRelayout_.bind(this));
82 this.domObserver_ = new MutationObserver(this.onDomChanged_.bind(this));
83 this.domObserver_.observe(this.view_, {subtree: true, attributes: true});
84 this.onRelayout_();
85 };
86
87 /**
88 * Scroll handler.
89 * @private
90 */
91 ScrollBar.prototype.onScroll_ = function() {
92 this.scrollTop_ = this.view_.scrollTop;
93 this.redraw_();
94 };
95
96 /**
97 * Relayout handler.
98 * @private
99 */
100 ScrollBar.prototype.onRelayout_ = function() {
101 this.scrollHeight_ = this.view_.scrollHeight;
102 this.clientHeight_ = this.view_.clientHeight;
103 this.offsetTop_ = this.view_.offsetTop;
104 this.scrollTop_ = this.view_.scrollTop;
105 this.redraw_();
106 };
107
108 /**
109 * Pressing on the scrollbar's button handler.
110 *
111 * @param {Event} event Pressing event.
112 * @private
113 */
114 ScrollBar.prototype.onButtonPressed_ = function(event) {
115 this.buttonPressed_ = true;
116 this.buttonPressedEvent_ = event;
117 this.buttonPressedPosition_ = this.button_.offsetTop - this.view_.offsetTop;
118 this.button_.classList.add('pressed');
119
120 event.preventDefault();
121 };
122
123 /**
124 * Releasing the button handler. Note, that it may not be called when releasing
125 * outside of the window. Therefore this is also called from onMouseMove_.
126 *
127 * @param {Event} event Mouse event.
128 * @private
129 */
130 ScrollBar.prototype.onMouseUp_ = function(event) {
131 this.buttonPressed_ = false;
132 this.button_.classList.remove('pressed');
133 };
134
135 /**
136 * Mouse move handler. Updates the scroll position.
137 *
138 * @param {Event} event Mouse event.
139 * @private
140 */
141 ScrollBar.prototype.onMouseMove_ = function(event) {
142 if (!this.buttonPressed_)
143 return;
144 if (!event.which) {
145 this.onMouseUp_(event);
146 return;
147 }
148 var clientSize = this.getClientHeight();
149 var totalSize = this.getTotalHeight();
150 // TODO(hirono): Fix the geometric calculation. crbug.com/253779
151 var buttonSize = Math.max(50, clientSize / totalSize * clientSize);
152 var buttonPosition = this.buttonPressedPosition_ +
153 (event.screenY - this.buttonPressedEvent_.screenY);
154 // Ensures the scrollbar is in the view.
155 buttonPosition =
156 Math.max(0, Math.min(buttonPosition, clientSize - buttonSize));
157 var scrollPosition;
158 if (clientSize > buttonSize) {
159 scrollPosition = Math.max(totalSize - clientSize, 0) *
160 buttonPosition / (clientSize - buttonSize);
161 } else {
162 scrollPosition = 0;
163 }
164
165 this.scrollTop_ = scrollPosition;
166 this.view_.scrollTop = scrollPosition;
167 this.redraw_();
168 };
169
170 /**
171 * Handles changed in Dom by redrawing the scrollbar. Ignores consecutive calls.
172 * @private
173 */
174 ScrollBar.prototype.onDomChanged_ = function() {
175 if (this.domChangedTimer_) {
176 clearTimeout(this.domChangedTimer_);
177 this.domChangedTimer_ = null;
178 }
179 this.domChangedTimer_ = setTimeout(function() {
180 this.onRelayout_();
181 this.domChangedTimer_ = null;
182 }.bind(this), 50);
183 };
184
185 /**
186 * Redraws the scrollbar.
187 * @private
188 */
189 ScrollBar.prototype.redraw_ = function() {
190 if (!this.view_)
191 return;
192
193 var clientSize = this.getClientHeight();
194 var clientTop = this.offsetTop_;
195 var scrollPosition = this.scrollTop_;
196 var totalSize = this.getTotalHeight();
197 var hidden = totalSize <= clientSize;
198
199 var buttonSize = Math.max(50, clientSize / totalSize * clientSize);
200 var buttonPosition;
201 if (clientSize - buttonSize > 0) {
202 buttonPosition = scrollPosition / (totalSize - clientSize) *
203 (clientSize - buttonSize);
204 } else {
205 buttonPosition = 0;
206 }
207 var buttonTop = buttonPosition + clientTop;
208
209 var time = Date.now();
210 if (this.hidden != hidden ||
211 this.lastButtonTop_ != buttonTop ||
212 this.lastButtonSize_ != buttonSize) {
213 requestAnimationFrame(function() {
214 this.hidden = hidden;
215 this.button_.style.top = buttonTop + 'px';
216 this.button_.style.height = buttonSize + 'px';
217 }.bind(this));
218 }
219
220 this.lastButtonTop_ = buttonTop;
221 this.lastButtonSize_ = buttonSize;
222 };
223
224 /**
225 * Returns the viewport height of the view.
226 * @return {number} The viewport height of the view in px.
227 * @protected
228 */
229 ScrollBar.prototype.getClientHeight = function() {
230 return this.clientHeight_;
231 };
232
233 /**
234 * Returns the total height of the view.
235 * @return {number} The total height of the view in px.
236 * @protected
237 */
238 ScrollBar.prototype.getTotalHeight = function() {
239 return this.scrollHeight_;
240 };
241
242 /**
243 * Creates a new scroll bar for elements in the main panel.
244 * @extends {ScrollBar}
245 * @constructor
246 */
247 var MainPanelScrollBar = cr.ui.define('div');
248
249 /**
250 * Inherits after ScrollBar.
251 */
252 MainPanelScrollBar.prototype.__proto__ = ScrollBar.prototype;
253
254 /** @override */
255 MainPanelScrollBar.prototype.decorate = function() {
256 ScrollBar.prototype.decorate.call(this);
257
258 /**
259 * Margin for the transparent preview panel at the bottom.
260 * @type {number}
261 * @private
262 */
263 this.bottomMarginForPanel_ = 0;
264 };
265
266 /**
267 * GReturns the viewport height of the view, considering the preview panel.
268 *
269 * @return {number} The viewport height of the view in px.
270 * @override
271 * @protected
272 */
273 MainPanelScrollBar.prototype.getClientHeight = function() {
274 return this.clientHeight_ - this.bottomMarginForPanel_;
275 };
276
277 /**
278 * Returns the total height of the view, considering the preview panel.
279 *
280 * @return {number} The total height of the view in px.
281 * @override
282 * @protected
283 */
284 MainPanelScrollBar.prototype.getTotalHeight = function() {
285 return this.scrollHeight_ - this.bottomMarginForPanel_;
286 };
287
288 /**
289 * Sets the bottom margin height of the view for the transparent preview panel.
290 * @param {number} margin Margin to be set in px.
291 */
292 MainPanelScrollBar.prototype.setBottomMarginForPanel = function(margin) {
293 this.bottomMarginForPanel_ = margin;
294 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698