v0.6.0 Infinite scroll (top/bottom edge reach) callbacks, resolve #7

README.md

@@ -10,12 +10,12 @@ So, the **Browser Support** is same as for [`MutationObserver`](https://develope
 
 ## Features & Usage
 
-* Small (~5.7KB minified), fast, vanilla JS (zero dependencies)
+* Small (~**6KB** minified), fast, vanilla JS (zero dependencies)
 * Nested scrollbars
 * Touch support
 * jQuery/Zepto/jBone plugin
 * React.js Component
-* *Infinite scroll callbacks (soon)*
+* Infinite scroll (top/bottom edge reach) callbacks
 
 ```js
 // Initialize

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "scrolly",
-    "version": "0.5.0",
+    "version": "0.6.0",
     "description": "Scrolly: fast vanilla JS scrollbar plugin.",
     "keywords": [
         "scroll", "scrollbar", "scrolly", "bar",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "scrolly",
-    "version": "0.5.0",
+    "version": "0.6.0",
     "description": "Scrolly: fast vanilla JS scrollbar plugin.",
     "keywords": [
         "scroll", "scrollbar", "scrolly", "bar",

public/css/styles-example.css

@@ -1,3 +1,3 @@
 body{font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;font-size:12px}article{clear:both;float:none;padding:.2em 1em}.scrolly{float:left;width:25%;height:400px}.scrolly>.area.test1{background:#F2E4D8}.scrolly>.area.test1.scrolly.area+.bar{background:#808CA6}.scrolly>.area.test1.scrolly.area+.bar .thumb{background:#283D59}.scrolly .scrolly{background:rgba(0,0,0,0.1);width:100%}
 
-/*  scrolly v0.5.0, 2015.11.26  */
+/*  scrolly v0.6.0, 2015.11.26  */

public/index.html

@@ -3,8 +3,16 @@
 // Send element
 scrolly.bar(document.querySelector('article.test2'));
 // jQuery Plugin
-var attrName = 'jQueryPlugin';
-$('.jquery').scrolly()
+var attrName = 'jQueryPlugin', i = 0;
+$('.jquery').scrolly({
+        onEdge: function (offset) {
+            console.log('Edge reached: ' + (offset ? 'Bottom' : 'Top'));
+            if (offset) {
+                $(this.area).append('<p>Added a line,  #' + (++i).toString() + '</p>');
+                scrolly.update(scrolly.getID(this));
+            }
+        }
+    })
     .attr(attrName, 1);
 
 $('.jquery.test4').scrolly('update')

public/js/react-scrolly.js

@@ -1,4 +1,4 @@
-/*  scrolly v0.5.0, 2015.11.26  */
+/*  scrolly v0.6.0, 2015.11.26  */
 var dataSet = function initDataSet() {
     if (document.documentElement.dataset) {
         return function native(el, prop, value) {
@@ -45,6 +45,11 @@ var dataSet = function initDataSet() {
             return title + ': ' + text;
         },
 
+        // Timeouts for Event callbacks
+        timeouts = {},
+        TIMER_EDGE = 'e',
+        TIMER_UP = 'u',
+
         // Node helpers
         // classList is not supported by IE9
         addClass = function (className, node) {
@@ -111,6 +116,22 @@ var dataSet = function initDataSet() {
             return value + 'px';
         },
 
+        clearTimer = function (key) {
+            if (!timeouts[key]) {
+                return;
+            }
+            clearTimeout(timeouts[key]);
+            delete timeouts[key];
+        },
+        dummyTimer = function (key) {
+            clearTimer(key);
+            return (
+                timeouts[key] = setTimeout(function () {
+                    clearTimer(key);
+                }, 500)
+            );
+        },
+
         hasTouch = ('ontouchstart' in document.documentElement),
         wheelEventName = ('onwheel' in document || document.documentMode >= 9)
             ? 'wheel'
@@ -124,7 +145,7 @@ var dataSet = function initDataSet() {
             document.ontouchmove = document.ontouchend = null;
 
             removeClass(this.noUserSelectClass, document.body);
-            removeClass(this.onDragClass, data.bar);
+            removeClass(this.dragClass, data.bar);
         },
         onBegin = function (data, e) {
             var self = this,
@@ -145,7 +166,7 @@ var dataSet = function initDataSet() {
                 };
 
             addClass(this.noUserSelectClass, document.body);
-            addClass(this.onDragClass, data.bar);
+            addClass(this.dragClass, data.bar);
 
             if (hasTouch) {
                 document.ontouchmove = function (e) {
@@ -158,6 +179,19 @@ var dataSet = function initDataSet() {
                 document.body.onmouseup = done;
             }
         },
+        onWheelEdge = function (data, offset) {
+            if (typeof data.onEdge !== 'function') {
+                return;
+            }
+            if (timeouts[TIMER_EDGE]) {
+                dummyTimer(TIMER_EDGE);
+                return;
+            }
+
+            // Bottom edge if (offset > 0)
+            data.onEdge.call(data, offset > 0);
+            dummyTimer(TIMER_EDGE);
+        },
         onWheel = function (data, e) {
             if (data.wrapRatio === 1) {
                 return;
@@ -167,8 +201,12 @@ var dataSet = function initDataSet() {
 
             data.wrapRatio = data.wrapSize / getNodeSize(data.area, data.axis);
             if ((offset > 0) && (offset + data.wrapSize < getNodeSize(data.area, data.axis))) {
+                // Scrolling inside
                 e.preventDefault();
                 e.stopPropagation();
+            } else if (offset !== 0) {
+                onWheelEdge(data, offset);
+                return;
             }
 
             data.wrap['scroll' + axesPos[data.axis]] += e['delta' + data.axis];
@@ -185,7 +223,7 @@ var dataSet = function initDataSet() {
         scrl = {
             // Common defaults for scope, can be changed for all next Bars
             axis: 'Y',
-            onDragClass: 'on-drag',
+            dragClass: 'on-drag',
             onResize: false,
             noUserSelectClass: 'no-user-select',
             thumbMinSize: 24,
@@ -251,6 +289,7 @@ var dataSet = function initDataSet() {
 
                 // Params
                 data.axis = opts.axis || this.axis;
+                data.onEdge = opts.onEdge || false;
                 data.thumbMinSize = opts.thumbMinSize || this.thumbMinSize;
 
                 // Area
@@ -289,7 +328,7 @@ var dataSet = function initDataSet() {
 
                 // Store Data
                 var id = dataSet(node, dataPrefix('id'), scrls.push(data) - 1);
-                data.t = setTimeout(function () {
+                timeouts[TIMER_UP] = setTimeout(function () {
                     scrl.update(id, true);
                 }, 0);
 
@@ -316,10 +355,8 @@ var dataSet = function initDataSet() {
                     return true;
                 }
                 // First update() Timeout
-                if (data.t) {
-                    clearTimeout(data.t);
-                    delete data.t;
-                }
+                clearTimer(TIMER_EDGE);
+                clearTimer(TIMER_UP);
                 // Unwatch
                 if (data.observer) {
                     data.observer.disconnect();