creepyface
Advanced tools
Comparing version 4.2.4 to 4.3.0-beta.0
import { UserOptions } from './util/options'; | ||
import { Cancel } from './util/types'; | ||
import { Observable } from './observables/util/observable'; | ||
import { Vector } from './util/algebra'; | ||
declare const creepyface: { | ||
(img: HTMLImageElement, options?: UserOptions | undefined): Cancel; | ||
cancel(img: HTMLImageElement): void; | ||
registerPointSource(name: string, observable: Observable<Vector>): void; | ||
}; | ||
export default creepyface; |
import attach from './util/attach'; | ||
import watchElement from './util/watch-element'; | ||
import noop from './util/noop'; | ||
import * as observableStore from './observables/util/store'; | ||
const creepyface = (img, options) => { | ||
@@ -21,2 +22,5 @@ creepyface.cancel(img); | ||
}; | ||
creepyface.registerPointSource = (name, observable) => { | ||
observableStore.register(name, observable); | ||
}; | ||
document.addEventListener('DOMContentLoaded', () => { | ||
@@ -23,0 +27,0 @@ const elements = document.querySelectorAll('img[data-creepy],img[data-creepyface]'); |
@@ -1,1 +0,1 @@ | ||
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).creepyface=n()}(this,function(){"use strict";var s=function(o,c){var u=[];o.forEach(function(e){var n,t,r;n=e,t=function(e){u.push(e),u.length===o.length&&c(u)},(r=new Image).src=n,r.onload=r.onerror=function(){r.naturalWidth||console.error("Creepyface was unable to load ".concat(n)),delete r.onload,delete r.onerror,t(r)}})};var c=function(n){return{subscribe:function(e){return{unsubscribe:n({next:e})}}}},t=[];document.addEventListener("mousemove",function(n){return t.forEach(function(e){return e.next([n.clientX,n.clientY])})},!0);var u=c(function(e){return t.push(e),function(){t.splice(t.indexOf(e),1)}}),i=function(e,t){return e.map(function(e,n){return e+t[n]})},a=function(e){return e*Math.PI/180},f=function(e){return n=Math.atan2(e[1],e[0]),t=2*Math.PI,180*((t+n%t)%t)/Math.PI;var n,t},n=[];document.addEventListener("touchmove",function(o){return n.forEach(function(e){for(var n=[0,0],t=0;t<o.touches.length;t++){var r=o.touches[t];n=i(n,[r.clientX,r.clientY])}e.next(n)})},!0);var l=c(function(e){return n.push(e),function(){n.splice(n.indexOf(e),1)}}),d=function(){},r=function(e){var n=e?parseFloat(e):NaN;return isNaN(n)?void 0:n},v=function(e){return{hover:e.getAttribute("data-src-hover")||void 0,looks:function(e){for(var n=/data-src-look-(\d+)/i,t=[],r=0;r<e.attributes.length;r++){var o=e.attributes[r],c=n.exec(o.name);c&&t.push({angle:parseFloat(c[1]),src:o.value})}return t.length?t:void 0}(e),timeToDefault:r(e.getAttribute("data-timetodefault")),throttle:r(e.getAttribute("data-throttle")),fieldOfVision:r(e.getAttribute("data-fieldofvision")),resetOnCancel:!("false"===e.getAttribute("data-resetoncancel"))}};function h(e){var t,n=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},r=function(o){for(var e=1;e<arguments.length;e++){var c=null!=arguments[e]?arguments[e]:{},n=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(c).filter(function(e){return Object.getOwnPropertyDescriptor(c,e).enumerable}))),n.forEach(function(e){var n,t,r;n=o,r=c[t=e],t in n?Object.defineProperty(n,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[t]=r})}return o}({},v(e),n),o=e.getAttribute("src");if(!o)throw new Error("A default URL must be specified");return{fieldOfVision:r.fieldOfVision||150,src:o,hover:r.hover||"",points:r.points||(t=[u,l],c(function(n){var e=t.map(function(e){return e.subscribe(n.next)});return function(){return e.forEach(function(e){return e.unsubscribe()})}})),looks:r.looks||[],timeToDefault:r.timeToDefault||1e3,resetOnCancel:!(!1===r.resetOnCancel),throttle:r.throttle||100,onDebug:r.onDebug||d,onAttach:r.onAttach||d,onDetach:r.onDetach||d}}var b=function(e){var n=e.getBoundingClientRect(),t=n.top+window.pageYOffset+n.height/2,r=n.left+window.pageXOffset+n.width/2;return{y:t,x:r}};var m=function(e,n){return f((o=i([window.scrollX,window.scrollY],n),u=b(e),c=[u.x,u.y],t=o.map(function(e,n){return e-c[n]}),r=90,[t[0]*Math.cos(a(r))-t[1]*Math.sin(a(r)),t[0]*Math.sin(a(r))+t[1]*Math.cos(a(r))]));var t,r,o,c,u},p=function(e){return 180<Math.abs(e)?e-360*((n=e)?n<0?-1:1:0):e;var n},g=function(e,n){return n.slice(0).sort((t=e,function(e,n){return Math.abs(p(e.angle-t))-Math.abs(p(n.angle-t))}))[0];var t},y=function(e,n,t){return n<=e&&e<=t},O=function(e,n){return document.elementFromPoint?document.elementFromPoint(n[0],n[1])===e:(t=e.getBoundingClientRect(),r=[n[0],n[1]],o=t.left,c=t.top,u=t.right,i=t.bottom,y(r[0],o,u)&&y(r[1],c,i));var t,r,o,c,u,i},w=function(h,b){return c(function(r){var e,n,t,o,c,u,i,a,f,s,l,d=(e=function(){return r.next({src:b.src,options:b})},n=b.timeToDefault,(o=function(){t&&clearTimeout(t),t=setTimeout(function(){t=null,e()},n)}).clear=function(){t&&(clearTimeout(t),t=null)},o),v=b.points.subscribe((c=function(e){var n=m(h,e),t=function(e,n,t,r){var o=r.looks,c=r.hover,u=r.fieldOfVision,i=r.src;if(c&&O(e,n))i=c;else{var a=g(t,o);Math.abs(p(a.angle-t))<u/2&&(i=a.src)}return i}(h,e,n,b);r.next({point:e,angle:n,src:t,options:b}),d()},u=b.throttle,f=0,s=function(){f=Date.now(),i=null,c(a)},(l=function(e){var n=Date.now(),t=u-(n-f);a=e,t<=0||u<t?(i&&(clearTimeout(i),i=null),f=n,c(e)):i||(i=setTimeout(s,t))}).clear=function(){i&&clearTimeout(i),f=0,i=null},l));return function(){d.clear(),v.unsubscribe()}})},M=function(t,e){var n,r,o,c,u=h(t,e),i=function(e){t.src=e},a=!1,f=function(){a=!0};return n=t,r=function(e){if(!a){u.onAttach();var n=w(t,u).subscribe(function(e){i(e.src),u.onDebug(e)});f=function(){n.unsubscribe(),u.resetOnCancel&&i(u.src),u.onDetach(),e()}}},s((c=(o=u).looks.map(function(e){return e.src}),o.src&&c.push(o.src),o.hover&&c.push(o.hover),c),function(e){n.creepyfaceReachableImages=e,r(function(){delete n.creepyfaceReachableImages})}),function(){return f()}},o=function e(n,t){e.cancel(n);var r=d,o=function(t,n,r){var o=function(e){return e?n():r()};if(MutationObserver){var c=document.body&&document.body.contains(t);c&&o(!0);var e=new MutationObserver(function(e){var n=document.body&&document.body.contains(t);!n&&c?(o(!1),c=!1):n&&!c&&(o(!0),c=!0)});return e.observe(document,{childList:!0,subtree:!0}),function(){return e.disconnect()}}return document.body&&document.body.contains(t)&&o(!0),t.addEventListener("DOMNodeInserted",function(){return o(!0)},!1),t.addEventListener("DOMNodeRemoved",function(){return o(!1)},!1),d}(n,function(){r=M(n,t)},function(){return e.cancel(n)});return n.creepyfaceCancel=function(){o(),r(),delete n.creepyfaceCancel}};return o.cancel=function(e){var n=e.creepyfaceCancel;n&&n()},document.addEventListener("DOMContentLoaded",function(){for(var e=document.querySelectorAll("img[data-creepy],img[data-creepyface]"),n=0;n<e.length;n++){var t=e[n];t instanceof HTMLImageElement&&o(t)}}),o}); | ||
!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 s=function(o,c){var u=[];o.forEach(function(t){var e,n,r;e=t,n=function(t){u.push(t),u.length===o.length&&c(u)},(r=new Image).src=e,r.onload=r.onerror=function(){r.naturalWidth||console.error("Creepyface was unable to load ".concat(e)),delete r.onload,delete r.onerror,n(r)}})};function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var u=function(){},t=function(e){return{subscribe:function(t){return{unsubscribe:e({next:t})}}}},r=[];document.addEventListener("mousemove",function(e){return r.forEach(function(t){return t.next([e.clientX,e.clientY])})},!0);var e=t(function(t){return r.push(t),function(){r.splice(r.indexOf(t),1)}}),i=function(t,n){return t.map(function(t,e){return t+n[e]})},a=function(t){return t*Math.PI/180},f=function(t){return e=Math.atan2(t[1],t[0]),n=2*Math.PI,180*((n+e%n)%n)/Math.PI;var e,n},c=[];document.addEventListener("touchmove",function(o){return c.forEach(function(t){for(var e=[0,0],n=0;n<o.touches.length;n++){var r=o.touches[n];e=i(e,[r.clientX,r.clientY])}t.next(e)})},!0);var o,l=t(function(t){return c.push(t),function(){c.splice(c.indexOf(t),1)}}),d={pointer:(o=[e,l],t(function(e){var t=o.map(function(t){return t.subscribe(e.next)});return function(){return t.forEach(function(t){return t.unsubscribe()})}}))},v=function(t){var e=t?parseFloat(t):NaN;return isNaN(e)?void 0:e},b=function(t){return{hover:t.getAttribute("data-src-hover")||void 0,looks:function(t){for(var e=/data-src-look-(\d+)/i,n=[],r=0;r<t.attributes.length;r++){var o=t.attributes[r],c=e.exec(o.name);c&&n.push({angle:parseFloat(c[1]),src:o.value})}return n.length?n:void 0}(t),points:t.getAttribute("data-points")||void 0,timeToDefault:v(t.getAttribute("data-timetodefault")),throttle:v(t.getAttribute("data-throttle")),fieldOfVision:v(t.getAttribute("data-fieldofvision")),resetOnCancel:!("false"===t.getAttribute("data-resetoncancel"))}},h=function(t){return"object"===n(t.points)?t.points:(e=t.points||"pointer",d[e]?d[e]:(console.error("No observable registered as '".concat(e,"', defaulting to pointer.")),d.pointer));var e};function p(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{},n=function(o){for(var t=1;t<arguments.length;t++){var c=null!=arguments[t]?arguments[t]:{},e=Object.keys(c);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(c).filter(function(t){return Object.getOwnPropertyDescriptor(c,t).enumerable}))),e.forEach(function(t){var e,n,r;e=o,r=c[n=t],n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r})}return o}({},b(t),e),r=t.getAttribute("src");if(!r)throw new Error("A default URL must be specified");return{fieldOfVision:n.fieldOfVision||150,src:r,hover:n.hover||"",points:h(n),looks:n.looks||[],timeToDefault:n.timeToDefault||1e3,resetOnCancel:!(!1===n.resetOnCancel),throttle:n.throttle||100,onDebug:n.onDebug||u,onAttach:n.onAttach||u,onDetach:n.onDetach||u}}var m=function(t){var e=t.getBoundingClientRect(),n=e.top+window.pageYOffset+e.height/2,r=e.left+window.pageXOffset+e.width/2;return{y:n,x:r}};var g=function(t,e){return f((o=i([window.scrollX,window.scrollY],e),u=m(t),c=[u.x,u.y],n=o.map(function(t,e){return t-c[e]}),r=90,[n[0]*Math.cos(a(r))-n[1]*Math.sin(a(r)),n[0]*Math.sin(a(r))+n[1]*Math.cos(a(r))]));var n,r,o,c,u},y=function(t){return 180<Math.abs(t)?t-360*((e=t)?e<0?-1:1:0):t;var e},O=function(t,e){return e.slice(0).sort((n=t,function(t,e){return Math.abs(y(t.angle-n))-Math.abs(y(e.angle-n))}))[0];var n},w=function(t,e,n){return e<=t&&t<=n},M=function(t,e){return document.elementFromPoint?document.elementFromPoint(e[0],e[1])===t:(n=t.getBoundingClientRect(),r=[e[0],e[1]],o=n.left,c=n.top,u=n.right,i=n.bottom,w(r[0],o,u)&&w(r[1],c,i));var n,r,o,c,u,i},D=function(b,h){return t(function(r){var t,e,n,o,c,u,i,a,f,s,l,d=(t=function(){return r.next({src:h.src,options:h})},e=h.timeToDefault,(o=function(){n&&clearTimeout(n),n=setTimeout(function(){n=null,t()},e)}).clear=function(){n&&(clearTimeout(n),n=null)},o),v=h.points.subscribe((c=function(t){var e=g(b,t),n=function(t,e,n,r){var o=r.looks,c=r.hover,u=r.fieldOfVision,i=r.src;if(c&&M(t,e))i=c;else{var a=O(n,o);Math.abs(y(a.angle-n))<u/2&&(i=a.src)}return i}(b,t,e,h);r.next({point:t,angle:e,src:n,options:h}),d()},u=h.throttle,f=0,s=function(){f=Date.now(),i=null,c(a)},(l=function(t){var e=Date.now(),n=u-(e-f);a=t,n<=0||u<n?(i&&(clearTimeout(i),i=null),f=e,c(t)):i||(i=setTimeout(s,n))}).clear=function(){i&&clearTimeout(i),f=0,i=null},l));return function(){d.clear(),v.unsubscribe()}})},x=function(n,t){var e,r,o,c,u=p(n,t),i=function(t){n.src=t},a=!1,f=function(){a=!0};return e=n,r=function(t){if(!a){u.onAttach();var e=D(n,u).subscribe(function(t){i(t.src),u.onDebug(t)});f=function(){e.unsubscribe(),u.resetOnCancel&&i(u.src),u.onDetach(),t()}}},s((c=(o=u).looks.map(function(t){return t.src}),o.src&&c.push(o.src),o.hover&&c.push(o.hover),c),function(t){e.creepyfaceReachableImages=t,r(function(){delete e.creepyfaceReachableImages})}),function(){return f()}},A=function t(e,n){t.cancel(e);var r=u,o=function(n,e,r){var o=function(t){return t?e():r()};if(MutationObserver){var c=document.body.contains(n);c&&o(!0);var t=new MutationObserver(function(t){var e=document.body.contains(n);!e&&c?(o(!1),c=!1):e&&!c&&(o(!0),c=!0)});return t.observe(document,{childList:!0,subtree:!0}),function(){return t.disconnect()}}return document.body.contains(n)&&o(!0),n.addEventListener("DOMNodeInserted",function(){return o(!0)},!1),n.addEventListener("DOMNodeRemoved",function(){return o(!1)},!1),u}(e,function(){r=x(e,n)},function(){return t.cancel(e)});return e.creepyfaceCancel=function(){o(),r(),delete e.creepyfaceCancel}};return A.cancel=function(t){var e=t.creepyfaceCancel;e&&e()},A.registerPointSource=function(t,e){var n;n=e,d[t]=n},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&&A(n)}}),A}); |
import { Observable } from './util/observable'; | ||
declare const _default: (observables: Observable<number[]>[]) => Observable<number[]>; | ||
import { Vector } from '../util/algebra'; | ||
declare const _default: (observables: Observable<Vector>[]) => Observable<Vector>; | ||
export default _default; |
@@ -1,2 +0,3 @@ | ||
declare const _default: import("./util/observable").Observable<number[]>; | ||
import { Vector } from '../util/algebra'; | ||
declare const _default: import("./util/observable").Observable<Vector>; | ||
export default _default; |
@@ -1,2 +0,3 @@ | ||
declare const _default: import("./util/observable").Observable<number[]>; | ||
import { Vector } from '../util/algebra'; | ||
declare const _default: import("./util/observable").Observable<Vector>; | ||
export default _default; |
@@ -1,2 +0,3 @@ | ||
declare const _default: (img: HTMLImageElement, point: number[]) => number; | ||
import { Vector } from '../../util/algebra'; | ||
declare const _default: (img: HTMLImageElement, point: Vector) => number; | ||
export default _default; |
@@ -0,3 +1,4 @@ | ||
import { Vector } from '../../util/algebra'; | ||
import { Options } from '../../util/options'; | ||
declare const _default: (img: HTMLImageElement, point: number[], angle: number, options: Options) => string; | ||
declare const _default: (img: HTMLImageElement, point: Vector, angle: number, options: Options) => string; | ||
export default _default; |
@@ -5,4 +5,4 @@ export declare type Vector = Array<number>; | ||
export declare type Angle = Degrees; | ||
export declare const diff: (v1: number[], v2: number[]) => number[]; | ||
export declare const add: (v1: number[], v2: number[]) => number[]; | ||
export declare const diff: (v1: Vector, v2: Vector) => Vector; | ||
export declare const add: (v1: Vector, v2: Vector) => Vector; | ||
export declare const sign: (n: number) => 1 | 0 | -1; | ||
@@ -12,3 +12,3 @@ export declare const rad: (deg: number) => number; | ||
export declare const mod: (n: number, m: number) => number; | ||
export declare const getAngle: (v: number[]) => number; | ||
export declare const rotate: (v: number[], deg: number) => number[]; | ||
export declare const getAngle: (v: Vector) => number; | ||
export declare const rotate: (v: Vector, deg: number) => number[]; |
@@ -35,3 +35,3 @@ import { Observable } from '../observables/util/observable'; | ||
looks?: Array<Look>; | ||
points?: Observable<Vector>; | ||
points?: Observable<Vector> | string; | ||
timeToDefault?: Time; | ||
@@ -38,0 +38,0 @@ resetOnCancel?: boolean; |
@@ -1,5 +0,3 @@ | ||
import mousePoints from '../observables/mouse'; | ||
import fingerPoints from '../observables/finger'; | ||
import combined from '../observables/combined'; | ||
import noop from './noop'; | ||
import * as observableStore from '../observables/util/store'; | ||
const getLooks = (img) => { | ||
@@ -24,2 +22,3 @@ const regex = /data-src-look-(\d+)/i; | ||
looks: getLooks(img), | ||
points: img.getAttribute('data-points') || undefined, | ||
timeToDefault: getFloat(img.getAttribute('data-timetodefault')), | ||
@@ -30,2 +29,8 @@ throttle: getFloat(img.getAttribute('data-throttle')), | ||
}); | ||
const getPoints = (userOptions) => { | ||
if (typeof userOptions.points === 'object') { | ||
return userOptions.points; | ||
} | ||
return observableStore.retrieve(userOptions.points || 'pointer'); | ||
}; | ||
export default function getOptions(img, options = {}) { | ||
@@ -40,3 +45,3 @@ const userOptions = { ...fromImage(img), ...options }; | ||
hover: userOptions.hover || '', | ||
points: userOptions.points || combined([mousePoints, fingerPoints]), | ||
points: getPoints(userOptions), | ||
looks: userOptions.looks || [], | ||
@@ -43,0 +48,0 @@ timeToDefault: userOptions.timeToDefault || 1000, |
@@ -5,7 +5,7 @@ import noop from './noop'; | ||
if (MutationObserver) { | ||
let wasInDOM = document.body && document.body.contains(node); | ||
let wasInDOM = document.body.contains(node); | ||
if (wasInDOM) | ||
isReady(true); | ||
const observer = new MutationObserver(mutations => { | ||
const isInDOM = document.body && document.body.contains(node); | ||
const isInDOM = document.body.contains(node); | ||
if (!isInDOM && wasInDOM) { | ||
@@ -24,3 +24,3 @@ isReady(false); | ||
else { | ||
if (document.body && document.body.contains(node)) | ||
if (document.body.contains(node)) | ||
isReady(true); | ||
@@ -27,0 +27,0 @@ node.addEventListener('DOMNodeInserted', () => isReady(true), false); |
{ | ||
"name": "creepyface", | ||
"version": "4.2.4", | ||
"version": "4.3.0-beta.0", | ||
"keywords": [ | ||
@@ -29,17 +29,16 @@ "face", | ||
"babel-core": "7.0.0-bridge.0", | ||
"babel-jest": "^23.6.0", | ||
"chromedriver": "^2.45.0", | ||
"babel-jest": "^24.9.0", | ||
"coveralls": "^3.0.2", | ||
"eslint": "^5.11.1", | ||
"geckodriver": "^1.14.1", | ||
"geckodriver": "^1.19.1", | ||
"husky": "^1.3.1", | ||
"jest": "^23.6.0", | ||
"jest": "^24.9.0", | ||
"lint-staged": "^8.1.0", | ||
"lolex": "^3.0.0", | ||
"npm-run-all": "^4.1.5", | ||
"prettier": "^1.15.3", | ||
"rimraf": "^2.6.3", | ||
"prettier": "^1.15.3", | ||
"rollup": "^1.0.0", | ||
"rollup-plugin-babel": "^4.2.0", | ||
"rollup-plugin-browsersync": "^1.0.0", | ||
"rollup-plugin-browsersync": "^1.1.0", | ||
"rollup-plugin-commonjs": "^9.2.0", | ||
@@ -51,7 +50,7 @@ "rollup-plugin-node-resolve": "^4.0.0", | ||
"standard": "^12.0.1", | ||
"ts-jest": "^23.10.5", | ||
"ts-jest": "^24.2.0", | ||
"tslint": "^5.12.0", | ||
"tslint-config-prettier": "^1.17.0", | ||
"tslint-config-standard": "^8.0.1", | ||
"typescript": "^3.2.2" | ||
"typescript": "^3.7.3" | ||
}, | ||
@@ -58,0 +57,0 @@ "dependencies": { |
@@ -101,1 +101,7 @@ # [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) | ||
MIT, see [LICENSE](https://github.com/4lejandrito/creepyface/blob/master/LICENSE) for details. | ||
## Big Thanks | ||
Cross-browser Testing Platform and Open Source ❤️ provided by [Sauce Labs][homepage]. | ||
[homepage]: https://saucelabs.com |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
30524
29
40
510
107
2