zscroller - npm Package Compare versions

Comparing version 0.5.4 to 0.6.0-beta.0

dist-web/index.js

@@ -0,1 +1,16 @@
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 function _extends() {
@@ -19,2 +34,19 @@ _extends = Object.assign || function (target) {
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+// @ts-ignore
+
 /*
@@ -48,6 +80,6 @@ * Scroller
 var counter = 1;
-var win = typeof window !== "undefined" ? window : undefined;
+var win = typeof window !== 'undefined' ? window : undefined;
 
 if (!win) {
-  win = typeof global !== "undefined" ? global : {};
+  win = typeof global !== 'undefined' ? global : {};
 } // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
@@ -61,7 +93,7 @@ // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
   var lastTime = 0;
-  var vendors = ["ms", "moz", "webkit", "o"];
+  var vendors = ['ms', 'moz', 'webkit', 'o'];
 
   for (var x = 0; x < vendors.length && !win.requestAnimationFrame; ++x) {
-    win.requestAnimationFrame = win[vendors[x] + "RequestAnimationFrame"];
-    win.cancelAnimationFrame = win[vendors[x] + "CancelAnimationFrame"] || win[vendors[x] + "CancelRequestAnimationFrame"];
+    win.requestAnimationFrame = win[vendors[x] + 'RequestAnimationFrame'];
+    win.cancelAnimationFrame = win[vendors[x] + 'CancelAnimationFrame'] || win[vendors[x] + 'CancelRequestAnimationFrame'];
   }
@@ -200,15 +232,3 @@
 
-/*
- * Scroller
- * http://github.com/zynga/scroller
- *
- * Copyright 2011, Zynga Inc.
- * Licensed under the MIT License.
- * https://raw.github.com/zynga/scroller/master/MIT-LICENSE.txt
- *
- * Based on the work of: Unify Project (unify-project.org)
- * http://unify-project.org
- * Copyright 2011, Deutsche Telekom AG
- * License: MIT + Apache (V2)
- */
+// @ts-ignore
 var Scroller;
@@ -603,3 +623,3 @@
     if (!self.options.zooming) {
-      throw new Error("Zooming is not enabled!");
+      throw new Error('Zooming is not enabled!');
     } // Add callback if exists
@@ -687,3 +707,3 @@
       if (!self.options.zooming) {
-        throw new Error("Zooming is not enabled!");
+        throw new Error('Zooming is not enabled!');
       }
@@ -774,3 +794,3 @@
     if (touches.length == null) {
-      throw new Error("Invalid touch list: " + touches);
+      throw new Error('Invalid touch list: ' + touches);
     }
@@ -782,4 +802,4 @@
 
-    if (typeof timeStamp !== "number") {
-      throw new Error("Invalid timestamp value: " + timeStamp);
+    if (typeof timeStamp !== 'number') {
+      throw new Error('Invalid timestamp value: ' + timeStamp);
     }
@@ -849,3 +869,3 @@
     if (touches.length == null) {
-      throw new Error("Invalid touch list: " + touches);
+      throw new Error('Invalid touch list: ' + touches);
     }
@@ -857,4 +877,4 @@
 
-    if (typeof timeStamp !== "number") {
-      throw new Error("Invalid timestamp value: " + timeStamp);
+    if (typeof timeStamp !== 'number') {
+      throw new Error('Invalid timestamp value: ' + timeStamp);
     }
@@ -1015,4 +1035,4 @@
 
-    if (typeof timeStamp !== "number") {
-      throw new Error("Invalid timestamp value: " + timeStamp);
+    if (typeof timeStamp !== 'number') {
+      throw new Error('Invalid timestamp value: ' + timeStamp);
     }
@@ -1390,8 +1410,10 @@
 var MIN_INDICATOR_SIZE = 8;
-var win$1 = typeof window !== "undefined" ? window : undefined;
+var win$1 = typeof window !== 'undefined' ? window : undefined;
 
 if (!win$1) {
-  win$1 = typeof global !== "undefined" ? global : {};
+  win$1 = typeof global !== 'undefined' ? global : {};
 }
 
+var isTouch = 'ontouchstart' in win$1;
+
 function setTransform(nodeStyle, value) {
@@ -1403,12 +1425,6 @@ nodeStyle.transform = value;
 
-function setTransformOrigin(nodeStyle, value) {
-  nodeStyle.transformOrigin = value;
-  nodeStyle.webkitTransformOrigin = value;
-  nodeStyle.MozTransformOrigin = value;
-}
-
 var supportsPassive = false;
 
 try {
-  var opts = Object.defineProperty({}, "passive", {
+  var opts = Object.defineProperty({}, 'passive', {
     get: function get() {
@@ -1418,7 +1434,7 @@ supportsPassive = true;
   });
-  win$1.addEventListener("test", null, opts);
+  win$1.addEventListener('test', null, opts);
 } catch (e) {// empty
 }
 
-var isWebView = typeof navigator !== "undefined" && /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
+var isWebView = typeof navigator !== 'undefined' && /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
 
@@ -1429,9 +1445,6 @@ function iOSWebViewFix(e, touchendFn) {
   if (isWebView && e.changedTouches[0].clientY < 0) {
-    touchendFn(new Event("touchend") || e);
+    touchendFn(new Event('touchend') || e);
   }
 }
 
-var willPreventDefault = supportsPassive ? {
-  passive: false
-} : false;
 var willNotPreventDefault = supportsPassive ? {
@@ -1441,67 +1454,120 @@ passive: true
 
-function addEventListener(target, type, fn, options) {
-  target.addEventListener(type, fn, options);
+function addEventListener(target, type, fn, _options) {
+  if (_options === void 0) {
+    _options = willNotPreventDefault;
+  }
+
+  target.addEventListener(type, fn, _options);
   return function () {
-    target.removeEventListener(type, fn, options);
+    target.removeEventListener(type, fn, _options);
   };
 }
 
-function ZScroller(content, options) {
-  var _this = this;
+var ZScroller =
+/*#__PURE__*/
+function () {
+  function ZScroller(_options) {
+    var _this = this;
 
-  if (options === void 0) {
-    options = {};
-  }
+    _defineProperty(this, "_ratio", void 0);
 
-  var scrollbars;
-  var indicators;
-  var indicatorsSize;
-  var scrollbarsSize;
-  var indicatorsPos;
-  var scrollbarsOpacity;
-  var contentSize;
-  var clientSize;
-  this.content = content;
-  var container = this.container = content.parentNode;
-  this.options = _extends({}, options, {
-    scrollingComplete: function scrollingComplete() {
-      _this.clearScrollbarTimer();
+    _defineProperty(this, "_containerMouseDownTimer", void 0);
 
-      _this.timer = setTimeout(function () {
-        if (_this._destroyed) {
-          return;
+    _defineProperty(this, "_options", void 0);
+
+    _defineProperty(this, "_zOptions", void 0);
+
+    _defineProperty(this, "_destroyed", void 0);
+
+    _defineProperty(this, "_timer", void 0);
+
+    _defineProperty(this, "_scrollbars", void 0);
+
+    _defineProperty(this, "_indicators", void 0);
+
+    _defineProperty(this, "_indicatorsSize", void 0);
+
+    _defineProperty(this, "_indicatorsPos", void 0);
+
+    _defineProperty(this, "_scrollbarsOpacity", void 0);
+
+    _defineProperty(this, "_scroller", void 0);
+
+    _defineProperty(this, "_disabled", void 0);
+
+    _defineProperty(this, "_eventHandlers", void 0);
+
+    _defineProperty(this, "_initPagePos", void 0);
+
+    var container = _options.container,
+        viewport = _options.viewport,
+        content = _options.content,
+        onScroll = _options.onScroll,
+        x = _options.x,
+        y = _options.y,
+        zOptions = _objectWithoutPropertiesLoose(_options, ["container", "viewport", "content", "onScroll", "x", "y"]);
+
+    var scrollbars;
+    var indicators;
+    var indicatorsSize;
+    var indicatorsPos;
+    var scrollbarsOpacity;
+    this._options = _options;
+    this._zOptions = _extends({}, zOptions, {
+      scrollingX: !!x,
+      scrollingY: !!y,
+      scrollingComplete: function scrollingComplete() {
+        _this._clearScrollbarTimer();
+
+        _this._timer = setTimeout(function () {
+          if (_this._destroyed) {
+            return;
+          }
+
+          if (_options.scrollingComplete) {
+            _options.scrollingComplete();
+          }
+
+          if (scrollbars && isTouch) {
+            ['x', 'y'].forEach(function (k) {
+              if (scrollbars[k]) {
+                _this._setScrollbarOpacity(k, 0);
+              }
+            });
+          }
+        }, 0);
+      }
+    });
+    scrollbars = this._scrollbars = {};
+    indicators = this._indicators = {};
+    indicatorsSize = this._indicatorsSize = {};
+    indicatorsPos = this._indicatorsPos = {};
+    scrollbarsOpacity = this._scrollbarsOpacity = {};
+    ['x', 'y'].forEach(function (k) {
+      var optionName = k === 'x' ? 'scrollingX' : 'scrollingY';
+      var scrollerStyle = k === 'x' ? x : y;
+
+      if (_this._options[optionName] !== false) {
+        scrollbars[k] = document.createElement('div');
+        scrollbars[k].className = "zscroller-scrollbar-" + k;
+
+        if (scrollerStyle.scrollbar) {
+          scrollbars[k].style = scrollerStyle.scrollbar.style;
         }
 
-        if (options.scrollingComplete) {
-          options.scrollingComplete();
+        if (scrollerStyle.width) {
+          scrollbars[k].style.width = scrollerStyle.width + 'px';
         }
 
-        if (scrollbars) {
-          ["x", "y"].forEach(function (k) {
-            if (scrollbars[k]) {
-              _this.setScrollbarOpacity(k, 0);
-            }
-          });
+        if (scrollerStyle.height) {
+          scrollbars[k].style.height = scrollerStyle.height + 'px';
         }
-      }, 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";
+        indicators[k] = document.createElement('div');
+        indicators[k].className = "zscroller-indicator-" + k;
 
-      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;
+        if (scrollerStyle.indicator) {
+          indicators[k].style = scrollerStyle.indicator.style;
+        }
+
         scrollbars[k].appendChild(indicators[k]);
@@ -1511,30 +1577,49 @@ indicatorsSize[k] = -1;
         indicatorsPos[k] = 0;
-        container.appendChild(scrollbars[k]);
       }
-    });
-  }
+    }); // create Scroller instance
 
-  var init = true;
-  var contentStyle = content.style; // create Scroller instance
+    this._scroller = new Scroller$1(function (left, top, zoom) {
+      if (_options.onScroll) {
+        _options.onScroll(left, top, zoom);
+      }
 
-  this.scroller = new Scroller$1(function (left, top, zoom) {
-    if (!init && options.onScroll) {
-      options.onScroll();
+      _this._adjustScrollBar();
+    }, this._zOptions);
+    this._eventHandlers = [];
+    this.setDimensions(); // bind events
+
+    this._bindEvents();
+
+    if (isTouch) {
+      this._setScrollbarOpacity('x', 0);
+
+      this._setScrollbarOpacity('y', 0);
     }
+  }
 
-    setTransform(contentStyle, "translate3d(" + -left + "px," + -top + "px,0) scale(" + zoom + ")");
+  var _proto = ZScroller.prototype;
 
+  _proto._adjustScrollBar = function _adjustScrollBar() {
+    var _this2 = this;
+
+    var _options = this._options;
+    var scrollbars = this._scrollbars;
+    var _this$_options = this._options,
+        x = _this$_options.x,
+        y = _this$_options.y;
+
     if (scrollbars) {
-      ["x", "y"].forEach(function (k) {
+      ['x', 'y'].forEach(function (k) {
         if (scrollbars[k]) {
-          var pos = k === "x" ? left : top;
+          var pos = k === 'x' ? _this2._scroller.__scrollLeft : _this2._scroller.__scrollTop;
+          var scrollerSize = k === 'x' ? x.width : y.height;
+          var viewportSize = k === 'x' ? _options.viewport.width : _options.viewport.height;
+          var contentSize = k === 'x' ? _options.content.width : _options.content.height;
 
-          if (clientSize[k] >= contentSize[k]) {
-            _this.setScrollbarOpacity(k, 0);
+          if (viewportSize >= contentSize) {
+            _this2._setScrollbarOpacity(k, 0);
           } else {
-            if (!init) {
-              _this.setScrollbarOpacity(k, 1);
-            }
+            _this2._setScrollbarOpacity(k, 1);
 
-            var normalIndicatorSize = clientSize[k] / contentSize[k] * scrollbarsSize[k];
+            var normalIndicatorSize = viewportSize / contentSize * scrollerSize;
             var size = normalIndicatorSize;
@@ -1546,12 +1631,12 @@ var indicatorPos;
               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 if (pos > contentSize - viewportSize) {
+              size = Math.max(normalIndicatorSize + contentSize - viewportSize - pos, MIN_INDICATOR_SIZE);
+              indicatorPos = scrollerSize - size;
             } else {
-              indicatorPos = pos / contentSize[k] * scrollbarsSize[k];
+              indicatorPos = pos / contentSize * scrollerSize;
             }
 
-            _this.setIndicatorSize(k, size);
+            _this2._setIndicatorSize(k, size);
 
-            _this.setIndicatorPos(k, indicatorPos);
+            _this2._setIndicatorPos(k, indicatorPos);
           }
@@ -1561,216 +1646,287 @@ }
     }
+  };
 
-    init = false;
-  }, this.options); // bind events
+  _proto.getScrollbar = function getScrollbar(type) {
+    return this._scrollbars[type];
+  };
 
-  this.bindEvents(); // the content element needs a correct transform origin for zooming
+  _proto.setDisabled = function setDisabled(disabled) {
+    this._disabled = disabled;
+  };
 
-  setTransformOrigin(content.style, "left top"); // reflow for the first time
+  _proto._clearScrollbarTimer = function _clearScrollbarTimer() {
+    if (this._timer) {
+      clearTimeout(this._timer);
+      this._timer = null;
+    }
+  };
 
-  this.reflow();
-}
-
-ZScroller.prototype = {
-  constructor: ZScroller,
-  setDisabled: function setDisabled(disabled) {
-    this.disabled = disabled;
-  },
-  clearScrollbarTimer: function clearScrollbarTimer() {
-    if (this.timer) {
-      clearTimeout(this.timer);
-      this.timer = null;
+  _proto._setScrollbarOpacity = function _setScrollbarOpacity(axis, opacity) {
+    if (this._scrollbarsOpacity[axis] !== opacity) {
+      this._scrollbars[axis].style.opacity = opacity;
+      this._scrollbarsOpacity[axis] = opacity;
     }
-  },
-  setScrollbarOpacity: function setScrollbarOpacity(axis, opacity) {
-    if (this.scrollbarsOpacity[axis] !== opacity) {
-      this.scrollbars[axis].style.opacity = opacity;
-      this.scrollbarsOpacity[axis] = opacity;
-    }
-  },
-  setIndicatorPos: function setIndicatorPos(axis, value) {
-    var indicatorsPos = this.indicatorsPos,
-        indicators = this.indicators;
+  };
 
-    if (indicatorsPos[axis] !== value) {
-      if (axis === "x") {
-        setTransform(indicators[axis].style, "translate3d(" + value + "px,0,0)");
+  _proto._setIndicatorPos = function _setIndicatorPos(axis, value) {
+    var _indicatorsPos = this._indicatorsPos,
+        _indicators = this._indicators;
+
+    if (_indicatorsPos[axis] !== value) {
+      if (axis === 'x') {
+        setTransform(_indicators[axis].style, "translate3d(" + value + "px,0,0)");
       } else {
-        setTransform(indicators[axis].style, "translate3d(0, " + value + "px,0)");
+        setTransform(_indicators[axis].style, "translate3d(0, " + value + "px,0)");
       }
 
-      indicatorsPos[axis] = value;
+      _indicatorsPos[axis] = value;
     }
-  },
-  setIndicatorSize: function setIndicatorSize(axis, value) {
-    var indicatorsSize = this.indicatorsSize,
-        indicators = this.indicators;
+  };
 
-    if (indicatorsSize[axis] !== value) {
-      indicators[axis].style[axis === "x" ? "width" : "height"] = value + "px";
-      indicatorsSize[axis] = value;
+  _proto._setIndicatorSize = function _setIndicatorSize(axis, value) {
+    var _indicatorsSize = this._indicatorsSize,
+        _indicators = this._indicators;
+
+    if (_indicatorsSize[axis] !== value) {
+      _indicators[axis].style[axis === 'x' ? 'width' : 'height'] = value + "px";
+      _indicatorsSize[axis] = value;
     }
-  },
-  reflow: function reflow() {
-    var container = this.container,
-        content = this.content,
-        scrollbarsSize = this.scrollbarsSize,
-        contentSize = this.contentSize,
-        scrollbars = this.scrollbars,
-        clientSize = this.clientSize,
-        scroller = this.scroller;
+  };
 
-    if (scrollbars) {
-      contentSize.x = content.offsetWidth;
-      contentSize.y = content.offsetHeight;
-      clientSize.x = container.clientWidth;
-      clientSize.y = container.clientHeight;
+  _proto.setDimensions = function setDimensions(_temp) {
+    var _ref = _temp === void 0 ? {} : _temp,
+        viewport = _ref.viewport,
+        content = _ref.content,
+        x = _ref.x,
+        y = _ref.y;
 
-      if (scrollbars.x) {
-        scrollbarsSize.x = scrollbars.x.offsetWidth;
-      }
+    var _options = this._options,
+        scroller = this._scroller;
+    Object.assign(_options.x, x);
+    Object.assign(_options.y, y);
+    Object.assign(_options.content, content);
+    Object.assign(_options.viewport, viewport); // set the right scroller dimensions
 
-      if (scrollbars.y) {
-        scrollbarsSize.y = scrollbars.y.offsetHeight;
-      }
-    } // set the right scroller dimensions
+    scroller.setDimensions(_options.viewport.width, _options.viewport.height, _options.content.width, _options.content.height);
+    this._ratio = {};
 
+    if (_options.x && _options.x.width) {
+      this._ratio.x = _options.content.width / _options.x.width;
+    }
 
-    scroller.setDimensions(container.clientWidth, container.clientHeight, content.offsetWidth, content.offsetHeight); // refresh the position for zooming purposes
+    if (_options.y && _options.y.height) {
+      this._ratio.y = _options.content.height / _options.y.height;
+    }
+  };
 
-    var rect = container.getBoundingClientRect();
-    scroller.setPosition(rect.x + container.clientLeft, rect.y + container.clientTop);
-  },
-  destroy: function destroy() {
+  _proto.destroy = function destroy() {
+    var _this3 = this;
+
     this._destroyed = true;
-    this.unbindEvent();
-  },
-  unbindEvent: function unbindEvent(type) {
-    var eventHandlers = this.eventHandlers;
 
-    if (type) {
-      if (eventHandlers[type]) {
-        eventHandlers[type]();
-        delete eventHandlers[type];
-      }
-    } else {
-      Object.keys(eventHandlers).forEach(function (t) {
-        eventHandlers[t]();
-        delete eventHandlers[t];
+    this._unbindEvent();
+
+    Object.keys(this._scrollbars).forEach(function (k) {
+      _this3._scrollbars[k].parentNode.removeChild(_this3._scrollbars[k]);
+    });
+  };
+
+  _proto._unbindEvent = function _unbindEvent() {
+    var eventHandlers = this._eventHandlers;
+    eventHandlers.forEach(function (t) {
+      t();
+    });
+    this._eventHandlers = [];
+  };
+
+  _proto._bindEvent = function _bindEvent(container, type, fn, _options) {
+    var eventHandlers = this._eventHandlers;
+    var h = addEventListener(container, type, fn, _options);
+    eventHandlers.push(h);
+    return h;
+  };
+
+  _proto._bindEvents = function _bindEvents() {
+    var _this4 = this;
+
+    var container = this._options.container;
+    var scroller = this._scroller;
+
+    if (container) {
+      this._bindEvent(container, 'touchstart', function (e) {
+        // Don't react if initial down happens on a form element
+        if (e.touches[0] && e.touches[0].container && e.touches[0].container.tagName.match(/input|textarea|select/i) || _this4._disabled) {
+          return;
+        }
+
+        _this4._clearScrollbarTimer();
+
+        scroller.doTouchStart(e.touches, e.timeStamp);
+      }, willNotPreventDefault);
+
+      var onTouchEnd = function onTouchEnd(e) {
+        scroller.doTouchEnd(e.timeStamp);
+      };
+
+      this._bindEvent(container, 'touchmove', function (e) {
+        scroller.doTouchMove(e.touches, e.timeStamp, e.scale);
+        iOSWebViewFix(e, onTouchEnd);
       });
-    }
-  },
-  bindEvent: function bindEvent(target, type, fn, options) {
-    var eventHandlers = this.eventHandlers;
 
-    if (eventHandlers[type]) {
-      eventHandlers[type]();
+      this._bindEvent(container, 'touchend', onTouchEnd);
+
+      this._bindEvent(container, 'touchcancel', onTouchEnd);
+
+      this._bindEvent(container, 'mousewheel', function (e) {
+        _this4._onContainerMouseWheel(e);
+      });
     }
 
-    eventHandlers[type] = addEventListener(target, type, fn, options);
-  },
-  bindEvents: function bindEvents() {
-    var _this2 = this;
+    Object.keys(this._indicators).forEach(function (type) {
+      var indicator = _this4._indicators[type];
 
-    // reflow handling
-    this.eventHandlers = {};
-    this.bindEvent(win$1, "resize", function () {
-      _this2.reflow();
-    }, false);
-    var lockMouse = false;
-    var releaseLockTimer;
-    var container = this.container,
-        scroller = this.scroller;
-    this.bindEvent(container, "touchstart", function (e) {
-      lockMouse = true;
+      _this4._bindEvent(indicator, 'mousedown', function (e) {
+        if (e.button === 0) {
+          _this4._onIndicatorMouseDown(e);
 
-      if (releaseLockTimer) {
-        clearTimeout(releaseLockTimer);
-        releaseLockTimer = null;
-      } // Don't react if initial down happens on a form element
+          var moveHandler = _this4._bindEvent(document, 'mousemove', function (e) {
+            _this4._onIndicatorMouseMove(e, type);
+          });
 
+          var upHandler = _this4._bindEvent(document, 'mouseup', function (e) {
+            _this4._onIndicatorMouseUp(e);
 
-      if (e.touches[0] && e.touches[0].target && e.touches[0].target.tagName.match(/input|textarea|select/i) || _this2.disabled) {
-        return;
-      }
+            moveHandler();
+            upHandler();
+          });
+        }
+      });
+    });
+    Object.keys(this._scrollbars).forEach(function (type) {
+      var bar = _this4._scrollbars[type];
 
-      _this2.clearScrollbarTimer(); // reflow since the container may have changed
+      _this4._bindEvent(bar, 'mousedown', function (e) {
+        if (e.button === 0) {
+          _this4._onScrollbarMouseDown(e, type);
 
+          var upHandler = _this4._bindEvent(document, 'mouseup', function (e) {
+            _this4._onScrollbarMouseup(e);
 
-      _this2.reflow();
+            upHandler();
+          });
+        }
+      });
+    });
+  };
 
-      scroller.doTouchStart(e.touches, e.timeStamp);
-    }, willNotPreventDefault);
-    var _this$options = this.options,
-        preventDefaultOnTouchMove = _this$options.preventDefaultOnTouchMove,
-        zooming = _this$options.zooming;
-
-    var onTouchEnd = function onTouchEnd(e) {
-      scroller.doTouchEnd(e.timeStamp);
-      releaseLockTimer = setTimeout(function () {
-        lockMouse = false;
-      }, 300);
+  _proto._onIndicatorMouseDown = function _onIndicatorMouseDown(e) {
+    this._initPagePos = {
+      pageX: e.pageX,
+      pageY: e.pageY,
+      left: this._scroller.__scrollLeft,
+      top: this._scroller.__scrollTop
     };
+    console.log(this._initPagePos);
+    e.stopPropagation();
+  };
 
-    if (preventDefaultOnTouchMove !== false) {
-      this.bindEvent(container, "touchmove", function (e) {
-        e.preventDefault();
-        scroller.doTouchMove(e.touches, e.timeStamp, e.scale);
-        iOSWebViewFix(e, onTouchEnd);
-      }, willPreventDefault);
+  _proto._onIndicatorMouseMove = function _onIndicatorMouseMove(e, type) {
+    document.body.setAttribute('unselectable', 'on');
+
+    if (type === 'x') {
+      this._scroller.scrollTo((e.pageX - this._initPagePos.pageX) * this._ratio.x + this._initPagePos.left, this._initPagePos.top, false);
     } else {
-      this.bindEvent(container, "touchmove", function (e) {
-        scroller.doTouchMove(e.touches, e.timeStamp, e.scale);
-        iOSWebViewFix(e, onTouchEnd);
-      }, willNotPreventDefault);
+      this._scroller.scrollTo(this._initPagePos.left, (e.pageY - this._initPagePos.pageY) * this._ratio.y + this._initPagePos.top, false);
     }
+    e.stopPropagation();
+  };
 
-    this.bindEvent(container, "touchend", onTouchEnd, willNotPreventDefault);
-    this.bindEvent(container, "touchcancel", onTouchEnd, willNotPreventDefault);
+  _proto._onIndicatorMouseUp = function _onIndicatorMouseUp(e) {
+    e.stopPropagation();
+  };
 
-    var onMouseUp = function onMouseUp(e) {
-      scroller.doTouchEnd(e.timeStamp);
+  _proto._onContainerMouseWheel = function _onContainerMouseWheel(e) {
+    var wheelData = e.detail ? e.detail : e.wheelDelta / -40,
+        dragOffset = wheelData / 3 * 10 * 1;
 
-      _this2.unbindEvent("mousemove");
+    this._scroller.scrollBy(0, dragOffset, false);
+  };
 
-      _this2.unbindEvent("mouseup");
-    };
+  _proto._onScrollbarMouseDown = function _onScrollbarMouseDown(e, type) {
+    var _this5 = this;
 
-    var onMouseMove = function onMouseMove(e) {
-      scroller.doTouchMove([{
-        pageX: e.pageX,
-        pageY: e.pageY
-      }], e.timeStamp);
-    };
+    var init = true;
+    var pageX = e.pageX,
+        pageY = e.pageY;
 
-    this.bindEvent(container, "mousedown", function (e) {
-      if (lockMouse || e.target.tagName.match(/input|textarea|select/i) || _this2.disabled) {
+    var offset = _extends({}, this._scrollbars[type].getBoundingClientRect());
+
+    offset.left += window.pageXOffset;
+    offset.top += window.pageYOffset;
+    var direction = 0;
+    var viewportSize = type === 'x' ? this._options.viewport.width : this._options.viewport.height;
+
+    if (this._containerMouseDownTimer !== null) {
+      return;
+    }
+
+    if (type === 'x') {
+      direction = pageX - offset.left - this._scroller.__scrollLeft;
+    } else {
+      direction = pageY - offset.top - this._scroller.__scrollTop;
+    }
+
+    if (direction) {
+      direction = direction > 0 ? 1 : -1;
+    }
+
+    var doScroll = function doScroll() {
+      var pos = 0;
+      var scrollPosition = _this5._scroller[type === 'x' ? '__scrollLeft' : '__scrollTop'];
+      var indicatorSize = _this5._indicatorsSize[type];
+
+      if (type === 'x') {
+        pos = pageX - offset.left - scrollPosition;
+      } else {
+        pos = pageY - offset.top - scrollPosition;
+      }
+
+      if (pos * direction < 0 || pos >= 0 && pos < indicatorSize) {
+        _this5._endScroll();
+
         return;
       }
 
-      _this2.clearScrollbarTimer();
+      if (direction) {
+        if (type === 'x') {
+          _this5._scroller.scrollBy(viewportSize * direction, 0, false);
+        } else {
+          _this5._scroller.scrollBy(0, viewportSize * direction, false);
+        }
+      } else {
+        _this5._endScroll();
 
-      scroller.doTouchStart([{
-        pageX: e.pageX,
-        pageY: e.pageY
-      }], e.timeStamp); // reflow since the container may have changed
+        return;
+      }
 
-      _this2.reflow();
+      _this5._containerMouseDownTimer = setTimeout(doScroll, init ? 300 : 70);
+      init = false;
+    };
 
-      e.preventDefault();
+    doScroll();
+  };
 
-      _this2.bindEvent(document, "mousemove", onMouseMove, willNotPreventDefault);
+  _proto._endScroll = function _endScroll() {
+    this._containerMouseDownTimer && clearTimeout(this._containerMouseDownTimer);
+    this._containerMouseDownTimer = null;
+  };
 
-      _this2.bindEvent(document, "mouseup", onMouseUp, willNotPreventDefault);
-    }, willPreventDefault);
+  _proto._onScrollbarMouseup = function _onScrollbarMouseup(e) {
+    this._endScroll();
+  };
 
-    if (zooming) {
-      this.bindEvent(container, "mousewheel", function (e) {
-        scroller.doMouseZoom(e.wheelDelta, e.timeStamp, e.pageX, e.pageY);
-        e.preventDefault();
-      }, willPreventDefault);
-    }
-  }
-};
+  return ZScroller;
+}();
 
 export default ZScroller;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "zscroller",
   "description": "dom scroller based on zynga scroller",
-  "version": "0.5.4",
+  "version": "0.6.0-beta.0",
   "license": "MIT",
@@ -27,7 +27,8 @@ "files": [
   "devDependencies": {
-    "@pika/plugin-build-node": "^0.5.1",
-    "@pika/plugin-build-types": "^0.5.1",
-    "@pika/plugin-copy-assets": "^0.5.1",
-    "@pika/plugin-standard-pkg": "^0.5.1",
-    "@pika/types": "^0.5.1",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@pika/plugin-copy-assets": "^0.6.1",
+    "@pika/plugin-ts-standard-pkg": "^0.6.1",
+    "@pika/types": "^0.6.1",
     "@storybook/react": "^5.1.9",
@@ -37,3 +38,3 @@ "@storybook/storybook-deployer": "^2.8.1",
     "lint-staged": "^9.2.1",
-    "pika-plugin-build-web-babel": "^0.6.0",
+    "pika-plugin-build-web-babel": "^0.7.0",
     "pika-plugin-clean-dist-src": "^0.1.1",
@@ -43,6 +44,8 @@ "pre-commit": "1.x",
     "react": "16.x",
-    "react-dom": "16.x"
+    "react-dom": "16.x",
+    "typescript": "^3.7.5"
   },
-  "module": "dist-web/index.js",
-  "main": "dist-node/index.js"
+  "source": "dist-src/index.js",
+  "types": "dist-types/index.d.ts",
+  "module": "dist-web/index.js"
 }

README.md

@@ -48,11 +48,72 @@ # zscroller
 
-most same with [zynga scroller](https://zynga.github.io/scroller/), extra:
 
-| name     | description    | type     | default      |
-|----------|----------------|----------|--------------|
-|scrollbars |whether show scrollbars | bool | false |
-|onScroll | onScroll callback | () => void | null |
+```js
+interface ViewportSize {
+  width: number;
+  height: number;
+}
 
+interface ContentSize {
+  width: number;
+  height: number;
+}
+
+interface X {
+  width: number;
+  height?: number;
+  scrollbar?: { style: any };
+  indicator?: { style: any };
+}
+
+interface Y {
+  width?: number;
+  height: number;
+  scrollbar?: { style: any };
+  indicator?: { style: any };
+}
+
+interface ZScrollerOption {
+  locking: boolean;
+  viewport: ViewportSize;
+  content: ContentSize;
+  x?: X;
+  y?: Y;
+  container?: HTMLElement;
+  scrollingComplete?: () => any;
+  onScroll?: (left: number, top: number, zoom: number) => any;
+}
+```
+
+```js
+zscroller = new ZScroller({
+    container: container.current,
+    viewport: {
+      height: container.current.clientHeight - 20, // padding
+      width: container.current.clientWidth - 20,
+    },
+    content: {
+      width: content.current.offsetWidth,
+      height: content.current.offsetHeight
+    },
+    locking: locking.current.checked,
+
+    x: scrollingX.current.checked ? {
+      width: container.current.clientWidth - 4,
+
+    } : undefined,
+    y: scrollingY.current.checked ? {
+      height: container.current.clientHeight - 4, // padding
+    } : undefined,
+
+    onScroll(left, top) {
+      content.current.style.transform = `translate3d(${-left}px,${-top}px,0)`
+      content.current.style.webkitTransform = `translate3d(${-left}px,${-top}px,0)`;
+    }
+  });
+  container.current.appendChild(zscroller.getScrollbar('x'));
+  container.current.appendChild(zscroller.getScrollbar('y'));
+```
+
 ## License
 
 zscroller is released under the MIT license.

No alert changes

Improved metrics

Number of lines in readme file

119

increased by105.17%

Worsened metrics

Total package byte prevSize

178590

decreased by-19.7%

Dev dependency count

17

increased by13.33%

Lines of code

1611

decreased by-42.79%

No dependency changes