Skip to content

Commit 1af93c2

Browse files
Lawrence GoldstienLawrence Goldstien
Lawrence Goldstien
authored and
Lawrence Goldstien
committed
Cleanup and increment version number
1 parent 5ab3b72 commit 1af93c2

File tree

4 files changed

+390
-191
lines changed

4 files changed

+390
-191
lines changed

‎dist/dragpan.js‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
/*! Dragpan - v1.0.2 - 2014-08-12
2+
* https://github.com/lgoldstien/jquery-dragpan
3+
* Copyright (c) 2014 Lawrence Goldstien; Licensed MIT */
4+
(function () {
5+
"use strict";
6+
7+
var scope;
8+
9+
/*jshint -W117 */
10+
$.widget( "oml.dragpan", {
11+
12+
// The widget default options
13+
_defaults: {
14+
speedX: 10, // X Speed default is 10
15+
speedY: 10, // Y Speed default is 10
16+
cursor: 'all-scroll', // Cursor default is all-scroll
17+
on: true, // Default to turning on dragpan on calling the function
18+
bodyselect: false // Default to turning selection on the body off completely
19+
},
20+
21+
// The class construct
22+
_create: function() {
23+
// This fix
24+
scope = this;
25+
26+
// Set the parent option as we cannot do this in defaults
27+
this._defaults.$parent = $(this.element);
28+
29+
// Set the options based on the defaults (if we have any options)
30+
if (typeof this.options === 'undefined') {
31+
this.options = this._defaults;
32+
} else {
33+
this.options = $.extend( this._defaults, this.options );
34+
}
35+
if (typeof this.options.parent === 'object') {
36+
this.options.$parent = this.options.parent;
37+
}
38+
39+
// Set up the variables used in the function
40+
this.vars = {
41+
$parent : this.options.$parent,
42+
$child : this.options.$parent.children(),
43+
maxX : this.options.$parent.children().prop('scrollWidth'),
44+
maxY : this.options.$parent.children().prop('scrollHeight'),
45+
posX : this.options.$parent.scrollLeft(),
46+
posY : this.options.$parent.scrollTop(),
47+
lastPosX : 0,
48+
lastPosY : 0,
49+
state : 'off'
50+
};
51+
52+
// Find out if text selection was enabled before
53+
this.vars.selection = false;
54+
55+
if ( this.vars.$parent.css( "-webkit-touch-callout" ) !== 'none' ){
56+
this.vars.selection = true;
57+
}
58+
if ( this.vars.$parent.css( "-webkit-user-select" ) !== 'none' ){
59+
this.vars.selection = true;
60+
}
61+
if ( this.vars.$parent.css( "-khtml-user-select" ) !== 'none' ){
62+
this.vars.selection = true;
63+
}
64+
if ( this.vars.$parent.css( "-moz-user-select" ) !== 'none' ){
65+
this.vars.selection = true;
66+
}
67+
if ( this.vars.$parent.css( "-ms-user-select" ) !== 'none' ){
68+
this.vars.selection = true;
69+
}
70+
if ( this.vars.$parent.css( "user-select" ) !== 'none' ){
71+
this.vars.selection = true;
72+
}
73+
74+
// If the scroll event is triggered then update scroll position (keys and wheel)
75+
this.vars.$parent.scroll( function () {
76+
scope.vars.posX = scope.vars.$parent.scrollLeft();
77+
scope.vars.posY = scope.vars.$parent.scrollTop();
78+
});
79+
80+
// Trigger the mouse binding if this is set to on
81+
if( scope.options.on === true ) {
82+
this.on();
83+
}
84+
},
85+
_dragging: function ( action ) {
86+
if ( action === 'on' ) {
87+
this.vars.$parent.mousemove(function (e) {
88+
89+
var x = ( scope.vars.lastPosX - e.clientX ) * (scope.options.speedX / 10);
90+
var y = ( scope.vars.lastPosY - e.clientY ) * (scope.options.speedY / 10);
91+
92+
scope._updateScrollPosition( x, y, true );
93+
94+
scope.vars.lastPosX = e.clientX;
95+
scope.vars.lastPosY = e.clientY;
96+
97+
});
98+
} else {
99+
this.vars.$parent.off('mousemove');
100+
}
101+
},
102+
_updateScrollPosition: function (x, y, relational) {
103+
// If the new scroll position is in relation to the old ones
104+
// then update the scroll position based on them
105+
if ( relational === true ) {
106+
this.vars.$parent.scrollLeft( this.vars.posX + x );
107+
this.vars.$parent.scrollTop( this.vars.posY + y );
108+
} else {
109+
this.vars.$parent.scrollLeft( x );
110+
this.vars.$parent.scrollTop( y );
111+
}
112+
},
113+
_addMouseBinding: function () {
114+
// On mousedown toggle dragging on
115+
this.vars.$parent.mousedown( function (e) {
116+
scope.vars.lastPosX = e.clientX;
117+
scope.vars.lastPosY = e.clientY;
118+
scope._dragging( 'on' );
119+
});
120+
121+
// On mouseup toggle dragging off
122+
this.vars.$parent.mouseup( function (e) {
123+
scope._dragging( 'off' );
124+
});
125+
126+
// When the mouse leaves the window toggle dragging off
127+
this.vars.$parent.mouseleave( function (e) {
128+
scope._dragging( 'off' );
129+
});
130+
},
131+
_removeMouseBinding: function () {
132+
this.vars.$parent.off('mousemove')
133+
.off('mousedown')
134+
.off('mouseup')
135+
.off('mouseleave');
136+
137+
this._dragging( 'off' );
138+
},
139+
_state: function () {
140+
return this.vars.state;
141+
},
142+
// Turn off selection for the entire page
143+
_selectionOff: function () {
144+
if (this.vars.bodyselect === false) {
145+
$('body').css( "-webkit-touch-callout", "none" )
146+
.css( "-webkit-user-select", "none" )
147+
.css( "-khtml-user-select", "none" )
148+
.css( "-moz-user-select", "-moz-none" )
149+
.css( "-ms-user-select", "none" )
150+
.css( "user-select", "none" );
151+
}
152+
},
153+
// The public functions
154+
on: function () {
155+
if (this._state() === 'off') {
156+
// Set the cursor
157+
this.options.$parent.css( "cursor", this.options.cursor );
158+
159+
// Disable selection dragging
160+
this.vars.$parent.css( "-webkit-touch-callout", "none" )
161+
.css( "-webkit-user-select", "none" )
162+
.css( "-khtml-user-select", "none" )
163+
.css( "-moz-user-select", "-moz-none" )
164+
.css( "-ms-user-select", "none" )
165+
.css( "user-select", "none" );
166+
167+
// Add the mouse binding
168+
this._addMouseBinding();
169+
170+
// Turn off selection on body if set
171+
this._selectionOff();
172+
173+
// Set the state to on
174+
this.vars.state = 'on';
175+
}
176+
},
177+
off: function () {
178+
if (this._state() === 'on') {
179+
// Enable selection dragging if it was enabled to begin with
180+
if (this.vars.selection === true) {
181+
this.vars.$parent.css( "-webkit-touch-callout", "all" )
182+
.css( "-webkit-user-select", "all" )
183+
.css( "-khtml-user-select", "all" )
184+
.css( "-moz-user-select", "all" )
185+
.css( "-ms-user-select", "all" )
186+
.css( "user-select", "all" );
187+
}
188+
189+
// Set back to default cursor
190+
this.options.$parent.css( "cursor", "default" );
191+
192+
// Remove the mouse binding
193+
this._removeMouseBinding();
194+
195+
// Set the state to off
196+
this.vars.state = 'off';
197+
}
198+
}
199+
200+
});
201+
})();

‎dist/dragpan.min.js‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dragpan.jquery.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "dragpan",
33
"title": "Dragpan",
44
"description": "A jQuery plugin designed to allow click and drag panning of a scrollable element",
5-
"version": "1.0.2",
5+
"version": "1.1.2",
66
"homepage": "https://github.com/lgoldstien/jquery-dragpan",
77
"author": {
88
"name": "Lawrence Goldstien",
@@ -28,4 +28,4 @@
2828
"panning",
2929
"user interaction"
3030
]
31-
}
31+
}

0 commit comments

Comments
 (0)