spin.js - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

.grunt/grunt-gh-pages/gh-pages/release/bundle.js

@@ -228,3 +228,8 @@ (function () {
 
-    var event = (input.tagName === 'SELECT') ? 'change' : 'input';
+    if (input.tagName === 'SELECT' || navigator.userAgent.indexOf('Trident') !== -1) {
+        // "input" event doesn't work on range inputs in Internet Explorer
+        var event = 'change';
+    } else {
+        event = 'input';
+    }
 
@@ -231,0 +236,0 @@ input.addEventListener(event, update);

.grunt/grunt-gh-pages/gh-pages/release/index.js

@@ -28,3 +28,8 @@ import { Spinner } from "../spin.js";
 
-    var event = (input.tagName === 'SELECT') ? 'change' : 'input';
+    if (input.tagName === 'SELECT' || navigator.userAgent.indexOf('Trident') !== -1) {
+        // "input" event doesn't work on range inputs in Internet Explorer
+        var event = 'change';
+    } else {
+        event = 'input';
+    }
 
@@ -31,0 +36,0 @@ input.addEventListener(event, update);

package.json

 {
   "name": "spin.js",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "main": "spin.js",
@@ -29,4 +29,4 @@ "types": "spin.d.ts",
     "grunt-gh-pages": "^2.0.0",
-    "rollup": "^0.51.1",
-    "static-server": "^2.0.6",
+    "rollup": "^0.52.0",
+    "static-server": "^3.0.0",
     "typescript": "^2.6.1"
@@ -33,0 +33,0 @@ },

README.md

@@ -18,2 +18,4 @@ # spin.js [![JS.ORG](https://img.shields.io/badge/js.org-spin-ffb400.svg?style=flat-square)](http://js.org)
 import {Spinner} from 'spin.js';
+
+var target = document.getElementById('foo');
 new Spinner({color:'#fff', lines: 12}).spin(target);
@@ -20,0 +22,0 @@ ```

spin.js

@@ -17,2 +17,3 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
     color: '#000',
+    fadeColor: 'transparent',
     opacity: 0.25,
@@ -28,3 +29,3 @@ rotate: 0,
     left: '50%',
-    shadow: false,
+    shadow: 'none',
     position: 'absolute',
@@ -45,3 +46,4 @@ };
         this.stop();
-        this.el = createEl('div', { className: this.opts.className });
+        this.el = document.createElement('div');
+        this.el.className = this.opts.className;
         this.el.setAttribute('role', 'progressbar');
@@ -53,3 +55,4 @@ css(this.el, {
             left: this.opts.left,
-            top: this.opts.top
+            top: this.opts.top,
+            transform: "scale(" + this.opts.scale + ")",
         });
@@ -82,6 +85,6 @@ if (target) {
             }
-            for (var line = 0; line < _this.opts.lines; line++) {
-                if (line < _this.el.childNodes.length) {
+            if (_this.el.childNodes.length === _this.opts.lines) {
+                for (var line = 0; line < _this.opts.lines; line++) {
                     var opacity = getLineOpacity(line, state, _this.opts);
-                    _this.el.childNodes[line].style.opacity = opacity.toString();
+                    _this.el.childNodes[line].childNodes[0].style.opacity = opacity.toString();
                 }
@@ -136,13 +139,2 @@ }
 /**
- * Utility function to create elements. Optionally properties can be passed.
- */
-function createEl(tag, prop) {
-    if (prop === void 0) { prop = {}; }
-    var el = document.createElement(tag);
-    for (var n in prop) {
-        el[n] = prop[n];
-    }
-    return el;
-}
-/**
  * Tries various vendor prefixes and returns the first supported property.
@@ -180,27 +172,88 @@ */
 function drawLines(el, opts) {
+    var borderRadius = (Math.round(opts.corners * opts.width * 500) / 1000) + 'px';
+    var shadow = 'none';
+    if (opts.shadow === true) {
+        shadow = '0 2px 4px #000'; // default shadow
+    }
+    else if (typeof opts.shadow === 'string') {
+        shadow = opts.shadow;
+    }
+    var shadows = parseBoxShadow(shadow);
     for (var i = 0; i < opts.lines; i++) {
-        var seg = css(createEl('div'), {
+        var degrees = ~~(360 / opts.lines * i + opts.rotate);
+        var backgroundLine = css(document.createElement('div'), {
             position: 'absolute',
-            top: 1 + ~(opts.scale * opts.width / 2) + 'px',
+            top: -opts.width / 2 + "px",
+            width: (opts.length + opts.width) + 'px',
+            height: opts.width + 'px',
+            background: getColor(opts.fadeColor, i),
+            borderRadius: borderRadius,
+            transformOrigin: 'left',
+            transform: "rotate(" + degrees + "deg) translateX(" + opts.radius + "px)",
+        });
+        var line = css(document.createElement('div'), {
+            width: '100%',
+            height: '100%',
+            background: getColor(opts.color, i),
+            borderRadius: borderRadius,
+            boxShadow: normalizeShadow(shadows, degrees),
             opacity: opts.opacity,
         });
-        if (opts.shadow) {
-            seg.appendChild(css(fill('#000', '0 0 4px #000', opts, i), { top: '2px' }));
+        backgroundLine.appendChild(line);
+        el.appendChild(backgroundLine);
+    }
+}
+function parseBoxShadow(boxShadow) {
+    var regex = /^\s*([a-zA-Z]+\s+)?(-?\d+(\.\d+)?)([a-zA-Z]*)\s+(-?\d+(\.\d+)?)([a-zA-Z]*)(.*)$/;
+    var shadows = [];
+    for (var _i = 0, _a = boxShadow.split(','); _i < _a.length; _i++) {
+        var shadow = _a[_i];
+        var matches = shadow.match(regex);
+        if (matches === null) {
+            continue; // invalid syntax
         }
-        seg.appendChild(fill(getColor(opts.color, i), '0 0 1px rgba(0,0,0,.1)', opts, i));
-        el.appendChild(seg);
+        var x = +matches[2];
+        var y = +matches[5];
+        var xUnits = matches[4];
+        var yUnits = matches[7];
+        if (x === 0 && !xUnits) {
+            xUnits = yUnits;
+        }
+        if (y === 0 && !yUnits) {
+            yUnits = xUnits;
+        }
+        if (xUnits !== yUnits) {
+            continue; // units must match to use as coordinates
+        }
+        shadows.push({
+            prefix: matches[1] || '',
+            x: x,
+            y: y,
+            xUnits: xUnits,
+            yUnits: yUnits,
+            end: matches[8],
+        });
     }
-    return el;
+    return shadows;
 }
-function fill(color, shadow, opts, i) {
-    return css(createEl('div'), {
-        position: 'absolute',
-        width: opts.scale * (opts.length + opts.width) + 'px',
-        height: opts.scale * opts.width + 'px',
-        background: color,
-        boxShadow: shadow,
-        transformOrigin: 'left',
-        transform: 'rotate(' + ~~(360 / opts.lines * i + opts.rotate) + 'deg) translate(' + opts.scale * opts.radius + 'px' + ',0)',
-        borderRadius: (opts.corners * opts.scale * opts.width >> 1) + 'px'
-    });
+/**
+ * Modify box-shadow x/y offsets to counteract rotation
+ */
+function normalizeShadow(shadows, degrees) {
+    var normalized = [];
+    for (var _i = 0, shadows_1 = shadows; _i < shadows_1.length; _i++) {
+        var shadow = shadows_1[_i];
+        var xy = convertOffset(shadow.x, shadow.y, degrees);
+        normalized.push(shadow.prefix + xy[0] + shadow.xUnits + ' ' + xy[1] + shadow.yUnits + shadow.end);
+    }
+    return normalized.join(', ');
 }
+function convertOffset(x, y, degrees) {
+    var radians = degrees * Math.PI / 180;
+    var sin = Math.sin(radians);
+    var cos = Math.cos(radians);
+    return [
+        Math.round((x * cos + y * sin) * 1000) / 1000,
+        Math.round((-x * sin + y * cos) * 1000) / 1000,
+    ];
+}

SpinnerOptions.d.ts

@@ -33,3 +33,3 @@ export interface SpinnerOptions {
     /**
-     * #rgb or #rrggbb or array of colors
+     * A CSS color string, or array of strings to set the line color
      */
@@ -39,4 +39,10 @@ color?: string | string[];
     /**
-     * Opacity of the lines (0..1)
+     * A CSS color string, or array of strings to set the color that lines will fade to.
+     * Defaults to transparent.
      */
+    fadeColor?: string | string[];
+
+    /**
+     * The minimum opacity the line color will fade to (0..1)
+     */
     opacity?: number;
@@ -90,5 +96,6 @@
     /**
-     * Whether to render a shadow
+     * Whether to render the default shadow (boolean).
+     * A string can be used to set a custom box-shadow value.
      */
-    shadow?: boolean;
+    shadow?: boolean | string;
 
@@ -95,0 +102,0 @@ /**

Fixed alerts

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

162248

1.63%

Lines of code

1308

5.57%

Number of lines in readme file

24

9.09%

Number of medium supply chain risk alerts

0

-100%

No dependency changes