(function () {
window.confettiKit = function (params) {
var app = this;
app.version = "1.1.0";
app.config = {
colors: [
'#a864fd',
'#29cdff',
'#78ff44',
'#ff718d',
'#fdff6a',
],
el: 'body',
elements: {
'confetti': {
direction: 'down',
rotation: true,
},
'star': {
count: 15,
direction: 'up',
rotation: true,
},
'ribbon': {
count: 10,
direction: 'down',
rotation: true,
},
},
confettiCount: 75,
x: 0,
y: 0,
angle: 90,
decay: 0.9,
spread: 45,
startVelocity: 45,
position: null,
}
// Extend defaults with parameters
for (var param in params) {
app.config[param] = params[param];
}
var config = app.config;
app.renderStar = function (width, color) {
return '<div style="width:' + width + 'px;fill:' + color + '"><svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 75 75" ><title>star</title><polygon points="37.5 18.411 56.342 8.505 52.743 29.486 67.987 44.345 46.921 47.406 37.5 66.495 28.079 47.406 7.013 44.345 22.257 29.486 18.658 8.505 37.5 18.411" /></svg></div>';
}
app.renderRibbon = function (width, color) {
return '<div style="width:' + width + 'px;stroke:' + color + '"><svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 75 75" ><path d="m24.453125,3.774663c0.193689,-0.193689 0.743394,-0.671232 1.743199,-0.968444c0.94668,-0.28142 2.333125,-0.396423 4.648531,-0.193689c3.330842,0.291645 6.861105,1.826145 7.941241,2.711643c1.270993,1.041963 2.540047,2.890054 3.873776,4.84222c1.575816,2.306511 2.817321,4.217926 3.486399,6.004353c0.924008,2.467092 1.294523,4.846337 1.162133,6.972797c-0.097034,1.558552 -0.857702,3.568397 -1.743199,4.648531c-1.041962,1.270991 -2.406342,2.560381 -4.261154,3.29271c-2.228395,0.87983 -4.466154,0.810093 -6.779108,0.581066c-1.965634,-0.194637 -3.568395,-0.857702 -4.648531,-1.743199c-0.211833,-0.17366 -0.533673,-0.606635 -0.968444,-1.355822c-0.350522,-0.604015 -0.818174,-1.325931 -0.774755,-1.936888c0.030701,-0.432012 0.413426,-1.271858 0.968444,-1.936888c0.620528,-0.743524 1.284527,-0.912889 1.936888,-1.162133c1.279386,-0.488809 3.691399,-0.422715 6.004353,-0.193689c1.965634,0.194637 3.31667,0.736573 4.261154,1.355822c1.393387,0.91357 2.991613,1.63628 4.454843,2.905332c1.03466,0.897355 2.019835,2.599953 2.905332,3.680087c0.694641,0.847327 1.193205,1.542398 1.355822,2.324266c0.239907,1.153479 0.535004,2.743879 0,6.58542c-0.356447,2.55943 -1.282205,4.880811 -2.324266,6.779108c-1.086946,1.980061 -2.178706,3.113269 -3.486399,3.873776c-1.43055,0.831959 -3.243129,1.2571 -5.810664,1.54951c-2.886673,0.328756 -6.579154,-0.410019 -7.941241,-0.774755c-0.771421,-0.20657 -1.049573,-0.27482 -1.355822,-0.581066c-0.612498,-0.612498 -0.774755,-1.54951 -0.774755,-2.517955c0,-0.774755 -0.059414,-1.775875 0.387378,-2.517955c0.859423,-1.427419 2.413861,-2.195096 4.067465,-2.711643c1.307291,-0.408368 2.573952,-0.18426 3.486399,0.193689c1.29039,0.534498 3.294961,1.907296 4.648531,3.29271c1.164388,1.191782 1.717201,2.44142 2.711643,4.84222c0.703176,1.697624 1.065142,3.478355 1.162133,5.229598c0.10711,1.933923 0.089293,3.896049 -0.387378,5.616976c-0.326992,1.180547 -0.698642,2.16461 -1.162133,3.099021c-0.50186,1.011759 -1.936888,2.905332 -3.29271,4.261154c-1.162133,1.162133 -2.324266,1.54951 -3.29271,1.936888l-0.581066,0.193689" id="svg_6" stroke-width="4" fill="none"/></svg></div>';
}
app.customRender = function (content, type, color, width, size) {
if (type == "text") {
return '<p style="color:' + color + ';font-size:' + size + 'px">' + content + '</p>';
} else if (type == "svg") {
return '<div style="width:' + width + 'px;fill:' + color + '">' + content + '</div>';
} else if (type == "image") {
return '<img style="width:' + width + 'px;" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="' + content + '"/><noscript><img style="width:' + width + 'px;" src="' + content + '"/></noscript>';
}
}
app.createElements = function (root, elementCount) {
var starCount = config.elements["star"] ? config.elements["star"].count : 0;
var ribbonCount = config.elements["ribbon"] ? config.elements["ribbon"].count : 0;
//var customCount = config.elements["custom"] ? config.elements["custom"].count : 0;
var customCount = [];
if (config.elements["custom"] && config.elements["custom"].length > -1) {
console.log(config.elements["custom"].length)
for (var i = 0; i <= config.elements["custom"].length; i++) {
if (config.elements["custom"][i]) {
customCount.push({
'count': config.elements["custom"][i]['count']
})
}
}
}
var cl = 0;
var all = []
for (var index = 0; index <= elementCount; index++) {
var element = document.createElement('div');
element.classList = ['fetti'];
var color = config.colors[index % config.colors.length];
var w = Math.floor((Math.random() * 10) + 1) + 'px';
var h = Math.floor((Math.random() * 10) + 1) + 'px';
element.style.width = w;
element.style.height = h;
element.style.position = 'fixed';
element.style.zIndex = "999999";
if (config.elements["star"] && starCount > 0) {
var s = starCount - 1
if (s <= config.elements["star"].count && s >= 0) {
element.style['background-color'] = "";
element.innerHTML = app.renderStar(25, color);
element.direction = config.elements["star"].direction;
element.rotation = config.elements["star"].rotation;
starCount = s
}
} else if (config.elements["ribbon"] && ribbonCount > 0) {
var r = ribbonCount - 1
if (r <= config.elements["ribbon"].count && r >= 0) {
element.style['background-color'] = "";
element.innerHTML = app.renderRibbon(30, color);
element.direction = config.elements["ribbon"].direction;
element.rotation = config.elements["ribbon"].rotation;
ribbonCount = r
}
}
else if (config.elements["custom"] && config.elements["custom"].length > -1 && customCount[cl]) {
if (customCount[cl]) {
var c = customCount[cl].count - 1
if (c <= customCount[cl].count) {
if (c <= customCount[cl].count && c >= 0) {
element.style['background-color'] = "";
var type = config.elements["custom"][cl].contentType;
var content = config.elements["custom"][cl].content;
var width = config.elements["custom"][cl].width;
var textSize = config.elements["custom"][cl].textSize;
element.innerHTML = app.customRender(content, type, color, width, textSize);
element.direction = config.elements["custom"][cl].direction;
element.rotation = config.elements["custom"][cl].rotation;
customCount[cl].count = c
if (customCount[cl].count == 0) {
cl++;
}
}
}
}
}
else {
if (w == h) {
element.style['background-color'] = color;
element.style.borderRadius = "50%";
} else {
element.style['background-color'] = color;
}
element.direction = config.elements["confetti"] ? (config.elements["confetti"].direction ? config.elements["confetti"].direction : 'down') : 'down';
element.rotation = config.elements["confetti"] ? (config.elements["confetti"].rotation ? config.elements["confetti"].rotation : true) : true;
}
//root.prepend(element);
root.insertBefore(element, root.firstChild); //older browser
all.push(element)
}
return all;
}
app.randomPhysics = function (x, y, angle, spread, startVelocity) {
var radAngle = angle * (Math.PI / 180);
var radSpread = spread * (Math.PI / 180);
return {
x: x,
y: y,
wobble: Math.random() * 10,
velocity: (startVelocity * 0.3) + (Math.random() * startVelocity),
angle2D: -radAngle + ((0.3 * radSpread) - (Math.random() * radSpread)),
angle3D: -(Math.PI / 4) + (Math.random() * (Math.PI / 2)),
tiltAngle: Math.random() * Math.PI
};
}
app.updateFetti = function (fetti, progress, decay) {
fetti.physics.x += Math.cos(fetti.physics.angle2D) * fetti.physics.velocity;
fetti.physics.y += Math.sin(fetti.physics.angle2D) * fetti.physics.velocity;
fetti.physics.z += Math.sin(fetti.physics.angle3D) * fetti.physics.velocity;
fetti.physics.wobble += 0.1;
fetti.physics.velocity *= decay;
if (fetti.element.direction == "up") {
fetti.physics.y -= 3;
} else {
fetti.physics.y += 3;
}
fetti.physics.tiltAngle += 0.1;
var x = fetti.physics.x,
y = fetti.physics.y,
tiltAngle = fetti.physics.tiltAngle,
wobble = fetti.physics.wobble;
var wobbleX = x + (10 * Math.cos(wobble));
var wobbleY = y + (10 * Math.sin(wobble));
var transform;
if (fetti.element.rotation) {
transform = 'translate3d(' + wobbleX + 'px, ' + wobbleY + 'px, 0) rotate3d(1, 1, 1, ' + tiltAngle + 'rad)';
} else {
transform = 'translate3d(' + wobbleX + 'px, ' + wobbleY + 'px, 0)';
}
fetti.element.style.transform = transform;
fetti.element.style.opacity = 1 - progress;
}
app.animate = function (root, fettis, decay) {
var totalTicks = 200;
var tick = 0;
function update() {
fettis.forEach(function (fetti) {
app.updateFetti(fetti, tick / totalTicks, decay);
});
tick += 1;
if (tick < totalTicks) {
requestAnimationFrame(update);
} else {
fettis.forEach(function (fetti) {
root.removeChild(fetti.element);
});
}
}
requestAnimationFrame(update);
}
app.confetti = function (root, x, y) {
angle = config.angle,
decay = config.decay,
spread = config.spread,
startVelocity = config.startVelocity,
elementCount = config.confettiCount
var elements = app.createElements(root, elementCount);
var fettis = [];
elements.map(function (element) {
var s = {
'element': element,
'physics': app.randomPhysics(x, y, angle, spread, startVelocity)
}
fettis.push(s);
});
app.animate(root, fettis, decay);
}
var attach = document.querySelector(config.el)
if (config.position != null) {
if (config.position == "bottomLeftRight") {
config.angle = 45;
app.confetti(attach, 0, window.innerHeight - 200);
var rightConfig = params;
rightConfig['position'] = null;
rightConfig['angle'] = 135;
rightConfig['x'] = window.innerWidth;
rightConfig['y'] = window.innerHeight - 200;
new confettiKit(rightConfig);
} else if (config.position == "topLeftRight") {
config.angle = 340;
app.confetti(attach, 0, 0);
var rightConfig = params;
rightConfig['position'] = null;
rightConfig['angle'] = 190;
rightConfig['x'] = window.innerWidth;
rightConfig['y'] = 0;
new confettiKit(rightConfig);
}
} else {
app.confetti(attach, config.x, config.y);
}
};
})();
December drukte: let op, bestel op tijd. We kunnen helaas niet garanderen dat de gewenste leverdatum altijd behaald wordt.
