vanilla-back-to-top - npm Package Compare versions

Comparing version 4.1.0 to 5.0.0

dist/vanilla-back-to-top.min.js

@@ -1,1 +0,1 @@
-function addBackToTop(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.id,o=void 0===t?"back-to-top":t,n=e.scrollContainer,c=void 0===n?document.documentElement:n,i=e.showWhenScrollTopIs,a=void 0===i?300:i,d=e.onClickScrollTo,r=void 0===d?0:d,l=e.innerElement,s=void 0===l?document.createTextNode("Up"):l,p=e.size,m=void 0===p?50:p,u=e.fontSize,b=void 0===u?14:u,x=e.cornerOffset,f=void 0===x?20:x,v=e.backgroundColor,k=void 0===v?"#000":v,h=e.textColor,y=void 0===h?"#fff":h,w=e.zIndex,g=void 0===w?1:w;!function(){var e="#".concat(o,"{bottom:").concat(f,"px;opacity:1;position:fixed;right:").concat(f,"px;-webkit-transition:bottom .2s,opacity .2s;-moz-transition:bottom .2s,opacity .2s;transition:bottom .2s,opacity .2s;z-index:").concat(g,"}#").concat(o,".hidden{bottom:-").concat(m,"px;opacity:0}#").concat(o," a{-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;background:").concat(k,";-webkit-border-radius:").concat(m,"px;-moz-border-radius:").concat(m,"px;border-radius:").concat(m,"px;color:").concat(y,";cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;font-size:").concat(b,"px;height:").concat(m,"px;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;width:").concat(m,"px}"),t=document.createElement("style");t.appendChild(document.createTextNode(e)),document.head.insertAdjacentElement("afterbegin",t)}();var z=function(){var e=document.createElement("div");e.id=o,e.className="hidden";var t=document.createElement("a");return t.addEventListener("click",function(e){e.preventDefault(),c.scrollTop=r}),t.appendChild(s),e.appendChild(t),document.body.appendChild(e),e}(),E=!0;(c===document.documentElement?window:c).addEventListener("scroll",C),C();function C(){c.scrollTop>=a?function(){if(!E)return;z.className="",E=!1}():function(){if(E)return;z.className="hidden",E=!0}()}}
+function addBackToTop(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=o.id,n=void 0===t?"back-to-top":t,e=o.scrollContainer,c=void 0===e?document.documentElement:e,a=o.showWhenScrollTopIs,i=void 0===a?1:a,d=o.onClickScrollTo,r=void 0===d?0:d,l=o.scrollDuration,p=void 0===l?100:l,s=o.innerElement,m=void 0===s?document.createTextNode("^"):s,u=o.size,f=void 0===u?56:u,x=o.cornerOffset,h=void 0===x?20:x,v=o.backgroundColor,b=void 0===v?"#000":v,g=o.textColor,w=void 0===g?"#fff":g,y=o.zIndex,k=void 0===y?1:y;!function(){var o=Math.round(.64*f),t=Math.round(1.28*f),e="#".concat(n,"{bottom:").concat(h,"px;opacity:1;position:fixed;right:").concat(h,"px;-webkit-transition:bottom .2s,opacity .2s;-moz-transition:bottom .2s,opacity .2s;transition:bottom .2s,opacity .2s;z-index:").concat(k,"}#").concat(n,".hidden{bottom:-").concat(f,"px;opacity:0}#").concat(n," a{background:").concat(b,";-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-webkit-border-radius:").concat(f,"px;-moz-border-radius:").concat(f,"px;border-radius:").concat(f,"px;color:").concat(w,";cursor:pointer;display:block;font-family:monospace;font-size:").concat(o,"px;height:").concat(f,"px;line-height:").concat(t,"px;text-align:center;text-decoration:none;vertical-align:middle;width:").concat(f,"px}"),c=document.createElement("style");c.appendChild(document.createTextNode(e)),document.head.insertAdjacentElement("afterbegin",c)}();var T=function(){var o=document.createElement("div");o.id=n,o.className="hidden";var t=document.createElement("a");return t.addEventListener("click",function(o){o.preventDefault(),function(){(p<=0||"undefined"==typeof performance||"undefined"==typeof requestAnimationFrame)&&(c.scrollTop=r);var o=performance.now(),t=c.scrollTop,n=t-r;requestAnimationFrame(function e(a){var i=a-o,d=Math.min(i/p,1);c.scrollTop=t-Math.round(d*n),d<1&&requestAnimationFrame(e)})}()}),t.appendChild(m),o.appendChild(t),document.body.appendChild(o),o}(),E=!0;(c===document.documentElement?window:c).addEventListener("scroll",C),C();function C(){c.scrollTop>=i?function(){if(!E)return;T.className="",E=!1}():function(){if(E)return;T.className="hidden",E=!0}()}}

dist/vanilla-back-to-top.umd.min.js

