creepyface - npm Package Compare versions

Comparing version 7.0.0 to 7.1.0-beta.1

dist/creepyface.js

@@ -9,3 +9,3 @@ import getOptions from './util/options';
     const options = getOptions(img, userOptions);
-    const cancel = preload(img, options, unload => {
+    return (img.__creepyfaceCancel = preload(img, options, unload => {
         const update = (src, point, angle) => {
@@ -16,3 +16,5 @@ img.src = src;
         const backToDefault = debounce(options.timeToDefault, () => update(options.src));
-        const pointConsumer = throttle(options.throttle, point => {
+        const pointConsumer = throttle(options.throttle, (point) => {
+            if (!point)
+                return update(options.src);
             const angle = getAngle(img, point);
@@ -30,10 +32,7 @@ const src = getSrc(img, point, angle, options);
             img.src = options.src;
+            delete img.__creepyfaceCancel;
             unload();
             options.onDetach();
         };
-    });
-    return (img.__creepyfaceCancel = () => {
-        cancel();
-        delete img.__creepyfaceCancel;
-    });
+    }));
 };
@@ -49,7 +48,5 @@ creepyface.cancel = (img) => {
     for (let i = 0; i < elements.length; i++) {
-        const el = elements[i];
-        if (el instanceof HTMLImageElement)
-            creepyface(el);
+        creepyface(elements[i]);
     }
 });
 export default creepyface;

dist/creepyface.umd.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).creepyface=e()}(this,function(){"use strict";var o,t=function(n){var o,r=[];return function(t,e){return r.push(t),1===r.length&&(o=n(function(e){return r.forEach(function(t){return t(e)})},e)),function(){r.splice(r.indexOf(t),1),0===r.length&&o&&o()}}},e=t(function(e){var t=function(t){return e([t.clientX,t.clientY])};return window.addEventListener("mousemove",t,!0),function(){return window.removeEventListener("mousemove",t,!0)}}),s=function(t,e){return[t[0]+e[0],t[1]+e[1]]},d=function(t){return t*Math.PI/180},v=function(t){return e=Math.atan2(t[1],t[0]),n=2*Math.PI,180*((n+e%n)%n)/Math.PI;var e,n},n=t(function(r){var t=function(t){for(var e=[0,0],n=0;n<t.touches.length;n++){var o=t.touches[n];e=s(e,[o.clientX,o.clientY])}r(e)};return window.addEventListener("touchmove",t,!0),function(){return window.removeEventListener("touchmove",t,!0)}}),r={mouse:e,finger:n,pointer:(o=[e,n],function(e,n){var t=o.map(function(t){return t(e,n)});return function(){return t.forEach(function(t){return t()})}})},i=function(t){var e=t?parseFloat(t):NaN;return isNaN(e)?void 0:e},c=function(t){return{hover:t.getAttribute("data-src-hover")||void 0,looks:function(t){for(var e=/data-src-look-(\d+)/i,n=[],o=0;o<t.attributes.length;o++){var r=t.attributes[o],i=e.exec(r.name);i&&n.push({angle:parseFloat(i[1]),src:r.value})}return n.length?n:void 0}(t),points:t.getAttribute("data-points")||void 0,timeToDefault:i(t.getAttribute("data-timetodefault")),throttle:i(t.getAttribute("data-throttle"))}},u=function(t){return"function"==typeof t.points?t.points:(e=t.points||"pointer",r[e]?r[e]:(console.error("No point provider registered as '".concat(e,"', defaulting to pointer.")),r.pointer));var e},a=function(){};function f(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},n=function(r){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{},e=Object.keys(i);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(i).filter(function(t){return Object.getOwnPropertyDescriptor(i,t).enumerable}))),e.forEach(function(t){var e,n,o;e=r,o=i[n=t],n in e?Object.defineProperty(e,n,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[n]=o})}return r}({},c(t),e),o=t.getAttribute("src");if(!o)throw new Error("A default URL must be specified");return{src:o,hover:n.hover||"",pointProvider:u(n),looks:n.looks||[],timeToDefault:n.timeToDefault||1e3,throttle:n.throttle||100,onDebug:n.onDebug||a,onAttach:n.onAttach||a,onDetach:n.onDetach||a}}var l=function(r,i){var c=[];r.forEach(function(t){var e,n,o;e=t,n=function(t){c.push(t),c.length===r.length&&i(c)},(o=new Image).src=e,o.onload=o.onerror=function(){o.naturalWidth||console.error("Creepyface was unable to load ".concat(e)),delete o.onload,delete o.onerror,n(o)}})};function h(r,i,c,u){var a,f=!1,l=0;function s(){a&&clearTimeout(a)}function t(){var t=this,e=Date.now()-l,n=arguments;function o(){l=Date.now(),c.apply(t,n)}f||(u&&!a&&o(),s(),void 0===u&&r<e?o():!0!==i&&(a=setTimeout(u?function(){a=void 0}:o,void 0===u?r-e:r)))}return"boolean"!=typeof i&&(u=c,c=i,i=void 0),t.cancel=function(){s(),f=!0},t}var p=function(t,e){return v((r=s([window.scrollX,window.scrollY],e),c=t.getBoundingClientRect(),u=c.left,a=c.top,f=c.width,l=c.height,i=[u+window.pageXOffset+f/2,a+window.pageYOffset+l/2],n=[r[0]-i[0],r[1]-i[1]],o=90,[n[0]*Math.cos(d(o))-n[1]*Math.sin(d(o)),n[0]*Math.sin(d(o))+n[1]*Math.cos(d(o))]));var n,o,r,i,c,u,a,f,l},g=function(t){return 180<Math.abs(t)?t-360*((e=t)?e<0?-1:1:0):t;var e},m=function(t,e){return e.slice(0).sort((n=t,function(t,e){return Math.abs(g(t.angle-n))-Math.abs(g(e.angle-n))}))[0];var n},b=function(t,e,n){return e<=t&&t<=n},w=function(t,e){return document.elementFromPoint?document.elementFromPoint(e[0],e[1])===t:(n=t.getBoundingClientRect(),o=[e[0],e[1]],r=n.left,i=n.top,c=n.right,u=n.bottom,b(o[0],r,c)&&b(o[1],i,u));var n,o,r,i,c,u},y=function(s,t){var e,n,o,r,i,c,d=f(s,t),u=(e=s,i=!(n=function(t){var e,n,o,f=function(t,e,n){s.src=t,d.onDebug({src:t,point:e,angle:n,options:d})},l=(e=d.timeToDefault,n=function(){return f(d.src)},void 0===o?h(e,n,!1):h(e,o,!1!==n)),r=h(d.throttle,function(t){var e,n,o,r,i,c,u=p(s,t),a=(e=s,n=t,o=u,i=(r=d).looks,(c=r.hover)&&w(e,n)?c:m(o,i).src);f(a,t,u),l()}),i=d.pointProvider(r,s);return d.onAttach(),function(){l.cancel(),r.cancel(),i(),s.src=d.src,t(),d.onDetach()}}),c=function(){i=!0},l(((r=(o=d).looks.map(function(t){return t.src})).push(o.src),o.hover&&r.push(o.hover),r),function(t){i||(e.__creepyfaceReachableImages=t,c=n(function(){delete e.__creepyfaceReachableImages}))}),function(){return c()});return s.__creepyfaceCancel=function(){u(),delete s.__creepyfaceCancel}};return y.cancel=function(t){var e=t.__creepyfaceCancel;e&&e()},y.registerPointProvider=function(t,e){r[t]=e},document.addEventListener("DOMContentLoaded",function(){for(var t=document.querySelectorAll("img[data-creepy],img[data-creepyface]"),e=0;e<t.length;e++){var n=t[e];n instanceof HTMLImageElement&&y(n)}}),y});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).creepyface=e()}(this,function(){"use strict";var i=function(o){return 1===o.length?o[0]:function(e,n){var t=o.map(function(t){return t(e,n)});return function(){return t.forEach(function(t){return t()})}}},t=function(n){var o,r=[];return function(t,e){return r.push(t),1===r.length&&(o=n(function(e){return r.forEach(function(t){return t(e)})},e)),function(){r.splice(r.indexOf(t),1),0===r.length&&o&&o()}}},e=t(function(e){var t=function(t){return e([t.clientX,t.clientY])};return window.addEventListener("mousemove",t,!0),function(){return window.removeEventListener("mousemove",t,!0)}}),s=function(t,e){return[t[0]+e[0],t[1]+e[1]]},d=function(t){return t*Math.PI/180},h=function(t){return e=Math.atan2(t[1],t[0]),n=2*Math.PI,180*((n+e%n)%n)/Math.PI;var e,n},n=t(function(r){var t=function(t){for(var e=[0,0],n=0;n<t.touches.length;n++){var o=t.touches[n];e=s(e,[o.clientX,o.clientY])}r(e)};return window.addEventListener("touchmove",t,!0),function(){return window.removeEventListener("touchmove",t,!0)}}),o={mouse:e,finger:n,pointer:i([e,n])},c=function(t){return o[t]?o[t]:(console.error("No point provider registered as '".concat(t,"', defaulting to pointer.")),o.pointer)},r=function(t){var e=t?parseFloat(t):NaN;return isNaN(e)?void 0:e},u=function(t){return{hover:t.getAttribute("data-src-hover")||void 0,looks:function(t){for(var e=/data-src-look-(\d+)/i,n=[],o=0;o<t.attributes.length;o++){var r=t.attributes[o],i=e.exec(r.name);i&&n.push({angle:parseFloat(i[1]),src:r.value})}return n.length?n:void 0}(t),points:t.getAttribute("data-points")||void 0,timeToDefault:r(t.getAttribute("data-timetodefault")),throttle:r(t.getAttribute("data-throttle"))}},a=function(){};function f(t){var e,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},o=function(r){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{},e=Object.keys(i);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(i).filter(function(t){return Object.getOwnPropertyDescriptor(i,t).enumerable}))),e.forEach(function(t){var e,n,o;e=r,o=i[n=t],n in e?Object.defineProperty(e,n,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[n]=o})}return r}({},u(t),n),r=t.getAttribute("src");if(!r)throw new Error("A default URL must be specified");return{src:r,hover:o.hover||"",pointProvider:(e=o,"function"==typeof e.points?e.points:i((e.points||"pointer").split(",").map(c))),looks:o.looks||[],timeToDefault:o.timeToDefault||1e3,throttle:o.throttle||100,onDebug:o.onDebug||a,onAttach:o.onAttach||a,onDetach:o.onDetach||a}}var l=function(r,i){var c=[];r.forEach(function(t){var e,n,o;e=t,n=function(t){c.push(t),c.length===r.length&&i(c)},(o=new Image).src=e,o.onload=o.onerror=function(){o.naturalWidth||console.error("Creepyface was unable to load ".concat(e)),delete o.onload,delete o.onerror,n(o)}})};function v(r,i,c,u){var a,f=!1,l=0;function s(){a&&clearTimeout(a)}function t(){var t=this,e=Date.now()-l,n=arguments;function o(){l=Date.now(),c.apply(t,n)}f||(u&&!a&&o(),s(),void 0===u&&r<e?o():!0!==i&&(a=setTimeout(u?function(){a=void 0}:o,void 0===u?r-e:r)))}return"boolean"!=typeof i&&(u=c,c=i,i=void 0),t.cancel=function(){s(),f=!0},t}var p=function(t,e){return h((r=s([window.scrollX,window.scrollY],e),c=t.getBoundingClientRect(),u=c.left,a=c.top,f=c.width,l=c.height,i=[u+window.pageXOffset+f/2,a+window.pageYOffset+l/2],n=[r[0]-i[0],r[1]-i[1]],o=90,[n[0]*Math.cos(d(o))-n[1]*Math.sin(d(o)),n[0]*Math.sin(d(o))+n[1]*Math.cos(d(o))]));var n,o,r,i,c,u,a,f,l},g=function(t){return 180<Math.abs(t)?t-360*(t<0?-1:1):t},m=function(t,e){return e.slice(0).sort((n=t,function(t,e){return Math.abs(g(t.angle-n))-Math.abs(g(e.angle-n))}))[0];var n},b=function(t,e,n){return e<=t&&t<=n},w=function(t,e){return document.elementFromPoint?document.elementFromPoint(e[0],e[1])===t:(n=t.getBoundingClientRect(),o=[e[0],e[1]],r=n.left,i=n.top,c=n.right,u=n.bottom,b(o[0],r,c)&&b(o[1],i,u));var n,o,r,i,c,u},y=function(s,t){var e,n,o,r,i,c,d=f(s,t);return s.__creepyfaceCancel=(e=s,i=!(n=function(t){var e,n,o,f=function(t,e,n){s.src=t,d.onDebug({src:t,point:e,angle:n,options:d})},l=(e=d.timeToDefault,n=function(){return f(d.src)},void 0===o?v(e,n,!1):v(e,o,!1!==n)),r=v(d.throttle,function(t){if(!t)return f(d.src);var e,n,o,r,i,c,u=p(s,t),a=(e=s,n=t,o=u,i=(r=d).looks,(c=r.hover)&&w(e,n)?c:m(o,i).src);f(a,t,u),l()}),i=d.pointProvider(r,s);return d.onAttach(),function(){l.cancel(),r.cancel(),i(),s.src=d.src,delete s.__creepyfaceCancel,t(),d.onDetach()}}),c=function(){i=!0},l(((r=(o=d).looks.map(function(t){return t.src})).push(o.src),o.hover&&r.push(o.hover),r),function(t){e.__creepyfaceReachableImages=t,c=n(function(){delete e.__creepyfaceReachableImages}),(i||t.some(function(t){return!t.naturalWidth}))&&c()}),function(){return c()})};return y.cancel=function(t){var e=t.__creepyfaceCancel;e&&e()},y.registerPointProvider=function(t,e){o[t]=e},document.addEventListener("DOMContentLoaded",function(){for(var t=document.querySelectorAll("img[data-creepy],img[data-creepyface]"),e=0;e<t.length;e++)y(t[e])}),y});

