js-confetti - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/es/index.js

@@ -43,6 +43,4 @@ function _classCallCheck(instance, Constructor) {
 
-var RGBColors = ['#fcf403', '#62fc03', '#f4fc03', '#03e7fc', '#03fca5', '#a503fc', '#fc03ad', '#fc9003'];
-
-function generateRandomRGBColor() {
-  return RGBColors[generateRandomNumber(0, RGBColors.length)];
+function generateRandomArrayElement(confettiColors) {
+  return confettiColors[generateRandomNumber(0, confettiColors.length)];
 }
@@ -53,3 +51,3 @@
 var ROTATION_SLOWDOWN_ACCELERATION = 0.00001;
-var INITIAL_SHAPE_RADIUS = 10;
+var INITIAL_SHAPE_RADIUS = 8;
 var MIN_INITIAL_CONFETTI_SPEED = 0.9;
@@ -64,2 +62,3 @@ var MAX_INITIAL_CONFETTI_SPEED = 1.7;
 var DEFAULT_CONFETTIES_NUMBER = 200;
+var DEFAULT_CONFETTI_COLORS = ['#fcf403', '#62fc03', '#f4fc03', '#03e7fc', '#03fca5', '#a503fc', '#fc03ad', '#fc9003'];
 
@@ -75,3 +74,4 @@ function getWindowWidthCoefficient() {
         direction = _ref.direction,
-        confettiRadius = _ref.confettiRadius;
+        confettiRadius = _ref.confettiRadius,
+        confettiColors = _ref.confettiColors;
 
@@ -103,3 +103,3 @@ _classCallCheck(this, ConfettiShape);
     this.initialPosition = Object.assign({}, shiftedInitialPosition);
-    this.color = generateRandomRGBColor();
+    this.color = generateRandomArrayElement(confettiColors);
     this.createdAt = new Date().getTime();
@@ -181,6 +181,9 @@ this.direction = direction;
       _confettiConfig$confe2 = confettiConfig.confettiesNumber,
-      confettiesNumber = _confettiConfig$confe2 === void 0 ? DEFAULT_CONFETTIES_NUMBER : _confettiConfig$confe2;
+      confettiesNumber = _confettiConfig$confe2 === void 0 ? DEFAULT_CONFETTIES_NUMBER : _confettiConfig$confe2,
+      _confettiConfig$confe3 = confettiConfig.confettiColors,
+      confettiColors = _confettiConfig$confe3 === void 0 ? DEFAULT_CONFETTI_COLORS : _confettiConfig$confe3;
   return {
     confettiRadius: confettiRadius,
-    confettiesNumber: confettiesNumber
+    confettiesNumber: confettiesNumber,
+    confettiColors: confettiColors
   };
@@ -215,5 +218,3 @@ }
       this.shapes.forEach(function (shape) {
-        shape.updatePosition(timeDelta, currentTime, canvasWidth); // TODO: try to batch confetti drawings togheter, group by colors
-        // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
-
+        shape.updatePosition(timeDelta, currentTime, canvasWidth);
         shape.draw(_this2.canvasContext);
@@ -240,3 +241,4 @@ }); // Do not remove invisible shapes on every iteration
           confettiRadius = _normalizeConfettiCon.confettiRadius,
-          confettiesNumber = _normalizeConfettiCon.confettiesNumber;
+          confettiesNumber = _normalizeConfettiCon.confettiesNumber,
+          confettiColors = _normalizeConfettiCon.confettiColors;
 
@@ -257,3 +259,4 @@ var yPosition = window.innerHeight * 5 / 7;
           direction: 'right',
-          confettiRadius: confettiRadius
+          confettiRadius: confettiRadius,
+          confettiColors: confettiColors
         }));
@@ -263,3 +266,4 @@ this.shapes.push(new ConfettiShape({
           direction: 'left',
-          confettiRadius: confettiRadius
+          confettiRadius: confettiRadius,
+          confettiColors: confettiColors
         }));
@@ -266,0 +270,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){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}()}));
+!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,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.rotationSpeed=s(.03,.1,3),this.radius={x:a,y:a},this.initialRadius=a,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 d=s(-150,0),u={x:n.x+("left"===o?-d:d)*this.absCos,y:n.y-d*this.absSin};this.currentPosition=Object.assign({},u),this.initialPosition=Object.assign({},u),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=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 c="left"===r?this.currentPosition.x>=0:this.currentPosition.x<=e;c&&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+(c?.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?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,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(),c=h-this.lastUpdated,d=this.canvas.offsetHeight,u=this.canvas.offsetWidth;this.shapes.forEach((function(t){t.updatePosition(c,h,u),t.draw(r.canvasContext)})),t%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(d)}))),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=i.confettiColors,o=5*window.innerHeight/7,h={x:0,y:o},c={x:window.innerWidth,y:o},d=0;d<n/2;d++)this.shapes.push(new a({initialPosition:h,direction:"right",confettiRadius:e,confettiColors:s})),this.shapes.push(new a({initialPosition:c,direction:"left",confettiRadius:e,confettiColors:s}))}}]),i}()}));

package.json

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

README.md

@@ -6,3 +6,6 @@ # js-confetti
 
-🎉 JS Confetti library with zero dependencies
+🎉 JavaScript Confetti library
+- zero dependencies used!
+- works without any config! (but could be configured if needed)
+- confetti speed adapts to user screen width
 
@@ -33,12 +36,15 @@ Demo: https://loonywizard.github.io/js-confetti/
 
-| 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           |
+| Prop             | Type        |  Description                             | Default value         |
+| ---------------- | ----------- | ---------------------------------------- | --------------------- |
+| confettiRadius   | number      | Radius of confetti shape in pixels       | 8                     |
+| confettiesNumber | number      | Number of confetties to fire             | 200                   |
+| confettiColors   | string[]    | Array of colors for confetti             | Array of RGB colors   |
 
+
 ```js
 jsConfetti.addConfetti({
-  confettiRadius: 10,
+  confettiRadius: 8,
   confettiesNumber: 200,
+  confettiColors: ['#fcf403', '#62fc03', '#f4fc03', '#03e7fc', '#03fca5', '#a503fc', '#fc03ad', '#fc9003']
 })
 ```

No alert changes

Improved metrics

Total package byte prevSize

23214

increased by3.09%

Lines of code

391

increased by1.82%

Number of lines in readme file

49

increased by13.95%

No dependency changes