38 lines
970 B
JavaScript
38 lines
970 B
JavaScript
|
var draw = function(canvas, chunks, fillStyle) {
|
||
|
|
chunks = chunks || [];
|
||
|
|
if (!canvas.getContext) {
|
||
|
|
console.log('use chunk bar on an canvas implementation!');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var ctx = canvas.getContext('2d');
|
||
|
|
ctx.fillStyle = fillStyle || "#149BDF";
|
||
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
|
var x = 0,
|
||
|
|
width = canvas.width,
|
||
|
|
height = canvas.height;
|
||
|
|
chunks.forEach(function(c) {
|
||
|
|
var dx = c.ratio * width;
|
||
|
|
if (c.show)
|
||
|
|
ctx.fillRect(x, 0, dx, height);
|
||
|
|
x += dx;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
app.directive('chunkbar', ['$utils', function(utils) {
|
||
|
|
return function(scope, elem, attrs) {
|
||
|
|
var bitfield = "", pieces = 0;
|
||
|
|
var update = function() {
|
||
|
|
draw(elem[0], utils.getChunksFromHex(bitfield, pieces), attrs.fillStyle);
|
||
|
|
};
|
||
|
|
scope.$watch(attrs.bitfield, function(bf) {
|
||
|
|
bitfield = bf;
|
||
|
|
update();
|
||
|
|
});
|
||
|
|
scope.$watch(attrs.pieces, function(p) {
|
||
|
|
pieces = p;
|
||
|
|
update();
|
||
|
|
});
|
||
|
|
|
||
|
|
update();
|
||
|
|
};
|
||
|
|
}]);
|