animate-svg - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

lib/index.d.ts

@@ -1,9 +0,6 @@
-export interface UnblurOptions {
-    interval?: number;
-    element?: Element;
-    skipIf?: () => boolean;
-    log?: boolean;
-    allBrowsers?: boolean;
-}
-declare var _default: (options?: UnblurOptions) => void;
+declare var _default: (path: (SVGLineElement & {
+    getTotalLength: () => number;
+}) | (SVGPathElement & {
+    getTotalLength: () => number;
+}), speed: number, reverse?: boolean) => Promise<Event>;
 export default _default;

lib/index.js

 "use strict";
-var __assign = (this && this.__assign) || Object.assign || function(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-            t[p] = s[p];
-    }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var defaultUnblurOptions = {
-    interval: 1000,
-    element: document.body,
-    skipIf: undefined,
-    log: false,
-    allBrowsers: false,
-};
-// const translate3dRe = /translate3d\s*\((.+?,\s*.+?),\s*.+?\s*\)/ig
-// const translateReplacer = 'translate($1)'
-// const scale3dRe = /scale3d\s*\((.+?,\s*.+?),\s*.+?\s*\)/ig
-// const scaleReplacer = 'scale($1)'
-var re3d = /(translate|scale)3d\s*\((.+?,\s*.+?),\s*.+?\s*\)/ig;
-var replacer2d = '$1($2)';
-function fixBlurry(els) {
-    for (var _i = 0, els_1 = els; _i < els_1.length; _i++) {
-        var style = els_1[_i].style;
-        if (style && style.transform) {
-            style.transform = style.transform.replace(re3d, replacer2d);
-        }
+function getLength(path) {
+    if (typeof path.getTotalLength === 'function') {
+        return path.getTotalLength();
     }
+    var x1 = +path.getAttribute('x1') || 0;
+    var x2 = +path.getAttribute('x2') || 0;
+    var y1 = +path.getAttribute('y1') || 0;
+    var y2 = +path.getAttribute('y2') || 0;
+    var x = x2 - x1;
+    var y = y2 - y1;
+    return Math.sqrt(x * x + y * y);
 }
-var selector = '[style*="translate3d"], [style*="scale3d"]';
-var called = false;
-exports.default = function (options) {
-    if (options === void 0) { options = {}; }
-    if (called) {
-        throw new Error('unblur can be called only once!');
-    }
-    called = true;
-    var newOptions = __assign({}, defaultUnblurOptions, options);
-    var interval = newOptions.interval, element = newOptions.element, skipIf = newOptions.skipIf, log = newOptions.log, allBrowsers = newOptions.allBrowsers;
-    var userAgent = navigator.userAgent;
-    var isWebkitDesktop = userAgent.includes('AppleWebKit') && !userAgent.includes('Mobile');
-    if (!allBrowsers && !isWebkitDesktop) {
-        if (log) {
-            console.log('not desktop webkit, do nothing');
-        }
-        return;
-    }
-    else if (log) {
-        console.log('running unblur');
-    }
-    var next = interval === 0 ? requestAnimationFrame : function (bar) { return setTimeout(bar, interval); };
-    (function checkAndUnblur() {
-        if (!skipIf || !skipIf()) {
-            var els = element.querySelectorAll(selector);
-            if (els.length > 0) {
-                if (log) {
-                    console.log('fixing translate3d:', els.length, 'elements');
-                }
-                fixBlurry(els);
-            }
-        }
-        else if (log) {
-            console.log('cancelled');
-        }
-        next(checkAndUnblur);
-    }());
+function transitionEndPromise(path) {
+    return new Promise(function (resolve, reject) {
+        path.addEventListener('transitionend', function (e) {
+            path.removeEventListener('transitionend', resolve);
+            resolve(e);
+        });
+    });
+}
+exports.default = function (path, speed, reverse) {
+    if (reverse === void 0) { reverse = false; }
+    var length = getLength(path);
+    var initialOffset = reverse ? -length : length;
+    var duration = length / speed;
+    var promise = transitionEndPromise(path);
+    var style = path.style;
+    style.transition = null;
+    style.opacity = null;
+    style.strokeDasharray = length + " " + length;
+    style.strokeDashoffset = initialOffset.toString();
+    path.getBoundingClientRect();
+    style.transition = "stroke-dashoffset " + duration + "ms linear";
+    style.strokeDashoffset = '0';
+    return promise;
 };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "animate-svg",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Animate SVG paths & lines",
   "main": "index.js",
+  "types": "lib/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rm -rf lib && tsc",
+    "build-publish": "sh build/publish.sh"
   },
@@ -26,2 +29,2 @@ "repository": {
   "homepage": "https://github.com/inker/animate-svg#readme"
-}
+}

README.md

@@ -1,10 +0,10 @@
-# unblur
+# animate-svg
 
 [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url]
 
-A tool to fix blurry text on Webkit-based browsers. With a given interval, dirty-checks for any elements with on them `translate3d` and replaces it with `translate`.
+Easily animate an SVG line or path to look like it's animating itself.
 
 ## Installation
 ```
-npm install --save unblur
+npm install --save animate-svg
 ```
@@ -15,28 +15,17 @@
 ```javascript
-import unblur from 'unblur'
+import animateSvg from 'animate-svg'
 
-unblur()
+async foo() {
+  // blabla
+  const path = document.getElementById('some-svg-path-element')
+  await animateSvg(path, 1, false)
+}
 ```
-One may also use optional parameters:
-```javascript
-unblur({
-  // the root element which children to unblur (default is document.body)
-  element: document.getElementById('foobar'),
-  // the interval in ms at which to invoke the unblur function (default is 1000)
-  interval: 5000,
-  // skip the invocation if the predicate evaluates to true (default is undefined)
-  skipIf: () => document.querySelectorAll('[style*="transition"').length > 0,
-  // enable for all browsers rather than just desktop Webkit (default is false)
-  allBrowsers: true,
-  // primitive logging (default is false)
-  log: true,
-})
-```
 
-[npm-url]: https://npmjs.org/package/unblur
-[downloads-image]: http://img.shields.io/npm/dm/unblur.svg
-[npm-image]: http://img.shields.io/npm/v/unblur.svg
-[david-dm-url]:https://david-dm.org/inker/unblur
-[david-dm-image]:https://david-dm.org/inker/unblur.svg
-[david-dm-dev-url]:https://david-dm.org/inker/unblur#info=devDependencies
-[david-dm-dev-image]:https://david-dm.org/inker/unblur/dev-status.svg
+[npm-url]: https://npmjs.org/package/animate-svg
+[downloads-image]: http://img.shields.io/npm/dm/animate-svg.svg
+[npm-image]: http://img.shields.io/npm/v/animate-svg.svg
+[david-dm-url]:https://david-dm.org/inker/animate-svg
+[david-dm-image]:https://david-dm.org/inker/animate-svg.svg
+[david-dm-dev-url]:https://david-dm.org/inker/animate-svg#info=devDependencies
+[david-dm-dev-image]:https://david-dm.org/inker/animate-svg/dev-status.svg

src/index.ts

@@ -1,72 +0,42 @@
-import { debounce } from 'lodash'
+type SVGGeometryElement = (SVGPathElement | SVGLineElement) & { getTotalLength: () => number }
 
-export interface UnblurOptions {
-    interval?: number,
-    element?: Element,
-    skipIf?: () => boolean,
-    log?: boolean,
-    allBrowsers?: boolean
+function getLength(path: SVGGeometryElement) {
+    if (typeof path.getTotalLength === 'function') {
+        return path.getTotalLength()
+    }
+    const x1 = +path.getAttribute('x1') || 0
+    const x2 = +path.getAttribute('x2') || 0
+    const y1 = +path.getAttribute('y1') || 0
+    const y2 = +path.getAttribute('y2') || 0
+    const x = x2 - x1
+    const y = y2 - y1
+    return Math.sqrt(x * x + y * y)
 }
 
-const defaultUnblurOptions: UnblurOptions = {
-    interval: 1000,
-    element: document.body,
-    skipIf: undefined,
-    log: false,
-    allBrowsers: false,
+function transitionEndPromise(path: SVGGeometryElement) {
+    return new Promise<Event>((resolve, reject) => {
+        path.addEventListener('transitionend', e => {
+            path.removeEventListener('transitionend', resolve)
+            resolve(e)
+        })
+    })
 }
 
-// const translate3dRe = /translate3d\s*\((.+?,\s*.+?),\s*.+?\s*\)/ig
-// const translateReplacer = 'translate($1)'
-// const scale3dRe = /scale3d\s*\((.+?,\s*.+?),\s*.+?\s*\)/ig
-// const scaleReplacer = 'scale($1)'
-const re3d = /(translate|scale)3d\s*\((.+?,\s*.+?),\s*.+?\s*\)/ig
-const replacer2d = '$1($2)'
+export default (path: SVGGeometryElement, speed: number, reverse = false) => {
+    const length = getLength(path)
+    const initialOffset = reverse ? -length : length
+    const duration = length / speed
 
-function fixBlurry(els: HTMLElement[]) {
-    for (const { style } of els) {
-        if (style && style.transform) {
-            style.transform = style.transform.replace(re3d, replacer2d)
-        }
-    }
-}
+    const promise = transitionEndPromise(path)
 
-const selector = '[style*="translate3d"], [style*="scale3d"]'
+    const { style } = path
+    style.transition = null
+    style.opacity = null
+    style.strokeDasharray = `${length} ${length}`
+    style.strokeDashoffset = initialOffset.toString()
+    path.getBoundingClientRect()
+    style.transition = `stroke-dashoffset ${duration}ms linear`
+    style.strokeDashoffset = '0'
 
-let called = false
-
-export default (options: UnblurOptions = {}) => {
-    if (called) {
-        throw new Error('unblur can be called only once!')
-    }
-    called = true
-    const newOptions = { ...defaultUnblurOptions, ...options }
-    const { interval, element, skipIf, log, allBrowsers } = newOptions
-    const { userAgent } = navigator
-    const isWebkitDesktop = userAgent.includes('AppleWebKit') && !userAgent.includes('Mobile')
-    if (!allBrowsers && !isWebkitDesktop) {
-        if (log) {
-            console.log('not desktop webkit, do nothing')
-        }
-        return
-    } else if (log) {
-        console.log('running unblur')
-    }
-
-    const next = interval === 0 ? requestAnimationFrame : (bar) => setTimeout(bar, interval)
-
-    ; (function checkAndUnblur() {
-        if (!skipIf || !skipIf()) {
-            const els = element.querySelectorAll(selector) as any as HTMLElement[]
-            if (els.length > 0) {
-                if (log) {
-                    console.log('fixing translate3d:', els.length, 'elements')
-                }
-                fixBlurry(els)                
-            }
-        } else if (log) {
-            console.log('cancelled')
-        }
-        next(checkAndUnblur)
-    }())
+    return promise
 }

New 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

Worsened metrics

Total package byte prevSize

7293

decreased by-28.36%

Lines of code

107

decreased by-36.31%

Number of lines in readme file

31

decreased by-26.19%

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes