diff --git a/src/components/Output/custom-els/TwoUp/index.ts b/src/components/Output/custom-els/TwoUp/index.ts index c5dc080a1..7ba144f8a 100644 --- a/src/components/Output/custom-els/TwoUp/index.ts +++ b/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`); } } diff --git a/src/components/Output/custom-els/TwoUp/missing-types.d.ts b/src/components/Output/custom-els/TwoUp/missing-types.d.ts index ebc916bd5..fde547bd7 100644 --- a/src/components/Output/custom-els/TwoUp/missing-types.d.ts +++ b/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; } } diff --git a/src/components/Output/custom-els/TwoUp/styles.css b/src/components/Output/custom-els/TwoUp/styles.css index 3463ec1bd..19e547b33 100644 --- a/src/components/Output/custom-els/TwoUp/styles.css +++ b/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); + } } diff --git a/src/components/Output/index.tsx b/src/components/Output/index.tsx index 88884ec30..99cdaff39 100644 --- a/src/components/Output/index.tsx +++ b/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 { - 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(); + 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 { } } - 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 { this.pinchZoomLeft.dispatchEvent(clonedEvent); } - render({ leftImg, rightImg }: Props, { }: State) { + render({ leftImg, rightImg }: Props, { verticalTwoUp }: State) { return (