Vertical two-up (GoogleChromeLabs#100)

* Fixing bad property name.

* Allowing two-up to work vertically at smaller widths.

* Switching to orientation attr

* Fixing type and getter/setter behaviour

src/components/Output/custom-els/TwoUp/index.ts

@@ -1,14 +1,17 @@
 import * as styles from './styles.css';
 import { PointerTracker, Pointer } from '../../../../lib/PointerTracker';
 
-const legacyClipCompat = 'legacy-clip-compat';
+const legacyClipCompatAttr = 'legacy-clip-compat';
+const orientationAttr = 'orientation';
+
+type TwoUpOrientation = 'horizontal' | 'vertical';
 
 /**
  * A split view that the user can adjust. The first child becomes
  * the left-hand side, and the second child becomes the right-hand side.
  */
 export default class TwoUp extends HTMLElement {
-  static get observedAttributes () { return [legacyClipCompat]; }
+  static get observedAttributes() { return [orientationAttr]; }
 
   private readonly _handle = document.createElement('div');
   /**
@@ -52,39 +55,65 @@ export default class TwoUp extends HTMLElement {
     });
   }
 
-  connectedCallback () {
+  connectedCallback() {
     this._childrenChange();
     if (!this._everConnected) {
-      // Set the initial position of the handle.
-      requestAnimationFrame(() => {
-        const bounds = this.getBoundingClientRect();
-        this._position = bounds.width / 2;
-        this._setPosition();
-      });
+      this._resetPosition();
       this._everConnected = true;
     }
   }
 
+  attributeChangedCallback(name: string) {
+    if (name === orientationAttr) {
+      this._resetPosition();
+    }
+  }
+
+  private _resetPosition() {
+    // Set the initial position of the handle.
+    requestAnimationFrame(() => {
+      const bounds = this.getBoundingClientRect();
+      this._position = (this.orientation === 'vertical' ? bounds.height : bounds.width) / 2;
+      this._setPosition();
+    });
+  }
+
   /**
    * If true, this element works in browsers that don't support clip-path (Edge).
    * However, this means you'll have to set the height of this element manually.
    */
-  get noClipPathCompat () {
-    return this.hasAttribute(legacyClipCompat);
+  get legacyClipCompat() {
+    return this.hasAttribute(legacyClipCompatAttr);
   }
 
-  set noClipPathCompat (val: boolean) {
+  set legacyClipCompat(val: boolean) {
     if (val) {
-      this.setAttribute(legacyClipCompat, '');
+      this.setAttribute(legacyClipCompatAttr, '');
     } else {
-      this.removeAttribute(legacyClipCompat);
+      this.removeAttribute(legacyClipCompatAttr);
     }
   }
 
+  /**
+   * Split vertically rather than horizontally.
+   */
+  get orientation(): TwoUpOrientation {
+    const value = this.getAttribute(orientationAttr);
+
+    // This mirrors the behaviour of input.type, where setting just sets the attribute, but getting
+    // returns the value only if it's valid.
+    if (value && value.toLowerCase() === 'vertical') return 'vertical';
+    return 'horizontal';
+  }
+
+  set orientation(val: TwoUpOrientation) {
+    this.setAttribute(orientationAttr, val);
+  }
+
   /**
    * Called when element's child list changes
    */
-  private _childrenChange () {
+  private _childrenChange() {
     // Ensure the handle is the last child.
     // The CSS depends on this.
     if (this.lastElementChild !== this._handle) {
@@ -95,15 +124,20 @@ export default class TwoUp extends HTMLElement {
   /**
    * Called when a pointer moves.
    */
-  private _pointerChange (startPoint: Pointer, currentPoint: Pointer) {
+  private _pointerChange(startPoint: Pointer, currentPoint: Pointer) {
+    const pointAxis = this.orientation === 'vertical' ? 'clientY' : 'clientX';
+    const dimensionAxis = this.orientation === 'vertical' ? 'height' : 'width';
     const bounds = this.getBoundingClientRect();
-    this._position = this._positionOnPointerStart + (currentPoint.clientX - startPoint.clientX);
+
+    this._position = this._positionOnPointerStart +
+      (currentPoint[pointAxis] - startPoint[pointAxis]);
+
     // Clamp position to element bounds.
-    this._position = Math.max(0, Math.min(this._position, bounds.width));
+    this._position = Math.max(0, Math.min(this._position, bounds[dimensionAxis]));
     this._setPosition();
   }
 
-  private _setPosition () {
+  private _setPosition() {
     this.style.setProperty('--split-point', `${this._position}px`);
   }
 }

src/components/Output/custom-els/TwoUp/missing-types.d.ts

@@ -9,8 +9,13 @@ interface Window {
   Touch: typeof Touch;
 }
 
+interface TwoUpAttributes extends JSX.HTMLAttributes {
+  'orientation'?: string;
+  'legacy-clip-compat'?: boolean;
+}
+
 declare namespace JSX {
   interface IntrinsicElements {
-    'two-up': HTMLAttributes;
+    'two-up': TwoUpAttributes;
   }
 }

src/components/Output/custom-els/TwoUp/styles.css

@@ -36,6 +36,17 @@ two-up[legacy-clip-compat] > :not(.twoUpHandle) {
   border-radius: 20px;
 }
 
+two-up[orientation='vertical'] .twoUpHandle {
+  width: auto;
+  height: 10px;
+  transform: translateY(var(--split-point)) translateY(-50%);
+}
+
+two-up[orientation='vertical'] .twoUpHandle::after {
+  width: 40px;
+  height: 80px;
+}
+
 two-up > :nth-child(1):not(.twoUpHandle) {
   -webkit-clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
   clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
@@ -46,6 +57,16 @@ two-up > :nth-child(2):not(.twoUpHandle) {
   clip-path: inset(0 0 0 var(--split-point));
 }
 
+two-up[orientation='vertical'] > :nth-child(1):not(.twoUpHandle) {
+  -webkit-clip-path: inset(0 0 calc(100% - var(--split-point)) 0);
+  clip-path: inset(0 0 calc(100% - var(--split-point)) 0);
+}
+
+two-up[orientation='vertical'] > :nth-child(2):not(.twoUpHandle) {
+  -webkit-clip-path: inset(var(--split-point) 0 0 0);
+  clip-path: inset(var(--split-point) 0 0 0);
+}
+
 /*
   Even in legacy-clip-compat, prefer clip-path if it's supported.
   It performs way better in Safari.
@@ -58,4 +79,12 @@ two-up > :nth-child(2):not(.twoUpHandle) {
   two-up[legacy-clip-compat] > :nth-child(2):not(.twoUpHandle) {
     clip: rect(auto auto auto var(--split-point));
   }
+
+  two-up[orientation='vertical'][legacy-clip-compat] > :nth-child(1):not(.twoUpHandle) {
+    clip: rect(auto auto var(--split-point) auto);
+  }
+
+  two-up[orientation='vertical'][legacy-clip-compat] > :nth-child(2):not(.twoUpHandle) {
+    clip: rect(var(--split-point) auto auto auto);
+  }
 }

src/components/Output/index.tsx

@@ -6,21 +6,31 @@ import * as style from './style.scss';
 import { bind, drawBitmapToCanvas, linkRef } from '../../lib/util';
 import { twoUpHandle } from './custom-els/TwoUp/styles.css';
 
-type Props = {
-  leftImg: ImageBitmap,
-  rightImg: ImageBitmap,
-};
+interface Props {
+  leftImg: ImageBitmap;
+  rightImg: ImageBitmap;
+}
 
-type State = {};
+interface State {
+  verticalTwoUp: boolean;
+}
 
 export default class Output extends Component<Props, State> {
-  state: State = {};
+  widthQuery = window.matchMedia('(min-width: 500px)');
+  state: State = {
+    verticalTwoUp: !this.widthQuery.matches,
+  };
   canvasLeft?: HTMLCanvasElement;
   canvasRight?: HTMLCanvasElement;
   pinchZoomLeft?: PinchZoom;
   pinchZoomRight?: PinchZoom;
   retargetedEvents = new WeakSet<Event>();
 
+  constructor() {
+    super();
+    this.widthQuery.addListener(this.onMobileWidthChange);
+  }
+
   componentDidMount() {
     if (this.canvasLeft) {
       drawBitmapToCanvas(this.canvasLeft, this.props.leftImg);
@@ -39,8 +49,15 @@ export default class Output extends Component<Props, State> {
     }
   }
 
-  shouldComponentUpdate(nextProps: Props) {
-    return this.props.leftImg !== nextProps.leftImg || this.props.rightImg !== nextProps.rightImg;
+  shouldComponentUpdate(nextProps: Props, nextState: State) {
+    return this.props.leftImg !== nextProps.leftImg ||
+      this.props.rightImg !== nextProps.rightImg ||
+      this.state.verticalTwoUp !== nextState.verticalTwoUp;
+  }
+
+  @bind
+  onMobileWidthChange() {
+    this.setState({ verticalTwoUp: !this.widthQuery.matches });
   }
 
   @bind
@@ -80,10 +97,11 @@ export default class Output extends Component<Props, State> {
     this.pinchZoomLeft.dispatchEvent(clonedEvent);
   }
 
-  render({ leftImg, rightImg }: Props, { }: State) {
+  render({ leftImg, rightImg }: Props, { verticalTwoUp }: State) {
     return (
       <div class={style.output}>
         <two-up
+          orientation={verticalTwoUp ? 'vertical' : 'horizontal'}
           // Event redirecting. See onRetargetableEvent.
           onTouchStartCapture={this.onRetargetableEvent}
           onTouchEndCapture={this.onRetargetableEvent}