zscroller - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

lib/DOMScroller.js

@@ -1,14 +0,115 @@
-var Scroller = require('./Scroller');
+'use strict';
 
-var DOMScroller = function (content, options) {
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+var Scroller = require('../vendor/Scroller');
+var MIN_INDICATOR_SIZE = 8;
+
+function setTransform(nodeStyle, value) {
+  nodeStyle.transform = value;
+  nodeStyle.webkitTransform = value;
+  nodeStyle.MozTransform = value;
+}
+
+function setTransformOrigin(nodeStyle, value) {
+  nodeStyle.transformOrigin = value;
+  nodeStyle.webkitTransformOrigin = value;
+  nodeStyle.MozTransformOrigin = value;
+}
+
+function DOMScroller(content) {
+  var _this = this;
+
+  var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+
+  var scrollbars = void 0;
+  var indicators = void 0;
+  var indicatorsSize = void 0;
+  var scrollbarsSize = void 0;
+  var indicatorsPos = void 0;
+  var scrollbarsOpacity = void 0;
+  var contentSize = void 0;
+  var clientSize = void 0;
+
   this.content = content;
   this.container = content.parentNode;
-  this.options = options || {};
+  this.options = _extends({}, options, {
+    scrollingComplete: function scrollingComplete() {
+      if (options.scrollingComplete) {
+        options.scrollingComplete();
+      }
+      if (scrollbars) {
+        _this.clearScrollbarTimer();
+        _this.timer = setTimeout(function () {
+          ['x', 'y'].forEach(function (k) {
+            if (scrollbars[k]) {
+              _this.setScrollbarOpacity(k, 0);
+            }
+          });
+        }, 0);
+      }
+    }
+  });
 
+  if (this.options.scrollbars) {
+    scrollbars = this.scrollbars = {};
+    indicators = this.indicators = {};
+    indicatorsSize = this.indicatorsSize = {};
+    scrollbarsSize = this.scrollbarsSize = {};
+    indicatorsPos = this.indicatorsPos = {};
+    scrollbarsOpacity = this.scrollbarsOpacity = {};
+    contentSize = this.contentSize = {};
+    clientSize = this.clientSize = {};
+
+    ['x', 'y'].forEach(function (k) {
+      var optionName = k === 'x' ? 'scrollingX' : 'scrollingY';
+      if (_this.options[optionName] !== false) {
+        scrollbars[k] = document.createElement('div');
+        scrollbars[k].className = 'zscroller-scrollbar-' + k;
+        indicators[k] = document.createElement('div');
+        indicators[k].className = 'zscroller-indicator-' + k;
+        scrollbars[k].appendChild(indicators[k]);
+        indicatorsSize[k] = -1;
+        scrollbarsOpacity[k] = 0;
+        indicatorsPos[k] = 0;
+        _this.container.appendChild(scrollbars[k]);
+      }
+    });
+  }
+
+  var init = true;
+
   // create Scroller instance
-  var that = this;
   this.scroller = new Scroller(function (left, top, zoom) {
-    that.render(left, top, zoom);
-  }, options);
+    setTransform(content.style, 'translate3d(' + -left + 'px,' + -top + 'px,0) scale(' + zoom + ')');
+    if (scrollbars) {
+      ['x', 'y'].forEach(function (k) {
+        if (scrollbars[k]) {
+          var pos = k === 'x' ? left : top;
+          if (clientSize[k] >= contentSize[k]) {
+            _this.setScrollbarOpacity(k, 0);
+          } else {
+            if (!init) {
+              _this.setScrollbarOpacity(k, 1);
+            }
+            var normalIndicatorSize = clientSize[k] / contentSize[k] * scrollbarsSize[k];
+            var size = normalIndicatorSize;
+            var indicatorPos = void 0;
+            if (pos < 0) {
+              size = Math.max(normalIndicatorSize + pos, MIN_INDICATOR_SIZE);
+              indicatorPos = 0;
+            } else if (pos > contentSize[k] - clientSize[k]) {
+              size = Math.max(normalIndicatorSize + contentSize[k] - clientSize[k] - pos, MIN_INDICATOR_SIZE);
+              indicatorPos = scrollbarsSize[k] - size;
+            } else {
+              indicatorPos = pos / contentSize[k] * scrollbarsSize[k];
+            }
+            _this.setIndicatorSize(k, size);
+            _this.setIndicatorPos(k, indicatorPos);
+          }
+        }
+      });
+    }
+    init = false;
+  }, this.options);
 
