feat(animation): Convert JS to TypeScript (#4271)

Refs #4225

Author: acdvorak

packages/mdc-animation/README.md

@@ -95,12 +95,54 @@ Function | Description
 These functions handle prefixing across various browsers
 
 ```js
-import {getCorrectEventName} from '@material/animation';
+import {getCorrectEventName, StandardJsEventType} from '@material/animation';
 
-const eventToListenFor = getCorrectEventName(window, 'animationstart');
+const eventToListenFor = getCorrectEventName(window, StandardJsEventType.ANIMATION_START);
 ```
 
 Method Signature | Description
 --- | ---
-`getCorrectEventName(windowObj, eventType)` | Returns a JavaScript event name, prefixed if necessary
-`getCorrectPropertyName(windowObj, eventType)` | Returns a CSS property name, prefixed if necessary
+`getCorrectEventName(windowObj: Window, eventType: StandardJsEventType) => StandardJsEventType \| PrefixedJsEventType` | Returns a JavaScript event name, prefixed if necessary
+`getCorrectPropertyName(windowObj: Window, cssProperty: StandardCssPropertyName) => StandardCssPropertyName \| PrefixedCssPropertyName` | Returns a CSS property name, prefixed if necessary
+
+#### `StandardCssPropertyName`
+
+Enum passed to and returned by `getCorrectPropertyName()`.
+
+Key | Value
+--- | ---
+`ANIMATION` | `animation`
+`TRANSFORM` | `transform`
+`TRANSITION` | `transition`
+
+#### `PrefixedCssPropertyName`
+
+Enum returned by `getCorrectPropertyName()`.
+
+Key | Value
+--- | ---
+`WEBKIT_ANIMATION` | `-webkit-animation`
+`WEBKIT_TRANSFORM` | `-webkit-transform`
+`WEBKIT_TRANSITION` | `-webkit-transition`
+
+#### `StandardJsEventType`
+
+Enum passed to and returned by `getCorrectEventName()`.
+
+Key | Value
+--- | ---
+`ANIMATION_END` | `animationend`
+`ANIMATION_ITERATION` | `animationiteration`
+`ANIMATION_START` | `animationstart`
+`TRANSITION_END` | `transitionend`
+
+#### `PrefixedJsEventType`
+
+Enum returned by `getCorrectEventName()`.
+
+Key | Value
+--- | ---
+`WEBKIT_ANIMATION_END` | `webkitAnimationEnd`
+`WEBKIT_ANIMATION_ITERATION` | `webkitAnimationIteration`
+`WEBKIT_ANIMATION_START` | `webkitAnimationStart`
+`WEBKIT_TRANSITION_END` | `webkitTransitionEnd`

packages/mdc-animation/index.js

@@ -0,0 +1,154 @@
+/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+enum StandardCssPropertyName {
+  ANIMATION = 'animation',
+  TRANSFORM = 'transform',
+  TRANSITION = 'transition',
+}
+
+enum PrefixedCssPropertyName {
+  WEBKIT_ANIMATION = '-webkit-animation',
+  WEBKIT_TRANSFORM = '-webkit-transform',
+  WEBKIT_TRANSITION = '-webkit-transition',
+}
+
+enum StandardJsEventType {
+  ANIMATION_END = 'animationend',
+  ANIMATION_ITERATION = 'animationiteration',
+  ANIMATION_START = 'animationstart',
+  TRANSITION_END = 'transitionend',
+}
+
+enum PrefixedJsEventType {
+  WEBKIT_ANIMATION_END = 'webkitAnimationEnd',
+  WEBKIT_ANIMATION_ITERATION = 'webkitAnimationIteration',
+  WEBKIT_ANIMATION_START = 'webkitAnimationStart',
+  WEBKIT_TRANSITION_END = 'webkitTransitionEnd',
+}
+
+interface CssVendorPropertyMap {
+  [key: string]: CssVendorProperty;
+}
+
+interface JsVendorPropertyMap {
+  [key: string]: JsVendorProperty;
+}
+
+interface CssVendorProperty {
+  prefixed: PrefixedCssPropertyName;
+  standard: StandardCssPropertyName;
+}
+
+interface JsVendorProperty {
+  cssProperty: StandardCssPropertyName;
+  prefixed: PrefixedJsEventType;
+  standard: StandardJsEventType;
+}
+
+const transformStyleProperties = ['transform', 'WebkitTransform', 'MozTransform', 'OTransform', 'MSTransform'];
+
+// Destructure enum members to make their usages more readable.
+const {WEBKIT_ANIMATION, WEBKIT_TRANSFORM, WEBKIT_TRANSITION} = PrefixedCssPropertyName;
+const {ANIMATION, TRANSFORM, TRANSITION} = StandardCssPropertyName;
+const {
+  WEBKIT_ANIMATION_END,
+  WEBKIT_ANIMATION_ITERATION,
+  WEBKIT_ANIMATION_START,
+  WEBKIT_TRANSITION_END,
+} = PrefixedJsEventType;
+const {ANIMATION_END, ANIMATION_ITERATION, ANIMATION_START, TRANSITION_END} = StandardJsEventType;
+
+const cssPropertyNameMap: CssVendorPropertyMap = {
+  [ANIMATION]: {
+    prefixed: WEBKIT_ANIMATION,
+    standard: ANIMATION,
+  },
+  [TRANSFORM]: {
+    prefixed: WEBKIT_TRANSFORM,
+    standard: TRANSFORM,
+  },
+  [TRANSITION]: {
+    prefixed: WEBKIT_TRANSITION,
+    standard: TRANSITION,
+  },
+};
+
+const jsEventTypeMap: JsVendorPropertyMap = {
+  [ANIMATION_END]: {
+    cssProperty: ANIMATION,
+    prefixed: WEBKIT_ANIMATION_END,
+    standard: ANIMATION_END,
+  },
+  [ANIMATION_ITERATION]: {
+    cssProperty: ANIMATION,
+    prefixed: WEBKIT_ANIMATION_ITERATION,
+    standard: ANIMATION_ITERATION,
+  },
+  [ANIMATION_START]: {
+    cssProperty: ANIMATION,
+    prefixed: WEBKIT_ANIMATION_START,
+    standard: ANIMATION_START,
+  },
+  [TRANSITION_END]: {
+    cssProperty: TRANSITION,
+    prefixed: WEBKIT_TRANSITION_END,
+    standard: TRANSITION_END,
+  },
+};
+
+function isWindow(windowObj: Window): boolean {
+  return Boolean(windowObj.document) && typeof windowObj.document.createElement === 'function';
+}
+
+function getCorrectPropertyName(windowObj: Window, cssProperty: StandardCssPropertyName):
+    StandardCssPropertyName | PrefixedCssPropertyName {
+  if (isWindow(windowObj) && cssProperty in cssPropertyNameMap) {
+    const el = windowObj.document.createElement('div');
+    const {standard, prefixed} = cssPropertyNameMap[cssProperty];
+    const isStandard = standard in el.style;
+    return isStandard ? standard : prefixed;
+  }
+  return cssProperty;
+}
+
+function getCorrectEventName(windowObj: Window, eventType: StandardJsEventType):
+    StandardJsEventType | PrefixedJsEventType {
+  if (isWindow(windowObj) && eventType in jsEventTypeMap) {
+    const el = windowObj.document.createElement('div');
+    const {standard, prefixed, cssProperty} = jsEventTypeMap[eventType];
+    const isStandard = cssProperty in el.style;
+    return isStandard ? standard : prefixed;
+  }
+  return eventType;
+}
+
+export {
+  PrefixedCssPropertyName,
+  StandardCssPropertyName,
+  PrefixedJsEventType,
+  StandardJsEventType,
+  getCorrectEventName,
+  getCorrectPropertyName,
+  transformStyleProperties,
+};

packages/mdc-animation/index.ts

@@ -21,7 +21,7 @@
  * THE SOFTWARE.
  */
 
-import {getCorrectEventName} from '@material/animation/index';
+import {StandardJsEventType, getCorrectEventName} from '@material/animation/index.ts';
 import MDCComponent from '@material/base/component';
 /* eslint-disable no-unused-vars */
 import {MDCSelectionControlState, MDCSelectionControl} from '@material/selection-control/index';
@@ -33,6 +33,8 @@ import {getMatchesProperty} from '@material/ripple/util';
 /** @const {!Array<string>} */
 const CB_PROTO_PROPS = ['checked', 'indeterminate'];
 
+const {ANIMATION_END} = StandardJsEventType;
+
 /**
  * @extends MDCComponent<!MDCCheckboxFoundation>
  * @implements {MDCSelectionControl}
@@ -69,7 +71,7 @@ class MDCCheckbox extends MDCComponent {
     this.handleChange_ = () => this.foundation_.handleChange();
     this.handleAnimationEnd_= () => this.foundation_.handleAnimationEnd();
     this.nativeCb_.addEventListener('change', this.handleChange_);
-    this.listen(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
+    this.listen(getCorrectEventName(window, ANIMATION_END), this.handleAnimationEnd_);
     this.installPropertyChangeHooks_();
   }
 
@@ -191,7 +193,7 @@ class MDCCheckbox extends MDCComponent {
   destroy() {
     this.ripple_.destroy();
     this.nativeCb_.removeEventListener('change', this.handleChange_);
-    this.unlisten(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
+    this.unlisten(getCorrectEventName(window, ANIMATION_END), this.handleAnimationEnd_);
     this.uninstallPropertyChangeHooks_();
     super.destroy();
   }