@nrk/core-scroll - npm Package Compare versions

Comparing version 4.2.1 to 4.3.0-0

core-scroll.cjs.js

@@ -1,2 +0,2 @@
-/*! @nrk/core-scroll v4.2.1 - Copyright (c) 2017-2021 NRK */
+/*! @nrk/core-scroll v4.3.0-0 - Copyright (c) 2017-2022 NRK */
 'use strict';
@@ -7,13 +7,7 @@
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
@@ -40,2 +34,5 @@
   if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
   return Constructor;
@@ -56,2 +53,5 @@ }
   });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
   if (superClass) _setPrototypeOf(subClass, superClass);
@@ -193,3 +193,3 @@ }
 
-    return _class;
+    return _createClass(_class);
   }();
@@ -313,2 +313,39 @@ }
 
+/**
+ * @typedef {{ x: number, y: number }} scrollCoords
+ */
+
+/**
+ * @typedef {object} scrollPoint
+ * @property {Number} x
+ * @property {Number} y
+ * @property {'top' | 'bottom'} prop
+ */
+
+/**
+ * @typedef {'up'| 'down' | 'left' | 'right'} scrollDirection
+ */
+
+/**
+ * @typedef {scrollDirection | scrollPoint | Element} scrollTarget
+ */
+
+/**
+ * @typedef {Object} dragType
+ * @property {String} animate Id of element to animate
+ * @property {Number} diffSumX
+ * @property {Number} diffSumY
+ * @property {Number} diffX
+ * @property {Number} diffY
+ * @property {Number} pageX
+ * @property {Number} pageY
+ * @property {Number} scrollX
+ * @property {Number} scrollY
+ * @property {HTMLElement} target
+ */
+
+/**
+ * @type {dragType}
+ */
+
 var DRAG = {};
@@ -408,2 +445,7 @@ var MOVE = {
     }
+    /**
+     *
+     * @param {Event} event
+     */
+
   }, {
@@ -442,2 +484,8 @@ key: "handleEvent",
     }
+    /**
+     * Scroll to Element, point or cardinal direction within core-scroll
+     * @param {scrollTarget} point Element, {x, y} pixel distance from top/left or cardinal direction ['up', 'down', 'left', 'right']
+     * @returns {Promise<scrollPoint>} scrollPoint
+     */
+
   }, {
@@ -448,6 +496,5 @@ key: "scroll",
 
-      var _parsePoint = parsePoint(this, point),
-          x = _parsePoint.x,
-          y = _parsePoint.y;
-
+      var endPoint = parsePoint(this, point);
+      var x = endPoint.x,
+          y = endPoint.y;
       var uuid = DRAG.animate = getUUID(); // Giving the animation an ID to workaround IE timeout issues
@@ -458,12 +505,15 @@
       var moveY = requestJumps ? 1 : y - this.scrollTop;
+      return new Promise(function (resolve) {
+        var move = function move() {
+          if (DRAG.animate === uuid && (Math.round(moveX) || Math.round(moveY))) {
+            _this2.scrollLeft = x - Math.round(moveX *= friction);
+            _this2.scrollTop = y - Math.round(moveY *= friction);
+            requestFrame(move);
+          } else {
+            resolve(endPoint);
+          }
+        };
 
-      var move = function move() {
-        if (DRAG.animate === uuid && (Math.round(moveX) || Math.round(moveY))) {
-          _this2.scrollLeft = x - Math.round(moveX *= friction);
-          _this2.scrollTop = y - Math.round(moveY *= friction);
-          requestFrame(move);
-        }
-      };
-
-      move();
+        move();
+      });
     }
@@ -558,4 +608,27 @@ }, {
 }
+/**
+ * Takes an element, coordinates or cardinal direction and returns x/y -coordinates
+ * @param {CoreScroll} self CoreScroll HTMLElement
+ * @param {scrollTarget} move
+ * @returns {scrollPoint}
+ */
 
