react-sparkle
Version:
A React component to increase the number of sparkles in your app
1 lines • 17.9 kB
JavaScript
(()=>{"use strict";var e={n:t=>{var r=t&&t.__esModule?()=>t.default:()=>t;return e.d(r,{a:r}),r},d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{default:()=>K});const r=require("react");var n,o=e.n(r),i=[],a="ResizeObserver loop completed with undelivered notifications.";!function(e){e.BORDER_BOX="border-box",e.CONTENT_BOX="content-box",e.DEVICE_PIXEL_CONTENT_BOX="device-pixel-content-box"}(n||(n={}));var s,c=function(e){return Object.freeze(e)},u=function(e,t){this.inlineSize=e,this.blockSize=t,c(this)},l=function(){function e(e,t,r,n){return this.x=e,this.y=t,this.width=r,this.height=n,this.top=this.y,this.left=this.x,this.bottom=this.top+this.height,this.right=this.left+this.width,c(this)}return e.prototype.toJSON=function(){var e=this;return{x:e.x,y:e.y,top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.width,height:e.height}},e.fromRect=function(t){return new e(t.x,t.y,t.width,t.height)},e}(),p=function(e){return e instanceof SVGElement&&"getBBox"in e},f=function(e){if(p(e)){var t=e.getBBox(),r=t.width,n=t.height;return!r&&!n}var o=e,i=o.offsetWidth,a=o.offsetHeight;return!(i||a||e.getClientRects().length)},h=function(e){var t;if(e instanceof Element)return!0;var r=null===(t=null==e?void 0:e.ownerDocument)||void 0===t?void 0:t.defaultView;return!!(r&&e instanceof r.Element)},d="undefined"!=typeof window?window:{},v=new WeakMap,b=/auto|scroll/,y=/^tb|vertical/,g=/msie|trident/i.test(d.navigator&&d.navigator.userAgent),m=function(e){return parseFloat(e||"0")},w=function(e,t,r){return void 0===e&&(e=0),void 0===t&&(t=0),void 0===r&&(r=!1),new u((r?t:e)||0,(r?e:t)||0)},S=c({devicePixelContentBoxSize:w(),borderBoxSize:w(),contentBoxSize:w(),contentRect:new l(0,0,0,0)}),k=function(e,t){if(void 0===t&&(t=!1),v.has(e)&&!t)return v.get(e);if(f(e))return v.set(e,S),S;var r=getComputedStyle(e),n=p(e)&&e.ownerSVGElement&&e.getBBox(),o=!g&&"border-box"===r.boxSizing,i=y.test(r.writingMode||""),a=!n&&b.test(r.overflowY||""),s=!n&&b.test(r.overflowX||""),u=n?0:m(r.paddingTop),h=n?0:m(r.paddingRight),d=n?0:m(r.paddingBottom),k=n?0:m(r.paddingLeft),x=n?0:m(r.borderTopWidth),E=n?0:m(r.borderRightWidth),z=n?0:m(r.borderBottomWidth),O=k+h,A=u+d,T=(n?0:m(r.borderLeftWidth))+E,M=x+z,R=s?e.offsetHeight-M-e.clientHeight:0,C=a?e.offsetWidth-T-e.clientWidth:0,B=o?O+T:0,j=o?A+M:0,I=n?n.width:m(r.width)-B-C,D=n?n.height:m(r.height)-j-R,N=I+O+C+T,P=D+A+R+M,G=c({devicePixelContentBoxSize:w(Math.round(I*devicePixelRatio),Math.round(D*devicePixelRatio),i),borderBoxSize:w(N,P,i),contentBoxSize:w(I,D,i),contentRect:new l(k,u,I,D)});return v.set(e,G),G},x=function(e,t,r){var o=k(e,r),i=o.borderBoxSize,a=o.contentBoxSize,s=o.devicePixelContentBoxSize;switch(t){case n.DEVICE_PIXEL_CONTENT_BOX:return s;case n.BORDER_BOX:return i;default:return a}},E=function(e){var t=k(e);this.target=e,this.contentRect=t.contentRect,this.borderBoxSize=c([t.borderBoxSize]),this.contentBoxSize=c([t.contentBoxSize]),this.devicePixelContentBoxSize=c([t.devicePixelContentBoxSize])},z=function(e){if(f(e))return 1/0;for(var t=0,r=e.parentNode;r;)t+=1,r=r.parentNode;return t},O=function(){var e=1/0,t=[];i.forEach((function(r){if(0!==r.activeTargets.length){var n=[];r.activeTargets.forEach((function(t){var r=new E(t.target),o=z(t.target);n.push(r),t.lastReportedSize=x(t.target,t.observedBox),o<e&&(e=o)})),t.push((function(){r.callback.call(r.observer,n,r.observer)})),r.activeTargets.splice(0,r.activeTargets.length)}}));for(var r=0,n=t;r<n.length;r++)(0,n[r])();return e},A=function(e){i.forEach((function(t){t.activeTargets.splice(0,t.activeTargets.length),t.skippedTargets.splice(0,t.skippedTargets.length),t.observationTargets.forEach((function(r){r.isActive()&&(z(r.target)>e?t.activeTargets.push(r):t.skippedTargets.push(r))}))}))},T=[],M=0,R={attributes:!0,characterData:!0,childList:!0,subtree:!0},C=["resize","load","transitionend","animationend","animationstart","animationiteration","keyup","keydown","mouseup","mousedown","mouseover","mouseout","blur","focus"],B=function(e){return void 0===e&&(e=0),Date.now()+e},j=!1,I=new(function(){function e(){var e=this;this.stopped=!0,this.listener=function(){return e.schedule()}}return e.prototype.run=function(e){var t=this;if(void 0===e&&(e=250),!j){j=!0;var r,n=B(e);r=function(){var r=!1;try{r=function(){var e,t=0;for(A(t);i.some((function(e){return e.activeTargets.length>0}));)t=O(),A(t);return i.some((function(e){return e.skippedTargets.length>0}))&&("function"==typeof ErrorEvent?e=new ErrorEvent("error",{message:a}):((e=document.createEvent("Event")).initEvent("error",!1,!1),e.message=a),window.dispatchEvent(e)),t>0}()}finally{if(j=!1,e=n-B(),!M)return;r?t.run(1e3):e>0?t.run(e):t.start()}},function(e){if(!s){var t=0,r=document.createTextNode("");new MutationObserver((function(){return T.splice(0).forEach((function(e){return e()}))})).observe(r,{characterData:!0}),s=function(){r.textContent="".concat(t?t--:t++)}}T.push(e),s()}((function(){requestAnimationFrame(r)}))}},e.prototype.schedule=function(){this.stop(),this.run()},e.prototype.observe=function(){var e=this,t=function(){return e.observer&&e.observer.observe(document.body,R)};document.body?t():d.addEventListener("DOMContentLoaded",t)},e.prototype.start=function(){var e=this;this.stopped&&(this.stopped=!1,this.observer=new MutationObserver(this.listener),this.observe(),C.forEach((function(t){return d.addEventListener(t,e.listener,!0)})))},e.prototype.stop=function(){var e=this;this.stopped||(this.observer&&this.observer.disconnect(),C.forEach((function(t){return d.removeEventListener(t,e.listener,!0)})),this.stopped=!0)},e}()),D=function(e){!M&&e>0&&I.start(),!(M+=e)&&I.stop()},N=function(){function e(e,t){this.target=e,this.observedBox=t||n.CONTENT_BOX,this.lastReportedSize={inlineSize:0,blockSize:0}}return e.prototype.isActive=function(){var e,t=x(this.target,this.observedBox,!0);return e=this.target,p(e)||function(e){switch(e.tagName){case"INPUT":if("image"!==e.type)break;case"VIDEO":case"AUDIO":case"EMBED":case"OBJECT":case"CANVAS":case"IFRAME":case"IMG":return!0}return!1}(e)||"inline"!==getComputedStyle(e).display||(this.lastReportedSize=t),this.lastReportedSize.inlineSize!==t.inlineSize||this.lastReportedSize.blockSize!==t.blockSize},e}(),P=function(e,t){this.activeTargets=[],this.skippedTargets=[],this.observationTargets=[],this.observer=e,this.callback=t},G=new WeakMap,F=function(e,t){for(var r=0;r<e.length;r+=1)if(e[r].target===t)return r;return-1},W=function(){function e(){}return e.connect=function(e,t){var r=new P(e,t);G.set(e,r)},e.observe=function(e,t,r){var n=G.get(e),o=0===n.observationTargets.length;F(n.observationTargets,t)<0&&(o&&i.push(n),n.observationTargets.push(new N(t,r&&r.box)),D(1),I.schedule())},e.unobserve=function(e,t){var r=G.get(e),n=F(r.observationTargets,t),o=1===r.observationTargets.length;n>=0&&(o&&i.splice(i.indexOf(r),1),r.observationTargets.splice(n,1),D(-1))},e.disconnect=function(e){var t=this,r=G.get(e);r.observationTargets.slice().forEach((function(r){return t.unobserve(e,r.target)})),r.activeTargets.splice(0,r.activeTargets.length)},e}(),U=function(){function e(e){if(0===arguments.length)throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");if("function"!=typeof e)throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");W.connect(this,e)}return e.prototype.observe=function(e,t){if(0===arguments.length)throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");if(!h(e))throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");W.observe(this,e,t)},e.prototype.unobserve=function(e){if(0===arguments.length)throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");if(!h(e))throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");W.unobserve(this,e)},e.prototype.disconnect=function(){W.disconnect(this)},e.toString=function(){return"function ResizeObserver () { [polyfill code] }"},e}();function Z(e){return Z="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},Z(e)}function J(e,t){if(e){if("string"==typeof e)return L(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?L(e,t):void 0}}function L(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function V(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,(void 0,o=function(e,t){if("object"!==Z(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,"string");if("object"!==Z(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(n.key),"symbol"===Z(o)?o:String(o)),n)}var o}function X(e,t){return X=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},X(e,t)}function Y(e,t){if(t&&("object"===Z(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function H(e){return H=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},H(e)}var _=[0,6,13,20],Q={slowest:50,slower:20,slow:12,normal:7,fast:4,faster:2,fastest:0},q=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&X(e,t)}(c,e);var t,r,n,i,a,s=(i=c,a=function(){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(){var e,t=H(i);if(a){var r=H(this).constructor;e=Reflect.construct(t,arguments,r)}else e=t.apply(this,arguments);return Y(this,e)});function c(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,c),(t=s.call(this,e)).sparkleWrapper=null,t.sparkleCanvas=null,t.sparkleContext=null,t.sparkles=[],t.animationFrame=null,t.sprite=null,t}return t=c,r=[{key:"componentDidMount",value:function(){this.init()}},{key:"componentWillUnmount",value:function(){this.end()}},{key:"getColor",value:function(){var e=this.props.color;return"random"===e?c.randomHexColor():Array.isArray&&Array.isArray(e)||e instanceof Array?e[Math.floor(Math.random()*e.length)]:e}},{key:"randomSparkleSize",value:function(){var e=this.props,t=e.minSize,r=e.maxSize;return Math.floor(Math.random()*(r-t+1)+t)}},{key:"recreateSparkle",value:function(e){if(!this.sparkleCanvas)return null;var t=this.randomSparkleSize();return Object.assign(e,{position:{x:Math.floor(Math.random()*(this.sparkleCanvas.width-t)),y:Math.floor(Math.random()*(this.sparkleCanvas.height-t))},size:t,opacity:c.getOpacity(),color:this.getColor(),variant:c.getSpriteVariant()})}},{key:"createSparkle",value:function(){return this.recreateSparkle({})}},{key:"createSparkles",value:function(){for(var e=this.props.count,t=0;t<e;t+=1)this.sparkles.push(this.createSparkle())}},{key:"drawSparkles",value:function(){var e=this;if(this.sparkleCanvas&&this.sparkleContext){this.sparkleContext.clearRect(0,0,this.sparkleCanvas.width,this.sparkleCanvas.height);var t=this;this.sparkles.forEach((function(r){t.sparkleContext.save(),t.sparkleContext.globalAlpha=r.opacity,t.sparkleContext.drawImage(e.sprite,r.variant,0,7,7,r.position.x,r.position.y,r.size,r.size),r.color&&(t.sparkleContext.globalCompositeOperation="source-atop",t.sparkleContext.globalAlpha=.6,t.sparkleContext.fillStyle=r.color,t.sparkleContext.fillRect(r.position.x,r.position.y,r.size,r.size)),t.sparkleContext.restore()}))}}},{key:"updateSparkles",value:function(){var e=this,t=this.props,r=t.flicker,n=t.flickerSpeed,o=t.fadeOutSpeed,i=t.newSparkleOnFadeOut,a=this;this.animationFrame=window.requestAnimationFrame((function(t){var s=Math.floor(t);e.sparkles.forEach((function(e){if(e.opacity-=.001*o,r){var t=Q[n];s%Math.floor(Math.random()*t+1)==0&&(e.variant=c.getSpriteVariant())}e.opacity<0&&(i?a.recreateSparkle(e):e.opacity=c.getOpacity())})),a.drawSparkles(),a.updateSparkles()}))}},{key:"parentResizeObserver",value:function(){var e=window.getComputedStyle(this.sparkleWrapper.parentNode),t=e["box-sizing"],r="horizontal-tb"===e["writing-mode"],n=this;new U((function(e){var t,o,i,a=function(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=J(e))){r&&(e=r);var n=0,o=function(){};return{s:o,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,s=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return a=e.done,e},e:function(e){s=!0,i=e},f:function(){try{a||null==r.return||r.return()}finally{if(s)throw i}}}}(e);try{for(a.s();!(t=a.n()).done;){var s=t.value.borderBoxSize[0],c=s.blockSize,u=s.inlineSize,l=(i=2,function(e){if(Array.isArray(e))return e}(o=r?[u,c]:[c,u])||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i,a,s=[],c=!0,u=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=i.call(r)).done)&&(s.push(n.value),s.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=r.return&&(a=r.return(),Object(a)!==a))return}finally{if(u)throw o}}return s}}(o,i)||J(o,i)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),p=l[0],f=l[1];n.sizeCanvas(p,f)}}catch(e){a.e(e)}finally{a.f()}})).observe(this.sparkleWrapper.parentNode,{box:t})}},{key:"sizeCanvas",value:function(e,t){if(this.sparkleCanvas){var r=this.props.overflowPx;this.sparkleCanvas.width=e+2*r,this.sparkleCanvas.height=t+2*r}}},{key:"start",value:function(){this.createSparkles(),this.drawSparkles(),this.updateSparkles()}},{key:"end",value:function(){window.cancelAnimationFrame(this.animationFrame),this.sparkles=[]}},{key:"init",value:function(){if(this.sparkleCanvas){var e=new Image;e.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAHCAYAAAD5wDa1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozNDNFMzM5REEyMkUxMUUzOEE3NEI3Q0U1QUIzMTc4NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozNDNFMzM5RUEyMkUxMUUzOEE3NEI3Q0U1QUIzMTc4NiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM0M0UzMzlCQTIyRTExRTM4QTc0QjdDRTVBQjMxNzg2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM0M0UzMzlDQTIyRTExRTM4QTc0QjdDRTVBQjMxNzg2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+jzOsUQAAANhJREFUeNqsks0KhCAUhW/Sz6pFSc1AD9HL+OBFbdsVOKWLajH9EE7GFBEjOMxcUNHD8dxPBCEE/DKyLGMqraoqcd4j0ChpUmlBEGCFRBzH2dbj5JycJAn90CEpy1J2SK4apVSM4yiKonhePYwxMU2TaJrm8BpykpWmKQ3D8FbX9SOO4/tOhDEG0zRhGAZo2xaiKDLyPGeSyPM8sCxr868+WC/mvu9j13XBtm1ACME8z7AsC/R9r0fGOf+arOu6jUwS7l6tT/B+xo+aDFRo5BykHfav3/gSYAAtIdQ1IT0puAAAAABJRU5ErkJggg==",this.sprite=e,this.sparkleContext=this.sparkleCanvas.getContext("2d"),this.parentResizeObserver(),this.start()}else console.warn("No sparkles today :( The canvas did not render.")}},{key:"render",value:function(){var e=this,t=this.props.overflowPx;return o().createElement("span",{ref:function(t){e.sparkleWrapper=t},style:{width:"100%",height:"100%",overflow:"visible",position:"absolute",top:"-".concat(t,"px"),left:"-".concat(t,"px"),pointerEvents:"none"}},o().createElement("canvas",{ref:function(t){e.sparkleCanvas=t}}))}}],n=[{key:"getSpriteVariant",value:function(){return _[Math.floor(Math.random()*_.length)]}},{key:"getOpacity",value:function(){return Math.random()}},{key:"randomHexColor",value:function(){return"#".concat("000000".concat(Math.floor(16777215*Math.random()).toString(16)).slice(-6))}}],r&&V(t.prototype,r),n&&V(t,n),Object.defineProperty(t,"prototype",{writable:!1}),c}(o().Component);q.defaultProps={color:"#FFF",count:50,minSize:5,maxSize:8,overflowPx:20,fadeOutSpeed:50,newSparkleOnFadeOut:!0,flicker:!0,flickerSpeed:"normal"};const K=q;module.exports=t})();