js-confetti - npm Package Compare versions

Comparing version 0.0.15 to 0.1.0

dist/es/index.js

@@ -60,3 +60,4 @@ function _classCallCheck(instance, Constructor) {
 var MAX_CONFETTI_POSITION_SHIFT = 150;
-var SHAPE_VISIBILITY_TRESHOLD = 100; // For wide screens - fast confetties, for small screens - slow confetties
+var SHAPE_VISIBILITY_TRESHOLD = 100;
+var DEFAULT_CONFETTIES_NUMBER = 200;
 
@@ -69,3 +70,7 @@ function getWindowWidthCoefficient() {
 var ConfettiShape = /*#__PURE__*/function () {
-  function ConfettiShape(initialPosition, direction) {
+  function ConfettiShape(_ref) {
+    var initialPosition = _ref.initialPosition,
+        direction = _ref.direction,
+        confettiRadius = _ref.confettiRadius;
+
     _classCallCheck(this, ConfettiShape);
@@ -81,5 +86,6 @@
     this.radius = {
-      x: INITIAL_SHAPE_RADIUS,
-      y: INITIAL_SHAPE_RADIUS
+      x: confettiRadius,
+      y: confettiRadius
     };
+    this.initialRadius = confettiRadius;
     this.radiusYUpdateDirection = 'down';
@@ -140,4 +146,4 @@ var angle = direction === 'left' ? generateRandomNumber(MAX_CONFETTI_ANGLE, MIN_CONFETTI_ANGLE) * Math.PI / 180 : generateRandomNumber(-MIN_CONFETTI_ANGLE, -MAX_CONFETTI_ANGLE) * Math.PI / 180;
 
-        if (this.radius.y >= INITIAL_SHAPE_RADIUS) {
-          this.radius.y = INITIAL_SHAPE_RADIUS;
+        if (this.radius.y >= this.initialRadius) {
+          this.radius.y = this.initialRadius;
           this.radiusYUpdateDirection = 'down';
@@ -170,2 +176,13 @@ }
 
+function normalizeConfettiConfig(confettiConfig) {
+  var _confettiConfig$confe = confettiConfig.confettiRadius,
+      confettiRadius = _confettiConfig$confe === void 0 ? INITIAL_SHAPE_RADIUS : _confettiConfig$confe,
+      _confettiConfig$confe2 = confettiConfig.confettiesNumber,
+      confettiesNumber = _confettiConfig$confe2 === void 0 ? DEFAULT_CONFETTIES_NUMBER : _confettiConfig$confe2;
+  return {
+    confettiRadius: confettiRadius,
+    confettiesNumber: confettiesNumber
+  };
+}
+
 var JSConfetti = /*#__PURE__*/function () {
@@ -217,2 +234,8 @@ function JSConfetti() {
     value: function addConfetti() {
+      var confettiesConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+      var _normalizeConfettiCon = normalizeConfettiConfig(confettiesConfig),
+          confettiRadius = _normalizeConfettiCon.confettiRadius,
+          confettiesNumber = _normalizeConfettiCon.confettiesNumber;
+
       var yPosition = window.innerHeight * 5 / 7;
@@ -228,5 +251,13 @@ var leftConfettiesPosition = {
 
-      for (var i = 0; i < 100; i++) {
-        this.shapes.push(new ConfettiShape(leftConfettiesPosition, 'right'));
-        this.shapes.push(new ConfettiShape(rightConfettiesPosition, 'left'));
+      for (var i = 0; i < confettiesNumber / 2; i++) {
+        this.shapes.push(new ConfettiShape({
+          initialPosition: leftConfettiesPosition,
+          direction: 'right',
+          confettiRadius: confettiRadius
+        }));
+        this.shapes.push(new ConfettiShape({
+          initialPosition: rightConfettiesPosition,
+          direction: 'left',
+          confettiRadius: confettiRadius
+        }));
       }
@@ -233,0 +264,0 @@ }

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","#fc9003"];var a=function(){function i(e,n){t(this,i);var a=s(.9,1.7,3)*(Math.log(window.innerWidth)/Math.log(1920));this.confettiSpeed={x:a,y:a},this.rotationSpeed=s(.03,.1,3),this.radius={x:10,y:10},this.radiusYUpdateDirection="down";var r="left"===n?s(82,15)*Math.PI/180:s(-15,-82)*Math.PI/180;this.absCos=Math.abs(Math.cos(r)),this.absSin=Math.abs(Math.sin(r));var h=s(-150,0),d={x:e.x+("left"===n?-h:h)*this.absCos,y:e.y-h*this.absSin};this.currentPosition=Object.assign({},d),this.initialPosition=Object.assign({},d),this.color=o[s(0,o.length)],this.createdAt=(new Date).getTime(),this.direction=n}return e(i,[{key:"draw",value:function(t){var i=this.currentPosition,e=this.radius,n=this.color,s=window.devicePixelRatio;t.fillStyle=n,t.beginPath(),t.ellipse(i.x*s,i.y*s,e.x*s,e.y*s,0,0,2*Math.PI),t.fill()}},{key:"updatePosition",value:function(t,i,e){var n=this.confettiSpeed,s=this.radiusYUpdateDirection,o=this.rotationSpeed,a=this.createdAt,r=this.direction,h=i-a;this.rotationSpeed-=1e-5*t,this.rotationSpeed<0&&(this.rotationSpeed=0);var d="left"===r?this.currentPosition.x>=0:this.currentPosition.x<=e;d&&n.x>1e-4&&(this.confettiSpeed.x-=8e-4*t),this.currentPosition.x+=n.x*("left"===r?-this.absCos:this.absCos)*t,this.currentPosition.y=this.initialPosition.y-n.y*this.absSin*h+(d?.00125*Math.pow(h,2)/2:0),"down"===s?(this.radius.y-=t*o,this.radius.y<=0&&(this.radius.y=0,this.radiusYUpdateDirection="up")):(this.radius.y+=t*o,this.radius.y>=10&&(this.radius.y=10,this.radiusYUpdateDirection="down"))}},{key:"getIsVisibleOnCanvas",value:function(t){return this.currentPosition.y<t+100}}]),i}();return function(){function i(){var e,n=this;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(),setTimeout((function(){return n.loop.call(n,0)}),0)}return e(i,[{key:"loop",value:function(t){var i,e,s,o,a,r=this;i=this.canvas,e=window.devicePixelRatio,s=getComputedStyle(i),o=n(s.getPropertyValue("width")),a=n(s.getPropertyValue("height")),i.setAttribute("width",(o*e).toString()),i.setAttribute("height",(a*e).toString());var h=(new Date).getTime(),d=h-this.lastUpdated,u=this.canvas.offsetHeight,c=this.canvas.offsetWidth;this.shapes.forEach((function(t){t.updatePosition(d,h,c),t.draw(r.canvasContext)})),t%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(u)}))),this.lastUpdated=h,setTimeout((function(){return r.loop.call(r,++t)}),0)}},{key:"addConfetti",value:function(){for(var t=5*window.innerHeight/7,i={x:0,y:t},e={x:window.innerWidth,y:t},n=0;n<100;n++)this.shapes.push(new a(i,"right")),this.shapes.push(new a(e,"left"))}}]),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","#fc9003"];var a=function(){function i(e){var n=e.initialPosition,a=e.direction,r=e.confettiRadius;t(this,i);var h=s(.9,1.7,3)*(Math.log(window.innerWidth)/Math.log(1920));this.confettiSpeed={x:h,y:h},this.rotationSpeed=s(.03,.1,3),this.radius={x:r,y:r},this.initialRadius=r,this.radiusYUpdateDirection="down";var d="left"===a?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 u=s(-150,0),c={x:n.x+("left"===a?-u:u)*this.absCos,y:n.y-u*this.absSin};this.currentPosition=Object.assign({},c),this.initialPosition=Object.assign({},c),this.color=o[s(0,o.length)],this.createdAt=(new Date).getTime(),this.direction=a}return e(i,[{key:"draw",value:function(t){var i=this.currentPosition,e=this.radius,n=this.color,s=window.devicePixelRatio;t.fillStyle=n,t.beginPath(),t.ellipse(i.x*s,i.y*s,e.x*s,e.y*s,0,0,2*Math.PI),t.fill()}},{key:"updatePosition",value:function(t,i,e){var n=this.confettiSpeed,s=this.radiusYUpdateDirection,o=this.rotationSpeed,a=this.createdAt,r=this.direction,h=i-a;this.rotationSpeed-=1e-5*t,this.rotationSpeed<0&&(this.rotationSpeed=0);var d="left"===r?this.currentPosition.x>=0:this.currentPosition.x<=e;d&&n.x>1e-4&&(this.confettiSpeed.x-=8e-4*t),this.currentPosition.x+=n.x*("left"===r?-this.absCos:this.absCos)*t,this.currentPosition.y=this.initialPosition.y-n.y*this.absSin*h+(d?.00125*Math.pow(h,2)/2:0),"down"===s?(this.radius.y-=t*o,this.radius.y<=0&&(this.radius.y=0,this.radiusYUpdateDirection="up")):(this.radius.y+=t*o,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?10:i,n=t.confettiesNumber;return{confettiRadius:e,confettiesNumber:void 0===n?200:n}}return function(){function i(){var e,n=this;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(),setTimeout((function(){return n.loop.call(n,0)}),0)}return e(i,[{key:"loop",value:function(t){var i,e,s,o,a,r=this;i=this.canvas,e=window.devicePixelRatio,s=getComputedStyle(i),o=n(s.getPropertyValue("width")),a=n(s.getPropertyValue("height")),i.setAttribute("width",(o*e).toString()),i.setAttribute("height",(a*e).toString());var h=(new Date).getTime(),d=h-this.lastUpdated,u=this.canvas.offsetHeight,c=this.canvas.offsetWidth;this.shapes.forEach((function(t){t.updatePosition(d,h,c),t.draw(r.canvasContext)})),t%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(u)}))),this.lastUpdated=h,setTimeout((function(){return r.loop.call(r,++t)}),0)}},{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=5*window.innerHeight/7,o={x:0,y:s},h={x:window.innerWidth,y:s},d=0;d<n/2;d++)this.shapes.push(new a({initialPosition:o,direction:"right",confettiRadius:e})),this.shapes.push(new a({initialPosition:h,direction:"left",confettiRadius:e}))}}]),i}()}));

package.json

 {
   "name": "js-confetti",
-  "version": "0.0.15",
+  "version": "0.1.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "js-confetti",

README.md

@@ -28,4 +28,16 @@ # js-confetti
 
-## Warning!
+### addConfetti args
 
-Work in Progress
+`addConfetti` method accepts args object with the following params:
+
+| Prop             | Type        |  Description                                                        | Default value |
+| ---------------- | ----------- | ------------------------------------------------------------------- | ------------- |
+| confettiRadius   | number      | Radius of confetti shape in pixels                                  | 10            |
+| confettiesNumber | number      | Number of confetties to fire (N / 2 for each side - left and right) | 200           |
+
+```js
+jsConfetti.addConfetti({
+  confettiRadius: 10,
+  confettiesNumber: 200,
+})
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22519

increased by54.89%

Number of package files

19

increased by375%

Lines of code

384

increased by76.15%

Number of lines in readme file

43

increased by38.71%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes