creepyface/dist/creepyface.umd.js

Creepyface is a little JavaScript library that makes your face look at the pointer.

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