76 lines
2.2 KiB
JavaScript
76 lines
2.2 KiB
JavaScript
var MovimFavicon = {
|
|
originalUrl: null,
|
|
originalIcon: null,
|
|
sizes: '128x128',
|
|
|
|
counter: function (counterTab1, counterTab2) {
|
|
let counter = counterTab1 + counterTab2;
|
|
|
|
link = document.querySelector('link[sizes="' + MovimFavicon.sizes + '"]');
|
|
|
|
canvas = document.createElement("canvas");
|
|
ctx = canvas.getContext('2d');
|
|
|
|
canvas.width = 32;
|
|
canvas.height = 32;
|
|
|
|
ctx.drawImage(MovimFavicon.originalIcon, 0, 0, 32, 32);
|
|
|
|
if (counter > 0) {
|
|
large = counter > 9;
|
|
if (counter > 99) {
|
|
counter = '+';
|
|
large = false;
|
|
}
|
|
|
|
ctx.textAlign = 'center';
|
|
ctx.font = 'bold 18px Roboto';
|
|
|
|
radius = 5;
|
|
x = large ? 4 : 12;
|
|
y = 12;
|
|
w = large ? 28 : 20;
|
|
h = 20;
|
|
|
|
var r = x + w;
|
|
var b = y + h;
|
|
|
|
ctx.beginPath();
|
|
ctx.fillStyle = getComputedStyle(document.body).getPropertyValue(counterTab2 > 0
|
|
? '--p-red'
|
|
: '--movim-accent'
|
|
);
|
|
ctx.moveTo(x + radius, y);
|
|
ctx.lineTo(r - radius, y);
|
|
ctx.quadraticCurveTo(r, y, r, y + radius);
|
|
ctx.lineTo(r, y + h - radius);
|
|
ctx.quadraticCurveTo(r, b, r - radius, b);
|
|
ctx.lineTo(x + radius, b);
|
|
ctx.quadraticCurveTo(x, b, x, b - radius);
|
|
ctx.lineTo(x, y + radius);
|
|
ctx.quadraticCurveTo(x, y, x + radius, y);
|
|
ctx.fill();
|
|
|
|
ctx.fillStyle = "#fff";
|
|
counterTextX = large ? 18 : 22;
|
|
ctx.fillText(counter, counterTextX, 28, w);
|
|
}
|
|
|
|
MovimFavicon.set(canvas.toDataURL());
|
|
},
|
|
|
|
set: function (url) {
|
|
link = document.querySelector('link[sizes="' + MovimFavicon.sizes + '"]');
|
|
link.href = url;
|
|
},
|
|
|
|
init: function () {
|
|
link = document.querySelector('link[sizes="' + MovimFavicon.sizes + '"]');
|
|
MovimFavicon.originalUrl = link.href;
|
|
MovimFavicon.originalIcon = new Image();
|
|
MovimFavicon.originalIcon.src = MovimFavicon.originalUrl;
|
|
}
|
|
}
|
|
|
|
MovimFavicon.init();
|