119 lines
3.5 KiB
JavaScript
119 lines
3.5 KiB
JavaScript
/*
|
|
|
|
Copyright 2008-2015 Clipperz Srl
|
|
|
|
This file is part of Clipperz, the online password manager.
|
|
For further information about its features and functionalities please
|
|
refer to http://www.clipperz.com.
|
|
|
|
* Clipperz is free software: you can redistribute it and/or modify it
|
|
under the terms of the GNU Affero General Public License as published
|
|
by the Free Software Foundation, either version 3 of the License, or
|
|
(at your option) any later version.
|
|
|
|
* Clipperz is distributed in the hope that it will be useful, but
|
|
WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
|
|
See the GNU Affero General Public License for more details.
|
|
|
|
* You should have received a copy of the GNU Affero General Public
|
|
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
|
|
|
|
*/
|
|
|
|
"use strict";
|
|
Clipperz.Base.module('Clipperz.PM.UI.Components');
|
|
|
|
Clipperz.PM.UI.Components.RadialProgressIndicatorClass = React.createClass({
|
|
|
|
displayName: 'Clipperz.PM.UI.Components.RadialProgressIndicator',
|
|
|
|
propTypes: {
|
|
'progress': React.PropTypes.number.isRequired,
|
|
},
|
|
|
|
getInitialState: function() {
|
|
return {};
|
|
},
|
|
|
|
//=========================================================================
|
|
|
|
getPathDefinition: function(aRadius, aProgress) {
|
|
aProgress = (aProgress <= 1) ? aProgress : 1;
|
|
aProgress = (aProgress >= 0) ? aProgress : 0;
|
|
|
|
var pi = Math.PI;
|
|
var radiantAngle = 2 * pi * aProgress;
|
|
|
|
var x = Math.sin(radiantAngle) * aRadius;
|
|
var y = Math.cos(radiantAngle) * - aRadius;
|
|
var mid = (aProgress > 0.5) ? 1 : 0;
|
|
|
|
return 'M 0 0 ' + // Start from origin
|
|
'v ' + (-aRadius) +' ' + // Straight vertical up
|
|
'A ' + aRadius + ' ' + aRadius + ' 1 ' + // Arc, vertical radius, horizontal radius, xAxisRotate (?)...
|
|
mid + ' 1 ' + // ...lrge arc flag,
|
|
x + ' ' + // ...destination x
|
|
y + ' z'; // ...destination y, close path
|
|
|
|
//[x,y].forEach(function( d ){
|
|
// d = Math.round( d * 1e3 ) / 1e3;
|
|
//});
|
|
},
|
|
|
|
//=========================================================================
|
|
|
|
getAdditionalClassesString: function(aList) {
|
|
var result;
|
|
|
|
aList = aList || [];
|
|
result = aList.join(' ');
|
|
|
|
return ' '+result;
|
|
},
|
|
|
|
render: function () {
|
|
var border;
|
|
|
|
var additionalClasses = this.getAdditionalClassesString(this.props['additionalClasses']);
|
|
|
|
var radius = Clipperz.PM.UI.Components.DEFAULT_RADIUS;
|
|
var borderSize = (this.props['border']) ? this.props['border'] : 0;
|
|
var boxSize = 2 * (radius + borderSize) + 2;
|
|
var center = boxSize/2;
|
|
|
|
border = null;
|
|
if (this.props['border']) {
|
|
border = React.DOM.circle({
|
|
'className': 'border',
|
|
'cx': center,
|
|
'cy': center,
|
|
'r': radius+this.props['border'],
|
|
});
|
|
}
|
|
|
|
return React.DOM.svg({
|
|
'className': 'radialProgressIndicator' + additionalClasses,
|
|
'viewBox': '0 0 ' + boxSize + ' ' + boxSize,
|
|
}, [
|
|
border,
|
|
React.DOM.circle({
|
|
'className': 'background',
|
|
'cx': center,
|
|
'cy': center,
|
|
'r': radius,
|
|
}),
|
|
React.DOM.path({
|
|
'className': 'progress',
|
|
'transform': 'translate(' + (center) + ', ' + (center) + ')',
|
|
'd': this.getPathDefinition(radius, this.props['progress'])
|
|
})
|
|
])
|
|
}
|
|
|
|
//=========================================================================
|
|
});
|
|
|
|
Clipperz.PM.UI.Components.RadialProgressIndicator = React.createFactory(Clipperz.PM.UI.Components.RadialProgressIndicatorClass);
|
|
|
|
Clipperz.PM.UI.Components.DEFAULT_RADIUS = 10; // You can resize the SVG object with CSS anyway
|