js-confetti - npm Package Compare versions

Comparing version 0.5.1 to 0.5.2-add-iife-dist-format0

dist/es/index.js

@@ -57,3 +57,3 @@ function _classCallCheck(instance, Constructor) {
 var MIN_INITIAL_ROTATION_SPEED = 0.03;
-var MAX_INITIAL_ROTATION_SPEED = 0.10;
+var MAX_INITIAL_ROTATION_SPEED = 0.07;
 var MIN_CONFETTI_ANGLE = 15;
@@ -87,3 +87,3 @@ var MAX_CONFETTI_ANGLE = 82;
     this.finalConfettiSpeedX = generateRandomNumber(MIN_FINAL_X_CONFETTI_SPEED, MAX_FINAL_X_CONFETTI_SPEED, 3);
-    this.rotationSpeed = generateRandomNumber(MIN_INITIAL_ROTATION_SPEED, MAX_INITIAL_ROTATION_SPEED, 3);
+    this.rotationSpeed = generateRandomNumber(MIN_INITIAL_ROTATION_SPEED, MAX_INITIAL_ROTATION_SPEED, 3) * getWindowWidthCoefficient();
     this.dragForceCoefficient = generateRandomNumber(MIN_DRAG_FORCE_COEFFICIENT, MAX_DRAG_FORCE_COEFFICIENT, 6);
@@ -90,0 +90,0 @@ this.radius = {

dist/js-confetti.min.js

@@ -1,1 +0,1 @@
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).jsConfetti=i()}(this,(function(){"use strict";function t(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function i(t,i){for(var e=0;e<i.length;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function e(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function n(t){return+t.replace(/px/,"")}function s(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=Math.random()*(i-t)+t;return Math.floor(n*Math.pow(10,e))/Math.pow(10,e)}var o=["#fcf403","#62fc03","#f4fc03","#03e7fc","#03fca5","#a503fc","#fc03ad","#fc03c2"];var a=function(){function i(e){var n=e.initialPosition,o=e.direction,a=e.confettiRadius,r=e.confettiColors;t(this,i);var h=s(.9,1.7,3)*(Math.log(window.innerWidth)/Math.log(1920));this.confettiSpeed={x:h,y:h},this.finalConfettiSpeedX=s(.2,.6,3),this.rotationSpeed=s(.03,.1,3),this.dragForceCoefficient=s(5e-4,9e-4,6),this.radius={x:a,y:a},this.initialRadius=a,this.rotationAngle="left"===o?s(0,.2,3):s(-.2,0,3),this.radiusYUpdateDirection="down";var d="left"===o?s(82,15)*Math.PI/180:s(-15,-82)*Math.PI/180;this.absCos=Math.abs(Math.cos(d)),this.absSin=Math.abs(Math.sin(d));var c=s(-150,0),f={x:n.x+("left"===o?-c:c)*this.absCos,y:n.y-c*this.absSin};this.currentPosition=Object.assign({},f),this.initialPosition=Object.assign({},f),this.color=function(t){return t[s(0,t.length)]}(r),this.createdAt=(new Date).getTime(),this.direction=o}return e(i,[{key:"draw",value:function(t){var i=this.currentPosition,e=this.radius,n=this.color,s=this.rotationAngle,o=window.devicePixelRatio;t.fillStyle=n,t.beginPath(),t.ellipse(i.x*o,i.y*o,e.x*o,e.y*o,s,0,2*Math.PI),t.fill()}},{key:"updatePosition",value:function(t,i,e){var n=this.confettiSpeed,s=this.dragForceCoefficient,o=this.finalConfettiSpeedX,a=this.radiusYUpdateDirection,r=this.rotationSpeed,h=this.createdAt,d=this.direction,c=i-h;this.rotationSpeed-=1e-5*t,this.rotationSpeed<0&&(this.rotationSpeed=0),n.x>o&&(this.confettiSpeed.x-=s*t),this.currentPosition.x+=n.x*("left"===d?-this.absCos:this.absCos)*t,this.currentPosition.y=this.initialPosition.y-n.y*this.absSin*c+.00125*Math.pow(c,2)/2,"down"===a?(this.radius.y-=t*r,this.radius.y<=0&&(this.radius.y=0,this.radiusYUpdateDirection="up")):(this.radius.y+=t*r,this.radius.y>=this.initialRadius&&(this.radius.y=this.initialRadius,this.radiusYUpdateDirection="down"))}},{key:"getIsVisibleOnCanvas",value:function(t){return this.currentPosition.y<t+100}}]),i}();function r(t){var i=t.confettiRadius,e=void 0===i?8:i,n=t.confettiesNumber,s=void 0===n?200:n,a=t.confettiColors;return{confettiRadius:e,confettiesNumber:s,confettiColors:void 0===a?o:a}}return function(){function i(){var e;t(this,i),this.canvas=((e=document.createElement("canvas")).style.position="fixed",e.style.width="100%",e.style.height="100%",e.style.top="0",e.style.left="0",e.style.zIndex="1000",e.style.pointerEvents="none",document.body.appendChild(e),e),this.canvasContext=this.canvas.getContext("2d"),this.shapes=[],this.lastUpdated=(new Date).getTime(),this.iterationIndex=0,this.loop=this.loop.bind(this),requestAnimationFrame(this.loop)}return e(i,[{key:"loop",value:function(){var t,i,e,s,o,a=this;t=this.canvas,i=window.devicePixelRatio,e=getComputedStyle(t),s=n(e.getPropertyValue("width")),o=n(e.getPropertyValue("height")),t.setAttribute("width",(s*i).toString()),t.setAttribute("height",(o*i).toString());var r=(new Date).getTime(),h=r-this.lastUpdated,d=this.canvas.offsetHeight,c=this.canvas.offsetWidth;this.shapes.forEach((function(t){t.updatePosition(h,r,c),t.draw(a.canvasContext)})),this.iterationIndex%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(d)}))),this.lastUpdated=r,this.iterationIndex++,requestAnimationFrame(this.loop)}},{key:"addConfetti",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=r(t),e=i.confettiRadius,n=i.confettiesNumber,s=i.confettiColors,o=5*window.innerHeight/7,h={x:0,y:o},d={x:window.innerWidth,y:o},c=0;c<n/2;c++)this.shapes.push(new a({initialPosition:h,direction:"right",confettiRadius:e,confettiColors:s})),this.shapes.push(new a({initialPosition:d,direction:"left",confettiRadius:e,confettiColors:s}))}}]),i}()}));
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).jsConfetti=i()}(this,(function(){"use strict";function t(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function i(t,i){for(var e=0;e<i.length;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function e(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function n(t){return+t.replace(/px/,"")}function s(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=Math.random()*(i-t)+t;return Math.floor(n*Math.pow(10,e))/Math.pow(10,e)}var o=["#fcf403","#62fc03","#f4fc03","#03e7fc","#03fca5","#a503fc","#fc03ad","#fc03c2"];function a(){return Math.log(window.innerWidth)/Math.log(1920)}var r=function(){function i(e){var n=e.initialPosition,o=e.direction,r=e.confettiRadius,h=e.confettiColors;t(this,i);var d=s(.9,1.7,3)*a();this.confettiSpeed={x:d,y:d},this.finalConfettiSpeedX=s(.2,.6,3),this.rotationSpeed=s(.03,.07,3)*a(),this.dragForceCoefficient=s(5e-4,9e-4,6),this.radius={x:r,y:r},this.initialRadius=r,this.rotationAngle="left"===o?s(0,.2,3):s(-.2,0,3),this.radiusYUpdateDirection="down";var c="left"===o?s(82,15)*Math.PI/180:s(-15,-82)*Math.PI/180;this.absCos=Math.abs(Math.cos(c)),this.absSin=Math.abs(Math.sin(c));var f=s(-150,0),u={x:n.x+("left"===o?-f:f)*this.absCos,y:n.y-f*this.absSin};this.currentPosition=Object.assign({},u),this.initialPosition=Object.assign({},u),this.color=function(t){return t[s(0,t.length)]}(h),this.createdAt=(new Date).getTime(),this.direction=o}return e(i,[{key:"draw",value:function(t){var i=this.currentPosition,e=this.radius,n=this.color,s=this.rotationAngle,o=window.devicePixelRatio;t.fillStyle=n,t.beginPath(),t.ellipse(i.x*o,i.y*o,e.x*o,e.y*o,s,0,2*Math.PI),t.fill()}},{key:"updatePosition",value:function(t,i,e){var n=this.confettiSpeed,s=this.dragForceCoefficient,o=this.finalConfettiSpeedX,a=this.radiusYUpdateDirection,r=this.rotationSpeed,h=this.createdAt,d=this.direction,c=i-h;this.rotationSpeed-=1e-5*t,this.rotationSpeed<0&&(this.rotationSpeed=0),n.x>o&&(this.confettiSpeed.x-=s*t),this.currentPosition.x+=n.x*("left"===d?-this.absCos:this.absCos)*t,this.currentPosition.y=this.initialPosition.y-n.y*this.absSin*c+.00125*Math.pow(c,2)/2,"down"===a?(this.radius.y-=t*r,this.radius.y<=0&&(this.radius.y=0,this.radiusYUpdateDirection="up")):(this.radius.y+=t*r,this.radius.y>=this.initialRadius&&(this.radius.y=this.initialRadius,this.radiusYUpdateDirection="down"))}},{key:"getIsVisibleOnCanvas",value:function(t){return this.currentPosition.y<t+100}}]),i}();function h(t){var i=t.confettiRadius,e=void 0===i?8:i,n=t.confettiesNumber,s=void 0===n?200:n,a=t.confettiColors;return{confettiRadius:e,confettiesNumber:s,confettiColors:void 0===a?o:a}}return function(){function i(){var e;t(this,i),this.canvas=((e=document.createElement("canvas")).style.position="fixed",e.style.width="100%",e.style.height="100%",e.style.top="0",e.style.left="0",e.style.zIndex="1000",e.style.pointerEvents="none",document.body.appendChild(e),e),this.canvasContext=this.canvas.getContext("2d"),this.shapes=[],this.lastUpdated=(new Date).getTime(),this.iterationIndex=0,this.loop=this.loop.bind(this),requestAnimationFrame(this.loop)}return e(i,[{key:"loop",value:function(){var t,i,e,s,o,a=this;t=this.canvas,i=window.devicePixelRatio,e=getComputedStyle(t),s=n(e.getPropertyValue("width")),o=n(e.getPropertyValue("height")),t.setAttribute("width",(s*i).toString()),t.setAttribute("height",(o*i).toString());var r=(new Date).getTime(),h=r-this.lastUpdated,d=this.canvas.offsetHeight,c=this.canvas.offsetWidth;this.shapes.forEach((function(t){t.updatePosition(h,r,c),t.draw(a.canvasContext)})),this.iterationIndex%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(d)}))),this.lastUpdated=r,this.iterationIndex++,requestAnimationFrame(this.loop)}},{key:"addConfetti",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=h(t),e=i.confettiRadius,n=i.confettiesNumber,s=i.confettiColors,o=5*window.innerHeight/7,a={x:0,y:o},d={x:window.innerWidth,y:o},c=0;c<n/2;c++)this.shapes.push(new r({initialPosition:a,direction:"right",confettiRadius:e,confettiColors:s})),this.shapes.push(new r({initialPosition:d,direction:"left",confettiRadius:e,confettiColors:s}))}}]),i}()}));

