vscroll 1.4.3 → 1.4.4

package/dist/bundles/vscroll.umd.js

@@ -1,6 +1,6 @@
 /**
  * vscroll (https://github.com/dhilt/vscroll) UMD
- * Version: 1.4.3 (2021-11-30T02:54:04.845Z)
+ * Version: 1.4.4 (2022-01-22T00:43:23.053Z)
  * Author: Denis Hilt
  * License: MIT
  */
@@ -94,7 +94,7 @@
 
     /**
      * vscroll (https://github.com/dhilt/vscroll) FESM5
-     * Version: 1.4.3 (2021-11-30T02:54:00.541Z)
+     * Version: 1.4.4 (2022-01-22T00:43:17.423Z)
      * Author: Denis Hilt
      * License: MIT
      */
@@ -435,7 +435,7 @@
 
     var core = {
       name: 'vscroll',
-      version: '1.4.3'
+      version: '1.4.4'
     };
 
     var instanceCount$1 = 0;
@@ -3075,7 +3075,7 @@
         this.getWorkflowCycleData = function () {
           return settings.instanceIndex + "-" + scroller.state.cycle.count;
         };
-        this.getScrollPosition = function (element) { return scroller.routines.getScrollPosition(element); };
+        this.getScrollPosition = function () { return scroller.routines.getScrollPosition(); };
         this.log(function () {
           return 'vscroll Workflow has been started, ' +
             ("core: " + packageInfo.core.name + " v" + packageInfo.core.version + ", ") +
@@ -3135,7 +3135,7 @@
       };
       Logger.prototype.prepareForLog = function (data) {
         return data instanceof Event && data.target
-          ? this.getScrollPosition(data.target)
+          ? this.getScrollPosition()
           : data;
       };
       Logger.prototype.logProcess = function (data) {
@@ -3230,64 +3230,63 @@
     }());
 
     var Routines = /** @class */ (function () {
-      function Routines(settings) {
-        this.horizontal = settings.horizontal;
-        this.window = settings.windowViewport;
-        this.viewport = settings.viewport;
+      function Routines(element, settings) {
+        this.settings = {
+          viewport: settings.viewport,
+          horizontal: settings.horizontal,
+          window: settings.windowViewport
+        };
+        this.element = element;
+        this.viewport = this.getViewportElement();
+        this.onInit(settings);
       }
       Routines.prototype.checkElement = function (element) {
         if (!element) {
           throw new Error('HTML element is not defined');
         }
       };
-      Routines.prototype.getHostElement = function (element) {
-        if (this.window) {
+      Routines.prototype.getViewportElement = function () {
+        if (this.settings.window) {
           return document.documentElement;
         }
-        if (this.viewport) {
-          return this.viewport;
+        if (this.settings.viewport) {
+          return this.settings.viewport;
         }
-        this.checkElement(element);
-        var parent = element.parentElement;
+        this.checkElement(this.element);
+        var parent = this.element.parentElement;
         this.checkElement(parent);
         return parent;
       };
-      Routines.prototype.getScrollEventReceiver = function (element) {
-        if (this.window) {
-          return window;
+      Routines.prototype.onInit = function (settings) {
+        if (settings.windowViewport) {
+          if ('scrollRestoration' in history) {
+            history.scrollRestoration = 'manual';
+          }
         }
-        return this.getHostElement(element);
-      };
-      Routines.prototype.setupScrollRestoration = function () {
-        if ('scrollRestoration' in history) {
-          history.scrollRestoration = 'manual';
+        if (settings.dismissOverflowAnchor) {
+          this.viewport.style.overflowAnchor = 'none';
         }
       };
-      Routines.prototype.dismissOverflowAnchor = function (element) {
-        this.checkElement(element);
-        element.style.overflowAnchor = 'none';
-      };
       Routines.prototype.findElementBySelector = function (element, selector) {
         this.checkElement(element);
         return element.querySelector(selector);
       };
-      Routines.prototype.findPaddingElement = function (element, direction) {
-        return this.findElementBySelector(element, "[data-padding-" + direction + "]");
+      Routines.prototype.findPaddingElement = function (direction) {
+        return this.findElementBySelector(this.element, "[data-padding-" + direction + "]");
       };
-      Routines.prototype.findItemElement = function (element, id) {
-        return this.findElementBySelector(element, "[data-sid=\"" + id + "\"]");
+      Routines.prototype.findItemElement = function (id) {
+        return this.findElementBySelector(this.element, "[data-sid=\"" + id + "\"]");
       };
-      Routines.prototype.getScrollPosition = function (element) {
-        if (this.window) {
-          return window.pageYOffset;
+      Routines.prototype.getScrollPosition = function () {
+        if (this.settings.window) {
+          return this.settings.horizontal ? window.pageXOffset : window.pageYOffset;
         }
-        this.checkElement(element);
-        return element[this.horizontal ? 'scrollLeft' : 'scrollTop'];
+        return this.viewport[this.settings.horizontal ? 'scrollLeft' : 'scrollTop'];
       };
-      Routines.prototype.setScrollPosition = function (element, value) {
+      Routines.prototype.setScrollPosition = function (value) {
         value = Math.max(0, value);
-        if (this.window) {
-          if (this.horizontal) {
+        if (this.settings.window) {
+          if (this.settings.horizontal) {
             window.scrollTo(value, window.scrollY);
           }
           else {
@@ -3295,49 +3294,62 @@
           }
           return;
         }
-        this.checkElement(element);
-        element[this.horizontal ? 'scrollLeft' : 'scrollTop'] = value;
+        this.viewport[this.settings.horizontal ? 'scrollLeft' : 'scrollTop'] = value;
       };
-      Routines.prototype.getParams = function (element, doNotBind) {
+      Routines.prototype.getElementParams = function (element) {
         this.checkElement(element);
-        if (this.window && doNotBind) {
-          var clientWidth = element.clientWidth, clientHeight = element.clientHeight, clientLeft = element.clientLeft, clientTop = element.clientTop;
-          return {
-            'height': clientHeight,
-            'width': clientWidth,
-            'top': clientTop,
-            'bottom': clientTop + clientHeight,
-            'left': clientLeft,
-            'right': clientLeft + clientWidth,
-            'x': clientLeft,
-            'y': clientTop,
-            'toJSON': function () { return null; },
-          };
-        }
         return element.getBoundingClientRect();
       };
-      Routines.prototype.getSize = function (element, doNotBind) {
-        return this.getParams(element, doNotBind)[this.horizontal ? 'width' : 'height'];
+      Routines.prototype.getWindowParams = function () {
+        var _a = this.viewport, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight, clientLeft = _a.clientLeft, clientTop = _a.clientTop;
+        return {
+          'height': clientHeight,
+          'width': clientWidth,
+          'top': clientTop,
+          'bottom': clientTop + clientHeight,
+          'left': clientLeft,
+          'right': clientLeft + clientWidth,
+          'x': clientLeft,
+          'y': clientTop,
+          'toJSON': function () { return null; },
+        };
+      };
+      Routines.prototype.getSize = function (element) {
+        return this.getElementParams(element)[this.settings.horizontal ? 'width' : 'height'];
+      };
+      Routines.prototype.getScrollerSize = function () {
+        return this.getElementParams(this.element)[this.settings.horizontal ? 'width' : 'height'];
+      };
+      Routines.prototype.getViewportSize = function () {
+        if (this.settings.window) {
+          return this.getWindowParams()[this.settings.horizontal ? 'width' : 'height'];
+        }
+        return this.getSize(this.viewport);
       };
       Routines.prototype.getSizeStyle = function (element) {
         this.checkElement(element);
-        var size = element.style[this.horizontal ? 'width' : 'height'];
+        var size = element.style[this.settings.horizontal ? 'width' : 'height'];
         return parseFloat(size) || 0;
       };
       Routines.prototype.setSizeStyle = function (element, value) {
         this.checkElement(element);
         value = Math.max(0, Math.round(value));
-        element.style[this.horizontal ? 'width' : 'height'] = value + "px";
+        element.style[this.settings.horizontal ? 'width' : 'height'] = value + "px";
       };
-      Routines.prototype.getEdge = function (element, direction, doNotBind) {
-        var params = this.getParams(element, doNotBind);
+      Routines.prototype.getEdge = function (element, direction) {
+        var horizontal = this.settings.horizontal;
+        var params = this.getElementParams(element);
         var isFwd = direction === exports.Direction.forward;
-        return params[isFwd ? (this.horizontal ? 'right' : 'bottom') : (this.horizontal ? 'left' : 'top')];
+        return params[isFwd ? (horizontal ? 'right' : 'bottom') : (horizontal ? 'left' : 'top')];
       };
-      Routines.prototype.getEdge2 = function (element, direction, relativeElement, opposite) {
-        // vertical only ?
-        return element.offsetTop - (relativeElement ? relativeElement.scrollTop : 0) +
-          (direction === (!opposite ? exports.Direction.forward : exports.Direction.backward) ? this.getSize(element) : 0);
+      Routines.prototype.getViewportEdge = function (direction) {
+        var _a = this.settings, window = _a.window, horizontal = _a.horizontal;
+        if (window) {
+          var params = this.getWindowParams();
+          var isFwd = direction === exports.Direction.forward;
+          return params[isFwd ? (horizontal ? 'right' : 'bottom') : (horizontal ? 'left' : 'top')];
+        }
+        return this.getEdge(this.viewport, direction);
       };
       Routines.prototype.makeElementVisible = function (element) {
         this.checkElement(element);
@@ -3349,9 +3361,12 @@
         this.checkElement(element);
         element.style.display = 'none';
       };
-      Routines.prototype.getOffset = function (element) {
-        this.checkElement(element);
-        return (this.horizontal ? element.offsetLeft : element.offsetTop) || 0;
+      Routines.prototype.getOffset = function () {
+        var _this = this;
+        var get = function (element) {
+          return (_this.settings.horizontal ? element.offsetLeft : element.offsetTop) || 0;
+        };
+        return get(this.element) - (!this.settings.window ? get(this.viewport) : 0);
       };
       Routines.prototype.scrollTo = function (element, argument) {
         this.checkElement(element);
@@ -3365,16 +3380,17 @@
         var animationFrameId = requestAnimationFrame(function () { return cb(); });
         return function () { return cancelAnimationFrame(animationFrameId); };
       };
-      Routines.prototype.onScroll = function (element, handler) {
-        element.addEventListener('scroll', handler);
-        return function () { return element.removeEventListener('scroll', handler); };
+      Routines.prototype.onScroll = function (handler) {
+        var eventReceiver = this.settings.window ? window : this.viewport;
+        eventReceiver.addEventListener('scroll', handler);
+        return function () { return eventReceiver.removeEventListener('scroll', handler); };
       };
       return Routines;
     }());
 
     var Padding = /** @class */ (function () {
-      function Padding(element, direction, routines) {
-        var found = routines.findPaddingElement(element, direction);
+      function Padding(direction, routines) {
+        var found = routines.findPaddingElement(direction);
         routines.checkElement(found);
         this.element = found;
         this.direction = direction;
@@ -3396,10 +3412,10 @@
       return Padding;
     }());
     var Paddings = /** @class */ (function () {
-      function Paddings(element, routines, settings) {
+      function Paddings(routines, settings) {
         this.settings = settings;
-        this.forward = new Padding(element, exports.Direction.forward, routines);
-        this.backward = new Padding(element, exports.Direction.backward, routines);
+        this.forward = new Padding(exports.Direction.forward, routines);
+        this.backward = new Padding(exports.Direction.backward, routines);
       }
       Paddings.prototype.byDirection = function (direction, opposite) {
         return direction === exports.Direction.backward
@@ -3451,21 +3467,12 @@
     }());
 
     var Viewport = /** @class */ (function () {
-      function Viewport(element, settings, routines, state, logger) {
-        this.element = element;
+      function Viewport(settings, routines, state, logger) {
         this.settings = settings;
         this.routines = routines;
         this.state = state;
         this.logger = logger;
-        this.hostElement = this.routines.getHostElement(this.element);
-        this.scrollEventReceiver = this.routines.getScrollEventReceiver(this.element);
-        if (settings.windowViewport) {
-          this.routines.setupScrollRestoration();
-        }
-        if (settings.dismissOverflowAnchor) {
-          this.routines.dismissOverflowAnchor(this.hostElement);
-        }
-        this.paddings = new Paddings(this.element, this.routines, settings);
+        this.paddings = new Paddings(this.routines, settings);
       }
       Viewport.prototype.reset = function (startIndex) {
         this.setOffset();
@@ -3479,7 +3486,7 @@
           this.logger.log(function () { return ['setting scroll position at', value, '[cancelled]']; });
           return value;
         }
-        this.routines.setScrollPosition(this.hostElement, value);
+        this.routines.setScrollPosition(value);
         var position = this.scrollPosition;
         this.logger.log(function () { return __spreadArray([
           'setting scroll position at', position
@@ -3488,7 +3495,7 @@
       };
       Object.defineProperty(Viewport.prototype, "scrollPosition", {
         get: function () {
-          return this.routines.getScrollPosition(this.hostElement);
+          return this.routines.getScrollPosition();
         },
         set: function (value) {
           this.setPosition(value);
@@ -3497,10 +3504,10 @@
         configurable: true
       });
       Viewport.prototype.getSize = function () {
-        return this.routines.getSize(this.hostElement, true);
+        return this.routines.getViewportSize();
       };
       Viewport.prototype.getScrollableSize = function () {
-        return this.routines.getSize(this.element);
+        return this.routines.getScrollerSize();
       };
       Viewport.prototype.getMaxScrollPosition = function () {
         return this.getScrollableSize() - this.getSize();
@@ -3509,16 +3516,13 @@
         return this.getSize() * this.settings.padding;
       };
       Viewport.prototype.getEdge = function (direction) {
-        return this.routines.getEdge(this.hostElement, direction, true);
+        return this.routines.getViewportEdge(direction);
       };
       Viewport.prototype.setOffset = function () {
-        this.offset = this.routines.getOffset(this.element);
-        if (!this.settings.windowViewport) {
-          this.offset -= this.routines.getOffset(this.hostElement);
-        }
+        this.offset = this.routines.getOffset();
       };
       Viewport.prototype.findItemElementById = function (id) {
-        return this.routines.findItemElement(this.element, id);
+        return this.routines.findItemElement(id);
       };
       Viewport.prototype.getEdgeVisibleItem = function (items, direction) {
         var bwd = direction === exports.Direction.backward;
@@ -5216,15 +5220,15 @@
           throw new Error(INVALID_DATASOURCE_PREFIX + " " + get.errors[0]);
         }
         var packageInfo = scroller ? scroller.state.packageInfo : { consumer: consumer, core: core };
-        element = scroller ? scroller.viewport.element : element;
+        element = scroller ? scroller.routines.element : element;
         workflow = scroller ? scroller.workflow : workflow;
         this.workflow = workflow;
         this.settings = new Settings(datasource.settings, datasource.devSettings, ++instanceCount);
         this.logger = new Logger(this, packageInfo, datasource.adapter);
-        this.routines = new Routines(this.settings);
+        this.routines = new Routines(element, this.settings);
         this.state = new State(packageInfo, this.settings, scroller ? scroller.state : void 0);
         this.buffer = new Buffer(this.settings, workflow.onDataChanged, this.logger);
-        this.viewport = new Viewport(element, this.settings, this.routines, this.state, this.logger);
+        this.viewport = new Viewport(this.settings, this.routines, this.state, this.logger);
         this.logger.object('vscroll settings object', this.settings, true);
         this.initDatasource(datasource, scroller);
       }
@@ -5519,13 +5523,13 @@
           status: ProcessStatus.start
         });
         // set up scroll event listener
-        var _a = this.scroller, scrollEventReceiver = _a.viewport.scrollEventReceiver, routines = _a.routines;
+        var routines = this.scroller.routines;
         var onScrollHandler = function (event) { return _this.callWorkflow({
           process: CommonProcess.scroll,
           status: ProcessStatus.start,
           payload: { event: event }
         }); };
-        this.offScroll = routines.onScroll(scrollEventReceiver, onScrollHandler);
+        this.offScroll = routines.onScroll(onScrollHandler);
       };
       Workflow.prototype.changeItems = function (items) {
         this.propagateChanges(items);