external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-15 18:19:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #168 from GoogleChromeLabs/devnook-fix-105

Browse Source 
Reposition the TwoUp handle on resize
This commit is contained in:
Ewa
2018-09-18 07:29:21 +02:00
committed by GitHub
parent 5e8dc1b26c 76b34c62db
commit 09e60284cb
2 changed files with 47 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Output/custom-els/TwoUp/index.ts
View File

@@ -18,6 +18,10 @@ export default class TwoUp extends HTMLElement {
* The position of the split in pixels. * The position of the split in pixels.
*/ */
private _position = 0; private _position = 0;
/**
* The position of the split in %.
*/
private _relativePosition = 0.5;
/** /**
* The value of _position when the pointer went down. * The value of _position when the pointer went down.
*/ */
@@ -37,6 +41,14 @@ export default class TwoUp extends HTMLElement {
new MutationObserver(() => this._childrenChange()) new MutationObserver(() => this._childrenChange())
.observe(this, { childList: true }); .observe(this, { childList: true });
// Watch for element size changes.
if ('ResizeObserver' in window) {
new ResizeObserver(() => this._resetPosition())
.observe(this);
} else {
window.addEventListener('resize', () => this._resetPosition());
}
// Watch for pointers on the handle. // Watch for pointers on the handle.
const pointerTracker: PointerTracker = new PointerTracker(this._handle, { const pointerTracker: PointerTracker = new PointerTracker(this._handle, {
start: (_, event) => { start: (_, event) => {
@@ -57,7 +69,7 @@ export default class TwoUp extends HTMLElement {
connectedCallback() { connectedCallback() {
this._handle.innerHTML = `<div class="${styles.scrubber}">${ this._handle.innerHTML = `<div class="${styles.scrubber}">${
`<svg viewBox="0 0 20 10" fill="currentColor"><path d="M8 0v10L0 5zM12 0v10l8-5z"/></svg>` '<svg viewBox="0 0 20 10" fill="currentColor"><path d="M8 0v10L0 5zM12 0v10l8-5z"/></svg>'
}</div>`; }</div>`;
this._childrenChange(); this._childrenChange();
@@ -77,7 +89,8 @@ export default class TwoUp extends HTMLElement {
// Set the initial position of the handle. // Set the initial position of the handle.
requestAnimationFrame(() => { requestAnimationFrame(() => {
const bounds = this.getBoundingClientRect(); const bounds = this.getBoundingClientRect();
this._position = (this.orientation === 'vertical' ? bounds.height : bounds.width) / 2; const dimensionAxis = this.orientation === 'vertical' ? 'height' : 'width';
this._position = bounds[dimensionAxis] * this._relativePosition;
this._setPosition(); this._setPosition();
}); });
} }
@@ -138,6 +151,7 @@ export default class TwoUp extends HTMLElement {
// Clamp position to element bounds. // Clamp position to element bounds.
this._position = Math.max(0, Math.min(this._position, bounds[dimensionAxis])); this._position = Math.max(0, Math.min(this._position, bounds[dimensionAxis]));
this._relativePosition = this._position / bounds[dimensionAxis];
this._setPosition(); this._setPosition();
} }

31
src/components/Output/custom-els/TwoUp/missing-types.d.ts vendored
View File

@@ -19,3 +19,34 @@ declare namespace JSX {
'two-up': TwoUpAttributes; '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;
}
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;
};