dist/providers/combined.js

@@ -1,4 +0,6 @@
-export default (providers) => (consumer, img) => {
-    const cancels = providers.map(p => p(consumer, img));
-    return () => cancels.forEach(cancel => cancel());
-};
+export default (providers) => providers.length === 1
+    ? providers[0]
+    : (consumer, img) => {
+        const cancels = providers.map(p => p(consumer, img));
+        return () => cancels.forEach(cancel => cancel());
+    };

dist/types.d.ts

 export declare type Point = [number, number];
 export declare type Cancel = () => void;
 export declare type Consumer<T> = (t: T) => void;
-export declare type PointProvider = (consumer: Consumer<Point>, img: HTMLImageElement) => Cancel;
+export declare type PointProvider = (consumer: Consumer<Point | null>, img: HTMLImageElement) => Cancel;

dist/util/algebra.d.ts

@@ -7,3 +7,3 @@ import { Point } from '../types';
 export declare const add: (v1: Point, v2: Point) => Point;
-export declare const sign: (n: number) => 1 | 0 | -1;
+export declare const sign: (n: number) => 1 | -1;
 export declare const rad: (deg: number) => number;
@@ -10,0 +10,0 @@ export declare const deg: (rad: number) => number;

dist/util/algebra.js

@@ -9,3 +9,3 @@ export const diff = (v1, v2) => [
 ];
