85 lines
3.3 KiB
JavaScript
85 lines
3.3 KiB
JavaScript
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.PulsingBeaconAnimationStyles = void 0;
|
||
|
|
var tslib_1 = require("tslib");
|
||
|
|
var merge_styles_1 = require("@fluentui/merge-styles");
|
||
|
|
var DEFAULT_DURATION = '14s';
|
||
|
|
var DEFAULT_DELAY = '2s';
|
||
|
|
var DEFAULT_ITERATION_COUNT = '1';
|
||
|
|
function _continuousPulseStepOne(beaconColorOne, innerDimension) {
|
||
|
|
return {
|
||
|
|
borderColor: beaconColorOne,
|
||
|
|
borderWidth: '0px',
|
||
|
|
width: innerDimension,
|
||
|
|
height: innerDimension,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function _continuousPulseStepTwo(borderWidth) {
|
||
|
|
return {
|
||
|
|
opacity: 1,
|
||
|
|
borderWidth: borderWidth,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function _continuousPulseStepThree() {
|
||
|
|
return {
|
||
|
|
opacity: 1,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function _continuousPulseStepFour(beaconColorTwo, outerDimension) {
|
||
|
|
return {
|
||
|
|
borderWidth: '0',
|
||
|
|
width: outerDimension,
|
||
|
|
height: outerDimension,
|
||
|
|
opacity: 0,
|
||
|
|
borderColor: beaconColorTwo,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function _continuousPulseStepFive(beaconColorOne, innerDimension) {
|
||
|
|
return tslib_1.__assign(tslib_1.__assign({}, _continuousPulseStepOne(beaconColorOne, innerDimension)), {
|
||
|
|
opacity: 0,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function _continuousPulseAnimationDouble(beaconColorOne, beaconColorTwo, innerDimension, outerDimension, borderWidth) {
|
||
|
|
return (0, merge_styles_1.keyframes)({
|
||
|
|
'0%': _continuousPulseStepOne(beaconColorOne, innerDimension),
|
||
|
|
'1.42%': _continuousPulseStepTwo(borderWidth),
|
||
|
|
'3.57%': _continuousPulseStepThree(),
|
||
|
|
'7.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
|
||
|
|
'8%': _continuousPulseStepFive(beaconColorOne, innerDimension),
|
||
|
|
'29.99%': _continuousPulseStepFive(beaconColorOne, innerDimension),
|
||
|
|
'30%': _continuousPulseStepOne(beaconColorOne, innerDimension),
|
||
|
|
'31.42%': _continuousPulseStepTwo(borderWidth),
|
||
|
|
'33.57%': _continuousPulseStepThree(),
|
||
|
|
'37.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
|
||
|
|
'38%': _continuousPulseStepFive(beaconColorOne, innerDimension),
|
||
|
|
'79.42%': _continuousPulseStepFive(beaconColorOne, innerDimension),
|
||
|
|
'79.43': _continuousPulseStepOne(beaconColorOne, innerDimension),
|
||
|
|
'81.85': _continuousPulseStepTwo(borderWidth),
|
||
|
|
'83.42': _continuousPulseStepThree(),
|
||
|
|
'87%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
|
||
|
|
'100%': {},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function _continuousPulseAnimationSingle(beaconColorOne, beaconColorTwo, innerDimension, outerDimension, borderWidth) {
|
||
|
|
return (0, merge_styles_1.keyframes)({
|
||
|
|
'0%': _continuousPulseStepOne(beaconColorOne, innerDimension),
|
||
|
|
'14.2%': _continuousPulseStepTwo(borderWidth),
|
||
|
|
'35.7%': _continuousPulseStepThree(),
|
||
|
|
'71.4%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
|
||
|
|
'100%': {},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function _createDefaultAnimation(animationName, delayLength) {
|
||
|
|
return {
|
||
|
|
animationName: animationName,
|
||
|
|
animationIterationCount: DEFAULT_ITERATION_COUNT,
|
||
|
|
animationDuration: DEFAULT_DURATION,
|
||
|
|
animationDelay: delayLength || DEFAULT_DELAY,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
exports.PulsingBeaconAnimationStyles = {
|
||
|
|
continuousPulseAnimationDouble: _continuousPulseAnimationDouble,
|
||
|
|
continuousPulseAnimationSingle: _continuousPulseAnimationSingle,
|
||
|
|
createDefaultAnimation: _createDefaultAnimation,
|
||
|
|
};
|
||
|
|
//# sourceMappingURL=PulsingBeaconAnimationStyles.js.map
|