Merge pull request #5 from sateffen/develop

v1.0.1

Author: sateffen

package.json

@@ -1,6 +1,6 @@
 {
   "name": "poc-scrollbar",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A simple scrollbar, that just works",
   "homepage": "https://github.com/sateffen/poc-scrollbar",
   "bugs": "https://github.com/sateffen/poc-scrollbar/issues",
@@ -23,16 +23,16 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "eslint": "~3.12.2",
-    "eslint-config-airbnb-base": "~11.0.0",
+    "eslint": "~3.14.0",
+    "eslint-config-airbnb-base": "~11.0.1",
     "eslint-plugin-import": "~2.2.0",
     "jasmine-core": "~2.5.2",
-    "karma": "~1.3.0",
+    "karma": "~1.4.0",
     "karma-chrome-launcher": "~2.0.0",
     "karma-jasmine": "~1.1.0",
     "karma-rollup-plugin": "~0.2.4",
-    "rollup": "~0.38.0",
+    "rollup": "~0.41.4",
     "rollup-plugin-buble": "~0.15.0",
-    "rollup-watch": "~2.5.0"
+    "rollup-watch": "~3.2.2"
   }
 }

rollup.config.js

@@ -1,9 +1,11 @@
 /* global require, module*/
 const buble = require('rollup-plugin-buble');
+const pkg = require('./package.json');
 
 module.exports = {
     entry: 'src/pocscrollbar.js',
     format: 'umd',
+    banner: `/* Name: ${pkg.name}, Version: ${pkg.version}, License: ${pkg.license}*/`,
     moduleName: 'PocScrollbar',
     dest: 'dist/pocscrollbar.js',
     plugins: [

src/helper.js

@@ -1,4 +1,28 @@
 
+/**
+ * This constant is one possible option for the deltaMode property of a wheel event.
+ * This deltaMode measures the delta values in pixels.
+ *
+ * @type {number}
+ */
+const DOM_DELTA_PIXEL = (window.WheelEvent && window.WheelEvent.DOM_DELTA_PIXEL) || 0x00;
+
+/**
+ * This constant is one possible option for the deltaMode property of a wheel event.
+ * This deltaMode measures the delta values in lines.
+ *
+ * @type {number}
+ */
+const DOM_DELTA_LINE = (window.WheelEvent && window.WheelEvent.DOM_DELTA_LINE) || 0x01;
+
+/**
+ * This constant is one possible option for the deltaMode property of a wheel event.
+ * This deltaMode measures the delta values in pages.
+ *
+ * @type {number}
+ */
+const DOM_DELTA_PAGE = (window.WheelEvent && window.WheelEvent.DOM_DELTA_PAGE) || 0x02;
+
 /**
  * This constant tells the browsers line height for one line. This is used for calculating the distance
  * to scroll in a wheel event
@@ -47,15 +71,21 @@ export function applyOptionsToScrollBarElement(aElement, aElementName, aOptions)
  *
  * @param {Function} aCallback The callback to call debounced
  * @param {number} aWaitTime The time to wait till calling the callback
- * @return {Function} The replacement function
+ * @return {Array.<Function>} An array with two functions. The first is the debounced callback,
+ * the second is a destroy callback
  */
 export function debounce(aCallback, aWaitTime) {
     let pointer = null;
 
-    return () => {
-        window.clearTimeout(pointer);
-        pointer = window.setTimeout(aCallback, aWaitTime);
-    };
+    return [
+        () => {
+            window.clearTimeout(pointer);
+            pointer = window.setTimeout(aCallback, aWaitTime);
+        },
+        () => {
+            window.clearTimeout(pointer);
+        }
+    ];
 }
 
 /**
@@ -74,10 +104,11 @@ export function getWheelDeltaAsPixel(aIsX, aDeltaOption, aDeltaMode, aDeltaValue
     }
 
     switch (aDeltaMode) {
-        case 1:
+        case DOM_DELTA_LINE:
             return aDeltaValue * browsersLineHeight;
-        case 2:
+        case DOM_DELTA_PAGE:
             return aDeltaValue * (aIsX ? aScrollContainer.clientWidth : aScrollContainer.clientHeight);
+        case DOM_DELTA_PIXEL:
         default:
             return aDeltaValue;
     }

src/pocscrollbar.js

@@ -73,7 +73,7 @@ export default class PocScrollbar {
 
         // and then we setup the corresponding mutation handler and its destroy callback
         if (this._options.useMutationObserver) {
-            const debouncedMutationHandler = debounce(mutationHandler, checkInterval);
+            const [debouncedMutationHandler, destroyCallback] = debounce(mutationHandler, checkInterval);
             const mutationObserver = new MutationObserver(debouncedMutationHandler);
 
             window.addEventListener('resize', debouncedMutationHandler);
@@ -82,6 +82,7 @@ export default class PocScrollbar {
             });
 
             this._destroyCallbacks.push(() => {
+                destroyCallback();
                 mutationObserver.disconnect();
                 window.removeEventListener('resize', debouncedMutationHandler);
             });
@@ -237,6 +238,11 @@ export default class PocScrollbar {
 
         // then return the closure function
         return () => {
+            // if the container doesn't exist anymore, we can't do anything
+            if (this._container === null) {
+                return;
+            }
+
             // search for the root element of this element
             let potentialRootElement = this._container.parentElement;
             while (potentialRootElement !== null &&

test/unit/helper.spec.js

@@ -34,8 +34,13 @@ describe('Helper functions', () => {
             expect(typeof debounce).toBe('function');
         });
 
-        it('should return a function', () => {
-            expect(typeof debounce()).toBe('function');
+        it('should return an array with two functions', () => {
+            const returnValue = debounce();
+
+            expect(Array.isArray(returnValue)).toBe(true);
+            expect(returnValue.length).toBe(2);
+            expect(typeof returnValue[0]).toBe('function');
+            expect(typeof returnValue[1]).toBe('function');
         });
 
         it('should not call clearTimeout initially', () => {
@@ -49,25 +54,32 @@ describe('Helper functions', () => {
         });
 
         it('should call clearTimeout with null on first call', () => {
-            debounce()();
+            debounce()[0]();
             expect(window.clearTimeout).toHaveBeenCalledTimes(1);
             expect(window.clearTimeout).toHaveBeenCalledWith(null);
         });
 
         it('should call clearTimeout with the returned setTimeout pointer from prev call at second call', () => {
-            const callback = debounce();
+            const [callback] = debounce();
             callback();
             callback();
 
             expect(window.clearTimeout).toHaveBeenCalledTimes(2);
             expect(window.clearTimeout.calls.mostRecent().args[0]).toBe(setTimeoutReturnValue);
         });
 
+        it('should have called clearTimeout when calling the destroyCallback', () => {
+            debounce()[1]();
+            expect(window.clearTimeout).toHaveBeenCalledTimes(1);
+            expect(window.clearTimeout).toHaveBeenCalledWith(null);
+        });
+
         it('should call setTimeout with a function as first argument and the given time as second argument', () => {
             const spyCallback = jasmine.createSpy('spyCallback');
             const waitTime = Math.round(Math.random() * 100);
-            debounce(spyCallback, waitTime)();
+            debounce(spyCallback, waitTime)[0]();
 
+            expect(window.setTimeout).toHaveBeenCalledTimes(1);
             expect(window.setTimeout).toHaveBeenCalledWith(spyCallback, waitTime);
         });
     });