balloonpanelview.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  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. /* globals document */
  6. import BalloonPanelView from '../../../../src/panel/balloon/balloonpanelview';
  7. const defaultPositions = BalloonPanelView.defaultPositions;
  8. const container = document.querySelector( '#container' );
  9. let currentHeading = '';
  10. for ( const i in defaultPositions ) {
  11. const target = document.createElement( 'div' );
  12. const heading = document.createElement( 'h1' );
  13. const headingText = parseHeadingText( i );
  14. heading.textContent = headingText;
  15. target.classList.add( 'target' );
  16. // Lazy heading
  17. if ( currentHeading !== headingText ) {
  18. container.appendChild( heading );
  19. currentHeading = headingText;
  20. }
  21. container.appendChild( target );
  22. const balloon = new BalloonPanelView();
  23. balloon.render();
  24. balloon.element.textContent = i;
  25. document.body.appendChild( balloon.element );
  26. balloon.attachTo( {
  27. target,
  28. positions: [
  29. defaultPositions[ i ]
  30. ]
  31. } );
  32. }
  33. function parseHeadingText( text ) {
  34. const normalizedText = getNormalizeHeading( text );
  35. return getCapitalizedHeading( normalizedText );
  36. }
  37. // This helper function creates normalize heading text from a full name of the position,
  38. // removing `ArrowXyz` part, like in the example:
  39. // `southEastArrowNorthMiddleEast` -> `south East`.
  40. function getNormalizeHeading( text ) {
  41. return text
  42. .replace( /(w*)arrow\w*/i, '$1' )
  43. .replace( /([a-z])([A-Z])/, '$1 $2' );
  44. }
  45. function getCapitalizedHeading( text ) {
  46. return text.charAt( 0 ).toUpperCase() + text.slice( 1 );
  47. }