@livelybone/scroll-get - npm Package Compare versions

Comparing version 3.4.2 to 4.0.0

index.d.ts

@@ -1,6 +0,16 @@
-export function getRect(element: Element): DOMRect | ClientRect
+declare function getRect(el: Element): DOMRect
 
-export function posRelativeToPage(element: Element): { pageLeft: number, pageTop: number }
+declare function posRelativeToPage(
+  el: HTMLElement,
+): {
+  pageLeft: number
+  pageTop: number
+}
 
-export function posRelativeToClient(element: Element): { clientLeft: number, clientTop: number }
+declare function posRelativeToClient(
+  el: Element,
+): {
+  clientLeft: number
+  clientTop: number
+}
 
@@ -14,2 +24,43 @@ /**
  * */
-export function getNativeScrollbarWidth(el?: Window | Element): { x: number, y: number }
+declare function getNativeScrollbarWidth(
+  el: Window | HTMLElement,
+): {
+  x: number
+  y: number
+}
+
+/**
+ * This affects the performance of the animation by modifying the rate
+ *
+ * rate >= 0 && rate <= 1
+ * */
+declare type RateFactor = (rate: number) => number
+
+declare function animation(
+  time: number,
+  cb: (rate: number) => void,
+  rateFactor?: RateFactor,
+): Promise<unknown>
+
+/**
+ * @param el                The target element you want scroll to
+ * @param [time]            Interval
+ * @param [affectParent]    Whether affect the parentElement, when it is true the parentElement will also scroll to the visible area
+ * @param [rateFactor]      RateFactor
+ * */
+declare function scrollToElement(
+  el: HTMLElement,
+  time?: number,
+  affectParent?: boolean,
+  rateFactor?: RateFactor,
+): Promise<void>
+
+export {
+  RateFactor,
+  animation,
+  getNativeScrollbarWidth,
+  getRect,
+  posRelativeToClient,
+  posRelativeToPage,
+  scrollToElement,
+}

lib/es/index.js

 /**
  * Bundle of @livelybone/scroll-get
- * Generated: 2019-07-28
- * Version: 3.4.2
+ * Generated: 2019-11-20
+ * Version: 4.0.0
  * License: MIT
- * Author: livelybone([e-mail])
+ * Author: [e-mail]
  */
 
 function getRect(el) {
-  return el.getBoundingClientRect()
+  return el.getBoundingClientRect();
 }
