From 2a47f672148fc80378ae5016365829e8ffc58af8 Mon Sep 17 00:00:00 2001 From: Ewa Gasperowicz Date: Mon, 17 Sep 2018 11:08:54 +0200 Subject: [PATCH 1/5] Reposition the TwoUp handle on resize --- .../Output/custom-els/TwoUp/index.ts | 6 +++- .../custom-els/TwoUp/missing-types.d.ts | 33 +++++++++++++++++++ 2 files changed, 38 insertions(+), 1 deletion(-) diff --git a/src/components/Output/custom-els/TwoUp/index.ts b/src/components/Output/custom-els/TwoUp/index.ts index 53966c0a..034a6429 100644 --- a/src/components/Output/custom-els/TwoUp/index.ts +++ b/src/components/Output/custom-els/TwoUp/index.ts @@ -37,6 +37,10 @@ export default class TwoUp extends HTMLElement { new MutationObserver(() => this._childrenChange()) .observe(this, { childList: true }); + // Watch for element size changes. + new ResizeObserver(() => this._resetPosition()) + .observe(this); + // Watch for pointers on the handle. const pointerTracker: PointerTracker = new PointerTracker(this._handle, { start: (_, event) => { @@ -57,7 +61,7 @@ export default class TwoUp extends HTMLElement { connectedCallback() { this._handle.innerHTML = `
${ - `` + '' }
`; this._childrenChange(); 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 fde547bd..d2f9c994 100644 --- a/src/components/Output/custom-els/TwoUp/missing-types.d.ts +++ b/src/components/Output/custom-els/TwoUp/missing-types.d.ts @@ -19,3 +19,36 @@ declare namespace JSX { 'two-up': TwoUpAttributes; } } + +interface DOMRectReadOnly { + readonly x: number; + readonly y: number; + readonly width: number; + readonly height: number; + readonly top: number; + readonly right: number; + readonly bottom: number; + readonly left: number; +} + +declare global { + interface ResizeObserverCallback { + (entries: ResizeObserverEntry[], observer: ResizeObserver): void; + } + + interface ResizeObserverEntry { + readonly target: Element; + readonly contentRect: DOMRectReadOnly; + } + + interface ResizeObserver { + observe(target: Element): void; + unobserve(target: Element): void; + disconnect(): void; + } +} + +declare var ResizeObserver: { + prototype: ResizeObserver; + new(callback: ResizeObserverCallback): ResizeObserver; +}; From bcd88f6356e4ad077d49fa3ef7fa9765847f8f1b Mon Sep 17 00:00:00 2001 From: Ewa Gasperowicz Date: Mon, 17 Sep 2018 11:30:06 +0200 Subject: [PATCH 2/5] Add fallback to window.onresize --- src/components/Output/custom-els/TwoUp/index.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/Output/custom-els/TwoUp/index.ts b/src/components/Output/custom-els/TwoUp/index.ts index 034a6429..de03e7c8 100644 --- a/src/components/Output/custom-els/TwoUp/index.ts +++ b/src/components/Output/custom-els/TwoUp/index.ts @@ -38,8 +38,12 @@ export default class TwoUp extends HTMLElement { .observe(this, { childList: true }); // Watch for element size changes. - new ResizeObserver(() => this._resetPosition()) - .observe(this); + if (window.hasOwnProperty('ResizeObserver')) { + new ResizeObserver(() => this._resetPosition()) + .observe(this); + } else { + window.addEventListener('resize', () => this._resetPosition()); + } // Watch for pointers on the handle. const pointerTracker: PointerTracker = new PointerTracker(this._handle, { From 1b69c9231dcd7b5196bc66b15639debca228029a Mon Sep 17 00:00:00 2001 From: Ewa Gasperowicz Date: Mon, 17 Sep 2018 13:21:31 +0200 Subject: [PATCH 3/5] Keep relative screen division while resizing --- src/components/Output/custom-els/TwoUp/index.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/Output/custom-els/TwoUp/index.ts b/src/components/Output/custom-els/TwoUp/index.ts index de03e7c8..f07d5e6c 100644 --- a/src/components/Output/custom-els/TwoUp/index.ts +++ b/src/components/Output/custom-els/TwoUp/index.ts @@ -18,6 +18,10 @@ export default class TwoUp extends HTMLElement { * The position of the split in pixels. */ private _position = 0; + /** + * The position of the split in %. + */ + private _relativePosition = 0.5; /** * The value of _position when the pointer went down. */ @@ -85,7 +89,8 @@ export default class TwoUp extends HTMLElement { // Set the initial position of the handle. requestAnimationFrame(() => { const bounds = this.getBoundingClientRect(); - this._position = (this.orientation === 'vertical' ? bounds.height : bounds.width) / 2; + this._position = (this.orientation === 'vertical' ? + bounds.height : bounds.width) * this._relativePosition; this._setPosition(); }); } @@ -146,6 +151,7 @@ export default class TwoUp extends HTMLElement { // Clamp position to element bounds. this._position = Math.max(0, Math.min(this._position, bounds[dimensionAxis])); + this._relativePosition = this._position / bounds[dimensionAxis]; this._setPosition(); } From 9d7212bc1d1ed988d91c406b934f2ec879354280 Mon Sep 17 00:00:00 2001 From: Ewa Gasperowicz Date: Mon, 17 Sep 2018 13:25:33 +0200 Subject: [PATCH 4/5] Review code format fixes --- .../Output/custom-els/TwoUp/index.ts | 2 +- .../custom-els/TwoUp/missing-types.d.ts | 24 +++++++++---------- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/src/components/Output/custom-els/TwoUp/index.ts b/src/components/Output/custom-els/TwoUp/index.ts index f07d5e6c..4d61d60e 100644 --- a/src/components/Output/custom-els/TwoUp/index.ts +++ b/src/components/Output/custom-els/TwoUp/index.ts @@ -42,7 +42,7 @@ export default class TwoUp extends HTMLElement { .observe(this, { childList: true }); // Watch for element size changes. - if (window.hasOwnProperty('ResizeObserver')) { + if ('ResizeObserver' in window) { new ResizeObserver(() => this._resetPosition()) .observe(this); } else { 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 d2f9c994..b3c129d5 100644 --- a/src/components/Output/custom-els/TwoUp/missing-types.d.ts +++ b/src/components/Output/custom-els/TwoUp/missing-types.d.ts @@ -31,21 +31,19 @@ interface DOMRectReadOnly { readonly left: number; } -declare global { - interface ResizeObserverCallback { - (entries: ResizeObserverEntry[], observer: ResizeObserver): void; - } +interface ResizeObserverCallback { + (entries: ResizeObserverEntry[], observer: ResizeObserver): void; +} - interface ResizeObserverEntry { - readonly target: Element; - readonly contentRect: DOMRectReadOnly; - } +interface ResizeObserverEntry { + readonly target: Element; + readonly contentRect: DOMRectReadOnly; +} - interface ResizeObserver { - observe(target: Element): void; - unobserve(target: Element): void; - disconnect(): void; - } +interface ResizeObserver { + observe(target: Element): void; + unobserve(target: Element): void; + disconnect(): void; } declare var ResizeObserver: { From 76b34c62db64917a893ab5714bc222edc5dacdd6 Mon Sep 17 00:00:00 2001 From: Ewa Gasperowicz Date: Tue, 18 Sep 2018 07:26:51 +0200 Subject: [PATCH 5/5] Review code format fixes --- src/components/Output/custom-els/TwoUp/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Output/custom-els/TwoUp/index.ts b/src/components/Output/custom-els/TwoUp/index.ts index 4d61d60e..0c76a5d2 100644 --- a/src/components/Output/custom-els/TwoUp/index.ts +++ b/src/components/Output/custom-els/TwoUp/index.ts @@ -89,8 +89,8 @@ export default class TwoUp extends HTMLElement { // Set the initial position of the handle. requestAnimationFrame(() => { const bounds = this.getBoundingClientRect(); - this._position = (this.orientation === 'vertical' ? - bounds.height : bounds.width) * this._relativePosition; + const dimensionAxis = this.orientation === 'vertical' ? 'height' : 'width'; + this._position = bounds[dimensionAxis] * this._relativePosition; this._setPosition(); }); }