package.json

 {
   "name": "js-confetti",
-  "version": "0.5.1",
+  "version": "0.5.2-add-iife-dist-format0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "JS Confetti library with zero dependencies, works without any config, TS typings included, adapts to user screen",

README.md

@@ -0,1 +1,5 @@
+
+
+<img src="app-demo.gif" />
+
 # 🎉 JavaScript Confetti library
@@ -13,3 +17,3 @@
 
-Links: [Library Website](https://loonywizard.github.io/js-confetti/) | [CodeSandbox Playground](https://codesandbox.io/s/confetti-vanilla-js-r5kqi)
+Links: [GitHub](https://github.com/loonywizard/js-confetti) | [Library Website](https://loonywizard.github.io/js-confetti/) | [CodeSandbox Playground](https://codesandbox.io/s/confetti-vanilla-js-r5kqi)
 
@@ -34,2 +38,4 @@ ## Usage
 
+**⚠️ Attencion ⚠️** `new JSConfetti()` creates HTML Canvas element and adds it to page, so call it only once!
+
 ## Customise confetties
@@ -36,0 +42,0 @@

No alert changes

Improved metrics

Total package byte prevSize

24305

increased by23.13%

Number of package files

7

increased by16.67%

Lines of code

289

increased by6.25%

Number of lines in readme file

58

increased by11.54%

No dependency changes