forked from mozilla/butter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
zoombar.js
94 lines (76 loc) · 2.78 KB
/
zoombar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
/* This Source Code Form is subject to the terms of the MIT license
* If a copy of the MIT license was not distributed with this file, you can
* obtain one at http://www.mozillapopcorn.org/butter-license.txt */
define( [], function(){
var ZOOM_LEVELS = 6;
return function( zoomCallback ){
var _element = document.createElement( "div" ),
_handle = document.createElement( "div" ),
_rect,
_mousePos,
_handleWidth,
_elementWidth,
_this = this;
_element.className = "zoom-bar scroll-bar";
_handle.className = "scroll-handle";
_element.appendChild( _handle );
function onMouseUp(){
window.removeEventListener( "mouseup", onMouseUp, false );
window.removeEventListener( "mousemove", onMouseMove, false );
_handle.addEventListener( "mousedown", onMouseDown, false );
zoomCallback( _handle.offsetLeft / _rect.width );
} //onMouseUp
function onMouseMove( e ){
var diff = e.pageX - _mousePos;
diff = Math.max( 0, Math.min( diff, _elementWidth - _handleWidth ) );
_handle.style.left = diff + "px";
zoomCallback( _handle.offsetLeft / _rect.width );
} //onMouseMove
function onMouseDown( e ){
if( e.button === 0 ){
var handleX = _handle.offsetLeft;
_mousePos = e.pageX - handleX;
window.addEventListener( "mouseup", onMouseUp, false );
window.addEventListener( "mousemove", onMouseMove, false );
_handle.removeEventListener( "mousedown", onMouseDown, false );
} //if
} //onMouseDown
_handle.addEventListener( "mousedown", onMouseDown, false );
this.update = function( level ) {
_rect = _element.getBoundingClientRect();
_handleWidth = ( _rect.width / ZOOM_LEVELS );
_handle.style.width = _handleWidth + "px";
_elementWidth = _rect.width;
if( level !== undefined ){
_handle.style.left = ( level * _handleWidth ) + "px";
} //if
};
_element.addEventListener( "click", function( e ) {
// bail early if this event is coming from the handle
if( e.srcElement === _handle ) {
return;
}
var posX = e.pageX,
handleRect = _handle.getBoundingClientRect(),
elementRect = _element.getBoundingClientRect(),
p;
if( posX > handleRect.right ) {
_handle.style.left = ( ( posX - elementRect.left ) - _handleWidth ) + "px";
} else {
_handle.style.left = posX - elementRect.left + "px";
}
onMouseMove( e );
}, false);
_element.addEventListener( "resize", function( e ){
_this.update();
}, false );
Object.defineProperties( this, {
element: {
enumerable: true,
get: function(){
return _element;
}
}
});
}; //ZoomBar
});