diff --git a/lib/cosmoz-omnitable-resize-nub.js b/lib/cosmoz-omnitable-resize-nub.js index e1ba01f9..2ec88c67 100644 --- a/lib/cosmoz-omnitable-resize-nub.js +++ b/lib/cosmoz-omnitable-resize-nub.js @@ -1,38 +1,41 @@ import { useEffect, component } from '@pionjs/pion'; import { nothing } from 'lit-html'; -const - ResizeNub = host => { - useEffect(() => { - let initial = 0, - initialWidth = 0; - const - move = ev => { - host.dispatchEvent(new CustomEvent('column-resize', { +const ResizeNub = (host) => { + const { column } = host; + + useEffect(() => { + let initial = 0; + let initialWidth = 0; + const move = (ev) => { + host.dispatchEvent( + new CustomEvent('column-resize', { bubbles: true, composed: true, detail: { newWidth: Math.ceil(initialWidth + ev.pageX - initial), - column: host.column - } - })); - }, - stop = () => { - document.removeEventListener('pointermove', move); - document.removeEventListener('pointerup', stop); - }, - start = ev => { - initial = ev.pageX; - initialWidth = host.previousElementSibling.getBoundingClientRect().width; - document.addEventListener('pointermove', move); - document.addEventListener('pointerup', stop); - }; - host.addEventListener('pointerdown', start); + column, + }, + }), + ); + }, + stop = () => { + document.removeEventListener('pointermove', move); + document.removeEventListener('pointerup', stop); + }, + start = (ev) => { + initial = ev.pageX; + initialWidth = + host.previousElementSibling.getBoundingClientRect().width; + document.addEventListener('pointermove', move); + document.addEventListener('pointerup', stop); + }; + host.addEventListener('pointerdown', start); - return () => host.removeEventListener('pointerdown', start); - }, [host.nextElementSibling]); + return () => host.removeEventListener('pointerdown', start); + }, [column]); - return nothing; - }; + return nothing; +}; customElements.define('cosmoz-omnitable-resize-nub', component(ResizeNub));