+
 function parsePoint(self, move) {
+  var scrollItems = self.items; // Move is an element within CoreScroll
+
+  var toItem = move && move.nodeType && scrollItems.filter(function (item) {
+    return item.contains(move);
+  })[0];
+
+  if (toItem) {
+    // Target offset subtracting CoreScroll offset and half of offsetHeight/width to center
+    return {
+      x: Math.max(0, toItem.offsetLeft - self.offsetLeft - (self.offsetWidth / 2 - toItem.offsetWidth / 2)),
+      y: Math.max(0, toItem.offsetTop - self.offsetTop - (self.offsetHeight / 2 - toItem.offsetHeight / 2))
+    };
+  } else if (move && move.nodeType && !toItem) {
+    console.warn(self, "cannot find child element ".concat(move, " as a valid target for scrolling"));
+  }
+
   var point = _typeof(move) === 'object' ? move : {
@@ -573,3 +646,3 @@ move: move
     var edge = bounds[start] + bounds[point.move.x ? 'width' : 'height'] * point.move[axis];
-    self.items.every(function (el) {
+    scrollItems.every(function (el) {
       // Use .every as this loop stops on return false
@@ -576,0 +649,0 @@ var rect = el.getBoundingClientRect();

core-scroll.js

 import { IS_BROWSER, addStyle, closest, dispatchEvent, throttle, getUUID, queryAll } from '../utils'
 
+/**
+ * @typedef {{ x: number, y: number }} scrollCoords
+ */
+
+/**
+ * @typedef {object} scrollPoint
+ * @property {Number} x
+ * @property {Number} y
+ * @property {'top' | 'bottom'} prop
+ */
+
+/**
+ * @typedef {'up'| 'down' | 'left' | 'right'} scrollDirection
+ */
+
+/**
+ * @typedef {scrollDirection | scrollPoint | Element} scrollTarget
+ */
+
+/**
+ * @typedef {Object} dragType
+ * @property {String} animate Id of element to animate
+ * @property {Number} diffSumX
+ * @property {Number} diffSumY
+ * @property {Number} diffX
+ * @property {Number} diffY
+ * @property {Number} pageX
+ * @property {Number} pageY
+ * @property {Number} scrollX
+ * @property {Number} scrollY
+ * @property {HTMLElement} target
+ */
+
+/**
+ * @type {dragType}
+ */
 const DRAG = {}
@@ -56,2 +92,6 @@ const MOVE = { up: { y: -1, prop: 'top' }, down: { y: 1, prop: 'bottom' }, left: { x: -1 }, right: { x: 1 } }
 
+  /**
+   *
+   * @param {Event} event
+   */
   handleEvent (event = {}) {
@@ -83,4 +123,10 @@ if (!this.parentNode || event.defaultPrevented) return // Abort if removed from DOM or event is prevented
 
+  /**
+   * Scroll to Element, point or cardinal direction within core-scroll
+   * @param {scrollTarget} point Element, {x, y} pixel distance from top/left or cardinal direction ['up', 'down', 'left', 'right']
+   * @returns {Promise<scrollPoint>} scrollPoint
+   */
   scroll (point) {
-    const { x, y } = parsePoint(this, point)
+    const endPoint = parsePoint(this, point)
+    const { x, y } = endPoint
     const uuid = DRAG.animate = getUUID() // Giving the animation an ID to workaround IE timeout issues
@@ -91,10 +137,14 @@ const friction = this.friction
 
-    const move = () => {
-      if (DRAG.animate === uuid && (Math.round(moveX) || Math.round(moveY))) {
-        this.scrollLeft = x - Math.round(moveX *= friction)
-        this.scrollTop = y - Math.round(moveY *= friction)
-        requestFrame(move)
+    return new Promise((resolve) => {
+      const move = () => {
+        if (DRAG.animate === uuid && (Math.round(moveX) || Math.round(moveY))) {
+          this.scrollLeft = x - Math.round(moveX *= friction)
+          this.scrollTop = y - Math.round(moveY *= friction)
+          requestFrame(move)
+        } else {
+          resolve(endPoint)
+        }
       }
-    }
-    move()
+      move()
+    })
   }
@@ -171,3 +221,21 @@
 
+/**
+ * Takes an element, coordinates or cardinal direction and returns x/y -coordinates
+ * @param {CoreScroll} self CoreScroll HTMLElement
+ * @param {scrollTarget} move
+ * @returns {scrollPoint}
+ */
 function parsePoint (self, move) {
+  const scrollItems = self.items
+  // Move is an element within CoreScroll
+  const toItem = move && move.nodeType && scrollItems.filter((item) => item.contains(move))[0]
+  if (toItem) {
+    // Target offset subtracting CoreScroll offset and half of offsetHeight/width to center
+    return {
+      x: Math.max(0, toItem.offsetLeft - self.offsetLeft - ((self.offsetWidth / 2) - (toItem.offsetWidth / 2))),
+      y: Math.max(0, toItem.offsetTop - self.offsetTop - ((self.offsetHeight / 2) - (toItem.offsetHeight / 2)))
+    }
+  } else if (move && move.nodeType && !toItem) {
+    console.warn(self, `cannot find child element ${move} as a valid target for scrolling`)
+  }
   const point = typeof move === 'object' ? move : { move }
@@ -183,3 +251,3 @@ if (typeof point.x !== 'number') point.x = self.scrollLeft
 
-    self.items.every((el) => { // Use .every as this loop stops on return false
+    scrollItems.every((el) => { // Use .every as this loop stops on return false
       const rect = el.getBoundingClientRect()
@@ -186,0 +254,0 @@ const marg = el.ownerDocument.defaultView.getComputedStyle(el)[`margin-${start}`]

core-scroll.jsx.js

@@ -1,2 +0,2 @@
-/*! @nrk/core-scroll v4.2.1 - Copyright (c) 2017-2021 NRK */
+/*! @nrk/core-scroll v4.3.0-0 - Copyright (c) 2017-2022 NRK */
 (function (global, factory) {
@@ -15,13 +15,7 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
 
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function (obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof = function (obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
-    }
-
-    return _typeof(obj);
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+      return typeof obj;
+    } : function (obj) {
+      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    }, _typeof(obj);
   }
@@ -48,2 +42,5 @@
     if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
     return Constructor;
@@ -64,2 +61,5 @@ }
     });
+    Object.defineProperty(subClass, "prototype", {
+      writable: false
+    });
     if (superClass) _setPrototypeOf(subClass, superClass);
@@ -201,3 +201,3 @@ }
 
-      return _class;
+      return _createClass(_class);
     }();
@@ -321,2 +321,39 @@ }
 
+  /**
+   * @typedef {{ x: number, y: number }} scrollCoords
+   */
+
+  /**
+   * @typedef {object} scrollPoint
+   * @property {Number} x
+   * @property {Number} y
+   * @property {'top' | 'bottom'} prop
+   */
+
+  /**
+   * @typedef {'up'| 'down' | 'left' | 'right'} scrollDirection
+   */
+
+  /**
+   * @typedef {scrollDirection | scrollPoint | Element} scrollTarget
+   */
+
+  /**
+   * @typedef {Object} dragType
+   * @property {String} animate Id of element to animate
+   * @property {Number} diffSumX
+   * @property {Number} diffSumY
+   * @property {Number} diffX
+   * @property {Number} diffY
+   * @property {Number} pageX
+   * @property {Number} pageY
+   * @property {Number} scrollX
+   * @property {Number} scrollY
+   * @property {HTMLElement} target
+   */
+
+  /**
+   * @type {dragType}
+   */
+
   var DRAG = {};
@@ -416,2 +453,7 @@ var MOVE = {
       }
+      /**
+       *
+       * @param {Event} event
+       */
+
     }, {
@@ -450,2 +492,8 @@ key: "handleEvent",
       }
+      /**
+       * Scroll to Element, point or cardinal direction within core-scroll
+       * @param {scrollTarget} point Element, {x, y} pixel distance from top/left or cardinal direction ['up', 'down', 'left', 'right']
+       * @returns {Promise<scrollPoint>} scrollPoint
+       */
+
     }, {
@@ -456,6 +504,5 @@ key: "scroll",
 
-        var _parsePoint = parsePoint(this, point),
-            x = _parsePoint.x,
-            y = _parsePoint.y;
-
+        var endPoint = parsePoint(this, point);
+        var x = endPoint.x,
+            y = endPoint.y;
         var uuid = DRAG.animate = getUUID(); // Giving the animation an ID to workaround IE timeout issues
@@ -466,12 +513,15 @@
         var moveY = requestJumps ? 1 : y - this.scrollTop;
+        return new Promise(function (resolve) {
+          var move = function move() {
+            if (DRAG.animate === uuid && (Math.round(moveX) || Math.round(moveY))) {
+              _this2.scrollLeft = x - Math.round(moveX *= friction);
+              _this2.scrollTop = y - Math.round(moveY *= friction);
+              requestFrame(move);
+            } else {
+              resolve(endPoint);
+            }
+          };
 
-        var move = function move() {
-          if (DRAG.animate === uuid && (Math.round(moveX) || Math.round(moveY))) {
-            _this2.scrollLeft = x - Math.round(moveX *= friction);
-            _this2.scrollTop = y - Math.round(moveY *= friction);
-            requestFrame(move);
-          }
-        };
-
-        move();
+          move();
+        });
       }
@@ -566,4 +616,27 @@ }, {
   }
+  /**
+   * Takes an element, coordinates or cardinal direction and returns x/y -coordinates
+   * @param {CoreScroll} self CoreScroll HTMLElement
+   * @param {scrollTarget} move
+   * @returns {scrollPoint}
+   */
 
+
   function parsePoint(self, move) {
+    var scrollItems = self.items; // Move is an element within CoreScroll
+
+    var toItem = move && move.nodeType && scrollItems.filter(function (item) {
+      return item.contains(move);
+    })[0];
+
+    if (toItem) {
+      // Target offset subtracting CoreScroll offset and half of offsetHeight/width to center
+      return {
+        x: Math.max(0, toItem.offsetLeft - self.offsetLeft - (self.offsetWidth / 2 - toItem.offsetWidth / 2)),
+        y: Math.max(0, toItem.offsetTop - self.offsetTop - (self.offsetHeight / 2 - toItem.offsetHeight / 2))
+      };
+    } else if (move && move.nodeType && !toItem) {
+      console.warn(self, "cannot find child element ".concat(move, " as a valid target for scrolling"));
+    }
+
     var point = _typeof(move) === 'object' ? move : {
@@ -581,3 +654,3 @@ move: move
       var edge = bounds[start] + bounds[point.move.x ? 'width' : 'height'] * point.move[axis];
-      self.items.every(function (el) {
+      scrollItems.every(function (el) {
         // Use .every as this loop stops on return false
@@ -598,3 +671,3 @@ var rect = el.getBoundingClientRect();
 
-  var version = "4.2.1";
+  var version = "4.3.0-0";
 
@@ -601,0 +674,0 @@ /**

core-scroll.min.js

@@ -1,3 +0,3 @@
-/*! @nrk/core-scroll v4.2.1 - Copyright (c) 2017-2021 NRK */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).coreScroll=e()}(this,(function(){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function o(t){return(o=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function r(t,e){return(r=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function i(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}function l(t,e,n){return(l=i()?Reflect.construct:function(t,e,n){var o=[null];o.push.apply(o,e);var i=new(Function.bind.apply(t,o));return n&&r(i,n.prototype),i}).apply(null,arguments)}function c(t){var e="function"==typeof Map?new Map:void 0;return(c=function(t){if(null===t||(n=t,-1===Function.toString.call(n).indexOf("[native code]")))return t;var n;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,i)}function i(){return l(t,arguments,o(this).constructor)}return i.prototype=Object.create(t.prototype,{constructor:{value:i,enumerable:!1,writable:!0,configurable:!0}}),r(i,t)})(t)}function s(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}var a="undefined"!=typeof window;a&&/(android)/i.test(navigator.userAgent),a&&/iPad|iPhone|iPod/.test(String(navigator.platform)),a||global.HTMLElement||(global.HTMLElement=function(){return function t(){e(this,t)}}());var u,f,d=(u="undefined"==typeof window?{}:window.Element.prototype,f=u.matches||u.msMatchesSelector||u.webkitMatchesSelector,u.closest?function(t,e){return t.closest(e)}:function(t,e){for(t.correspondingUseElement&&(t=t.correspondingUseElement);t;t=t.parentElement)if(f.call(t,e))return t;return null});function h(t,e){var n,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[r])return!0;t[r]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:o}):(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,o);var i=t.dispatchEvent(n);return t[r]=null,i}function p(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;if(t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(e.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var m={},v={up:{y:-1,prop:"top"},down:{y:1,prop:"bottom"},left:{x:-1},right:{x:1}},y=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];try{window.addEventListener("test",null,{get passive(){t={passive:!0}}})}catch(t){}return t}(),g=a&&window.matchMedia&&window.matchMedia("(prefers-reduced-motion)").matches,b=a&&(window.requestAnimationFrame||window.setTimeout);function w(t){d(t.target,'[contenteditable="true"],input,select,textarea')||0===t.button&&(t.preventDefault(),m.pageX=t.pageX,m.pageY=t.pageY,m.diffSumX=0,m.diffSumY=0,m.animate=m.diffX=m.diffY=0,m.scrollX=this.scrollLeft,m.scrollY=this.scrollTop,m.target=this,document.body.style.cursor=this.style.cursor="-webkit-grabbing",document.body.style.cursor=this.style.cursor="grabbing",document.addEventListener("mousemove",E),document.addEventListener("mouseup",x))}function E(t){m.diffX=m.pageX-(m.pageX=t.pageX),m.diffY=m.pageY-(m.pageY=t.pageY),m.diffSumX+=m.diffX,m.diffSumY+=m.diffY,m.target.scrollLeft=m.scrollX+=m.diffX,m.target.scrollTop=m.scrollY+=m.diffY,Math.max(Math.abs(m.diffSumX),Math.abs(m.diffSumY))>10&&(m.target.style.pointerEvents="none")}function x(t){var e=Math.abs(m.diffX||m.diffY)>10?20:0;document.removeEventListener("mousemove",E),document.removeEventListener("mouseup",x),document.body.style.cursor="",e&&m.target.scroll({x:m.scrollX+m.diffX*e,y:m.scrollY+m.diffY*e}),m.target.style.pointerEvents="",m.target.style.cursor="-webkit-grab",m.target.style.cursor="grab",m.target=null}return function(l){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&r(t,e)}(L,l);var c,a,u,f,E,x=(c=L,a=i(),function(){var t,e=o(c);if(a){var n=o(this).constructor;t=Reflect.construct(e,arguments,n)}else t=e.apply(this,arguments);return s(this,t)});function L(){return e(this,L),x.apply(this,arguments)}return u=L,(f=[{key:"connectedCallback",value:function(){var t,e,n,o,r=this;t=this.nodeName,e="\n      ".concat(this.nodeName,"{display:block}\n      ").concat(this.nodeName,"::-webkit-scrollbar{display:none}\n    "),n="style-".concat(t.toLowerCase()),o=e.replace(/\/\*[^!][^*]*\*\//g,"").replace(/\s*(^|[:;,{}]|$)\s*/g,"$1"),document.getElementById(n)||document.head.insertAdjacentHTML("afterbegin",'<style id="'.concat(n,'">').concat(o,"</style>")),this.style.overflow="scroll",this.style.webkitOverflowScrolling="touch";var i,l,c,s=this.offsetWidth-this.clientWidth,a=this.offsetHeight-this.clientHeight;this.style.marginRight="-".concat(s,"px"),this.style.marginBottom="-".concat(a,"px"),this.style.maxHeight="calc(100% + ".concat(a,"px)"),this._throttledEvent=(i=this.handleEvent.bind(this),l=500,function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];c||(c=setTimeout((function(){i.apply(this,e),c=null}),l))}),this.addEventListener("mousedown",this),this.addEventListener("wheel",this,y),this.addEventListener("scroll",this._throttledEvent,y),window.addEventListener("resize",this._throttledEvent,y),window.addEventListener("load",this),document.addEventListener("click",this),setTimeout((function(){return r.handleEvent()}))}},{key:"disconnectedCallback",value:function(){this._throttledEvent=null,this.removeEventListener("mousedown",this),this.removeEventListener("wheel",this,y),this.removeEventListener("scroll",this._throttledEvent,y),window.removeEventListener("resize",this._throttledEvent,y),window.removeEventListener("load",this),document.removeEventListener("click",this)}},{key:"handleEvent",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(this.parentNode&&!t.defaultPrevented)if("wheel"===t.type)m.animate=!1;else if("mousedown"===t.type)w.call(this,t);else if("click"===t.type){var e=this.id&&d(t.target,'[for="'.concat(this.id,'"],[data-for="').concat(this.id,'"]'));e&&h(this,"scroll.click",{move:e.value})&&this.scroll(e.value)}else{var n={up:Math.floor(this.scrollTop),right:Math.floor(this.scrollRight),down:Math.floor(this.scrollBottom),left:Math.floor(this.scrollLeft)},o=n.left||n.right||n.up||n.down?"grab":"";p(this.id&&'[for="'.concat(this.id,'"],[data-for="').concat(this.id,'"]')).forEach((function(t){return t.disabled=!n[t.value]})),h(this,"scroll.change"),t.type||(this.style.cursor="-webkit-".concat(o),this.style.cursor=o)}}},{key:"scroll",value:function(e){var n=this,o=function(e,n){var o="object"===t(n)?n:{move:n};if("number"!=typeof o.x&&(o.x=e.scrollLeft),"number"!=typeof o.y&&(o.y=e.scrollTop),o.move=v[o.move]){var r=o.move.x?"x":"y",i=o.move.x?"left":"top",l=e.getBoundingClientRect(),c=l[i]-e[o.move.x?"scrollLeft":"scrollTop"],s=l[i]+l[o.move.x?"width":"height"]*o.move[r];e.items.every((function(t){var e=t.getBoundingClientRect(),l=t.ownerDocument.defaultView.getComputedStyle(t)["margin-".concat(i)];return o[r]=e[i]-parseInt(l,10)-c,e[o.move.prop||n]<s}))}return{x:Math.max(0,Math.min(o.x,e.scrollWidth-e.clientWidth)),y:Math.max(0,Math.min(o.y,e.scrollHeight-e.clientHeight))}}(this,e),r=o.x,i=o.y,l=m.animate=Date.now().toString(36)+Math.random().toString(36).slice(2,5),c=this.friction,s=g?1:r-this.scrollLeft,a=g?1:i-this.scrollTop;!function t(){m.animate===l&&(Math.round(s)||Math.round(a))&&(n.scrollLeft=r-Math.round(s*=c),n.scrollTop=i-Math.round(a*=c),b(t))}()}},{key:"items",get:function(){return p(this.getAttribute("items")||this.children,this)},set:function(t){this.setAttribute("items",t||"")}},{key:"scrollRight",get:function(){return Math.max(0,this.scrollWidth-this.clientWidth-this.scrollLeft)}},{key:"scrollBottom",get:function(){return Math.max(0,this.scrollHeight-this.clientHeight-this.scrollTop)}},{key:"friction",get:function(){return Math.min(.99,this.getAttribute("friction"))||.8},set:function(t){this.setAttribute("friction",t)}}])&&n(u.prototype,f),E&&n(u,E),L}(c(HTMLElement))})),window.customElements.define("core-scroll",coreScroll);
+/*! @nrk/core-scroll v4.3.0-0 - Copyright (c) 2017-2022 NRK */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).coreScroll=e()}(this,(function(){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function o(t,e,o){return e&&n(t.prototype,e),o&&n(t,o),Object.defineProperty(t,"prototype",{writable:!1}),t}function r(t){return(r=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function i(t,e){return(i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function s(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}function c(t,e,n){return(c=s()?Reflect.construct:function(t,e,n){var o=[null];o.push.apply(o,e);var r=new(Function.bind.apply(t,o));return n&&i(r,n.prototype),r}).apply(null,arguments)}function l(t){var e="function"==typeof Map?new Map:void 0;return(l=function(t){if(null===t||(n=t,-1===Function.toString.call(n).indexOf("[native code]")))return t;var n;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,o)}function o(){return c(t,arguments,r(this).constructor)}return o.prototype=Object.create(t.prototype,{constructor:{value:o,enumerable:!1,writable:!0,configurable:!0}}),i(o,t)})(t)}function a(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}var u="undefined"!=typeof window;u&&/(android)/i.test(navigator.userAgent),u&&/iPad|iPhone|iPod/.test(String(navigator.platform)),u||global.HTMLElement||(global.HTMLElement=function(){return o((function t(){e(this,t)}))}());var f,d,h=(f="undefined"==typeof window?{}:window.Element.prototype,d=f.matches||f.msMatchesSelector||f.webkitMatchesSelector,f.closest?function(t,e){return t.closest(e)}:function(t,e){for(t.correspondingUseElement&&(t=t.correspondingUseElement);t;t=t.parentElement)if(d.call(t,e))return t;return null});function p(t,e){var n,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r="prevent_recursive_dispatch_maximum_callstack".concat(e);if(t[r])return!0;t[r]=!0,"function"==typeof window.CustomEvent?n=new window.CustomEvent(e,{bubbles:!0,cancelable:!0,detail:o}):(n=document.createEvent("CustomEvent")).initCustomEvent(e,!0,!0,o);var i=t.dispatchEvent(n);return t[r]=null,i}function m(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;if(t){if(t.nodeType)return[t];if("string"==typeof t)return[].slice.call(e.querySelectorAll(t));if(t.length)return[].slice.call(t)}return[]}var y={},v={up:{y:-1,prop:"top"},down:{y:1,prop:"bottom"},left:{x:-1},right:{x:1}},g=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];try{window.addEventListener("test",null,{get passive(){t={passive:!0}}})}catch(t){}return t}(),b=u&&window.matchMedia&&window.matchMedia("(prefers-reduced-motion)").matches,w=u&&(window.requestAnimationFrame||window.setTimeout);function E(t){h(t.target,'[contenteditable="true"],input,select,textarea')||0===t.button&&(t.preventDefault(),y.pageX=t.pageX,y.pageY=t.pageY,y.diffSumX=0,y.diffSumY=0,y.animate=y.diffX=y.diffY=0,y.scrollX=this.scrollLeft,y.scrollY=this.scrollTop,y.target=this,document.body.style.cursor=this.style.cursor="-webkit-grabbing",document.body.style.cursor=this.style.cursor="grabbing",document.addEventListener("mousemove",x),document.addEventListener("mouseup",L))}function x(t){y.diffX=y.pageX-(y.pageX=t.pageX),y.diffY=y.pageY-(y.pageY=t.pageY),y.diffSumX+=y.diffX,y.diffSumY+=y.diffY,y.target.scrollLeft=y.scrollX+=y.diffX,y.target.scrollTop=y.scrollY+=y.diffY,Math.max(Math.abs(y.diffSumX),Math.abs(y.diffSumY))>10&&(y.target.style.pointerEvents="none")}function L(t){var e=Math.abs(y.diffX||y.diffY)>10?20:0;document.removeEventListener("mousemove",x),document.removeEventListener("mouseup",L),document.body.style.cursor="",e&&y.target.scroll({x:y.scrollX+y.diffX*e,y:y.scrollY+y.diffY*e}),y.target.style.pointerEvents="",y.target.style.cursor="-webkit-grab",y.target.style.cursor="grab",y.target=null}return function(n){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&i(t,e)}(f,n);var c,l,u=(c=f,l=s(),function(){var t,e=r(c);if(l){var n=r(this).constructor;t=Reflect.construct(e,arguments,n)}else t=e.apply(this,arguments);return a(this,t)});function f(){return e(this,f),u.apply(this,arguments)}return o(f,[{key:"connectedCallback",value:function(){var t,e,n,o,r=this;t=this.nodeName,e="\n      ".concat(this.nodeName,"{display:block}\n      ").concat(this.nodeName,"::-webkit-scrollbar{display:none}\n    "),n="style-".concat(t.toLowerCase()),o=e.replace(/\/\*[^!][^*]*\*\//g,"").replace(/\s*(^|[:;,{}]|$)\s*/g,"$1"),document.getElementById(n)||document.head.insertAdjacentHTML("afterbegin",'<style id="'.concat(n,'">').concat(o,"</style>")),this.style.overflow="scroll",this.style.webkitOverflowScrolling="touch";var i,s,c,l=this.offsetWidth-this.clientWidth,a=this.offsetHeight-this.clientHeight;this.style.marginRight="-".concat(l,"px"),this.style.marginBottom="-".concat(a,"px"),this.style.maxHeight="calc(100% + ".concat(a,"px)"),this._throttledEvent=(i=this.handleEvent.bind(this),s=500,function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];c||(c=setTimeout((function(){i.apply(this,e),c=null}),s))}),this.addEventListener("mousedown",this),this.addEventListener("wheel",this,g),this.addEventListener("scroll",this._throttledEvent,g),window.addEventListener("resize",this._throttledEvent,g),window.addEventListener("load",this),document.addEventListener("click",this),setTimeout((function(){return r.handleEvent()}))}},{key:"disconnectedCallback",value:function(){this._throttledEvent=null,this.removeEventListener("mousedown",this),this.removeEventListener("wheel",this,g),this.removeEventListener("scroll",this._throttledEvent,g),window.removeEventListener("resize",this._throttledEvent,g),window.removeEventListener("load",this),document.removeEventListener("click",this)}},{key:"handleEvent",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(this.parentNode&&!t.defaultPrevented)if("wheel"===t.type)y.animate=!1;else if("mousedown"===t.type)E.call(this,t);else if("click"===t.type){var e=this.id&&h(t.target,'[for="'.concat(this.id,'"],[data-for="').concat(this.id,'"]'));e&&p(this,"scroll.click",{move:e.value})&&this.scroll(e.value)}else{var n={up:Math.floor(this.scrollTop),right:Math.floor(this.scrollRight),down:Math.floor(this.scrollBottom),left:Math.floor(this.scrollLeft)},o=n.left||n.right||n.up||n.down?"grab":"";m(this.id&&'[for="'.concat(this.id,'"],[data-for="').concat(this.id,'"]')).forEach((function(t){return t.disabled=!n[t.value]})),p(this,"scroll.change"),t.type||(this.style.cursor="-webkit-".concat(o),this.style.cursor=o)}}},{key:"scroll",value:function(e){var n=this,o=function(e,n){var o=e.items,r=n&&n.nodeType&&o.filter((function(t){return t.contains(n)}))[0];if(r)return{x:Math.max(0,r.offsetLeft-e.offsetLeft-(e.offsetWidth/2-r.offsetWidth/2)),y:Math.max(0,r.offsetTop-e.offsetTop-(e.offsetHeight/2-r.offsetHeight/2))};n&&n.nodeType&&!r&&console.warn(e,"cannot find child element ".concat(n," as a valid target for scrolling"));var i="object"===t(n)?n:{move:n};"number"!=typeof i.x&&(i.x=e.scrollLeft);"number"!=typeof i.y&&(i.y=e.scrollTop);if(i.move=v[i.move]){var s=i.move.x?"x":"y",c=i.move.x?"left":"top",l=e.getBoundingClientRect(),a=l[c]-e[i.move.x?"scrollLeft":"scrollTop"],u=l[c]+l[i.move.x?"width":"height"]*i.move[s];o.every((function(t){var e=t.getBoundingClientRect(),o=t.ownerDocument.defaultView.getComputedStyle(t)["margin-".concat(c)];return i[s]=e[c]-parseInt(o,10)-a,e[i.move.prop||n]<u}))}return{x:Math.max(0,Math.min(i.x,e.scrollWidth-e.clientWidth)),y:Math.max(0,Math.min(i.y,e.scrollHeight-e.clientHeight))}}(this,e),r=o.x,i=o.y,s=y.animate=Date.now().toString(36)+Math.random().toString(36).slice(2,5),c=this.friction,l=b?1:r-this.scrollLeft,a=b?1:i-this.scrollTop;return new Promise((function(t){!function e(){y.animate===s&&(Math.round(l)||Math.round(a))?(n.scrollLeft=r-Math.round(l*=c),n.scrollTop=i-Math.round(a*=c),w(e)):t(o)}()}))}},{key:"items",get:function(){return m(this.getAttribute("items")||this.children,this)},set:function(t){this.setAttribute("items",t||"")}},{key:"scrollRight",get:function(){return Math.max(0,this.scrollWidth-this.clientWidth-this.scrollLeft)}},{key:"scrollBottom",get:function(){return Math.max(0,this.scrollHeight-this.clientHeight-this.scrollTop)}},{key:"friction",get:function(){return Math.min(.99,this.getAttribute("friction"))||.8},set:function(t){this.setAttribute("friction",t)}}]),f}(l(HTMLElement))})),window.customElements.define("core-scroll",coreScroll);
 //# sourceMappingURL=core-scroll.min.js.map

core-scroll.test.cjs.js

@@ -1,2 +0,2 @@
-/*! @nrk/core-scroll v4.2.1 - Copyright (c) 2017-2021 NRK */
+/*! @nrk/core-scroll v4.3.0-0 - Copyright (c) 2017-2022 NRK */
 'use strict';
@@ -48,4 +48,97 @@
 
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+
+var IS_BROWSER = typeof window !== 'undefined';
+IS_BROWSER && /(android)/i.test(navigator.userAgent); // Bad, but needed
+
+IS_BROWSER && /iPad|iPhone|iPod/.test(String(navigator.platform));
+// Mock HTMLElement for Node
+
+if (!IS_BROWSER && !global.HTMLElement) {
+  global.HTMLElement = /*#__PURE__*/function () {
+    function _class() {
+      _classCallCheck(this, _class);
+    }
+
+    return _createClass(_class);
+  }();
+}
+/**
+* closest
+* @param {Element} element Element to traverse up from
+* @param {String} selector A selector to search for matching parents or element itself
+* @return {Element|null}  Element which is the closest ancestor matching selector
+*/
+
+(function () {
+  var proto = typeof window === 'undefined' ? {} : window.Element.prototype;
+  var match = proto.matches || proto.msMatchesSelector || proto.webkitMatchesSelector;
+  return proto.closest ? function (el, css) {
+    return el.closest(css);
+  } : function (el, css) {
+    // IE jumps to shadow SVG DOM on clicking an SVG defined by <use>.
+    // If so, jump back to <use> element and traverse real DOM
+    if (el.correspondingUseElement) el = el.correspondingUseElement;
+
+    for (; el; el = el.parentElement) {
+      if (match.call(el, css)) return el;
+    }
+
+    return null;
+  };
+})();
+
+(function () {
+  var has = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+  try {
+    window.addEventListener('test', null, {
+      get passive() {
+        has = {
+          passive: true
+        };
+      }
+
+    });
+  } catch (e) {}
+
+  return has;
+})(); // https://css-tricks.com/introduction-reduced-motion-media-query/
+
+
+IS_BROWSER && window.matchMedia && window.matchMedia('(prefers-reduced-motion)').matches;
+
 var coreScroll = fs__default["default"].readFileSync(path__default["default"].resolve(__dirname, 'core-scroll.min.js'), 'utf-8');
 var customElements = fs__default["default"].readFileSync(require.resolve('@webcomponents/custom-elements'), 'utf-8');
+
+var addOverflowStyling = function addOverflowStyling() {
+  var css = "\n  .content-container {\n    height: 200px;\n    width: 400px;\n    white-space: nowrap;\n    overflow: hidden;\n    border: 1px solid;\n  }\n  .content-item {\n    box-sizing: border-box;\n    white-space: normal;\n    display: inline-block;\n    vertical-align: top;\n    width: 30%;\n    height: 90px;\n    padding: 10px;\n    border: 1px solid;\n    margin: 10px;\n  }\n  ";
+  var style = document.createElement('style');
+  document.head.appendChild(style);
+  style.appendChild(document.createTextNode(css));
+};
+
 describe('core-scroll', function () {
@@ -69,2 +162,6 @@ beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
           case 6:
+            _context.next = 8;
+            return browser.executeScript(addOverflowStyling);
+
+          case 8:
           case "end":
@@ -76,23 +173,431 @@ return _context.stop();
   })));
-  it('sets up properties', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-    return regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            _context2.next = 2;
-            return browser.executeScript(function () {
-              document.body.innerHTML = "\n        <button data-for=\"scroller\" value=\"down\">Down</button>\n        <core-scroll id=\"scroller\">\n          <div>This is overflowing content</div>\n          <div>This is overflowing content</div>\n          <div>This is overflowing content</div>\n        </core-scroll>\n      ";
-            });
+  describe('Initialization', function () {
+    it('sets overflow: scroll', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return browser.executeScript(function () {
+                document.body.innerHTML = "\n        <button data-for=\"scroller\" value=\"down\">Down</button>\n        <core-scroll id=\"scroller\">\n          <div>This is overflowing content</div>\n          <div>This is overflowing content</div>\n          <div>This is overflowing content</div>\n        </core-scroll>\n      ";
+              });
 
-          case 2:
-            _context2.next = 4;
-            return expect($('core-scroll').getCssValue('overflow')).toEqual('scroll');
+            case 2:
+              _context2.next = 4;
+              return expect($('core-scroll').getCssValue('overflow')).toEqual('scroll');
 
-          case 4:
-          case "end":
-            return _context2.stop();
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
         }
-      }
-    }, _callee2);
-  })));
+      }, _callee2);
+    })));
+    it('has getters for scroll-distances', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return browser.executeScript(function () {
+                document.body.innerHTML = "\n        <button data-for=\"scroller\" value=\"down\">Down</button>\n        <div class=\"content-container\">\n          <core-scroll id=\"scroller\" friction=\"0.001\">\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\" id=\"fourth\">This is overflowing content</div>\n            <br>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <br>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n          </core-scroll>\n        </div>\n      ";
+              });
+
+            case 2:
+              _context3.next = 4;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollLeft;
+              })).toEqual(0);
+
+            case 4:
+              _context3.next = 6;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollRight;
+              })).toEqual(172);
+
+            case 6:
+              _context3.next = 8;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollTop;
+              })).toEqual(0);
+
+            case 8:
+              _context3.next = 10;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollBottom;
+              })).toEqual(130);
+
+            case 10:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    })));
+    it('has getter for items in scroller', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+      return regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.next = 2;
+              return browser.executeScript(function () {
+                document.body.innerHTML = "\n        <button data-for=\"scroller\" value=\"down\">Down</button>\n        <div class=\"content-container\">\n          <core-scroll id=\"scroller\" items=\"div\">\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <br>\n            <div class=\"content-item\">This is overflowing content</div>\n          </core-scroll>\n        </div>\n      ";
+              });
+
+            case 2:
+              _context4.next = 4;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').items.length;
+              })).toEqual(5);
+
+            case 4:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    })));
+    it('accepts list of custom elements to items-attribute', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+      return regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              _context5.next = 2;
+              return browser.executeScript(function () {
+                document.body.innerHTML = "\n        <button data-for=\"scroller\" value=\"down\">Down</button>\n        <core-scroll id=\"scroller\" items=\"div,span\">\n          <div>This is overflowing content</div>\n          <span>This is overflowing content</span>\n          <div>This is overflowing content</div>\n        </core-scroll>\n      ";
+              });
+
+            case 2:
+              _context5.next = 4;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').items.length;
+              })).toEqual(3);
+
+            case 4:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5);
+    })));
+    it('accepts float number to friction-attribute', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+      return regeneratorRuntime.wrap(function _callee6$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              _context6.next = 2;
+              return browser.executeScript(function () {
+                document.body.innerHTML = "\n        <button data-for=\"scroller\" value=\"down\">Down</button>\n        <core-scroll id=\"scroller\" friction=\"0.1\">\n          <div>This is overflowing content</div>\n          <div>This is overflowing content</div>\n          <div>This is overflowing content</div>\n        </core-scroll>\n      ";
+              });
+
+            case 2:
+              _context6.next = 4;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').friction;
+              })).toEqual(0.1);
+
+            case 4:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee6);
+    })));
+  });
+  describe('scroll-function', function () {
+    it('works with a cardinal direction', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
+      return regeneratorRuntime.wrap(function _callee8$(_context8) {
+        while (1) {
+          switch (_context8.prev = _context8.next) {
+            case 0:
+              _context8.next = 2;
+              return browser.executeScript(function () {
+                document.body.innerHTML = "\n        <button data-for=\"scroller\" value=\"down\">Down</button>\n        <div class=\"content-container\">\n          <core-scroll id=\"scroller\" friction=\"0.001\">\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\" id=\"fourth\">This is overflowing content</div>\n            <br>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <br>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n          </core-scroll>\n        </div>\n      ";
+              });
+
+            case 2:
+              _context8.next = 4;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollRight;
+              })).toEqual(172);
+
+            case 4:
+              _context8.next = 6;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollBottom;
+              })).toEqual(130);
+
+            case 6:
+              _context8.next = 8;
+              return browser.executeScript( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+                var coreScroll;
+                return regeneratorRuntime.wrap(function _callee7$(_context7) {
+                  while (1) {
+                    switch (_context7.prev = _context7.next) {
+                      case 0:
+                        /**
+                         * @type {CoreScroll}
+                         */
+                        coreScroll = document.getElementById('scroller');
+                        _context7.next = 3;
+                        return coreScroll.scroll('right');
+
+                      case 3:
+                      case "end":
+                        return _context7.stop();
+                    }
+                  }
+                }, _callee7);
+              })));
+
+            case 8:
+              _context8.next = 10;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollLeft;
+              })).toEqual(172);
+
+            case 10:
+              _context8.next = 12;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollRight;
+              })).toEqual(0);
+
+            case 12:
+              _context8.next = 14;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollBottom;
+              })).toEqual(130);
+
+            case 14:
+            case "end":
+              return _context8.stop();
+          }
+        }
+      }, _callee8);
+    })));
+    it('works with x,y coordinates', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
+      return regeneratorRuntime.wrap(function _callee10$(_context10) {
+        while (1) {
+          switch (_context10.prev = _context10.next) {
+            case 0:
+              _context10.next = 2;
+              return browser.executeScript(function () {
+                document.body.innerHTML = "\n        <button data-for=\"scroller\" value=\"down\">Down</button>\n        <div class=\"content-container\">\n          <core-scroll id=\"scroller\" friction=\"0.001\">\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\" id=\"fourth\">This is overflowing content</div>\n            <br>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <br>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n          </core-scroll>\n        </div>\n      ";
+              });
+
+            case 2:
+              _context10.next = 4;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollRight;
+              })).toEqual(172);
+
+            case 4:
+              _context10.next = 6;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollBottom;
+              })).toEqual(130);
+
+            case 6:
+              _context10.next = 8;
+              return browser.executeScript( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
+                var coreScroll;
+                return regeneratorRuntime.wrap(function _callee9$(_context9) {
+                  while (1) {
+                    switch (_context9.prev = _context9.next) {
+                      case 0:
+                        /**
+                         * @type {CoreScroll}
+                         */
+                        coreScroll = document.getElementById('scroller');
+                        _context9.next = 3;
+                        return coreScroll.scroll({
+                          x: 2,
+                          y: 30
+                        });
+
+                      case 3:
+                      case "end":
+                        return _context9.stop();
+                    }
+                  }
+                }, _callee9);
+              })));
+
+            case 8:
+              _context10.next = 10;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollLeft;
+              })).toEqual(2);
+
+            case 10:
+              _context10.next = 12;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollRight;
+              })).toEqual(170);
+
+            case 12:
+              _context10.next = 14;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollTop;
+              })).toEqual(30);
+
+            case 14:
+              _context10.next = 16;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollBottom;
+              })).toEqual(100);
+
+            case 16:
+            case "end":
+              return _context10.stop();
+          }
+        }
+      }, _callee10);
+    })));
+    it('works with an element', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
+      return regeneratorRuntime.wrap(function _callee12$(_context12) {
+        while (1) {
+          switch (_context12.prev = _context12.next) {
+            case 0:
+              _context12.next = 2;
+              return browser.executeScript(function () {
+                document.body.innerHTML = "\n        <button data-for=\"scroller\" value=\"down\">Down</button>\n        <div class=\"content-container\">\n          <core-scroll id=\"scroller\" friction=\"0.001\">\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <br>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\" id=\"fourth\">This is overflowing content</div>\n            <br>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n            <div class=\"content-item\">This is overflowing content</div>\n          </core-scroll>\n        </div>\n      ";
+              });
+
+            case 2:
+              _context12.next = 4;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollRight;
+              })).toEqual(172);
+
+            case 4:
+              _context12.next = 6;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollBottom;
+              })).toEqual(130);
+
+            case 6:
+              _context12.next = 8;
+              return browser.executeScript( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11() {
+                var coreScroll;
+                return regeneratorRuntime.wrap(function _callee11$(_context11) {
+                  while (1) {
+                    switch (_context11.prev = _context11.next) {
+                      case 0:
+                        /**
+                         * @type {CoreScroll}
+                         */
+                        coreScroll = document.getElementById('scroller');
+                        _context11.next = 3;
+                        return coreScroll.scroll(document.getElementById('fourth'));
+
+                      case 3:
+                      case "end":
+                        return _context11.stop();
+                    }
+                  }
+                }, _callee11);
+              })));
+
+            case 8:
+              _context12.next = 10;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollLeft;
+              })).toEqual(172);
+
+            case 10:
+              _context12.next = 12;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollRight;
+              })).toEqual(0);
+
+            case 12:
+              _context12.next = 14;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollTop;
+              })).toEqual(65);
+
+            case 14:
+              _context12.next = 16;
+              return expect(browser.executeScript(function () {
+                return document.getElementById('scroller').scrollBottom;
+              })).toEqual(65);
+
+            case 16:
+            case "end":
+              return _context12.stop();
+          }
+        }
+      }, _callee12);
+    })));
+    it('returns a promise when scrolling is complete', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
+      return regeneratorRuntime.wrap(function _callee14$(_context14) {
+        while (1) {
+          switch (_context14.prev = _context14.next) {
+            case 0:
+              _context14.next = 2;
+              return browser.executeScript(function () {
+                document.body.innerHTML = "\n        <button data-for=\"scroller\" value=\"down\">Down</button>\n        <div class=\"content-container\">\n          <core-scroll id=\"scroller\">\n            <div class=\"content-item\">This is overflowing content</div>\n            <br>\n            <div class=\"content-item\">This is overflowing content</div>\n            <br>\n            <div class=\"content-item\" id=\"targetEl\">This is overflowing content</div>\n          </core-scroll>\n        </div>\n      ";
+              });
+
+            case 2:
+              _context14.next = 4;
+              return browser.executeScript( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
+                var coreScroll;
+                return regeneratorRuntime.wrap(function _callee13$(_context13) {
+                  while (1) {
+                    switch (_context13.prev = _context13.next) {
+                      case 0:
+                        /**
+                         * @type {CoreScroll}
+                         */
+                        coreScroll = document.getElementById('scroller');
+                        _context13.next = 3;
+                        return coreScroll.scroll(document.getElementById('targetEl'));
+
+                      case 3:
+                        window.done = _context13.sent;
+
+                      case 4:
+                      case "end":
+                        return _context13.stop();
+                    }
+                  }
+                }, _callee13);
+              })));
+
+            case 4:
+              _context14.next = 6;
+              return expect(browser.executeScript(function () {
+                return window.done;
+              })).toEqual({
+                x: 0,
+                y: 175
+              });
+
+            case 6:
+              _context14.t0 = expect;
+              _context14.next = 9;
+              return browser.wait(function () {
+                return browser.executeScript(function () {
+                  return window.done;
+                });
+              });
+
+            case 9:
+              _context14.t1 = _context14.sent;
+              _context14.next = 12;
+              return (0, _context14.t0)(_context14.t1).toEqual({
+                x: 0,
+                y: 175
+              });
+
+            case 12:
+            case "end":
+              return _context14.stop();
+          }
+        }
+      }, _callee14);
+    })));
+  });
 });

