| 1 | import { __assign } from "tslib";
|
| 2 | import { keyframes } from '@uifabric/merge-styles';
|
| 3 | var DEFAULT_DURATION = '14s';
|
| 4 | var DEFAULT_DELAY = '2s';
|
| 5 | var DEFAULT_ITERATION_COUNT = '1';
|
| 6 | function _continuousPulseStepOne(beaconColorOne, innerDimension) {
|
| 7 | return {
|
| 8 | borderColor: beaconColorOne,
|
| 9 | borderWidth: '0px',
|
| 10 | width: innerDimension,
|
| 11 | height: innerDimension,
|
| 12 | };
|
| 13 | }
|
| 14 | function _continuousPulseStepTwo(borderWidth) {
|
| 15 | return {
|
| 16 | opacity: 1,
|
| 17 | borderWidth: borderWidth,
|
| 18 | };
|
| 19 | }
|
| 20 | function _continuousPulseStepThree() {
|
| 21 | return {
|
| 22 | opacity: 1,
|
| 23 | };
|
| 24 | }
|
| 25 | function _continuousPulseStepFour(beaconColorTwo, outerDimension) {
|
| 26 | return {
|
| 27 | borderWidth: '0',
|
| 28 | width: outerDimension,
|
| 29 | height: outerDimension,
|
| 30 | opacity: 0,
|
| 31 | borderColor: beaconColorTwo,
|
| 32 | };
|
| 33 | }
|
| 34 | function _continuousPulseStepFive(beaconColorOne, innerDimension) {
|
| 35 | return __assign(__assign({}, _continuousPulseStepOne(beaconColorOne, innerDimension)), {
|
| 36 | opacity: 0,
|
| 37 | });
|
| 38 | }
|
| 39 | function _continuousPulseAnimationDouble(beaconColorOne, beaconColorTwo, innerDimension, outerDimension, borderWidth) {
|
| 40 | return keyframes({
|
| 41 | '0%': _continuousPulseStepOne(beaconColorOne, innerDimension),
|
| 42 | '1.42%': _continuousPulseStepTwo(borderWidth),
|
| 43 | '3.57%': _continuousPulseStepThree(),
|
| 44 | '7.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
|
| 45 | '8%': _continuousPulseStepFive(beaconColorOne, innerDimension),
|
| 46 | '29.99%': _continuousPulseStepFive(beaconColorOne, innerDimension),
|
| 47 | '30%': _continuousPulseStepOne(beaconColorOne, innerDimension),
|
| 48 | '31.42%': _continuousPulseStepTwo(borderWidth),
|
| 49 | '33.57%': _continuousPulseStepThree(),
|
| 50 | '37.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
|
| 51 | '38%': _continuousPulseStepFive(beaconColorOne, innerDimension),
|
| 52 | '79.42%': _continuousPulseStepFive(beaconColorOne, innerDimension),
|
| 53 | '79.43': _continuousPulseStepOne(beaconColorOne, innerDimension),
|
| 54 | '81.85': _continuousPulseStepTwo(borderWidth),
|
| 55 | '83.42': _continuousPulseStepThree(),
|
| 56 | '87%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
|
| 57 | '100%': {},
|
| 58 | });
|
| 59 | }
|
| 60 | function _continuousPulseAnimationSingle(beaconColorOne, beaconColorTwo, innerDimension, outerDimension, borderWidth) {
|
| 61 | return keyframes({
|
| 62 | '0%': _continuousPulseStepOne(beaconColorOne, innerDimension),
|
| 63 | '14.2%': _continuousPulseStepTwo(borderWidth),
|
| 64 | '35.7%': _continuousPulseStepThree(),
|
| 65 | '71.4%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
|
| 66 | '100%': {},
|
| 67 | });
|
| 68 | }
|
| 69 | function _createDefaultAnimation(animationName, delayLength) {
|
| 70 | return {
|
| 71 | animationName: animationName,
|
| 72 | animationIterationCount: DEFAULT_ITERATION_COUNT,
|
| 73 | animationDuration: DEFAULT_DURATION,
|
| 74 | animationDelay: delayLength || DEFAULT_DELAY,
|
| 75 | };
|
| 76 | }
|
| 77 | export var PulsingBeaconAnimationStyles = {
|
| 78 | continuousPulseAnimationDouble: _continuousPulseAnimationDouble,
|
| 79 | continuousPulseAnimationSingle: _continuousPulseAnimationSingle,
|
| 80 | createDefaultAnimation: _createDefaultAnimation,
|
| 81 | };
|
| 82 | |
| \ | No newline at end of file |