ryan/squoosh
1
0
Fork 0
forked from external-repos/squoosh
Code Pull Requests Activity

Reposition the TwoUp handle on resize

Browse Source
This commit is contained in:
Ewa Gasperowicz
2018-09-17 11:08:54 +02:00
parent 5e8dc1b26c
commit 2a47f67214
2 changed files with 38 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 = `<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>`;
this._childrenChange();