Skip to content

Commit 2210cf0

Browse files
asvdasvd
committed
compression tricks backported from micro
1 parent a06376d commit 2210cf0

File tree

3 files changed

+66
-121
lines changed

3 files changed

+66
-121
lines changed

‎README.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ enables scrolling via holding the mouse button (drag-n-drop style,
1010

1111

1212
Download the
13-
[distribution](https://github.com/asvd/dragscroll/releases/download/v0.0.3/dragscroll-0.0.3.tar.gz),
13+
[distribution](https://github.com/asvd/dragscroll/releases/download/v0.0.4/dragscroll-0.0.4.tar.gz),
1414
unpack it and load the `dragscroll.js` or `dragscroll_micro.js`:
1515

1616
```html
@@ -35,17 +35,21 @@ the users (or even `cursor: grab;` in case the content is not a text).
3535

3636
### Micro verison
3737

38-
Located in `dragscroll_micro.js`, its size is 410 bytes, and it just works.
38+
Located in `dragscroll_micro.js`, its size is 410 bytes, and it just
39+
works.
3940

4041

4142
### Full-featured verison
4243

43-
Located in `dragscroll.js`, its size is 972 bytes due to some
44+
Located in `dragscroll.js`, its size is 741 bytes due to some
4445
additional features:
4546

4647
- that is an UMD module, so you can load it in a preferrable way;
4748

48-
- it can be loaded after the page load, the library will find the elements with the `dragscroll` class and setup the events for them (micro version does this on page load and should be included in the `<head>`);
49+
- it can be loaded after the page load, the library will find the
50+
elements with the `dragscroll` class and setup the events for them
51+
(micro version does this on page load and should be included in the
52+
`<head>`);
4953

5054
- add or remove the `dragscroll` class dynamically (if you do it,
5155
invoke `dragscroll.reset()` to update the listeners).

‎dragscroll.js

Lines changed: 45 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* @fileoverview dragscroll - scroll area by dragging
3-
* @version 0.0.3
3+
* @version 0.0.4
44
*
55
* @license MIT, see http://github.com/asvd/intence
66
* @copyright 2015 asvd <heliosframework@gmail.com>
@@ -15,133 +15,63 @@
1515
} else {
1616
factory((root.dragscroll = {}));
1717
}
18-
}(this,
19-
function (exports) {
20-
// better compression
18+
}(this, function (exports) {
2119
var _window = window;
22-
var mousemove='mousemove';
23-
var mouseup='mouseup';
24-
var mousedown='mousedown';
20+
var mousemove = 'mousemove';
21+
var mouseup = 'mouseup';
22+
var mousedown = 'mousedown';
2523
var addEventListener = 'addEventListener';
2624
var removeEventListener = 'removeEventListener';
27-
var clientX = 'clientX';
28-
var clientY = 'clientY';
2925

30-
31-
/**
32-
* Returns the actual scrolling element
33-
*
34-
* @param {Element} elem to get scroller for
35-
*
36-
* @returns {Element} scroller
37-
*/
38-
var get_scroller = function(elem) {
39-
var scroller = elem;
40-
41-
if (elem.className.indexOf('intence') != -1 &&
42-
typeof elem.scroller != 'undefined') {
43-
scroller = elem.scroller;
44-
}
45-
46-
return scroller;
47-
}
48-
49-
/**
50-
* Initializes the dragscroll events for the element
51-
*
52-
* @param {Element} el
53-
*/
54-
var drag = function(el){
55-
var lastClientX, lastClientY;
56-
var pushed = false;
57-
58-
el.md = function(e) {
59-
pushed = true;
60-
lastClientX = e[clientX];
61-
lastClientY = e[clientY];
62-
63-
e.preventDefault();
64-
e.stopPropagation();
26+
var dragged = [];
27+
var reset = function(i, el) {
28+
for (i = 0; i < dragged.length;) {
29+
el = dragged[i++];
30+
el[removeEventListener](mousedown, el.md, 0);
31+
_window[removeEventListener](mouseup, el.mu, 0);
32+
_window[removeEventListener](mousemove, el.mm, 0);
6533
}
6634

67-
el.mu = function() {
68-
if (pushed) {
69-
pushed = false;
70-
}
35+
dragged = document.getElementsByClassName('dragscroll');
36+
for (i = 0; i < dragged.length;) {
37+
(function(el, lastClientX, lastClientY, pushed){
38+
el[addEventListener](
39+
mousedown,
40+
el.md = function(e) {
41+
pushed = 1;
42+
lastClientX = e.clientX;
43+
lastClientY = e.clientY;
44+
45+
e.preventDefault();
46+
e.stopPropagation();
47+
}, 0
48+
);
49+
50+
_window[addEventListener](
51+
mouseup, el.mu = function() {pushed = 0;}, 0
52+
);
53+
54+
_window[addEventListener](
55+
mousemove,
56+
el.mm = function(e, scroller) {
57+
scroller = el.scroller||el;
58+
if (pushed) {
59+
scroller.scrollLeft -=
60+
(- lastClientX + (lastClientX=e.clientX));
61+
scroller.scrollTop -=
62+
(- lastClientY + (lastClientY=e.clientY));
63+
}
64+
}, 0
65+
);
66+
})(dragged[i++]);
7167
}
72-
73-
el.mm = function(e) {
74-
var scroller = get_scroller(el);
75-
76-
if (pushed) {
77-
scroller.scrollLeft -= (e[clientX] - lastClientX);
78-
scroller.scrollTop -= (e[clientY] - lastClientY);
79-
80-
lastClientX = e[clientX];
81-
lastClientY = e[clientY];
82-
}
83-
}
84-
85-
el[addEventListener](mousedown, el.md, false);
86-
_window[addEventListener](mouseup, el.mu, false);
87-
_window[addEventListener](mousemove, el.mm, false);
8868
}
8969

90-
91-
/**
92-
* Removes dragscroll events for the element
93-
*
94-
* @param {Element} el
95-
*/
96-
var undrag = function(el) {
97-
el[removeEventListener](mousedown, el.md, false);
98-
_window[removeEventListener](mouseup, el.mu, false);
99-
_window[removeEventListener](mousemove, el.mm, false);
100-
}
101-
102-
103-
// dragged elements
104-
var dragged = [];
105-
106-
/**
107-
* Runs through all dragged elements, removes dragscroll events
108-
*/
109-
var destroyDrag = function() {
110-
for (var i = 0; i < dragged.length; i++) {
111-
undrag(dragged[i]);
112-
}
113-
dragged = [];
114-
}
115-
116-
117-
/**
118-
* Runs through all elements having the dragscroll class,
119-
* initializes the events
120-
*/
121-
var createDrag = function() {
122-
var elems = document.getElementsByClassName('dragscroll');
123-
for (var i = 0; i < elems.length; i++) {
124-
drag(elems[i]);
125-
dragged.push(elems[i]);
126-
}
127-
}
12870

129-
130-
131-
/**
132-
* Updates the dragscroll for the elments
133-
*/
134-
var reset = function() {
135-
destroyDrag();
136-
createDrag();
137-
}
138-
139-
140-
14171
if (document.readyState == "complete") {
14272
reset();
14373
} else {
144-
_window[addEventListener]("load", reset, false);
74+
_window[addEventListener]("load", reset, 0);
14575
}
14676

14777
exports.reset = reset;

‎dragscroll_micro.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
/**
2+
* @fileoverview dragscroll - scroll area by dragging
3+
* @version 0.0.4 micro
4+
*
5+
* @license MIT, see http://github.com/asvd/intence
6+
* @copyright 2015 asvd <heliosframework@gmail.com>
7+
*/
8+
9+
110
window.addEventListener("load", function() {
211
var addEventListener = 'addEventListener';
312
var elems = document.getElementsByClassName('dragscroll');
@@ -14,8 +23,10 @@ window.addEventListener("load", function() {
1423

1524
window[addEventListener]('mousemove', function(e) {
1625
if (pushed) {
17-
elem.scrollLeft -= (- lastClientX + (lastClientX=e.clientX));
18-
elem.scrollTop -= (- lastClientY + (lastClientY=e.clientY));
26+
elem.scrollLeft -=
27+
(- lastClientX + (lastClientX=e.clientX));
28+
elem.scrollTop -=
29+
(- lastClientY + (lastClientY=e.clientY));
1930
}
2031
}, 0);
2132

0 commit comments

Comments
 (0)