creepyface-custom-element
Version:
Creepyface Custom Element is a [Creepyface](https://github.com/4lejandrito/creepyface) wrapper that registers the `creepy-face` custom element.
2 lines (1 loc) • 8.66 kB
JavaScript
!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";function u(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function a(e){return(a=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function f(e,t){return(f=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}function l(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(e){return!1}}function r(e,t,n){return(r=l()?Reflect.construct.bind():function(e,t,n){var r=[null];r.push.apply(r,t);t=new(Function.bind.apply(e,r));return n&&f(t,n.prototype),t}).apply(null,arguments)}function e(e){var n="function"==typeof Map?new Map:void 0;return function(e){if(null===e||-1===Function.toString.call(e).indexOf("[native code]"))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(e))return n.get(e);n.set(e,t)}function t(){return r(e,arguments,a(this).constructor)}return t.prototype=Object.create(e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),f(t,e)}(e)}function s(e,t){if(t&&("object"==typeof t||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");t=e;if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}var p,b,o,n,c,d,y;function t(t,e){var n,r=Object.keys(t);return Object.getOwnPropertySymbols&&(n=Object.getOwnPropertySymbols(t),e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,n)),r}function h(r){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{};e%2?t(Object(o),!0).forEach(function(e){var t=r,n=o[e];e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(o)):t(Object(o)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(o,e))})}return r}function v(e){return e=e?parseFloat(e):NaN,isNaN(e)?void 0:e}function w(e){return e*Math.PI/180}function O(u,a,e){var f,t=(e=e||{}).noTrailing,l=void 0!==t&&t,s=void 0!==(t=e.noLeading)&&t,p=void 0===(t=e.debounceMode)?void 0:t,d=!1,h=0;function v(){f&&clearTimeout(f)}function n(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];var r=this,o=Date.now()-h;function i(){h=Date.now(),a.apply(r,t)}function c(){f=void 0}d||(s||!p||f||i(),v(),void 0===p&&u<o?s?(h=Date.now(),l||(f=setTimeout(p?c:i,u))):i():!0!==l&&(f=setTimeout(p?c:i,void 0===p?u-o:u)))}return n.cancel=function(e){e=void 0!==(e=(e||{}).upcomingOnly)&&e,v(),d=!e},n}function i(e,t){return{provider:e,mapper:1<arguments.length&&void 0!==t?t:function(e){return e},registrations:[]}}function g(e){return o[e]||(console.error("No point provider registered as '".concat(e,"'.")),null)}function P(o,i,e){var t=c(e).map(function(t){var e=t.registrations,n=t.provider,r={consumer:i,img:o};return e.push(r),1===e.length&&(t.cancel=n(function(e){return d(e,t)})),function(){e.splice(e.indexOf(r),1),0===e.length&&(t.cancel&&t.cancel(),delete t.cancel)}});return function(){return t.forEach(function(e){return e()})}}function j(e,t,n){return t<=e&&e<=n}function m(g,e){function t(){return delete g.__creepyfaceCancel}var n,r,o,i,c,u,a,f,l,m=function(e,t){if(t=1<arguments.length&&void 0!==t?t:{},t=h(h({},{hover:(n=e).getAttribute("data-src-hover")||void 0,looks:function(e){for(var t=/data-src-look-(\d+)/i,n=[],r=0;r<e.attributes.length;r++){var o=e.attributes[r],i=t.exec(o.name);i&&n.push({angle:parseFloat(i[1]),src:o.value})}return n.length?n:void 0}(n),points:n.getAttribute("data-points")||void 0,timeToDefault:v(n.getAttribute("data-timetodefault")),fieldOfVision:v(n.getAttribute("data-fieldofvision"))}),t),e=e.getAttribute("src"))return{src:e,hover:t.hover||"",points:t.points,looks:t.looks||[],timeToDefault:void 0!==t.timeToDefault?t.timeToDefault:1e3,fieldOfVision:t.fieldOfVision||150,optimizePerformance:t.optimizePerformance,onDebug:t.onDebug||p,onAttach:t.onAttach||p,onDetach:t.onDetach||p};var n;throw new Error("A default URL must be specified")}(g,e);n=g,o=t,i=!(r=function(){function t(e){if(!e)return h(m.src);var t,n,r,o,i,c,u,a,f,l,s,p=g,p=(u=b([window.scrollX,window.scrollY],e),f=(a=(a=p).getBoundingClientRect()).left,l=a.top,s=a.width,a=a.height,f=[f+window.pageXOffset+s/2,l+window.pageYOffset+a/2],s=[u[0]-f[0],u[1]-f[1]],l=90,a=[s[0]*Math.cos(w(l))-s[1]*Math.sin(w(l)),s[0]*Math.sin(w(l))+s[1]*Math.cos(w(l))],a=Math.atan2(a[1],a[0]),((u=2*Math.PI)+a%u)%u*180/Math.PI),d=(f=g,s=p,a=(l=m).looks,u=l.hover,c=l.fieldOfVision,u&&(t=f,o=e,!(n=l).optimizePerformance&&document.elementFromPoint?document.elementFromPoint(o[0],o[1])===t:(n=t.getBoundingClientRect(),t=[o[0],o[1]],o=n.left,r=n.top,d=n.right,n=n.bottom,j(t[0],o,d)&&j(t[1],r,n)))?u:(0<a.length&&(o=s,f=a.slice(0).sort((i=o,function(e,t){return Math.abs(y(e.angle-i))-Math.abs(y(t.angle-i))}))[0],Math.abs(y(f.angle-s))<=c/2)?f:l).src);h(d,e,p),0<m.timeToDefault&&v()}function h(e,t,n){g.src=e,m.onDebug({src:e,point:t,angle:n,options:m})}var e,v=O(m.timeToDefault,function(){return h(m.src)},{debounceMode:!1!==(void 0!==(e={}.atBegin)&&e)}),n=P(g,t,m.points);return m.onAttach({setPointProvider:function(e){n(),n=P(g,t,e)}}),function(e){v.cancel(),n(),e||(g.src=m.src),m.onDetach()}}),c=function(){i=!0},(l=(e=m).looks.map(function(e){return e.src})).push(e.src),e.hover&&l.push(e.hover),a=function(e){if(!i){if(e.some(function(e){return!e.naturalWidth}))return o();n.__creepyfaceReachableImages=e;var t=r();c=function(e){t(e),delete n.__creepyfaceReachableImages}}},f=[],(u=l).forEach(function(e){var t,n=e,r=function(e){f.push(e),f.length===u.length&&a(f)};(t=new Image).src=n,t.onload=t.onerror=function(){t.naturalWidth||console.error("Creepyface was unable to load ".concat(n)),t.onload=null,t.onerror=null,r(t)}});return g.__creepyfaceCancel=function(e){c(e),t()}}p=function(){},b=function(e,t){return[e[0]+t[0],e[1]+t[1]]},o={mouse:i(function(t){function e(e){return t([e.clientX,e.clientY])}return window.addEventListener("mousemove",e,!0),function(){return window.removeEventListener("mousemove",e,!0)}}),finger:i(function(o){function e(e){for(var t=[0,0],n=0;n<e.touches.length;n++)var r=e.touches[n],t=b(t,[r.clientX,r.clientY]);o(t)}return window.addEventListener("touchmove",e,!0),function(){return window.removeEventListener("touchmove",e,!0)}})},n=[o.mouse,o.finger],c=function(e){var t;return e&&"pointer"!==e&&(t=[],e.split(",").map(g).forEach(function(e){e&&t.push(e)}),0!==t.length)?t:n},d=O(50,function(n,e){var t=e.registrations,r=e.mapper;return t.forEach(function(e){var t=e.consumer,e=e.img;return t(r(n,e))})}),y=function(e){return 180<Math.abs(e)?e-360*(e<0?-1:1):e},m.cancel=function(e){(e=e.__creepyfaceCancel)&&e()},m.registerPointProvider=function(e,t,n){return o[e]=i(t,n)},m.mosaic=function(o){return P(new Image,function(e){var t,n=(r=o.getBoundingClientRect()).top,r=r.left;e?null!=(t=o.contentWindow)&&t.postMessage([e[0]-r,e[1]-n],"*"):null!=(t=o.contentWindow)&&t.postMessage(e,"*")})},"undefined"!=typeof window&&document.addEventListener("DOMContentLoaded",function(){for(var e=document.querySelectorAll("img[data-creepy],img[data-creepyface]"),t=0;t<e.length;t++)m(e[t]);for(var n=document.querySelectorAll("iframe[data-creepyface]"),r=0;r<n.length;r++)m.mosaic(n[r])});var D=m;customElements.define("creepy-face",function(e){var t=c;if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&f(t,e);n=c,r=l();var n,r,o,i=function(){var e,t=a(n);return s(this,r?(e=a(this).constructor,Reflect.construct(t,arguments,e)):t.apply(this,arguments))};function c(){var e=this,t=c;if(e instanceof t)return i.apply(this,arguments);throw new TypeError("Cannot call a class as a function")}return t=c,(e=[{key:"connectedCallback",value:function(){this.cancel=D(this)}},{key:"disconnectedCallback",value:function(){this.cancel&&this.cancel()}}])&&u(t.prototype,e),o&&u(t,o),Object.defineProperty(t,"prototype",{writable:!1}),c}(e(HTMLImageElement)),{extends:"img"})});