@@ -1,1 +0,1 @@
-function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"string"!=typeof exports.nodeName?t(exports):t(e.commonJsStrict={})}("undefined"!=typeof self?self:this,function(e){e.addBackToTop=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.id,o=void 0===t?"back-to-top":t,n=e.scrollContainer,c=void 0===n?document.documentElement:n,i=e.showWhenScrollTopIs,d=void 0===i?300:i,r=e.onClickScrollTo,a=void 0===r?0:r,l=e.innerElement,p=void 0===l?document.createTextNode("Up"):l,s=e.size,f=void 0===s?50:s,m=e.fontSize,u=void 0===m?14:m,b=e.cornerOffset,y=void 0===b?20:b,x=e.backgroundColor,v=void 0===x?"#000":x,k=e.textColor,h=void 0===k?"#fff":k,g=e.zIndex,w=void 0===g?1:g;!function(){var e="#".concat(o,"{bottom:").concat(y,"px;opacity:1;position:fixed;right:").concat(y,"px;-webkit-transition:bottom .2s,opacity .2s;-moz-transition:bottom .2s,opacity .2s;transition:bottom .2s,opacity .2s;z-index:").concat(w,"}#").concat(o,".hidden{bottom:-").concat(f,"px;opacity:0}#").concat(o," a{-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;background:").concat(v,";-webkit-border-radius:").concat(f,"px;-moz-border-radius:").concat(f,"px;border-radius:").concat(f,"px;color:").concat(h,";cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;font-size:").concat(u,"px;height:").concat(f,"px;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;width:").concat(f,"px}"),t=document.createElement("style");t.appendChild(document.createTextNode(e)),document.head.insertAdjacentElement("afterbegin",t)}();var z=function(){var e=document.createElement("div");e.id=o,e.className="hidden";var t=document.createElement("a");return t.addEventListener("click",function(e){e.preventDefault(),c.scrollTop=a}),t.appendChild(p),e.appendChild(t),document.body.appendChild(e),e}(),E=!0;(c===document.documentElement?window:c).addEventListener("scroll",S),S();function S(){c.scrollTop>=d?function(){if(!E)return;z.className="",E=!1}():function(){if(E)return;z.className="hidden",E=!0}()}}});
+function _typeof(o){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o})(o)}!function(o,t){"function"==typeof define&&define.amd?define(["exports"],t):"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"string"!=typeof exports.nodeName?t(exports):t(o.commonJsStrict={})}("undefined"!=typeof self?self:this,function(o){o.addBackToTop=function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=o.id,e=void 0===t?"back-to-top":t,n=o.scrollContainer,i=void 0===n?document.documentElement:n,c=o.showWhenScrollTopIs,r=void 0===c?1:c,a=o.onClickScrollTo,d=void 0===a?0:a,p=o.scrollDuration,l=void 0===p?100:p,s=o.innerElement,f=void 0===s?document.createTextNode("^"):s,u=o.size,m=void 0===u?56:u,x=o.cornerOffset,b=void 0===x?20:x,y=o.backgroundColor,h=void 0===y?"#000":y,v=o.textColor,g=void 0===v?"#fff":v,w=o.zIndex,k=void 0===w?1:w;!function(){var o=Math.round(.64*m),t=Math.round(1.28*m),n="#".concat(e,"{bottom:").concat(b,"px;opacity:1;position:fixed;right:").concat(b,"px;-webkit-transition:bottom .2s,opacity .2s;-moz-transition:bottom .2s,opacity .2s;transition:bottom .2s,opacity .2s;z-index:").concat(k,"}#").concat(e,".hidden{bottom:-").concat(m,"px;opacity:0}#").concat(e," a{background:").concat(h,";-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-webkit-border-radius:").concat(m,"px;-moz-border-radius:").concat(m,"px;border-radius:").concat(m,"px;color:").concat(g,";cursor:pointer;display:block;font-family:monospace;font-size:").concat(o,"px;height:").concat(m,"px;line-height:").concat(t,"px;text-align:center;text-decoration:none;vertical-align:middle;width:").concat(m,"px}"),i=document.createElement("style");i.appendChild(document.createTextNode(n)),document.head.insertAdjacentElement("afterbegin",i)}();var T=function(){var o=document.createElement("div");o.id=e,o.className="hidden";var t=document.createElement("a");return t.addEventListener("click",function(o){o.preventDefault(),function(){(l<=0||"undefined"==typeof performance||"undefined"==typeof requestAnimationFrame)&&(i.scrollTop=d);var o=performance.now(),t=i.scrollTop,e=t-d;requestAnimationFrame(function n(c){var r=c-o,a=Math.min(r/l,1);i.scrollTop=t-Math.round(a*e),a<1&&requestAnimationFrame(n)})}()}),t.appendChild(f),o.appendChild(t),document.body.appendChild(o),o}(),E=!0;(i===document.documentElement?window:i).addEventListener("scroll",C),C();function C(){i.scrollTop>=r?function(){if(!E)return;T.className="",E=!1}():function(){if(E)return;T.className="hidden",E=!0}()}}});

package.json

 {
   "name": "vanilla-back-to-top",
-  "version": "4.1.0",
-  "description": "Configurable zero dependency Back To Top button",
-  "main": "dist/vanilla-back-to-top.umd.min.js",
+  "version": "5.0.0",
+  "description": "Tiny and configurable Back To Top button with no dependencies",
+  "main": "dist/vanilla-back-to-top.umd.js",
   "repository": {
@@ -7,0 +7,0 @@ "type": "git",

README.md

@@ -5,19 +5,21 @@ # Vanilla Back To Top
 
-Works great with frameworks ([React](https://reactjs.org/), [Angular](https://angular.io/), [Vue](https://vuejs.org/) etc) and without them, for example, on pre-rendered static websites like [Jekyll](https://jekyllrb.com), [Hugo](http://gohugo.io/) or [Hexo](https://hexo.io/)
+Works great **with** frameworks - [React](https://reactjs.org/), [Angular](https://angular.io/), [Vue](https://vuejs.org/) etc, and **without** them, e.g., on pre-rendered static websites like [Jekyll](https://jekyllrb.com), [Hugo](http://gohugo.io/) or [Hexo](https://hexo.io/)
 
-<img src="http://i.pi.gy/DoaQa.gif" width="300px"/>
+<img src="https://i.pi.gy/Vab3n.gif" width="300px"/>
 
+Just the button: <img src="https://i.pi.gy/xkg2d.gif" width="98px"/>
+
 ## How to use
 
-### Global standalone
+### Global declaration
 
-This is the simplest way to use it, works great with static or non-SPA websites.
+This is the simplest way to use it, works great with classic non modular JavaScript.
 
 Add this to your HTML:
 ```html
-<script src="https://unpkg.com/vanilla-back-to-top@4.1.0/dist/vanilla-back-to-top.min.js"></script>
+<script src="https://unpkg.com/vanilla-back-to-top@5.0.0/dist/vanilla-back-to-top.min.js"></script>
 <script>addBackToTop()</script>
 ```
 
-If you don't want to rely on [unpkg.com](https://unpkg.com/#/about), save [the file](https://unpkg.com/vanilla-back-to-top@4.1.0/dist/vanilla-back-to-top.min.js) to your project and serve it from your server:
+If you don't want to rely on [unpkg.com](https://unpkg.com/#/about), save [the file](https://unpkg.com/vanilla-back-to-top@5.0.0/dist/vanilla-back-to-top.min.js) to your project and serve it from your server:
 ```html
@@ -30,3 +32,3 @@ <script src="/assets/vanilla-back-to-top.min.js"></script>
 
-This is how you would use it with single-page apps on React, Angular, Vue etc, or generally with any asset pipeline.
+This is how you would use it with a modular app, e.g., on [React](https://reactjs.org/), [Angular](https://angular.io/), [Vue](https://vuejs.org/) etc
 
@@ -46,3 +48,3 @@ Install the package with npm:
 
-You can customise CSS of the button using `#back-to-top` selector:
+You can change the looks of the button using `#back-to-top` selector in your CSS:
 ```css
@@ -61,4 +63,30 @@ #back-to-top a {
 
-## More options
+## Examples
 
+- Change colors: <img src="https://i.pi.gy/GYQNv.png" width="65" />
+```js
+addBackToTop({
+  backgroundColor: 'pink',
+  textColor: '#ad19b7'
+})
+```
+
+- Change size: <img src="https://i.pi.gy/drmp0.png" width="48" />
+```js
+addBackToTop({
+  size: 40
+})
+```
+
+- Use [SVG icon](https://material.io/icons/#ic_keyboard_arrow_up) instead of `^` character: <img src="https://i.pi.gy/O1Ggw.png" width="66" />
+```js
+var backToTopSvg = document.createElement('span');
+backToTopSvg.innerHTML = '<svg height="100%" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" focusable="false"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="white"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>';
+addBackToTop({
+  innerElement: backToTopSvg
+});
+```
+
+## All options
+
 `addBackToTop` function can be called with many options:
@@ -68,7 +96,7 @@ ```js
   id: 'back-to-top',
-  showWhenScrollTopIs: 300,
+  showWhenScrollTopIs: 1,
   onClickScrollTo: 0,
-  innerElement: document.createTextNode('Up'),
-  size: 50,
-  fontSize: 14,
+  scrollDuration: 100,
+  innerElement: document.createTextNode('^'),
+  size: 56,
   cornerOffset: 20,
@@ -88,5 +116,5 @@ backgroundColor: '#000',
 |`onClickScrollTo`|Where to scroll to, in pixels, when the button gets clicked, `0` means the very top|
+|`scrollDuration`|How long, in milliseconds, scrolling to top should take. Set to `0` to make scrolling instant|
 |`innerElement`|DOM element to put inside the button; with jQuery you can put something like this: `$('<svg>...</svg>').get(0)`|
 |`size`|Width and height of the button in pixels|
-|`fontSize`|Font size of the text inside the button|
 |`cornerOffset`|Right and bottom offset of the button relative to viewport|
@@ -93,0 +121,0 @@ |`backgroundColor`|Background color of the button|

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

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

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16663

increased by70.52%

Number of package files

5

increased by25%

Lines of code

104

increased byInfinity%

Number of lines in readme file

121

increased by30.11%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes