-
Notifications
You must be signed in to change notification settings - Fork 375
/
scroll.js
139 lines (124 loc) · 4.23 KB
/
scroll.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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
steal("jquery/event/drop").then(function($){ //needs drop to determine if respondable
/**
* @add jQuery.Drag.prototype
*/
$.Drag.prototype.
/**
* Will scroll elements with a scroll bar as the drag moves to borders.
* @plugin jquery/event/drag/scroll
* @download http://jmvcsite.heroku.com/pluginify?plugins[]=jquery/event/drag/scroll/scroll.js
* @param {jQuery} elements to scroll. The window can be in this array.
* @param {Object} options changes the default settings.
*
* - distance {number} 30 - how many pixels away from a boundry where we start scrolling
* - delta(diff) {Function} - returns how far we should scroll. It is passed how many pixels the cursor is
* from the boundry.
* - direction {String} - direction scrolling should happen. "xy" is the default.
*/
scrolls = function(elements, options){
var elements = $(elements);
for(var i = 0 ; i < elements.length; i++){
this.constructor.responder._elements.push( elements.eq(i).data("_dropData", new $.Scrollable(elements[i], options) )[0] )
}
},
$.Scrollable = function(element, options){
this.element = jQuery(element);
this.options = $.extend({
// when we should start scrolling
distance : 30,
// how far we should move
delta : function(diff, distance){
return (distance - diff) / 2;
},
direction: "xy"
}, options);
this.x = this.options.direction.indexOf("x") != -1;
this.y = this.options.direction.indexOf("y") != -1;
}
$.extend($.Scrollable.prototype,{
init: function( element ) {
this.element = jQuery(element);
},
callHandlers: function( method, el, ev, drag ) {
this[method](el || this.element[0], ev, this, drag)
},
dropover: function() {
},
dropon: function() {
this.clear_timeout();
},
dropout: function() {
this.clear_timeout();
},
dropinit: function() {
},
dropend: function() {},
clear_timeout: function() {
if(this.interval){
clearTimeout(this.interval)
this.interval = null;
}
},
distance: function( diff ) {
return (30 - diff) / 2;
},
dropmove: function( el, ev, drop, drag ) {
//if we were about to call a move, clear it.
this.clear_timeout();
//position of the mouse
var mouse = ev.vector(),
//get the object we are going to get the boundries of
location_object = $(el == document.documentElement ? window : el),
//get the dimension and location of that object
dimensions = location_object.dimensionsv('outer'),
position = location_object.offsetv(),
//how close our mouse is to the boundries
bottom = position.y()+dimensions.y() - mouse.y(),
top = mouse.y() - position.y(),
right = position.x()+dimensions.x() - mouse.x(),
left = mouse.x() - position.x(),
//how far we should scroll
dx =0, dy =0,
distance = this.options.distance;
//check if we should scroll
if(bottom < distance && this.y)
dy = this.options.delta(bottom,distance);
else if(top < distance && this.y)
dy = -this.options.delta(top,distance)
if(right < distance && this.options && this.x)
dx = this.options.delta(right,distance);
else if(left < distance && this.x)
dx = -this.options.delta(left,distance);
//if we should scroll
if(dx || dy){
//set a timeout that will create a mousemove on that object
var self = this;
this.interval = setTimeout( function(){
self.move($(el), drag.movingElement, dx, dy, ev, ev.clientX, ev.clientY, ev.screenX, ev.screenY)
},15)
}
},
/**
* Scrolls an element then calls mouse a mousemove in the same location.
* @param {HTMLElement} scroll_element the element to be scrolled
* @param {HTMLElement} drag_element
* @param {Number} dx how far to scroll
* @param {Number} dy how far to scroll
* @param {Number} x the mouse position
* @param {Number} y the mouse position
*/
move: function( scroll_element, drag_element, dx, dy, ev/*, x,y,sx, sy*/ ) {
scroll_element.scrollTop( scroll_element.scrollTop() + dy);
scroll_element.scrollLeft(scroll_element.scrollLeft() + dx);
drag_element.trigger(
$.event.fix({type: "mousemove",
clientX: ev.clientX,
clientY: ev.clientY,
screenX: ev.screenX,
screenY: ev.screenY,
pageX: ev.pageX,
pageY: ev.pageY}))
//drag_element.synthetic('mousemove',{clientX: x, clientY: y, screenX: sx, screenY: sy})
}
})
})