Card.directive.js
1.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
(function(angular){
var module = angular.module('framework.directives.UI',[]);
module.directive('card', cardDirective);
cardDirective.$inject=['$state', '$interval', '$parse'];
function cardDirective($state, $interval, $parse) {
return {
restrict: 'E',
transclude: true,
replace: true,
scope: true,
template: function(element, attrs) {
var template='';
template += '<div class="card"><div class="card-container"';
if(attrs.allowClick!="false") {
template += ' ng-click="viewItem(item)"'
}
template += '><svg class="logo" style="background-image:url(\'{{::accessors.LogoUrl(item)}}\')" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="transparent" stroke-width="10" stroke-linecap="round" ng-show="showScore==true" stroke-location="outside"></circle></svg>';
if(attrs.showTitle!="false") {
template += '<strong>{{ ::accessors.Title(item) }}</strong>';
}
if(attrs.showSubtitle!="false") {
template += '<small>{{ ::accessors.SubTitle(item) }}</small>';
}
template += '</div></div>';
return template;
},
link: function(scope, elem, attrs, ctrls, transcludeFn) {
if(attrs.item) {
var getter = $parse(attrs.item);
scope.item = getter(scope);
}
scope.viewItem = viewItem;
if(scope.accessors.Score) {
var percentScore = (2 * Math.PI*50)/100*scope.accessors.Score(scope.item);
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")
.attr("stroke", percentColor)
.attr("stroke-dasharray",percentScore+",10000");
}
function viewItem(item) {
$state.go(scope.rNavTo, { Id: item.Id });
}
}
}
}
})(angular);