Merge branch 'master' of https://github.com/lindelof/particles-bg-vue

.npmignore

@@ -3,6 +3,7 @@ docs/
 node_modules/
 example/
 examples/
+images/
 .*.swp
 .DS_Store
 .git

README.md

@@ -11,7 +11,7 @@
 ### Check it out if you want to use it in `React` [https://github.com/lindelof/particles-bg](https://github.com/lindelof/particles-bg)
 
 ## Specify
-This project refers to the source code of the [Proton](https://drawcall.github.io/Proton/) official website, and proton's online [demo](https://codesandbox.io/s/proton-tadpole-yt6qu?fontsize=14&module=%2Fsrc%2Fcomponents%2FParticles.vue). I packaged it into a vue.js component. You can use it casually in your own projects
+This project refers to the source code of the [Proton](https://drawcall.github.io/Proton/) official website, and proton's online [demo](https://codesandbox.io/s/proton-tadpole-yt6qu?fontsize=14&module=%2Fsrc%2Fcomponents%2FParticles.vue). I packaged it into a vue.js component. Thanks to the great author.
 
 ### Online demo
 * demo1 [https://codesandbox.io/s/particles-bg-vue-bg145](https://codesandbox.io/s/particles-bg-vue-bg145)
@@ -138,6 +138,11 @@ You can use type="custom" to achieve a higher degree of freedom for the particle
   }
 ```
 
+## Similar projects
+Maybe you will like these two projects, they will also make your page flourish
+* [https://github.com/lindelof/react-mouse-particles](https://github.com/lindelof/react-mouse-particles)
+* [https://github.com/lindelof/power-mode-input](https://github.com/lindelof/power-mode-input)
+
 ## License
 
 https://opensource.org/licenses/MIT

package.json

@@ -1,8 +1,8 @@
 {
   "name": "particles-bg-vue",
-  "version": "1.3.1",
+  "version": "1.3.5",
   "description": "Vue.js component for particles backgrounds",
-  "author": "creotip@gmail.com",
+  "author": "phragmen@protonmail.com",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/lindelof/particles-bg-vue/issues"

src/particles-bg/particles/BallParticles.vue

@@ -161,7 +161,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);

src/particles-bg/particles/CanvasComp.vue

@@ -27,8 +27,8 @@ export default {
   methods: {
     initCanvas: function() {
       const canvas = this.$refs.canvasRef;
-      const width = window.innerWidth;
-      const height = window.innerHeight;
+      const width = canvas.clientWidth;
+      const height = canvas.clientHeight;
       canvas.width = width;
       canvas.height = height;
 
@@ -41,8 +41,8 @@ export default {
     },
     resize: function() {
       const canvas = this.$refs.canvasRef;
-      const width = window.innerWidth;
-      const height = window.innerHeight;
+      const width = canvas.clientWidth;
+      const height = canvas.clientHeight;
       canvas.width = width;
       canvas.height = height;
       this.$emit("canvasResize", { width, height });
@@ -75,7 +75,7 @@ export default {
     this.resize = this.resize.bind(this);
     window.addEventListener("resize", this.resize);
   },
-  beforeDestory() {
+  beforeDestroy() {
     window.removeEventListener("resize", this.resize);
   }
 };

src/particles-bg/particles/CircleParticles.vue

@@ -102,7 +102,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);

src/particles-bg/particles/CobwebParticles.vue

@@ -112,7 +112,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);

src/particles-bg/particles/ColorParticles.vue

@@ -80,7 +80,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);

src/particles-bg/particles/CustomParticles.vue

@@ -209,7 +209,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);

src/particles-bg/particles/FountainParticles.vue

@@ -104,7 +104,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);

src/particles-bg/particles/LinesParticles.vue

@@ -105,7 +105,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);

src/particles-bg/particles/PolygonParticles.vue

@@ -222,7 +222,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);

src/particles-bg/particles/SquareParticles.vue

@@ -131,7 +131,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);

src/particles-bg/particles/TadpoleParticles.vue

@@ -171,7 +171,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);

src/particles-bg/particles/ThickParticles.vue

@@ -155,7 +155,7 @@ export default {
     this.colorTemplate = `hsla(hue,80%,50%, 0.75)`;
     this.renderProton = this.renderProton.bind(this);
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);