Stefan Hacker
281 lines
11 KiB
JavaScript
281 lines
11 KiB
JavaScript
define(["require", "exports", "../../Styling", "../../Utilities"], function (require, exports, Styling_1, Utilities_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.rotateOne = exports.scaleOne = exports.translateOne = exports.COACHMARK_HEIGHT = exports.COACHMARK_WIDTH = void 0;
|
|
exports.getStyles = getStyles;
|
|
exports.COACHMARK_WIDTH = 32;
|
|
exports.COACHMARK_HEIGHT = 32;
|
|
exports.translateOne = (0, Utilities_1.memoizeFunction)(function () {
|
|
return (0, Styling_1.keyframes)({
|
|
'0%': {
|
|
transform: 'translate(0, 0)', // orig 25
|
|
animationTimingFunction: 'linear',
|
|
},
|
|
'78.57%': {
|
|
transform: 'translate(0, 0)', // orig 25
|
|
animationTimingFunction: 'cubic-bezier(0.62, 0, 0.56, 1)',
|
|
},
|
|
'82.14%': {
|
|
transform: 'translate(0, -5px)', // orig 20
|
|
animationTimingFunction: 'cubic-bezier(0.58, 0, 0, 1)',
|
|
},
|
|
'84.88%': {
|
|
transform: 'translate(0, 9px)', // 34
|
|
animationTimingFunction: 'cubic-bezier(1, 0, 0.56, 1)',
|
|
},
|
|
'88.1%': {
|
|
transform: 'translate(0, -2px)', // orig 23
|
|
animationTimingFunction: 'cubic-bezier(0.58, 0, 0.67, 1)',
|
|
},
|
|
'90.12%': {
|
|
transform: 'translate(0, 0)',
|
|
animationTimingFunction: 'linear',
|
|
},
|
|
'100%': {
|
|
transform: 'translate(0, 0)',
|
|
},
|
|
});
|
|
});
|
|
exports.scaleOne = (0, Utilities_1.memoizeFunction)(function () {
|
|
return (0, Styling_1.keyframes)({
|
|
'0%': {
|
|
transform: ' scale(0)',
|
|
animationTimingFunction: 'linear',
|
|
},
|
|
'14.29%': {
|
|
transform: 'scale(0)',
|
|
animationTimingFunction: 'cubic-bezier(0.84, 0, 0.52, 0.99)',
|
|
},
|
|
'16.67%': {
|
|
transform: 'scale(1.15)',
|
|
animationTimingFunction: 'cubic-bezier(0.48, -0.01, 0.52, 1.01)',
|
|
},
|
|
'19.05%': {
|
|
transform: 'scale(0.95)',
|
|
animationTimingFunction: 'cubic-bezier(0.48, 0.02, 0.52, 0.98)',
|
|
},
|
|
'21.43%': {
|
|
transform: 'scale(1)',
|
|
animationTimingFunction: 'linear',
|
|
},
|
|
'42.86%': {
|
|
transform: 'scale(1)',
|
|
animationTimingFunction: 'cubic-bezier(0.48, -0.02, 0.52, 1.02)',
|
|
},
|
|
'45.71%': {
|
|
transform: 'scale(0.8)',
|
|
animationTimingFunction: 'cubic-bezier(0.48, 0.01, 0.52, 0.99)',
|
|
},
|
|
'50%': {
|
|
transform: 'scale(1)',
|
|
animationTimingFunction: 'linear',
|
|
},
|
|
'90.12%': {
|
|
transform: 'scale(1)',
|
|
animationTimingFunction: 'cubic-bezier(0.48, -0.02, 0.52, 1.02)',
|
|
},
|
|
'92.98%': {
|
|
transform: 'scale(0.8)',
|
|
animationTimingFunction: 'cubic-bezier(0.48, 0.01, 0.52, 0.99)',
|
|
},
|
|
'97.26%': {
|
|
transform: 'scale(1)',
|
|
animationTimingFunction: 'linear',
|
|
},
|
|
'100%': {
|
|
transform: 'scale(1)',
|
|
},
|
|
});
|
|
});
|
|
exports.rotateOne = (0, Utilities_1.memoizeFunction)(function () {
|
|
return (0, Styling_1.keyframes)({
|
|
'0%': {
|
|
transform: 'rotate(0deg)',
|
|
animationTimingFunction: 'linear',
|
|
},
|
|
'83.33%': {
|
|
transform: ' rotate(0deg)',
|
|
animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',
|
|
},
|
|
'83.93%': {
|
|
transform: 'rotate(15deg)',
|
|
animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',
|
|
},
|
|
'84.52%': {
|
|
transform: 'rotate(-15deg)',
|
|
animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',
|
|
},
|
|
'85.12%': {
|
|
transform: 'rotate(15deg)',
|
|
animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',
|
|
},
|
|
'85.71%': {
|
|
transform: 'rotate(-15deg)',
|
|
animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',
|
|
},
|
|
'86.31%': {
|
|
transform: 'rotate(0deg)',
|
|
animationTimingFunction: 'linear',
|
|
},
|
|
'100%': {
|
|
transform: 'rotate(0deg)',
|
|
},
|
|
});
|
|
});
|
|
function getStyles(props) {
|
|
var _a;
|
|
var theme = props.theme, className = props.className, color = props.color, beaconColorOne = props.beaconColorOne, beaconColorTwo = props.beaconColorTwo, delayBeforeCoachmarkAnimation = props.delayBeforeCoachmarkAnimation, isCollapsed = props.isCollapsed, isMeasuring = props.isMeasuring, entityHostHeight = props.entityHostHeight, entityHostWidth = props.entityHostWidth, transformOrigin = props.transformOrigin;
|
|
if (!theme) {
|
|
throw new Error('theme is undefined or null in base Dropdown getStyles function.');
|
|
}
|
|
var animationInnerDimension = '35px';
|
|
var animationOuterDimension = '150px';
|
|
var animationBorderWidth = '10px';
|
|
var ContinuousPulse = Styling_1.PulsingBeaconAnimationStyles.continuousPulseAnimationDouble(beaconColorOne ? beaconColorOne : theme.palette.themePrimary, beaconColorTwo ? beaconColorTwo : theme.palette.themeTertiary, animationInnerDimension, animationOuterDimension, animationBorderWidth);
|
|
var ContinuousPulseAnimation = Styling_1.PulsingBeaconAnimationStyles.createDefaultAnimation(ContinuousPulse, delayBeforeCoachmarkAnimation);
|
|
return {
|
|
root: [
|
|
theme.fonts.medium,
|
|
{
|
|
position: 'relative',
|
|
},
|
|
className,
|
|
],
|
|
pulsingBeacon: [
|
|
{
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: (0, Utilities_1.getRTL)(theme) ? 'translate(50%, -50%)' : 'translate(-50%, -50%)',
|
|
width: '0px',
|
|
height: '0px',
|
|
borderRadius: '225px',
|
|
borderStyle: 'solid',
|
|
opacity: '0',
|
|
},
|
|
isCollapsed && ContinuousPulseAnimation,
|
|
],
|
|
// Translate Animation Layer
|
|
translateAnimationContainer: [
|
|
{
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
isCollapsed && {
|
|
animationDuration: '14s',
|
|
animationTimingFunction: 'linear',
|
|
animationDirection: 'normal',
|
|
animationIterationCount: '1',
|
|
animationDelay: '0s',
|
|
animationFillMode: 'forwards',
|
|
animationName: (0, exports.translateOne)(),
|
|
transition: 'opacity 0.5s ease-in-out',
|
|
},
|
|
!isCollapsed && {
|
|
opacity: '1',
|
|
},
|
|
],
|
|
// Scale Animation Layer
|
|
scaleAnimationLayer: [
|
|
{
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
isCollapsed && {
|
|
animationDuration: '14s',
|
|
animationTimingFunction: 'linear',
|
|
animationDirection: 'normal',
|
|
animationIterationCount: '1',
|
|
animationDelay: '0s',
|
|
animationFillMode: 'forwards',
|
|
animationName: (0, exports.scaleOne)(),
|
|
},
|
|
],
|
|
// Rotate Animation Layer
|
|
rotateAnimationLayer: [
|
|
{
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
isCollapsed && {
|
|
animationDuration: '14s',
|
|
animationTimingFunction: 'linear',
|
|
animationDirection: 'normal',
|
|
animationIterationCount: '1',
|
|
animationDelay: '0s',
|
|
animationFillMode: 'forwards',
|
|
animationName: (0, exports.rotateOne)(),
|
|
},
|
|
!isCollapsed && {
|
|
opacity: '1',
|
|
},
|
|
],
|
|
// Layer Host, defaults to collapsed
|
|
entityHost: [
|
|
{
|
|
position: 'relative',
|
|
outline: 'none',
|
|
overflow: 'hidden',
|
|
backgroundColor: color,
|
|
borderRadius: exports.COACHMARK_WIDTH,
|
|
transition: 'border-radius 250ms, width 500ms, height 500ms cubic-bezier(0.5, 0, 0, 1)',
|
|
visibility: 'hidden',
|
|
selectors: (_a = {},
|
|
_a[Styling_1.HighContrastSelector] = {
|
|
backgroundColor: 'Window',
|
|
border: '2px solid WindowText',
|
|
},
|
|
_a[".".concat(Utilities_1.IsFocusVisibleClassName, " &:focus")] = {
|
|
outline: "1px solid ".concat(theme.palette.themeTertiary),
|
|
},
|
|
_a),
|
|
},
|
|
!isMeasuring &&
|
|
isCollapsed && {
|
|
width: exports.COACHMARK_WIDTH,
|
|
height: exports.COACHMARK_HEIGHT,
|
|
},
|
|
!isMeasuring && {
|
|
visibility: 'visible',
|
|
},
|
|
!isCollapsed && {
|
|
borderRadius: '1px',
|
|
opacity: '1',
|
|
width: entityHostWidth,
|
|
height: entityHostHeight,
|
|
},
|
|
isCollapsed && {
|
|
cursor: 'pointer',
|
|
},
|
|
],
|
|
entityInnerHost: [
|
|
{
|
|
transition: 'transform 500ms cubic-bezier(0.5, 0, 0, 1)',
|
|
transformOrigin: transformOrigin,
|
|
transform: 'scale(0)',
|
|
},
|
|
!isCollapsed && {
|
|
width: entityHostWidth,
|
|
height: entityHostHeight,
|
|
transform: 'scale(1)',
|
|
},
|
|
!isMeasuring && {
|
|
visibility: 'visible',
|
|
},
|
|
],
|
|
childrenContainer: [
|
|
{
|
|
display: !isMeasuring && isCollapsed ? 'none' : 'block',
|
|
},
|
|
],
|
|
ariaContainer: {
|
|
position: 'fixed',
|
|
opacity: 0,
|
|
height: 0,
|
|
width: 0,
|
|
pointerEvents: 'none',
|
|
},
|
|
};
|
|
}
|
|
});
|
|
//# sourceMappingURL=Coachmark.styles.js.map
|