@microsoft/windows-admin-center-sdk
Version:
Microsoft - Windows Admin Center Shell
263 lines (261 loc) • 13.4 kB
JavaScript
import { Observable } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
/**
* The duration in milliseconds (ms) of an animation.
*/
export var Duration;
(function (Duration) {
Duration[Duration["Xs"] = 100] = "Xs";
Duration[Duration["Sm"] = 167] = "Sm";
Duration[Duration["Md"] = 267] = "Md";
Duration[Duration["Lg"] = 367] = "Lg";
Duration[Duration["Xl"] = 467] = "Xl";
})(Duration || (Duration = {}));
/**
* The available animation CSS classes and associated durations in milliseconds (MS).
*/
export const animations = {
slide: {
in: {
right: {
xs: { animationClass: 'sme-animation-slide-in-right-xs', duration: Duration.Xs },
sm: { animationClass: 'sme-animation-slide-in-right-sm', duration: Duration.Sm },
md: { animationClass: 'sme-animation-slide-in-right-md', duration: Duration.Md },
xl: { animationClass: 'sme-animation-slide-in-right-xl', duration: Duration.Xl }
},
left: {
xs: { animationClass: 'sme-animation-slide-in-left-xs', duration: Duration.Xs },
sm: { animationClass: 'sme-animation-slide-in-left-sm', duration: Duration.Sm },
md: { animationClass: 'sme-animation-slide-in-left-md', duration: Duration.Md },
xl: { animationClass: 'sme-animation-slide-in-left-xl', duration: Duration.Xl }
},
up: {
xs: { animationClass: 'sme-animation-slide-in-up-xs', duration: Duration.Xs },
sm: { animationClass: 'sme-animation-slide-in-up-sm', duration: Duration.Sm },
md: { animationClass: 'sme-animation-slide-in-up-md', duration: Duration.Md },
xl: { animationClass: 'sme-animation-slide-in-up-xl', duration: Duration.Xl }
},
down: {
xs: { animationClass: 'sme-animation-slide-in-down-xs', duration: Duration.Xs },
sm: { animationClass: 'sme-animation-slide-in-down-sm', duration: Duration.Sm },
md: { animationClass: 'sme-animation-slide-in-down-md', duration: Duration.Md },
xl: { animationClass: 'sme-animation-slide-in-down-xl', duration: Duration.Xl }
}
},
out: {
right: {
xs: { animationClass: 'sme-animation-slide-out-right-xs', duration: Duration.Xs },
sm: { animationClass: 'sme-animation-slide-out-right-sm', duration: Duration.Sm },
md: { animationClass: 'sme-animation-slide-out-right-md', duration: Duration.Md },
xl: { animationClass: 'sme-animation-slide-out-right-xl', duration: Duration.Xl }
},
left: {
xs: { animationClass: 'sme-animation-slide-out-left-xs', duration: Duration.Xs },
sm: { animationClass: 'sme-animation-slide-out-left-sm', duration: Duration.Sm },
md: { animationClass: 'sme-animation-slide-out-left-md', duration: Duration.Md },
xl: { animationClass: 'sme-animation-slide-out-left-xl', duration: Duration.Xl }
},
up: {
xs: { animationClass: 'sme-animation-slide-out-up-xs', duration: Duration.Xs },
sm: { animationClass: 'sme-animation-slide-out-up-sm', duration: Duration.Sm },
md: { animationClass: 'sme-animation-slide-out-up-md', duration: Duration.Md },
xl: { animationClass: 'sme-animation-slide-out-up-xl', duration: Duration.Xl }
},
down: {
xs: { animationClass: 'sme-animation-slide-out-down-xs', duration: Duration.Xs },
sm: { animationClass: 'sme-animation-slide-out-down-sm', duration: Duration.Sm },
md: { animationClass: 'sme-animation-slide-out-down-md', duration: Duration.Md },
xl: { animationClass: 'sme-animation-slide-out-down-xl', duration: Duration.Xl }
}
}
},
fade: {
in: {
xs: { animationClass: 'sme-animation-fade-in-xs', duration: Duration.Xs },
sm: { animationClass: 'sme-animation-fade-in-sm', duration: Duration.Sm },
md: { animationClass: 'sme-animation-fade-in-md', duration: Duration.Md },
lg: { animationClass: 'sme-animation-fade-in-lg', duration: Duration.Lg },
xl: { animationClass: 'sme-animation-fade-in-xl', duration: Duration.Xl }
},
out: {
xs: { animationClass: 'sme-animation-fade-out-xs', duration: Duration.Xs },
sm: { animationClass: 'sme-animation-fade-out-sm', duration: Duration.Sm },
md: { animationClass: 'sme-animation-fade-out-md', duration: Duration.Md },
lg: { animationClass: 'sme-animation-fade-out-lg', duration: Duration.Lg },
xl: { animationClass: 'sme-animation-fade-out-xl', duration: Duration.Xl }
}
},
scale: {
in: {
up: {
sm: { animationClass: 'sme-animation-scale-in-up-sm', duration: Duration.Sm },
neutral: { animationClass: 'sme-animation-scale-in-up-neutral', duration: Duration.Sm },
lg: { animationClass: 'sme-animation-scale-in-up-lg', duration: Duration.Sm }
},
down: {
sm: { animationClass: 'sme-animation-scale-in-down-sm' },
neutral: { animationClass: 'sme-animation-scale-in-down-neutral' },
lg: { animationClass: 'sme-animation-scale-in-down-lg' }
}
},
out: {
up: {
sm: { animationClass: 'sme-animation-scale-out-up-sm' },
neutral: { animationClass: 'sme-animation-scale-out-up-neutral' },
lg: { animationClass: 'sme-animation-scale-out-up-lg' }
},
down: {
sm: { animationClass: 'sme-animation-scale-out-down-sm' },
neutral: { animationClass: 'sme-animation-scale-out-down-neutral' },
lg: { animationClass: 'sme-animation-scale-out-down-lg' }
}
}
},
transition: {
height: {
xs: { animationClass: 'sme-animation-transition-height-xs', duration: Duration.Xs },
sm: { animationClass: 'sme-animation-transition-height-sm', duration: Duration.Sm },
md: { animationClass: 'sme-animation-transition-height-md', duration: Duration.Md },
lg: { animationClass: 'sme-animation-transition-height-lg', duration: Duration.Lg },
xl: { animationClass: 'sme-animation-transition-height-xl', duration: Duration.Xl }
},
width: {
xs: { animationClass: 'sme-animation-transition-width-xs', duration: Duration.Xs },
sm: { animationClass: 'sme-animation-transition-width-sm', duration: Duration.Sm },
md: { animationClass: 'sme-animation-transition-width-md', duration: Duration.Md },
lg: { animationClass: 'sme-animation-transition-width-lg', duration: Duration.Lg },
xl: { animationClass: 'sme-animation-transition-width-xl', duration: Duration.Xl }
}
},
rotate: {
left: {
md: { animationClass: 'sme-animation-rotate-left-md', duration: Duration.Md }
},
right: {
md: { animationClass: 'sme-animation-rotate-right-md', duration: Duration.Md }
}
}
};
/**
* A utility class for animating HTML elements.
*/
export class Animator {
/**
* Animates a HTML element.
*
* @param element The HTML element to animate.
* @param options The options to animate the element with.
* @returns A void observable for the animation event.
*/
static animate(element, ...options) {
if (MsftSme.isNullOrUndefined(options) || options.length === 0) {
throw new Error(`animate(...) called without an 'options' parameter.`);
}
const currentOptions = options.splice(0)[0];
const classes = Array.isArray(currentOptions.animationClass) ? currentOptions.animationClass : [currentOptions.animationClass];
element.classList.add(...classes);
const currentObservable = new Observable((observer) => {
const timeout = setTimeout(() => {
if (currentOptions.removeClass) {
element.classList.remove(...classes);
}
observer.next(null);
observer.complete();
}, currentOptions.duration);
return () => clearTimeout(timeout);
});
if (options.length > 0) {
return currentObservable.pipe(mergeMap(() => this.animate(element, ...options)));
}
return currentObservable;
}
/**
* Animates a HTML element to slide in to the left.
*
* @param element The HTML element to animate.
* @param duration The duration of the animation.
* @param removeClass Whether to remove the animation CSS class from the element once the animation completes.
* @returns A void observable for the animation event.
*/
static slideInToLeft(element, duration, removeClass = false) {
switch (duration) {
case Duration.Xs:
return this.animate(element, { ...animations.slide.in.left.xs, removeClass: removeClass });
case Duration.Sm:
return this.animate(element, { ...animations.slide.in.left.sm, removeClass: removeClass });
case Duration.Md:
return this.animate(element, { ...animations.slide.in.left.md, removeClass: removeClass });
case Duration.Xl:
return this.animate(element, { ...animations.slide.in.left.xl, removeClass: removeClass });
default:
return this.animate(element, { ...animations.slide.in.left.md, removeClass: removeClass });
}
}
/**
* Animates a HTML element to slide in to the right.
*
* @param element The HTML element to animate.
* @param duration The duration of the animation.
* @param removeClass Whether to remove the animation CSS class from the element once the animation completes.
* @returns A void observable for the animation event.
*/
static slideInToRight(element, duration, removeClass = false) {
switch (duration) {
case Duration.Xs:
return this.animate(element, { ...animations.slide.in.right.xs, removeClass: removeClass });
case Duration.Sm:
return this.animate(element, { ...animations.slide.in.right.sm, removeClass: removeClass });
case Duration.Md:
return this.animate(element, { ...animations.slide.in.right.md, removeClass: removeClass });
case Duration.Xl:
return this.animate(element, { ...animations.slide.in.right.xl, removeClass: removeClass });
default:
return this.animate(element, { ...animations.slide.in.right.md, removeClass: removeClass });
}
}
/**
* Animates a HTML element to slide out to the left.
*
* @param element The HTML element to animate.
* @param duration The duration of the animation.
* @param removeClass Whether to remove the animation CSS class from the element once the animation completes.
* @returns A void observable for the animation event.
*/
static slideOutToLeft(element, duration, removeClass = false) {
switch (duration) {
case Duration.Xs:
return this.animate(element, { ...animations.slide.out.left.xs, removeClass: removeClass });
case Duration.Sm:
return this.animate(element, { ...animations.slide.out.left.sm, removeClass: removeClass });
case Duration.Md:
return this.animate(element, { ...animations.slide.out.left.md, removeClass: removeClass });
case Duration.Xl:
return this.animate(element, { ...animations.slide.out.left.xl, removeClass: removeClass });
default:
return this.animate(element, { ...animations.slide.out.left.md, removeClass: removeClass });
}
}
/**
* Animates a HTML element to slide out to the right.
*
* @param element The HTML element to animate.
* @param duration The duration of the animation.
* @param removeClass Whether to remove the animation CSS class from the element once the animation completes.
* @returns A void observable for the animation event.
*/
static slideOutToRight(element, duration, removeClass = false) {
switch (duration) {
case Duration.Xs:
return this.animate(element, { ...animations.slide.out.right.xs, removeClass: removeClass });
case Duration.Sm:
return this.animate(element, { ...animations.slide.out.right.sm, removeClass: removeClass });
case Duration.Md:
return this.animate(element, { ...animations.slide.out.right.md, removeClass: removeClass });
case Duration.Xl:
return this.animate(element, { ...animations.slide.out.right.xl, removeClass: removeClass });
default:
return this.animate(element, { ...animations.slide.out.right.md, removeClass: removeClass });
}
}
}
//# sourceMappingURL=animation.js.map