Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
play(){
let start = this.state.position;
if (start >= this.state.length){
start = 0; // at the end and pressed play so restart
}
let remainingLength = this.state.length - start;
let remainingTime = this.props.time * remainingLength / this.state.length;
this._segmentToPath();
this.setState({mode: 'playing'});
this.path.attr({'stroke-dasharray': this.state.length + ' ' + this.state.length});
this.path.attr({display: 'block'});
this.snapAnimate = Snap.animate(remainingLength, 0,
(val) => { // incremental callback
let newPos = this.state.length - val;
this.path.attr({'stroke-dashoffset': val});
if (this.marker) {
this._positionMarker(this.path,
newPos,
this.state.length);
}
this.setState({position: newPos,
step: this._segmentFromPosition(newPos)});
},
remainingTime,
mina.linear,
() => { // end callback
this.setState({mode: 'path',
position: 0});
var separatorWidth = this.mOptions.config.gaugeSeparatorWidth;
if (animated) {
/* compute the color difference */
var colorDifference = {
r: newColor.r - currentColor.r,
g: newColor.g - currentColor.g,
b: newColor.b - currentColor.b,
a: newColor.a - currentColor.a,
};
/* save the current value and compute the value change */
var currentValue = barInfo.currentValue;
var valueChange = (progress + progressOffset) - currentValue;
barInfo.animation = Snap.animate(0, 1,
function (delta) {
var animatedColor = 'rgba(' +
(currentColor.r + (colorDifference.r * delta)) + ',' +
(currentColor.g + (colorDifference.g * delta)) + ',' +
(currentColor.b + (colorDifference.b * delta)) + ',' +
(currentColor.a + (colorDifference.a * delta)) + ')';
var value = currentValue + (valueChange * delta);
barInfo.currentValue = value;
bar.attr({'stroke-dasharray': this.mCircumference * value + ' ' + this.mCircumference * (1.0 - value), 'stroke': animatedColor});
if (separator) {
value += value > 0 ? separatorWidth : 0;
separator.attr({'stroke-dasharray': (this.mCircumference * value) + ' ' + this.mCircumference * (1.0 - value)});
}
}.bind(this),
this.mOptions.config.transitionsDuration, mina.linear, function () {
barInfo.animation = null;
if (this.mVisualFocusAnimation) {
this.mVisualFocusAnimation.stop();
this.mVisualFocusAnimation = null;
}
if (value) {
this._applyVisualFilter(1);
this.mVisualFocusAnimation = Snap.animate(1, 0, function(currentValue) {
this._applyVisualFilter(currentValue);
}.bind(this), this.mPersonaOptions.config.transitionsDuration, mina.easeinout, function() {
this._applyVisualFilter(0);
this.mVisualFocusAnimation = null;
}.bind(this));
} else {
this._applyVisualFilter(0);
this.mVisualFocusAnimation = Snap.animate(0, 1, function(currentValue) {
this._applyVisualFilter(currentValue);
}.bind(this), this.mPersonaOptions.config.transitionsDuration, mina.easeinout, function() {
this.mVisualFocusAnimation = null;
}.bind(this));
}
}
},
});
color: color,
progress: progress,
progressOffset: progressOffset,
currentValue: 0,
bar: bar,
separator: separator,
animation: null,
};
this.mBars[id] = barInfo;
this.mBarsArray.unshift(barInfo);
var separatorWidth = this.mOptions.config.gaugeSeparatorWidth;
var startProgress = parseFloat(animationStart);
startProgress = isNaN(startProgress) ? 0 : startProgress;
barInfo.animation = Snap.animate(startProgress, progress + progressOffset,
function(value) {
barInfo.currentValue = value;
bar.attr({'stroke-dasharray': circumference * value + ' ' + circumference * (1.0 - value)});
if (separator) {
var offset = value + (value > 0 ? separatorWidth : 0);
separator.attr({'stroke-dasharray': (circumference * offset) + ' ' + circumference * (1.0 - offset)});
}
},
this.mOptions.config.transitionsDuration, mina.linear, function () {
barInfo.animation = null;
});
};
var gaugeBarsFunction = function(barInfo, resolve) {
Snap.animate(oldCircumference, newCircumference, gaugeBarAnimationFunction.bind(this, barInfo, resolve), animationDuration, animationEasing);
};
set: function(value) {
if (value !== this.mInVisualFocus) {
this.mInVisualFocus = value;
if (this.mVisualFocusAnimation) {
this.mVisualFocusAnimation.stop();
this.mVisualFocusAnimation = null;
}
if (value) {
this._applyVisualFilter(1);
this.mVisualFocusAnimation = Snap.animate(1, 0, function(currentValue) {
this._applyVisualFilter(currentValue);
}.bind(this), this.mPersonaOptions.config.transitionsDuration, mina.easeinout, function() {
this._applyVisualFilter(0);
this.mVisualFocusAnimation = null;
}.bind(this));
} else {
this._applyVisualFilter(0);
this.mVisualFocusAnimation = Snap.animate(0, 1, function(currentValue) {
this._applyVisualFilter(currentValue);
}.bind(this), this.mPersonaOptions.config.transitionsDuration, mina.easeinout, function() {
this.mVisualFocusAnimation = null;
}.bind(this));
}
}
},
});