(function(angular){
var module = angular.module('framework.directives.UI');
module.directive('score', scoreDirective);
scoreDirective.$inject=['$state', '$interval', '$parse'];
function scoreDirective($state, $interval, $parse) {
return {
restrict: 'E',
transclude: true,
replace: true,
scope: true,
template: function(element, attrs) {
var template='';
template += '
';
}
else {
template += ' style="width:100px;height:100px;border-radius:50px;">';
}
if(attrs.showScore) {
template += '
'+attrs.showScore+'
';
}
template += '
';
template += '
';
return template;
},
link: function(scope, elem, attrs, ctrls, transcludeFn) {
if(!attrs.value)
return;
var strokeWidth = (attrs.strokeWidth)? attrs.strokeWidth : 5;
var percentScore = (2 * Math.PI*50)/100 * attrs.value;
var percentColor = (percentScore < 90)? 'red': (percentScore >= 90 && percentScore <180)? 'orange' :(percentScore >= 180 && percentScore <270)? 'rgb(25, 195, 45)' : 'rgb(25, 195, 45)';
elem.find("circle.score-back-circle")
.attr("stroke", "#eee")
.attr("stroke-width", strokeWidth);
elem.find("circle.score-front-circle")
.attr("stroke", percentColor)
.attr("stroke-width", strokeWidth)
.attr("stroke-dasharray", percentScore+",10000");
}
}
}
})(angular);