@@ -19,61 +120,53 @@ // bind events
   // the content element needs a correct transform origin for zooming
-  this.content.style[DOMScroller.vendorPrefix + 'TransformOrigin'] = "left top";
+  setTransformOrigin(content.style, 'left top');
 
   // reflow for the first time
   this.reflow();
+}
 
+DOMScroller.prototype.clearScrollbarTimer = function clearScrollbarTimer() {
+  if (this.timer) {
+    clearTimeout(this.timer);
+    this.timer = null;
+  }
 };
 
-DOMScroller.prototype.render = (function () {
+DOMScroller.prototype.setScrollbarOpacity = function setScrollbarOpacity(axis, opacity) {
+  if (this.scrollbarsOpacity[axis] !== opacity) {
+    this.scrollbars[axis].style.opacity = opacity;
+    this.scrollbarsOpacity[axis] = opacity;
+  }
+};
 
-  var docStyle = document.documentElement.style;
+DOMScroller.prototype.setIndicatorPos = function setIndicatorPos(axis, value) {
+  if (this.indicatorsPos[axis] !== value) {
+    if (axis === 'x') {
+      setTransform(this.indicators[axis].style, 'translate3d(' + value + 'px,0,0)');
+    } else {
+      setTransform(this.indicators[axis].style, 'translate3d(0, ' + value + 'px,0)');
+    }
+    this.indicatorsPos[axis] = value;
+  }
+};
 
-  var engine;
-  if (window.opera && Object.prototype.toString.call(opera) === '[object Opera]') {
-    engine = 'presto';
-  } else if ('MozAppearance' in docStyle) {
-    engine = 'gecko';
-  } else if ('WebkitAppearance' in docStyle) {
-    engine = 'webkit';
-  } else if (typeof navigator.cpuClass === 'string') {
-    engine = 'trident';
+DOMScroller.prototype.setIndicatorSize = function setIndicatorSize(axis, value) {
+  if (this.indicatorsSize[axis] !== value) {
+    this.indicators[axis].style[axis === 'x' ? 'width' : 'height'] = value + 'px';
+    this.indicatorsSize[axis] = value;
   }
+};
 
-  var vendorPrefix = DOMScroller.vendorPrefix = {
-    trident: 'ms',
-    gecko: 'Moz',
-    webkit: 'Webkit',
-    presto: 'O'
-  }[engine];
-
-  var helperElem = document.createElement("div");
-  var undef;
-
-  var perspectiveProperty = vendorPrefix + "Perspective";
-  var transformProperty = vendorPrefix + "Transform";
-
-  if (helperElem.style[perspectiveProperty] !== undef) {
-
-    return function (left, top, zoom) {
-      this.content.style[transformProperty] = 'translate3d(' + (-left) + 'px,' + (-top) + 'px,0) scale(' + zoom + ')';
-    };
-
-  } else if (helperElem.style[transformProperty] !== undef) {
-
-    return function (left, top, zoom) {
-      this.content.style[transformProperty] = 'translate(' + (-left) + 'px,' + (-top) + 'px) scale(' + zoom + ')';
-    };
-
-  } else {
-
-    return function (left, top, zoom) {
-      this.content.style.marginLeft = left ? (-left / zoom) + 'px' : '';
-      this.content.style.marginTop = top ? (-top / zoom) + 'px' : '';
-      this.content.style.zoom = zoom || '';
-    };
-
+DOMScroller.prototype.reflow = function reflow() {
+  if (this.scrollbars) {
+    this.contentSize.x = this.content.offsetWidth;
+    this.contentSize.y = this.content.offsetHeight;
+    this.clientSize.x = this.container.clientWidth;
+    this.clientSize.y = this.container.clientHeight;
+    if (this.scrollbars.x) {
+      this.scrollbarsSize.x = this.scrollbars.x.offsetWidth;
+    }
+    if (this.scrollbars.y) {
+      this.scrollbarsSize.y = this.scrollbars.y.offsetHeight;
+    }
   }
-})();
-
-DOMScroller.prototype.reflow = function () {
   // set the right scroller dimensions
@@ -84,23 +177,24 @@ this.scroller.setDimensions(this.container.clientWidth, this.container.clientHeight, this.content.offsetWidth, this.content.offsetHeight);
   var rect = this.container.getBoundingClientRect();
-  this.scroller.setPosition(rect.left + this.container.clientLeft, rect.top + this.container.clientTop);
-
+  this.scroller.setPosition(rect.x + this.container.clientLeft, rect.y + this.container.clientTop);
 };
 
-DOMScroller.prototype.destroy = function () {
-  window.removeEventListener("resize", this.onResize, false);
-  this.container.removeEventListener("touchstart", this.onTouchStart, false);
-  this.container.removeEventListener("touchmove", this.onTouchMove, false);
-  this.container.removeEventListener("touchend", this.onTouchEnd, false);
-  this.container.removeEventListener("touchcancel", this.onTouchCancel, false);
-  this.container.removeEventListener("mousedown", this.onMouseDown, false);
-  document.removeEventListener("mousemove", this.onMouseMove, false);
-  document.removeEventListener("mouseup", this.onMouseUp, false);
-  this.container.removeEventListener("mousewheel", this.onMouseWheel, false);
+DOMScroller.prototype.destroy = function destroy() {
+  window.removeEventListener('resize', this.onResize, false);
+  this.container.removeEventListener('touchstart', this.onTouchStart, false);
+  this.container.removeEventListener('touchmove', this.onTouchMove, false);
+  this.container.removeEventListener('touchend', this.onTouchEnd, false);
+  this.container.removeEventListener('touchcancel', this.onTouchCancel, false);
+  this.container.removeEventListener('mousedown', this.onMouseDown, false);
+  document.removeEventListener('mousemove', this.onMouseMove, false);
+  document.removeEventListener('mouseup', this.onMouseUp, false);
+  this.container.removeEventListener('mousewheel', this.onMouseWheel, false);
 };
 
-DOMScroller.prototype.bindEvents = function () {
+DOMScroller.prototype.bindEvents = function bindEvents() {
+  var _this2 = this;
+
   var that = this;
 
   // reflow handling
-  window.addEventListener("resize", this.onResize = function () {
+  window.addEventListener('resize', this.onResize = function () {
     that.reflow();
@@ -111,4 +205,3 @@ }, false);
   if ('ontouchstart' in window) {
-    
-    this.container.addEventListener("touchstart", this.onTouchStart = function (e) {
+    this.container.addEventListener('touchstart', this.onTouchStart = function (e) {
       // Don't react if initial down happens on a form element
@@ -118,2 +211,3 @@ if (e.touches[0] && e.touches[0].target && e.touches[0].target.tagName.match(/input|textarea|select/i)) {
       }
+      _this2.clearScrollbarTimer();
       // reflow since the container may have changed
@@ -124,3 +218,3 @@ that.reflow();
 
-    this.container.addEventListener("touchmove", this.onTouchMove = function (e) {
+    this.container.addEventListener('touchmove', this.onTouchMove = function (e) {
       e.preventDefault();
@@ -130,57 +224,58 @@ that.scroller.doTouchMove(e.touches, e.timeStamp, e.scale);
 
-    this.container.addEventListener("touchend", this.onTouchEnd = function (e) {
+    this.container.addEventListener('touchend', this.onTouchEnd = function (e) {
       that.scroller.doTouchEnd(e.timeStamp);
     }, false);
 
-    this.container.addEventListener("touchcancel", this.onTouchCancel = function (e) {
+    this.container.addEventListener('touchcancel', this.onTouchCancel = function (e) {
       that.scroller.doTouchEnd(e.timeStamp);
     }, false);
-    
+
     // non-touch bind mouse events
   } else {
-    
-    var mousedown = false;
-    this.container.addEventListener("mousedown", this.onMouseDown = function (e) {
-      if (e.target.tagName.match(/input|textarea|select/i)) {
-        return;
-      }
-      that.scroller.doTouchStart([{
-        pageX: e.pageX,
-        pageY: e.pageY
-      }], e.timeStamp);
-      mousedown = true;
-      // reflow since the container may have changed
-      that.reflow();
-      e.preventDefault();
-    }, false);
+    (function () {
+      var mousedown = false;
+      _this2.container.addEventListener('mousedown', _this2.onMouseDown = function (e) {
+        if (e.target.tagName.match(/input|textarea|select/i)) {
+          return;
+        }
+        _this2.clearScrollbarTimer();
+        that.scroller.doTouchStart([{
+          pageX: e.pageX,
+          pageY: e.pageY
+        }], e.timeStamp);
+        mousedown = true;
+        // reflow since the container may have changed
+        that.reflow();
+        e.preventDefault();
+      }, false);
 
-    document.addEventListener("mousemove", this.onMouseMove = function (e) {
-      if (!mousedown) {
-        return;
-      }
-      that.scroller.doTouchMove([{
-        pageX: e.pageX,
-        pageY: e.pageY
-      }], e.timeStamp);
-      mousedown = true;
-    }, false);
+      document.addEventListener('mousemove', _this2.onMouseMove = function (e) {
+        if (!mousedown) {
+          return;
+        }
+        that.scroller.doTouchMove([{
+          pageX: e.pageX,
+          pageY: e.pageY
+        }], e.timeStamp);
+        mousedown = true;
+      }, false);
 
-    document.addEventListener("mouseup", this.onMouseUp = function (e) {
-      if (!mousedown) {
-        return;
-      }
-      that.scroller.doTouchEnd(e.timeStamp);
-      mousedown = false;
-    }, false);
+      document.addEventListener('mouseup', _this2.onMouseUp = function (e) {
+        if (!mousedown) {
+          return;
+        }
+        that.scroller.doTouchEnd(e.timeStamp);
+        mousedown = false;
+      }, false);
 
-    this.container.addEventListener("mousewheel", this.onMouseWheel = function (e) {
-      if (that.options.zooming) {
-        that.scroller.doMouseZoom(e.wheelDelta, e.timeStamp, e.pageX, e.pageY);
-        e.preventDefault();
-      }
-    }, false);
-    
+      _this2.container.addEventListener('mousewheel', _this2.onMouseWheel = function (e) {
+        if (that.options.zooming) {
+          that.scroller.doMouseZoom(e.wheelDelta, e.timeStamp, e.pageX, e.pageY);
+          e.preventDefault();
+        }
+      }, false);
+    })();
   }
 };
 
-module.exports = DOMScroller;
+module.exports = DOMScroller;

package.json

 {
   "name": "zscroller",
-  "version": "0.1.2",
-  "files":[
-    "lib"
+  "version": "0.2.0",
+  "description": "dom scroller based on zynga scroller",
+  "keywords": [
+    "zynga scroller",
+    "dom scroller"
+  ],
+  "homepage": "https://github.com/yiminghe/zscroller",
+  "maitainers": [
+    "[e-mail]",
+    "[e-mail]"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yiminghe/zscroller.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yiminghe/zscroller/issues"
+  },
+  "files": [
+    "lib",
+    "vendor",
+    "assets/*.css"
+  ],
+  "licenses": "MIT",
+  "main": "./lib/DOMScroller",
+  "config": {
+    "port": 8007
+  },
+  "scripts": {
+    "compile": "rc-tools run compile",
+    "build": "rc-tools run build",
+    "gh-pages": "rc-tools run gh-pages",
+    "start": "rc-tools run server",
+    "pub": "rc-tools run pub",
+    "lint": "rc-tools run lint",
+    "karma": "rc-tools run karma",
+    "saucelabs": "rc-tools run saucelabs",
+    "test": "rc-tools run test",
+    "chrome-test": "rc-tools run chrome-test",
+    "coverage": "rc-tools run coverage"
+  },
+  "devDependencies": {
+    "expect.js": "0.3.x",
+    "fastclick": "^1.0.6",
+    "pre-commit": "1.x",
+    "rc-tools": "5.x",
+    "react": "15.x",
+    "react-addons-test-utils": "15.x",
+    "react-dom": "15.x"
+  },
+  "pre-commit": [
+    "lint"
   ]
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

60812

increased by15.38%

Number of package files

7

increased by75%

Number of low license alerts

0

decreased by-100%

Lines of code

1457

increased by11.31%

Number of low maintenance alerts

1

decreased by-50%

Number of low quality alerts

1

decreased by-50%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

76

increased byInfinity%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

7

increased byInfinity%

No dependency changes