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

Comparing version 4.0.4 to 4.1.0

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

@@ -1,1 +0,1 @@
-function addBackToTop(e){var 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 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}()}}

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(e){var t=e.id,o=void 0===t?"back-to-top":t,n=e.scrollContainer,c=void 0===n?document.documentElement:n,i=e.showWhenScrollTopIs,r=void 0===i?300:i,d=e.onClickScrollTo,a=void 0===d?0:d,p=e.innerElement,s=void 0===p?document.createTextNode("Up"):p,l=e.size,f=void 0===l?50:l,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,w=e.zIndex,g=void 0===w?1:w;!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(g,"}#").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(s),e.appendChild(t),document.body.appendChild(e),e}(),E=!0;(c===document.documentElement?window:c).addEventListener("scroll",S),S();function S(){c.scrollTop>=r?function(){if(!E)return;z.className="",E=!1}():function(){if(E)return;z.className="hidden",E=!0}()}}});
+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}()}}});

package.json

 {
   "name": "vanilla-back-to-top",
-  "version": "4.0.4",
+  "version": "4.1.0",
   "description": "Configurable zero dependency Back To Top button",
@@ -22,2 +22,6 @@ "main": "dist/vanilla-back-to-top.umd.min.js",
     "vanilla",
+    "react",
+    "angular",
+    "angularjs",
+    "vue",
     "configurable",
@@ -24,0 +28,0 @@ "prerendered",

README.md

 # Vanilla Back To Top
 
-Configurable zero dependency Back To Top button that will work for [93.86% of all users](http://browserl.ist/?q=explorer+%3E%3D10%2Cexplorermobile+%3E%3D10%2Cedge+%3E%3D0%2Cfirefox+%3E%3D2%2Cfirefoxandroid+%3E%3D57%2Cchrome+%3E%3D4%2Csafari+%3E%3D5.1%2Copera+%3E%3D12.1%2Coperamobile+%3E%3D12.1%2Cchromeandroid+%3E%3D62%2Cios+%3E%3D7.1%2Cucandroid+%3E%3D11.4%2Candroid+%3E%3D4.4%2Csamsung+%3E%3D4%2Cblackberry+%3E%3D7) worldwide
+Tiny and configurable Back To Top button with no dependencies that will work for [basically all users in the world](http://browserl.ist/?q=explorer+%3E%3D10%2Cexplorermobile+%3E%3D10%2Cedge+%3E%3D0%2Cfirefox+%3E%3D2%2Cfirefoxandroid+%3E%3D57%2Cchrome+%3E%3D4%2Csafari+%3E%3D5.1%2Copera+%3E%3D12.1%2Coperamobile+%3E%3D12.1%2Cchromeandroid+%3E%3D62%2Cios+%3E%3D7.1%2Cucandroid+%3E%3D11.4%2Candroid+%3E%3D4.4%2Csamsung+%3E%3D4%2Cblackberry+%3E%3D7)
 
-Ideal for pre-rendered static websites with no frameworks, e.g., [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, for example, 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"/>
 
-[&#9733; Star me on GitHub](https://github.com/vfeskov/vanilla-back-to-top)
-
 ## How to use
 
+### Global standalone
+
+This is the simplest way to use it, works great with static or non-SPA websites.
+
 Add this to your HTML:
 ```html
-<script src="https://unpkg.com/vanilla-back-to-top@4.0.4/dist/vanilla-back-to-top.min.js"></script>
-<script>addBackToTop({})</script>
+<script src="https://unpkg.com/vanilla-back-to-top@4.1.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.0.4/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@4.1.0/dist/vanilla-back-to-top.min.js) to your project and serve it from your server:
 ```html
 <script src="/assets/vanilla-back-to-top.min.js"></script>
-<script>addBackToTop({})</script>
+<script>addBackToTop()</script>
 ```
 
-There's also a [UMD](https://github.com/vfeskov/vanilla-back-to-top/blob/master/scripts/umd-template.js) [build](https://github.com/vfeskov/vanilla-back-to-top/blob/master/dist/vanilla-back-to-top.umd.min.js) available so you could import it in your asset pipepline:
+### Isolated UMD module
+
+This is how you would use it with single-page apps on React, Angular, Vue etc, or generally with any asset pipeline.
+
+Install the package with npm:
 ```bash
 npm install --save vanilla-back-to-top
 ```
+Import it as ES6, Node.js or RequireJS module, for example:
 ```js
 import { addBackToTop } from 'vanilla-back-to-top'
-addBackToTop({})
-// your vue/react/angular/etc bootstrapping code here
+addBackToTop()
+// your Vue/React/Angular/etc bootstrapping code here
 ```
 
-Optionally customise CSS of the button using `#back-to-top` selector, e.g.:
+## Styling
+
+You can customise CSS of the button using `#back-to-top` selector:
 ```css
@@ -49,5 +58,5 @@ #back-to-top a {
 
-## Options
+## More options
 
-`addBackToTop` function accepts many options, e.g.:
+`addBackToTop` function can be called with many options:
 ```js
@@ -70,34 +79,16 @@ addBackToTop({
 
-- `id` - id attribute of the button
-- `showWhenScrollTopIs` - show the button when page got scrolled by this number of pixels
-- `onClickScrollTo` - where to scroll to when the button gets clicked, `0` means the very top
-- `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
-- `backgroundColor` - background color of the button
-- `textColor` - text color of the button
-- `zIndex` - z-index of the button
-- `scrollContainer` - if only part of your website gets scrolled, e.g., when your sidebar never scrolls with content, put the scrolled DOM element here
+|Option|Description|
+|-|-|
+|`id`|id attribute of the button|
+|`showWhenScrollTopIs`|Show the button when page got scrolled by this number of pixels|
+|`onClickScrollTo`|Where to scroll to, in pixels, when the button gets clicked, `0` means the very top|
+|`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|
+|`backgroundColor`|Background color of the button|
+|`textColor`|Text color of the button|
+|`zIndex`|z-index of the button|
+|`scrollContainer`|If only part of your website gets scrolled, e.g., when your sidebar never scrolls with content, put the scrolled DOM element here|
 
-## Supported browsers
-
-- Android Browser >=4.4
-- Blackberry >=7
-- Chrome >=4
-- Chrome Android
-- Edge >=12
-- Explorer >=10
-- Explorer Mobile >=10
-- Firefox >=4
-- Firefox Android
-- iOS Safari & Chrome >=7.1
-- Opera >=12.1
-- Opera Mobile >=12.1
-- Safari >=5.1
-- Samsung Internet >=4
-- UC Browser Android >=11.4
-
-This gives [93.86% global coverage](http://browserl.ist/?q=explorer+%3E%3D10%2Cexplorermobile+%3E%3D10%2Cedge+%3E%3D0%2Cfirefox+%3E%3D2%2Cfirefoxandroid+%3E%3D57%2Cchrome+%3E%3D4%2Csafari+%3E%3D5.1%2Copera+%3E%3D12.1%2Coperamobile+%3E%3D12.1%2Cchromeandroid+%3E%3D62%2Cios+%3E%3D7.1%2Cucandroid+%3E%3D11.4%2Candroid+%3E%3D4.4%2Csamsung+%3E%3D4%2Cblackberry+%3E%3D7).
-
-Limitations are due to [flexbox](https://caniuse.com/#search=flexbox) and [position:fixed](https://caniuse.com/#search=position%3Afixed).
+### [&#9733; Star me on GitHub](https://github.com/vfeskov/vanilla-back-to-top)

No alert changes

Worsened metrics

Total package byte prevSize

9772

decreased by-3.93%

Number of lines in readme file

93

decreased by-8.82%

No dependency changes