compression tricks backported from micro

cougarten · Mar 24, 2015 · 2210cf0 · 2210cf0
1 parent a06376d
commit 2210cf0
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 121 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ enables scrolling via holding the mouse button (drag-n-drop style,
 
 
 Download the
-[distribution](https://github.com/asvd/dragscroll/releases/download/v0.0.3/dragscroll-0.0.3.tar.gz),
+[distribution](https://github.com/asvd/dragscroll/releases/download/v0.0.4/dragscroll-0.0.4.tar.gz),
 unpack it and load the `dragscroll.js` or `dragscroll_micro.js`:
 
 ```html
@@ -35,17 +35,21 @@ the users (or even `cursor: grab;` in case the content is not a text).
 
 ### Micro verison
 
-Located in `dragscroll_micro.js`, its size is 410 bytes, and it just works.
+Located in `dragscroll_micro.js`, its size is 410 bytes, and it just
+works.
 
 
 ### Full-featured verison
 
-Located in `dragscroll.js`, its size is 972 bytes due to some
+Located in `dragscroll.js`, its size is 741 bytes due to some
 additional features:
 
 - that is an UMD module, so you can load it in a preferrable way;
 
-- 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>`);
+- 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>`);
 
 - add or remove the `dragscroll` class dynamically (if you do it,
 invoke `dragscroll.reset()` to update the listeners).

diff --git a/dragscroll.js b/dragscroll.js
@@ -1,6 +1,6 @@
 /**
  * @fileoverview dragscroll - scroll area by dragging
- * @version 0.0.3
+ * @version 0.0.4
  * 
  * @license MIT, see http://github.com/asvd/intence
  * @copyright 2015 asvd <heliosframework@gmail.com> 
@@ -15,133 +15,63 @@
     } else {
         factory((root.dragscroll = {}));
     }
-}(this,
-function (exports) {
-    // better compression
+}(this, function (exports) {
     var _window = window;
-    var mousemove='mousemove';
-    var mouseup='mouseup';
-    var mousedown='mousedown';
+    var mousemove = 'mousemove';
+    var mouseup = 'mouseup';
+    var mousedown = 'mousedown';
     var addEventListener = 'addEventListener';
     var removeEventListener = 'removeEventListener';
-    var clientX = 'clientX';
-    var clientY = 'clientY';
 
-
-    /**
-     * Returns the actual scrolling element
-     * 
-     * @param {Element} elem to get scroller for
-     * 
-     * @returns {Element} scroller
-     */
-    var get_scroller = function(elem) {
-        var scroller = elem;
-
-        if (elem.className.indexOf('intence') != -1 &&
-            typeof elem.scroller != 'undefined') {
-            scroller = elem.scroller;
-        }
-
-        return scroller;
-    }
-
-    /**
-     * Initializes the dragscroll events for the element
-     * 
-     * @param {Element} el
-     */
-    var drag = function(el){
-        var lastClientX, lastClientY;
-        var pushed = false;
-
-        el.md = function(e) {
-            pushed = true;
-            lastClientX = e[clientX];
-            lastClientY = e[clientY];
-
-            e.preventDefault();
-            e.stopPropagation();
+    var dragged = [];
+    var reset = function(i, el) {
+        for (i = 0; i < dragged.length;) {
+            el = dragged[i++];
+            el[removeEventListener](mousedown, el.md, 0);
+            _window[removeEventListener](mouseup, el.mu, 0);
+            _window[removeEventListener](mousemove, el.mm, 0);
         }
 
-        el.mu = function() {
-            if (pushed) {
-                pushed = false;
-            }
+        dragged = document.getElementsByClassName('dragscroll');
+        for (i = 0; i < dragged.length;) {
+            (function(el, lastClientX, lastClientY, pushed){
+                el[addEventListener](
+                    mousedown,
+                    el.md = function(e) {
+                        pushed = 1;
+                        lastClientX = e.clientX;
+                        lastClientY = e.clientY;
+
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }, 0
+                );
+
+                 _window[addEventListener](
+                     mouseup, el.mu = function() {pushed = 0;}, 0
+                 );
+
+                _window[addEventListener](
+                    mousemove,
+                    el.mm = function(e, scroller) {
+                        scroller = el.scroller||el;
+                        if (pushed) {
+                             scroller.scrollLeft -=
+                                 (- lastClientX + (lastClientX=e.clientX));
+                             scroller.scrollTop -=
+                                 (- lastClientY + (lastClientY=e.clientY));
+                        }
+                    }, 0
+                );
+             })(dragged[i++]);
         }
-
-        el.mm = function(e) {
-            var scroller = get_scroller(el);
-
-            if (pushed) {
-                scroller.scrollLeft -= (e[clientX] - lastClientX);
-                scroller.scrollTop -= (e[clientY] - lastClientY);
-
-                lastClientX = e[clientX];
-                lastClientY = e[clientY];
-            }
-        }
-
-        el[addEventListener](mousedown, el.md, false);
-        _window[addEventListener](mouseup, el.mu, false);
-        _window[addEventListener](mousemove, el.mm, false);
     }
 
-
-    /**
-     * Removes dragscroll events for the element
-     * 
-     * @param {Element} el
-     */
-    var undrag = function(el) {
-        el[removeEventListener](mousedown, el.md, false);
-        _window[removeEventListener](mouseup, el.mu, false);
-        _window[removeEventListener](mousemove, el.mm, false);
-    }
-
-
-    // dragged elements
-    var dragged = [];
-
-    /**
-     * Runs through all dragged elements, removes dragscroll events
-     */
-    var destroyDrag = function() {
-        for (var i = 0; i < dragged.length; i++) {
-            undrag(dragged[i]);
-        }
-        dragged = [];
-    }
-
-
-    /**
-     * Runs through all elements having the dragscroll class,
-     * initializes the events
-     */
-    var createDrag = function() {
-        var elems = document.getElementsByClassName('dragscroll');
-        for (var i = 0; i < elems.length; i++) {
-            drag(elems[i]);
-            dragged.push(elems[i]);
-        }
-    }
 
-
-
-    /**
-     * Updates the dragscroll for the elments
-     */
-    var reset = function() {
-        destroyDrag();
-        createDrag();
-    }
-
-
-
     if (document.readyState == "complete") {
         reset();
     } else {
-        _window[addEventListener]("load", reset, false);
+        _window[addEventListener]("load", reset, 0);
     }
 
     exports.reset = reset;

diff --git a/dragscroll_micro.js b/dragscroll_micro.js
@@ -1,3 +1,12 @@
+/**
+ * @fileoverview dragscroll - scroll area by dragging
+ * @version 0.0.4 micro
+ * 
+ * @license MIT, see http://github.com/asvd/intence
+ * @copyright 2015 asvd <heliosframework@gmail.com> 
+ */
+
+
 window.addEventListener("load", function() {
     var addEventListener = 'addEventListener';
     var elems = document.getElementsByClassName('dragscroll');
@@ -14,8 +23,10 @@ window.addEventListener("load", function() {
 
             window[addEventListener]('mousemove', function(e) {
                 if (pushed) {
-                    elem.scrollLeft -= (- lastClientX + (lastClientX=e.clientX));
-                    elem.scrollTop -= (- lastClientY + (lastClientY=e.clientY));
+                    elem.scrollLeft -=
+                        (- lastClientX + (lastClientX=e.clientX));
+                    elem.scrollTop -=
+                        (- lastClientY + (lastClientY=e.clientY));
                 }
             }, 0);