core-scroll.test.js

 import fs from 'fs'
 import path from 'path'
+// eslint-disable-next-line no-unused-vars
+import CoreScroll from './core-scroll' // Only used for local @type
 
 const coreScroll = fs.readFileSync(path.resolve(__dirname, 'core-scroll.min.js'), 'utf-8')
 const customElements = fs.readFileSync(require.resolve('@webcomponents/custom-elements'), 'utf-8')
+const addOverflowStyling = () => {
+  const css = `
+  .content-container {
+    height: 200px;
+    width: 400px;
+    white-space: nowrap;
+    overflow: hidden;
+    border: 1px solid;
+  }
+  .content-item {
+    box-sizing: border-box;
+    white-space: normal;
+    display: inline-block;
+    vertical-align: top;
+    width: 30%;
+    height: 90px;
+    padding: 10px;
+    border: 1px solid;
+    margin: 10px;
+  }
+  `
+  const style = document.createElement('style')
+  document.head.appendChild(style)
+  style.appendChild(document.createTextNode(css))
+}
 
@@ -12,7 +39,9 @@ describe('core-scroll', () => {
     await browser.executeScript(coreScroll)
+    await browser.executeScript(addOverflowStyling)
   })
 
-  it('sets up properties', async () => {
-    await browser.executeScript(() => {
-      document.body.innerHTML = `
+  describe('Initialization', () => {
+    it('sets overflow: scroll', async () => {
+      await browser.executeScript(() => {
+        document.body.innerHTML = `
         <button data-for="scroller" value="down">Down</button>
@@ -25,5 +54,232 @@ <core-scroll id="scroller">
       `
+      })
+      await expect($('core-scroll').getCssValue('overflow')).toEqual('scroll')
     })
-    await expect($('core-scroll').getCssValue('overflow')).toEqual('scroll')
+
+    it('has getters for scroll-distances', async () => {
+      await browser.executeScript(() => {
+        document.body.innerHTML = `
+        <button data-for="scroller" value="down">Down</button>
+        <div class="content-container">
+          <core-scroll id="scroller" friction="0.001">
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item" id="fourth">This is overflowing content</div>
+            <br>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <br>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+          </core-scroll>
+        </div>
+      `
+      })
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollLeft)).toEqual(0)
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollRight)).toEqual(172)
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollTop)).toEqual(0)
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollBottom)).toEqual(130)
+    })
+
+    it('has getter for items in scroller', async () => {
+      await browser.executeScript(() => {
+        document.body.innerHTML = `
+        <button data-for="scroller" value="down">Down</button>
+        <div class="content-container">
+          <core-scroll id="scroller" items="div">
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <br>
+            <div class="content-item">This is overflowing content</div>
+          </core-scroll>
+        </div>
+      `
+      })
+      // Length is 5 (not 6) as only elements matching items-attribute are counted
+      await expect(browser.executeScript(() => document.getElementById('scroller').items.length)).toEqual(5)
+    })
+
+    it('accepts list of custom elements to items-attribute', async () => {
+      await browser.executeScript(() => {
+        document.body.innerHTML = `
+        <button data-for="scroller" value="down">Down</button>
+        <core-scroll id="scroller" items="div,span">
+          <div>This is overflowing content</div>
+          <span>This is overflowing content</span>
+          <div>This is overflowing content</div>
+        </core-scroll>
+      `
+      })
+      await expect(browser.executeScript(() => document.getElementById('scroller').items.length)).toEqual(3)
+    })
+
+    it('accepts float number to friction-attribute', async () => {
+      await browser.executeScript(() => {
+        document.body.innerHTML = `
+        <button data-for="scroller" value="down">Down</button>
+        <core-scroll id="scroller" friction="0.1">
+          <div>This is overflowing content</div>
+          <div>This is overflowing content</div>
+          <div>This is overflowing content</div>
+        </core-scroll>
+      `
+      })
+      await expect(browser.executeScript(() => document.getElementById('scroller').friction)).toEqual(0.1)
+    })
   })
+
+  describe('scroll-function', () => {
+    it('works with a cardinal direction', async () => {
+      await browser.executeScript(() => {
+        document.body.innerHTML = `
+        <button data-for="scroller" value="down">Down</button>
+        <div class="content-container">
+          <core-scroll id="scroller" friction="0.001">
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item" id="fourth">This is overflowing content</div>
+            <br>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <br>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+          </core-scroll>
+        </div>
+      `
+      })
+      // await browser.wait(ExpectedConditions.presenceOf($('core-datepicker')))
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollRight)).toEqual(172)
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollBottom)).toEqual(130)
+      await browser.executeScript(async () => {
+        /**
+         * @type {CoreScroll}
+         */
+        const coreScroll = document.getElementById('scroller')
+        await coreScroll.scroll('right')
+      })
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollLeft)).toEqual(172)
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollRight)).toEqual(0)
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollBottom)).toEqual(130)
+    })
+
+    it('works with x,y coordinates', async () => {
+      await browser.executeScript(() => {
+        document.body.innerHTML = `
+        <button data-for="scroller" value="down">Down</button>
+        <div class="content-container">
+          <core-scroll id="scroller" friction="0.001">
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item" id="fourth">This is overflowing content</div>
+            <br>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <br>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+          </core-scroll>
+        </div>
+      `
+      })
+      // await browser.wait(ExpectedConditions.presenceOf($('core-datepicker')))
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollRight)).toEqual(172)
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollBottom)).toEqual(130)
+      await browser.executeScript(async () => {
+        /**
+         * @type {CoreScroll}
+         */
+        const coreScroll = document.getElementById('scroller')
+        await coreScroll.scroll({ x: 2, y: 30 })
+      })
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollLeft)).toEqual(2)
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollRight)).toEqual(170)
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollTop)).toEqual(30)
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollBottom)).toEqual(100)
+    })
+
+    it('works with an element', async () => {
+      await browser.executeScript(() => {
+        document.body.innerHTML = `
+        <button data-for="scroller" value="down">Down</button>
+        <div class="content-container">
+          <core-scroll id="scroller" friction="0.001">
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <br>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item" id="fourth">This is overflowing content</div>
+            <br>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+            <div class="content-item">This is overflowing content</div>
+          </core-scroll>
+        </div>
+      `
+      })
+
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollRight)).toEqual(172)
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollBottom)).toEqual(130)
+      await browser.executeScript(async () => {
+        /**
+         * @type {CoreScroll}
+         */
+        const coreScroll = document.getElementById('scroller')
+        await coreScroll.scroll(document.getElementById('fourth'))
+      })
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollLeft)).toEqual(172)
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollRight)).toEqual(0)
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollTop)).toEqual(65)
+      await expect(browser.executeScript(() => document.getElementById('scroller').scrollBottom)).toEqual(65)
+    })
+
+    it('returns a promise when scrolling is complete', async () => {
+      await browser.executeScript(() => {
+        document.body.innerHTML = `
+        <button data-for="scroller" value="down">Down</button>
+        <div class="content-container">
+          <core-scroll id="scroller">
+            <div class="content-item">This is overflowing content</div>
+            <br>
+            <div class="content-item">This is overflowing content</div>
+            <br>
+            <div class="content-item" id="targetEl">This is overflowing content</div>
+          </core-scroll>
+        </div>
+      `
+      })
+      await browser.executeScript(async () => {
+        /**
+         * @type {CoreScroll}
+         */
+        const coreScroll = document.getElementById('scroller')
+        window.done = await coreScroll.scroll(document.getElementById('targetEl'))
+      })
+      // Because we await the scroll in the above invocation, both synchronous and async expects get the expected result.
+      await expect(browser.executeScript(() => window.done)).toEqual({ x: 0, y: 175 })
+      await expect(await browser.wait(() => browser.executeScript(() => window.done))).toEqual({ x: 0, y: 175 })
+    })
+  })
 })

jsx.js

@@ -1,2 +0,2 @@
-/*! @nrk/core-scroll v4.2.1 - Copyright (c) 2017-2021 NRK */
+/*! @nrk/core-scroll v4.3.0-0 - Copyright (c) 2017-2022 NRK */
 'use strict';
@@ -13,13 +13,7 @@
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
@@ -46,2 +40,5 @@
   if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
   return Constructor;
@@ -62,2 +59,5 @@ }
   });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
   if (superClass) _setPrototypeOf(subClass, superClass);
@@ -199,3 +199,3 @@ }
 
-    return _class;
+    return _createClass(_class);
   }();
@@ -319,2 +319,39 @@ }
 
+/**
+ * @typedef {{ x: number, y: number }} scrollCoords
+ */
+
+/**
+ * @typedef {object} scrollPoint
+ * @property {Number} x
+ * @property {Number} y
+ * @property {'top' | 'bottom'} prop
+ */
+
+/**
+ * @typedef {'up'| 'down' | 'left' | 'right'} scrollDirection
+ */
+
+/**
+ * @typedef {scrollDirection | scrollPoint | Element} scrollTarget
+ */
+
+/**
+ * @typedef {Object} dragType
+ * @property {String} animate Id of element to animate
+ * @property {Number} diffSumX
+ * @property {Number} diffSumY
+ * @property {Number} diffX
+ * @property {Number} diffY
+ * @property {Number} pageX
+ * @property {Number} pageY
+ * @property {Number} scrollX
+ * @property {Number} scrollY
+ * @property {HTMLElement} target
+ */
+
+/**
+ * @type {dragType}
+ */
+
 var DRAG = {};
@@ -414,2 +451,7 @@ var MOVE = {
     }
+    /**
+     *
+     * @param {Event} event
+     */
+
   }, {
@@ -448,2 +490,8 @@ key: "handleEvent",
     }
+    /**
+     * Scroll to Element, point or cardinal direction within core-scroll
+     * @param {scrollTarget} point Element, {x, y} pixel distance from top/left or cardinal direction ['up', 'down', 'left', 'right']
+     * @returns {Promise<scrollPoint>} scrollPoint
+     */
+
   }, {
@@ -454,6 +502,5 @@ key: "scroll",
 
-      var _parsePoint = parsePoint(this, point),
-          x = _parsePoint.x,
-          y = _parsePoint.y;
-
+      var endPoint = parsePoint(this, point);
+      var x = endPoint.x,
+          y = endPoint.y;
       var uuid = DRAG.animate = getUUID(); // Giving the animation an ID to workaround IE timeout issues
@@ -464,12 +511,15 @@
       var moveY = requestJumps ? 1 : y - this.scrollTop;
+      return new Promise(function (resolve) {
+        var move = function move() {
+          if (DRAG.animate === uuid && (Math.round(moveX) || Math.round(moveY))) {
+            _this2.scrollLeft = x - Math.round(moveX *= friction);
+            _this2.scrollTop = y - Math.round(moveY *= friction);
+            requestFrame(move);
+          } else {
+            resolve(endPoint);
+          }
+        };
 
-      var move = function move() {
-        if (DRAG.animate === uuid && (Math.round(moveX) || Math.round(moveY))) {
-          _this2.scrollLeft = x - Math.round(moveX *= friction);
-          _this2.scrollTop = y - Math.round(moveY *= friction);
-          requestFrame(move);
-        }
-      };
-
-      move();
+        move();
+      });
     }
@@ -564,4 +614,27 @@ }, {
 }
+/**
+ * Takes an element, coordinates or cardinal direction and returns x/y -coordinates
+ * @param {CoreScroll} self CoreScroll HTMLElement
+ * @param {scrollTarget} move
+ * @returns {scrollPoint}
+ */
 
+
 function parsePoint(self, move) {
+  var scrollItems = self.items; // Move is an element within CoreScroll
+
+  var toItem = move && move.nodeType && scrollItems.filter(function (item) {
+    return item.contains(move);
+  })[0];
+
+  if (toItem) {
+    // Target offset subtracting CoreScroll offset and half of offsetHeight/width to center
+    return {
+      x: Math.max(0, toItem.offsetLeft - self.offsetLeft - (self.offsetWidth / 2 - toItem.offsetWidth / 2)),
+      y: Math.max(0, toItem.offsetTop - self.offsetTop - (self.offsetHeight / 2 - toItem.offsetHeight / 2))
+    };
+  } else if (move && move.nodeType && !toItem) {
+    console.warn(self, "cannot find child element ".concat(move, " as a valid target for scrolling"));
+  }
+
   var point = _typeof(move) === 'object' ? move : {
@@ -579,3 +652,3 @@ move: move
     var edge = bounds[start] + bounds[point.move.x ? 'width' : 'height'] * point.move[axis];
-    self.items.every(function (el) {
+    scrollItems.every(function (el) {
       // Use .every as this loop stops on return false
@@ -596,3 +669,3 @@ var rect = el.getBoundingClientRect();
 
-var version = "4.2.1";
+var version = "4.3.0-0";
 
@@ -599,0 +672,0 @@ /**

package.json

@@ -5,3 +5,3 @@ {
   "author": "NRK <[e-mail]> (https://www.nrk.no/)",
-  "version": "4.2.1",
+  "version": "4.3.0-0",
   "license": "MIT",
@@ -8,0 +8,0 @@ "main": "core-scroll.cjs.js",

readme.md

@@ -195,5 +195,6 @@ # Core Scroll
 // Methods
-myScroll.scroll('left')               // Scroll in specified direction
-myScroll.scroll({x: 0, y: 10})        // Scroll to exact position
-myScroll.scroll({x: 0, move: 'down'}) // Scroll with position and direction
+myScroll.scroll('left')                             // Scroll in specified direction
+myScroll.scroll({x: 0, y: 10})                      // Scroll to exact position
+myScroll.scroll({x: 0, move: 'down'})               // Scroll with position and direction
+myScroll.scroll(document.getElementById('childId')) // Scroll to child element
 ```
@@ -200,0 +201,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

220269

increased by34.34%

Lines of code

2987

increased by47.58%

Number of lines in readme file

293

increased by0.34%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

6

increased by200%

No dependency changes