favicon-marquee - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

lib/main.js

@@ -1,86 +0,1 @@
-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); return Constructor; }
-
-var FaviconMarquee = /*#__PURE__*/function () {
-  function FaviconMarquee(params) {
-    var _params$size, _params$text, _params$color, _params$step, _params$font, _params$marginBottom;
-
-    _classCallCheck(this, FaviconMarquee);
-
-    this.size = (_params$size = params.size) !== null && _params$size !== void 0 ? _params$size : 32;
-    this.text = (_params$text = params.text) !== null && _params$text !== void 0 ? _params$text : "SCROLLING TEXT";
-    this.color = (_params$color = params.color) !== null && _params$color !== void 0 ? _params$color : "green";
-    this.step = (_params$step = params.step) !== null && _params$step !== void 0 ? _params$step : 0.5;
-    this.font = (_params$font = params.font) !== null && _params$font !== void 0 ? _params$font : "Arial, sans-serif";
-    this.marginBottom = (_params$marginBottom = params.marginBottom) !== null && _params$marginBottom !== void 0 ? _params$marginBottom : 0;
-    this.background = params.background;
-    this.pixelsScrolled = 0;
-  }
-
-  _createClass(FaviconMarquee, [{
-    key: "start",
-    value: function start() {
-      var _this = this;
-
-      var interval = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1000 / 24;
-      this.favicon = document.createElement('link');
-      this.favicon.type = 'image/jpeg';
-      this.favicon.rel = 'shortcut icon';
-      document.head.appendChild(this.favicon);
-      setInterval(function () {
-        return _this.draw();
-      }, interval);
-    }
-  }, {
-    key: "createCanvas",
-
-    /**
-     * A new canvas is created on every render since (on Chrome) reusing the old canvas
-     * comes with massive CPU usage creep which results in 100% CPU usage and
-     * the website being unusable after ~15 minutes of running
-     */
-    value: function createCanvas() {
-      this.canvas = document.createElement('canvas');
-      this.canvas.width = this.size;
-      this.canvas.height = this.size;
-      this.canvas.hidden = true;
-      this.ctx = this.canvas.getContext('2d');
-      this.ctx.font = this.size + "px " + this.font;
-      this.textWidth = Math.ceil(this.ctx.measureText(this.text).width);
-    }
-  }, {
-    key: "draw",
-    value: function draw() {
-      this.createCanvas();
-
-      if (this.background) {
-        this.ctx.fillStyle = this.background;
-        this.ctx.rect(0, 0, this.size, this.size);
-        this.ctx.fill();
-      } else {
-        this.ctx.clearRect(0, 0, this.size, this.size);
-      }
-
-      this.pixelsScrolled += this.step;
-
-      if (this.pixelsScrolled > this.textWidth + 2 * this.size) {
-        // 2 * this.size to begin and end with blank canvas
-        this.pixelsScrolled = 0; // loop around
-      }
-
-      var canvasWidthOffset = -1 * this.pixelsScrolled + this.size; // negation of pixelsScrolled because canvas scrolls left-to-right
-      // add this.size to begin rendering with blank canvas
-
-      this.ctx.fillStyle = this.color;
-      this.ctx.fillText(this.text, canvasWidthOffset, this.size - this.marginBottom);
-      this.favicon.href = this.canvas.toDataURL('image/png', 0.3);
-    }
-  }]);
-
-  return FaviconMarquee;
-}();
-
-export default FaviconMarquee;
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.FaviconMarquee=e():t.FaviconMarquee=e()}(window,(function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,i),o.l=!0,o.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)i.d(n,o,function(e){return t[e]}.bind(null,o));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){"use strict";function n(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}i.r(e);var o=function(){function t(e){var i,n,o,r,s,a;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.size=null!==(i=e.size)&&void 0!==i?i:32,this.text=null!==(n=e.text)&&void 0!==n?n:"SCROLLING TEXT",this.color=null!==(o=e.color)&&void 0!==o?o:"green",this.step=null!==(r=e.step)&&void 0!==r?r:.5,this.font=null!==(s=e.font)&&void 0!==s?s:"Arial, sans-serif",this.marginBottom=null!==(a=e.marginBottom)&&void 0!==a?a:0,this.background=e.background,this.pixelsScrolled=0}var e,i,o;return e=t,(i=[{key:"start",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1e3/24;this.favicon=document.createElement("link"),this.favicon.type="image/jpeg",this.favicon.rel="shortcut icon",document.head.appendChild(this.favicon),setInterval((function(){return t.draw()}),e)}},{key:"createCanvas",value:function(){this.canvas=document.createElement("canvas"),this.canvas.width=this.size,this.canvas.height=this.size,this.canvas.hidden=!0,this.ctx=this.canvas.getContext("2d"),this.ctx.font=this.size+"px "+this.font,this.textWidth=Math.ceil(this.ctx.measureText(this.text).width)}},{key:"draw",value:function(){this.createCanvas(),this.background?(this.ctx.fillStyle=this.background,this.ctx.rect(0,0,this.size,this.size),this.ctx.fill()):this.ctx.clearRect(0,0,this.size,this.size),this.pixelsScrolled+=this.step,this.pixelsScrolled>this.textWidth+2*this.size&&(this.pixelsScrolled=0);var t=-1*this.pixelsScrolled+this.size;this.ctx.fillStyle=this.color,this.ctx.fillText(this.text,t,this.size-this.marginBottom),this.favicon.href=this.canvas.toDataURL("image/png",.3)}}])&&n(e.prototype,i),o&&n(e,o),t}();e.default=o}]).default}));