-export const sign = (n) => (n ? (n < 0 ? -1 : 1) : 0);
+export const sign = (n) => (n < 0 ? -1 : 1);
 export const rad = (deg) => (deg * Math.PI) / 180;
@@ -12,0 +12,0 @@ export const deg = (rad) => (rad * 180) / Math.PI;

dist/util/options.js

 import { retrieve as retrievePointProvider } from '../providers/store';
+import combined from '../providers/combined';
 const getLooks = (img) => {
@@ -29,3 +30,3 @@ const regex = /data-src-look-(\d+)/i;
     }
-    return retrievePointProvider(userOptions.points || 'pointer');
+    return combined((userOptions.points || 'pointer').split(',').map(retrievePointProvider));
 };
@@ -32,0 +33,0 @@ const noop = () => undefined;

dist/util/preload.js

@@ -36,4 +36,2 @@ const getSrcs = (options) => {
     loadImages(getSrcs(options), imgs => {
-        if (cancelled)
-            return;
         img.__creepyfaceReachableImages = imgs;
@@ -43,4 +41,7 @@ cancel = callback(() => {
         });
+        if (cancelled || imgs.some(img => !img.naturalWidth)) {
+            cancel();
+        }
     });
     return () => cancel();
 }

package.json

 {
   "name": "creepyface",
-  "version": "7.0.0",
+  "version": "7.1.0-beta.1",
   "keywords": [
@@ -37,3 +37,2 @@ "face",
     "lint-staged": "^8.1.0",
-    "lolex": "^3.0.0",
     "npm-run-all": "^4.1.5",
@@ -40,0 +39,0 @@ "prettier": "^1.15.3",

README.md

@@ -5,3 +5,3 @@ # [Creepyface](https://creepyface.io) · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/4lejandrito/creepyface/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/creepyface.svg?style=flat)](https://www.npmjs.com/package/creepyface) [![Build Status](https://api.travis-ci.org/4lejandrito/creepyface.svg?branch=master)](https://travis-ci.org/4lejandrito/creepyface) [![Coverage Status](https://coveralls.io/repos/github/4lejandrito/creepyface/badge.svg?branch=master)](https://coveralls.io/github/4lejandrito/creepyface?branch=master)
 
-[Demo](https://creepyface.io)
+[Codepen](https://codepen.io/4lejandrito/pen/vbgxEB)
 
@@ -93,3 +93,3 @@ ![Example animated gif of a face looking at the pointer](example.gif)
 
-For example, to make your face look at a random point every half a second you need to register a point provider:
+For example, to make your face look at a random point every half a second (see [codepen](https://codepen.io/4lejandrito/pen/ZEYJLrN)) you need to register a [point provider](https://github.com/4lejandrito/creepyface/blob/master/src/types.ts#L4-L7):
 
@@ -139,3 +139,3 @@ ```js
 creepyface(img, {
-  // An provider that provides the points to look at
+  // Provides the points to look at
   points: (consumer, img) => {
@@ -142,0 +142,0 @@ const interval = setInterval(

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27106

increased by1.15%

Dev dependency count

30

decreased by-3.23%

Lines of code

356

increased by0.28%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes