Merge pull request #1 from sparhami/code

Initial commit of code

Author: Sepand Parhami

README.md

@@ -14,3 +14,19 @@ Helps with writing tests for animations by pausing then and allowing control of
 the progress of animations on the page. You can pause an animation part way
 through and do a screenshot based test or simply validate the position or
 dimensions of elements.
+
+## Developing
+
+### Build
+
+```shell
+npm run build
+npm run build-watch
+```
+
+### Test
+
+```shell
+npm run test
+npm run test-watch
+```

index.ts

@@ -0,0 +1 @@
+export {prepareImageAnimation} from './src/transform-img/index.js';

src/bezier-curve-utils.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright 2018 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface Curve {
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+}
+
+/**
+ * A string representation of the curve that can be used as an
+ * `animation-timing-function`.
+ * @param curve The curve to conver.
+ * @return A string in the form of 'cubic-bezier(x1, y1, x2, y2)'.
+ */
+export function curveToString(curve: Curve): string {
+  return `cubic-bezier(${curve.x1}, ${curve.y1}, ${curve.x2}, ${curve.y2})`;
+}
+
+/**
+ * Gets the x/y value for the given control points for a given value of t. The
+ * first control point is always zero and the fourth is always one.
+ * @param c1 The second control point.
+ * @param c2 The third control point. 
+ * @param t
+ * @return The value at t.
+ */
+export function getCubicBezierCurveValue(
+    c1: number, c2: number, t: number): number {
+  const t_2 = t * t;
+  const t_3 = t_2 * t;
+  // Formula for 4 point bezier curve with c0 = 0 and c3 = 1.
+  return (3 * (t - 2 * t_2 + t_3) * c1) +
+         (3 * (t_2 - t_3) * c2) + (t_3);
+}
+

src/img-dimensions.ts

@@ -0,0 +1,129 @@
+/**
+ * Copyright 2018 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Provides a function to calculate the dimensions of the
+ * rendered image  inside of an `<img>` Element. For example, if you have an
+ * `<img>` with `object-fit: contain` and an image that is portrait inside of
+ * an `<img>` with landscape dimensions, you will have something looks like:
+ *  _____________
+ * |   |     |   |
+ * | i |  r  | i |
+ * |___|_____|___|
+ * 
+ * Where the area denoted by `r` is the rendered image and the areas denoted
+ * by `i` are extra spacing on either side of the rendered image to center it
+ * within the containing `<img>` Element.
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
+ */
+
+ export interface Size {
+    width: number,
+    height: number,
+ }
+
+ /**
+  * Constrains the size of the image to the given width and height. This either
+  * caps the width or the height depending on the aspect ratio of original img
+  * and if we want to have the smaller or larger dimension fit the container.
+  * @param naturalSize The natural dimensions of the image.
+  * @param containerSize The size of the container we want to render the image
+  *     in.
+  * @param toMin If we should cap the smaller dimension of the image to fit the
+  *     container (`object-fit: cover`) or the larger dimension 
+  *     (`object-fit: contain`).
+  * @return The Size that the image should be rendered as.
+  */
+function constrain(
+    naturalSize: Size, containerSize: Size, toMin: boolean): Size {
+  const elAspectRatio = containerSize.width / containerSize.height;
+  const naturalAspectRatio = naturalSize.width / naturalSize.height;
+
+  if (naturalAspectRatio > elAspectRatio !== toMin) {
+    return {
+      width: containerSize.height * naturalAspectRatio,
+      height: containerSize.height,
+    };
+  }
+
+  return {
+    width: containerSize.width,
+    height: containerSize.width / naturalAspectRatio,
+  };
+}
+
+function getDimensionsForObjectFitCover(
+    naturalSize: Size, containerSize: Size): Size {
+  return constrain(naturalSize, containerSize, false);
+}
+
+function getDimensionsForObjectFitContain(
+    naturalSize: Size, containerSize: Size): Size {
+  return constrain(naturalSize, containerSize, true);
+}
+
+function getDimensionsForObjectFitFill(containerSize: Size): Size {
+  return containerSize;
+}
+
+function getDimensionsForObjectFitNone(naturalSize: Size): Size {
+  return naturalSize;
+}
+
+function getDimensionsForObjectFitScaleDown(
+    naturalSize: Size, containerSize: Size): Size {
+  const noneSize = getDimensionsForObjectFitNone(naturalSize);
+  const containSize = getDimensionsForObjectFitContain(
+      naturalSize, containerSize);
+
+  // Since both have the same aspect ratio, we can simply take the smaller
+  // dimension for both.
+  return {
+    width: Math.min(noneSize.width, containSize.width),
+    height: Math.min(noneSize.height, containSize.height),
+  };
+}
+
+/**
+ * Gets the dimensions for the rendered "image" rather than the container
+ * that constrains the size with the CSS `object-fit` property.
+ * @param img The HTMLImageElement
+ * @param containerSize The size of the container element.
+ * @return The width/height of the "actual" image.
+ */
+export function getRenderedDimensions(
+    img: HTMLImageElement, containerSize: Size): Size {
+  const objectFit = getComputedStyle(img).getPropertyValue('object-fit');
+  const naturalSize = {
+    width: img.naturalWidth,
+    height: img.naturalHeight,
+  };
+
+  switch(objectFit) {
+    case 'cover':
+      return getDimensionsForObjectFitCover(naturalSize, containerSize);
+    case 'contain': 
+      return getDimensionsForObjectFitContain(naturalSize, containerSize);
+    case 'fill':
+      return getDimensionsForObjectFitFill(containerSize);
+    case 'none':
+      return getDimensionsForObjectFitNone(naturalSize);
+    case 'scale-down':
+      return getDimensionsForObjectFitScaleDown(naturalSize, containerSize);
+    default:
+      throw new Error(`object-fit: ${objectFit} not supported`);
+  }
+}