package.json

 {
   "name": "favicon-marquee",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "An animated scrolling favicon for your website",
   "main": "lib/main.js",
   "scripts": {
-    "build": "babel src --out-dir lib",
+    "build": "webpack --mode production",
     "prepublish": "npm run build",
-    "test": "npm run build"
+    "webpack": "webpack --mode development"
   },
@@ -24,4 +24,6 @@ "keywords": [
     "@babel/preset-env": "^7.9.5",
-    "babel-plugin-add-module-exports": "^1.0.2",
-    "core-js": "^3.6.4"
+    "babel-loader": "^8.1.0",
+    "core-js": "^3.6.4",
+    "webpack": "^4.42.1",
+    "webpack-cli": "^3.3.11"
   },
@@ -33,3 +35,5 @@ "browserslist": [
   ],
-  "files": ["lib/main.js"]
+  "files": [
+    "lib/main.js"
+  ]
 }

README.md

 # favicon-marquee
-> A simple JavaScript class with no dependencies that adds an animated scrolling
+![Scrolling text example 1](https://media.giphy.com/media/mGWVZO8Ae1p6JZme2M/giphy.gif)
+  
+![Scrolling text example 2](https://media.giphy.com/media/kdFxjQIkYcGunIr22t/giphy.gif)
+
+> A <5 kB JavaScript class with no dependencies that adds an animated scrolling
 > favicon to your website.
@@ -8,2 +12,3 @@ > See the [demo](https://laane.xyz/favicon/example1.html).
 works on all modern browsers
+
 ## Install
@@ -20,11 +25,13 @@
 ## Usage
-favicon-marquee can be bundled with all major build tools or imported from
- a file
+favicon-marquee can be bundled with all major build tools                           
 
 ```
 import FaviconMarquee from "favicon-marquee";
-// or
-import FaviconMarquee from "path/to/lib/main.js";
 ```
+or loaded using a script tag and used as a global variable
+```
+<script type="text/javascript" src="path/to/lib/main.js">
+```
 
+
 Now that FaviconMarquee is accessible, you can use it by running the following code
@@ -63,3 +70,3 @@ ```
 const marquee = new FaviconMarquee({
-    text: 'Different text 🚀',
+    text: 'Different text',
     color: '#323330',
@@ -74,3 +81,3 @@ size: 48,
 ## Contributing and Issues
-Contributions are always welcome. Everyone is welcome to open issues and
+Contributions are always welcome. Anyone can open issues and
  pull requests on [GitHub](https://github.com/StenAL/favicon-marquee) 
@@ -77,0 +84,0 @@

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

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

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

Number of lines in readme file

83

increased by9.21%

Worsened metrics

Total package byte prevSize

8051

decreased by-4.99%

Dev dependency count

7

increased by40%

Lines of code

0

decreased by-100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes