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

Comparing version 6.0.1 to 7.0.0

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

@@ -1,1 +0,1 @@
-function addBackToTop(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=o.id,e=void 0===t?"back-to-top":t,n=o.showWhenScrollTopIs,c=void 0===n?1:n,i=o.onClickScrollTo,r=void 0===i?0:i,a=o.scrollDuration,d=void 0===a?100:a,s=o.innerElement,l=void 0===s?document.createTextNode("^"):s,u=o.size,m=void 0===u?56:u,p=o.cornerOffset,f=void 0===p?20:p,b=o.backgroundColor,h=void 0===b?"#000":b,x=o.textColor,v=void 0===x?"#fff":x,w=o.zIndex,g=void 0===w?1:w;!function(){var o=Math.round(.43*m),t=Math.round(1.21*m),n="#".concat(e,"{background:").concat(h,";-webkit-border-radius:").concat(m,"px;-moz-border-radius:").concat(m,"px;border-radius:").concat(m,"px;bottom:").concat(f,"px;-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);color:").concat(v,';cursor:pointer;display:block;font-family:"Courier New",Courier,monospace;font-size:').concat(o,"px;height:").concat(m,"px;line-height:").concat(t,"px;opacity:1;outline:0;position:fixed;right:").concat(f,"px;-webkit-tap-highlight-color:transparent;text-align:center;text-decoration:none;-webkit-touch-callout:none;-webkit-transition:bottom .2s,opacity .2s;-o-transition:bottom .2s,opacity .2s;-moz-transition:bottom .2s,opacity .2s;transition:bottom .2s,opacity .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;width:").concat(m,"px;z-index:").concat(g,"}#").concat(e,".hidden{bottom:-").concat(m,"px;opacity:0}"),c=document.createElement("style");c.appendChild(document.createTextNode(n)),document.head.insertAdjacentElement("afterbegin",c)}();var y=function(){var o=document.createElement("div");return o.id=e,o.className="hidden",o.appendChild(l),o.addEventListener("click",function(o){o.preventDefault(),function(){if(d<=0||"undefined"==typeof performance||"undefined"==typeof requestAnimationFrame)return z(r);var o=performance.now(),t=E(),e=t-r;requestAnimationFrame(function n(c){var i=c-o,r=Math.min(i/d,1);z(t-Math.round(r*e)),r<1&&requestAnimationFrame(n)})}()}),document.body.appendChild(o),o}(),k=!0;window.addEventListener("scroll",T),T();function T(){E()>=c?function(){if(!k)return;y.className="",k=!1}():function(){if(k)return;y.className="hidden",k=!0}()}function E(){return window.scrollY||window.pageYOffset||document.body.scrollTop||document.documentElement&&document.documentElement.scrollTop||0}function z(o){document.body.scrollTop=document.documentElement.scrollTop=o}}
+"use strict";function addBackToTop(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=o.id,e=void 0===t?"back-to-top":t,n=o.showWhenScrollTopIs,i=void 0===n?1:n,r=o.onClickScrollTo,a=void 0===r?0:r,d=o.scrollDuration,s=void 0===d?100:d,c=o.innerHTML,l=void 0===c?'<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>':c,p=o.size,u=void 0===p?56:p,b=o.cornerOffset,m=void 0===b?20:b,v=o.backgroundColor,h=void 0===v?"#000":v,f=o.textColor,x=void 0===f?"#fff":f,w=o.zIndex,g=void 0===w?1:w,k=Math.min,T=Math.round,y=document,z=y.head,E=y.body,L=y.documentElement;!function(){var o=T(.43*u),t=T(.29*u),n="#"+e+"{background:"+h+";-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;bottom:"+m+"px;-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);cursor:pointer;display:block;height:"+u+"px;opacity:1;outline:0;position:fixed;right:"+m+"px;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-transition:bottom .2s,opacity .2s;-o-transition:bottom .2s,opacity .2s;-moz-transition:bottom .2s,opacity .2s;transition:bottom .2s,opacity .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:"+u+"px;z-index:"+g+"}#"+e+" svg{display:block;fill:"+x+";height:"+o+"px;margin:"+t+"px auto 0;width:"+o+"px}#"+e+".hidden{bottom:-"+u+"px;opacity:0}",i=document.createElement("style");i.appendChild(document.createTextNode(n)),z.insertAdjacentElement("afterbegin",i)}();var C=function(){var o=document.createElement("div");return o.id=e,o.className="hidden",o.innerHTML=l,o.addEventListener("click",function(o){o.preventDefault(),function(){var o=window,t=o.performance,e=o.requestAnimationFrame;if(s<=0||void 0===t||void 0===e)return B(a);var n=t.now(),i=A(),r=i-a;e(function o(t){var a=t-n,d=k(a/s,1);B(i-T(d*r)),d<1&&e(o)})}()}),E.appendChild(o),o}(),M=!0;window.addEventListener("scroll",N),N();function N(){A()>=i?function(){if(!M)return;C.className="",M=!1}():function(){if(M)return;C.className="hidden",M=!0}()}function A(){return scrollY||pageYOffset||E.scrollTop||L&&L.scrollTop||0}function B(o){E.scrollTop=o,L&&(L.scrollTop=o)}}

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