src/intermdediate-img.ts

@@ -0,0 +1,82 @@
+/**
+ * Copyright 2018 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview This file is used to create an image for use in an `<img>` to
+ * `<img>` animation. It is implemented in a way to allow for animating the
+ * cropping of  the rendered image. Once the animation is completed, the
+ * intermediate image can be removed to show the destination `<img>` instead.
+ */
+
+import {Size, getRenderedDimensions} from './img-dimensions.js';
+
+/**
+ * Creates a replacement for a given img, which should render the same as the
+ * source img, but implemented with a cropping container and and img using
+ * `object-fit: fill`. This can be used to implement a transition of the image.
+ * The crop can be transitioned by scaling up the container while scaling down
+ * the image by the inverse amount.
+ * @param srcImg The source img.
+ * @param srcImgRect The rect for `srcImg`. Can be provided if already
+ *    measured.
+ * @param imageDimensions The dimensions for the rendered image. Can be
+ *    provided if already measured.
+ * @return The replacement container along with structural information.
+ */
+export function createItermediateImg(
+  srcImg: HTMLImageElement,
+  srcImgRect: ClientRect = srcImg.getBoundingClientRect(),
+  imageDimensions: Size = getRenderedDimensions(srcImg, srcImgRect),
+): {
+  translateElement: HTMLElement,
+  scaleElement: HTMLElement,
+  counterScaleElement: HTMLElement,
+  img: HTMLImageElement,
+} {
+  const translateElement = document.createElement('div');
+  const scaleElement = document.createElement('div');
+  const counterScaleElement = document.createElement('div');
+  const imgWrapper = document.createElement('div');
+  const img = <HTMLImageElement>srcImg.cloneNode(true);
+  img.className = '';
+  img.style.cssText = '';
+  imgWrapper.appendChild(img);
+  counterScaleElement.appendChild(imgWrapper);
+  scaleElement.appendChild(counterScaleElement);
+  translateElement.appendChild(scaleElement);
+
+  Object.assign(scaleElement.style, {
+    'display': 'flex',
+    'overflow': 'hidden',
+    'alignItems': 'center',
+    'justifyContent': 'center',
+    'width': `${srcImgRect.width}px`,
+    'height': `${srcImgRect.height}px`,
+  });
+
+  Object.assign(img.style, {
+    'display': 'block',
+    'width': `${imageDimensions.width}px`,
+    'height': `${imageDimensions.height}px`,
+  });
+
+  return {
+    translateElement,
+    scaleElement,
+    counterScaleElement,
+    img,
+  };
+}