1.js 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /* global document */
  6. import { getOptimalPosition } from '../../../../src/dom/position';
  7. const source = document.querySelector( '.source' );
  8. const target = document.querySelector( '.target' );
  9. const limiter = document.querySelector( '.limiter' );
  10. const positions = {
  11. above: ( targetRect, sourceRect ) => ( {
  12. top: targetRect.top - sourceRect.height - 50,
  13. left: targetRect.left,
  14. name: 'above'
  15. } ),
  16. below: targetRect => ( {
  17. top: targetRect.bottom + 50,
  18. left: targetRect.left,
  19. name: 'below'
  20. } )
  21. };
  22. function updateSourcePosition() {
  23. const position = getOptimalPosition( {
  24. element: source,
  25. target,
  26. positions: [
  27. positions.above,
  28. positions.below
  29. ],
  30. limiter
  31. } );
  32. source.style.top = position.top + 'px';
  33. source.style.left = position.left + 'px';
  34. }
  35. updateSourcePosition();
  36. document.addEventListener( 'scroll', updateSourcePosition, true );