@@ -14,2 +14,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+  'use strict';
+
   function addBackToTop() {
@@ -25,4 +27,4 @@ var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         scrollDuration = _params$scrollDuratio === void 0 ? 100 : _params$scrollDuratio,
-        _params$innerElement = params.innerElement,
-        innerElement = _params$innerElement === void 0 ? document.createTextNode('^') : _params$innerElement,
+        _params$innerHTML = params.innerHTML,
+        innerHTML = _params$innerHTML === void 0 ? '<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>' : _params$innerHTML,
         _params$size = params.size,
@@ -38,2 +40,8 @@ size = _params$size === void 0 ? 56 : _params$size,
         zIndex = _params$zIndex === void 0 ? 1 : _params$zIndex;
+    var min = Math.min,
+        round = Math.round;
+    var _document = document,
+        head = _document.head,
+        body = _document.body,
+        documentElement = _document.documentElement;
     appendStyles();
@@ -71,3 +79,3 @@ var upEl = appendElement();
       upEl.className = 'hidden';
-      upEl.appendChild(innerElement);
+      upEl.innerHTML = innerHTML;
       upEl.addEventListener('click', function (event) {
@@ -77,3 +85,3 @@ event.preventDefault();
       });
-      document.body.appendChild(upEl);
+      body.appendChild(upEl);
       return upEl;
@@ -83,11 +91,15 @@ }
     function appendStyles() {
-      var fontSize = Math.round(0.43 * size);
-      var lineHeight = Math.round(1.21 * size);
-      var styles = "#".concat(id, "{background:").concat(backgroundColor, ";-webkit-border-radius:").concat(size, "px;-moz-border-radius:").concat(size, "px;border-radius:").concat(size, "px;bottom:").concat(cornerOffset, "px;-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);color:").concat(textColor, ";cursor:pointer;display:block;font-family:\"Courier New\",Courier,monospace;font-size:").concat(fontSize, "px;height:").concat(size, "px;line-height:").concat(lineHeight, "px;opacity:1;outline:0;position:fixed;right:").concat(cornerOffset, "px;-webkit-tap-highlight-color:transparent;text-align:center;text-decoration:none;-webkit-touch-callout:none;-webkit-transition:bottom .2s,opacity .2s;-o-transition:bottom .2s,opacity .2s;-moz-transition:bottom .2s,opacity .2s;transition:bottom .2s,opacity .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;width:").concat(size, "px;z-index:").concat(zIndex, "}#").concat(id, ".hidden{bottom:-").concat(size, "px;opacity:0}");
+      var svgSize = round(0.43 * size);
+      var svgTop = round(0.29 * size);
+      var styles = '#' + id + '{background:' + backgroundColor + ';-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;bottom:' + cornerOffset + 'px;-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);cursor:pointer;display:block;height:' + size + 'px;opacity:1;outline:0;position:fixed;right:' + cornerOffset + 'px;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-transition:bottom .2s,opacity .2s;-o-transition:bottom .2s,opacity .2s;-moz-transition:bottom .2s,opacity .2s;transition:bottom .2s,opacity .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:' + size + 'px;z-index:' + zIndex + '}#' + id + ' svg{display:block;fill:' + textColor + ';height:' + svgSize + 'px;margin:' + svgTop + 'px auto 0;width:' + svgSize + 'px}#' + id + '.hidden{bottom:-' + size + 'px;opacity:0}';
       var styleEl = document.createElement('style');
       styleEl.appendChild(document.createTextNode(styles));
-      document.head.insertAdjacentElement('afterbegin', styleEl);
+      head.insertAdjacentElement('afterbegin', styleEl);
     }
 
     function scrollUp() {
+      var _window = window,
+          performance = _window.performance,
+          requestAnimationFrame = _window.requestAnimationFrame;
+
       if (scrollDuration <= 0 || typeof performance === 'undefined' || typeof requestAnimationFrame === 'undefined') {
@@ -104,4 +116,4 @@ return setScrollTop(onClickScrollTo);
         var delta = timestamp - start;
-        var progress = Math.min(delta / scrollDuration, 1);
-        setScrollTop(initScrollTop - Math.round(progress * pxsToScrollBy));
+        var progress = min(delta / scrollDuration, 1);
+        setScrollTop(initScrollTop - round(progress * pxsToScrollBy));
 
@@ -115,7 +127,11 @@ if (progress < 1) {
     function getScrollTop() {
-      return window.scrollY || window.pageYOffset || document.body.scrollTop || document.documentElement && document.documentElement.scrollTop || 0;
+      return scrollY || pageYOffset || body.scrollTop || documentElement && documentElement.scrollTop || 0;
     }
 
     function setScrollTop(value) {
-      document.body.scrollTop = document.documentElement.scrollTop = value;
+      body.scrollTop = value;
+
+      if (documentElement) {
+        documentElement.scrollTop = value;
+      }
     }
@@ -122,0 +138,0 @@ } // FUNCTION END

package.json

 {
   "name": "vanilla-back-to-top",
-  "version": "6.0.1",
+  "version": "7.0.0",
   "description": "Tiny and configurable Back To Top button with no dependencies",
@@ -76,3 +76,5 @@ "main": "dist/vanilla-back-to-top.umd.js",
   "license": "MIT",
-  "dependencies": {},
+  "dependencies": {
+    "svg-path-parser": "^1.1.0"
+  },
   "devDependencies": {
@@ -79,0 +81,0 @@ "@babel/core": "^7.0.0-beta.36",

README.md

@@ -24,7 +24,7 @@ # Vanilla Back To Top
 ```html
-<script src="https://unpkg.com/vanilla-back-to-top@6.0.1/dist/vanilla-back-to-top.min.js"></script>
+<script src="https://unpkg.com/vanilla-back-to-top@7.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@6.0.1/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@7.0.0/dist/vanilla-back-to-top.min.js) to your project and serve it from your server:
 ```html
@@ -55,3 +55,2 @@ <script src="/assets/vanilla-back-to-top.min.js"></script>
 #back-to-top {
-  text-indent: -9999px;
   background-image: url(back-to-top.png)
@@ -86,8 +85,6 @@ }
 
-- Use [SVG icon](https://material.io/icons/#ic_arrow_upward) instead of `^` character: <img src="https://i.pi.gy/YnL8p.png" width="65" />
+- Use [another SVG icon](https://material.io/icons/#ic_arrow_upward): <img src="https://i.pi.gy/YnL8p.png" width="65" />
 ```js
-var backToTopSvg = document.createElement('span');
-backToTopSvg.innerHTML = '<svg height="100%" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0V0z"/><path fill="#fff" d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>';
 addBackToTop({
-  innerElement: backToTopSvg
+  innerHTML: '<svg viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z"/><path fill="#fff" d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>'
 });
@@ -106,3 +103,3 @@ ```
   scrollDuration: 100, // ms
-  innerElement: document.createTextNode('^'),
+  innerHTML = '<svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>', // https://material.io/icons/#ic_keyboard_arrow_up
   size: 56, // px
@@ -122,3 +119,3 @@ cornerOffset: 20, // px
 |`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)`|
+|`innerHTML`|HTML code to put inside the button|
 |`size`|Width and height of the button in pixels|
@@ -125,0 +122,0 @@ |`cornerOffset`|Right and bottom offset of the button relative to viewport|

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

Improved metrics

Lines of code

116

increased by11.54%

Worsened metrics

Total package byte prevSize

15865

decreased by-0.97%

Dependency count

1

increased byInfinity%

Number of lines in readme file

123

decreased by-2.38%

Dependency changes

• + Addedsvg-path-parser@^1.1.0

• + Addedsvg-path-parser@1.1.0(transitive)