jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #12 from Safelite/brm-confetti

Browse source 
Add confetti component.
This commit is contained in:
bmauger 2021-10-18 10:17:17 -04:00 committed by GitHub
commit 546c45f24d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 63 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
package-lock.json generated
View file

@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"bootstrap": "^5.1.1",
"canvas-confetti": "^1.4.0",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.11"
@ -2722,7 +2723,6 @@
"thread-loader": "^2.1.3",
"url-loader": "^2.2.0",
"vue-loader": "^15.9.2",
"vue-loader-v16": "npm:vue-loader@^16.1.0",
"vue-style-loader": "^4.1.2",
"webpack": "^4.0.0",
"webpack-bundle-analyzer": "^3.8.0",
@ -2899,7 +2899,6 @@
"merge-source-map": "^1.1.0",
"postcss": "^7.0.36",
"postcss-selector-parser": "^6.0.2",
"prettier": "^1.18.2",
"source-map": "~0.6.1",
"vue-template-es2015-compiler": "^1.9.0"
},
@ -4779,6 +4778,15 @@
"url": "https://opencollective.com/browserslist"
}
},
"node_modules/canvas-confetti": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.4.0.tgz",
"integrity": "sha512-S18o4Y9PqI/uabdlT/jI3MY7XBJjNxnfapFIkjkMwpz6qNxLFZOm2b22OMf4ZYDL9lpNWI+Ih4fEMVPwO1KHFQ==",
"funding": {
"type": "donate",
"url": "https://www.paypal.me/kirilvatev"
}
},
"node_modules/capture-exit": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
@ -4840,7 +4848,6 @@
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
"fsevents": "~2.3.2",
"glob-parent": "~5.1.2",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
@ -7133,8 +7140,7 @@
"esprima": "^4.0.1",
"estraverse": "^4.2.0",
"esutils": "^2.0.2",
"optionator": "^0.8.1",
"source-map": "~0.6.1"
"optionator": "^0.8.1"
},
"bin": {
"escodegen": "bin/escodegen.js",
@ -10622,7 +10628,6 @@
"@jest/types": "^24.9.0",
"anymatch": "^2.0.0",
"fb-watchman": "^2.0.0",
"fsevents": "^1.2.7",
"graceful-fs": "^4.1.15",
"invariant": "^2.2.4",
"jest-serializer": "^24.9.0",
@ -11477,9 +11482,6 @@
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
"dev": true,
"dependencies": {
"graceful-fs": "^4.1.6"
},
"optionalDependencies": {
"graceful-fs": "^4.1.6"
}
@ -17716,10 +17718,8 @@
"integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
"dev": true,
"dependencies": {
"chokidar": "^3.4.1",
"graceful-fs": "^4.1.2",
"neo-async": "^2.5.0",
"watchpack-chokidar2": "^2.0.1"
"neo-async": "^2.5.0"
},
"optionalDependencies": {
"chokidar": "^3.4.1",
@ -17781,7 +17781,6 @@
"anymatch": "^2.0.0",
"async-each": "^1.0.1",
"braces": "^2.3.2",
"fsevents": "^1.2.7",
"glob-parent": "^3.1.0",
"inherits": "^2.0.3",
"is-binary-path": "^1.0.0",
@ -18094,7 +18093,6 @@
"anymatch": "^2.0.0",
"async-each": "^1.0.1",
"braces": "^2.3.2",
"fsevents": "^1.2.7",
"glob-parent": "^3.1.0",
"inherits": "^2.0.3",
"is-binary-path": "^1.0.0",
@ -22740,6 +22738,11 @@
"nanocolors": "^0.1.0"
}
},
"canvas-confetti": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.4.0.tgz",
"integrity": "sha512-S18o4Y9PqI/uabdlT/jI3MY7XBJjNxnfapFIkjkMwpz6qNxLFZOm2b22OMf4ZYDL9lpNWI+Ih4fEMVPwO1KHFQ=="
},
"capture-exit": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",

1
package.json
View file

@ -10,6 +10,7 @@
},
"dependencies": {
"bootstrap": "^5.1.1",
"canvas-confetti": "^1.4.0",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.11"

5
src/Funnel1.vue
View file

@ -14,6 +14,7 @@
<div class="row">
<div class="col">
<buttonFunnel/>
<confetti/>
</div>
</div>
<div class="row mt-5">
@ -43,6 +44,7 @@
import buttonFunnel from './components/buttons/buttonFunnel';
import vehicleImage from './components/vehicleImage';
import imageButton from './components/imageButton';
import confetti from './components/confetti';
export default {
@ -50,7 +52,8 @@
components: {
buttonFunnel,
vehicleImage,
imageButton
imageButton,
confetti
}
}
</script>

41
src/components/confetti.vue Normal file
View file

@ -0,0 +1,41 @@
<script>
import confetti from '/node_modules/canvas-confetti/src/confetti.js';
setTimeout(function(){// Adjust timing of confetti event on page load
var count = 200;
var defaults = {
origin: { y: 0.7 }
};
function fire(particleRatio, opts) {
confetti(Object.assign({}, defaults, opts, {
particleCount: Math.floor(count * particleRatio)
}));
}
fire(0.25, {
spread: 26,
startVelocity: 55,
});
fire(0.2, {
spread: 60,
});
fire(0.35, {
spread: 100,
decay: 0.91,
scalar: 0.8
});
fire(0.1, {
spread: 120,
startVelocity: 25,
decay: 0.92,
scalar: 1.2
});
fire(0.1, {
spread: 120,
startVelocity: 45,
});
}, 1000);// 1000 = 1second
export default {
name: 'confetti'
}
</script>