54 lines
1.3 KiB
JavaScript
54 lines
1.3 KiB
JavaScript
|
/**
|
||
|
|
* An element which displays the strength of a value (like a signal indicator on a cell phone).
|
||
|
|
*/
|
||
|
|
angular.module('quay').directive('strengthIndicator', function () {
|
||
|
|
var directiveDefinitionObject = {
|
||
|
|
priority: 0,
|
||
|
|
templateUrl: '/static/directives/strength-indicator.html',
|
||
|
|
replace: false,
|
||
|
|
transclude: true,
|
||
|
|
restrict: 'C',
|
||
|
|
scope: {
|
||
|
|
'value': '=value',
|
||
|
|
'maximum': '=maximum'
|
||
|
|
},
|
||
|
|
controller: function($scope, $element) {
|
||
|
|
$scope.strengthClass = '';
|
||
|
|
|
||
|
|
var calculateClass = function() {
|
||
|
|
if ($scope.value == null || $scope.maximum == null) {
|
||
|
|
$scope.strengthClass = '';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var value = Math.round(($scope.value / $scope.maximum) * 4);
|
||
|
|
|
||
|
|
if (value <= 0) {
|
||
|
|
$scope.strengthClass = 'none';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (value <= 1) {
|
||
|
|
$scope.strengthClass = 'poor';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (value <= 2) {
|
||
|
|
$scope.strengthClass = 'barely';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (value <= 3) {
|
||
|
|
$scope.strengthClass = 'fair';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
$scope.strengthClass = 'good';
|
||
|
|
};
|
||
|
|
|
||
|
|
$scope.$watch('maximum', calculateClass);
|
||
|
|
$scope.$watch('value', calculateClass);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return directiveDefinitionObject;
|
||
|
|
});
|