Resizer.js 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import { UIElement } from './libs/ui.js';
  2. function Resizer( editor ) {
  3. const signals = editor.signals;
  4. const dom = document.createElement( 'div' );
  5. dom.id = 'resizer';
  6. function onPointerDown( event ) {
  7. if ( event.isPrimary === false ) return;
  8. dom.ownerDocument.addEventListener( 'pointermove', onPointerMove, false );
  9. dom.ownerDocument.addEventListener( 'pointerup', onPointerUp, false );
  10. }
  11. function onPointerUp( event ) {
  12. if ( event.isPrimary === false ) return;
  13. dom.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
  14. dom.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
  15. }
  16. function onPointerMove( event ) {
  17. // PointerEvent's movementX/movementY are 0 in WebKit
  18. if ( event.isPrimary === false ) return;
  19. const rect = dom.getBoundingClientRect();
  20. const x = ( document.body.offsetWidth - rect.right ) - event.movementX;
  21. dom.style.right = x + 'px';
  22. document.getElementById( 'sidebar' ).style.width = ( x + rect.width ) + 'px';
  23. document.getElementById( 'viewport' ).style.right = ( x + rect.width ) + 'px';
  24. signals.windowResize.dispatch();
  25. }
  26. dom.addEventListener( 'pointerdown', onPointerDown, false );
  27. return new UIElement( dom );
  28. }
  29. export { Resizer };