+function posRelativeToPage(el) {
+  var o = {
+    pageLeft: 0,
+    pageTop: 0
+  };
+  var $el = el;
 
-function posRelativeToPage(el) {
-  var o = { pageLeft: 0, pageTop: 0 };
-  while (el) {
-    o.pageLeft += el.offsetLeft;
-    o.pageTop += el.offsetTop;
-    el = el.offsetParent;
+  while ($el) {
+    o.pageLeft += $el.offsetLeft;
+    o.pageTop += $el.offsetTop;
+    $el = $el.offsetParent;
   }
-  return o
+
+  return o;
 }
-
 function posRelativeToClient(el) {
   var rect = getRect(el);
-  return { clientLeft: rect.left, clientTop: rect.top }
+  return {
+    clientLeft: rect.left,
+    clientTop: rect.top
+  };
 }
+/**
+ * @desc if el === window || el === undefined, return the global scrollbar width info
+ *       if el is an Element, return the scrollbar width info of the Element
+ *
+ * x: width of horizontal scrollbar
+ * y: width of vertical scrollbar
+ * */
 
 function getNativeScrollbarWidth(el) {
-  el = el || window;
-  var isWindow = el === window;
+  var $el = el || window;
+  var isWindow = $el === window;
+
   try {
     var info = isWindow ? window.nativeScrollbarWidth : null;
-    if (!(
-      info
-      && typeof info.y === 'number'
-      && typeof info.x === 'number'
-    )) {
+
+    if (!(info && typeof info.y === 'number' && typeof info.x === 'number')) {
       // If nativeScrollbarWidth is illegal, reset it
-      var wrapper = isWindow ? document.createElement('div') : el;
+      var wrapper = isWindow ? document.createElement('div') : $el;
+
       if (isWindow) {
@@ -44,7 +57,10 @@ wrapper.setAttribute('style', 'position:fixed;top:0;left:0;opacity:0;pointer-events:none;width:200px;height:200px;overflow:scroll');
       }
+
       info = {
         y: wrapper.offsetWidth - wrapper.clientWidth,
-        x: wrapper.offsetHeight - wrapper.clientHeight,
+        x: wrapper.offsetHeight - wrapper.clientHeight
       };
+
       if (isWindow) {
+        ;
         window.nativeScrollbarWidth = info;
@@ -54,9 +70,103 @@ document.body.removeChild(wrapper);
     }
-    return info
+
+    return info;
   } catch (e) {
     // For server render
-    return { y: 17, x: 17 }
+    return {
+      y: 17,
+      x: 17
+    };
   }
 }
+/**
+ * This affects the performance of the animation by modifying the rate
+ *
+ * rate >= 0 && rate <= 1
+ * */
 
-export { getNativeScrollbarWidth, getRect, posRelativeToClient, posRelativeToPage };
+function defaultRateFactor(rate) {
+  return rate + (1 - rate) * rate;
+}
+
+function animation(time, cb, rateFactor) {
+  var $rateFactor = rateFactor || defaultRateFactor;
+
+  var run = function run($cb) {
+    window.requestAnimationFrame(function () {
+      if ($cb()) run($cb);
+    });
+  };
+
+  return new Promise(function (res) {
+    var start = Date.now();
+    run(function () {
+      var rate = $rateFactor(Math.min(1, (Date.now() - start) / time));
+      cb(rate);
+
+      if (rate >= 1) {
+        res();
+        return false;
+      }
+
+      return true;
+    });
+  });
+}
+/**
+ * @param el                The target element you want scroll to
+ * @param [time]            Interval
+ * @param [affectParent]    Whether affect the parentElement, when it is true the parentElement will also scroll to the visible area
+ * @param [rateFactor]      RateFactor
+ * */
+
+function scrollToElement(el) {
+  var time = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
+  var affectParent = arguments.length > 2 ? arguments[2] : undefined;
+  var rateFactor = arguments.length > 3 ? arguments[3] : undefined;
+
+  var getMaxScrollTop = function getMaxScrollTop($el) {
+    return $el.scrollHeight - $el.clientHeight;
+  };
+
+  if (el.parentElement) {
+    var parentElement = el.parentElement;
+
+    var parentScroll = function parentScroll() {
+      return scrollToElement(parentElement, time);
+    };
+
+    var maxScrollTop;
+    var scrollTop;
+
+    if (parentElement === document.body) {
+      maxScrollTop = getMaxScrollTop(document.body);
+      scrollTop = document.body.scrollTop;
+
+      if (!maxScrollTop) {
+        maxScrollTop = getMaxScrollTop(document.documentElement);
+        parentElement = document.documentElement;
+        scrollTop = document.documentElement.scrollTop;
+      }
+    } else {
+      maxScrollTop = getMaxScrollTop(parentElement);
+      scrollTop = parentElement.scrollTop;
+    }
+
+    var offsetTop = getRect(el).top - getRect(parentElement).top;
+    var delta = Math.min(offsetTop, maxScrollTop);
+
+    if (delta && offsetTop && maxScrollTop > 0) {
+      return animation(time, function (rate) {
+        parentElement.scrollTop = scrollTop + delta * rate;
+      }, rateFactor).then(affectParent ? parentScroll : null);
+    }
+
+    if (affectParent) {
+      return parentScroll();
+    }
+  }
+
+  return Promise.resolve();
+}
+
+export { animation, getNativeScrollbarWidth, getRect, posRelativeToClient, posRelativeToPage, scrollToElement };

lib/umd/index.js

 /**
  * Bundle of @livelybone/scroll-get
- * Generated: 2019-07-28
- * Version: 3.4.2
+ * Generated: 2019-11-20
+ * Version: 4.0.0
  * License: MIT
- * Author: livelybone([e-mail])
+ * Author: [e-mail]
  */
 
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).ScrollGet={})}(this,function(e){"use strict";function o(e){return e.getBoundingClientRect()}e.getNativeScrollbarWidth=function(e){var t=(e=e||window)===window;try{var o=t?window.nativeScrollbarWidth:null;if(!o||"number"!=typeof o.y||"number"!=typeof o.x){var n=t?document.createElement("div"):e;t&&(n.setAttribute("style","position:fixed;top:0;left:0;opacity:0;pointer-events:none;width:200px;height:200px;overflow:scroll"),document.body.appendChild(n)),o={y:n.offsetWidth-n.clientWidth,x:n.offsetHeight-n.clientHeight},t&&(window.nativeScrollbarWidth=o,document.body.removeChild(n))}return o}catch(e){return{y:17,x:17}}},e.getRect=o,e.posRelativeToClient=function(e){var t=o(e);return{clientLeft:t.left,clientTop:t.top}},e.posRelativeToPage=function(e){for(var t={pageLeft:0,pageTop:0};e;)t.pageLeft+=e.offsetLeft,t.pageTop+=e.offsetTop,e=e.offsetParent;return t},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).ScrollGet={})}(this,function(e){"use strict";function p(e){return e.getBoundingClientRect()}function t(e){return e+(1-e)*e}function m(o,i,e){var r=e||t;return new Promise(function(t){var n=Date.now();!function e(t){window.requestAnimationFrame(function(){t()&&e(t)})}(function(){var e=r(Math.min(1,(Date.now()-n)/o));return i(e),!(1<=e)||(t(),!1)})})}e.animation=m,e.getNativeScrollbarWidth=function(e){var t=e||window,n=t===window;try{var o=n?window.nativeScrollbarWidth:null;if(!o||"number"!=typeof o.y||"number"!=typeof o.x){var i=n?document.createElement("div"):t;n&&(i.setAttribute("style","position:fixed;top:0;left:0;opacity:0;pointer-events:none;width:200px;height:200px;overflow:scroll"),document.body.appendChild(i)),o={y:i.offsetWidth-i.clientWidth,x:i.offsetHeight-i.clientHeight},n&&(window.nativeScrollbarWidth=o,document.body.removeChild(i))}return o}catch(e){return{y:17,x:17}}},e.getRect=p,e.posRelativeToClient=function(e){var t=p(e);return{clientLeft:t.left,clientTop:t.top}},e.posRelativeToPage=function(e){for(var t={pageLeft:0,pageTop:0},n=e;n;)t.pageLeft+=n.offsetLeft,t.pageTop+=n.offsetTop,n=n.offsetParent;return t},e.scrollToElement=function e(t){function n(e){return e.scrollHeight-e.clientHeight}var o=1<arguments.length&&void 0!==arguments[1]?arguments[1]:300,i=2<arguments.length?arguments[2]:void 0,r=3<arguments.length?arguments[3]:void 0;if(t.parentElement){var l,c,u=t.parentElement,f=function(){return e(u,o)};u===document.body?(l=n(document.body),c=document.body.scrollTop,l||(l=n(document.documentElement),u=document.documentElement,c=document.documentElement.scrollTop)):(l=n(u),c=u.scrollTop);var d=p(t).top-p(u).top,a=Math.min(d,l);if(a&&d&&0<l)return m(o,function(e){u.scrollTop=c+a*e},r).then(i?f:null);if(i)return f()}return Promise.resolve()},Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "@livelybone/scroll-get",
-  "version": "3.4.2",
+  "version": "4.0.0",
   "description": "Some useful tool of browser scroll, such as tool for calculating position relative to page/client, tool for getting the native scrollbar width...",
@@ -10,6 +10,9 @@ "main": "./lib/umd/index.js",
   "scripts": {
-    "build": "rimraf ./lib && cross-env NODE_ENV=production rollup -c",
+    "build:js": "cross-env NODE_ENV=production rollup -c",
+    "build:dts": "cross-env NODE_ENV=production BUILD_ENV=dts rollup -c",
+    "dev": "rimraf ./lib && cross-env BUILD_ENV=watch node watch.js",
+    "build": "rimraf ./lib && npm run build:js",
     "build:test": "rimraf ./test-lib && cross-env NODE_ENV=test rollup -c rollup.config.test.js --sourcemap",
-    "eslint": "eslint ./src --fix",
-    "test": "npm run build:test && cross-env NODE_ENV=test mocha -- ./test",
+    "eslint": "eslint ./ --ext .ts,.js --fix",
+    "test": "npm run build:test && cross-env NODE_ENV=test istanbul cover node_modules/mocha/bin/_mocha -- ./test",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
@@ -23,10 +26,10 @@ "commit": "git-cz"
   "keywords": [
-    "scrollbar width",
-    "scrollbar info",
     "clientLeft",
     "clientTop",
     "pageLeft",
-    "pageTop"
+    "pageTop",
+    "scrollbar width",
+    "scrollbar info"
   ],
-  "author": "livelybone([e-mail])",
+  "author": "[e-mail]",
   "license": "MIT",
@@ -36,13 +39,41 @@ "bugs": {
   },
-  "homepage": "https://livelybone.github.io/tool/scroll-get/",
+  "homepage": "https://github.com/livelybone/scroll-get#readme",
   "devDependencies": {
+    "@babel/core": "^7.5.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-transform-runtime": "^7.5.0",
+    "@babel/preset-env": "^7.5.0",
+    "@babel/preset-typescript": "^7.3.3",
+    "@babel/runtime": "^7.5.1",
+    "@livelybone/singleton": "^1.1.1",
+    "@typescript-eslint/eslint-plugin": "^1.12.0",
+    "@typescript-eslint/parser": "^1.11.0",
+    "babel-plugin-istanbul": "^5.1.4",
+    "chai": "^4.2.0",
+    "chalk": "^2.4.2",
+    "chokidar": "^3.0.2",
     "commitizen": "^3.0.7",
     "conventional-changelog-cli": "^2.0.12",
     "cross-env": "^5.2.0",
+    "cross-spawn": "^6.0.5",
     "cz-conventional-changelog": "^2.1.0",
     "eslint": "^5.3.0",
+    "eslint-config-airbnb-base": "^13.0.0",
+    "eslint-config-prettier": "^6.0.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-prettier": "^3.1.0",
+    "express": "^4.17.1",
+    "husky": "^3.0.0",
+    "istanbul": "^1.1.0-alpha.1",
+    "lint-staged": "^9.1.0",
     "mocha": "^5.2.0",
-    "rollup": "^1.16.7",
-    "rollup-plugin-license": "^0.9.0",
-    "rollup-plugin-uglify": "^6.0.2"
+    "prettier": "^1.18.2",
+    "rollup": "^1.7.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^9.2.1",
+    "rollup-plugin-dts": "^1.1.5",
+    "rollup-plugin-license": "^0.8.1",
+    "rollup-plugin-node-resolve": "^4.0.1",
+    "rollup-plugin-uglify": "^6.0.2",
+    "typescript": "^3.5.2"
   },
@@ -53,3 +84,18 @@ "config": {
     }
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "**/*.{js,ts}": [
+      "eslint --fix",
+      "git update-index --again"
+    ],
+    "**/*.scss": [
+      "prettier --write",
+      "git update-index --again"
+    ]
   }
 }

README.md

@@ -10,4 +10,6 @@ # @livelybone/scroll-get
 
-A module for position relative to page or client
+[中文文档](./README-CN.md)
 
+Some useful tool of browser scroll, such as tool for calculating position relative to page/client, tool for getting the native scrollbar width...
+
 ## repository
@@ -17,4 +19,13 @@ https://github.com/livelybone/scroll-get.git
 ## Demo
-https://livelybone.github.io/tool/scroll-get/
+https://github.com/livelybone/scroll-get#readme
 
+## Run Example
+Your can see the usage by run the example of the module, here is the step:
+
+1. Clone the library `git clone https://github.com/livelybone/scroll-get.git`
+2. Go to the directory `cd your-module-directory`
+3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
+4. Open service `npm run dev`
+5. See the example(usually is `http://127.0.0.1/examples/test.html`) in your browser
+
 ## Installation
@@ -25,5 +36,8 @@ ```bash
 
-## Global name
+## Global name - The variable the module exported in `umd` bundle
 `ScrollGet`
 
+## Interface
+See what method or params you can use in [index.d.ts](./index.d.ts)
+
 ## Usage
@@ -35,3 +49,5 @@ ```js
   posRelativeToClient, 
-  getNativeScrollbarWidth
+  getNativeScrollbarWidth,
+  animation,
+  scrollToElement,
 } from '@livleybone/scroll-get'
@@ -58,1 +74,7 @@
 ``` 
+
+Use in html, see what your can use in [CDN: unpkg](https://unpkg.com/@livelybone/scroll-get/lib/umd/)
+```html
+<-- use what you want -->
+<script src="https://unpkg.com/@livelybone/scroll-get/lib/umd/<--module-->.js"></script>
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17350

increased by120.09%

Number of package files

7

increased by16.67%

Lines of code

215

increased by175.64%

Number of lines in readme file

76

increased by40.74%

Worsened metrics

Dev dependency count

37

increased by311.11%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes