Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(progressbar): add progressbar directive
Browse files Browse the repository at this point in the history
Closes #187
  • Loading branch information
bekos authored and pkozlowski-opensource committed Mar 14, 2013
1 parent e22f28b commit 261f207
Show file tree
Hide file tree
Showing 7 changed files with 508 additions and 0 deletions.
27 changes: 27 additions & 0 deletions src/progressbar/docs/demo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<div ng-controller="ProgressDemoCtrl" class="well">
<h2>Static</h2>
<div class="row-fluid">
<div class="span4"><progress value="55"></progress></div>
<div class="span4"><progress value="22" class="progress-warning progress-striped"></progress></div>
<div class="span4"><progress value="88" class="progress-danger progress-striped active"></div>
</div>

<h2>Dynamic <button class="btn btn-primary" type="button" ng-click="random()">Randomize</button></h2>
<pre>Value: {{dynamic}}</pre>
<progress value="dynamic"></progress>

<small><em>No animation</em></small>
<progress value="dynamic" class="progress-success" animate="false"></progress>

<small><em>Object (changes type based on value)</em></small>
<progress value="dynamicObject" class="progress-striped active"></progress>

<h2>Stacked <button class="btn btn-primary" type="button" ng-click="randomStacked()">Randomize</button></h2>
<small><em>Array values with automatic types</em></small>
<pre>Value: {{stackedArray}}</pre>
<progress value="stackedArray" auto-type="true"></progress>

<small><em>Objects</em></small>
<pre>Value: {{stacked}}</pre>
<progress value="stacked"></progress>
</div>
44 changes: 44 additions & 0 deletions src/progressbar/docs/demo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
var ProgressDemoCtrl = function ($scope) {

$scope.random = function() {
var value = Math.floor((Math.random()*100)+1);
var type;

if (value < 25) {
type = 'success';
} else if (value < 50) {
type = 'info';
} else if (value < 75) {
type = 'warning';
} else {
type = 'danger';
}

$scope.dynamic = value;
$scope.dynamicObject = {
value: value,
type: type
};
};
$scope.random();

var types = ['success', 'info', 'warning', 'danger'];
$scope.randomStacked = function() {
$scope.stackedArray = [];
$scope.stacked = [];

var n = Math.floor((Math.random()*4)+1);

for (var i=0; i < n; i++) {
var value = Math.floor((Math.random()*30)+1);
$scope.stackedArray.push(value);

var index = Math.floor((Math.random()*4));
$scope.stacked.push({
value: value,
type: types[index]
});
}
};
$scope.randomStacked();
};
3 changes: 3 additions & 0 deletions src/progressbar/docs/readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
A lightweight progress bar directive that is focused on providing progress visualization!

The progress bar directive supports multiple (stacked) bars into the same element, optional transition animation, event handler for full & empty state and many more.
106 changes: 106 additions & 0 deletions src/progressbar/progressbar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
angular.module('ui.bootstrap.progressbar', ['ui.bootstrap.transition'])

.constant('progressConfig', {
animate: true,
autoType: false,
stackedTypes: ['success', 'info', 'warning', 'danger']
})

.controller('ProgressBarController', ['$scope', '$attrs', 'progressConfig', function($scope, $attrs, progressConfig) {

// Whether bar transitions should be animated
var animate = angular.isDefined($attrs.animate) ? $scope.$eval($attrs.animate) : progressConfig.animate;
var autoType = angular.isDefined($attrs.autoType) ? $scope.$eval($attrs.autoType) : progressConfig.autoType;
var stackedTypes = angular.isDefined($attrs.stackedTypes) ? $scope.$eval('[' + $attrs.stackedTypes + ']') : progressConfig.stackedTypes;

// Create bar object
this.makeBar = function(newBar, oldBar, index) {
var newValue = (angular.isObject(newBar)) ? newBar.value : (newBar || 0);
var oldValue = (angular.isObject(oldBar)) ? oldBar.value : (oldBar || 0);
var type = (angular.isObject(newBar) && angular.isDefined(newBar.type)) ? newBar.type : (autoType) ? getStackedType(index || 0) : null;

return {
from: oldValue,
to: newValue,
type: type,
animate: animate
};
};

function getStackedType(index) {
return stackedTypes[index];
}

this.addBar = function(bar) {
$scope.bars.push(bar);
$scope.totalPercent += bar.to;
};

this.clearBars = function() {
$scope.bars = [];
$scope.totalPercent = 0;
};
this.clearBars();
}])

.directive('progress', function() {
return {
restrict: 'EA',
replace: true,
controller: 'ProgressBarController',
scope: {
value: '=',
onFull: '&',
onEmpty: '&'
},
templateUrl: 'template/progressbar/progress.html',
link: function(scope, element, attrs, controller) {
scope.$watch('value', function(newValue, oldValue) {
controller.clearBars();

if (angular.isArray(newValue)) {
// Stacked progress bar
for (var i=0, n=newValue.length; i < n; i++) {
controller.addBar(controller.makeBar(newValue[i], oldValue[i], i));
}
} else {
// Simple bar
controller.addBar(controller.makeBar(newValue, oldValue));
}
}, true);

// Total percent listeners
scope.$watch('totalPercent', function(value) {
if (value >= 100) {
scope.onFull();
} else if (value <= 0) {
scope.onEmpty();
}
}, true);
}
};
})

.directive('progressbar', ['$transition', function($transition) {
return {
restrict: 'EA',
replace: true,
scope: {
width: '=',
old: '=',
type: '=',
animate: '='
},
templateUrl: 'template/progressbar/bar.html',
link: function(scope, element) {
scope.$watch('width', function(value) {
if (scope.animate) {
element.css('width', scope.old + '%');
$transition(element, {width: value + '%'});
} else {
element.css('width', value + '%');
}
});
}
};
}]);
Loading

0 comments on commit 261f207

Please sign in to comment.